# Tabs

## Overview

_[Design to fill]_

- **When to use**: _[Design to fill]_
- **When not to use**: _[Design to fill]_

## Anatomy

_[Design to fill]_

## Props / API

`Tabs` is a compound component built on the Base UI `Tabs` primitive.

### `Tabs`

Root of the tabs interface. Renders the Base UI `Tabs.Root`.

| Prop            | Type                              | Default | Description                                          |
| --------------- | --------------------------------- | ------- | ---------------------------------------------------- |
| `value`         | `string \| null`                  | -       | Controlled value of the currently selected tab.      |
| `defaultValue`  | `string \| null`                  | -       | Value of the tab selected by default (uncontrolled). |
| `onValueChange` | `(value: string \| null) => void` | -       | Called when the selected tab changes.                |
| `children`      | `React.ReactNode`                 | -       | The `Tabs.Container` and `Tabs.Panel` elements.      |

### `Tabs.Container`

Layout wrapper around the tab list.

Extends `React.HTMLAttributes<HTMLDivElement>`. All standard `<div>` attributes are forwarded via `...rest`.

### `Tabs.Container.List`

The tab list.

| Prop              | Type      | Default | Description                                                   |
| ----------------- | --------- | ------- | ------------------------------------------------------------- |
| `activateOnFocus` | `boolean` | -       | Selects a tab as soon as it receives focus during navigation. |
| `loopFocus`       | `boolean` | -       | Wraps arrow-key focus from the last tab back to the first.    |

Extends `React.HTMLAttributes<HTMLDivElement>`. All standard `<div>` attributes are forwarded via `...rest`.

### `Tabs.Container.List.Tab`

An individual tab trigger. Renders the Base UI `Tabs.Tab` as a `<button>`.

| Prop       | Type      | Default | Description                                 |
| ---------- | --------- | ------- | ------------------------------------------- |
| `value`    | `string`  | -       | Value matching the panel this tab controls. |
| `disabled` | `boolean` | -       | Disables the tab so it cannot be selected.  |

Extends `React.ButtonHTMLAttributes<HTMLButtonElement>`. All standard `<button>` attributes are forwarded via `...rest`.

### `Tabs.Panel`

The content region for a tab. Renders the Base UI `Tabs.Panel`.

| Prop          | Type      | Default | Description                                                            |
| ------------- | --------- | ------- | ---------------------------------------------------------------------- |
| `value`       | `string`  | -       | Value matching the tab that controls this panel.                       |
| `keepMounted` | `boolean` | -       | Keeps the panel mounted in the DOM while hidden instead of unmounting. |

Extends `React.HTMLAttributes<HTMLDivElement>`. All standard `<div>` attributes are forwarded via `...rest`.

## States

- Default (idle)
- Hover
- Focus-visible
- Selected (active tab)
- Disabled (per tab)

## Code examples

```tsx
import { Tabs } from "@mylighthouse/prism-react";

export default function TabsExample(): React.JSX.Element {
  return (
    <Tabs defaultValue="overview">
      <Tabs.Container>
        <Tabs.Container.List>
          <Tabs.Container.List.Tab value="overview">
            Overview
          </Tabs.Container.List.Tab>
          <Tabs.Container.List.Tab value="details">
            Details
          </Tabs.Container.List.Tab>
          <Tabs.Container.List.Tab value="settings">
            Settings
          </Tabs.Container.List.Tab>
        </Tabs.Container.List>
      </Tabs.Container>
      <Tabs.Panel className="p-400" value="overview">
        <h3>Overview</h3>
        <p>A high-level summary of this resource.</p>
      </Tabs.Panel>
      <Tabs.Panel className="p-400" value="details">
        <h3>Details</h3>
        <p>Specific information about properties and configuration.</p>
      </Tabs.Panel>
      <Tabs.Panel className="p-400" value="settings">
        <h3>Settings</h3>
        <p>Preferences and configuration options for this resource.</p>
      </Tabs.Panel>
    </Tabs>
  );
}
```

## A11y intent

_[Design to fill]_

- Built on the Base UI `Tabs` primitive, so the `tablist`, `tab`, and `tabpanel` roles and their relationships are provided.
- Each tab exposes `aria-selected` and is wired to its panel via `aria-controls`; the panel points back with `aria-labelledby`.
- Arrow-key navigation moves focus between tabs; `loopFocus` wraps focus from the last tab back to the first, and `activateOnFocus` selects a tab as it receives focus.
- Tabs render as real `<button>` elements, so keyboard operation and focus are handled correctly.
- A `disabled` tab stays in the accessibility tree so its state is announced but cannot be selected.

## Cross-references

_[Design to fill]_