# FolderTabs and SegmentedControl

> Folder tabs that sit on a glass panel with always-visible counts, and a segmented control for views.

Category: Navigation. Docs page: https://rime.mjsons.net/components/tabs

## Installation

```bash
npx shadcn@latest add KezLahd/rime/tabs
```

FolderTabs switch between queues of the same list (Open, In review, Cancelled). Each tab shows its count so the workload reads without opening each; the panel's top-left corner squares off so the tabs sit on it.

SegmentedControl switches the view of the same content (Chart or Table, List or Board). The active segment is a white key lifted out of a recess.

## Usage

```tsx
import { FolderTabs, SegmentedControl } from "@/components/ui";

<SegmentedControl aria-label="View" value={view} onChange={setView} options={[{ value: "chart", label: "Chart" }, { value: "table", label: "Table" }]} />
```

## Props: FolderTabs

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tabs` (required) | `ReadonlyArray<FolderTab>` |  |  |
| `value` (required) | `string` |  |  |
| `onChange` (required) | `(id: string) => void` |  |  |
| `aria-label` (required) | `string` |  |  |
| `children` (required) | `ReactNode` |  | Content of the active tab's panel. |
| `panelPadding` | `GlassPanelProps["padding"]` | `"md"` |  |
| `panelVariant` | `GlassPanelProps["variant"]` | `"page"` |  |
| `className` | `string` |  |  |

## Props: SegmentedControl

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `options` (required) | `ReadonlyArray<SegmentedOption<V>>` |  |  |
| `value` (required) | `V` |  |  |
| `onChange` (required) | `(value: V) => void` |  |  |
| `aria-label` (required) | `string` |  |  |
| `size` | `"sm" \| "md"` | `"md"` |  |
| `className` | `string` |  |  |

## Examples

### Folder tabs

```tsx
<FolderTabs aria-label="Orders" tabs={[{ id: "open", label: "Open", count: 12 }, { id: "review", label: "In review", count: 4, colour: "amber" }]} value={tab} onChange={setTab}>…</FolderTabs>
```

### Segmented control

```tsx
<SegmentedControl aria-label="View" value={view} onChange={setView} options={VIEWS} />
```

## Theme tokens

Per-component tokens. Undeclared by default: the default below is the fallback the CSS uses. Set any of them at :root or on a wrapper to restyle every instance.

| Token | Default |
| --- | --- |
| `--r-flat` | `max(0px, calc(var(--segmented-radius, var(--r-sm)) - 3px))` |
| `--segmented-radius` | `var(--r-sm)` |
| `--tab-brand-active-from` | `#fdfcff` |
| `--tab-brand-active-to` | `#f3eefb` |
| `--tab-brand-from` | `#f7f4fc` |
| `--tab-brand-ink` | `#4e3470` |
| `--tab-brand-rgb` | `78, 52, 112` |
| `--tab-brand-to` | `#efe9f8` |
| `--tab-pad-x` | `calc(20px * var(--density))` |
| `--tab-radius` | `var(--r-md)` |

System tokens it reads: `--danger-ink`, `--density`, `--dur`, `--dur-fast`, `--ease`, `--focus-color`, `--focus-ring`, `--ink-body`, `--ink-brand`, `--ink-disabled`, `--ink-muted`, `--ink-secondary`, `--r-md`, `--r-sm`, `--recess-fill`, `--rgb-brand`, `--rgb-contact`, `--rgb-white`, `--shadow-panel`, `--shadow-recess`, `--shadow-specular`, `--success-ink`, `--surface-solid`, `--text-caption`, `--text-small`, `--warning-ink`.

## Accessibility

- FolderTabs implement the ARIA tabs pattern: role="tablist", arrow keys move between tabs, the panel is role="tabpanel".
- SegmentedControl is a radiogroup: arrow keys change the value.

## Do

- Always show counts on folder tabs.

## Don't

- Don't use folder tabs for page navigation; that is the sidebar.