Temporary fork

This is a temporary fork of the @reach/tabs package from Reach UI so we can use this PR internally before it's merged.

It's not a "real" GitHub fork because the Reach UI project is a monorepo, and you can't currently target a GitHub repo subdirectory in package.json (see this yarn issue or this npm issue). So instead, we created this fork manually with these steps:

• In a local reach-ui clone, with this PR's branch checked out:

  yarn clean
  yarn install
  yarn build

• mkdir ../reach-tabs

• cp .gitignore ../reach-tabs/

• cd ../reach-tabs

• git init, commit, and push to a new GitHub repo

The files in dist/ are included intentionally, because we'll be using this package directly from GitHub rather than publishing it to a package registry.

@reach/tabs

Docs | Source | WAI-ARIA

An accessible tabs component.

The Tab and TabPanel elements are associated by their order in the tree. None of the components are empty wrappers, each is associated with a real DOM element in the document, giving you maximum control over styling and composition.

You can render any other elements you want inside of Tabs, but TabList should only render Tab elements, and TabPanels should only render TabPanel elements.

import { Tabs, TabList, Tab, TabPanels, TabPanel } from "@reach/tabs";
import "@reach/tabs/styles.css";

function Example() {
  return (
    <Tabs>
      <TabList>
        <Tab>One</Tab>
        <Tab>Two</Tab>
        <Tab>Three</Tab>
      </TabList>

      <TabPanels>
        <TabPanel>
          <p>one!</p>
        </TabPanel>
        <TabPanel>
          <p>two!</p>
        </TabPanel>
        <TabPanel>
          <p>three!</p>
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
}