<!-- source-hash: eea14186773eb206e54d1ffb8e785935 -->
Storybook stories for the `TabSelector` UI component, showcasing all supported variants, states, and composition patterns.

## Key Components

### Exported Stories

| Story | Description |
|-------|-------------|
| `Primary` | Accent background on active tab (default variant) |
| `Secondary` | Soft grey background on active tab |
| `FiveTabs` | Full 5-tab layout matching Figma spec |
| `WithIcons` | Tabs with Lucide icon prefixes |
| `WithLabel` | Optional label rendered above the selector |
| `WithDisabled` | Single tab disabled via `disabled` item property |
| `Disabled` | Entire selector disabled via top-level `disabled` prop |
| `TwoTabs` | Minimal two-tab configuration |
| `PlatformExample` | Real-world OS platform picker with icons and label |
| `VariantComparison` | Side-by-side `accent` vs `secondary` rendering |
| `WithBadges` | Tabs with badge slots (e.g., "Soon" pill on Enterprise) |

### `TabSelectorItem` Shape

```typescript
interface TabSelectorItem {
  id: string;
  label: string;
  icon?: React.ReactNode;
  disabled?: boolean;
  badge?: React.ReactNode;
}
```

## Usage Example

```typescript
import { TabSelector, type TabSelectorItem } from '../components/ui/tab-selector';
import { useState } from 'react';

const platforms: TabSelectorItem[] = [
  { id: 'windows', label: 'Windows', icon: <Monitor className="w-5 h-5" /> },
  { id: 'macos',   label: 'macOS',   icon: <Apple   className="w-5 h-5" /> },
  { id: 'linux',   label: 'Linux',   icon: <Globe   className="w-5 h-5" />, disabled: true },
];

export function PlatformPicker() {
  const [platform, setPlatform] = useState('macos');

  return (
    <TabSelector
      label="Select Platform"
      variant="primary"       // 'primary' | 'secondary'
      value={platform}
      onValueChange={setPlatform}
      items={platforms}
    />
  );
}
```

## Notes

- All stories use a controlled `useState` render function to ensure interactive tab switching works correctly in Storybook.
- The decorator wraps every story in a `600px` wide container to match typical usage contexts.
- Badge content accepts any `React.ReactNode`, allowing custom pills, icons, or counters per tab.