Storybook stories for the `TabSelector` UI component, covering all visual variants, states, and real-world usage patterns. ## Key Components | Export | Description | |---|---| | `Primary` | Active tab with accent background (primary variant) | | `Secondary` | Active tab with soft grey background (secondary variant) | | `FiveTabs` | Full five-tab layout matching Figma design spec | | `WithIcons` | Tabs rendered with Lucide icon elements | | `WithLabel` | Selector with an optional label rendered above | | `WithDisabled` | Single tab item marked as `disabled: true` | | `Disabled` | Entire selector disabled via top-level `disabled` prop | | `TwoTabs` | Minimal two-tab configuration | | `PlatformExample` | Real-world OS picker with icons and a label | | `VariantComparison` | Side-by-side `primary` and `secondary` variant display | | `WithBadges` | Tabs with inline badge elements (e.g. "Soon" label on a disabled tab) | ## Usage Example ```typescript import { TabSelector, type TabSelectorItem } from '../components/ui/tab-selector'; import { useState } from 'react'; const items: TabSelectorItem[] = [ { id: 'windows', label: 'Windows' }, { id: 'macos', label: 'macOS' }, { id: 'linux', label: 'Linux', disabled: true }, ]; export function PlatformPicker() { const [platform, setPlatform] = useState('windows'); return ( ); } ``` ## Notes - All stories use a stateful `Render` wrapper so tab selection is interactive inside Storybook. - The `WithBadges` story demonstrates the `badge` prop on `TabSelectorItem`, which accepts any React node and is suitable for status indicators. - The decorator wraps every story in a `600px` container to match typical usage widths. **Source:** [`TabSelector.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/TabSelector.stories.tsx)