<!-- source-hash: 0e28e1e106dbf76027ae86587226825d -->
A accessible, styled tab selector component that renders a group of toggle buttons for switching between views or options, supporting icons, badges, disabled states, and two visual variants.

## Key Components

### Interfaces
- **`TabSelectorItem`** — Defines individual tab configuration: `id`, optional `label`, `ariaLabel` (required for icon-only tabs), `icon`, `disabled`, and `badge`
- **`TabSelectorProps`** — Component props including `value`, `onValueChange`, `items`, `variant`, `label`, `disabled`, and `className`

### Component
- **`TabSelector`** — Controlled tab button group that maps `items` to styled `<button>` elements, applying active/disabled/hover styles based on state and variant

## Usage Example

```typescript
import { TabSelector } from './tab-selector'
import { LayoutGrid, List } from 'lucide-react'

const [view, setView] = React.useState('grid')

<TabSelector
  value={view}
  onValueChange={setView}
  label="View Mode"
  variant="primary"
  items={[
    { id: 'grid', label: 'Grid', icon: <LayoutGrid /> },
    { id: 'list', label: 'List', icon: <List /> },
    { id: 'map',  label: 'Map',  disabled: true },
  ]}
/>
```

## Notes

| Prop | Default | Description |
|------|---------|-------------|
| `variant` | `primary` | `primary` uses accent background; `secondary` uses surface grey |
| `disabled` | `undefined` | Disables all tabs when set; overrides per-item `disabled` |
| `ariaLabel` | — | Required on items where `label` is omitted (icon-only) |