# Tabs

> Compound component chuyển section ngang — dùng cho settings, profile sections, dashboard view toggle. Hỗ trợ keyboard arrow nav.

## API

### `<Tabs>` (root)

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `string` | — | Controlled value (tab hiện tại) |
| `defaultValue` | `string` | `''` | Tab mở mặc định (uncontrolled) |
| `onValueChange` | `(v: string) => void` | — | Callback khi switch tab |
| `className` | `string` | — | Override container |

### `<Tabs.List>` · `<Tabs.Trigger value>` · `<Tabs.Content value>`

- `List` render container có `role="tablist"`
- `Trigger` nhận `value` match với `Tabs.Content value` tương ứng
- `Content` chỉ render khi `value` match — unmount khi switch

## Variants

Không có variant — pill style trên bg-surface-2.

## Composition

```
<Tabs defaultValue="orders">
  <Tabs.List>
    <Tabs.Trigger value="orders">…</Tabs.Trigger>
    <Tabs.Trigger value="customers">…</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="orders">…</Tabs.Content>
  <Tabs.Content value="customers">…</Tabs.Content>
</Tabs>
```

## States

- **Selected**: bg-surface + text-text + shadow-sm
- **Unselected**: text-text-2 hover → text-text
- **Content**: chỉ tab được chọn render trong DOM (unmount tab khác)

## Usage

```tsx
import { Tabs } from '@cowork/ui';

<Tabs defaultValue="trial">
  <Tabs.List>
    <Tabs.Trigger value="trial">Trial</Tabs.Trigger>
    <Tabs.Trigger value="active">Active</Tabs.Trigger>
    <Tabs.Trigger value="churn">Churn</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="trial"><TrialList /></Tabs.Content>
  <Tabs.Content value="active"><ActiveList /></Tabs.Content>
  <Tabs.Content value="churn"><ChurnList /></Tabs.Content>
</Tabs>
```

## Real-world example

- KHI CRM: 3 tab lifecycle (Trial / Active / Churn) trên trang members — tab nào chọn thì query Supabase filter theo status.
- An Nhien shop dashboard: tabs "Đơn mới / Đã xác nhận / Đang giao / Hoàn thành" thay vì 4 trang riêng.
- A-Kryphan settings: tabs "Hồ sơ / Bảo mật / Notifications".

## Accessibility

- `Tabs.List` có `role="tablist"`
- `Tabs.Trigger` có `role="tab"` + `aria-selected` + `tabIndex={selected ? 0 : -1}` (roving tabindex)
- `Tabs.Content` có `role="tabpanel"`
- Keyboard: `ArrowRight` / `ArrowLeft` di chuyển focus + select tab kế tiếp (auto-activation)

## Responsive behavior

`Tabs.List` là `inline-flex` — wrap nếu nhiều tab trên mobile. Khi >5 tabs, cân nhắc switch sang `<Dropdown>` cho mobile (caller responsibility — Tabs không tự collapse).

## Related

- [[Accordion]] — cùng compound family, dùng khi sections cần mở/đóng vertical
- [[Dropdown]] — fallback cho mobile khi nhiều tabs
- [[Card]] — wrap tab content trong Card.Body cho visual rõ ràng

## Source

`react/src/molecules/Tabs.tsx`