@usefragments/ui 1.6.0 → 2.0.0

package/fragments.json

@@ -1 +1 @@
-{"version":"1.0.0","generatedAt":"2026-08-01T23:17:40.345Z","generatorVersion":"sha256:a5108c94d932561cb922ad2f00faffd381a6e361a08dd22d7b1026264a52f1db","buildInputs":["fragments.config.ts","src/assets/fragments-logo.tsx","src/assets/fragments-wordmark.tsx","src/blocks/AccountSettings.block.ts","src/blocks/ActivityFeed.block.ts","src/blocks/ActivityFeedSkeleton.block.ts","src/blocks/BlogEditor.block.ts","src/blocks/ChatInterface.block.ts","src/blocks/ChatMessages.block.ts","src/blocks/CheckoutForm.block.ts","src/blocks/CommandPalette.block.ts","src/blocks/ContactForm.block.ts","src/blocks/DashboardLayout.block.ts","src/blocks/DashboardPage.block.ts","src/blocks/DashboardSkeleton.block.ts","src/blocks/DataTable.block.ts","src/blocks/EmptyState.block.ts","src/blocks/FAQSection.block.ts","src/blocks/FeatureGrid.block.ts","src/blocks/HeroSection.block.ts","src/blocks/LoginForm.block.ts","src/blocks/NavigationHeader.block.ts","src/blocks/PaginatedTable.block.ts","src/blocks/PricingComparison.block.ts","src/blocks/ProductCard.block.ts","src/blocks/RegistrationForm.block.ts","src/blocks/SettingsDrawer.block.ts","src/blocks/SettingsPanel.block.ts","src/blocks/ShoppingCart.block.ts","src/blocks/StatsCard.block.ts","src/blocks/StatsCardSkeleton.block.ts","src/blocks/TableSkeleton.block.ts","src/blocks/ThinkingStates.block.ts","src/blocks/components/ActivityFeed.tsx","src/blocks/components/DashboardLayout.tsx","src/blocks/components/LoginForm.tsx","src/blocks/components/StatsCard.tsx","src/components/Accordion/Accordion.contract.json","src/components/Accordion/Accordion.stories.tsx","src/components/Accordion/index.tsx","src/components/Alert/Alert.contract.json","src/components/Alert/Alert.stories.tsx","src/components/Alert/index.tsx","src/components/AppShell/AppShell.contract.json","src/components/AppShell/AppShell.stories.tsx","src/components/AppShell/index.tsx","src/components/Avatar/Avatar.contract.json","src/components/Avatar/Avatar.stories.tsx","src/components/Avatar/index.tsx","src/components/Badge/Badge.contract.json","src/components/Badge/Badge.stories.tsx","src/components/Badge/index.tsx","src/components/BentoGrid/BentoGrid.contract.json","src/components/BentoGrid/BentoGrid.stories.tsx","src/components/BentoGrid/index.tsx","src/components/Box/Box.contract.json","src/components/Box/Box.stories.tsx","src/components/Box/index.tsx","src/components/Breadcrumbs/Breadcrumbs.contract.json","src/components/Breadcrumbs/Breadcrumbs.stories.tsx","src/components/Breadcrumbs/index.tsx","src/components/Button/Button.contract.json","src/components/Button/Button.stories.tsx","src/components/Button/index.tsx","src/components/ButtonGroup/ButtonGroup.contract.json","src/components/ButtonGroup/ButtonGroup.stories.tsx","src/components/ButtonGroup/index.tsx","src/components/Card/Card.contract.json","src/components/Card/Card.stories.tsx","src/components/Card/index.tsx","src/components/Chart/Chart.contract.json","src/components/Chart/Chart.stories.tsx","src/components/Chart/index.tsx","src/components/Checkbox/Checkbox.contract.json","src/components/Checkbox/Checkbox.stories.tsx","src/components/Checkbox/index.tsx","src/components/Chip/Chip.contract.json","src/components/Chip/Chip.stories.tsx","src/components/Chip/index.tsx","src/components/Cloud/CloudGovernanceShell.stories.tsx","src/components/Cloud/ControlSizing.stories.tsx","src/components/Cloud/DashboardLayoutPrototypes.shared.tsx","src/components/Cloud/DashboardLayoutPrototypes.shell.tsx","src/components/Cloud/DashboardLayoutPrototypes.stories.tsx","src/components/Cloud/GeometryEvidence.stories.tsx","src/components/Cloud/PullRequestsPrototypes.content.tsx","src/components/Cloud/PullRequestsPrototypes.detail-panels.tsx","src/components/Cloud/PullRequestsPrototypes.detail.tsx","src/components/Cloud/PullRequestsPrototypes.id-page.tsx","src/components/Cloud/PullRequestsPrototypes.stories.tsx","src/components/CodeBlock/CodeBlock.contract.json","src/components/CodeBlock/CodeBlock.stories.tsx","src/components/CodeBlock/index.tsx","src/components/Collapsible/Collapsible.contract.json","src/components/Collapsible/Collapsible.stories.tsx","src/components/Collapsible/index.tsx","src/components/ColorPicker/ColorPicker.contract.json","src/components/ColorPicker/ColorPicker.stories.tsx","src/components/ColorPicker/index.tsx","src/components/Combobox/Combobox.contract.json","src/components/Combobox/Combobox.stories.tsx","src/components/Combobox/index.tsx","src/components/Command/Command.contract.json","src/components/Command/Command.stories.tsx","src/components/Command/index.tsx","src/components/ComponentDefaults/index.tsx","src/components/ConversationList/ConversationList.contract.json","src/components/ConversationList/ConversationList.stories.tsx","src/components/ConversationList/index.tsx","src/components/DataTable/DataTable.contract.json","src/components/DataTable/DataTable.icons.tsx","src/components/DataTable/DataTable.stories.tsx","src/components/DataTable/DataTable.support.tsx","src/components/DataTable/DataTable.virtual.tsx","src/components/DataTable/index.tsx","src/components/DatePicker/DatePicker.contract.json","src/components/DatePicker/DatePicker.stories.tsx","src/components/DatePicker/index.tsx","src/components/Dialog/Dialog.contract.json","src/components/Dialog/Dialog.stories.tsx","src/components/Dialog/index.tsx","src/components/Drawer/Drawer.contract.json","src/components/Drawer/Drawer.stories.tsx","src/components/Drawer/index.tsx","src/components/Editor/Editor.contract.json","src/components/Editor/Editor.stories.tsx","src/components/Editor/index.tsx","src/components/EmptyState/EmptyState.contract.json","src/components/EmptyState/EmptyState.stories.tsx","src/components/EmptyState/index.tsx","src/components/Field/Field.contract.json","src/components/Field/Field.stories.tsx","src/components/Field/index.tsx","src/components/Fieldset/Fieldset.contract.json","src/components/Fieldset/Fieldset.stories.tsx","src/components/Fieldset/index.tsx","src/components/Form/Form.contract.json","src/components/Form/Form.stories.tsx","src/components/Form/index.tsx","src/components/Grid/Grid.contract.json","src/components/Grid/Grid.stories.tsx","src/components/Grid/index.tsx","src/components/Header/Header.contract.json","src/components/Header/Header.stories.tsx","src/components/Header/index.tsx","src/components/Icon/Icon.contract.json","src/components/Icon/Icon.stories.tsx","src/components/Icon/index.tsx","src/components/IconButton/IconButton.contract.json","src/components/IconButton/IconButton.stories.tsx","src/components/IconButton/index.tsx","src/components/Image/Image.contract.json","src/components/Image/Image.stories.tsx","src/components/Image/index.tsx","src/components/Input/Input.contract.json","src/components/Input/Input.stories.tsx","src/components/Input/index.tsx","src/components/Link/Link.contract.json","src/components/Link/Link.stories.tsx","src/components/Link/index.tsx","src/components/List/List.contract.json","src/components/List/List.stories.tsx","src/components/List/index.tsx","src/components/Listbox/Listbox.contract.json","src/components/Listbox/Listbox.stories.tsx","src/components/Listbox/index.tsx","src/components/Loading/Loading.contract.json","src/components/Loading/Loading.stories.tsx","src/components/Loading/index.tsx","src/components/Main/Main.contract.json","src/components/Main/Main.stories.tsx","src/components/Main/index.tsx","src/components/Markdown/Markdown.contract.json","src/components/Markdown/Markdown.stories.tsx","src/components/Markdown/index.tsx","src/components/Menu/Menu.contract.json","src/components/Menu/Menu.stories.tsx","src/components/Menu/index.tsx","src/components/Message/Message.contract.json","src/components/Message/Message.stories.tsx","src/components/Message/index.tsx","src/components/NavigationMenu/NavigationMenu.contract.json","src/components/NavigationMenu/NavigationMenu.stories.tsx","src/components/NavigationMenu/index.tsx","src/components/Pagination/Pagination.contract.json","src/components/Pagination/Pagination.stories.tsx","src/components/Pagination/index.tsx","src/components/Popover/Popover.contract.json","src/components/Popover/Popover.stories.tsx","src/components/Popover/index.tsx","src/components/Progress/Progress.contract.json","src/components/Progress/Progress.stories.tsx","src/components/Progress/index.tsx","src/components/Prompt/Prompt.contract.json","src/components/Prompt/Prompt.stories.tsx","src/components/Prompt/index.tsx","src/components/RadioGroup/RadioGroup.contract.json","src/components/RadioGroup/RadioGroup.stories.tsx","src/components/RadioGroup/index.tsx","src/components/ScrollArea/ScrollArea.contract.json","src/components/ScrollArea/ScrollArea.stories.tsx","src/components/ScrollArea/index.tsx","src/components/Select/Select.contract.json","src/components/Select/Select.stories.tsx","src/components/Select/index.tsx","src/components/Separator/Separator.contract.json","src/components/Separator/Separator.stories.tsx","src/components/Separator/index.tsx","src/components/Sidebar/Sidebar.contract.json","src/components/Sidebar/Sidebar.stories.tsx","src/components/Sidebar/index.tsx","src/components/Skeleton/Skeleton.contract.json","src/components/Skeleton/Skeleton.stories.tsx","src/components/Skeleton/index.tsx","src/components/Slider/Slider.contract.json","src/components/Slider/Slider.stories.tsx","src/components/Slider/index.tsx","src/components/Stack/Stack.contract.json","src/components/Stack/Stack.stories.tsx","src/components/Stack/index.tsx","src/components/Switch/Switch.contract.json","src/components/Switch/Switch.stories.tsx","src/components/Switch/index.tsx","src/components/Table/Table.contract.json","src/components/Table/Table.stories.tsx","src/components/Table/index.tsx","src/components/TableOfContents/TableOfContents.contract.json","src/components/TableOfContents/TableOfContents.stories.tsx","src/components/TableOfContents/index.tsx","src/components/Tabs/Tabs.contract.json","src/components/Tabs/Tabs.stories.tsx","src/components/Tabs/index.tsx","src/components/Text/Text.contract.json","src/components/Text/Text.stories.tsx","src/components/Text/index.tsx","src/components/Textarea/Textarea.contract.json","src/components/Textarea/Textarea.stories.tsx","src/components/Textarea/index.tsx","src/components/Theme/Theme.contract.json","src/components/Theme/Theme.stories.tsx","src/components/Theme/index.tsx","src/components/ThinkingIndicator/ThinkingIndicator.contract.json","src/components/ThinkingIndicator/ThinkingIndicator.stories.tsx","src/components/ThinkingIndicator/index.tsx","src/components/Toast/Toast.contract.json","src/components/Toast/Toast.stories.tsx","src/components/Toast/index.tsx","src/components/ToggleGroup/ToggleGroup.contract.json","src/components/ToggleGroup/ToggleGroup.stories.tsx","src/components/ToggleGroup/index.tsx","src/components/Tooltip/Tooltip.contract.json","src/components/Tooltip/Tooltip.stories.tsx","src/components/Tooltip/index.tsx","src/components/VisuallyHidden/VisuallyHidden.contract.json","src/components/VisuallyHidden/VisuallyHidden.stories.tsx","src/components/VisuallyHidden/index.tsx","src/measurements/MeasurementTargets.stories.tsx","src/test/utils.tsx","src/tokens/_component-properties.scss","src/tokens/_measurements.catalog.generated.css","src/tokens/_variables.scss","src/utils/a11y.tsx"],"packageName":"@usefragments/ui","fragments":{"Accordion":{"filePath":"src/components/Accordion/index.tsx","meta":{"name":"Accordion","description":"Vertically stacked, collapsible content sections. Use for organizing related content that can be progressively disclosed.","category":"layout","tags":["accordion","collapse","expand","disclosure","faq"],"status":"stable"},"usage":{"when":["FAQ pages with multiple questions and answers","Settings panels with grouped options","Long forms that benefit from progressive disclosure","Navigation menus with nested items"],"whenNot":["Primary content that all users need to see","Very short content (just display inline)","Sequential steps (use Stepper or wizard)","Tab-like navigation (use Tabs instead)"],"guidelines":["Keep section headers concise and descriptive","Use single mode when only one section should be open at a time","Use multiple mode when users may need to compare sections","Consider defaulting important sections to open","Avoid nesting accordions more than one level deep"],"accessibility":["Keyboard navigation with Enter/Space to toggle","Uses proper ARIA expanded/controls attributes","Focus is visible on accordion triggers"]},"props":{"type":{"type":"enum","description":"Whether one or multiple items can be open","default":"single","required":false,"values":["single","multiple"]},"value":{"type":"union","description":"Controlled open item(s): string in single mode, string[] in multiple mode","required":false},"defaultValue":{"type":"union","description":"Initially open item(s): string in single mode, string[] in multiple mode","required":false},"onValueChange":{"type":"union","description":"Called when open items change (single: string | undefined, multiple: string[])","required":false},"children":{"type":"node","description":"Accordion items (use Accordion.Item with Accordion.Trigger and Accordion.Content)","required":true},"collapsible":{"type":"boolean","description":"Whether all items can be closed (single mode only)","default":"false","required":false},"headingLevel":{"type":"union","description":"Semantic heading level for accordion triggers","default":"3","required":false,"values":["2","3","4","5","6"]}},"relations":[{"component":"Tabs","relationship":"alternative","note":"Use Tabs for horizontal switching between related views"},{"component":"Dialog","relationship":"alternative","note":"Use Dialog for focused content that interrupts the flow"},{"component":"Card","relationship":"complementary","note":"Accordion items can contain Card-like content"}],"variants":[{"name":"Basic","description":"Single accordion with collapsible sections","code":"import { Accordion } from '@/components/Accordion';\n\n<Accordion type=\"single\" collapsible defaultValue=\"item-1\">\n  <Accordion.Item value=\"item-1\">\n    <Accordion.Trigger>What is Fragments UI?</Accordion.Trigger>\n    <Accordion.Content>\n      Fragments UI is a modern React component library built on Base UI primitives, providing accessible and customizable components.\n    </Accordion.Content>\n  </Accordion.Item>\n  <Accordion.Item value=\"item-2\">\n    <Accordion.Trigger>How do I install it?</Accordion.Trigger>\n    <Accordion.Content>\n      Install via npm or pnpm: pnpm add @usefragments/ui\n    </Accordion.Content>\n  </Accordion.Item>\n  <Accordion.Item value=\"item-3\">\n    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>\n    <Accordion.Content>\n      Yes! All components follow WAI-ARIA guidelines and support keyboard navigation.\n    </Accordion.Content>\n  </Accordion.Item>\n</Accordion>"},{"name":"Multiple Open","description":"Allows multiple sections to be open simultaneously","code":"import { Accordion } from '@/components/Accordion';\n\n<Accordion type=\"multiple\" defaultValue={['features', 'pricing']}>\n  <Accordion.Item value=\"features\">\n    <Accordion.Trigger>Features</Accordion.Trigger>\n    <Accordion.Content>\n      Comprehensive component library with theming support, accessibility built-in, and TypeScript-first development.\n    </Accordion.Content>\n  </Accordion.Item>\n  <Accordion.Item value=\"pricing\">\n    <Accordion.Trigger>Pricing</Accordion.Trigger>\n    <Accordion.Content>\n      Free and open source. MIT licensed for both personal and commercial use.\n    </Accordion.Content>\n  </Accordion.Item>\n  <Accordion.Item value=\"support\">\n    <Accordion.Trigger>Support</Accordion.Trigger>\n    <Accordion.Content>\n      Community support via GitHub issues and discussions.\n    </Accordion.Content>\n  </Accordion.Item>\n</Accordion>"},{"name":"With Disabled","description":"Accordion with a disabled item","code":"import { Accordion } from '@/components/Accordion';\n\n<Accordion type=\"single\" collapsible>\n  <Accordion.Item value=\"available\">\n    <Accordion.Trigger>Available Section</Accordion.Trigger>\n    <Accordion.Content>\n      This section can be expanded and collapsed.\n    </Accordion.Content>\n  </Accordion.Item>\n  <Accordion.Item value=\"disabled\" disabled>\n    <Accordion.Trigger>Disabled Section</Accordion.Trigger>\n    <Accordion.Content>\n      This content is not accessible because the item is disabled.\n    </Accordion.Content>\n  </Accordion.Item>\n  <Accordion.Item value=\"another\">\n    <Accordion.Trigger>Another Section</Accordion.Trigger>\n    <Accordion.Content>\n      This section is also available for interaction.\n    </Accordion.Content>\n  </Accordion.Item>\n</Accordion>"}],"contract":{"propsSummary":["type: single|multiple - controls how many items can be open","value/defaultValue are type-discriminated (single -> string, multiple -> string[])","onValueChange is type-discriminated by mode (single -> string|undefined, multiple -> string[])","collapsible: boolean - allow all closed in single mode","Accordion.Trigger forwards button props and defaults type=\"button\""],"a11yRules":["A11Y_DISCLOSURE_KEYBOARD","A11Y_FOCUS_VISIBLE"]},"ai":{"compositionPattern":"compound","subComponents":["Item","Trigger","Content"],"requiredChildren":["Item"],"commonPatterns":["<Accordion type=\"single\" collapsible><Accordion.Item value=\"item-1\"><Accordion.Trigger>{title}</Accordion.Trigger><Accordion.Content>{content}</Accordion.Content></Accordion.Item></Accordion>"]},"propsSummary":["type: single|multiple (default: single)","value: union","defaultValue: union","onValueChange: union","children: node (required)","collapsible: boolean (default: false)","headingLevel: union (default: 3)"],"sourcePath":"src/components/Accordion/index.tsx","exportName":"Accordion","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:49.840Z"},"performance":{"bundleSize":1558,"rawSize":3499,"complexity":"lightweight","budgetPercent":10,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.334Z","imports":[{"path":"Accordion (self)","bytes":2826,"percent":81}]}},"Alert":{"filePath":"src/components/Alert/index.tsx","meta":{"name":"Alert","description":"Contextual feedback messages for user actions or system status. Supports multiple severity levels with optional actions and dismissibility.","category":"feedback","tags":["notification","message","feedback","banner","toast"],"status":"stable"},"usage":{"when":["Communicating the result of a user action (success, error)","Warning about potential issues before they occur","Providing important contextual information inline","System status notifications that require attention"],"whenNot":["Brief status labels (use Badge instead)","Transient notifications (use Toast/Snackbar)","Form-field-level errors (use Input error prop)","Confirmation before destructive actions (use Dialog)"],"guidelines":["Match severity to the actual importance: info for context, warning for potential issues, error for failures","Always provide actionable guidance in error alerts","Use Alert.Title for complex messages; skip titles for brief one-liners","Limit to one action per alert to avoid decision paralysis","Use Alert.Close only for non-critical information","Alert.Action and Alert.Close render buttons with type=\"button\" by default (safe inside forms)","Alert.Close composes your onClick handler with built-in dismiss behavior and respects preventDefault()","Alert sub-components forward DOM props (aria-*, data-*, id, handlers) to their rendered elements"],"accessibility":["Uses role=\"alert\" for screen reader announcement","Error and warning alerts are announced immediately by assistive technology","Alert.Close must have an accessible label","Color alone must not convey meaning - icons and text reinforce severity"]},"props":{"children":{"type":"node","description":"Alert content - use Alert.Icon, Alert.Body, Alert.Title, Alert.Content, Alert.Actions, Alert.Close sub-components","required":true},"severity":{"type":"enum","description":"Visual severity level","default":"info","required":false,"values":["info","success","warning","error"]}},"relations":[{"component":"Badge","relationship":"alternative","note":"Use Badge for compact, inline status labels"},{"component":"Toast","relationship":"alternative","note":"Use Toast for transient notifications that auto-dismiss"},{"component":"Dialog","relationship":"sibling","note":"Use Dialog for blocking confirmations"}],"variants":[{"name":"Info","description":"Informational context for the user","code":"import { Alert } from '@/components/Alert';\n\n<Alert severity=\"info\">\n  <Alert.Icon />\n  <Alert.Body>\n    <Alert.Content>\n      Your session will expire in 15 minutes. Save your work to avoid losing changes.\n    </Alert.Content>\n  </Alert.Body>\n</Alert>"},{"name":"Success","description":"Positive confirmation of completed action","code":"import { Alert } from '@/components/Alert';\n\n<Alert severity=\"success\">\n  <Alert.Icon />\n  <Alert.Body>\n    <Alert.Title>Payment processed</Alert.Title>\n    <Alert.Content>\n      Your order #12345 has been confirmed. You will receive a confirmation email shortly.\n    </Alert.Content>\n  </Alert.Body>\n</Alert>"},{"name":"Warning","description":"Caution about potential issues","code":"import { Alert } from '@/components/Alert';\n\n<Alert severity=\"warning\">\n  <Alert.Icon />\n  <Alert.Body>\n    <Alert.Title>Storage almost full</Alert.Title>\n    <Alert.Content>\n      You have used 90% of your storage quota. Consider deleting unused files.\n    </Alert.Content>\n  </Alert.Body>\n</Alert>"},{"name":"Error","description":"Error state requiring user attention","code":"import { Alert } from '@/components/Alert';\n\n<Alert severity=\"error\">\n  <Alert.Icon />\n  <Alert.Body>\n    <Alert.Title>Upload failed</Alert.Title>\n    <Alert.Content>\n      The file could not be uploaded. Check your connection and try again.\n    </Alert.Content>\n  </Alert.Body>\n</Alert>"},{"name":"With Action","description":"Alert with an actionable button","code":"import { Alert } from '@/components/Alert';\n\n<Alert severity=\"warning\">\n  <Alert.Icon />\n  <Alert.Body>\n    <Alert.Title>Update available</Alert.Title>\n    <Alert.Content>\n      A new version is available with important security fixes.\n    </Alert.Content>\n    <Alert.Actions>\n      <Alert.Action onClick={() => {}}>Update now</Alert.Action>\n    </Alert.Actions>\n  </Alert.Body>\n</Alert>"},{"name":"Dismissible","description":"Alert that can be closed by the user","code":"import { Alert } from '@/components/Alert';\n\n<Alert severity=\"info\">\n  <Alert.Icon />\n  <Alert.Body>\n    <Alert.Content>\n      You can customize your notification preferences in Settings.\n    </Alert.Content>\n  </Alert.Body>\n  <Alert.Close />\n</Alert>"}],"contract":{"propsSummary":["severity: info|success|warning|error - visual severity","Sub-components: Alert.Icon, Alert.Body, Alert.Title, Alert.Content, Alert.Actions, Alert.Action, Alert.Close","Alert.Action / Alert.Close accept button props and default type=\"button\""],"a11yRules":["A11Y_ALERT_ROLE","A11Y_ALERT_DISMISS","A11Y_ALERT_CONTRAST","A11Y_TARGET_SIZE_MIN"]},"ai":{"compositionPattern":"compound","subComponents":["Icon","Body","Title","Content","Actions","Action","Close"],"requiredChildren":["Body"],"commonPatterns":["<Alert severity=\"info\"><Alert.Icon /><Alert.Body><Alert.Content>{message}</Alert.Content></Alert.Body></Alert>","<Alert severity=\"warning\"><Alert.Icon /><Alert.Body><Alert.Title>{title}</Alert.Title><Alert.Content>{message}</Alert.Content></Alert.Body></Alert>","<Alert severity=\"error\"><Alert.Icon /><Alert.Body><Alert.Title>{title}</Alert.Title><Alert.Content>{message}</Alert.Content></Alert.Body><Alert.Close /></Alert>"]},"propsSummary":["children: node (required)","severity: info|success|warning|error (default: info)"],"sourcePath":"src/components/Alert/index.tsx","exportName":"Alert","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:50.066Z"},"performance":{"bundleSize":1189,"rawSize":2921,"complexity":"lightweight","budgetPercent":8,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Alert (self)","bytes":2183,"percent":75}]}},"AppShell":{"filePath":"src/components/AppShell/index.tsx","meta":{"name":"AppShell","description":"Full layout wrapper integrating sidebar, header, main content, and optional aside panel. Two structural layouts (default, sidebar) combine with per-slot variant=\"floating\" for full flexibility.","category":"layout","tags":["layout","shell","scaffold","dashboard","app-layout"],"status":"stable"},"usage":{"when":["Building dashboard-style applications","Apps with persistent sidebar navigation","Layouts requiring header, sidebar, and main content areas","Responsive layouts that need mobile drawer behavior"],"whenNot":["Simple marketing pages (use standard layout)","Content-first sites without navigation (use simpler layout)","Single-page apps with minimal UI (use minimal layout)"],"guidelines":["Use layout=\"default\" when header should span full width (logo in header)","Use layout=\"sidebar\" when sidebar should be full height (logo in sidebar)","Add variant=\"floating\" to individual slots for rounded, elevated appearance","Use bg prop on any slot to override its background color","Combine layout with per-slot variants freely — no enum explosion","AppShell automatically wraps with SidebarProvider","Use AppShell.Sidebar to configure sidebar width and collapse behavior","Main content responds to sidebar collapsed state","Aside panel is hidden on mobile automatically"],"accessibility":["Main content area has id=\"main-content\" for skip links","Use Header.SkipLink for keyboard navigation","Sidebar drawer has proper focus trap on mobile","Keyboard navigation supported throughout"]},"props":{"children":{"type":"node","description":"Layout content (use AppShell.Header, AppShell.Sidebar, AppShell.Main, AppShell.Aside)","required":true},"layout":{"type":"enum","description":"Structural layout for CSS grid areas","default":"default","required":false,"values":["default","sidebar","sidebar-floating","floating"]},"bg":{"type":"string","description":"Background color override for the shell container (accepts any CSS color or token reference like \"var(--fui-bg-secondary)\")","required":false},"style":{"type":"object","description":"","required":false}},"relations":[{"component":"Theme","relationship":"parent","note":"AppShell should be wrapped in ThemeProvider"},{"component":"Header","relationship":"child","note":"Header is placed inside AppShell.Header"},{"component":"Sidebar","relationship":"child","note":"Sidebar content goes inside AppShell.Sidebar"}],"variants":[{"name":"Default Layout","description":"Header spans full width above sidebar (default). Best when brand/logo should be prominent in header.","code":"import { ChartBar, Gear, House } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box minHeight=\"100vh\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"default\">\n    <AppShell.Header>\n      <Header>\n        <Header.Trigger />\n        <Header.Brand>MyApp</Header.Brand>\n        <Header.Nav>\n          <Header.NavItem active>Dashboard</Header.NavItem>\n          <Header.NavItem>Settings</Header.NavItem>\n        </Header.Nav>\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"200px\" collapsible=\"offcanvas\">\n      <Sidebar.Nav>\n        <Sidebar.Section label=\"Menu\">\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Analytics</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={Gear} size=\"md\" />}>Settings</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" size=\"xl\" weight=\"semibold\">Default Layout</Text>\n        <Text as=\"p\" color=\"secondary\">\n          Header spans full width. Logo is in the header.\n        </Text>\n      </Stack>\n    </AppShell.Main>\n  </AppShell>\n</Box>"},{"name":"Sidebar Layout","description":"Sidebar is full height, header sits next to it. Best for documentation sites or when sidebar branding is preferred.","code":"import { ChartBar, Gear, House, MagnifyingGlass } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box minHeight=\"100vh\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"sidebar\">\n    <AppShell.Header>\n      <Header>\n        <Header.Trigger />\n        <Header.Search>\n          <Box background=\"secondary\" rounded=\"sm\" paddingX=\"sm\" paddingY=\"xs\">\n            <Stack direction=\"row\" align=\"center\" gap=\"sm\">\n              <Icon icon={MagnifyingGlass} size=\"sm\" variant=\"tertiary\" />\n              <Text size=\"sm\" color=\"tertiary\">Search...</Text>\n            </Stack>\n          </Box>\n        </Header.Search>\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"200px\" collapsible=\"offcanvas\">\n      <Sidebar.Header>\n        <Text weight=\"semibold\">MyApp</Text>\n      </Sidebar.Header>\n      <Sidebar.Nav>\n        <Sidebar.Section label=\"Menu\">\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Analytics</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={Gear} size=\"md\" />}>Settings</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n      <Sidebar.Footer>v1.0.0</Sidebar.Footer>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" size=\"xl\" weight=\"semibold\">Sidebar Layout</Text>\n        <Text as=\"p\" color=\"secondary\">\n          Sidebar is full height. Logo is in the sidebar header.\n        </Text>\n      </Stack>\n    </AppShell.Main>\n  </AppShell>\n</Box>"},{"name":"With Aside Panel","description":"App shell with optional right panel for additional context or actions.","code":"import { ChartBar, House } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box minHeight=\"100vh\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"default\">\n    <AppShell.Header>\n      <Header>\n        <Header.Brand>App</Header.Brand>\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"180px\" collapsible=\"offcanvas\">\n      <Sidebar.Nav>\n        <Sidebar.Section>\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Stats</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" size=\"xl\" weight=\"semibold\">Main Content</Text>\n        <Text as=\"p\">Content with aside panel on the right.</Text>\n      </Stack>\n    </AppShell.Main>\n\n    <AppShell.Aside width=\"180px\">\n      <Box padding=\"md\">\n        <Stack gap=\"xs\">\n          <Text as=\"h3\" size=\"sm\" weight=\"semibold\">Aside Panel</Text>\n          <Text as=\"p\" size=\"sm\" color=\"secondary\">\n            Additional context, filters, or quick actions.\n          </Text>\n        </Stack>\n      </Box>\n    </AppShell.Aside>\n  </AppShell>\n</Box>"},{"name":"Collapsible Icon Sidebar","description":"Sidebar that collapses to icons only on desktop.","code":"import { ChartBar, Gear, House } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box minHeight=\"100vh\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"sidebar\">\n    <AppShell.Header>\n      <Header>\n        <Header.Trigger />\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar collapsible=\"icon\" width=\"200px\" collapsedWidth=\"56px\">\n      <Sidebar.Header>\n        <Text weight=\"semibold\">App</Text>\n      </Sidebar.Header>\n      <Sidebar.Nav>\n        <Sidebar.Section>\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Analytics</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={Gear} size=\"md\" />}>Settings</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n      <Sidebar.Footer>\n        <Sidebar.CollapseToggle />\n      </Sidebar.Footer>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\">\n      <Text as=\"p\">\n        Click the collapse button in the sidebar footer to toggle between expanded and icon-only modes.\n      </Text>\n    </AppShell.Main>\n  </AppShell>\n</Box>"},{"name":"Floating Main","description":"Sidebar layout with floating main content. Per-slot variant=\"floating\" gives the main area rounded corners and a distinct background, while the sidebar blends with the shell.","code":"import { ChartBar, Gear, House, MagnifyingGlass } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box minHeight=\"100vh\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"sidebar\">\n    <AppShell.Header>\n      <Header>\n        <Header.Trigger />\n        <Header.Search>\n          <Box background=\"primary\" border rounded=\"sm\" paddingX=\"sm\" paddingY=\"xs\">\n            <Stack direction=\"row\" align=\"center\" gap=\"sm\">\n              <Icon icon={MagnifyingGlass} size=\"sm\" variant=\"tertiary\" />\n              <Text size=\"sm\" color=\"tertiary\">Search...</Text>\n            </Stack>\n          </Box>\n        </Header.Search>\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"200px\" collapsible=\"offcanvas\" variant=\"floating\">\n      <Sidebar.Header>\n        <Text weight=\"semibold\">MyApp</Text>\n      </Sidebar.Header>\n      <Sidebar.Nav>\n        <Sidebar.Section label=\"Menu\">\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Analytics</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={Gear} size=\"md\" />}>Settings</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n      <Sidebar.Footer>v1.0.0</Sidebar.Footer>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\" variant=\"floating\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" size=\"xl\" weight=\"semibold\">Floating Main</Text>\n        <Text as=\"p\" color=\"secondary\">\n          Main content has rounded corners and visual separation from the sidebar.\n        </Text>\n      </Stack>\n    </AppShell.Main>\n  </AppShell>\n</Box>"},{"name":"Floating Main & Aside","description":"Both main content and aside panel float with rounded corners. Each slot independently opts into the floating visual treatment via variant=\"floating\".","code":"import { ChartBar, Gear, House, MagnifyingGlass } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box minHeight=\"100vh\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"sidebar\">\n    <AppShell.Header>\n      <Header>\n        <Header.Trigger />\n        <Header.Search>\n          <Box background=\"primary\" border rounded=\"sm\" paddingX=\"sm\" paddingY=\"xs\">\n            <Stack direction=\"row\" align=\"center\" gap=\"sm\">\n              <Icon icon={MagnifyingGlass} size=\"sm\" variant=\"tertiary\" />\n              <Text size=\"sm\" color=\"tertiary\">Search...</Text>\n            </Stack>\n          </Box>\n        </Header.Search>\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"200px\" collapsible=\"offcanvas\" variant=\"floating\">\n      <Sidebar.Header>\n        <Text weight=\"semibold\">MyApp</Text>\n      </Sidebar.Header>\n      <Sidebar.Nav>\n        <Sidebar.Section label=\"Menu\">\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Analytics</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={Gear} size=\"md\" />}>Settings</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n      <Sidebar.Footer>v1.0.0</Sidebar.Footer>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\" variant=\"floating\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" size=\"xl\" weight=\"semibold\">Floating Main & Aside</Text>\n        <Text as=\"p\" color=\"secondary\">\n          Both main content and aside panel float with rounded corners.\n        </Text>\n      </Stack>\n    </AppShell.Main>\n\n    <AppShell.Aside width=\"200px\" variant=\"floating\">\n      <Box padding=\"md\">\n        <Stack gap=\"xs\">\n          <Text as=\"h3\" size=\"sm\" weight=\"semibold\">Aside Panel</Text>\n          <Text as=\"p\" size=\"sm\" color=\"secondary\">\n            This aside also floats, matching the main content area.\n          </Text>\n        </Stack>\n      </Box>\n    </AppShell.Aside>\n  </AppShell>\n</Box>"},{"name":"Floating Default Layout","description":"Default header-on-top structure with a floating main content area. Demonstrates that floating is independent of structure — any slot can float in any layout.","code":"import { ChartBar, House } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box minHeight=\"100vh\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"default\">\n    <AppShell.Header>\n      <Header>\n        <Header.Brand>MyApp</Header.Brand>\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"180px\" collapsible=\"offcanvas\" variant=\"floating\">\n      <Sidebar.Nav>\n        <Sidebar.Section>\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Stats</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\" variant=\"floating\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" size=\"xl\" weight=\"semibold\">Floating Default Layout</Text>\n        <Text as=\"p\" color=\"secondary\">\n          Default structure (header on top) with floating main content. Any slot can float in any layout.\n        </Text>\n      </Stack>\n    </AppShell.Main>\n  </AppShell>\n</Box>"},{"name":"Custom Backgrounds","description":"Each slot accepts a bg prop to override its background color independently. Here the sidebar and aside use bg-elevated (lighter) while main uses bg-primary (darker).","code":"import { ChartBar, House } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box minHeight=\"100vh\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"sidebar\">\n    <AppShell.Header>\n      <Header>\n        <Header.Trigger />\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"200px\" collapsible=\"offcanvas\" bg=\"var(--fui-bg-elevated)\">\n      <Sidebar.Header>\n        <Text weight=\"semibold\">MyApp</Text>\n      </Sidebar.Header>\n      <Sidebar.Nav>\n        <Sidebar.Section label=\"Menu\">\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Analytics</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\" bg=\"var(--fui-bg-primary)\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" size=\"xl\" weight=\"semibold\">Custom Backgrounds</Text>\n        <Text as=\"p\" color=\"secondary\">\n          Sidebar uses bg-elevated (lighter), main uses bg-primary (darker). Any CSS color or token works.\n        </Text>\n      </Stack>\n    </AppShell.Main>\n\n    <AppShell.Aside width=\"200px\" bg=\"var(--fui-bg-elevated)\">\n      <Box padding=\"md\">\n        <Stack gap=\"xs\">\n          <Text as=\"h3\" size=\"sm\" weight=\"semibold\">Aside Panel</Text>\n          <Text as=\"p\" size=\"sm\" color=\"secondary\">\n            Aside with bg-elevated background matching the sidebar.\n          </Text>\n        </Stack>\n      </Box>\n    </AppShell.Aside>\n  </AppShell>\n</Box>"}],"contract":{"propsSummary":["children: node (required)","layout: default|sidebar|sidebar-floating|floating (default: default)","bg: string","style: object"]},"ai":{"compositionPattern":"compound","subComponents":["Header","Sidebar","Main","Aside"],"commonPatterns":["<AppShell>\n  <AppShell.Header>...</AppShell.Header>\n  <AppShell.Sidebar>...</AppShell.Sidebar>\n  <AppShell.Main>...</AppShell.Main>\n</AppShell>"],"requiredChildren":["Header","Sidebar","Main"]},"propsSummary":["children: node (required)","layout: default|sidebar|sidebar-floating|floating (default: default)","bg: string","style: object"],"sourcePath":"src/components/AppShell/index.tsx","exportName":"AppShell","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:50.550Z"},"performance":{"bundleSize":9777,"rawSize":30762,"complexity":"moderate","budgetPercent":64,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Sidebar","bytes":25458,"percent":83},{"path":"AppShell (self)","bytes":4579,"percent":15}]}},"Badge":{"filePath":"src/components/Badge/index.tsx","meta":{"name":"Badge","description":"Compact label for status, counts, or categorization. Draws attention to metadata without dominating the layout.","category":"display","tags":["status","label","tag","count","chip"],"status":"stable"},"usage":{"when":["Showing item status (active, pending, archived)","Displaying counts or quantities inline","Categorizing or tagging content","Highlighting new or updated items"],"whenNot":["Conveying critical errors (use Alert instead)","Long-form status messages (use Alert)","Interactive filtering (use Chip/ToggleGroup)","Navigation labels (use Tabs or links)"],"guidelines":["Keep badge text under 20 characters","Use dot variant for live status indicators","Pair success/error variants with meaningful labels, not just colors","Semantic status badges are borderless pills using shared semantic bg/text tokens","Use onRemove for user-created tags only, not system-generated badges","Badges are not announced as live status updates by default; use announce for screen-reader status announcements when appropriate"],"accessibility":["Badge text must be meaningful without relying on color alone","Removable badges must have accessible dismiss button labels","Avoid using badges as the sole indicator of important state changes"]},"props":{"children":{"type":"node","description":"Badge label text","required":true},"variant":{"type":"enum","description":"Visual style indicating severity or category. `label` is a hairline-bordered metadata pill (pair with dotColor); `dim` is transparent filter-pill chrome (pair with active).","default":"default","required":false,"values":["default","success","warning","error","info","outline","label","dim"]},"size":{"type":"enum","description":"Badge size","default":"md","required":false,"values":["sm","md","lg"]},"dot":{"type":"boolean","description":"Show a colored dot indicator before the label","default":"false","required":false},"dotPulse":{"type":"boolean","description":"Breathe the status dot, for a state that is still happening rather than one that has settled. Opacity only, and honours prefers-reduced-motion","default":"false","required":false},"dotColor":{"type":"string","description":"Color for the leading status dot. Applies to variant=\"label\" (and the generic dot prop). Accepts any CSS color including CSS custom properties.","required":false},"icon":{"type":"node","description":"Optional icon element before the text","required":false},"active":{"type":"boolean","description":"Marks variant=\"dim\" as the currently selected filter. Has no effect on other variants.","default":"false","required":false},"onRemove":{"type":"function","description":"Makes the badge removable. Called when X is clicked.","required":false},"announce":{"type":"boolean","description":"Opt into role=\"status\" live announcement semantics","default":"false","required":false},"role":{"type":"union","description":"","required":false},"style":{"type":"object","description":"","required":false}},"relations":[{"component":"Alert","relationship":"alternative","note":"Use Alert for prominent, longer messages with actions"},{"component":"Chip","relationship":"sibling","note":"Chip is interactive (clickable/filterable); Badge is display-only"}],"variants":[{"name":"Default","description":"Neutral badge for general labels","code":"import { Badge } from '@/components/Badge';\n\n<Badge>Default</Badge>"},{"name":"Status Variants","description":"All severity variants for different contexts","code":"import { Badge } from '@/components/Badge';\nimport { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Badge variant=\"default\">Default</Badge>\n  <Badge variant=\"success\">Active</Badge>\n  <Badge variant=\"warning\">Pending</Badge>\n  <Badge variant=\"error\">Failed</Badge>\n  <Badge variant=\"info\">New</Badge>\n</Stack>"},{"name":"Delivery Status","description":"Reference status pills with deep semantic fill and bright text","code":"import { Badge } from '@/components/Badge';\nimport { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Badge variant=\"success\" size=\"lg\">Delivered</Badge>\n  <Badge variant=\"error\" size=\"lg\">Bounced</Badge>\n</Stack>"},{"name":"With Dot","description":"Live status indicators using dot prefix","code":"import { Badge } from '@/components/Badge';\nimport { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Badge variant=\"success\" dot>Online</Badge>\n  <Badge variant=\"warning\" dot>Away</Badge>\n  <Badge variant=\"error\" dot>Offline</Badge>\n</Stack>"},{"name":"Announced Status","description":"Opt into screen-reader status announcement behavior","code":"import { Badge } from '@/components/Badge';\n\n<Badge variant=\"success\" announce>Saved</Badge>"},{"name":"Outline","description":"Minimal bordered badge for neutral emphasis","code":"import { Badge } from '@/components/Badge';\n\n<Badge variant=\"outline\">Outline</Badge>"},{"name":"Small Size","description":"Compact badges for dense UIs","code":"import { Badge } from '@/components/Badge';\nimport { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" align=\"center\" wrap>\n  <Badge size=\"sm\" variant=\"info\">v2.1</Badge>\n  <Badge size=\"sm\" variant=\"success\">Stable</Badge>\n  <Badge size=\"md\" variant=\"info\">Standard</Badge>\n</Stack>"},{"name":"Removable","description":"User-created tags that can be dismissed","code":"import { Badge } from '@/components/Badge';\nimport { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Badge variant=\"info\" onRemove={() => {}}>React</Badge>\n  <Badge variant=\"info\" onRemove={() => {}}>TypeScript</Badge>\n  <Badge variant=\"info\" onRemove={() => {}}>CSS</Badge>\n</Stack>"}],"contract":{"propsSummary":["children: ReactNode - badge label (required)","variant: default|success|warning|error|info|outline|label|dim - visual style","size: sm|md|lg - badge size","dot: boolean - show status dot indicator","dotPulse: boolean - breathe the dot for an in-progress state (respects prefers-reduced-motion)","dotColor: string - color for the leading status dot","active: boolean - marks variant=\"dim\" as the selected filter","onRemove: () => void - makes badge removable","announce: boolean - opt into role=\"status\" + auto status aria-label"],"a11yRules":["A11Y_BADGE_CONTRAST","A11Y_BADGE_DISMISS","A11Y_TARGET_SIZE_MIN"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["children: node (required)","variant: default|success|warning|error|info|outline|label|dim (default: default)","size: sm|md|lg (default: md)","dot: boolean (default: false)","dotPulse: boolean (default: false)","dotColor: string","icon: node","active: boolean (default: false)","onRemove: function","announce: boolean (default: false)","role: union"],"sourcePath":"src/components/Badge/index.tsx","exportName":"Badge","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:50.941Z"},"performance":{"bundleSize":874,"rawSize":1637,"complexity":"lightweight","budgetPercent":6,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Badge (self)","bytes":1050,"percent":64}]}},"Avatar":{"filePath":"src/components/Avatar/index.tsx","meta":{"name":"Avatar","description":"Visual representation of a user or entity","category":"display","tags":["user","profile","image","identity"],"status":"stable"},"usage":{"when":["Displaying user profile pictures","Showing team member lists","Representing entities in lists or cards","User identification in comments or messages"],"whenNot":["Decorative images (use Image)","Logo display (use Logo component)","Large profile headers (use custom layout)"],"guidelines":["Always provide alt text or name for accessibility","Use consistent sizes within the same context","Provide fallback initials when image may not load","Use Avatar.Group for multiple avatars in a row","Use imageProps for advanced img attributes (loading, decoding, referrerPolicy, etc.)"],"accessibility":["Include meaningful alt text describing the user","Initials should be derived from name for screen readers","Decorative avatars should have empty alt"]},"props":{"src":{"type":"string","description":"Image source URL","required":false},"alt":{"type":"string","description":"Alt text for the image","default":"","required":false},"initials":{"type":"string","description":"Fallback initials (1-2 characters)","required":false},"name":{"type":"string","description":"Full name - used to generate initials","required":false},"size":{"type":"enum","description":"Size variant","default":"md","required":false,"values":["xs","sm","md","lg","xl"]},"customSize":{"type":"union","description":"Custom avatar size (number in px or CSS size string like \"2.25rem\"), overrides size width/height","required":false},"shape":{"type":"enum","description":"Shape variant","default":"circle","required":false,"values":["circle","square"]},"color":{"type":"string","description":"Custom background color for fallback avatar","required":false},"imageStyle":{"type":"object","description":"Inline style object applied to the underlying image element","required":false},"imageProps":{"type":"object","description":"Additional props for the underlying img element (except src/alt/className/style)","required":false},"style":{"type":"object","description":"","required":false},"fallback":{"type":"node","description":"Visual fallback rendered after initials/name and before the generic icon","required":false}},"relations":[{"component":"Avatar","relationship":"parent","note":"Use Avatar.Group for stacked avatar displays"}],"variants":[{"name":"Default","description":"Avatar with image","code":"import { Avatar } from '@/components/Avatar';\n\n<Avatar\n  src=\"https://i.pravatar.cc/150?u=jane\"\n  alt=\"Jane Doe\"\n  name=\"Jane Doe\"\n/>"},{"name":"With Initials","description":"Fallback when no image is provided","code":"import { Avatar } from '@/components/Avatar';\n\n<Avatar name=\"John Smith\" />"},{"name":"Sizes","description":"Available size options","code":"import { Avatar } from '@/components/Avatar';\nimport { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" align=\"center\" wrap>\n  <Avatar name=\"XS\" size=\"xs\" />\n  <Avatar name=\"SM\" size=\"sm\" />\n  <Avatar name=\"MD\" size=\"md\" />\n  <Avatar name=\"LG\" size=\"lg\" />\n  <Avatar name=\"XL\" size=\"xl\" />\n</Stack>"},{"name":"Custom Size","description":"Set an exact avatar size","code":"import { Avatar } from '@/components/Avatar';\n\n<Avatar name=\"Conan McNicholl\" customSize={36} />"},{"name":"Square Shape","description":"Square variant for app icons or brands","code":"import { Avatar } from '@/components/Avatar';\n\n<Avatar name=\"App\" shape=\"square\" />"},{"name":"Group","description":"Multiple avatars stacked together","code":"import { Avatar } from '@/components/Avatar';\n\n<Avatar.Group max={3} size=\"md\">\n  <Avatar name=\"Alice Johnson\" />\n  <Avatar name=\"Bob Smith\" />\n  <Avatar name=\"Carol Williams\" />\n  <Avatar name=\"David Brown\" />\n  <Avatar name=\"Eve Davis\" />\n</Avatar.Group>"}],"contract":{"propsSummary":["src: string - image URL","name: string - used for initials fallback","size: xs|sm|md|lg|xl (default: md)","customSize: number|string - custom size override","imageStyle: CSSProperties - inline image styling","imageProps: ImgHTMLAttributes - advanced img attributes","shape: circle|square (default: circle)"],"a11yRules":["A11Y_IMG_ALT"]},"ai":{"compositionPattern":"compound","subComponents":["Group"]},"propsSummary":["src: string","alt: string (default: )","initials: string","name: string","size: xs|sm|md|lg|xl (default: md)","customSize: union","shape: circle|square (default: circle)","color: string","imageStyle: object","imageProps: object","style: object"],"sourcePath":"src/components/Avatar/index.tsx","exportName":"Avatar","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:50.743Z"},"performance":{"bundleSize":1972,"rawSize":3875,"complexity":"lightweight","budgetPercent":13,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Avatar (self)","bytes":3286,"percent":85}]}},"BentoGrid":{"filePath":"src/components/BentoGrid/index.tsx","meta":{"name":"BentoGrid","description":"Asymmetric grid layout with responsive spans and built-in surface styling for bento-style feature sections","category":"layout","tags":["bento","grid","layout","responsive","feature-grid","asymmetric"],"status":"stable"},"usage":{"when":["Asymmetric feature grids with hero + supporting items","Dashboard overviews where cards have different visual weight","Marketing pages with mixed-size content blocks","Any layout where items need per-breakpoint column/row spans"],"whenNot":["Uniform grids where all items are the same size (use Grid)","Form layouts with labeled fields (use Grid)","Simple stacked content (use Stack)"],"guidelines":["Use colSpan/rowSpan with responsive objects for layouts that adapt across breakpoints","The hero item typically uses colSpan={2} rowSpan={2} at lg and above","Items include built-in surface styling — no need to wrap children in Card","Grid auto-collapses: 3→2 columns below lg, all→1 column below sm","Root and Item forward DOM props (aria-*, data-*, handlers), and Item style merges with span CSS vars"],"accessibility":["Grid is purely visual — it does not affect reading order or semantics","Ensure logical source order matches visual order for screen readers","Hover effects are disabled when prefers-reduced-motion is set","Border thickness increases in prefers-contrast: more mode"]},"props":{"children":{"type":"node","description":"BentoGrid.Item children","required":false},"columns":{"type":"union","description":"Number of columns — auto-collapses responsively (3→2→1)","default":"3","required":false,"values":["2","3","4"]},"gap":{"type":"enum","description":"Gap between grid items, mapped to spacing tokens","default":"md","required":false,"values":["none","xs","sm","md","lg","xl"]},"style":{"type":"object","description":"","required":false}},"relations":[{"component":"Grid","relationship":"alternative","note":"Use Grid for uniform layouts; BentoGrid for asymmetric spans with built-in surfaces"},{"component":"Card","relationship":"sibling","note":"BentoGrid.Item has built-in surface styling similar to Card"}],"variants":[{"name":"Default","description":"Basic 3-column uniform bento grid","code":"<BentoGrid columns={3} gap=\"md\">\n  <BentoGrid.Item>Item 1</BentoGrid.Item>\n  <BentoGrid.Item>Item 2</BentoGrid.Item>\n  <BentoGrid.Item>Item 3</BentoGrid.Item>\n  <BentoGrid.Item>Item 4</BentoGrid.Item>\n  <BentoGrid.Item>Item 5</BentoGrid.Item>\n  <BentoGrid.Item>Item 6</BentoGrid.Item>\n</BentoGrid>"},{"name":"Hero Layout","description":"2×2 hero item with 4 supporting items in a 3-column grid","code":"<BentoGrid columns={3} gap=\"md\">\n  <BentoGrid.Item colSpan={{ base: 1, lg: 2 }} rowSpan={{ base: 1, lg: 2 }}>\n    Hero content\n  </BentoGrid.Item>\n  <BentoGrid.Item>Item 2</BentoGrid.Item>\n  <BentoGrid.Item>Item 3</BentoGrid.Item>\n  <BentoGrid.Item>Item 4</BentoGrid.Item>\n  <BentoGrid.Item>Item 5</BentoGrid.Item>\n</BentoGrid>"},{"name":"Two Column","description":"2-column bento with a wide item","code":"<BentoGrid columns={2} gap=\"md\">\n  <BentoGrid.Item>Item 1</BentoGrid.Item>\n  <BentoGrid.Item>Item 2</BentoGrid.Item>\n  <BentoGrid.Item colSpan={2}>Wide item</BentoGrid.Item>\n  <BentoGrid.Item>Item 4</BentoGrid.Item>\n  <BentoGrid.Item>Item 5</BentoGrid.Item>\n</BentoGrid>"},{"name":"Full-Width Banner","description":"3-column grid with a full-width item spanning all columns","code":"<BentoGrid columns={3} gap=\"md\">\n  <BentoGrid.Item>Item 1</BentoGrid.Item>\n  <BentoGrid.Item>Item 2</BentoGrid.Item>\n  <BentoGrid.Item>Item 3</BentoGrid.Item>\n  <BentoGrid.Item colSpan={3}>Full-width banner</BentoGrid.Item>\n</BentoGrid>"}],"contract":{"propsSummary":["columns: 2|3|4 (default: 3) — auto-collapses responsively","gap: none|xs|sm|md|lg|xl (default: md)","BentoGrid.Item colSpan: 1|2|3 | { base, sm, md, lg, xl }","BentoGrid.Item rowSpan: 1|2|3 | { base, sm, md, lg, xl }","BentoGrid and BentoGrid.Item forward div DOM props; Item style is merged with generated span vars"]},"propsSummary":["children: node","columns: union (default: 3)","gap: none|xs|sm|md|lg|xl (default: md)","style: object"],"sourcePath":"src/components/BentoGrid/index.tsx","exportName":"BentoGrid","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:52.407Z"},"performance":{"bundleSize":882,"rawSize":1730,"complexity":"lightweight","budgetPercent":6,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"BentoGrid (self)","bytes":1152,"percent":67}]}},"Box":{"filePath":"src/components/Box/index.tsx","meta":{"name":"Box","description":"Primitive layout component for applying spacing, backgrounds, and borders. A flexible container for building custom layouts.","category":"layout","tags":["layout","container","spacing","primitive","box"],"status":"stable"},"usage":{"when":["Applying consistent padding or margin to content sections","Creating bordered or elevated containers","Wrapping content with semantic HTML elements","Building custom layouts not covered by Stack or Grid"],"whenNot":["Horizontal or vertical stacking (use Stack)","Grid-based layouts (use Grid)","Card-like containers with header/body/footer (use Card)","Simple text styling (use Text)"],"guidelines":["Use padding props instead of inline styles for consistency","Choose semantic HTML elements (section, article) where appropriate","Combine with Stack or Grid for complex layouts","Use background variants from the design system, not custom colors","Box forwards DOM props (id, role, aria-*, data-*, event handlers) to the rendered element"],"accessibility":["Choose semantic as prop values for proper document structure","Avoid div-soup; use meaningful elements like section, article","Ensure proper heading hierarchy within Box containers"]},"props":{"children":{"type":"node","description":"Content to render inside the box","required":false},"as":{"type":"enum","description":"HTML element to render","default":"div","required":false,"values":["div","section","article","aside","main","header","footer","nav","span"]},"padding":{"type":"enum","description":"Padding on all sides","required":false,"values":["none","xs","sm","md","lg","xl"]},"paddingX":{"type":"enum","description":"Horizontal padding","required":false,"values":["none","xs","sm","md","lg","xl"]},"paddingY":{"type":"enum","description":"Vertical padding","required":false,"values":["none","xs","sm","md","lg","xl"]},"margin":{"type":"enum","description":"Margin on all sides","required":false,"values":["none","xs","sm","md","lg","xl","auto"]},"marginX":{"type":"enum","description":"Horizontal margin","required":false,"values":["none","xs","sm","md","lg","xl","auto"]},"marginY":{"type":"enum","description":"Vertical margin","required":false,"values":["none","xs","sm","md","lg","xl","auto"]},"background":{"type":"enum","description":"Background color","required":false,"values":["none","primary","secondary","tertiary","elevated"]},"rounded":{"type":"enum","description":"Border radius","required":false,"values":["none","sm","md","lg","full"]},"border":{"type":"boolean","description":"Show border","default":"false","required":false},"borderTop":{"type":"boolean","description":"Show top border only","default":"false","required":false},"borderBottom":{"type":"boolean","description":"Show bottom border only","default":"false","required":false},"borderLeft":{"type":"boolean","description":"Show left border only","default":"false","required":false},"borderRight":{"type":"boolean","description":"Show right border only","default":"false","required":false},"borderColor":{"type":"enum","description":"Border color variant (requires border or directional border)","required":false,"values":["default","strong","accent","danger"]},"shadow":{"type":"enum","description":"Box shadow","required":false,"values":["none","sm","md","lg"]},"overflow":{"type":"enum","description":"Overflow behavior","required":false,"values":["hidden","auto","scroll","visible"]},"color":{"type":"enum","description":"Text color","required":false,"values":["primary","secondary","tertiary","accent","inverse"]},"display":{"type":"enum","description":"Display type","required":false,"values":["none","block","inline","inline-block","flex","inline-flex","grid"]},"width":{"type":"union","description":"Width (CSS value, e.g. \"100%\", \"300px\", or number for px)","required":false},"minWidth":{"type":"union","description":"Min width","required":false},"maxWidth":{"type":"union","description":"Max width","required":false},"height":{"type":"union","description":"Height (CSS value)","required":false},"minHeight":{"type":"union","description":"Min height","required":false},"maxHeight":{"type":"union","description":"Max height","required":false},"className":{"type":"string","description":"Additional class name","required":false},"style":{"type":"object","description":"Inline styles","required":false}},"relations":[{"component":"Stack","relationship":"alternative","note":"Use Stack for directional layouts with gap"},{"component":"Grid","relationship":"alternative","note":"Use Grid for column-based layouts"},{"component":"Card","relationship":"alternative","note":"Use Card for content containers with structure"}],"variants":[{"name":"Default","description":"Basic box with padding","code":"<Box padding=\"md\" background=\"secondary\" rounded=\"md\">\n  Content with padding and background\n</Box>"},{"name":"With Border","description":"Bordered container","code":"<Box padding=\"lg\" border rounded=\"md\">\n  Bordered content area\n</Box>"},{"name":"Directional Padding","description":"Different horizontal and vertical padding","code":"<Box paddingX=\"xl\" paddingY=\"sm\" background=\"tertiary\" rounded=\"sm\">\n  Wide horizontal padding, short vertical\n</Box>"},{"name":"Centered with Auto Margin","description":"Centered content using margin auto","code":"<Box padding=\"md\" marginX=\"auto\" background=\"elevated\" rounded=\"lg\" style={{ maxWidth: '300px' }}>\n  Centered content\n</Box>"},{"name":"Directional Borders","description":"Individual border sides","code":"<Box padding=\"md\" borderTop borderBottom>\n  Top and bottom borders only\n</Box>"},{"name":"With Shadow","description":"Box with shadow elevation","code":"<Box padding=\"lg\" rounded=\"md\" shadow=\"md\" background=\"primary\">\n  Elevated content with shadow\n</Box>"},{"name":"Overflow Hidden","description":"Content overflow clipped","code":"<Box padding=\"md\" overflow=\"hidden\" border rounded=\"md\" style={{ maxHeight: '60px' }}>\n  This box clips overflowing content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n</Box>"},{"name":"Text Colors","description":"Text color variants","code":"<Box padding=\"md\" display=\"flex\" style={{ gap: '16px' }}>\n  <Box color=\"primary\">Primary</Box>\n  <Box color=\"secondary\">Secondary</Box>\n  <Box color=\"tertiary\">Tertiary</Box>\n  <Box color=\"accent\">Accent</Box>\n</Box>"}],"contract":{"propsSummary":["as: div|section|article|... - HTML element","padding: none|xs|sm|md|lg|xl - all-sides padding","paddingX/paddingY: directional padding overrides","margin: none|xs|sm|md|lg|xl|auto - margin","background: none|primary|secondary|tertiary|elevated","rounded: none|sm|md|lg|full - border radius","border: boolean - show border","borderTop/borderBottom/borderLeft/borderRight: boolean - directional borders","borderColor: default|strong|accent|danger - border color variant","shadow: sm|md|lg|none - box shadow","overflow: hidden|auto|scroll|visible - overflow behavior","color: primary|secondary|tertiary|accent|inverse - text color","width/minWidth/maxWidth: string|number - sizing","height/minHeight/maxHeight: string|number - sizing","All standard HTMLElement props are forwarded to the rendered element"],"a11yRules":["A11Y_SEMANTIC_HTML"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["children: node","as: div|section|article|aside|main|header|footer|nav|span (default: div)","padding: none|xs|sm|md|lg|xl","paddingX: none|xs|sm|md|lg|xl","paddingY: none|xs|sm|md|lg|xl","margin: none|xs|sm|md|lg|xl|auto","marginX: none|xs|sm|md|lg|xl|auto","marginY: none|xs|sm|md|lg|xl|auto","background: none|primary|secondary|tertiary|elevated","rounded: none|sm|md|lg|full","border: boolean","borderTop: boolean","borderBottom: boolean","borderLeft: boolean","borderRight: boolean","borderColor: default|strong|accent|danger","shadow: none|sm|md|lg","overflow: hidden|auto|scroll|visible","color: primary|secondary|tertiary|accent|inverse","display: none|block|inline|inline-block|flex|inline-flex|grid","width: union","minWidth: union","maxWidth: union","height: union","minHeight: union","maxHeight: union","className: string","style: object"],"sourcePath":"src/components/Box/index.tsx","exportName":"Box","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:51.126Z"},"performance":{"bundleSize":967,"rawSize":1876,"complexity":"lightweight","budgetPercent":6,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Box (self)","bytes":1304,"percent":70}]}},"Breadcrumbs":{"filePath":"src/components/Breadcrumbs/index.tsx","meta":{"name":"Breadcrumbs","description":"Breadcrumb navigation showing the current page location within a hierarchy. Helps users navigate back through parent pages.","category":"navigation","tags":["breadcrumbs","navigation","hierarchy","wayfinding"],"status":"stable"},"usage":{"when":["Showing hierarchical page location (e.g., Home > Category > Product)","Allowing quick navigation to parent pages","Multi-level content structures like documentation or e-commerce"],"whenNot":["Flat navigation with no hierarchy (use Tabs or Header nav)","Step-by-step wizards (use Stepper)","Primary navigation (use Sidebar or Header)"],"guidelines":["Always include the current page as the last, non-linked item","Keep labels short and descriptive","Use maxItems to collapse long paths, keeping first and last visible","The separator defaults to \"/\" but can be customized","Use the label prop to customize the nav landmark name (defaults to \"Breadcrumb\")"],"accessibility":["Uses <nav aria-label=\"Breadcrumb\"> for landmark navigation","Current page is marked with aria-current=\"page\"","Separators are hidden from screen readers with aria-hidden","Ellipsis button has aria-label for collapsed items"]},"props":{"children":{"type":"node","description":"Breadcrumb items (use Breadcrumbs.Item)","required":true},"separator":{"type":"node","description":"Custom separator between items","default":"/","required":false},"maxItems":{"type":"number","description":"Maximum visible items before collapsing middle items with ellipsis","required":false},"label":{"type":"string","description":"Custom aria-label for the breadcrumb nav landmark","default":"Breadcrumb","required":false}},"relations":[{"component":"Tabs","relationship":"alternative","note":"Use Tabs for flat, non-hierarchical navigation"},{"component":"Sidebar","relationship":"complementary","note":"Breadcrumbs complement sidebar navigation for deep hierarchies"}],"variants":[{"name":"Default","description":"Basic breadcrumb navigation","code":"<Breadcrumbs>\n  <Breadcrumbs.Item href=\"#\">Home</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Products</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Category</Breadcrumbs.Item>\n  <Breadcrumbs.Item current>Current Page</Breadcrumbs.Item>\n</Breadcrumbs>"},{"name":"With Icons","description":"Breadcrumbs with icons on items","code":"<Breadcrumbs>\n  <Breadcrumbs.Item\n    href=\"#\"\n    icon={\n      <svg viewBox=\"0 0 16 16\" fill=\"currentColor\">\n        <path d=\"M8 1.25l-7 6v7.5c0 .138.112.25.25.25H5.5V10h5v5h4.25a.25.25 0 0 0 .25-.25v-7.5l-7-6z\" />\n      </svg>\n    }\n  >\n    Home\n  </Breadcrumbs.Item>\n  <Breadcrumbs.Item\n    href=\"#\"\n    icon={\n      <svg viewBox=\"0 0 16 16\" fill=\"currentColor\">\n        <path d=\"M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75z\" />\n      </svg>\n    }\n  >\n    Documents\n  </Breadcrumbs.Item>\n  <Breadcrumbs.Item current>Report.pdf</Breadcrumbs.Item>\n</Breadcrumbs>"},{"name":"Collapsed","description":"Long breadcrumb trail collapsed with ellipsis","code":"<Breadcrumbs maxItems={3}>\n  <Breadcrumbs.Item href=\"#\">Home</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Category</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Subcategory</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Section</Breadcrumbs.Item>\n  <Breadcrumbs.Item current>Current Page</Breadcrumbs.Item>\n</Breadcrumbs>"},{"name":"Custom Separator","description":"Breadcrumbs with a custom chevron separator","code":"<Breadcrumbs\n  separator={\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n      <path fillRule=\"evenodd\" d=\"M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06z\" />\n    </svg>\n  }\n>\n  <Breadcrumbs.Item href=\"#\">Home</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Settings</Breadcrumbs.Item>\n  <Breadcrumbs.Item current>Profile</Breadcrumbs.Item>\n</Breadcrumbs>"},{"name":"Custom Landmark Label","description":"Override the nav landmark label for screen readers","code":"<Breadcrumbs label=\"Documentation breadcrumbs\">\n  <Breadcrumbs.Item href=\"#\">Docs</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Components</Breadcrumbs.Item>\n  <Breadcrumbs.Item current>Breadcrumbs</Breadcrumbs.Item>\n</Breadcrumbs>"}],"contract":{"propsSummary":["separator: ReactNode - custom separator (default \"/\")","maxItems: number - collapse middle items with ellipsis","label: string - nav landmark label (default \"Breadcrumb\")","Breadcrumbs.Item href: string - makes item a link","Breadcrumbs.Item current: boolean - marks current page","Breadcrumbs.Item icon: ReactNode - icon before label"],"a11yRules":["A11Y_NAV_LANDMARK","A11Y_ARIA_CURRENT","A11Y_TARGET_SIZE_MIN"]},"ai":{"compositionPattern":"compound","subComponents":["Item","Separator"],"requiredChildren":["Item"],"commonPatterns":["<Breadcrumbs><Breadcrumbs.Item href=\"/\">Home</Breadcrumbs.Item><Breadcrumbs.Item href=\"/products\">Products</Breadcrumbs.Item><Breadcrumbs.Item current>Widget</Breadcrumbs.Item></Breadcrumbs>"]},"propsSummary":["children: node (required)","separator: node (default: /)","maxItems: number","label: string (default: Breadcrumb)"],"sourcePath":"src/components/Breadcrumbs/index.tsx","exportName":"Breadcrumbs","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:51.312Z"},"performance":{"bundleSize":1158,"rawSize":2749,"complexity":"lightweight","budgetPercent":8,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Breadcrumbs (self)","bytes":2088,"percent":76}]}},"Button":{"filePath":"src/components/Button/index.tsx","meta":{"name":"Button","description":"Interactive element for user actions and form submissions","category":"forms","tags":["action","button","form","interactive"],"status":"stable"},"usage":{"when":["Triggering an action (save, submit, delete, etc.)","Form submission","Opening dialogs or menus","Navigation when action context is needed"],"whenNot":["Simple navigation (use Link)","Toggling state (use Switch or Checkbox)","Selecting from options (use Select or RadioGroup)"],"guidelines":["Use Primary for the main action in a context","Only one Primary button per section/form","Use Danger variant for destructive actions","Loading state should disable the button","When using asChild, pass interaction and accessibility props directly on Button (they are forwarded to the child element)","Use variant=\"icon\" for the default icon-only action button, or combine icon={true} with another visual variant when needed"],"accessibility":["Button text should describe the action","Avoid generic labels like \"Click here\"","Icon-only buttons need aria-label"]},"props":{"as":{"type":"enum","description":"Render as a native button or anchor element","default":"button","required":false,"values":["button","a"]},"children":{"type":"node","description":"Button label content","required":true},"variant":{"type":"enum","description":"Visual style variant (\"icon\" is a convenience alias for outlined + icon-only layout, \"link\" is accent-coloured + transparent for tertiary CTAs, \"quiet\" is a neutral text button with no box and no height floor for meta lines and footnotes)","default":"\"primary\"","required":false,"values":["primary","secondary","ghost","link","quiet","danger","outlined","outline","icon"],"constraints":["Only one primary button per context"]},"size":{"type":"enum","description":"Button size (\"xs\" is for inline row-action controls where \"sm\" is too tall)","default":"\"md\"","required":false,"values":["xs","sm","md","lg"]},"icon":{"type":"boolean","description":"Render as icon-only button (square aspect ratio). Useful with any visual variant; variant=\"icon\" is the default outlined icon-only shortcut.","default":"false","required":false},"fullWidth":{"type":"boolean","description":"Make button full width of container","default":"false","required":false},"asChild":{"type":"boolean","description":"Merge button styling onto child element (e.g. Next.js Link)","default":"false","required":false}},"relations":[{"component":"Link","relationship":"alternative","note":"Use Link for navigation without action context"},{"component":"Icon","relationship":"complementary","note":"Use Icon inside Button for icon-leading/trailing or icon-only actions"},{"component":"ButtonGroup","relationship":"parent","note":"Use ButtonGroup for related action sets"}],"variants":[{"name":"Primary","description":"Default action button for primary actions","code":"<Button variant=\"primary\">Save Changes</Button>"},{"name":"Secondary","description":"Less prominent action button","code":"<Button variant=\"secondary\">Cancel</Button>"},{"name":"Ghost","description":"Minimal visual weight for subtle actions","code":"<Button variant=\"ghost\">Learn More</Button>"},{"name":"Link","description":"Accent-coloured transparent button for tertiary CTAs","code":"<Button variant=\"link\">View all →</Button>"},{"name":"Quiet","description":"Neutral text button with no box and no height floor, for meta lines and footnotes","code":"<Button variant=\"quiet\" size=\"xs\">main</Button>"},{"name":"Danger","description":"Destructive action requiring attention","code":"<Button variant=\"danger\">Delete Item</Button>"},{"name":"Outline","description":"Bordered button with transparent background","code":"<Button variant=\"outline\">View Details</Button>"},{"name":"Icon","description":"Convenience icon-only button alias (ghost + square icon sizing)","code":"<Button variant=\"icon\" aria-label=\"Add item\">\n  <span aria-hidden>+</span>\n</Button>"},{"name":"Sizes","description":"Available size options","code":"<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>\n  <Button size=\"xs\" variant=\"icon\" aria-label=\"Dismiss\">×</Button>\n  <Button size=\"sm\">Small</Button>\n  <Button size=\"md\">Medium</Button>\n  <Button size=\"lg\">Large</Button>\n</div>"},{"name":"Disabled","description":"Non-interactive state","code":"<Button disabled>Cannot Click</Button>"},{"name":"As Child","description":"Compose button styles onto another interactive element while preserving forwarded props","code":"<Button asChild variant=\"outlined\" aria-label=\"Open billing settings\">\n  <a href=\"#billing-settings\">Billing Settings</a>\n</Button>"}],"contract":{"propsSummary":["variant: primary|secondary|ghost|link|quiet|danger|outlined|outline|icon (default: primary, icon = outlined + icon-only, link = accent transparent, quiet = neutral text button, no box)","size: xs|sm|md|lg (default: md, xs for inline row-action controls)","disabled: boolean - disables interaction","type: button|submit|reset (default: button)","onClick: (event) => void - action handler","asChild: boolean - composes styles/props onto a child element (links/router links)","icon: boolean - icon-only square layout (can be combined with visual variants)"],"a11yRules":["A11Y_BTN_LABEL","A11Y_BTN_FOCUS"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["as: button|a","children: node (required)","variant: primary|secondary|ghost|link|quiet|danger|outlined|outline|icon (default: \"primary\")","size: xs|sm|md|lg (default: \"md\")","icon: boolean","fullWidth: boolean","asChild: boolean"],"sourcePath":"src/components/Button/index.tsx","exportName":"Button","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:51.517Z"},"performance":{"bundleSize":1170,"rawSize":2277,"complexity":"lightweight","budgetPercent":8,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Button (self)","bytes":1324,"percent":58},{"path":"ComponentDefaults","bytes":194,"percent":9},{"path":"src/utils/canonical-stamp.ts","bytes":170,"percent":7}]}},"ButtonGroup":{"filePath":"src/components/ButtonGroup/index.tsx","meta":{"name":"ButtonGroup","description":"Groups related buttons together with consistent spacing and alignment. Useful for action bars, toolbars, and related button sets.","category":"forms","tags":["button","group","toolbar","actions","layout"],"status":"stable"},"usage":{"when":["Grouping related actions together","Creating toolbars or action bars","Form submit/cancel button pairs","Pagination controls"],"whenNot":["Unrelated buttons (use Stack instead)","Navigation links (use nav element)","Single button (no grouping needed)"],"guidelines":["Keep button groups focused on related actions","Use consistent button variants within a group","Consider visual hierarchy - primary action should stand out","Limit to 2-4 buttons per group for clarity","Pass role/aria-label/id/data-* directly to ButtonGroup when you need semantic grouping hooks"],"accessibility":["Group provides semantic relationship between buttons","Each button remains individually focusable","Consider using role=\"group\" with aria-label for screen readers"]},"props":{"children":{"type":"node","description":"Button elements to group together","required":true},"gap":{"type":"enum","description":"Spacing between buttons","default":"sm","required":false,"values":["none","xs","sm","md"]},"wrap":{"type":"boolean","description":"Allow buttons to wrap to next line","default":"false","required":false},"align":{"type":"enum","description":"Alignment of buttons","required":false,"values":["start","center","end"]}},"relations":[{"component":"Button","relationship":"child","note":"ButtonGroup contains Button components"},{"component":"Stack","relationship":"alternative","note":"Use Stack for more general layout needs"}],"variants":[{"name":"Default","description":"Basic button group with default spacing","code":"<ButtonGroup>\n  <Button variant=\"secondary\">Cancel</Button>\n  <Button variant=\"primary\">Save</Button>\n</ButtonGroup>"},{"name":"Gap Variants","description":"Different spacing options","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n  <ButtonGroup gap=\"none\">\n    <Button variant=\"secondary\" size=\"sm\">None</Button>\n    <Button variant=\"secondary\" size=\"sm\">Gap</Button>\n  </ButtonGroup>\n  <ButtonGroup gap=\"xs\">\n    <Button variant=\"secondary\" size=\"sm\">XS</Button>\n    <Button variant=\"secondary\" size=\"sm\">Gap</Button>\n  </ButtonGroup>\n  <ButtonGroup gap=\"sm\">\n    <Button variant=\"secondary\" size=\"sm\">SM</Button>\n    <Button variant=\"secondary\" size=\"sm\">Gap</Button>\n  </ButtonGroup>\n  <ButtonGroup gap=\"md\">\n    <Button variant=\"secondary\" size=\"sm\">MD</Button>\n    <Button variant=\"secondary\" size=\"sm\">Gap</Button>\n  </ButtonGroup>\n</div>"},{"name":"Alignment","description":"Different alignment options","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '300px' }}>\n  <ButtonGroup align=\"start\">\n    <Button variant=\"secondary\" size=\"sm\">Start</Button>\n    <Button variant=\"secondary\" size=\"sm\">Aligned</Button>\n  </ButtonGroup>\n  <ButtonGroup align=\"center\">\n    <Button variant=\"secondary\" size=\"sm\">Center</Button>\n    <Button variant=\"secondary\" size=\"sm\">Aligned</Button>\n  </ButtonGroup>\n  <ButtonGroup align=\"end\">\n    <Button variant=\"secondary\" size=\"sm\">End</Button>\n    <Button variant=\"secondary\" size=\"sm\">Aligned</Button>\n  </ButtonGroup>\n</div>"},{"name":"Form Actions","description":"Common pattern for form submit/cancel","code":"<ButtonGroup align=\"end\" role=\"group\" aria-label=\"Form actions\">\n  <Button variant=\"ghost\">Cancel</Button>\n  <Button variant=\"primary\">Submit</Button>\n</ButtonGroup>"}],"contract":{"propsSummary":["children: ReactNode - buttons to group","gap: none|xs|sm|md - spacing between buttons","wrap: boolean - allow wrapping","align: start|center|end - alignment","Pass-through DOM props supported on root (id, role, aria-*, data-*, handlers)"],"a11yRules":["A11Y_GROUP_LABEL"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["children: node (required)","gap: none|xs|sm|md (default: sm)","wrap: boolean (default: false)","align: start|center|end"],"sourcePath":"src/components/ButtonGroup/index.tsx","exportName":"ButtonGroup","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:51.693Z"},"performance":{"bundleSize":599,"rawSize":1007,"complexity":"lightweight","budgetPercent":4,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"ButtonGroup (self)","bytes":427,"percent":42}]}},"Card":{"filePath":"src/components/Card/index.tsx","meta":{"name":"Card","description":"Container for grouping related content","category":"layout","tags":["container","layout","surface"],"status":"stable"},"usage":{"when":["Grouping related pieces of content together","Creating visual separation between content sections","Displaying a preview or summary of an item","Building dashboard widgets or tiles"],"whenNot":["Simple text content that does not need grouping","Modal or dialog content (use Dialog component)","Navigation items (use List or Sidebar patterns)"],"guidelines":["Use consistent card variants within the same context","Cards in a grid should have uniform sizing","Use elevated variant sparingly for emphasis","Use stat and panel variants for dashboard surfaces so spacing, border, and radius stay consistent","If a card is clickable, provide clear hover/focus affordances and prefer explicit buttons/links inside the card"],"accessibility":["Card is a semantic container (article/div/section); onClick adds keyboard and role=\"button\" behavior, but explicit Button or Link actions are preferred","Card titles should be appropriate heading levels"]},"props":{"children":{"type":"node","description":"Card content - use Card.Header, Card.Body, Card.Footer sub-components","required":true},"variant":{"type":"enum","description":"Visual style of the card surface","default":"default","required":false,"values":["default","outlined","outline","elevated","stat","panel"],"constraints":["Use \"elevated\" sparingly to maintain visual hierarchy","Use \"stat\" for compact dashboard metric tiles","Use \"panel\" with Card.Header divided and padding=\"none\" for dashboard panels"]},"padding":{"type":"enum","description":"Internal padding size","default":"md","required":false,"values":["none","sm","md","lg"]},"as":{"type":"enum","description":"Semantic HTML element for the card root","default":"article","required":false,"values":["article","div","section"]},"style":{"type":"object","description":"","required":false}},"relations":[{"component":"Grid","relationship":"parent","note":"Use Grid + Card for responsive card layouts"},{"component":"List","relationship":"alternative","note":"Use List for linear, text-first layouts"}],"variants":[{"name":"Nested Heading","description":"Select the heading level required by the surrounding document outline","code":"<Card variant=\"panel\" padding=\"none\">\n  <Card.Header divided>\n    <Card.Title as=\"h4\">Nested panel</Card.Title>\n  </Card.Header>\n  <Card.Body padding=\"md\">Panel content</Card.Body>\n</Card>"},{"name":"Default","description":"Standard quiet card surface","code":"<Card>\n  <Card.Header>\n    <Card.Title>Card Title</Card.Title>\n    <Card.Description>A brief description</Card.Description>\n  </Card.Header>\n  <Card.Body>Card content goes here.</Card.Body>\n</Card>"},{"name":"Outlined","description":"Card with border instead of shadow","code":"<Card variant=\"outlined\">\n  <Card.Header>\n    <Card.Title>Outlined Card</Card.Title>\n  </Card.Header>\n  <Card.Body>Content with border.</Card.Body>\n</Card>"},{"name":"Outline","description":"Card with border, using the \"outline\" alias for \"outlined\"","code":"<Card variant=\"outline\">\n  <Card.Header>\n    <Card.Title>Outline Card</Card.Title>\n  </Card.Header>\n  <Card.Body>Uses the Radix/Shadcn-style alias.</Card.Body>\n</Card>"},{"name":"Elevated","description":"Card with prominent shadow for emphasis","code":"<Card variant=\"elevated\">\n  <Card.Header>\n    <Card.Title>Featured Item</Card.Title>\n  </Card.Header>\n  <Card.Body>Important content.</Card.Body>\n</Card>"},{"name":"Stat","description":"Compact metric tile for dashboard grids","code":"<Card variant=\"stat\">\n  <Stack gap=\"md\">\n    <Stack gap=\"xs\">\n      <Text as=\"strong\" size=\"2xl\" weight=\"bold\" letterSpacing=\"tighter\" tabularNums>94%</Text>\n      <Text as=\"p\" size=\"sm\" color=\"secondary\">Component coverage</Text>\n    </Stack>\n    <Progress value={94} variant=\"success\" size=\"sm\" aria-label=\"Component coverage progress\" />\n  </Stack>\n</Card>"},{"name":"Panel","description":"Dashboard panel with a divided header and body-owned spacing","code":"<Card variant=\"panel\" padding=\"none\">\n  <Card.Header divided>\n    <Card.Title>System states</Card.Title>\n  </Card.Header>\n  <Card.Body padding=\"md\">\n    Panel content\n  </Card.Body>\n</Card>"},{"name":"Interactive","description":"Clickable card surface (root stays a semantic container)","code":"<Card as=\"section\" onClick={() => alert('Card clicked!')}>\n  <Card.Header>\n    <Card.Title>Click Me</Card.Title>\n    <Card.Description>This card is interactive</Card.Description>\n  </Card.Header>\n  <Card.Body>Click anywhere on this card.</Card.Body>\n</Card>"},{"name":"Section Root","description":"Use the as prop to match the surrounding document semantics","code":"<Card as=\"section\" aria-labelledby=\"billing-card-title\">\n  <Card.Header>\n    <Card.Title id=\"billing-card-title\">Billing Summary</Card.Title>\n  </Card.Header>\n  <Card.Body>Section semantics can improve document structure for grouped content.</Card.Body>\n</Card>"},{"name":"With Footer","description":"Card with header, body, and footer","code":"<Card>\n  <Card.Header>\n    <Card.Title>Card with Footer</Card.Title>\n    <Card.Description>Complete card layout</Card.Description>\n  </Card.Header>\n  <Card.Body>Main content area.</Card.Body>\n  <Card.Footer>Footer actions go here</Card.Footer>\n</Card>"},{"name":"Content Only","description":"Card with just body content","code":"<Card>\n  <Card.Body>Just content, no header or footer.</Card.Body>\n</Card>"}],"contract":{"propsSummary":["variant: default|outlined|outline|elevated|stat|panel (default: default)","padding: none|sm|md|lg (default: md)","as: article|div|section (default: article) - card root element","onClick: (event) => void - click handler on root (adds role/button keyboard behavior)","Sub-components: Card.Header, Card.Title, Card.Description, Card.Body, Card.Footer","Card.Body padding: none|sm|md|lg - use for panel body spacing"],"a11yRules":["A11Y_CARD_HEADING","A11Y_CARD_INTERACTIVE"]},"ai":{"compositionPattern":"compound","subComponents":["Header","Title","Description","Body","Footer"],"requiredChildren":["Body"],"commonPatterns":["<Card><Card.Body>{content}</Card.Body></Card>","<Card><Card.Header><Card.Title>{title}</Card.Title></Card.Header><Card.Body>{content}</Card.Body></Card>","<Card><Card.Header><Card.Title>{title}</Card.Title><Card.Description>{desc}</Card.Description></Card.Header><Card.Body>{content}</Card.Body><Card.Footer>{actions}</Card.Footer></Card>"]},"propsSummary":["children: node (required)","variant: default|outlined|outline|elevated|stat|panel (default: default)","padding: none|sm|md|lg (default: md)","as: article|div|section (default: article)","style: object"],"sourcePath":"src/components/Card/index.tsx","exportName":"Card","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:51.869Z"},"performance":{"bundleSize":1056,"rawSize":2515,"complexity":"lightweight","budgetPercent":7,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Card (self)","bytes":1833,"percent":73}]}},"Chart":{"filePath":"src/components/Chart/index.tsx","meta":{"name":"Chart","description":"Composable chart wrapper for recharts with theme-aware tooltips, legends, and color integration.","category":"display","tags":["chart","graph","data-visualization","recharts"],"status":"stable","dependencies":[{"name":"recharts","version":">=2.0.0 || >=3.0.0","reason":"Optional — powers Chart.Tooltip and Chart.Legend; both render nothing until it is installed."}]},"usage":{"when":["Displaying data trends over time","Comparing categorical data","Showing distribution or composition","Dashboard data visualizations"],"whenNot":["Simple numeric values (use Text or Badge)","Progress toward a goal (use Progress)","Tabular data without visualization (use Table)"],"guidelines":["Use ChartContainer to wrap recharts chart components","Define a ChartConfig to map data keys to labels and colors (and optionally icons for custom legend/tooltip UIs)","Use FUI CSS variables for colors so charts adapt to theme changes","Use ChartTooltip and ChartLegend for consistent themed overlays","ChartTooltip and ChartLegend accept custom content renderers for advanced formatting"],"accessibility":["Charts include recharts accessibilityLayer by default","Provide meaningful labels in ChartConfig for screen readers","Consider providing a data table alternative for complex charts"]},"props":{"config":{"type":"object","description":"ChartConfig mapping data keys to labels/colors (optional icon per series)","required":true},"children":{"type":"element","description":"A recharts chart component (LineChart, BarChart, etc.)","required":true},"summary":{"type":"string","description":"Non-visual summary announced to assistive technology users","required":false},"dataTable":{"type":"node","description":"Optional accessible data table or textual fallback","required":false},"style":{"type":"object","description":"","required":false}},"relations":[{"component":"Card","relationship":"parent","note":"Charts are typically placed inside Cards"},{"component":"Progress","relationship":"alternative","note":"Use Progress for single-value completion"},{"component":"Table","relationship":"sibling","note":"Combine with Table for full data views"}],"variants":[{"name":"Line Chart","description":"Multi-series line chart showing trends over time","code":"<div style={{ width: '100%', height: 300 }}>\n  <ChartContainer\n    config={{\n      revenue: { label: 'Revenue', color: 'var(--fui-color-accent)' },\n      users: { label: 'Users', color: 'var(--fui-color-info)' },\n    }}\n  >\n    <LineChart data={monthlyData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>\n      <CartesianGrid strokeDasharray=\"3 3\" />\n      <XAxis dataKey=\"month\" />\n      <YAxis />\n      <ChartTooltip />\n      <ChartLegend />\n      <Line type=\"monotone\" dataKey=\"revenue\" stroke=\"var(--fui-color-accent)\" strokeWidth={2} dot={false} />\n      <Line type=\"monotone\" dataKey=\"users\" stroke=\"var(--fui-color-info)\" strokeWidth={2} dot={false} />\n    </LineChart>\n  </ChartContainer>\n</div>"},{"name":"Bar Chart","description":"Categorical bar chart comparing device sessions","code":"<div style={{ width: '100%', height: 300 }}>\n  <ChartContainer\n    config={{\n      sessions: { label: 'Sessions', color: 'var(--fui-color-accent)' },\n    }}\n  >\n    <BarChart data={deviceData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>\n      <CartesianGrid strokeDasharray=\"3 3\" />\n      <XAxis dataKey=\"device\" />\n      <YAxis />\n      <ChartTooltip />\n      <Bar dataKey=\"sessions\" fill=\"var(--fui-color-accent)\" radius={[4, 4, 0, 0]} />\n    </BarChart>\n  </ChartContainer>\n</div>"},{"name":"Area Chart","description":"Filled area chart showing revenue trend","code":"<div style={{ width: '100%', height: 300 }}>\n  <ChartContainer\n    config={{\n      revenue: { label: 'Revenue', color: 'var(--fui-color-accent)' },\n    }}\n  >\n    <AreaChart data={monthlyData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>\n      <CartesianGrid strokeDasharray=\"3 3\" />\n      <XAxis dataKey=\"month\" />\n      <YAxis />\n      <ChartTooltip />\n      <Area type=\"monotone\" dataKey=\"revenue\" stroke=\"var(--fui-color-accent)\" fill=\"var(--fui-color-accent)\" fillOpacity={0.15} strokeWidth={2} />\n    </AreaChart>\n  </ChartContainer>\n</div>"},{"name":"Pie Chart","description":"Donut chart showing browser share distribution","code":"<div style={{ width: '100%', height: 300 }}>\n  <ChartContainer\n    config={{\n      Chrome: { label: 'Chrome', color: 'var(--fui-color-accent)' },\n      Firefox: { label: 'Firefox', color: 'var(--fui-color-info)' },\n      Safari: { label: 'Safari', color: 'var(--fui-color-success)' },\n      Edge: { label: 'Edge', color: 'var(--fui-color-warning)' },\n    }}\n  >\n    <PieChart>\n      <ChartTooltip />\n      <ChartLegend />\n      <Pie\n        data={browserData}\n        dataKey=\"value\"\n        nameKey=\"name\"\n        cx=\"50%\"\n        cy=\"50%\"\n        innerRadius={60}\n        outerRadius={90}\n        strokeWidth={2}\n      >\n        {browserData.map((entry) => (\n          <Cell key={entry.name} fill={entry.color} />\n        ))}\n      </Pie>\n    </PieChart>\n  </ChartContainer>\n</div>"}],"contract":{"propsSummary":["config: ChartConfig - maps data keys to labels and theme colors","children: ReactElement - recharts chart component","Chart.Tooltip / Chart.Legend support custom content renderers for advanced overlays"],"a11yRules":["A11Y_CHART_LABEL"]},"propsSummary":["config: object (required)","children: element (required)","summary: string","dataTable: node","style: object"],"sourcePath":"src/components/Chart/index.tsx","exportName":"ChartContainer","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:52.043Z"},"ai":{"subComponents":["Root","Tooltip","TooltipContent","Legend","LegendContent","preload"],"compositionPattern":"compound"},"performance":{"bundleSize":1720,"rawSize":3945,"complexity":"lightweight","budgetPercent":11,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Chart (self)","bytes":3125,"percent":79},{"path":"src/utils/aria.ts","bytes":109,"percent":3}]}},"Chip":{"filePath":"src/components/Chip/index.tsx","meta":{"name":"Chip","description":"Interactive pill-shaped element for filtering, selecting, and tagging. Supports single and multi-select via Chip.Group.","category":"forms","tags":["chip","tag","filter","selection","multi-select","action"],"status":"stable"},"usage":{"when":["Filtering content by categories or tags","Multi-select scenarios like choosing interests or skills","Toggling options in a compact pill-shaped control","Displaying removable user-applied filters"],"whenNot":["Display-only status labels (use Badge)","Navigation between views (use Tabs)","Binary on/off state (use Switch)","Primary call-to-action (use Button)"],"guidelines":["Keep chip labels short (1-3 words)","Use Chip.Group for multi-select sets with shared state","Keep the default micro size for filters and tags; opt into a larger size only when the surrounding control track requires it","Use onRemove only when users should be able to dismiss the chip","Pair avatar chips with user-related selections (assignees, reviewers)","Provide an explicit value on Chip when using non-string/custom JSX children inside Chip.Group"],"accessibility":["Chips are buttons and use aria-pressed for selection state","Chip.Group is a grouping wrapper; add role/aria-label when needed for assistive context","Remove buttons include descriptive aria-label with chip text","Disabled chips are properly excluded from interaction"]},"props":{"children":{"type":"node","description":"Chip label text","required":true},"variant":{"type":"enum","description":"Visual style variant","default":"filled","required":false,"values":["filled","outlined","outline","soft"]},"size":{"type":"enum","description":"Chip size","default":"\"xs\"","required":false,"values":["xs","sm","md","lg"]},"selected":{"type":"boolean","description":"Whether the chip is in a selected state","default":"false","required":false},"icon":{"type":"node","description":"Icon element rendered before the label","required":false},"avatar":{"type":"node","description":"Avatar element rendered before the label","required":false},"onRemove":{"type":"function","description":"Makes chip removable. Called when X is clicked.","required":false},"value":{"type":"string","description":"Value identifier used by Chip.Group for selection tracking","required":false},"disabled":{"type":"boolean","description":"","default":"false","required":false},"onClick":{"type":"function","description":"","required":false}},"relations":[{"component":"Badge","relationship":"sibling","note":"Badge is display-only; Chip is interactive"},{"component":"ToggleGroup","relationship":"alternative","note":"Use ToggleGroup for mutually exclusive options"},{"component":"Button","relationship":"alternative","note":"Use Button for primary actions, Chip for selection/filtering"}],"variants":[{"name":"Default","description":"Basic filled chip","code":"<Chip>Default</Chip>"},{"name":"Outline","description":"Chip with border using the \"outline\" alias for \"outlined\"","code":"<div style={{ display: 'flex', gap: '8px' }}>\n  <Chip variant=\"outline\">Outline</Chip>\n  <Chip variant=\"outline\" selected>Outline Selected</Chip>\n</div>"},{"name":"Selected","description":"Chip in selected state across variants","code":"<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Chip selected>Filled</Chip>\n  <Chip variant=\"outlined\" selected>Outlined</Chip>\n  <Chip variant=\"soft\" selected>Soft</Chip>\n</Stack>"},{"name":"With Avatar","description":"Chip with a leading avatar image","code":"<Chip avatar={<img src=\"https://i.pravatar.cc/32?u=chip\" alt=\"\" />}>\n  Jane Doe\n</Chip>"},{"name":"With Remove","description":"Removable chip with dismiss button","code":"<div style={{ display: 'flex', gap: '8px' }}>\n  <Chip onRemove={() => {}}>React</Chip>\n  <Chip onRemove={() => {}}>TypeScript</Chip>\n  <Chip onRemove={() => {}}>SCSS</Chip>\n</div>"},{"name":"Selected Removable","description":"Selected removable chips retain the shared selection treatment across variants","code":"<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Chip selected onRemove={() => {}}>Filled</Chip>\n  <Chip variant=\"outlined\" selected onRemove={() => {}}>Outlined</Chip>\n  <Chip variant=\"soft\" selected onRemove={() => {}}>Soft</Chip>\n</Stack>"},{"name":"Chip Group","description":"Multi-select chip set with shared state","code":"<Chip.Group defaultValue={['react']}>\n  <Chip value=\"react\">React</Chip>\n  <Chip value=\"vue\">Vue</Chip>\n  <Chip value=\"angular\">Angular</Chip>\n  <Chip value=\"svelte\">Svelte</Chip>\n</Chip.Group>"},{"name":"Chip Group with Custom Labels","description":"Use explicit values when chip labels are custom JSX","code":"<Chip.Group aria-label=\"Assignees\">\n  <Chip value=\"jane\">\n    <span>Jane Doe</span>\n  </Chip>\n  <Chip value=\"sam\">\n    <span>Sam Lee</span>\n  </Chip>\n</Chip.Group>"},{"name":"Disabled","description":"Chip in disabled state","code":"<div style={{ display: 'flex', gap: '8px' }}>\n  <Chip disabled>Disabled</Chip>\n  <Chip disabled selected>Disabled Selected</Chip>\n</div>"}],"contract":{"propsSummary":["children: ReactNode - chip label (required)","variant: filled|outlined|outline|soft - visual style","size: xs|sm|md|lg - chip size (xs by default)","selected: boolean - selection state","icon/avatar: ReactNode - leading visual","onRemove: () => void - makes chip removable","value: string - identifier for Chip.Group","Chip.Group forwards DOM props (id, role, aria-*, data-*, handlers)","Chip.Group: non-string chip labels should set an explicit value"],"a11yRules":["A11Y_CHIP_SELECTION","A11Y_CHIP_DISMISS"]},"ai":{"compositionPattern":"compound","subComponents":["Group"]},"propsSummary":["children: node (required)","variant: filled|outlined|outline|soft (default: filled)","size: xs|sm|md|lg (default: xs)","selected: boolean (default: false)","icon: node","avatar: node","onRemove: function","value: string","disabled: boolean (default: false)","onClick: function"],"sourcePath":"src/components/Chip/index.tsx","exportName":"Chip","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:54.270Z"},"performance":{"bundleSize":1137,"rawSize":2261,"complexity":"lightweight","budgetPercent":7,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Chip (self)","bytes":1675,"percent":74}]}},"CodeBlock":{"filePath":"src/components/CodeBlock/index.tsx","meta":{"name":"CodeBlock","description":"Syntax-highlighted code display with copy functionality, theming, diff view, and collapsible sections","category":"display","tags":["code","syntax","highlighting","documentation","developer","diff"],"status":"stable","dependencies":[{"name":"shiki","version":">=1.0.0","reason":"Optional — provides syntax highlighting; without it code renders unhighlighted."}]},"usage":{"when":["Displaying code examples in documentation","Showing installation commands","Presenting configuration snippets","Teaching programming concepts","Showing code diffs or changes","Displaying long code files with collapse functionality"],"whenNot":["User-editable code (use code editor)","Very short inline code (use <code> element)","Non-code content (use Text or Card)"],"guidelines":["Always specify the correct language for accurate highlighting","Use filename prop to show source file name in header bar","Use copyPlacement=\"auto\" to render copy in overlay mode when no filename is provided","Use title prop for external labels above the code block","Enable line numbers for longer code samples","Use highlightLines to draw attention to key lines","Use addedLines/removedLines for diff highlighting","Set maxHeight for very long code blocks to prevent layout issues","Use collapsible for code samples that users may want to skim","Choose a theme that matches your documentation style","Keep code examples concise and focused","Use CodeBlock.Tabbed for multi-language snippets; tabs support controlled value/onValueChange and explicit tab values"],"accessibility":["Code is presented in a semantic pre/code structure","Copy button has appropriate aria-label","Keyboard accessible copy functionality","Collapse button has aria-expanded state"]},"props":{"code":{"type":"string","description":"The code string to display","required":true},"language":{"type":"enum","description":"Programming language for syntax highlighting","default":"tsx","required":false,"values":["tsx","typescript","ts","javascript","js","jsx","bash","shell","css","scss","sass","json","html","xml","markdown","md","yaml","yml","python","py","ruby","go","rust","java","kotlin","swift","c","cpp","csharp","php","sql","graphql","diff","plaintext","text"]},"theme":{"type":"enum","description":"Syntax highlighting theme","default":"one-dark-pro","required":false,"values":["synthwave-84","github-dark","github-light","one-dark-pro","dracula","nord","monokai","vitesse-dark","vitesse-light","min-dark","min-light"]},"showCopy":{"type":"boolean","description":"Whether to show the copy button","default":"true","required":false},"title":{"type":"string","description":"Optional title displayed above the code block (external label)","required":false},"filename":{"type":"string","description":"Optional filename shown in header bar inside code block","required":false},"caption":{"type":"string","description":"Optional caption displayed below the code block","required":false},"showLineNumbers":{"type":"boolean","description":"Whether to display line numbers","default":"false","required":false},"startLineNumber":{"type":"number","description":"Starting line number (useful for code excerpts)","default":"1","required":false},"highlightLines":{"type":"array","description":"Lines to highlight (e.g., [1, 3, \"5-7\"])","required":false},"addedLines":{"type":"array","description":"Lines marked as added in diff view (e.g., [2, \"4-6\"])","required":false},"removedLines":{"type":"array","description":"Lines marked as removed in diff view (e.g., [1, 3])","required":false},"wordWrap":{"type":"boolean","description":"Enable word wrapping for long lines","default":"false","required":false},"maxHeight":{"type":"number","description":"Maximum height in pixels (enables scrolling)","required":false},"collapsible":{"type":"boolean","description":"Allow collapsing/expanding the code block","default":"false","required":false},"defaultCollapsed":{"type":"boolean","description":"Initial collapsed state (only applies when collapsible is true)","default":"false","required":false},"collapsedLines":{"type":"number","description":"Number of lines to show when collapsed","default":"5","required":false},"compact":{"type":"boolean","description":"Compact mode with reduced padding","default":"false","required":false},"persistentCopy":{"type":"boolean","description":"Show a persistent copy button that is always visible","default":"false","required":false},"copyPlacement":{"type":"enum","description":"Where to place the copy button when not using persistentCopy","default":"auto","required":false,"values":["auto","header","overlay"]},"bg":{"type":"string","description":"Custom background color for the code block (useful when the content area is pure black or dark gray)","required":false},"onCopy":{"type":"function","description":"Callback fired when the copy button is clicked and copy succeeds","required":false}},"relations":[{"component":"Card","relationship":"parent","note":"Can be wrapped in Card for additional context"},{"component":"Tabs","relationship":"child","note":"Use in Tabs for showing code in multiple languages"}],"variants":[{"name":"Default","description":"Basic code block with syntax highlighting","code":"<CodeBlock code={`import { Button } from '@usefragments/ui';\n\nfunction App() {\n  return <Button>Click me</Button>;\n}`} language=\"tsx\" />"},{"name":"With Filename","description":"Code block with filename in header bar","code":"<CodeBlock filename=\"app.tsx\" code={`import { Button, Card } from '@usefragments/ui';\n\nfunction App() {\n  return (\n    <Card>\n      <Card.Header>Welcome</Card.Header>\n      <Card.Content>\n        <Button>Get Started</Button>\n      </Card.Content>\n    </Card>\n  );\n}`} language=\"tsx\" />"},{"name":"With Title","description":"Code block with external title label","code":"<CodeBlock title=\"Installation\" code=\"npm install @usefragments/ui\" language=\"bash\" />"},{"name":"With Caption","description":"Code block with footer caption","code":"<CodeBlock\n  code={`const API_URL = process.env.NEXT_PUBLIC_API_URL;`}\n  language=\"typescript\"\n  caption=\"Environment variables must be prefixed with NEXT_PUBLIC_ to be available in the browser.\"\n/>"},{"name":"With Line Numbers","description":"Shows line numbers for reference","code":"<CodeBlock code={`const greeting = \"Hello\";\nconst name = \"World\";\nconsole.log(\\`\\${greeting}, \\${name}!\\`);`} language=\"typescript\" showLineNumbers />"},{"name":"Custom Start Line","description":"Shows code excerpt starting from a specific line number","code":"<CodeBlock\n  code={`  return (\n    <button onClick={() => setCount(c => c + 1)}>\n      Count: {count}\n    </button>\n  );\n}`}\n  language=\"tsx\"\n  showLineNumbers\n  startLineNumber={15}\n  caption=\"Lines 15-20 from Counter.tsx\"\n/>"},{"name":"With Highlighted Lines","description":"Emphasizes specific lines of code","code":"<CodeBlock code={`import { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <button onClick={() => setCount(c => c + 1)}>\n      Count: {count}\n    </button>\n  );\n}`} language=\"tsx\" showLineNumbers highlightLines={[4, '7-9']} />"},{"name":"Diff View","description":"Shows added and removed lines in a diff-like format","code":"<CodeBlock\n  code={`import { useState } from 'react';\nimport { useCallback } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n  const increment = () => setCount(c => c + 1);\n  const increment = useCallback(() => setCount(c => c + 1), []);\n\n  return <button onClick={increment}>Count: {count}</button>;\n}`}\n  language=\"tsx\"\n  showLineNumbers\n  removedLines={[6]}\n  addedLines={[2, 7]}\n/>"},{"name":"GitHub Dark Theme","description":"Using the GitHub Dark theme","code":"<CodeBlock\n  code={`async function fetchUser(id: string) {\n  const response = await fetch(\\`/api/users/\\${id}\\`);\n  return response.json();\n}`}\n  language=\"typescript\"\n  theme=\"github-dark\"\n/>"},{"name":"GitHub Light Theme","description":"Using the GitHub Light theme for light backgrounds","code":"<CodeBlock\n  code={`def fibonacci(n):\n    if n <= 1:\n        return n\n    return fibonacci(n - 1) + fibonacci(n - 2)`}\n  language=\"python\"\n  theme=\"github-light\"\n/>"},{"name":"Dracula Theme","description":"Using the popular Dracula theme","code":"<CodeBlock\n  code={`fn main() {\n    println!(\"Hello, Rust!\");\n}`}\n  language=\"rust\"\n  theme=\"dracula\"\n/>"},{"name":"Word Wrap","description":"Long lines wrap instead of scrolling horizontally","code":"<CodeBlock\n  code={`const longString = \"This is a very long string that would normally cause horizontal scrolling, but with word wrap enabled it will break to the next line instead.\";`}\n  language=\"typescript\"\n  wordWrap\n/>"},{"name":"Max Height with Scroll","description":"Constrains height with scrollable content","code":"<CodeBlock\n  code={`// This code block has a maximum height\nfunction processItems(items: string[]) {\n  const results = [];\n  for (const item of items) {\n    if (item.startsWith('_')) {\n      continue;\n    }\n    const processed = item.trim().toLowerCase();\n    if (processed.length > 0) {\n      results.push(processed);\n    }\n  }\n  return results;\n}\n\nexport default processItems;`}\n  language=\"typescript\"\n  maxHeight={150}\n  showLineNumbers\n/>"},{"name":"Collapsible","description":"Long code that can be expanded/collapsed","code":"<CodeBlock\n  code={`import React, { useState, useEffect } from 'react';\n\ninterface User {\n  id: string;\n  name: string;\n  email: string;\n  avatar?: string;\n}\n\nexport function UserProfile({ userId }: { userId: string }) {\n  const [user, setUser] = useState<User | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    async function fetchUser() {\n      try {\n        setLoading(true);\n        const response = await fetch(\\`/api/users/\\${userId}\\`);\n        if (!response.ok) throw new Error('Failed to fetch');\n        const data = await response.json();\n        setUser(data);\n      } catch (err) {\n        setError(err instanceof Error ? err.message : 'Unknown error');\n      } finally {\n        setLoading(false);\n      }\n    }\n    fetchUser();\n  }, [userId]);\n\n  if (loading) return <div>Loading...</div>;\n  if (error) return <div>Error: {error}</div>;\n  if (!user) return null;\n\n  return (\n    <div>\n      <h1>{user.name}</h1>\n      <p>{user.email}</p>\n    </div>\n  );\n}`}\n  language=\"tsx\"\n  showLineNumbers\n  collapsible\n  defaultCollapsed\n  collapsedLines={8}\n/>"},{"name":"JSON","description":"Configuration file example","code":"<CodeBlock title=\"package.json\" code={`{\n  \"name\": \"my-app\",\n  \"dependencies\": {\n    \"@usefragments/ui\": \"^0.3.0\"\n  }\n}`} language=\"json\" />"},{"name":"Without Copy Button","description":"Minimal display without copy functionality","code":"<CodeBlock code=\"const simple = true;\" language=\"typescript\" showCopy={false} />"}],"contract":{"propsSummary":["code: string - required code content","language: tsx|typescript|javascript|jsx|bash|shell|css|scss|sass|json|html|xml|markdown|md|yaml|yml|python|py|ruby|go|rust|java|kotlin|swift|c|cpp|csharp|php|sql|graphql|diff|plaintext","theme: synthwave-84|github-dark|github-light|one-dark-pro|dracula|nord|monokai|vitesse-dark|vitesse-light|min-dark|min-light (default: one-dark-pro)","showCopy: boolean (default: true)","copyPlacement: auto|header|overlay (default: auto)","title: string - optional external label","filename: string - optional filename in header bar","caption: string - optional footer caption","showLineNumbers: boolean (default: false)","startLineNumber: number (default: 1)","highlightLines: (number | string)[] - lines to emphasize","addedLines: (number | string)[] - diff added lines","removedLines: (number | string)[] - diff removed lines","wordWrap: boolean (default: false)","maxHeight: number - max height with scrolling","collapsible: boolean (default: false)","defaultCollapsed: boolean (default: false)","collapsedLines: number (default: 5)","CodeBlock.Tabbed: tabs[] plus optional defaultTab/value/onValueChange for multi-language snippets"],"a11yRules":["A11Y_CODE_SEMANTIC","A11Y_BTN_LABEL"]},"ai":{"compositionPattern":"compound","subComponents":["Tabbed"]},"propsSummary":["code: string (required)","language: tsx|typescript|ts|javascript|js|jsx|bash|shell|css|scss|sass|json|html|xml|markdown|md|yaml|yml|python|py|ruby|go|rust|java|kotlin|swift|c|cpp|csharp|php|sql|graphql|diff|plaintext|text (default: tsx)","theme: synthwave-84|github-dark|github-light|one-dark-pro|dracula|nord|monokai|vitesse-dark|vitesse-light|min-dark|min-light (default: one-dark-pro)","showCopy: boolean (default: true)","title: string","filename: string","caption: string","showLineNumbers: boolean (default: false)","startLineNumber: number (default: 1)","highlightLines: array","addedLines: array","removedLines: array","wordWrap: boolean (default: false)","maxHeight: number","collapsible: boolean (default: false)","defaultCollapsed: boolean (default: false)","collapsedLines: number (default: 5)","compact: boolean (default: false)","persistentCopy: boolean (default: false)","copyPlacement: auto|header|overlay (default: auto)","bg: string","onCopy: function"],"sourcePath":"src/components/CodeBlock/index.tsx","exportName":"CodeBlock","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:52.626Z"},"performance":{"bundleSize":4244,"rawSize":11384,"complexity":"lightweight","budgetPercent":28,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"CodeBlock (self)","bytes":8967,"percent":79},{"path":"Tabs","bytes":1786,"percent":16}]}},"ColorPicker":{"filePath":"src/components/ColorPicker/index.tsx","meta":{"name":"ColorPicker","description":"Color selection control with hex input and visual picker. Displays a swatch that opens a full color picker on click.","category":"forms","tags":["color","picker","input","hex","swatch","theme"],"status":"stable","dependencies":[{"name":"react-colorful","version":">=5.0.0","reason":"Optional — renders the visual picker surface; the swatch and hex input work without it."}]},"usage":{"when":["Theme customization interfaces","Brand color selection","Design tool color inputs","User preference settings for colors"],"whenNot":["Predefined color options only (use RadioGroup with swatches)","Simple color display without editing (use a colored Badge)","Color indication only (use semantic color tokens)"],"guidelines":["Always provide a label to describe what the color is for","Use helperText to explain color usage or constraints","Consider providing color presets alongside the picker for common choices","Validate hex format (#RRGGBB) on input"],"accessibility":["Label is associated with the color input","Swatch button has appropriate aria-label","Color picker popup is keyboard accessible","Hex input allows direct text entry"]},"props":{"label":{"type":"string","description":"Label text above the picker","required":false},"value":{"type":"string","description":"Controlled color value in hex format (#RRGGBB)","required":false},"defaultValue":{"type":"string","description":"Default color for uncontrolled usage","default":"#000000","required":false},"onChange":{"type":"function","description":"Called with new color value when changed","required":false},"onValueChange":{"type":"function","description":"Alias for onChange (Radix convention)","required":false},"helperText":{"type":"string","description":"Helper text below the picker (preferred)","required":false},"description":{"type":"string","description":"Deprecated alias for helperText","required":false},"error":{"type":"boolean","description":"Show error styling","default":"false","required":false},"disabled":{"type":"boolean","description":"Disable the color picker","default":"false","required":false},"size":{"type":"enum","description":"Size variant","default":"md","required":false,"values":["sm","md","lg"]},"showInput":{"type":"boolean","description":"Show the hex input field","default":"true","required":false}},"relations":[{"component":"Input","relationship":"sibling","note":"ColorPicker is a specialized input for colors"},{"component":"RadioGroup","relationship":"alternative","note":"Use RadioGroup for predefined color choices"},{"component":"Field","relationship":"parent","note":"ColorPicker uses Field internally for structure"}],"variants":[{"name":"Default","description":"Basic color picker with label","code":"<ColorPicker\n  label=\"Brand Color\"\n  defaultValue=\"#3b82f6\"\n/>"},{"name":"With Helper Text","description":"Color picker with helper text","code":"<ColorPicker\n  label=\"Primary Color\"\n  defaultValue=\"#10b981\"\n  helperText=\"This color will be used for buttons and links\"\n/>"},{"name":"Controlled","description":"Controlled color picker that logs changes","code":"<ControlledColorPickerDemo />"},{"name":"Multiple Pickers","description":"Multiple color pickers for theme configuration","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '240px' }}>\n  <ColorPicker label=\"Primary\" defaultValue=\"#3b82f6\" />\n  <ColorPicker label=\"Success\" defaultValue=\"#22c55e\" />\n  <ColorPicker label=\"Warning\" defaultValue=\"#f59e0b\" />\n  <ColorPicker label=\"Danger\" defaultValue=\"#ef4444\" />\n</div>"},{"name":"Compact","description":"Small size with swatch only (no input)","code":"<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>\n  <ColorPicker defaultValue=\"#ef4444\" size=\"sm\" showInput={false} />\n  <ColorPicker defaultValue=\"#f59e0b\" size=\"sm\" showInput={false} />\n  <ColorPicker defaultValue=\"#22c55e\" size=\"sm\" showInput={false} />\n  <ColorPicker defaultValue=\"#3b82f6\" size=\"sm\" showInput={false} />\n</div>"},{"name":"Sizes","description":"Different size variants","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '240px' }}>\n  <ColorPicker label=\"Small\" defaultValue=\"#3b82f6\" size=\"sm\" />\n  <ColorPicker label=\"Medium (default)\" defaultValue=\"#3b82f6\" size=\"md\" />\n  <ColorPicker label=\"Large\" defaultValue=\"#3b82f6\" size=\"lg\" />\n</div>"},{"name":"Error State","description":"Color picker with error styling","code":"<ColorPicker\n  label=\"Brand Color\"\n  defaultValue=\"#000000\"\n  error\n  helperText=\"Please select a valid brand color\"\n/>"},{"name":"Disabled","description":"Disabled color picker","code":"<ColorPicker\n  label=\"Locked Color\"\n  defaultValue=\"#64748b\"\n  helperText=\"This color cannot be changed\"\n  disabled\n/>"}],"contract":{"propsSummary":["value: string - controlled hex color (#RRGGBB)","defaultValue: string - initial color for uncontrolled usage","onChange: (color: string) => void - change handler","label: string - field label","helperText: string - helper text (preferred)","description: string - deprecated alias for helperText","error: boolean - error styling","disabled: boolean - disable interaction","size: sm|md|lg - size variant","showInput: boolean - show hex input field"],"a11yRules":["A11Y_LABEL_REQUIRED","A11Y_FOCUS_VISIBLE","A11Y_TARGET_SIZE_MIN"]},"ai":{"compositionPattern":"compound","subComponents":["Root","preload"]},"propsSummary":["label: string","value: string","defaultValue: string (default: #000000)","onChange: function","onValueChange: function","helperText: string","description: string","error: boolean (default: false)","disabled: boolean (default: false)","size: sm|md|lg (default: md)","showInput: boolean (default: true)"],"sourcePath":"src/components/ColorPicker/index.tsx","exportName":"ColorPicker","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:53.238Z"},"performance":{"bundleSize":8224,"rawSize":22956,"complexity":"moderate","budgetPercent":54,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"react-colorful","bytes":14089,"percent":61},{"path":"Input","bytes":3169,"percent":14},{"path":"src/recipes/popup.ts","bytes":2753,"percent":12},{"path":"ColorPicker (self)","bytes":1990,"percent":9},{"path":"ComponentDefaults","bytes":199,"percent":1}]}},"Collapsible":{"filePath":"src/components/Collapsible/index.tsx","meta":{"name":"Collapsible","description":"An interactive component that expands/collapses to show or hide content","category":"layout","tags":["collapsible","expandable","accordion","disclosure","toggle"],"status":"stable"},"usage":{"when":["Showing/hiding additional content on demand","Building accordions or expandable sections","Collapsible navigation sections","FAQ sections with expandable answers","Settings panels with grouped options"],"whenNot":["Single item disclosure (use Accordion instead)","Navigation menus with complex interactions (use Menu)","Modal or overlay content (use Dialog or Popover)"],"guidelines":["Use clear trigger labels that indicate expandable content","Consider defaultOpen for primary content users often need","Keep trigger text concise but descriptive","Use chevron icons consistently to indicate collapsible state"],"accessibility":["Trigger must have aria-expanded to indicate state","Content region needs aria-labelledby pointing to trigger","Keyboard: Enter/Space toggles open state","Focus should remain on trigger after toggle"]},"props":{"children":{"type":"node","description":"Collapsible.Trigger and Collapsible.Content components","required":true},"defaultOpen":{"type":"boolean","description":"Whether the collapsible is initially open (uncontrolled)","default":"false","required":false},"open":{"type":"boolean","description":"Controlled open state","required":false},"onOpenChange":{"type":"function","description":"Callback when open state changes - (open: boolean) => void","required":false},"disabled":{"type":"boolean","description":"Whether the collapsible is disabled","default":"false","required":false}},"relations":[{"component":"Accordion","relationship":"alternative","note":"Use Accordion for multiple exclusive collapsible sections"},{"component":"Sidebar","relationship":"used-by","note":"Sidebar uses Collapsible for section expand/collapse"},{"component":"Menu","relationship":"alternative","note":"Use Menu for dropdown navigation with actions"}],"variants":[{"name":"Default","description":"Basic collapsible with trigger and content","code":"<Collapsible>\n  <Collapsible.Trigger>Click to expand</Collapsible.Trigger>\n  <Collapsible.Content>\n    <p>This content is hidden by default and revealed when the trigger is clicked.</p>\n  </Collapsible.Content>\n</Collapsible>"},{"name":"Default Open","description":"Collapsible that starts in the expanded state","code":"<Collapsible defaultOpen>\n  <Collapsible.Trigger>Section Title</Collapsible.Trigger>\n  <Collapsible.Content>\n    <p>This content is visible by default. Click the trigger to collapse.</p>\n  </Collapsible.Content>\n</Collapsible>"},{"name":"Chevron Start","description":"Collapsible with chevron icon on the left","code":"<Collapsible>\n  <Collapsible.Trigger chevronPosition=\"start\">Navigation</Collapsible.Trigger>\n  <Collapsible.Content>\n    <ul style={{ margin: 0, paddingLeft: '1.5rem' }}>\n      <li>Dashboard</li>\n      <li>Settings</li>\n      <li>Profile</li>\n    </ul>\n  </Collapsible.Content>\n</Collapsible>"},{"name":"No Chevron","description":"Collapsible without chevron indicator","code":"<Collapsible>\n  <Collapsible.Trigger showChevron={false}>Show more details</Collapsible.Trigger>\n  <Collapsible.Content>\n    <p>Hidden details that appear when triggered.</p>\n  </Collapsible.Content>\n</Collapsible>"},{"name":"Disabled","description":"Collapsible in disabled state","code":"<Collapsible disabled>\n  <Collapsible.Trigger>Cannot toggle (disabled)</Collapsible.Trigger>\n  <Collapsible.Content>\n    <p>This content cannot be shown because the collapsible is disabled.</p>\n  </Collapsible.Content>\n</Collapsible>"},{"name":"Multiple Sections","description":"Multiple independent collapsible sections","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>\n  <Collapsible defaultOpen>\n    <Collapsible.Trigger>Getting Started</Collapsible.Trigger>\n    <Collapsible.Content>\n      <p>Introduction and setup instructions.</p>\n    </Collapsible.Content>\n  </Collapsible>\n  <Collapsible>\n    <Collapsible.Trigger>Advanced Usage</Collapsible.Trigger>\n    <Collapsible.Content>\n      <p>Advanced configuration options.</p>\n    </Collapsible.Content>\n  </Collapsible>\n  <Collapsible>\n    <Collapsible.Trigger>API Reference</Collapsible.Trigger>\n    <Collapsible.Content>\n      <p>Complete API documentation.</p>\n    </Collapsible.Content>\n  </Collapsible>\n</div>"}],"contract":{"propsSummary":["defaultOpen: boolean - initial open state (default: false)","open: boolean - controlled open state","onOpenChange: (open: boolean) => void - state change callback","disabled: boolean - prevents interaction"],"a11yRules":["A11Y_EXPANDED_STATE","A11Y_REGION_LABEL","A11Y_KEYBOARD_NAV"]},"ai":{"compositionPattern":"compound","subComponents":["Root","Trigger","Content"],"commonPatterns":["<Collapsible>\n  <Collapsible.Trigger>...</Collapsible.Trigger>\n  <Collapsible.Content>...</Collapsible.Content>\n</Collapsible>"],"requiredChildren":["Trigger","Content"]},"propsSummary":["children: node (required)","defaultOpen: boolean (default: false)","open: boolean","onOpenChange: function","disabled: boolean (default: false)"],"sourcePath":"src/components/Collapsible/index.tsx","exportName":"Collapsible","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:52.800Z"},"performance":{"bundleSize":1511,"rawSize":3197,"complexity":"lightweight","budgetPercent":10,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Collapsible (self)","bytes":2508,"percent":78}]}},"Checkbox":{"filePath":"src/components/Checkbox/index.tsx","meta":{"name":"Checkbox","description":"Binary toggle for form fields. Use for options that require explicit submission, unlike Switch which takes effect immediately.","category":"forms","tags":["checkbox","form","boolean","selection","input"],"status":"stable"},"usage":{"when":["Form fields requiring explicit submission","Multi-select from a list of options","Terms and conditions acceptance","Filter or preference checklists"],"whenNot":["Immediate effect settings (use Switch)","Single selection from options (use RadioGroup)","Selecting from many options (use Select)"],"guidelines":["Always include a visible label","Use helperText for additional context when needed","Group related checkboxes visually","Use indeterminate state for parent/child relationships"],"accessibility":["Proper label association","Keyboard accessible (Space to toggle)","Visible focus indicator","Indeterminate state properly announced"]},"props":{"checked":{"type":"boolean","description":"Controlled checked state","required":false},"defaultChecked":{"type":"boolean","description":"Default checked state (uncontrolled)","required":false},"onCheckedChange":{"type":"function","description":"Called when checked state changes","required":false},"onChange":{"type":"function","description":"Alias for onCheckedChange: (checked: boolean) => void","required":false},"indeterminate":{"type":"boolean","description":"Indeterminate state (partial selection)","default":"false","required":false},"disabled":{"type":"boolean","description":"Disable the checkbox","default":"false","required":false},"required":{"type":"boolean","description":"Whether the checkbox is required","default":"false","required":false},"size":{"type":"enum","description":"Checkbox size","default":"\"md\"","required":false,"values":["sm","md","lg"]},"variant":{"type":"enum","description":"Visual variant. 'default' is the inline checkbox, 'card' renders as a full-width clickable card with the checkbox tucked inside.","default":"default","required":false,"values":["default","card"]},"label":{"type":"string","description":"Label text","required":false},"helperText":{"type":"string","description":"Helper text shown below the label (preferred)","required":false},"description":{"type":"string","description":"Deprecated alias for helperText","required":false},"name":{"type":"string","description":"Name attribute for form submission","required":false},"value":{"type":"string","description":"Value attribute for form submission","required":false},"id":{"type":"string","description":"ID for the checkbox input","required":false},"controlClassName":{"type":"string","description":"Class name for the checkbox control element (stable styling target)","required":false},"contentClassName":{"type":"string","description":"Class name for the label/description content wrapper","required":false},"aria-label":{"type":"string","description":"Accessible label for icon-only mode","required":false},"aria-labelledby":{"type":"string","description":"Accessible labelled-by relationship for icon-only mode","required":false},"aria-describedby":{"type":"string","description":"Accessible described-by relationship","required":false},"form":{"type":"string","description":"ID of the form that owns the hidden input","required":false},"inputRef":{"type":"union","description":"Ref to the hidden input element","required":false},"parent":{"type":"boolean","description":"Whether this checkbox controls child checkboxes in a checkbox group","required":false},"readOnly":{"type":"boolean","description":"Whether the checkbox cannot be changed by the user","default":"false","required":false},"uncheckedValue":{"type":"string","description":"Value submitted when unchecked","required":false}},"relations":[{"component":"Switch","relationship":"alternative","note":"Use Switch for immediate-effect settings"},{"component":"Input","relationship":"sibling","note":"Checkbox handles boolean; Input handles text"}],"variants":[{"name":"Default","description":"Basic checkbox with label","code":"<StatefulCheckbox label=\"Accept terms and conditions\" />"},{"name":"With Helper Text","description":"Checkbox with helper text","code":"<StatefulCheckbox\n  label=\"Email notifications\"\n  helperText=\"Receive email updates about your account activity\"\n/>"},{"name":"Checked","description":"Pre-checked checkbox","code":"<StatefulCheckbox defaultChecked label=\"Subscribe to newsletter\" />"},{"name":"Indeterminate","description":"Partial selection state","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n  <Checkbox indeterminate label=\"Select all\" />\n  <div style={{ marginLeft: '24px', display: 'flex', flexDirection: 'column', gap: '8px' }}>\n    <StatefulCheckbox defaultChecked label=\"Option 1\" />\n    <StatefulCheckbox label=\"Option 2\" />\n    <StatefulCheckbox defaultChecked label=\"Option 3\" />\n  </div>\n</div>"},{"name":"Sizes","description":"Available size options","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n  <StatefulCheckbox size=\"sm\" label=\"Small checkbox\" />\n  <StatefulCheckbox size=\"md\" label=\"Medium checkbox\" />\n  <StatefulCheckbox size=\"lg\" label=\"Large checkbox\" />\n</div>"},{"name":"Disabled","description":"Non-interactive states","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n  <Checkbox disabled label=\"Disabled unchecked\" />\n  <Checkbox disabled checked label=\"Disabled checked\" />\n</div>"},{"name":"Custom Styling Targets","description":"Use explicit class targets for control vs content styling","code":"<Checkbox\n  label=\"Styled checkbox\"\n  helperText=\"Control and content wrappers can be targeted independently\"\n  controlClassName=\"demo-checkbox-control\"\n  contentClassName=\"demo-checkbox-content\"\n/>"}],"contract":{"propsSummary":["checked: boolean - controlled checked state","onCheckedChange: (checked) => void - change handler","onChange: (checked) => void - alias for onCheckedChange","indeterminate: boolean - partial selection state","label: string - checkbox label","helperText: string - helper text (preferred)","description: string - deprecated alias for helperText","controlClassName/contentClassName - explicit styling targets for control and content"],"a11yRules":["A11Y_CHECKBOX_LABEL","A11Y_CHECKBOX_FOCUS","A11Y_TARGET_SIZE_MIN"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["checked: boolean","defaultChecked: boolean","onCheckedChange: function","onChange: function","indeterminate: boolean (default: false)","disabled: boolean (default: false)","required: boolean (default: false)","size: sm|md|lg (default: md)","label: string","helperText: string","description: string","name: string","value: string","id: string","controlClassName: string","contentClassName: string","aria-label: string","aria-labelledby: string","aria-describedby: string"],"sourcePath":"src/components/Checkbox/index.tsx","exportName":"Checkbox","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:52.226Z"},"performance":{"bundleSize":1374,"rawSize":3393,"complexity":"lightweight","budgetPercent":9,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Checkbox (self)","bytes":2484,"percent":73},{"path":"ComponentDefaults","bytes":198,"percent":6},{"path":"src/utils/aria.ts","bytes":110,"percent":3}]}},"Combobox":{"filePath":"src/components/Combobox/index.tsx","meta":{"name":"Combobox","description":"Searchable select input that filters a dropdown list of options as you type. Supports single and multiple selection with chips.","category":"forms","tags":["combobox","autocomplete","search","select","typeahead","form","multiselect"],"status":"stable"},"usage":{"when":["Users need to search/filter through many options","Large option lists where scrolling is impractical","When users might know what they are looking for","Autocomplete or typeahead functionality","Multiple selections from a searchable list"],"whenNot":["Few options (under 5) - use Select or RadioGroup","Free-form text with no predefined options - use Input","Non-searchable single selection - use Select","Actions, not selection - use Menu"],"guidelines":["Include a placeholder that explains what to search for","Use label prop for accessible field labeling","Use helperText for guidance and error for validation messages","Provide an empty state message when no results match","Group related options with Combobox.Group for large lists","Static items may be composed through fragments and groups; filtering preserves wrapper composition","Keep option text concise and searchable","Use multiple prop for multi-select with chip display"],"accessibility":["Full keyboard navigation support (arrow keys, enter, escape)","Type-ahead filtering within options","Proper ARIA combobox roles and attributes","Screen reader announcements for filtered results","Chip removal via keyboard in multi-select mode"]},"props":{"multiple":{"type":"boolean","description":"Allow multiple selections with chips","default":"false","required":false},"value":{"type":"union","description":"Controlled selected value (string for single, string[] for multiple)","required":false},"defaultValue":{"type":"union","description":"Default selected value (uncontrolled)","required":false},"onValueChange":{"type":"union","description":"Called when selection changes","required":false},"onChange":{"type":"union","description":"Alias for onValueChange","required":false},"children":{"type":"node","description":"Combobox input and content","required":true},"open":{"type":"boolean","description":"Controlled open state of the dropdown","required":false},"defaultOpen":{"type":"boolean","description":"Initial open state for uncontrolled usage","default":"false","required":false},"onOpenChange":{"type":"function","description":"Called when dropdown open state changes","required":false},"required":{"type":"boolean","description":"","required":false},"name":{"type":"string","description":"","required":false},"placeholder":{"type":"string","description":"Placeholder text for the input","required":false},"autoHighlight":{"type":"boolean","description":"Auto-highlight first matching item while filtering","default":"true","required":false},"size":{"type":"enum","description":"Size variant","default":"\"md\"","required":false,"values":["sm","md","lg"]},"className":{"type":"string","description":"Wrapper class name","required":false},"label":{"type":"string","description":"Visible label text above the combobox","required":false},"helperText":{"type":"string","description":"Helper text shown below the combobox","required":false},"error":{"type":"union","description":"Show error styling. When a string is provided, it is displayed as an error message.","required":false},"disabled":{"type":"boolean","description":"Disable the combobox","default":"false","required":false},"autoComplete":{"type":"string","description":"","required":false},"form":{"type":"string","description":"","required":false},"inputRef":{"type":"union","description":"","required":false},"readOnly":{"type":"boolean","description":"","required":false}},"relations":[{"component":"Select","relationship":"alternative","note":"Use Select when search/filtering is not needed"},{"component":"Input","relationship":"sibling","note":"Use Input for free-form text entry"},{"component":"Listbox","relationship":"sibling","note":"Use Listbox for inline option lists"}],"variants":[{"name":"Default","description":"Basic searchable select","code":"<StatefulCombobox placeholder=\"Select a fruit\">\n  <Combobox.Input />\n  <Combobox.Content>\n    <Combobox.Item value=\"apple\">Apple</Combobox.Item>\n    <Combobox.Item value=\"banana\">Banana</Combobox.Item>\n    <Combobox.Item value=\"orange\">Orange</Combobox.Item>\n    <Combobox.Item value=\"grape\">Grape</Combobox.Item>\n  </Combobox.Content>\n</StatefulCombobox>"},{"name":"Multiple Selection","description":"Multi-select with chips","code":"<StatefulCombobox multiple placeholder=\"Select fruits...\">\n  <Combobox.Input />\n  <Combobox.Content>\n    <Combobox.Item value=\"apple\">Apple</Combobox.Item>\n    <Combobox.Item value=\"banana\">Banana</Combobox.Item>\n    <Combobox.Item value=\"orange\">Orange</Combobox.Item>\n    <Combobox.Item value=\"grape\">Grape</Combobox.Item>\n    <Combobox.Item value=\"mango\">Mango</Combobox.Item>\n    <Combobox.Item value=\"kiwi\">Kiwi</Combobox.Item>\n  </Combobox.Content>\n</StatefulCombobox>"},{"name":"With Label and Helper Text","description":"Combobox with built-in label and helper text","code":"<StatefulCombobox\n  label=\"Assignee\"\n  placeholder=\"Search assignees...\"\n  helperText=\"Type to filter the list of available assignees.\"\n>\n  <Combobox.Input />\n  <Combobox.Content>\n    <Combobox.Empty>No matches</Combobox.Empty>\n    <Combobox.Item value=\"alice\">Alice Johnson</Combobox.Item>\n    <Combobox.Item value=\"bob\">Bob Chen</Combobox.Item>\n    <Combobox.Item value=\"carol\">Carol Smith</Combobox.Item>\n  </Combobox.Content>\n</StatefulCombobox>"},{"name":"Error State","description":"Validation error with message","code":"<Combobox\n  label=\"Reviewer\"\n  placeholder=\"Search reviewers...\"\n  error=\"Please select a reviewer\"\n  disabled\n>\n  <Combobox.Input />\n  <Combobox.Content>\n    <Combobox.Item value=\"alice\">Alice</Combobox.Item>\n  </Combobox.Content>\n</Combobox>"},{"name":"With Groups","description":"Options organized into groups","code":"<StatefulCombobox placeholder=\"Search countries...\">\n  <Combobox.Input />\n  <Combobox.Content>\n    <>\n      <Combobox.Group>\n        <Combobox.GroupLabel>North America</Combobox.GroupLabel>\n        <Combobox.Item value=\"us\">United States</Combobox.Item>\n        <Combobox.Item value=\"ca\">Canada</Combobox.Item>\n        <Combobox.Item value=\"mx\">Mexico</Combobox.Item>\n      </Combobox.Group>\n      <Combobox.Group>\n        <Combobox.GroupLabel>Europe</Combobox.GroupLabel>\n        <Combobox.Item value=\"uk\">United Kingdom</Combobox.Item>\n        <Combobox.Item value=\"de\">Germany</Combobox.Item>\n        <Combobox.Item value=\"fr\">France</Combobox.Item>\n      </Combobox.Group>\n      <Combobox.Empty>No matching country</Combobox.Empty>\n    </>\n  </Combobox.Content>\n</StatefulCombobox>"},{"name":"With Empty State","description":"Shows message when no results match","code":"<StatefulCombobox placeholder=\"Search programming languages...\">\n  <Combobox.Input />\n  <Combobox.Content>\n    <Combobox.Empty>No results found</Combobox.Empty>\n    <Combobox.Item value=\"js\">JavaScript</Combobox.Item>\n    <Combobox.Item value=\"ts\">TypeScript</Combobox.Item>\n    <Combobox.Item value=\"py\">Python</Combobox.Item>\n    <Combobox.Item value=\"rs\">Rust</Combobox.Item>\n    <Combobox.Item value=\"go\">Go</Combobox.Item>\n  </Combobox.Content>\n</StatefulCombobox>"},{"name":"Scrollable List","description":"Long list with scroll hint — shows 4 items with half-peek of the 5th","code":"<StatefulCombobox placeholder=\"Search languages...\">\n  <Combobox.Input />\n  <Combobox.Content>\n    <Combobox.Empty>No results found</Combobox.Empty>\n    <Combobox.Item value=\"js\">JavaScript</Combobox.Item>\n    <Combobox.Item value=\"ts\">TypeScript</Combobox.Item>\n    <Combobox.Item value=\"py\">Python</Combobox.Item>\n    <Combobox.Item value=\"rs\">Rust</Combobox.Item>\n    <Combobox.Item value=\"go\">Go</Combobox.Item>\n    <Combobox.Item value=\"rb\">Ruby</Combobox.Item>\n    <Combobox.Item value=\"java\">Java</Combobox.Item>\n    <Combobox.Item value=\"swift\">Swift</Combobox.Item>\n    <Combobox.Item value=\"kt\">Kotlin</Combobox.Item>\n    <Combobox.Item value=\"cpp\">C++</Combobox.Item>\n  </Combobox.Content>\n</StatefulCombobox>"},{"name":"Custom Max Visible Items","description":"Show 6 items before scrolling with half-peek scroll hint","code":"<StatefulCombobox placeholder=\"Search cities...\">\n  <Combobox.Input />\n  <Combobox.Content maxVisibleItems={6}>\n    <Combobox.Empty>No results found</Combobox.Empty>\n    <Combobox.Item value=\"nyc\">New York</Combobox.Item>\n    <Combobox.Item value=\"lon\">London</Combobox.Item>\n    <Combobox.Item value=\"tok\">Tokyo</Combobox.Item>\n    <Combobox.Item value=\"par\">Paris</Combobox.Item>\n    <Combobox.Item value=\"syd\">Sydney</Combobox.Item>\n    <Combobox.Item value=\"ber\">Berlin</Combobox.Item>\n    <Combobox.Item value=\"tor\">Toronto</Combobox.Item>\n    <Combobox.Item value=\"sin\">Singapore</Combobox.Item>\n    <Combobox.Item value=\"dub\">Dubai</Combobox.Item>\n    <Combobox.Item value=\"sao\">São Paulo</Combobox.Item>\n  </Combobox.Content>\n</StatefulCombobox>"},{"name":"Disabled","description":"Disabled combobox","code":"<Combobox disabled placeholder=\"Search...\">\n  <Combobox.Input />\n  <Combobox.Content>\n    <Combobox.Item value=\"1\">Option 1</Combobox.Item>\n  </Combobox.Content>\n</Combobox>"},{"name":"Explicit Trigger","description":"Hide the built-in input trigger when rendering a separate Combobox.Trigger","code":"<StatefulCombobox placeholder=\"Search assignees...\">\n  <Combobox.Input showTrigger={false} />\n  <Combobox.Trigger aria-label=\"Open assignee list\" />\n  <Combobox.Content>\n    <Combobox.Item value=\"alice\">Alice</Combobox.Item>\n    <Combobox.Item value=\"bob\">Bob</Combobox.Item>\n    <Combobox.Item value=\"carol\">Carol</Combobox.Item>\n  </Combobox.Content>\n</StatefulCombobox>"}],"contract":{"propsSummary":["value: string | string[] - controlled selected value","onValueChange: (value) => void - selection handler","onChange: (value) => void - alias for onValueChange","multiple: boolean - enable multi-select with chips","When multiple=true, value/defaultValue must be string[] (single mode uses string|null)","placeholder: string - input placeholder text","label: string - visible label text","helperText: string - helper text below field","error: boolean | string - error styling and message","disabled: boolean - disable combobox","size: sm|md|lg (default: md)","autoHighlight: boolean - auto-highlight first match","Combobox.Input showTrigger: boolean - hide built-in trigger when using Combobox.Trigger explicitly","maxVisibleItems: number - max visible options before scrolling (default 4)"],"a11yRules":["A11Y_COMBOBOX_KEYBOARD","A11Y_COMBOBOX_LABEL","A11Y_TARGET_SIZE_MIN"]},"ai":{"compositionPattern":"compound","subComponents":["Input","Trigger","Content","Item","ItemIndicator","Empty","Group","GroupLabel"],"requiredChildren":["Input","Content"],"commonPatterns":["<Combobox placeholder=\"Search...\"><Combobox.Input /><Combobox.Content><Combobox.Item value=\"opt1\">{label1}</Combobox.Item><Combobox.Item value=\"opt2\">{label2}</Combobox.Item></Combobox.Content></Combobox>","<Combobox multiple placeholder=\"Select items...\"><Combobox.Input /><Combobox.Content><Combobox.Item value=\"opt1\">{label1}</Combobox.Item><Combobox.Item value=\"opt2\">{label2}</Combobox.Item></Combobox.Content></Combobox>","<Combobox placeholder=\"Search...\"><Combobox.Input showTrigger={false} /><Combobox.Trigger aria-label=\"Open\" /><Combobox.Content>...</Combobox.Content></Combobox>"]},"propsSummary":["multiple: boolean (default: false)","value: union","defaultValue: union","onValueChange: union","onChange: union","children: node (required)","open: boolean","defaultOpen: boolean","onOpenChange: function","required: boolean","name: string","placeholder: string","autoHighlight: boolean (default: true)","size: sm|md|lg (default: md)","className: string","label: string","helperText: string","error: union","disabled: boolean"],"sourcePath":"src/components/Combobox/index.tsx","exportName":"Combobox","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:53.524Z"},"performance":{"bundleSize":4147,"rawSize":11623,"complexity":"lightweight","budgetPercent":27,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Combobox (self)","bytes":7366,"percent":63},{"path":"src/recipes/popup.ts","bytes":2848,"percent":25},{"path":"src/utils/aria.ts","bytes":436,"percent":4},{"path":"ComponentDefaults","bytes":199,"percent":2}]}},"Command":{"filePath":"src/components/Command/index.tsx","meta":{"name":"Command","description":"A searchable command palette for quick actions. Combines an input with a filterable, keyboard-navigable list of actions.","category":"navigation","tags":["command","palette","search","spotlight","quick-actions","cmdk"],"status":"stable"},"usage":{"when":["Quick-access command palettes (Ctrl+K)","Searchable action menus","Inline command lists with filtering","Application-wide search interfaces"],"whenNot":["Simple dropdown menus (use Menu)","Form field selection (use Select or Combobox)","Static navigation (use Sidebar or Tabs)","Search with complex result types (build custom)"],"guidelines":["Compose inside Dialog for modal command palette usage","Use Command.Group to organize items by category","Provide Command.Empty for no-results feedback","Use keywords prop for items that should match on aliases","Keep item labels short and action-oriented"],"accessibility":["Uses combobox + listbox ARIA pattern","Keyboard navigation with ArrowUp/ArrowDown, Enter to select","Home/End jump to first/last item","aria-activedescendant tracks focused item"]},"props":{"children":{"type":"node","description":"Command.Input, Command.List, and other sub-components","required":true},"search":{"type":"string","description":"Controlled search value","required":false},"defaultSearch":{"type":"string","description":"Default search value (uncontrolled)","default":"","required":false},"onSearchChange":{"type":"function","description":"Called when search input changes","required":false},"filter":{"type":"function","description":"Custom filter function. Return 0 to hide, >0 to show.","required":false},"loop":{"type":"boolean","description":"Whether to loop keyboard navigation","default":"true","required":false}},"relations":[{"component":"Dialog","relationship":"sibling","note":"Compose inside Dialog for modal command palette"},{"component":"Listbox","relationship":"sibling","note":"Command uses Listbox-like keyboard navigation internally"},{"component":"Combobox","relationship":"alternative","note":"Use Combobox for form field selection with search"}],"variants":[{"name":"Default","description":"Inline command list with search","code":"<div style={{ maxWidth: '400px', width: '100%' }}>\n  <Command>\n    <Command.Input placeholder=\"Type a command...\" />\n    <Command.List>\n      <Command.Item onItemSelect={() => {}}>Open File</Command.Item>\n      <Command.Item onItemSelect={() => {}}>Save Document</Command.Item>\n      <Command.Item onItemSelect={() => {}}>Print</Command.Item>\n      <Command.Empty>No results found.</Command.Empty>\n    </Command.List>\n  </Command>\n</div>"},{"name":"Dialog Command Palette","description":"Command palette inside a Dialog","code":"<Dialog>\n  <Dialog.Trigger asChild>\n    <Button variant=\"secondary\">Open Command Palette</Button>\n  </Dialog.Trigger>\n  <Dialog.Content size=\"sm\">\n    <Command>\n      <Command.Input placeholder=\"Search commands...\" />\n      <Command.List>\n        <Command.Group heading=\"Actions\">\n          <Command.Item onItemSelect={() => {}}>New File</Command.Item>\n          <Command.Item onItemSelect={() => {}}>Open Recent</Command.Item>\n        </Command.Group>\n        <Command.Separator />\n        <Command.Group heading=\"Settings\">\n          <Command.Item onItemSelect={() => {}}>Preferences</Command.Item>\n          <Command.Item onItemSelect={() => {}}>Keyboard Shortcuts</Command.Item>\n        </Command.Group>\n        <Command.Empty>No results found.</Command.Empty>\n      </Command.List>\n    </Command>\n  </Dialog.Content>\n</Dialog>"},{"name":"With Groups","description":"Organized by category groups","code":"<div style={{ maxWidth: '400px', width: '100%' }}>\n  <Command>\n    <Command.Input placeholder=\"Search...\" />\n    <Command.List>\n      <Command.Group heading=\"Suggestions\">\n        <Command.Item onItemSelect={() => {}}>Calendar</Command.Item>\n        <Command.Item onItemSelect={() => {}}>Calculator</Command.Item>\n      </Command.Group>\n      <Command.Separator />\n      <Command.Group heading=\"Settings\">\n        <Command.Item onItemSelect={() => {}}>Profile</Command.Item>\n        <Command.Item onItemSelect={() => {}}>Billing</Command.Item>\n        <Command.Item disabled onItemSelect={() => {}}>\n          Team (coming soon)\n        </Command.Item>\n      </Command.Group>\n      <Command.Empty>No results found.</Command.Empty>\n    </Command.List>\n  </Command>\n</div>"},{"name":"With Icons","description":"Items with leading icons","code":"<div style={{ maxWidth: '400px', width: '100%' }}>\n  <Command>\n    <Command.Input placeholder=\"What do you need?\" />\n    <Command.List>\n      <Command.Item onItemSelect={() => {}}>\n        <span style={{ marginRight: '0.5rem', fontSize: '1rem' }}>+</span> New Document\n      </Command.Item>\n      <Command.Item onItemSelect={() => {}}>\n        <span style={{ marginRight: '0.5rem', fontSize: '1rem' }}>{'>'}</span> Open Folder\n      </Command.Item>\n      <Command.Item onItemSelect={() => {}}>\n        <span style={{ marginRight: '0.5rem', fontSize: '1rem' }}>?</span> Search\n      </Command.Item>\n      <Command.Empty>No results found.</Command.Empty>\n    </Command.List>\n  </Command>\n</div>"}],"contract":{"propsSummary":["search: string - controlled search value","onSearchChange: (search) => void - search change handler","filter: (value, search, keywords?) => number - custom filter","loop: boolean - loop keyboard navigation (default: true)","Command.Item value: string - filter match value","Command.Item keywords: string[] - extra filter terms","Command.Item onItemSelect: (value, event) => void - selection handler"],"a11yRules":["A11Y_COMBOBOX_ROLE","A11Y_LISTBOX_ROLE","A11Y_ACTIVE_DESCENDANT"]},"ai":{"compositionPattern":"compound","subComponents":["Input","List","Item","Group","Empty","Separator"],"requiredChildren":["Input","List"],"commonPatterns":["<Dialog><Dialog.Trigger><Button>Open Palette</Button></Dialog.Trigger><Dialog.Content size=\"sm\"><Command><Command.Input placeholder=\"Search...\" /><Command.List><Command.Group heading=\"Actions\"><Command.Item onItemSelect={() => {}}>Action 1</Command.Item></Command.Group><Command.Empty>No results.</Command.Empty></Command.List></Command></Dialog.Content></Dialog>"]},"propsSummary":["children: node (required)","search: string","defaultSearch: string (default: )","onSearchChange: function","filter: function","loop: boolean (default: true)"],"sourcePath":"src/components/Command/index.tsx","exportName":"Command","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:53.723Z"},"performance":{"bundleSize":2603,"rawSize":6053,"complexity":"lightweight","budgetPercent":17,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Command (self)","bytes":5335,"percent":88}]}},"ConversationList":{"filePath":"src/components/ConversationList/index.tsx","meta":{"name":"ConversationList","description":"Scrollable message container with auto-scroll and history loading","category":"ai","tags":["conversation","chat","messages","scroll","ai","list"],"status":"stable"},"usage":{"when":["Building a chat interface with multiple messages","Need auto-scroll behavior when new messages arrive","Require infinite scroll for loading message history","Want date separators between message groups"],"whenNot":["Simple list of items without chat context (use List)","Single message display (use Message directly)","Non-scrolling message layout"],"guidelines":["Use autoScroll=\"smart\" for best UX (only auto-scrolls when near bottom)","Set showAvatars={false} for avatarless transcripts; messages remove their outer inline inset automatically","Conversation chrome uses neutral surfaces and the body foreground; reserve brand accent for actions or semantic state","Implement onScrollTop for loading older messages","ConversationList composes your onScroll handler with internal auto-scroll/history logic","Provide an emptyState for new conversations","Use DateSeparator between messages from different days"],"accessibility":["Uses proper ARIA roles for separators","Typing indicator uses a status role with an aria-label","Smooth scroll respects reduced motion preferences","Keyboard navigation works within scrollable container"]},"props":{"children":{"type":"node","description":"Message components","required":true},"showAvatars":{"type":"boolean","description":"Show avatars for messages and typing indicators in this conversation","default":"true","required":false},"autoScroll":{"type":"union","description":"Auto-scroll behavior: true (always), false (never), or \"smart\" (only when near bottom)","default":"smart","required":false},"onScrollTop":{"type":"function","description":"Callback when user scrolls to top (for loading history). Receives the scroll event.","required":false},"loadingHistory":{"type":"boolean","description":"Show loading spinner at top when loading history","default":"false","required":false},"emptyState":{"type":"node","description":"Content to show when conversation is empty","required":false},"scrollTopThreshold":{"type":"number","description":"Pixels from top to trigger onScrollTop","default":"50","required":false},"scrollBottomThreshold":{"type":"number","description":"Pixels from bottom for smart auto-scroll","default":"100","required":false}},"relations":[{"component":"Message","relationship":"child","note":"ConversationList contains Message components"},{"component":"ThinkingIndicator","relationship":"child","note":"Show ThinkingIndicator at bottom while awaiting response"},{"component":"Prompt","relationship":"sibling","note":"Typically paired with Prompt for input"}],"variants":[{"name":"Basic","description":"Simple conversation with messages","code":"<ConversationList>\n  <Message role=\"user\">\n    <Message.Content>Hello!</Message.Content>\n  </Message>\n  <Message role=\"assistant\">\n    <Message.Content>Hi there! How can I help you today?</Message.Content>\n  </Message>\n  <Message role=\"user\">\n    <Message.Content>Can you explain React hooks?</Message.Content>\n  </Message>\n</ConversationList>"},{"name":"With Date Separators","description":"Messages grouped by date","code":"<ConversationList>\n  <ConversationList.DateSeparator date={new Date(Date.now() - 86400000)} />\n  <Message role=\"user\">\n    <Message.Content>A message from yesterday</Message.Content>\n  </Message>\n  <ConversationList.DateSeparator date={new Date()} />\n  <Message role=\"assistant\">\n    <Message.Content>And a message from today!</Message.Content>\n  </Message>\n</ConversationList>"},{"name":"Without Avatars","description":"Compact transcript without message or typing-indicator avatars","code":"<ConversationList showAvatars={false}>\n  <Message role=\"user\">\n    <Message.Content>Hello!</Message.Content>\n  </Message>\n  <Message role=\"assistant\">\n    <Message.Content>How can I help?</Message.Content>\n  </Message>\n</ConversationList>"},{"name":"With Typing Indicator","description":"Shows assistant is typing","code":"<ConversationList>\n  <Message role=\"user\">\n    <Message.Content>What is TypeScript?</Message.Content>\n  </Message>\n  <ConversationList.TypingIndicator name=\"Assistant\" />\n</ConversationList>"},{"name":"Loading History","description":"Loading older messages","code":"<ConversationList loadingHistory>\n  <Message role=\"user\">\n    <Message.Content>This is the latest message</Message.Content>\n  </Message>\n</ConversationList>"}],"contract":{"propsSummary":["children: ReactNode - Message components","showAvatars: boolean - show message and typing-indicator avatars (default: true)","autoScroll: boolean | \"smart\" - scroll behavior (default: \"smart\")","onScrollTop: (event?) => void - callback for loading history (receives scroll event)","loadingHistory: boolean - show history loading spinner","emptyState: ReactNode - empty conversation content"],"a11yRules":["A11Y_ARIA_ROLES","A11Y_MOTION_PREFERENCE"]},"propsSummary":["children: node (required)","showAvatars: boolean (default: true)","autoScroll: union (default: smart)","onScrollTop: function","loadingHistory: boolean (default: false)","emptyState: node","scrollTopThreshold: number (default: 50)","scrollBottomThreshold: number (default: 100)"],"sourcePath":"src/components/ConversationList/index.tsx","exportName":"ConversationList","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:53.889Z"},"ai":{"subComponents":["DateSeparator","TypingIndicator"],"compositionPattern":"compound"},"performance":{"bundleSize":2120,"rawSize":5485,"complexity":"lightweight","budgetPercent":14,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"ConversationList (self)","bytes":2734,"percent":50},{"path":"Loading","bytes":2025,"percent":37}]}},"DataTable":{"filePath":"src/components/DataTable/index.tsx","meta":{"name":"DataTable","description":"Data table with sorting, selection, and column management. Powered by TanStack Table.","category":"display","tags":["table","data","grid","list","sorting","tanstack"],"status":"stable","dependencies":[{"name":"@tanstack/react-table","version":">=8.0.0","reason":"Optional — powers sorting, selection, and expansion; without it DataTable renders a static, non-interactive table."}]},"usage":{"when":["Displaying structured, tabular data with sorting","Data that users need to scan, compare, and act upon","Lists with multiple attributes per item that need sorting or selection","Data-rich tables requiring column sizing and row clicks","Hierarchical data with expandable sub-rows"],"whenNot":["Simple static tables (use Table component)","Simple lists (use List component)","Card-based layouts (use Grid with Cards)","Small screens (consider card or list view)"],"guidelines":["Keep columns to a reasonable number (5-7 max)","Use consistent alignment (numbers right, text left)","Provide meaningful empty states","Consider mobile responsiveness","Use showCheckbox for bulk selection workflows","Use getRowProps to provide an accessible name and intentional semantics for clickable rows"],"accessibility":["Proper table semantics with headers","Sortable columns are keyboard accessible","Row selection checkboxes include aria-labels","Expand/collapse buttons have aria-expanded state","Clickable rows expose an accessible action label through getRowProps"]},"props":{"columns":{"type":"array","description":"Column definitions","required":true},"data":{"type":"array","description":"Data rows to display","required":true},"getRowId":{"type":"function","description":"Unique key extractor for each row","required":false},"sortable":{"type":"boolean","description":"Enable column sorting","default":"false","required":false},"sorting":{"type":"array","description":"Controlled sorting state","required":false},"onSortingChange":{"type":"function","description":"Sorting change handler","required":false},"selectable":{"type":"boolean","description":"Enable row selection","default":"false","required":false},"showCheckbox":{"type":"boolean","description":"Show checkbox column for row selection (requires selectable)","default":"false","required":false},"rowSelection":{"type":"object","description":"Controlled row selection state","required":false},"onRowSelectionChange":{"type":"function","description":"Row selection change handler","required":false},"onRowClick":{"type":"function","description":"Handler for row clicks/keyboard activation. Called as (row, event)","required":false},"getRowProps":{"type":"function","description":"Returns row-level HTML, ARIA, data, class, and event props for each rendered data row","required":false},"getSubRows":{"type":"function","description":"Extract sub-rows for expandable tree tables","required":false},"expanded":{"type":"union","description":"Controlled expanded state","required":false},"onExpandedChange":{"type":"function","description":"Expanded state change handler","required":false},"emptyMessage":{"type":"string","description":"Message when no data","default":"No data available","required":false},"size":{"type":"enum","description":"Table density","default":"md","required":false,"values":["sm","md"]},"caption":{"type":"string","description":"Visible caption for the table","required":false},"captionHidden":{"type":"boolean","description":"Hide caption visually but keep it for screen readers","default":"false","required":false},"striped":{"type":"boolean","description":"Show alternating row backgrounds","default":"false","required":false},"bordered":{"type":"boolean","description":"Wrap table in a bordered container","default":"false","required":false},"wrapperClassName":{"type":"string","description":"Additional class name for the outer wrapper div","required":false},"wrapperProps":{"type":"object","description":"Props forwarded to the outer wrapper div (id, aria-*, data-*, handlers)","required":false},"density":{"type":"enum","description":"Canonical row density. `condensed` is a deprecated alias for `compact`.","required":false,"values":["compact","regular","relaxed","condensed"]},"emptyState":{"type":"node","description":"Rich empty-state slot (icon + copy + CTA) rendered when there's no data.","required":false},"hideHeader":{"type":"boolean","description":"Hide the column header row (e.g. stacked per-group tables share one).","required":false},"loading":{"type":"boolean","description":"When true, render skeleton placeholder rows instead of data.","required":false},"skeletonRows":{"type":"number","description":"Number of skeleton rows to show while loading (default 6).","required":false}},"relations":[{"component":"Table","relationship":"alternative","note":"Use Table for simple semantic HTML tables"},{"component":"EmptyState","relationship":"sibling","note":"Use EmptyState for empty table states"},{"component":"Badge","relationship":"sibling","note":"Use Badge for status columns"},{"component":"Menu","relationship":"sibling","note":"Use Menu for filter dropdowns"},{"component":"Checkbox","relationship":"sibling","note":"Built-in checkbox selection via showCheckbox"}],"variants":[{"name":"Default","description":"Basic data table with status badges and role columns","code":"<DataTable\n  columns={basicColumns}\n  data={sampleUsers}\n  aria-label=\"Team members\"\n/>"},{"name":"Rich Cells","description":"Custom cells with avatars, stacked text, and column sizing","code":"<DataTable\n  columns={richColumns}\n  data={sampleUsers}\n  bordered\n  aria-label=\"Team members\"\n/>"},{"name":"Sortable","description":"Click column headers to sort ascending or descending","code":"<DataTable\n  columns={transactionColumns}\n  data={sampleTransactions}\n  sortable\n  bordered\n  caption=\"Recent transactions\"\n  captionHidden\n  aria-label=\"Transactions\"\n/>"},{"name":"Checkbox Selection","description":"Select rows with header checkbox for select-all and individual row checkboxes","code":"function TeamTable() {\n  const [selection, setSelection] = useState({});\n  const selectedCount = Object.values(selection).filter(Boolean).length;\n\n  return (\n    <Stack gap=\"sm\">\n      <Stack direction=\"row\" justify=\"between\" align=\"center\">\n        <Text size=\"sm\" color=\"secondary\">\n          {selectedCount > 0 ? `${selectedCount} selected` : 'Select rows with checkboxes'}\n        </Text>\n        {selectedCount > 0 && (\n          <Button size=\"sm\" variant=\"ghost\" onClick={() => setSelection({})}>\n            Clear\n          </Button>\n        )}\n      </Stack>\n      <DataTable\n        columns={columns}\n        data={users}\n        selectable\n        showCheckbox\n        rowSelection={selection}\n        onRowSelectionChange={setSelection}\n        getRowId={(row) => row.id}\n        bordered\n        aria-label=\"Team members\"\n      />\n    </Stack>\n  );\n}"},{"name":"Expandable Rows","description":"Hierarchical data with collapsible sub-rows, like a file tree","code":"const fileTreeData = [\n  {\n    id: '1', name: 'src', type: 'folder', modified: 'Feb 18, 2026',\n    subRows: [\n      { id: '1.1', name: 'components', type: 'folder', modified: 'Feb 18, 2026',\n        subRows: [\n          { id: '1.1.1', name: 'Button.tsx', type: 'file', size: '4.2 KB', modified: 'Feb 17, 2026' },\n          { id: '1.1.2', name: 'Card.tsx', type: 'file', size: '3.8 KB', modified: 'Feb 16, 2026' },\n        ],\n      },\n    ],\n  },\n  { id: '2', name: 'package.json', type: 'file', size: '1.2 KB', modified: 'Feb 18, 2026' },\n];\n\n<DataTable\n  columns={fileColumns}\n  data={fileTreeData}\n  getSubRows={(row) => row.subRows}\n  getRowId={(row) => row.id}\n  bordered\n  size=\"sm\"\n  aria-label=\"File tree\"\n/>"},{"name":"With Filters","description":"Combine with search input and menu dropdowns for filtered views","code":"function FilteredTable() {\n  const [search, setSearch] = useState('');\n  const [statusFilter, setStatusFilter] = useState(null);\n\n  const filteredData = useMemo(() => {\n    return users.filter((user) => {\n      if (search && !user.name.toLowerCase().includes(search.toLowerCase())) return false;\n      if (statusFilter && user.status !== statusFilter) return false;\n      return true;\n    });\n  }, [search, statusFilter]);\n\n  return (\n    <Stack gap=\"sm\">\n      <Stack direction=\"row\" gap=\"sm\" align=\"center\">\n        <Input placeholder=\"Search...\" size=\"sm\" value={search} onChange={(e) => setSearch(e.target.value)} />\n        <Menu>\n          <Menu.Trigger asChild>\n            <Button variant=\"secondary\" size=\"sm\">Status</Button>\n          </Menu.Trigger>\n          <Menu.Content>\n            <Menu.Item onClick={() => setStatusFilter(null)}>All</Menu.Item>\n            <Menu.Item onClick={() => setStatusFilter('active')}>Active</Menu.Item>\n            <Menu.Item onClick={() => setStatusFilter('pending')}>Pending</Menu.Item>\n          </Menu.Content>\n        </Menu>\n      </Stack>\n      <DataTable\n        columns={columns}\n        data={filteredData}\n        sortable\n        bordered\n        emptyMessage=\"No users match the current filters\"\n        aria-label=\"Filtered team members\"\n      />\n    </Stack>\n  );\n}"},{"name":"Clickable Rows","description":"Rows respond to click and keyboard activation","code":"<DataTable\n  columns={endpointColumns}\n  data={sampleEndpoints}\n  getRowProps={(row) => ({\n    role: 'button',\n    'aria-label': `Open ${row.method} ${row.path}`,\n  })}\n  onRowClick={(row) => alert(`${row.method} ${row.path}`)}\n  size=\"sm\"\n  aria-label=\"API endpoints\"\n/>"},{"name":"Striped","description":"Alternating row backgrounds for dense data","code":"<DataTable\n  columns={endpointColumns}\n  data={sampleEndpoints}\n  striped\n  size=\"sm\"\n  sortable\n  aria-label=\"API endpoints\"\n/>"},{"name":"Empty State","description":"Display when no data matches the current filters","code":"<DataTable\n  columns={basicColumns}\n  data={[]}\n  emptyMessage=\"No users match your search criteria\"\n  aria-label=\"Search results\"\n/>"}],"contract":{"propsSummary":["columns: ColumnDef[] - column definitions","data: T[] - row data array","sortable: boolean - enable sorting","selectable: boolean - enable row selection","showCheckbox: boolean - add checkbox column","getSubRows: (row) => T[] - enable expandable rows","onRowClick: (row, event) => void - row activation handler with event access","getRowProps: (row) => HTMLAttributes<HTMLTableRowElement> - row-level ARIA, role, data, class, and event props","size: sm|md - table density","striped: boolean - alternating row backgrounds","bordered: boolean - bordered container","wrapperClassName / wrapperProps - style and configure the outer wrapper div"],"a11yRules":["A11Y_TABLE_HEADERS","A11Y_TABLE_SORT"]},"ai":{"compositionPattern":"simple","subComponents":["Root","Columns","preload"],"commonPatterns":["<DataTable columns={createColumns([{key:\"name\",header:\"Name\"},{key:\"status\",header:\"Status\"}])} data={[{name:\"Item 1\",status:\"Active\"}]} />"]},"propsSummary":["columns: array (required)","data: array (required)","getRowId: function","sortable: boolean (default: false)","sorting: array","onSortingChange: function","selectable: boolean (default: false)","showCheckbox: boolean (default: false)","rowSelection: object","onRowSelectionChange: function","onRowClick: function","getRowProps: function","getSubRows: function","expanded: union","onExpandedChange: function","emptyMessage: string (default: No data available)","size: sm|md (default: md)","caption: string","captionHidden: boolean (default: false)","striped: boolean (default: false)","bordered: boolean (default: false)","wrapperClassName: string","wrapperProps: object"],"sourcePath":"src/components/DataTable/index.tsx","exportName":"DataTable","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:54.097Z"},"performance":{"bundleSize":6055,"rawSize":17781,"complexity":"moderate","budgetPercent":39,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"DataTable (self)","bytes":11323,"percent":64},{"path":"src/recipes/table-chrome.ts","bytes":3003,"percent":17},{"path":"Checkbox","bytes":2826,"percent":16}]}},"DatePicker":{"filePath":"src/components/DatePicker/index.tsx","meta":{"name":"DatePicker","description":"Date picker with calendar dropdown for selecting single dates or date ranges. Built on react-day-picker with seed-based theming.","category":"forms","tags":["date","picker","calendar","range","form","input"],"status":"stable","dependencies":[{"name":"react-day-picker","version":">=9.0.0","reason":"Optional — renders the calendar popup; the trigger and form field work without it."}]},"usage":{"when":["Selecting a single date from a calendar","Selecting a date range (start/end)","Date inputs in forms","Filtering by date or date range"],"whenNot":["Time-only input - use a dedicated TimePicker","Selecting from a small set of known dates - use Select","Free-form date entry - use Input with date masking"],"guidelines":["Use range mode with numberOfMonths={2} for date range selection","Use size=\"sm\" in dense toolbars so DatePicker aligns with Input, Select, Combobox, Button, and IconButton","Add presets for common ranges (Today, Last 7 days, Last 30 days)","Use disabledDates to prevent selecting past dates or unavailable dates","Provide a meaningful placeholder","DatePicker.Trigger forwards button props and defaults to type=\"button\" (safe inside forms)"],"accessibility":["Full keyboard navigation within the calendar grid","Arrow keys navigate between days","Escape closes the calendar","Focus returns to trigger on close"]},"props":{"children":{"type":"node","description":"DatePicker trigger and content","required":true},"className":{"type":"string","description":"Wrapper class name","required":false},"mode":{"type":"enum","description":"Selection mode","default":"single","required":false,"values":["single","range"]},"selected":{"type":"object","description":"Controlled date (single mode). Type: Date | null","required":false},"selectedRange":{"type":"object","description":"Controlled range (range mode). Type: DateRange | null","required":false},"onSelect":{"type":"function","description":"Called when a single date is selected","required":false},"onChange":{"type":"function","description":"Alias for onSelect (consistent with Input/Select onChange convention)","required":false},"onRangeSelect":{"type":"function","description":"Called when a date range is selected","required":false},"numberOfMonths":{"type":"number","description":"Number of months displayed side-by-side","default":"1","required":false},"disabled":{"type":"boolean","description":"Disable the picker","default":"false","required":false},"size":{"type":"enum","description":"Trigger size variant","default":"\"md\"","required":false,"values":["sm","md","lg"]},"disabledDates":{"type":"union","description":"Dates to disable (react-day-picker Matcher | Matcher[])","required":false},"placeholder":{"type":"string","description":"Trigger placeholder text","required":false},"locale":{"type":"object","description":"date-fns locale for i18n","required":false},"fixedWeeks":{"type":"boolean","description":"Always show 6 rows","default":"false","required":false},"formatDate":{"type":"function","description":"Custom trigger date formatter","required":false},"formatRange":{"type":"function","description":"Custom trigger range formatter","required":false},"open":{"type":"boolean","description":"Controlled popover open state","required":false},"onOpenChange":{"type":"function","description":"Popover open state change callback","required":false},"name":{"type":"string","description":"Hidden input name for forms","required":false},"label":{"type":"string","description":"Visible label text above the date picker","required":false},"helperText":{"type":"string","description":"Helper text shown below the date picker","required":false},"error":{"type":"union","description":"Show error styling. When a string is provided, it is displayed as an error message.","required":false}},"relations":[{"component":"Select","relationship":"alternative","note":"Use Select for choosing from a list of options"},{"component":"Input","relationship":"sibling","note":"Use Input for free-form text date entry"},{"component":"Popover","relationship":"composition","note":"DatePicker uses Popover for the calendar dropdown"}],"variants":[{"name":"Default","description":"Single date picker with default settings","code":"<StatefulDatePicker placeholder=\"Pick a date\">\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</StatefulDatePicker>"},{"name":"Small Trigger","description":"Dense toolbar date picker aligned to other small controls","code":"<StatefulDatePicker size=\"sm\" placeholder=\"Last scanned\">\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</StatefulDatePicker>"},{"name":"Date Range","description":"Range mode with dual months","code":"<StatefulRangePicker placeholder=\"Select date range\" numberOfMonths={2}>\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</StatefulRangePicker>"},{"name":"Multi-Month","description":"Single date with 3 months visible","code":"<StatefulDatePicker placeholder=\"Pick a date\" numberOfMonths={3}>\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</StatefulDatePicker>"},{"name":"Disabled Dates","description":"Past dates disabled","code":"<StatefulDatePicker\n  placeholder=\"Select a future date\"\n  disabledDates={{ before: new Date() }}\n>\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</StatefulDatePicker>"},{"name":"With Presets","description":"Range picker with sidebar preset buttons","code":"<StatefulRangePicker placeholder=\"Select date range\" numberOfMonths={2}>\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <div style={{ display: 'flex', gap: '1rem' }}>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', minWidth: '8rem' }}>\n        <DatePicker.Preset range={{ from: today, to: today }}>Today</DatePicker.Preset>\n        <DatePicker.Preset range={{ from: subDays(today, 7), to: today }}>Last 7 days</DatePicker.Preset>\n        <DatePicker.Preset range={{ from: subDays(today, 30), to: today }}>Last 30 days</DatePicker.Preset>\n        <DatePicker.Preset range={{ from: subDays(today, 90), to: today }}>Last 90 days</DatePicker.Preset>\n      </div>\n      <DatePicker.Calendar />\n    </div>\n  </DatePicker.Content>\n</StatefulRangePicker>"},{"name":"With Label and Helper Text","description":"Date picker with built-in label and helper text","code":"<StatefulDatePicker placeholder=\"Pick a date\">\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</StatefulDatePicker>"},{"name":"Error State","description":"Validation error with message","code":"<DatePicker\n  label=\"Start Date\"\n  placeholder=\"Pick a date\"\n  error=\"Please select a start date\"\n>\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</DatePicker>"},{"name":"Disabled","description":"Disabled date picker","code":"<StatefulDatePicker placeholder=\"Pick a date\" disabled>\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</StatefulDatePicker>"}],"contract":{"propsSummary":["mode: \"single\" | \"range\" - selection mode","selected: Date - controlled date (single)","selectedRange: DateRange - controlled range","onSelect: (date) => void - single selection handler","onRangeSelect: (range) => void - range selection handler","numberOfMonths: number - months visible (default 1)","size: \"sm\" | \"md\" | \"lg\" - trigger size variant (default md)","label: string - visible label text","helperText: string - helper text below field","error: boolean | string - error styling and message","disabled: boolean - disable picker","disabledDates: Matcher - dates to disable","DatePicker.Trigger: button props supported (type defaults to \"button\")"],"a11yRules":["A11Y_DATEPICKER_KEYBOARD","A11Y_DATEPICKER_LABEL"]},"ai":{"compositionPattern":"compound","subComponents":["Trigger","Content","Calendar","Preset","preload"],"requiredChildren":["Trigger","Content"],"commonPatterns":["<DatePicker size=\"sm\" selected={date} onSelect={setDate}><DatePicker.Trigger placeholder=\"Pick a date\" /><DatePicker.Content><DatePicker.Calendar /></DatePicker.Content></DatePicker>","<DatePicker selected={date} onSelect={setDate}><DatePicker.Trigger placeholder=\"Pick a date\" /><DatePicker.Content><DatePicker.Calendar /></DatePicker.Content></DatePicker>"]},"propsSummary":["children: node (required)","className: string","mode: single|range (default: single)","selected: object","selectedRange: object","onSelect: function","onChange: function","onRangeSelect: function","numberOfMonths: number (default: 1)","disabled: boolean (default: false)","size: sm|md|lg (default: md)","disabledDates: union","placeholder: string","locale: object","fixedWeeks: boolean (default: false)","formatDate: function","formatRange: function","open: boolean","onOpenChange: function","name: string","label: string","helperText: string","error: union"],"sourcePath":"src/components/DatePicker/index.tsx","exportName":"DatePicker","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:54.712Z"},"performance":{"bundleSize":4057,"rawSize":10899,"complexity":"lightweight","budgetPercent":26,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"DatePicker (self)","bytes":6876,"percent":63},{"path":"src/recipes/popup.ts","bytes":2749,"percent":25},{"path":"src/utils/aria.ts","bytes":351,"percent":3},{"path":"ComponentDefaults","bytes":199,"percent":2}]}},"Drawer":{"filePath":"src/components/Drawer/index.tsx","meta":{"name":"Drawer","description":"A panel that slides in from screen edges. Extends the Dialog pattern with slide animations and edge positioning.","category":"feedback","tags":["drawer","sheet","panel","sidebar","slide-over"],"status":"stable"},"usage":{"when":["Side panels for editing or creating content","Mobile-style bottom sheets for actions","Navigation panels that slide in from the left","Detail views that overlay the main content"],"whenNot":["Centered modal dialogs (use Dialog)","Non-blocking notifications (use Toast)","Permanent side navigation (use Sidebar)","Small contextual menus (use Menu or Popover)"],"guidelines":["Default to right side for content editing and forms","Use left side for navigation drawers","Use bottom for mobile-style action sheets","Provide clear close affordance (X button or cancel)","Keep drawer content focused on a single task","Drawer.Trigger and Drawer.Close with asChild require a single valid React element child","Set Drawer.Content initialFocus={false} when custom focus management is needed"],"accessibility":["Automatically traps focus within the drawer","Closes on Escape key press","Returns focus to trigger element on close","Uses role=\"dialog\" with proper aria attributes"]},"props":{"children":{"type":"node","description":"Drawer content (use Drawer.Content, Drawer.Header, etc.)","required":true},"open":{"type":"boolean","description":"Controlled open state","required":false},"defaultOpen":{"type":"boolean","description":"Default open state (uncontrolled)","default":"false","required":false},"onOpenChange":{"type":"function","description":"Called when open state changes","required":false},"modal":{"type":"union","description":"Whether to render as modal (blocks interaction with rest of page)","default":"true","required":false},"disablePointerDismissal":{"type":"boolean","description":"Disable outside-click dismissal","required":false},"onOpenChangeComplete":{"type":"function","description":"Called after open/close animation completes","required":false},"snapPoints":{"type":"array","description":"Preset snap-point heights for bottom-sheet drawers","required":false},"swipeDirection":{"type":"enum","description":"Swipe direction to dismiss.","default":"derived from `side` prop on Content","required":false,"values":["up","down","left","right"]}},"relations":[{"component":"Dialog","relationship":"sibling","note":"Use Dialog for centered modal overlays"},{"component":"Sidebar","relationship":"alternative","note":"Use Sidebar for permanent side navigation"},{"component":"Popover","relationship":"alternative","note":"Use Popover for small contextual content"}],"variants":[{"name":"Default","description":"Right-side drawer with header, body, and footer","code":"<Drawer>\n  <Drawer.Trigger asChild>\n    <Button>Open Drawer</Button>\n  </Drawer.Trigger>\n  <Drawer.Content>\n    <Drawer.Close />\n    <Drawer.Header>\n      <Drawer.Title>Drawer Title</Drawer.Title>\n      <Drawer.Description>\n        A panel sliding in from the right.\n      </Drawer.Description>\n    </Drawer.Header>\n    <Drawer.Body>\n      <p>Drawer content goes here.</p>\n    </Drawer.Body>\n    <Drawer.Footer>\n      <Drawer.Close asChild>\n        <Button variant=\"secondary\">Cancel</Button>\n      </Drawer.Close>\n      <Button variant=\"primary\">Save</Button>\n    </Drawer.Footer>\n  </Drawer.Content>\n</Drawer>"},{"name":"Left Side","description":"Left-side drawer for navigation","code":"<Drawer>\n  <Drawer.Trigger asChild>\n    <Button variant=\"secondary\">Open Left</Button>\n  </Drawer.Trigger>\n  <Drawer.Content side=\"left\">\n    <Drawer.Close />\n    <Drawer.Header>\n      <Drawer.Title>Navigation</Drawer.Title>\n    </Drawer.Header>\n    <Drawer.Body>\n      <p>Left-side drawer for navigation or filters.</p>\n    </Drawer.Body>\n  </Drawer.Content>\n</Drawer>"},{"name":"Bottom Sheet","description":"Bottom drawer for mobile-style actions","code":"<Drawer>\n  <Drawer.Trigger asChild>\n    <Button variant=\"secondary\">Open Bottom Sheet</Button>\n  </Drawer.Trigger>\n  <Drawer.Content side=\"bottom\" size=\"sm\">\n    <Drawer.Header>\n      <Drawer.Title>Actions</Drawer.Title>\n    </Drawer.Header>\n    <Drawer.Body>\n      <p>Bottom sheet for mobile-style actions.</p>\n    </Drawer.Body>\n  </Drawer.Content>\n</Drawer>"},{"name":"With Form","description":"Drawer with a form layout","code":"<Drawer>\n  <Drawer.Trigger asChild>\n    <Button>Edit Settings</Button>\n  </Drawer.Trigger>\n  <Drawer.Content size=\"md\">\n    <Drawer.Close />\n    <Drawer.Header>\n      <Drawer.Title>Settings</Drawer.Title>\n      <Drawer.Description>Update your preferences.</Drawer.Description>\n    </Drawer.Header>\n    <Drawer.Body>\n      <Stack gap=\"md\">\n        <Input label=\"Display Name\" placeholder=\"Enter name\" />\n        <Input label=\"Email\" type=\"email\" placeholder=\"you@example.com\" />\n      </Stack>\n    </Drawer.Body>\n    <Drawer.Footer>\n      <Drawer.Close asChild>\n        <Button variant=\"secondary\">Cancel</Button>\n      </Drawer.Close>\n      <Button variant=\"primary\">Save Changes</Button>\n    </Drawer.Footer>\n  </Drawer.Content>\n</Drawer>"}],"contract":{"propsSummary":["open: boolean - controlled open state","onOpenChange: (open) => void - open state handler","modal: boolean - blocks page interaction (default: true)","Drawer.Content side: left|right|top|bottom - slide direction (default: right)","Drawer.Content size: sm|md|lg|xl|full - panel size","Drawer.Content initialFocus: boolean - auto-focus popup on open (default: true)"],"a11yRules":["A11Y_DIALOG_FOCUS","A11Y_DIALOG_ESCAPE","A11Y_DIALOG_LABEL"]},"ai":{"compositionPattern":"compound","subComponents":["Trigger","Content","Close","SwipeArea","Header","Title","Description","Body","Footer"],"requiredChildren":["Content"],"commonPatterns":["<Drawer><Drawer.Trigger><Button>Open</Button></Drawer.Trigger><Drawer.Content><Drawer.Close /><Drawer.Header><Drawer.Title>{title}</Drawer.Title></Drawer.Header><Drawer.Body>{content}</Drawer.Body><Drawer.Footer><Drawer.Close asChild><Button variant=\"secondary\">Cancel</Button></Drawer.Close><Button>Save</Button></Drawer.Footer></Drawer.Content></Drawer>"]},"propsSummary":["children: node (required)","open: boolean","defaultOpen: boolean","onOpenChange: function","modal: boolean (default: true)"],"sourcePath":"src/components/Drawer/index.tsx","exportName":"Drawer","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:55.637Z"},"performance":{"bundleSize":1517,"rawSize":4018,"complexity":"lightweight","budgetPercent":10,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Drawer (self)","bytes":3246,"percent":81}]}},"Editor":{"filePath":"src/components/Editor/index.tsx","meta":{"name":"Editor","description":"Rich text editor with formatting toolbar, auto-save, and word count","category":"forms","tags":["editor","rich-text","markdown","toolbar","writing","blog","content"],"status":"stable","dependencies":[{"name":"@tiptap/react","version":">=2.0.0","reason":"Optional — enables rich-text mode; without TipTap the editor falls back to a markdown textarea."},{"name":"@tiptap/starter-kit","version":">=2.0.0","reason":"Optional — TipTap extension bundle used by rich-text mode."},{"name":"@tiptap/extension-link","version":">=2.0.0","reason":"Optional — link formatting in rich-text mode."}]},"usage":{"when":["Building blog post or article editors","Need rich text editing with formatting controls","Content management with auto-save and word count","Markdown or WYSIWYG editing interfaces"],"whenNot":["Simple single-line text input (use Input)","Plain multi-line without formatting (use Textarea)","Chat/AI prompt input (use Prompt)","Code editing (use CodeBlock)"],"guidelines":["Use compound pattern for custom toolbar layouts","Install @tiptap/react, @tiptap/starter-kit, and @tiptap/extension-link for rich text mode","Falls back to a markdown-aware textarea when TipTap is not installed","Use onAutoSave for periodic content persistence","onAutoSave may return a Promise; save status updates after the async save resolves/rejects","Use size prop (sm/md/lg) to control editor height","Use maxLength to show character limit with visual warning states","New formats (headings, blockquote, orderedList, undo, redo) are opt-in via the formats prop","Use toolbarIcons to swap in icons from any icon package without changing toolbar button labels or accessibility behavior"],"accessibility":["Toolbar has role=\"toolbar\" with aria-label","Format buttons use aria-pressed to indicate active state","Action buttons (undo/redo) omit aria-pressed since they are not toggles","Status indicator uses aria-live=\"polite\" for save status announcements","Keyboard shortcuts match standard text editor conventions (Ctrl+B, Ctrl+I, etc.)","Global shortcuts (e.g., Sidebar Ctrl+B) automatically yield when focus is inside the Editor","Focus ring appears on the editor container when any child element is focused"]},"props":{"children":{"type":"node","description":"","required":false},"value":{"type":"string","description":"Controlled editor value","required":false},"defaultValue":{"type":"string","description":"Default value for uncontrolled usage","default":"","required":false},"onValueChange":{"type":"function","description":"Called when content changes","required":false},"placeholder":{"type":"string","description":"Placeholder text shown when empty","default":"Start typing...","required":false},"disabled":{"type":"boolean","description":"Disable the editor","default":"false","required":false},"readOnly":{"type":"boolean","description":"Make the editor read-only","default":"false","required":false},"formats":{"type":"array","description":"Which format buttons to show in the toolbar","default":"[\"bold\", \"italic\", \"strikethrough\", \"link\", \"code\", \"bulletList\"]","required":false},"toolbar":{"type":"boolean","description":"Show default toolbar","default":"true","required":false},"statusBar":{"type":"boolean","description":"Show default status bar with word/character counts","default":"true","required":false},"onAutoSave":{"type":"function","description":"Auto-save callback, called at autoSaveInterval (may be async)","required":false},"autoSaveInterval":{"type":"number","description":"Auto-save interval in milliseconds","default":"30000","required":false},"size":{"type":"enum","description":"Editor size preset: \"sm\" (120px), \"md\" (200px), or \"lg\" (400px)","default":"md","required":false,"values":["sm","md","lg"]},"maxLength":{"type":"number","description":"Maximum character count. Shows counter in status bar with warning (90%) and error (over limit) states","required":false},"toolbarIcons":{"type":"object","description":"Optional toolbar icon overrides keyed by format/action (e.g. bold, italic, undo). Values can be React nodes or render functions.","required":false}},"relations":[{"component":"Prompt","relationship":"sibling","note":"Prompt is for AI/chat input; Editor is for long-form content editing"},{"component":"Textarea","relationship":"alternative","note":"Use Textarea for simple multi-line input without formatting toolbar"},{"component":"Input","relationship":"alternative","note":"Use Input for single-line text input"}],"variants":[{"name":"Default","description":"Editor with default toolbar and status bar","code":"<Editor placeholder=\"Start typing your masterpiece here...\" />"},{"name":"With Auto-Save and Publish","description":"Full compound usage with custom toolbar, auto-save indicator, and publish button","code":"<Editor\n  placeholder=\"Start typing your masterpiece here...\"\n  onValueChange={(v) => console.log(v)}\n>\n  <Editor.Toolbar>\n    <Editor.ToolbarGroup aria-label=\"Text formatting\">\n      <Editor.ToolbarButton format=\"bold\" />\n      <Editor.ToolbarButton format=\"italic\" />\n      <Editor.ToolbarButton format=\"strikethrough\" />\n      <Editor.ToolbarButton format=\"link\" />\n      <Editor.ToolbarButton format=\"code\" />\n      <Editor.ToolbarButton format=\"bulletList\" />\n    </Editor.ToolbarGroup>\n    <Editor.ToolbarGroup aria-label=\"Actions\">\n      <Editor.StatusIndicator status=\"saved\" />\n      <Button variant=\"accent\" size=\"sm\">\n        Publish\n      </Button>\n    </Editor.ToolbarGroup>\n  </Editor.Toolbar>\n  <Editor.Content />\n  <Editor.StatusBar showWordCount showCharCount />\n</Editor>"},{"name":"Minimal","description":"Editor with subset of formats","code":"<Editor\n  placeholder=\"Quick note...\"\n  formats={['bold', 'italic', 'code']}\n/>"},{"name":"Disabled","description":"Non-interactive editor with content","code":"<Editor\n  defaultValue=\"This content cannot be edited.\"\n  disabled\n/>"},{"name":"Read Only","description":"Visible content, non-editable","code":"<Editor\n  defaultValue=\"This content is read-only. You can select and copy text but cannot modify it.\"\n  readOnly\n/>"},{"name":"Custom Toolbar","description":"Compound usage with custom toolbar layout and separator","code":"<Editor\n  placeholder=\"Write your blog post...\"\n  onValueChange={(v) => console.log(v)}\n>\n  <Editor.Toolbar>\n    <Editor.ToolbarGroup aria-label=\"Basic formatting\">\n      <Editor.ToolbarButton format=\"bold\" />\n      <Editor.ToolbarButton format=\"italic\" />\n    </Editor.ToolbarGroup>\n    <Editor.Separator />\n    <Editor.ToolbarGroup aria-label=\"Advanced formatting\">\n      <Editor.ToolbarButton format=\"link\" />\n      <Editor.ToolbarButton format=\"code\" />\n      <Editor.ToolbarButton format=\"bulletList\" />\n    </Editor.ToolbarGroup>\n    <Editor.ToolbarGroup aria-label=\"Status\">\n      <Editor.StatusIndicator status=\"saving\" />\n    </Editor.ToolbarGroup>\n  </Editor.Toolbar>\n  <Editor.Content />\n  <Editor.StatusBar showWordCount showCharCount />\n</Editor>"},{"name":"Full Formatting","description":"All format options including headings, blockquote, ordered list, undo/redo","code":"<Editor\n  placeholder=\"Write an article...\"\n  size=\"lg\"\n>\n  <Editor.Toolbar>\n    <Editor.ToolbarGroup aria-label=\"History\">\n      <Editor.ToolbarButton format=\"undo\" />\n      <Editor.ToolbarButton format=\"redo\" />\n    </Editor.ToolbarGroup>\n    <Editor.Separator />\n    <Editor.ToolbarGroup aria-label=\"Headings\">\n      <Editor.ToolbarButton format=\"heading1\" />\n      <Editor.ToolbarButton format=\"heading2\" />\n      <Editor.ToolbarButton format=\"heading3\" />\n    </Editor.ToolbarGroup>\n    <Editor.Separator />\n    <Editor.ToolbarGroup aria-label=\"Text formatting\">\n      <Editor.ToolbarButton format=\"bold\" />\n      <Editor.ToolbarButton format=\"italic\" />\n      <Editor.ToolbarButton format=\"strikethrough\" />\n      <Editor.ToolbarButton format=\"code\" />\n    </Editor.ToolbarGroup>\n    <Editor.Separator />\n    <Editor.ToolbarGroup aria-label=\"Block formatting\">\n      <Editor.ToolbarButton format=\"bulletList\" />\n      <Editor.ToolbarButton format=\"orderedList\" />\n      <Editor.ToolbarButton format=\"blockquote\" />\n      <Editor.ToolbarButton format=\"link\" />\n    </Editor.ToolbarGroup>\n  </Editor.Toolbar>\n  <Editor.Content />\n  <Editor.StatusBar showWordCount showCharCount />\n</Editor>"},{"name":"With Character Limit","description":"Editor with maxLength showing character count indicator with warning and error states","code":"<Editor\n  placeholder=\"Write a tweet-sized message...\"\n  maxLength={280}\n  size=\"sm\"\n  formats={['bold', 'italic', 'link']}\n/>"},{"name":"Small Size","description":"Compact editor with sm size preset (120px min-height)","code":"<Editor\n  placeholder=\"Quick note...\"\n  size=\"sm\"\n  formats={['bold', 'italic', 'code']}\n/>"}],"contract":{"propsSummary":["value: string - controlled editor value","onValueChange: (value: string) => void - change callback","placeholder: string - hint text (default: \"Start typing...\")","disabled: boolean - disables interaction","readOnly: boolean - prevents editing","formats: EditorFormat[] - toolbar buttons (default: all 6)","toolbar: boolean - show default toolbar (default: true)","statusBar: boolean - show word/char counts (default: true)","onAutoSave: (value: string) => void | Promise<void> - auto-save handler","size: \"sm\" | \"md\" | \"lg\" - editor height preset (default: \"md\")","maxLength: number - character limit with visual indicator","toolbarIcons: Partial<Record<EditorFormat, ReactNode | (state) => ReactNode>> - custom toolbar icons"],"a11yRules":["A11Y_TOOLBAR_ROLE","A11Y_BUTTON_LABEL","A11Y_LIVE_REGION"]},"ai":{"compositionPattern":"compound","subComponents":["Toolbar","ToolbarGroup","ToolbarButton","Separator","StatusIndicator","Content","StatusBar","preload"]},"propsSummary":["children: node","value: string","defaultValue: string (default: )","onValueChange: function","placeholder: string (default: Start typing...)","disabled: boolean (default: false)","readOnly: boolean (default: false)","formats: array","toolbar: boolean (default: true)","statusBar: boolean (default: true)","onAutoSave: function","autoSaveInterval: number (default: 30000)","size: sm|md|lg (default: md)","maxLength: number","toolbarIcons: object"],"sourcePath":"src/components/Editor/index.tsx","exportName":"Editor","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:56.748Z"},"performance":{"bundleSize":138646,"rawSize":442175,"complexity":"heavy","budgetPercent":903,"overBudget":true,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"@tiptap/react","bytes":335208,"percent":76},{"path":"@phosphor-icons/react","bytes":34485,"percent":8},{"path":"@tiptap/starter-kit","bytes":32005,"percent":7},{"path":"@tiptap/extension-link","bytes":25654,"percent":6},{"path":"Editor (self)","bytes":10010,"percent":2},{"path":"src/utils/keyboard-shortcuts.ts","bytes":2656,"percent":1}]}},"EmptyState":{"filePath":"src/components/EmptyState/index.tsx","meta":{"name":"EmptyState","description":"Placeholder for empty content areas. Provides context, guidance, and actions when no data is available.","category":"feedback","tags":["empty","placeholder","no-data","zero-state","blank-slate"],"status":"stable"},"usage":{"when":["Empty lists, tables, or search results","New user onboarding (no content yet)","Filtered views with no matches","Error states where content failed to load"],"whenNot":["Loading states (use skeleton or spinner)","Error messages with retry (use Alert)","Temporary messages (use Toast)"],"guidelines":["Always explain why the area is empty","Provide a clear action to resolve the empty state","Use appropriate icons to reinforce the message","Keep messaging positive and actionable","EmptyState compound sub-components forward DOM props for ids, aria attributes, and handlers"],"accessibility":["Empty state content is accessible to screen readers","Action buttons follow button accessibility guidelines"]},"props":{"children":{"type":"node","description":"EmptyState content - use EmptyState.Icon, EmptyState.Title, EmptyState.Description, EmptyState.Actions sub-components","required":true},"size":{"type":"enum","description":"Size variant","default":"md","required":false,"values":["sm","md","lg"]}},"relations":[{"component":"Alert","relationship":"alternative","note":"Use Alert for error states with retry"},{"component":"Progress","relationship":"alternative","note":"Use Progress/Spinner for loading states"}],"variants":[{"name":"Default","description":"Basic empty state with action","code":"<EmptyState>\n  <EmptyState.Icon><FolderIcon /></EmptyState.Icon>\n  <EmptyState.Title>No projects yet</EmptyState.Title>\n  <EmptyState.Description>Get started by creating your first project.</EmptyState.Description>\n  <EmptyState.Actions>\n    <Button>Create Project</Button>\n  </EmptyState.Actions>\n</EmptyState>"},{"name":"No Results","description":"Empty search results","code":"<EmptyState>\n  <EmptyState.Icon><SearchIcon /></EmptyState.Icon>\n  <EmptyState.Title>No results found</EmptyState.Title>\n  <EmptyState.Description>Try adjusting your search terms or filters.</EmptyState.Description>\n  <EmptyState.Actions>\n    <Button variant=\"secondary\">Clear Filters</Button>\n  </EmptyState.Actions>\n</EmptyState>"},{"name":"With Secondary Action","description":"Empty state with two actions","code":"<EmptyState>\n  <EmptyState.Icon><InboxIcon /></EmptyState.Icon>\n  <EmptyState.Title>Inbox is empty</EmptyState.Title>\n  <EmptyState.Description>You have no new messages.</EmptyState.Description>\n  <EmptyState.Actions>\n    <Button>Compose Message</Button>\n    <Button variant=\"secondary\">View Archive</Button>\n  </EmptyState.Actions>\n</EmptyState>"},{"name":"Small","description":"Compact empty state for inline use","code":"<EmptyState size=\"sm\">\n  <EmptyState.Title>No items</EmptyState.Title>\n  <EmptyState.Description>Add items to see them here.</EmptyState.Description>\n</EmptyState>"},{"name":"Large","description":"Prominent empty state for full-page use","code":"<EmptyState size=\"lg\">\n  <EmptyState.Icon><FolderIcon /></EmptyState.Icon>\n  <EmptyState.Title>Welcome to your workspace</EmptyState.Title>\n  <EmptyState.Description>\n    This is where your projects will appear. Create your first project to get started.\n  </EmptyState.Description>\n  <EmptyState.Actions>\n    <Button>Create Your First Project</Button>\n  </EmptyState.Actions>\n</EmptyState>"}],"contract":{"propsSummary":["size: sm|md|lg (default: md)","Sub-components: EmptyState.Icon, EmptyState.Title, EmptyState.Description, EmptyState.Actions","Compound sub-components forward DOM props to their rendered elements"],"a11yRules":["A11Y_EMPTY_STATE_CONTENT"]},"ai":{"compositionPattern":"compound","subComponents":["Icon","Title","Description","Actions"],"requiredChildren":["Title"],"commonPatterns":["<EmptyState><EmptyState.Title>{title}</EmptyState.Title><EmptyState.Description>{description}</EmptyState.Description></EmptyState>","<EmptyState><EmptyState.Icon>{icon}</EmptyState.Icon><EmptyState.Title>{title}</EmptyState.Title><EmptyState.Description>{description}</EmptyState.Description><EmptyState.Actions><Button>{action}</Button></EmptyState.Actions></EmptyState>"]},"propsSummary":["children: node (required)","size: sm|md|lg (default: md)"],"sourcePath":"src/components/EmptyState/index.tsx","exportName":"EmptyState","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:56.922Z"},"performance":{"bundleSize":767,"rawSize":1840,"complexity":"lightweight","budgetPercent":5,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"EmptyState (self)","bytes":1111,"percent":60}]}},"Dialog":{"filePath":"src/components/Dialog/index.tsx","meta":{"name":"Dialog","description":"Modal overlay for focused user interactions. Use for confirmations, forms, or content requiring full attention.","category":"feedback","tags":["modal","dialog","overlay","popup","confirmation"],"status":"stable"},"usage":{"when":["Confirming destructive actions (delete, discard changes)","Collecting focused input (forms, settings)","Displaying content that requires acknowledgment","Multi-step workflows that need isolation"],"whenNot":["Simple tooltips or hints (use Tooltip)","Contextual menus (use Menu or Popover)","Non-blocking notifications (use Toast or Alert)","Simple confirmation that can be inline (use Alert)"],"guidelines":["Keep dialog content focused on a single task","Provide clear primary and secondary actions","Use descriptive title that explains the purpose","Allow dismissal via backdrop click or close button for non-critical dialogs","Trap focus within the dialog for accessibility","Dialog.Trigger and Dialog.Close support asChild for buttons, links, and router link components"],"accessibility":["Automatically traps focus within the dialog","Closes on Escape key press","Returns focus to trigger element on close","Uses role=\"dialog\" with proper aria attributes"]},"props":{"children":{"type":"node","description":"Dialog content (use Dialog.Content, Dialog.Header, etc.)","required":true},"open":{"type":"boolean","description":"Controlled open state","required":false},"defaultOpen":{"type":"boolean","description":"Default open state (uncontrolled)","default":"false","required":false},"onOpenChange":{"type":"function","description":"Called when open state changes","required":false},"modal":{"type":"boolean","description":"Whether to render as modal (blocks interaction with rest of page)","default":"true","required":false}},"relations":[{"component":"Popover","relationship":"alternative","note":"Use Popover for non-modal contextual content"},{"component":"Menu","relationship":"alternative","note":"Use Menu for action lists"},{"component":"Alert","relationship":"sibling","note":"Use Alert for inline notifications"}],"variants":[{"name":"Default","description":"Basic dialog with header, body, and footer","code":"<Dialog>\n  <Dialog.Trigger asChild>\n    <Button>Open Dialog</Button>\n  </Dialog.Trigger>\n  <Dialog.Content>\n    <Dialog.Close />\n    <Dialog.Header>\n      <Dialog.Title>Dialog Title</Dialog.Title>\n      <Dialog.Description>\n        A brief description of what this dialog is for.\n      </Dialog.Description>\n    </Dialog.Header>\n    <Dialog.Body>\n      <p>Dialog content goes here. You can include forms, text, or any other content.</p>\n    </Dialog.Body>\n    <Dialog.Footer>\n      <Dialog.Close asChild>\n        <Button variant=\"secondary\">Cancel</Button>\n      </Dialog.Close>\n      <Button variant=\"primary\">Confirm</Button>\n    </Dialog.Footer>\n  </Dialog.Content>\n</Dialog>"},{"name":"Confirmation","description":"Destructive action confirmation","code":"<Dialog>\n  <Dialog.Trigger asChild>\n    <Button variant=\"danger\">Delete Item</Button>\n  </Dialog.Trigger>\n  <Dialog.Content size=\"sm\">\n    <Dialog.Header>\n      <Dialog.Title>Delete item?</Dialog.Title>\n      <Dialog.Description>\n        This action cannot be undone. The item will be permanently removed.\n      </Dialog.Description>\n    </Dialog.Header>\n    <Dialog.Footer>\n      <Dialog.Close asChild>\n        <Button variant=\"secondary\">Cancel</Button>\n      </Dialog.Close>\n      <Button variant=\"danger\">Delete</Button>\n    </Dialog.Footer>\n  </Dialog.Content>\n</Dialog>"},{"name":"Large","description":"Large dialog for complex content","code":"<Dialog>\n  <Dialog.Trigger asChild>\n    <Button>Open Large Dialog</Button>\n  </Dialog.Trigger>\n  <Dialog.Content size=\"lg\">\n    <Dialog.Close />\n    <Dialog.Header>\n      <Dialog.Title>Settings</Dialog.Title>\n      <Dialog.Description>\n        Configure your application preferences.\n      </Dialog.Description>\n    </Dialog.Header>\n    <Dialog.Body>\n      <p>This dialog has more space for complex forms or content layouts.</p>\n    </Dialog.Body>\n    <Dialog.Footer>\n      <Dialog.Close asChild>\n        <Button variant=\"secondary\">Cancel</Button>\n      </Dialog.Close>\n      <Button variant=\"primary\">Save Changes</Button>\n    </Dialog.Footer>\n  </Dialog.Content>\n</Dialog>"},{"name":"Link Trigger + No Initial Focus","description":"Use asChild with a link trigger and disable automatic initial focus when needed","code":"<Dialog>\n  <Dialog.Trigger asChild>\n    <a href=\"#dialog-demo\">Open via link</a>\n  </Dialog.Trigger>\n  <Dialog.Content size=\"sm\" initialFocus={false}>\n    <Dialog.Header>\n      <Dialog.Title>Linked Trigger</Dialog.Title>\n      <Dialog.Description>\n        Example using asChild with an anchor element and manual focus behavior.\n      </Dialog.Description>\n    </Dialog.Header>\n    <Dialog.Footer>\n      <Dialog.Close asChild>\n        <Button variant=\"secondary\">Close</Button>\n      </Dialog.Close>\n    </Dialog.Footer>\n  </Dialog.Content>\n</Dialog>"}],"contract":{"propsSummary":["open: boolean - controlled open state","onOpenChange: (open) => void - open state handler","modal: boolean - blocks page interaction (default: true)","Dialog.Content initialFocus?: boolean - control auto-focus on open (default: true)","Dialog.Content size: sm|md|lg|xl|full - dialog width"],"a11yRules":["A11Y_DIALOG_FOCUS","A11Y_DIALOG_ESCAPE","A11Y_DIALOG_LABEL"]},"ai":{"compositionPattern":"compound","subComponents":["Trigger","Content","Close","Header","Title","Description","Body","Footer"],"requiredChildren":["Content"],"commonPatterns":["<Dialog><Dialog.Trigger><Button>Open</Button></Dialog.Trigger><Dialog.Content><Dialog.Header><Dialog.Title>{title}</Dialog.Title></Dialog.Header><Dialog.Body>{content}</Dialog.Body><Dialog.Footer><Dialog.Close><Button variant=\"secondary\">Cancel</Button></Dialog.Close><Button>Confirm</Button></Dialog.Footer></Dialog.Content></Dialog>","<Dialog><Dialog.Trigger asChild><a href=\"/settings\">Open settings</a></Dialog.Trigger><Dialog.Content initialFocus={false}>...</Dialog.Content></Dialog>"]},"propsSummary":["children: node (required)","open: boolean","defaultOpen: boolean","onOpenChange: function","modal: boolean (default: true)"],"sourcePath":"src/components/Dialog/index.tsx","exportName":"Dialog","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:55.179Z"},"performance":{"bundleSize":1127,"rawSize":3004,"complexity":"lightweight","budgetPercent":7,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Dialog (self)","bytes":2253,"percent":75}]}},"Fieldset":{"filePath":"src/components/Fieldset/index.tsx","meta":{"name":"Fieldset","description":"Groups related form fields with an accessible legend. Use to organize forms into logical sections.","category":"forms","tags":["form","fieldset","group","legend","accessible"],"status":"stable"},"usage":{"when":["Grouping related fields in a form (e.g., address, personal info)","Disabling a group of fields together","Providing an accessible group label for screen readers"],"whenNot":["Generic visual grouping (use Card)","Single field wrapping (use Field)"],"guidelines":["Always include a Fieldset.Legend for accessibility","Use disabled prop to disable all fields within the group","Use Grid inside Fieldset for multi-column layouts","Fieldset.Legend forwards DOM props for ids, aria attributes, and custom data hooks"],"accessibility":["Renders semantic fieldset element","Legend provides accessible group label","Disabled state propagates to all child fields"]},"props":{"children":{"type":"node","description":"Fieldset content including Fieldset.Legend and form fields","required":true},"disabled":{"type":"boolean","description":"Disables all fields within the fieldset","required":false}},"relations":[{"component":"Field","relationship":"sibling","note":"Contains Field components"},{"component":"Form","relationship":"parent","note":"Used within a Form"},{"component":"Card","relationship":"alternative","note":"Use Card for non-form visual grouping"}],"variants":[{"name":"Two-column layout","description":"Fieldset with Grid for side-by-side fields","code":"<Fieldset>\n  <Fieldset.Legend>Personal Information</Fieldset.Legend>\n  <Grid columns={2} gap=\"md\">\n    <Field name=\"firstName\">\n      <Field.Label>First Name</Field.Label>\n      <Field.Control>\n        <Input placeholder=\"Jane\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"lastName\">\n      <Field.Label>Last Name</Field.Label>\n      <Field.Control>\n        <Input placeholder=\"Doe\" />\n      </Field.Control>\n    </Field>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"email\">\n        <Field.Label>Email</Field.Label>\n        <Field.Control>\n          <Input type=\"email\" placeholder=\"jane@example.com\" />\n        </Field.Control>\n      </Field>\n    </Grid.Item>\n  </Grid>\n</Fieldset>"},{"name":"Mixed controls","description":"Fieldset with textarea, select, and checkbox","code":"<Fieldset>\n  <Fieldset.Legend>Preferences</Fieldset.Legend>\n  <Field name=\"bio\">\n    <Field.Label>Bio</Field.Label>\n    <Field.Control>\n      <Textarea placeholder=\"Tell us about yourself\" rows={3} />\n    </Field.Control>\n    <Field.Description>Brief description for your profile.</Field.Description>\n  </Field>\n  <Field name=\"role\">\n    <Field.Label>Role</Field.Label>\n    <Field.Control>\n      <Select placeholder=\"Select a role\">\n        <Select.Trigger />\n        <Select.Content>\n          <Select.Item value=\"admin\">Admin</Select.Item>\n          <Select.Item value=\"editor\">Editor</Select.Item>\n          <Select.Item value=\"viewer\">Viewer</Select.Item>\n        </Select.Content>\n      </Select>\n    </Field.Control>\n  </Field>\n  <Field name=\"newsletter\">\n    <Field.Control>\n      <Checkbox label=\"Subscribe to newsletter\" />\n    </Field.Control>\n  </Field>\n</Fieldset>"},{"name":"With Description","description":"Fieldset with descriptive helper text below the legend","code":"<Fieldset>\n  <Fieldset.Legend>Notification Settings</Fieldset.Legend>\n  <Fieldset.Description>Choose how you want to be notified about updates.</Fieldset.Description>\n  <Field name=\"emailNotif\">\n    <Field.Control>\n      <Checkbox label=\"Email notifications\" />\n    </Field.Control>\n  </Field>\n  <Field name=\"smsNotif\">\n    <Field.Control>\n      <Checkbox label=\"SMS notifications\" />\n    </Field.Control>\n  </Field>\n</Fieldset>"},{"name":"Disabled","description":"Disabled fieldset prevents interaction with all children","code":"<Fieldset disabled>\n  <Fieldset.Legend>Locked Section</Fieldset.Legend>\n  <Grid columns={2} gap=\"md\">\n    <Field name=\"lockedFirst\">\n      <Field.Label>First Name</Field.Label>\n      <Field.Control>\n        <Input defaultValue=\"Jane\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"lockedLast\">\n      <Field.Label>Last Name</Field.Label>\n      <Field.Control>\n        <Input defaultValue=\"Doe\" />\n      </Field.Control>\n    </Field>\n  </Grid>\n  <Field name=\"lockedCheck\">\n    <Field.Control>\n      <Checkbox label=\"Cannot toggle\" defaultChecked />\n    </Field.Control>\n  </Field>\n</Fieldset>"}],"contract":{"propsSummary":["disabled: boolean - disables all child fields","Fieldset.Legend: accessible group label","Fieldset.Legend forwards DOM props","Fieldset.Description: helper text below the legend"],"a11yRules":["A11Y_FIELDSET_LEGEND"]},"ai":{"compositionPattern":"compound","subComponents":["Legend","Description"],"commonPatterns":["<Fieldset>\n  <Fieldset.Legend>...</Fieldset.Legend>\n</Fieldset>"],"requiredChildren":["Legend"]},"propsSummary":["children: node (required)","disabled: boolean"],"sourcePath":"src/components/Fieldset/index.tsx","exportName":"Fieldset","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:57.275Z"},"performance":{"bundleSize":610,"rawSize":1285,"complexity":"lightweight","budgetPercent":4,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Fieldset (self)","bytes":632,"percent":49}]}},"Field":{"filePath":"src/components/Field/index.tsx","meta":{"name":"Field","description":"Compositional form field wrapper providing validation, labels, descriptions, and error messages. Use for advanced form needs beyond baked-in Input/Textarea props.","category":"forms","tags":["form","field","validation","label","error","input","accessible"],"status":"stable"},"usage":{"when":["You need granular validation with match-based error messages","Custom form controls need accessible labels and descriptions","Server-side errors need to be distributed to specific fields","You need dirty/touched tracking or custom validation logic"],"whenNot":["Simple inputs with basic label and helper text (use Input with label prop)","Standalone selects or textareas with built-in error display"],"guidelines":["Always provide a Field.Label for accessibility","Wrap any form control in Field.Control to connect it to the field context","Use match prop on Field.Error for granular native validation messages","Wrap in Form to enable server-side error distribution by field name"],"accessibility":["Label automatically linked to control via aria-labelledby","Description linked via aria-describedby","Error messages announced to screen readers","Supports data-disabled and data-invalid attributes for styling"]},"props":{"children":{"type":"node","description":"Field content (Label, Control, Description, Error)","required":true},"name":{"type":"string","description":"Field name, used for error distribution from Form","required":false},"disabled":{"type":"boolean","description":"Disables the field and its control","required":false},"invalid":{"type":"boolean","description":"Marks the field as invalid","required":false},"validate":{"type":"function","description":"Custom validation function returning error string(s) or null","required":false},"validationMode":{"type":"enum","description":"When to trigger validation","required":false,"values":["onSubmit","onBlur","onChange"]},"validationDebounceTime":{"type":"number","description":"Debounce time in ms for onChange validation","required":false},"size":{"type":"enum","description":"","required":false,"values":["sm","md","lg"]}},"relations":[{"component":"Input","relationship":"alternative","note":"Use Input for simple fields with built-in label/error"},{"component":"Form","relationship":"parent","note":"Wrap in Form for server-side error distribution"},{"component":"Fieldset","relationship":"sibling","note":"Use Fieldset to group related fields"}],"variants":[{"name":"Single field","description":"A single field with label, control, and description","code":"<Field name=\"email\">\n  <Field.Label>Email address</Field.Label>\n  <Field.Control>\n    <Input type=\"email\" placeholder=\"jane@example.com\" />\n  </Field.Control>\n  <Field.Description>We will never share your email.</Field.Description>\n</Field>"},{"name":"Two-column layout","description":"Fields arranged in a two-column grid","code":"<Grid columns={2} gap=\"md\">\n  <Field name=\"firstName\">\n    <Field.Label>First Name</Field.Label>\n    <Field.Control>\n      <Input placeholder=\"Jane\" />\n    </Field.Control>\n  </Field>\n  <Field name=\"lastName\">\n    <Field.Label>Last Name</Field.Label>\n    <Field.Control>\n      <Input placeholder=\"Doe\" />\n    </Field.Control>\n  </Field>\n  <Grid.Item colSpan=\"full\">\n    <Field name=\"email\">\n      <Field.Label>Email</Field.Label>\n      <Field.Control>\n        <Input type=\"email\" placeholder=\"jane@example.com\" />\n      </Field.Control>\n      <Field.Error match=\"typeMismatch\">Enter a valid email address</Field.Error>\n    </Field>\n  </Grid.Item>\n</Grid>"},{"name":"Custom validation","description":"Field with custom validate function","code":"<Field\n  name=\"age\"\n  validate={(value) => {\n    const num = Number(value);\n    if (isNaN(num) || num < 18) return 'Must be 18 or older';\n    return null;\n  }}\n  validationMode=\"onChange\"\n  validationDebounceTime={500}\n>\n  <Field.Label>Age</Field.Label>\n  <Field.Control>\n    <Input type=\"number\" placeholder=\"18\" />\n  </Field.Control>\n  <Field.Description>You must be at least 18 years old.</Field.Description>\n  <Field.Error match=\"customError\" />\n</Field>"}],"contract":{"propsSummary":["name: string - field name for error distribution","validate: (value) => string | null - custom validation","validationMode: onSubmit|onBlur|onChange - validation trigger","Field.Control: wraps any form component (Input, Textarea, etc.)","Field.Error match: valueMissing|typeMismatch|customError|... - granular errors"],"a11yRules":["A11Y_FIELD_LABEL","A11Y_FIELD_ERROR","A11Y_FIELD_DESCRIPTION"]},"ai":{"compositionPattern":"compound","subComponents":["Label","Control","Description","Error","Validity","Required"],"commonPatterns":["<Field>\n  <Field.Label>...</Field.Label>\n  <Field.Control>...</Field.Control>\n  <Field.Description>...</Field.Description>\n</Field>"],"requiredChildren":["Label","Control"]},"propsSummary":["children: node (required)","name: string","disabled: boolean","invalid: boolean","validate: function","validationMode: onSubmit|onBlur|onChange","validationDebounceTime: number"],"sourcePath":"src/components/Field/index.tsx","exportName":"Field","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:59.733Z"},"performance":{"bundleSize":923,"rawSize":2253,"complexity":"lightweight","budgetPercent":6,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Field (self)","bytes":1348,"percent":60},{"path":"ComponentDefaults","bytes":193,"percent":9}]}},"Form":{"filePath":"src/components/Form/index.tsx","meta":{"name":"Form","description":"Form wrapper that handles server-side error distribution to Field components. Pairs with Field for complete form validation.","category":"forms","tags":["form","validation","errors","submit","server"],"status":"stable"},"usage":{"when":["Building forms that need server-side error handling","Distributing validation errors to specific fields by name","Combining client and server validation in one form"],"whenNot":["Simple forms with only client-side validation (use native form or Field alone)","Non-form layouts (use Grid or Card)"],"guidelines":["Pass errors as Record<string, string | string[]> keyed by field name","Use onClearErrors to clear errors when fields are modified","Use onSubmit for form submission handling (onFormSubmit is deprecated alias)","Field components with matching name prop display errors automatically","Use Grid inside Form or Fieldset for multi-column layouts","Place form buttons inside Form.Actions so cancel and submit actions are consistently right-aligned"],"accessibility":["Renders semantic form element","Error messages linked to fields via aria-describedby"]},"props":{"children":{"type":"node","description":"Form content","required":true},"errors":{"type":"object","description":"Server-side errors keyed by field name","required":false},"onSubmit":{"type":"function","description":"Form submission handler (preferred)","required":false},"onFormSubmit":{"type":"function","description":"Deprecated alias for onSubmit","required":false},"onClearErrors":{"type":"function","description":"Called with field name when errors should be cleared","required":false},"validationMode":{"type":"enum","description":"When field validation should run","required":false,"values":["onSubmit","onBlur","onChange"]}},"relations":[{"component":"Field","relationship":"sibling","note":"Contains Field components for error distribution"},{"component":"Fieldset","relationship":"sibling","note":"Use Fieldset to group fields within a Form"},{"component":"Button","relationship":"sibling","note":"Use Button type=\"submit\" for form submission"}],"variants":[{"name":"Sign up","description":"Registration form with two-column name fields","code":"<Form onSubmit={(e) => { e.preventDefault(); }}>\n  <Grid columns={2} gap=\"md\">\n    <Field name=\"firstName\">\n      <Field.Label>First Name</Field.Label>\n      <Field.Control>\n        <Input placeholder=\"Jane\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"lastName\">\n      <Field.Label>Last Name</Field.Label>\n      <Field.Control>\n        <Input placeholder=\"Doe\" />\n      </Field.Control>\n    </Field>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"email\">\n        <Field.Label>Email</Field.Label>\n        <Field.Control>\n          <Input type=\"email\" placeholder=\"jane@example.com\" />\n        </Field.Control>\n        <Field.Error match=\"typeMismatch\">Enter a valid email address</Field.Error>\n      </Field>\n    </Grid.Item>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"password\">\n        <Field.Label>Password</Field.Label>\n        <Field.Control>\n          <Input type=\"password\" placeholder=\"At least 8 characters\" />\n        </Field.Control>\n        <Field.Description>Must be at least 8 characters</Field.Description>\n      </Field>\n    </Grid.Item>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"terms\">\n        <Field.Control>\n          <Checkbox label=\"I agree to the terms and conditions\" />\n        </Field.Control>\n      </Field>\n    </Grid.Item>\n  </Grid>\n  <Form.Actions>\n    <Button type=\"submit\" variant=\"primary\">Create Account</Button>\n  </Form.Actions>\n</Form>"},{"name":"Profile settings","description":"Multi-section form with Fieldsets, switches, and radio group","code":"<Form onSubmit={(e) => { e.preventDefault(); }}>\n  <Fieldset>\n    <Fieldset.Legend>Profile</Fieldset.Legend>\n    <Grid columns={2} gap=\"md\">\n      <Field name=\"displayName\">\n        <Field.Label>Display Name</Field.Label>\n        <Field.Control>\n          <Input placeholder=\"How others see you\" />\n        </Field.Control>\n      </Field>\n      <Field name=\"timezone\">\n        <Field.Label>Timezone</Field.Label>\n        <Field.Control>\n          <Select placeholder=\"Select timezone\">\n            <Select.Trigger />\n            <Select.Content>\n              <Select.Item value=\"utc\">UTC</Select.Item>\n              <Select.Item value=\"est\">Eastern (EST)</Select.Item>\n              <Select.Item value=\"pst\">Pacific (PST)</Select.Item>\n              <Select.Item value=\"gmt\">GMT</Select.Item>\n            </Select.Content>\n          </Select>\n        </Field.Control>\n      </Field>\n      <Grid.Item colSpan=\"full\">\n        <Field name=\"bio\">\n          <Field.Label>Bio</Field.Label>\n          <Field.Control>\n            <Textarea placeholder=\"Tell us about yourself\" rows={3} maxLength={280} />\n          </Field.Control>\n          <Field.Description>Max 280 characters</Field.Description>\n        </Field>\n      </Grid.Item>\n    </Grid>\n  </Fieldset>\n  <Fieldset>\n    <Fieldset.Legend>Notifications</Fieldset.Legend>\n    <Field name=\"emailNotifs\">\n      <Field.Control>\n        <Switch label=\"Email notifications\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"marketingEmails\">\n      <Field.Control>\n        <Switch label=\"Marketing emails\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"frequency\">\n      <Field.Label>Digest frequency</Field.Label>\n      <Field.Control>\n        <RadioGroup name=\"frequency\" orientation=\"vertical\">\n          <RadioGroup.Item value=\"daily\" label=\"Daily\" />\n          <RadioGroup.Item value=\"weekly\" label=\"Weekly\" />\n          <RadioGroup.Item value=\"monthly\" label=\"Monthly\" />\n        </RadioGroup>\n      </Field.Control>\n    </Field>\n  </Fieldset>\n  <Form.Actions>\n    <Button type=\"submit\" variant=\"primary\">Save Changes</Button>\n  </Form.Actions>\n</Form>"},{"name":"Contact form","description":"Contact form with select, textarea, and checkbox","code":"<Form onSubmit={(e) => { e.preventDefault(); }}>\n  <Grid columns={2} gap=\"md\">\n    <Field name=\"name\">\n      <Field.Label>Name</Field.Label>\n      <Field.Control>\n        <Input placeholder=\"Your name\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"email\">\n      <Field.Label>Email</Field.Label>\n      <Field.Control>\n        <Input type=\"email\" placeholder=\"you@example.com\" />\n      </Field.Control>\n    </Field>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"subject\">\n        <Field.Label>Subject</Field.Label>\n        <Field.Control>\n          <Select placeholder=\"What is this about?\">\n            <Select.Trigger />\n            <Select.Content>\n              <Select.Item value=\"general\">General Inquiry</Select.Item>\n              <Select.Item value=\"support\">Technical Support</Select.Item>\n              <Select.Item value=\"billing\">Billing</Select.Item>\n              <Select.Item value=\"feedback\">Feedback</Select.Item>\n            </Select.Content>\n          </Select>\n        </Field.Control>\n      </Field>\n    </Grid.Item>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"message\">\n        <Field.Label>Message</Field.Label>\n        <Field.Control>\n          <Textarea placeholder=\"How can we help?\" rows={5} />\n        </Field.Control>\n      </Field>\n    </Grid.Item>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"copy\">\n        <Field.Control>\n          <Checkbox label=\"Send me a copy\" />\n        </Field.Control>\n      </Field>\n    </Grid.Item>\n  </Grid>\n  <Form.Actions>\n    <Button type=\"submit\" variant=\"primary\">Send Message</Button>\n  </Form.Actions>\n</Form>"},{"name":"With server errors","description":"Form displaying server-side validation errors","code":"<Form errors={{ username: 'Username is already taken', email: 'Email is already registered' }}>\n  <Grid columns={2} gap=\"md\">\n    <Field name=\"username\">\n      <Field.Label>Username</Field.Label>\n      <Field.Control>\n        <Input defaultValue=\"janedoe\" />\n      </Field.Control>\n      <Field.Error match=\"customError\" />\n    </Field>\n    <Field name=\"email\">\n      <Field.Label>Email</Field.Label>\n      <Field.Control>\n        <Input type=\"email\" defaultValue=\"jane@example.com\" />\n      </Field.Control>\n      <Field.Error match=\"customError\" />\n    </Field>\n  </Grid>\n  <Form.Actions>\n    <Button type=\"submit\" variant=\"primary\">Submit</Button>\n  </Form.Actions>\n</Form>"}],"contract":{"propsSummary":["errors: Record<string, string | string[]> - server errors by field name","onSubmit: (event) => void - submission handler (preferred)","onFormSubmit: (event) => void - deprecated alias for onSubmit","onClearErrors: (name) => void - clear errors callback"],"a11yRules":["A11Y_FORM_LABEL"]},"ai":{"compositionPattern":"compound","subComponents":["Root","Actions"],"commonPatterns":["<Form>\n  <Form.Actions>...</Form.Actions>\n</Form>"],"requiredChildren":["Actions"]},"propsSummary":["children: node (required)","errors: object","onSubmit: function","onFormSubmit: function","onClearErrors: function","validationMode: onSubmit|onBlur|onChange"],"sourcePath":"src/components/Form/index.tsx","exportName":"Form","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:57.100Z"},"performance":{"bundleSize":619,"rawSize":1139,"complexity":"lightweight","budgetPercent":4,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Form (self)","bytes":553,"percent":49}]}},"Header":{"filePath":"src/components/Header/index.tsx","meta":{"name":"Header","description":"Composable header with slots for brand, navigation, search, and actions. Supports dropdown nav groups via Header.NavMenu. Designed for use within AppShell with responsive mobile support.","category":"navigation","tags":["header","navigation","navbar","brand","layout","dropdown"],"status":"stable"},"usage":{"when":["Primary site or app header inside AppShell","Navigation bar with branding (default layout)","Search and actions bar (sidebar layout)","Header with responsive mobile menu trigger","Grouping related nav items under a dropdown menu"],"whenNot":["Simple page titles (use heading elements)","Footer navigation (use Footer component)","Standalone sidebar navigation (use Sidebar directly)"],"guidelines":["Use Header.SkipLink for accessibility (skip to main content)","In default layout: include Header.Brand for logo","In sidebar layout: omit Header.Brand (logo in sidebar)","Header.Trigger integrates with SidebarProvider for mobile menus","Header.Trigger composes your onClick handler with sidebar toggle behavior","Header.Nav is hidden on mobile; use sidebar for mobile navigation","Use Header.Spacer to push items apart","Use Header.NavMenu to group related nav items under a dropdown","Use Header.NavMenuItem inside Header.NavMenu for dropdown items","Header sub-components forward DOM props (id, aria-*, data-*, handlers) to their rendered elements","Header.Brand asChild composes custom link components while preserving canonical brand styling","Header.NavItem asChild composes click handlers instead of overwriting the child handler","Use elevatedOnScroll on sticky marketing headers that need a boundary after scrolling","Use navAlign=\"center\" when navigation must stay centered independently of brand and actions","Use container=\"page\" when the header should share a bounded page gutter","Use Header.MobileNavActions for the primary action row inside Header.MobileNav","Use the Header icons prop to replace internal mobile trigger and dropdown chevron icons with any icon package","For rich dropdown content (titles, descriptions, icons), use NavigationMenu instead of Header.Nav","NavigationMenu also provides an automatic mobile drawer, replacing Header.Trigger + Sidebar for mobile nav"],"accessibility":["Include Header.SkipLink for keyboard users","Navigation has aria-label for screen readers","Active nav items use aria-current=\"page\"","Mobile trigger has aria-expanded state","NavMenu dropdown opens with click and is keyboard navigable"]},"props":{"children":{"type":"node","description":"Header content (use Header.Brand, Header.Nav, etc.)","required":true},"height":{"type":"string","description":"Header height","default":"56px","required":false},"position":{"type":"enum","description":"Position behavior (usually controlled by AppShell)","default":"static","required":false,"values":["static","fixed","sticky"]},"elevatedOnScroll":{"type":"union","description":"Apply the elevated header border after scrolling. Object form accepts { threshold?: number }.","default":"false","required":false},"navAlign":{"type":"enum","description":"Navigation alignment inside the header","default":"start","required":false,"values":["start","center"]},"container":{"type":"enum","description":"Header content width","default":"full","required":false,"values":["full","page"]},"icons":{"type":"object","description":"Optional icon overrides for Header.Trigger (menu/close) and Header.NavMenu chevron","required":false},"style":{"type":"object","description":"","required":false}},"relations":[{"component":"AppShell","relationship":"parent","note":"Header is typically used inside AppShell.Header"},{"component":"Sidebar","relationship":"sibling","note":"Header.Trigger toggles Sidebar on mobile"},{"component":"Theme","relationship":"child","note":"ThemeToggle is commonly placed in Header.Actions"},{"component":"NavigationMenu","relationship":"child","note":"Use NavigationMenu inside Header for rich dropdown nav with auto mobile drawer"}],"variants":[{"name":"For Default Layout","description":"Header with brand, nav, and actions. Use with AppShell layout=\"default\".","code":"<ThemeProvider defaultMode=\"light\">\n  <Header>\n    <Header.SkipLink />\n    <Header.Trigger />\n    <Header.Brand href=\"/\">MyApp</Header.Brand>\n    <Header.Nav>\n      <Header.NavItem href=\"/dashboard\" active>Dashboard</Header.NavItem>\n      <Header.NavItem href=\"/projects\">Projects</Header.NavItem>\n      <Header.NavItem href=\"/settings\">Settings</Header.NavItem>\n    </Header.Nav>\n    <Header.Spacer />\n    <Header.Actions>\n      <ThemeToggle size=\"md\" />\n      <Button variant=\"secondary\" size=\"sm\">Sign In</Button>\n    </Header.Actions>\n  </Header>\n</ThemeProvider>"},{"name":"Marketing Header","description":"Sticky, page-width marketing header with centered navigation, scroll elevation, custom link composition, and mobile actions.","code":"<Header position=\"sticky\" elevatedOnScroll navAlign=\"center\" container=\"page\">\n  <Header.SkipLink href=\"#main-content\" />\n  <Header.Brand asChild>\n    <a href=\"/\" aria-label=\"Home\">Logo</a>\n  </Header.Brand>\n  <Header.Nav aria-label=\"Main navigation\">\n    <Header.NavItem href=\"/docs\">Docs</Header.NavItem>\n  </Header.Nav>\n  <Header.Actions>\n    <Button size=\"sm\">Start free</Button>\n  </Header.Actions>\n  <Header.Trigger />\n  <Header.MobileNav>\n    <Header.MobileNavLink href=\"/docs\">Docs</Header.MobileNavLink>\n    <Header.MobileNavActions>\n      <Button size=\"sm\">Start free</Button>\n    </Header.MobileNavActions>\n  </Header.MobileNav>\n</Header>"},{"name":"With Dropdown Nav","description":"Header with a dropdown menu grouping related navigation links.","code":"<ThemeProvider defaultMode=\"light\">\n  <Header>\n    <Header.Brand href=\"/\">MyApp</Header.Brand>\n    <Header.Nav>\n      <Header.NavItem href=\"/components\" active>Components</Header.NavItem>\n      <Header.NavItem href=\"/blocks\">Blocks</Header.NavItem>\n      <Header.NavMenu label=\"Docs\">\n        <Header.NavMenuItem href=\"/getting-started\">Getting Started</Header.NavMenuItem>\n        <Header.NavMenuItem href=\"/cli\">CLI Reference</Header.NavMenuItem>\n        <Header.NavMenuItem href=\"/mcp\">MCP Tools</Header.NavMenuItem>\n      </Header.NavMenu>\n      <Header.NavItem href=\"/blog\">Blog</Header.NavItem>\n    </Header.Nav>\n    <Header.Spacer />\n    <Header.Actions>\n      <ThemeToggle size=\"md\" />\n    </Header.Actions>\n  </Header>\n</ThemeProvider>"},{"name":"For Sidebar Layout","description":"Header without brand (logo is in sidebar). Use with AppShell layout=\"sidebar\" or \"sidebar-floating\".","code":"<ThemeProvider defaultMode=\"light\">\n  <Header>\n    <Header.SkipLink />\n    <Header.Trigger />\n    <Header.Search>\n      <Input placeholder=\"Search...\" style={{ width: '240px' }} />\n    </Header.Search>\n    <Header.Spacer />\n    <Header.Actions>\n      <ThemeToggle size=\"md\" />\n    </Header.Actions>\n  </Header>\n</ThemeProvider>"},{"name":"Minimal","description":"Clean header with just trigger and actions","code":"<ThemeProvider defaultMode=\"light\">\n  <Header>\n    <Header.Trigger />\n    <Header.Spacer />\n    <Header.Actions>\n      <ThemeToggle size=\"md\" />\n    </Header.Actions>\n  </Header>\n</ThemeProvider>"},{"name":"With Search","description":"Header featuring a prominent search input","code":"<ThemeProvider defaultMode=\"light\">\n  <Header>\n    <Header.Brand>Docs</Header.Brand>\n    <Header.Search>\n      <div style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: '8px',\n        padding: '8px 12px',\n        background: 'var(--fui-bg-secondary)',\n        borderRadius: '6px',\n        color: 'var(--fui-text-tertiary)',\n        fontSize: '14px',\n        width: '280px'\n      }}>\n        <MagnifyingGlass size={16} /> Search documentation...\n      </div>\n    </Header.Search>\n    <Header.Spacer />\n    <Header.Actions>\n      <ThemeToggle size=\"md\" />\n    </Header.Actions>\n  </Header>\n</ThemeProvider>"},{"name":"With Skip Link","description":"Accessible header with skip link for keyboard navigation","code":"<Header>\n  <Header.SkipLink href=\"#main-content\">Skip to content</Header.SkipLink>\n  <Header.Brand>Accessible App</Header.Brand>\n  <Header.Nav>\n    <Header.NavItem href=\"/\" active>Home</Header.NavItem>\n    <Header.NavItem href=\"/about\">About</Header.NavItem>\n  </Header.Nav>\n</Header>"},{"name":"With NavigationMenu","description":"Header using NavigationMenu for rich dropdown content panels with titles, descriptions, and automatic mobile drawer.","code":"<ThemeProvider defaultMode=\"light\">\n  <Header>\n    <Header.Brand href=\"/\">MyApp</Header.Brand>\n    <NavigationMenu aria-label=\"Site navigation\">\n      <NavigationMenu.List>\n        <NavigationMenu.Item value=\"products\">\n          <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>\n          <NavigationMenu.Content>\n            <div style={{ display: 'flex', flexDirection: 'column', padding: '4px', minWidth: '200px' }}>\n              <NavigationMenu.Link href=\"/analytics\" title=\"Analytics\" description=\"Track your metrics.\" />\n              <NavigationMenu.Link href=\"/automation\" title=\"Automation\" description=\"Automate workflows.\" />\n            </div>\n          </NavigationMenu.Content>\n        </NavigationMenu.Item>\n        <NavigationMenu.Item>\n          <NavigationMenu.Link href=\"/pricing\">Pricing</NavigationMenu.Link>\n        </NavigationMenu.Item>\n      </NavigationMenu.List>\n      <NavigationMenu.Viewport />\n    </NavigationMenu>\n    <Header.Spacer />\n    <Header.Actions>\n      <ThemeToggle size=\"md\" />\n      <Button variant=\"primary\" size=\"sm\">Sign Up</Button>\n    </Header.Actions>\n  </Header>\n</ThemeProvider>"}],"contract":{"propsSummary":["height: string - header height (default: 56px)","position: static|fixed|sticky - positioning behavior","elevatedOnScroll: boolean|{ threshold?: number } - scroll-elevated boundary","navAlign: start|center - nav placement inside the header","container: full|page - content width and gutter","icons: { menu?, close?, navMenuChevron? } - custom internal control icons (ReactNode or render function)","Header.Brand asChild composes custom link components","Header.Trigger composes click handler with Sidebar toggle behavior","Header.NavMenu provides dropdown groups via Base UI Menu","Header.MobileNavActions provides an action row inside the mobile drawer"],"a11yRules":["A11Y_HEADER_LANDMARK","A11Y_NAV_LABEL","A11Y_SKIP_LINK","A11Y_BUTTON_LABEL"]},"ai":{"compositionPattern":"compound","subComponents":["SkipLink","Trigger","Brand","Nav","NavItem","MobileNav","MobileNavLink","MobileNavActions","NavMenu","NavMenuItem","Search","Spacer","Actions"],"commonPatterns":["<Header><Header.Brand href=\"/\">{appName}</Header.Brand><Header.Nav><Header.NavItem href=\"/home\" active>Home</Header.NavItem></Header.Nav><Header.Spacer /><Header.Actions>{actions}</Header.Actions></Header>","<Header position=\"sticky\" elevatedOnScroll navAlign=\"center\" container=\"page\"><Header.Brand asChild>{link}</Header.Brand><Header.Nav>{links}</Header.Nav><Header.Actions>{actions}</Header.Actions><Header.Trigger /><Header.MobileNav>{mobileLinks}<Header.MobileNavActions>{mobileActions}</Header.MobileNavActions></Header.MobileNav></Header>","<Header><Header.Nav><Header.NavItem href=\"/home\">Home</Header.NavItem><Header.NavMenu label=\"Docs\" active><Header.NavMenuItem href=\"/cli\">CLI</Header.NavMenuItem><Header.NavMenuItem href=\"/mcp\">MCP</Header.NavMenuItem></Header.NavMenu></Header.Nav></Header>"]},"propsSummary":["children: node (required)","height: string (default: 56px)","position: static|fixed|sticky (default: static)","elevatedOnScroll: boolean|{ threshold?: number }","navAlign: start|center (default: start)","container: full|page (default: full)","icons: object","style: object"],"sourcePath":"src/components/Header/index.tsx","exportName":"Header","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:58.820Z"},"performance":{"bundleSize":11212,"rawSize":36937,"complexity":"moderate","budgetPercent":73,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Sidebar","bytes":17348,"percent":47},{"path":"Header (self)","bytes":7122,"percent":19},{"path":"@phosphor-icons/react","bytes":5528,"percent":15},{"path":"src/recipes/popup.ts","bytes":2753,"percent":7},{"path":"ScrollArea","bytes":2512,"percent":7},{"path":"src/utils/a11y.tsx","bytes":779,"percent":2}]}},"IconButton":{"filePath":"src/components/IconButton/index.tsx","meta":{"name":"IconButton","description":"Compact square button for icon-only actions in dense toolbars, top bars, and row controls.","category":"forms","tags":["action","button","icon","toolbar","interactive"],"status":"stable"},"usage":{"when":["Compact icon-only actions in toolbars or top bars","Row actions where a text button would be too wide","Toggle-style icon actions with a visible pressed state"],"whenNot":["The action needs a visible text label (use Button)","The control changes a persistent boolean setting (use Switch)","The icon is decorative and not interactive (use Icon)"],"guidelines":["Always provide aria-label or aria-labelledby","Use ghost for ordinary toolbar actions and outlined when more separation is needed","Use pressed only when the button represents a persistent toggle state"],"accessibility":["Every icon-only button must have an accessible name","The accessible name should describe the action, not the icon","Pressed state must be exposed with aria-pressed"]},"props":{"children":{"type":"node","description":"Icon element rendered inside the button","required":true},"variant":{"type":"enum","description":"Visual treatment for the icon-only action","default":"ghost","required":false,"values":["ghost","subtle","outlined"]},"size":{"type":"enum","description":"Control size aligned with adjacent fields and toolbar actions","default":"\"md\"","required":false,"values":["sm","md","lg"]},"pressed":{"type":"boolean","description":"Marks a toggle-style action as pressed and sets aria-pressed","required":false},"aria-label":{"type":"string","description":"Accessible action name when no labelled-by relationship is available","required":false},"aria-labelledby":{"type":"string","description":"ID reference for an external accessible action label","required":false},"type":{"type":"enum","description":"","default":"button","required":false,"values":["submit","reset","button"]}},"relations":[{"component":"Button","relationship":"sibling","note":"Use Button when the action should have a visible text label or broader layout variants"},{"component":"Icon","relationship":"complementary","note":"Icon supplies the visual glyph rendered inside IconButton"}],"variants":[{"name":"Toolbar action","description":"A named icon-only toolbar action","code":"<IconButton aria-label=\"Add item\">\n  <PlusIcon aria-hidden />\n</IconButton>"},{"name":"Pressed state","description":"A toggle-style action with its state exposed","code":"import { PushPin as PinIcon } from '@phosphor-icons/react';\n\n<IconButton aria-label=\"Pin item\" pressed>\n  <PinIcon aria-hidden />\n</IconButton>"}],"contract":{"propsSummary":["children: ReactNode - icon element (required)","variant: ghost|subtle|outlined - visual treatment","size: sm|md|lg - square control size","pressed: boolean - toggle state exposed with aria-pressed","aria-label or aria-labelledby - required accessible name"],"a11yRules":["A11Y_BTN_LABEL","A11Y_BTN_FOCUS","A11Y_TARGET_SIZE_MIN"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["children: node (required)","variant: ghost|subtle|outlined (default: ghost)","size: sm|md|lg (default: md)","pressed: boolean","aria-label: string","aria-labelledby: string"],"sourcePath":"src/components/IconButton/index.tsx","exportName":"IconButton","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-07-14T00:00:00.000Z"},"performance":{"bundleSize":714,"rawSize":1334,"complexity":"lightweight","budgetPercent":5,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"IconButton (self)","bytes":549,"percent":41},{"path":"ComponentDefaults","bytes":193,"percent":14}]}},"Icon":{"filePath":"src/components/Icon/index.tsx","meta":{"name":"Icon","description":"Wrapper for icon components with consistent sizing and semantic colors. Provides standardized icon rendering across the design system.","category":"display","tags":["icon","visual","symbol","graphic"],"status":"stable"},"usage":{"when":["Displaying UI icons alongside text or in buttons","Indicating status or state visually","Adding visual hierarchy to feature lists","Decorating cards or stats with relevant symbols"],"whenNot":["Large decorative illustrations (use Image or custom SVG)","Logo display (use dedicated Logo component)","Complex graphics with multiple colors","Animated icons (use custom implementation)"],"guidelines":["Use semantic color variants (success, error, warning) for status indication","Pair icons with text labels for accessibility","Match icon weight/style to surrounding text weight for visual consistency when supported by the icon package","Use consistent sizes within the same context","Use iconProps for package-specific icon options not exposed directly on the wrapper"],"accessibility":["Icons are decorative by default (aria-hidden)","Always pair with visible or visually-hidden text for meaning","Do not rely on color alone to convey information","Consider using VisuallyHidden for icon-only buttons"]},"props":{"style":{"type":"object","description":"","required":false},"icon":{"type":"union","description":"Icon component to render","required":true},"size":{"type":"enum","description":"Icon size","default":"md","required":false,"values":["xs","sm","md","lg","xl","2xl"]},"weight":{"type":"string","description":"Optional icon style/weight hint (forwarded when supported by the icon component)","default":"regular","required":false,"values":["thin","light","regular","bold","fill","duotone"]},"variant":{"type":"enum","description":"Semantic color variant","default":"default","required":false,"values":["default","primary","secondary","tertiary","accent","success","warning","error"]},"color":{"type":"enum","description":"Deprecated alias for variant","required":false,"values":["primary","secondary","tertiary","accent","success","warning","error"]},"iconProps":{"type":"object","description":"Additional props forwarded to the underlying icon component (typed from the icon prop in TypeScript)","required":false}},"relations":[{"component":"Button","relationship":"child","note":"Use inside icon-only buttons with VisuallyHidden label"},{"component":"VisuallyHidden","relationship":"sibling","note":"Pair with VisuallyHidden for accessible icon-only elements"},{"component":"Badge","relationship":"child","note":"Can be used as badge icon prop"}],"variants":[{"name":"Default","description":"Basic icon with default styling","code":"<Icon icon={Heart} />"},{"name":"Sizes","description":"Available size options","code":"<div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>\n  <Icon icon={Star} size=\"xs\" />\n  <Icon icon={Star} size=\"sm\" />\n  <Icon icon={Star} size=\"md\" />\n  <Icon icon={Star} size=\"lg\" />\n  <Icon icon={Star} size=\"xl\" />\n</div>"},{"name":"Semantic Colors","description":"Status and semantic color variants","code":"<div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>\n  <Icon icon={Check} variant=\"success\" />\n  <Icon icon={Warning} variant=\"warning\" />\n  <Icon icon={Warning} variant=\"error\" />\n  <Icon icon={Info} variant=\"accent\" />\n</div>"},{"name":"Weights","description":"Icon weight/style options","code":"<div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>\n  <Icon icon={Heart} weight=\"thin\" />\n  <Icon icon={Heart} weight=\"light\" />\n  <Icon icon={Heart} weight=\"regular\" />\n  <Icon icon={Heart} weight=\"bold\" />\n  <Icon icon={Heart} weight=\"fill\" />\n  <Icon icon={Heart} weight=\"duotone\" />\n</div>"},{"name":"Advanced Icon Props","description":"Forward extra icon-package-specific props through iconProps","code":"<Icon icon={Heart} iconProps={{ mirrored: true }} />"}],"contract":{"propsSummary":["icon: React component - icon component (required)","size: xs|sm|md|lg|xl - icon size","weight: string - optional style/weight hint for icons that support it","variant: default|primary|secondary|tertiary|accent|success|warning|error - color","iconProps: typed from the passed icon component - advanced icon-specific props"],"a11yRules":["A11Y_ICON_LABEL","A11Y_COLOR_CONTRAST"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["style: object","icon: union (required)","size: xs|sm|md|lg|xl (default: md)","weight: string (default: regular)","variant: default|primary|secondary|tertiary|accent|success|warning|error","color: primary|secondary|tertiary|accent|success|warning|error","iconProps: object"],"sourcePath":"src/components/Icon/index.tsx","exportName":"Icon","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:58.998Z"},"performance":{"bundleSize":1666,"rawSize":3869,"complexity":"lightweight","budgetPercent":11,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"src/measurements/index.ts","bytes":2712,"percent":70},{"path":"Icon (self)","bytes":571,"percent":15}]}},"Grid":{"filePath":"src/components/Grid/index.tsx","meta":{"name":"Grid","description":"Responsive grid layout for arranging items in columns with consistent spacing","category":"layout","tags":["grid","layout","columns","responsive"],"status":"stable"},"usage":{"when":["Arranging cards, tiles, or media in a responsive grid","Building form layouts with multi-column fields","Creating dashboard layouts with widgets","Any content that should reflow across breakpoints"],"whenNot":["Single-column stacked content (use a simple flex column or Stack)","Navigation bars or toolbars (use a dedicated nav component)","Content that must not wrap (use inline layout)"],"guidelines":["Use columns=\"auto\" with minChildWidth for grids that adapt without breakpoints","Use responsive object { base: 1, md: 2, lg: 3 } when you need explicit control per breakpoint","Use fixed column counts when exact column control is needed and responsiveness is not required","Use Grid.Item with colSpan to create asymmetric layouts within a fixed grid","Keep gap consistent within a context — md is the default and works for most cases","Pass DOM attributes (id, role, aria-*, data-*, event handlers) directly to Grid and Grid.Item roots when needed"],"accessibility":["Grid is purely visual — it does not affect reading order or semantics","Ensure logical source order matches visual order for screen readers"]},"props":{"children":{"type":"node","description":"Grid items and content","required":false},"columns":{"type":"union","description":"Number of columns: a number (1-12), a responsive object { base, sm, md, lg, xl }, or \"auto\" for auto-fill","default":"1","required":false,"constraints":["Use \"auto\" with minChildWidth for fully fluid layouts","Use responsive object for explicit breakpoint control: { base: 1, md: 2, lg: 3 }"]},"minChildWidth":{"type":"string","description":"Minimum width for auto-fill columns (e.g., \"16rem\", \"250px\")","required":false,"constraints":["Only applies when columns=\"auto\""]},"gap":{"type":"union","description":"Gap between grid items. Accepts string tokens or numbers (1-8) mapped to the spacing scale","default":"md","required":false,"values":["none","xs","sm","md","lg","xl"]},"alignItems":{"type":"enum","description":"Vertical alignment of items within their cells","required":false,"values":["start","center","end","stretch"]},"justifyItems":{"type":"enum","description":"Horizontal alignment of items within their cells","required":false,"values":["start","center","end","stretch"]},"padding":{"type":"enum","description":"Internal padding of the grid container","default":"none","required":false,"values":["none","sm","md","lg"]},"className":{"type":"string","description":"Additional class name","required":false},"style":{"type":"object","description":"Inline styles","required":false}},"relations":[{"component":"Card","relationship":"child","note":"Grid commonly contains Card components for dashboard and tile layouts"},{"component":"Separator","relationship":"sibling","note":"Use Separator between grid sections"}],"variants":[{"name":"Default","description":"Basic 3-column grid","code":"<Grid columns={3} gap=\"md\">\n  <div style={{ padding: 'var(--fui-space-2)', background: 'var(--fui-bg-secondary)' }}>Item 1</div>\n  <div style={{ padding: 'var(--fui-space-2)', background: 'var(--fui-bg-secondary)' }}>Item 2</div>\n  <div style={{ padding: 'var(--fui-space-2)', background: 'var(--fui-bg-secondary)' }}>Item 3</div>\n</Grid>"},{"name":"Responsive","description":"1 column on mobile, 2 on tablet, 3 on desktop","code":"<Grid columns={{ base: 1, md: 2, lg: 3 }} gap=\"md\">\n  <div style={{ padding: 'var(--fui-space-2)', background: 'var(--fui-bg-secondary)' }}>Card 1</div>\n  <div style={{ padding: 'var(--fui-space-2)', background: 'var(--fui-bg-secondary)' }}>Card 2</div>\n  <div style={{ padding: 'var(--fui-space-2)', background: 'var(--fui-bg-secondary)' }}>Card 3</div>\n</Grid>"},{"name":"Auto-fill","description":"Responsive grid that auto-fills based on minimum child width","code":"<Grid columns=\"auto\" minChildWidth=\"12rem\" gap=\"md\">\n  <div style={{ padding: 'var(--fui-space-2)', background: 'var(--fui-bg-secondary)' }}>Card 1</div>\n  <div style={{ padding: 'var(--fui-space-2)', background: 'var(--fui-bg-secondary)' }}>Card 2</div>\n  <div style={{ padding: 'var(--fui-space-2)', background: 'var(--fui-bg-secondary)' }}>Card 3</div>\n  <div style={{ padding: 'var(--fui-space-2)', background: 'var(--fui-bg-secondary)' }}>Card 4</div>\n</Grid>"},{"name":"Numeric Gap","description":"Using number values (1-8) mapped to the spacing scale","code":"<Grid columns={3} gap={4}>\n  <div style={{ padding: 'var(--fui-space-2)', background: 'var(--fui-bg-secondary)' }}>Gap 4</div>\n  <div style={{ padding: 'var(--fui-space-2)', background: 'var(--fui-bg-secondary)' }}>Gap 4</div>\n  <div style={{ padding: 'var(--fui-space-2)', background: 'var(--fui-bg-secondary)' }}>Gap 4</div>\n</Grid>"},{"name":"With Spanning","description":"Grid items spanning multiple columns","code":"<Grid columns={4} gap=\"md\">\n  <Grid.Item colSpan={2}>\n    <div style={{ padding: 'var(--fui-space-2)', background: 'var(--fui-bg-secondary)' }}>Spans 2 cols</div>\n  </Grid.Item>\n  <div style={{ padding: 'var(--fui-space-2)', background: 'var(--fui-bg-secondary)' }}>1 col</div>\n  <div style={{ padding: 'var(--fui-space-2)', background: 'var(--fui-bg-secondary)' }}>1 col</div>\n  <Grid.Item colSpan=\"full\">\n    <div style={{ padding: 'var(--fui-space-2)', background: 'var(--fui-bg-secondary)' }}>Full width</div>\n  </Grid.Item>\n</Grid>"},{"name":"Form Layout","description":"Two-column form that collapses to single column on mobile","code":"<Grid columns={{ base: 1, md: 2 }} gap=\"md\">\n  <div style={{ padding: 'var(--fui-space-1)', background: 'var(--fui-bg-secondary)' }}>First Name</div>\n  <div style={{ padding: 'var(--fui-space-1)', background: 'var(--fui-bg-secondary)' }}>Last Name</div>\n  <Grid.Item colSpan=\"full\">\n    <div style={{ padding: 'var(--fui-space-1)', background: 'var(--fui-bg-secondary)' }}>Email Address</div>\n  </Grid.Item>\n</Grid>"}],"contract":{"propsSummary":["columns: 1-12 | { base, sm, md, lg, xl } | \"auto\" (default: 1)","minChildWidth: string — min width for auto-fill (only with columns=\"auto\")","gap: none|xs|sm|md|lg|xl|number (default: md, number maps to space scale)","alignItems: start|center|end|stretch — vertical alignment","justifyItems: start|center|end|stretch — horizontal alignment","padding: none|sm|md|lg (default: none)","Pass-through DOM props supported on Grid and Grid.Item roots (id, role, aria-*, data-*, handlers)"]},"propsSummary":["children: node","columns: union (default: 1)","minChildWidth: string","gap: union (default: md)","alignItems: start|center|end|stretch","justifyItems: start|center|end|stretch","padding: none|sm|md|lg (default: none)","className: string","style: object"],"sourcePath":"src/components/Grid/index.tsx","exportName":"Grid","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:57.444Z"},"performance":{"bundleSize":1996,"rawSize":4844,"complexity":"lightweight","budgetPercent":13,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"src/utils/layout-spacing.ts","bytes":2696,"percent":56},{"path":"Grid (self)","bytes":1575,"percent":33}]}},"Input":{"filePath":"src/components/Input/index.tsx","meta":{"name":"Input","description":"Text input field for single-line user data entry","category":"forms","tags":["form","input","text"],"status":"stable"},"usage":{"when":["Collecting single-line text data from users","Email, password, phone number, or URL input","Search fields","Short form fields (name, title, etc.)"],"whenNot":["Multi-line text (use Textarea)","Selecting from predefined options (use Select)","Boolean input (use Checkbox or Switch)","Date/time input (use DatePicker)"],"guidelines":["Always provide a label for accessibility","Use appropriate input type for data validation","Show validation errors with error prop and helperText","Use placeholder for format hints, not labels","Use the shortcut prop for embedded keyboard hints instead of custom kbd markup around inputs","Shortcut hints are display-only by default; set shortcutBehavior=\"focus-input\" to opt into global hotkey focusing"],"accessibility":["Labels must be associated with inputs","Error messages should be announced to screen readers","Required fields should be indicated"]},"props":{"value":{"type":"string","description":"Current input value (controlled)","required":false},"defaultValue":{"type":"string","description":"Default value for uncontrolled usage","required":false},"placeholder":{"type":"string","description":"Placeholder text shown when empty","required":false,"constraints":["Use for format hints only, not as a replacement for labels"]},"type":{"type":"enum","description":"HTML input type for validation and keyboard","default":"text","required":false,"values":["number","text","email","password","tel","url"]},"size":{"type":"enum","description":"Size variant","default":"\"md\"","required":false,"values":["sm","md","lg"]},"disabled":{"type":"boolean","description":"Whether the input is interactive","default":"false","required":false},"error":{"type":"boolean","description":"Whether to show error styling","default":"false","required":false},"success":{"type":"boolean","description":"Whether to show success/validated styling","default":"false","required":false},"label":{"type":"string","description":"Label text displayed above input","required":false},"required":{"type":"boolean","description":"Whether the field is required (shows asterisk)","default":"false","required":false},"helperText":{"type":"string","description":"Helper or error message below input","required":false},"startAdornment":{"type":"node","description":"Content rendered before the input (icon or prefix text)","required":false},"endAdornment":{"type":"node","description":"Content rendered after the input (icon or suffix text)","required":false},"shortcut":{"type":"string","description":"Keyboard shortcut hint displayed as a visual kbd token inside the input","required":false},"shortcutBehavior":{"type":"enum","description":"Whether shortcut hint is visual only or also registers a global focus hotkey","default":"display-only","required":false,"values":["display-only","focus-input"]},"onChange":{"type":"function","description":"Called with new value on change","required":false},"onValueChange":{"type":"function","description":"Value-first change callback alias: (value: string) => void","required":false},"onBlur":{"type":"function","description":"","required":false},"onFocus":{"type":"function","description":"","required":false},"onKeyDown":{"type":"function","description":"","required":false},"rootProps":{"type":"object","description":"HTML attributes applied to the wrapper element","required":false},"inputStyle":{"type":"object","description":"Inline styles applied directly to the input element","required":false},"inputClassName":{"type":"string","description":"Class name applied directly to the input element","required":false},"withFieldWrapper":{"type":"boolean","description":"Render built-in label/helper wrapper (set false for Field composition or bare input rendering)","default":"true","required":false},"className":{"type":"string","description":"Wrapper class name","required":false},"style":{"type":"object","description":"Wrapper styles","required":false}},"relations":[{"component":"Textarea","relationship":"alternative","note":"Use Textarea for multi-line text input"},{"component":"Select","relationship":"alternative","note":"Use Select when choosing from predefined options"},{"component":"Field","relationship":"parent","note":"Use Field for advanced form composition and custom controls"}],"variants":[{"name":"Default","description":"Basic text input","code":"<Input label=\"Name\" placeholder=\"Enter your name\" />"},{"name":"With Value","description":"Input with pre-filled value","code":"<Input label=\"Email\" type=\"email\" value=\"user@example.com\" />"},{"name":"With Helper","description":"Input with helper text","code":"<Input\n  label=\"Password\"\n  type=\"password\"\n  placeholder=\"Create a password\"\n  helperText=\"Must be at least 8 characters\"\n/>"},{"name":"Error State","description":"Input showing validation error","code":"<Input\n  label=\"Email\"\n  type=\"email\"\n  value=\"invalid-email\"\n  error\n  helperText=\"Please enter a valid email address\"\n/>"},{"name":"Disabled","description":"Non-interactive input","code":"<Input label=\"Username\" value=\"readonly-user\" disabled />"},{"name":"Required","description":"Required field with asterisk indicator","code":"<Input\n  label=\"Email\"\n  type=\"email\"\n  placeholder=\"user@example.com\"\n  required\n/>"},{"name":"Sizes","description":"Available size variants","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '12px', maxWidth: '300px' }}>\n  <Input label=\"Small\" size=\"sm\" placeholder=\"Small input\" />\n  <Input label=\"Medium\" size=\"md\" placeholder=\"Medium input\" />\n  <Input label=\"Large\" size=\"lg\" placeholder=\"Large input\" />\n</div>"},{"name":"Bare Input (Field Composition)","description":"Disable the built-in wrapper for custom Field composition","code":"<Input\n  withFieldWrapper={false}\n  aria-label=\"Search\"\n  placeholder=\"Search...\"\n  rootProps={{ 'data-demo': 'bare-input-wrapper' }}\n/>"},{"name":"Shortcut Focus Hotkey","description":"Display shortcut hint and opt into focus behavior","code":"<Input\n  label=\"Command Palette\"\n  placeholder=\"Search commands\"\n  shortcut=\"⌘K\"\n  shortcutBehavior=\"focus-input\"\n/>"},{"name":"Search With Shortcut","description":"Search input with a leading icon and embedded kbd hint","code":"<Input\n  aria-label=\"Search findings\"\n  placeholder=\"Search findings...\"\n  shortcut=\"⌘K\"\n  shortcutBehavior=\"focus-input\"\n  startAdornment={<MagnifyingGlass aria-hidden=\"true\" />}\n  withFieldWrapper={false}\n/>"},{"name":"Success State","description":"Input showing validated/success styling","code":"<Input\n  label=\"Email\"\n  type=\"email\"\n  value=\"user@example.com\"\n  success\n  helperText=\"Email verified\"\n/>"},{"name":"With Start Adornment","description":"Input with icon or prefix before the text","code":"<Input\n  label=\"Price\"\n  placeholder=\"0.00\"\n  startAdornment={<span>$</span>}\n/>"},{"name":"With End Adornment","description":"Input with icon or suffix after the text","code":"<Input\n  label=\"Weight\"\n  placeholder=\"0\"\n  endAdornment={<span>kg</span>}\n/>"}],"contract":{"propsSummary":["type: text|email|password|number|tel|url (default: text)","value: string - controlled input value","label: string - accessible label text","placeholder: string - format hint only","disabled: boolean - disables interaction","required: boolean - required field indicator","error: boolean - shows error styling","success: boolean - shows success/validated styling","startAdornment: ReactNode - content before the input (icon or prefix)","endAdornment: ReactNode - content after the input (icon or suffix)","shortcut: string - visual kbd hint inside the input; do not hand-roll extra kbd markup","helperText: string - helper/error message","onValueChange: (value: string) => void - value-first change callback alias","rootProps: HTMLAttributes<HTMLDivElement> - wrapper element props","withFieldWrapper: boolean - toggle built-in wrapper/label rendering (default: true)","shortcutBehavior: display-only|focus-input (default: display-only)","...native input attributes are supported (autoComplete, required, inputMode, pattern, etc.)"],"a11yRules":["A11Y_INPUT_LABEL","A11Y_INPUT_ERROR","A11Y_INPUT_REQUIRED"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["value: string","defaultValue: string","placeholder: string","type: number|text|email|password|tel|url (default: text)","size: sm|md|lg (default: md)","disabled: boolean (default: false)","error: boolean (default: false)","success: boolean (default: false)","label: string","required: boolean (default: false)","helperText: string","startAdornment: node","endAdornment: node","shortcut: string","shortcutBehavior: display-only|focus-input (default: display-only)","onChange: function","onValueChange: function","onBlur: function","onFocus: function","onKeyDown: function","rootProps: object","inputStyle: object","inputClassName: string","withFieldWrapper: boolean (default: true)","className: string","style: object"],"sourcePath":"src/components/Input/index.tsx","exportName":"Input","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:59.208Z"},"performance":{"bundleSize":1723,"rawSize":3914,"complexity":"lightweight","budgetPercent":11,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Input (self)","bytes":3004,"percent":77},{"path":"ComponentDefaults","bytes":198,"percent":5},{"path":"src/utils/aria.ts","bytes":110,"percent":3}]}},"Image":{"filePath":"src/components/Image/index.tsx","meta":{"name":"Image","description":"Responsive image component with aspect ratio control, loading states, and error fallbacks. Handles image display with consistent styling.","category":"display","tags":["image","media","photo","picture","visual"],"status":"stable"},"usage":{"when":["Displaying product images in cards or grids","Hero images with specific aspect ratios","User-uploaded content that may fail to load","Thumbnails in lists or galleries"],"whenNot":["User avatars (use Avatar component)","Icons or symbols (use Icon component)","Background images (use CSS background-image)","SVG illustrations (use inline SVG or Image component)"],"guidelines":["Always provide meaningful alt text for accessibility","Use appropriate aspect ratios for consistent layouts","Provide fallback content for failed loads","Use objectFit=\"contain\" for logos to preserve aspect ratio","Use imgProps / onImageLoad / onImageError when you need lower-level img control"],"accessibility":["Alt text is required and must describe the image content","Decorative images should have empty alt=\"\"","Avoid text in images; if necessary, describe the text in alt","Ensure sufficient contrast between image and surrounding content"]},"props":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for accessibility (required)","required":true},"aspectRatio":{"type":"enum","description":"Aspect ratio of the image container","default":"auto","required":false,"values":["1:1","4:3","16:9","21:9","auto"]},"objectFit":{"type":"enum","description":"How the image fits within its container","default":"cover","required":false,"values":["cover","contain","fill","none"]},"width":{"type":"union","description":"Width of the image container","required":false},"height":{"type":"union","description":"Height of the image container","required":false},"rounded":{"type":"enum","description":"Border radius","default":"none","required":false,"values":["none","sm","md","lg","full"]},"fallback":{"type":"node","description":"Content to show while loading or on error","required":false},"className":{"type":"string","description":"Additional class name","required":false},"style":{"type":"object","description":"Inline styles","required":false},"imgProps":{"type":"object","description":"Additional props for the underlying img element (except src/alt/size/style/events)","required":false},"onImageLoad":{"type":"function","description":"Called when the underlying img element loads","required":false},"onImageError":{"type":"function","description":"Called when the underlying img element fails to load","required":false}},"relations":[{"component":"Card","relationship":"child","note":"Common pattern to use Image at top of product cards"},{"component":"Avatar","relationship":"alternative","note":"Use Avatar for user profile pictures"}],"variants":[{"name":"Default","description":"Basic image display","code":"<Image\n  src=\"https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400&h=300&fit=crop\"\n  alt=\"Code on a screen\"\n  width={300}\n/>"},{"name":"Aspect Ratios","description":"Different aspect ratio options","code":"<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>\n  <Image\n    src=\"https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=200&h=200&fit=crop\"\n    alt=\"Square image\"\n    aspectRatio=\"1:1\"\n    width={100}\n  />\n  <Image\n    src=\"https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=200&h=150&fit=crop\"\n    alt=\"4:3 image\"\n    aspectRatio=\"4:3\"\n    width={120}\n  />\n  <Image\n    src=\"https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=320&h=180&fit=crop\"\n    alt=\"16:9 image\"\n    aspectRatio=\"16:9\"\n    width={160}\n  />\n</div>"},{"name":"Rounded Corners","description":"Border radius options","code":"<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>\n  <Image\n    src=\"https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=100&h=100&fit=crop\"\n    alt=\"No rounding\"\n    rounded=\"none\"\n    width={80}\n    height={80}\n  />\n  <Image\n    src=\"https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=100&h=100&fit=crop\"\n    alt=\"Medium rounding\"\n    rounded=\"md\"\n    width={80}\n    height={80}\n  />\n  <Image\n    src=\"https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=100&h=100&fit=crop\"\n    alt=\"Full rounding\"\n    rounded=\"full\"\n    width={80}\n    height={80}\n  />\n</div>"},{"name":"With Fallback","description":"Fallback content for loading/error states","code":"<Image\n  src=\"https://invalid-url.example/image.jpg\"\n  alt=\"Image that will fail\"\n  width={200}\n  height={150}\n  rounded=\"md\"\n  fallback={\n    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', background: 'var(--fui-color-surface-secondary)' }}>\n      <span style={{ color: 'var(--fui-color-text-tertiary)' }}>No image</span>\n    </div>\n  }\n/>"}],"contract":{"propsSummary":["src: string - image URL (required)","alt: string - accessibility text (required)","aspectRatio: 1:1|4:3|16:9|21:9|auto - container ratio","objectFit: cover|contain|fill|none - image fitting","rounded: none|sm|md|lg|full - border radius","fallback: ReactNode - loading/error content","imgProps/onImageLoad/onImageError - low-level img customization and events"],"a11yRules":["A11Y_IMG_ALT","A11Y_IMG_DECORATIVE"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["src: string (required)","alt: string (required)","aspectRatio: 1:1|4:3|16:9|21:9|auto (default: auto)","objectFit: cover|contain|fill|none (default: cover)","width: union","height: union","rounded: none|sm|md|lg|full (default: none)","fallback: node","className: string","style: object","imgProps: object","onImageLoad: function","onImageError: function"],"sourcePath":"src/components/Image/index.tsx","exportName":"Image","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:59.379Z"},"performance":{"bundleSize":972,"rawSize":1781,"complexity":"lightweight","budgetPercent":6,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Image (self)","bytes":1194,"percent":67}]}},"List":{"filePath":"src/components/List/index.tsx","meta":{"name":"List","description":"Compound component for rendering ordered or unordered lists with consistent styling. Supports bullet, numbered, and icon-prefixed items.","category":"display","tags":["list","items","bullet","ordered","unordered"],"status":"stable"},"usage":{"when":["Feature lists with checkmarks or icons","Ordered steps or instructions","Navigation lists in sidebars","Pricing plan feature comparisons"],"whenNot":["Interactive selection lists (use Menu or Select)","Data tables with columns (use Table)","Cards in a grid (use Grid with Card)","Navigation tabs (use Tabs)"],"guidelines":["Use as=\"ol\" for sequential or numbered content","Use variant=\"icon\" with meaningful icons for feature lists","Keep list items concise and parallel in structure","Use consistent icons within a single list"],"accessibility":["Use semantic list elements (ul, ol) for screen reader support","List items are automatically announced with count","Icons are decorative; ensure text conveys meaning","Avoid deeply nested lists (3+ levels)"]},"props":{"children":{"type":"node","description":"List.Item components","required":true},"as":{"type":"enum","description":"List type","default":"ul","required":false,"values":["ul","ol"]},"variant":{"type":"enum","description":"List style variant","default":"disc","required":false,"values":["none","disc","decimal","icon"]},"gap":{"type":"enum","description":"Spacing between items","default":"sm","required":false,"values":["none","xs","sm","md","lg"]},"style":{"type":"object","description":"","required":false}},"relations":[{"component":"Icon","relationship":"child","note":"Use Icon as List.Item icon prop"},{"component":"Stack","relationship":"alternative","note":"Use Stack for non-semantic vertical lists"}],"variants":[{"name":"Bullet List","description":"Default unordered list with bullets","code":"<List variant=\"disc\">\n  <List.Item>First item</List.Item>\n  <List.Item>Second item</List.Item>\n  <List.Item>Third item</List.Item>\n</List>"},{"name":"Numbered List","description":"Ordered list with numbers","code":"<List as=\"ol\" variant=\"decimal\">\n  <List.Item>Create your account</List.Item>\n  <List.Item>Configure your settings</List.Item>\n  <List.Item>Start building</List.Item>\n</List>"},{"name":"Icon List","description":"List with custom icons per item","code":"<List variant=\"icon\">\n  <List.Item icon={<Check weight=\"bold\" color=\"var(--fui-color-success)\" />}>\n    Unlimited projects\n  </List.Item>\n  <List.Item icon={<Check weight=\"bold\" color=\"var(--fui-color-success)\" />}>\n    Priority support\n  </List.Item>\n  <List.Item icon={<Check weight=\"bold\" color=\"var(--fui-color-success)\" />}>\n    Advanced analytics\n  </List.Item>\n</List>"},{"name":"No Style","description":"Plain list without markers","code":"<List variant=\"none\" gap=\"md\">\n  <List.Item>Dashboard</List.Item>\n  <List.Item>Settings</List.Item>\n  <List.Item>Profile</List.Item>\n</List>"}],"contract":{"propsSummary":["children: List.Item[] - list items (required)","as: ul|ol - list type","variant: none|disc|decimal|icon - list style","gap: none|xs|sm|md|lg - item spacing"],"a11yRules":["A11Y_LIST_SEMANTIC","A11Y_LIST_NESTING"]},"ai":{"compositionPattern":"compound","subComponents":["Item"],"commonPatterns":["<List>\n  <List.Item>...</List.Item>\n</List>"],"requiredChildren":["Item"]},"propsSummary":["children: node (required)","as: ul|ol (default: ul)","variant: none|disc|decimal|icon (default: disc)","gap: none|xs|sm|md|lg (default: sm)","style: object"],"sourcePath":"src/components/List/index.tsx","exportName":"List","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:59.915Z"},"performance":{"bundleSize":751,"rawSize":1503,"complexity":"lightweight","budgetPercent":5,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"List (self)","bytes":869,"percent":58}]}},"Link":{"filePath":"src/components/Link/index.tsx","meta":{"name":"Link","description":"Styled anchor element for navigation. Supports internal and external links with consistent visual treatment.","category":"navigation","tags":["link","anchor","navigation","href","url"],"status":"stable"},"usage":{"when":["Inline text links within paragraphs","Navigation links in footers or sidebars","\"Forgot password?\" or \"Sign up\" links in forms","External links to documentation or resources"],"whenNot":["Primary call-to-action (use Button instead)","Navigation tabs (use Tabs component)","Menu items in dropdowns (use Menu component)","Cards that link to detail pages should still use real link semantics (Link or anchor inside Card)"],"guidelines":["Link text should describe the destination, not \"click here\"","Use external prop for links that open in new tabs","Use subtle variant for secondary/contextual links","Ensure links are distinguishable from regular text","When using asChild, Link composes event handlers with the child instead of overwriting them"],"accessibility":["Link text must be descriptive of the destination","External links should indicate they open in new window","Links must have visible focus indicators","Avoid using links that look like buttons without button semantics"]},"props":{"children":{"type":"node","description":"Link text content","required":true},"variant":{"type":"enum","description":"Visual style variant","default":"default","required":false,"values":["default","subtle","muted"]},"underline":{"type":"enum","description":"Underline behavior","default":"hover","required":false,"values":["always","hover","none"]},"external":{"type":"boolean","description":"Opens in new tab with noopener noreferrer","default":"false","required":false},"asChild":{"type":"boolean","description":"Render as child element (polymorphic). Merges link props/classes and composes event handlers onto the single child (e.g. Next.js Link).","default":"false","required":false},"className":{"type":"string","description":"Additional class name","required":false},"style":{"type":"object","description":"Inline styles","required":false},"target":{"type":"union","description":"","required":false},"rel":{"type":"string","description":"","required":false}},"relations":[{"component":"Button","relationship":"alternative","note":"Use Button for primary actions, Link for navigation"},{"component":"Text","relationship":"parent","note":"Links often appear within Text components"}],"variants":[{"name":"Default","description":"Standard link with hover underline","code":"<Link href=\"#\">Learn more about our services</Link>"},{"name":"Variants","description":"Visual style options","code":"<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>\n  <Link href=\"#\" variant=\"default\">Default</Link>\n  <Link href=\"#\" variant=\"subtle\">Subtle</Link>\n  <Link href=\"#\" variant=\"muted\">Muted</Link>\n</div>"},{"name":"Underline Styles","description":"Different underline behaviors","code":"<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>\n  <Link href=\"#\" underline=\"always\">Always underlined</Link>\n  <Link href=\"#\" underline=\"hover\">Underline on hover</Link>\n  <Link href=\"#\" underline=\"none\">No underline</Link>\n</div>"},{"name":"External Link","description":"Link that opens in new tab","code":"<Link href=\"https://example.com\" external>\n  View documentation ↗\n</Link>"},{"name":"As Child (Polymorphic)","description":"Renders as a custom element while applying Link styles and composing handlers. Useful with Next.js Link for client-side navigation.","code":"<Link asChild variant=\"subtle\" onClick={() => {}}>\n  <button type=\"button\" onClick={() => alert('Navigated!')}>\n    Polymorphic link as button\n  </button>\n</Link>"}],"contract":{"propsSummary":["children: ReactNode - link text (required)","href: string - destination URL","variant: default|subtle|muted - visual style","underline: always|hover|none - underline behavior","external: boolean - opens in new tab","asChild: boolean - polymorphic child rendering with merged styles and composed event handlers"],"a11yRules":["A11Y_LINK_TEXT","A11Y_LINK_FOCUS"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["children: node (required)","variant: default|subtle|muted (default: default)","underline: always|hover|none (default: hover)","external: boolean (default: false)","asChild: boolean (default: false)","className: string","style: object","target: union","rel: string"],"sourcePath":"src/components/Link/index.tsx","exportName":"Link","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:59.546Z"},"performance":{"bundleSize":819,"rawSize":1449,"complexity":"lightweight","budgetPercent":5,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Link (self)","bytes":876,"percent":60}]}},"Loading":{"filePath":"src/components/Loading/index.tsx","meta":{"name":"Loading","description":"Versatile loading indicator with multiple variants for showing progress or waiting states","category":"feedback","tags":["loading","spinner","progress","feedback","indicator","async"],"status":"stable"},"usage":{"when":["Indicating content is being fetched or processed","Showing a pending state while waiting for an async operation","Displaying loading state for buttons, forms, or page sections","Full-screen loading during initial app/page load"],"whenNot":["For showing determinate progress - use Progress component instead","For showing skeleton placeholders - use Skeleton component instead","For AI-specific thinking states - use ThinkingIndicator instead"],"guidelines":["Use spinner variant for general loading states","Use dots variant for chat/messaging contexts","Use pulse variant for subtle, ambient loading","Always provide a meaningful label for screen readers","Consider using Loading.Screen for initial page loads","Use Loading.Inline when loading indicator should flow with text"],"accessibility":["Component uses role=\"status\" and aria-live=\"polite\"","Always provide descriptive label prop for screen readers","Animations respect prefers-reduced-motion preference"]},"props":{"size":{"type":"enum","description":"Size of the loading indicator","default":"md","required":false,"values":["sm","md","lg","xl"]},"variant":{"type":"enum","description":"Visual style of the loading animation","default":"spinner","required":false,"values":["spinner","dots","pulse"]},"label":{"type":"string","description":"Accessible label for screen readers","default":"Loading...","required":false},"centered":{"type":"boolean","description":"Whether to center the loading indicator in its container","default":"false","required":false},"fill":{"type":"boolean","description":"Whether to fill the parent container","default":"false","required":false},"overlay":{"type":"boolean","description":"Whether to show with a backdrop overlay","default":"false","required":false},"color":{"type":"enum","description":"Color variant - accent uses theme color, current inherits text color","default":"accent","required":false,"values":["accent","current","muted"]}},"relations":[],"variants":[{"name":"Default","description":"Default spinner loading indicator","code":"<Loading />"},{"name":"Sizes","description":"Loading indicators in different sizes","code":"<div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>\n  <Loading size=\"sm\" />\n  <Loading size=\"md\" />\n  <Loading size=\"lg\" />\n  <Loading size=\"xl\" />\n</div>"},{"name":"Dots","description":"Bouncing dots animation","code":"<Loading variant=\"dots\" />"},{"name":"Pulse","description":"Pulsing circle animation","code":"<Loading variant=\"pulse\" />"},{"name":"Colors","description":"Different color variants","code":"<div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>\n  <Loading color=\"accent\" />\n  <Loading color=\"muted\" />\n  <span style={{ color: '#3b82f6' }}>\n    <Loading color=\"current\" />\n  </span>\n</div>"},{"name":"Inline","description":"Inline loading indicator that flows with text","code":"<p style={{ margin: 0 }}>\n  Processing your request <Loading.Inline /> please wait...\n</p>"},{"name":"Centered","description":"Centered in container","code":"<div style={{ width: '200px', height: '100px', border: '1px dashed #ccc', borderRadius: '8px' }}>\n  <Loading centered fill />\n</div>"},{"name":"Screen","description":"Full-screen loading state with optional label","code":"<div style={{ position: 'relative', width: '300px', height: '200px', border: '1px solid #ccc', borderRadius: '8px', overflow: 'hidden', transform: 'scale(1)' }}>\n  <Loading.Screen size=\"lg\" label=\"Loading application...\" showLabel />\n</div>"}],"contract":{"propsSummary":["size: sm|md|lg|xl (default: md)","variant: spinner|dots|pulse (default: spinner)","label: string (default: Loading...)","centered: boolean (default: false)","fill: boolean (default: false)","overlay: boolean (default: false)","color: accent|current|muted (default: accent)"]},"ai":{"compositionPattern":"compound","subComponents":["Inline","Screen"]},"propsSummary":["size: sm|md|lg|xl (default: md)","variant: spinner|dots|pulse (default: spinner)","label: string (default: Loading...)","centered: boolean (default: false)","fill: boolean (default: false)","overlay: boolean (default: false)","color: accent|current|muted (default: accent)"],"sourcePath":"src/components/Loading/index.tsx","exportName":"Loading","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:05.576Z"},"performance":{"bundleSize":1125,"rawSize":2669,"complexity":"lightweight","budgetPercent":7,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Loading (self)","bytes":2025,"percent":76}]}},"Main":{"filePath":"src/components/Main/index.tsx","meta":{"name":"Main","description":"Canonical page composition owning gutter, measure, and vertical rhythm.","category":"layout","tags":["main","page","layout","compound"],"status":"stable"},"usage":{"when":["Composing a page header, description, content, and footer"],"whenNot":["Application shell navigation (use AppShell)"],"guidelines":["Use one Main gutter owner per page","Compose page regions with Main.Header, Main.Description, Main.Content, and Main.Footer"],"accessibility":["Use the default main element unless an existing shell already owns the main landmark"]},"props":{"children":{"type":"node","description":"Page regions composed from Main.Header, Main.Description, Main.Content, and Main.Footer","required":true},"measure":{"type":"enum","description":"Maximum width applied to the page composition","default":"full","required":false,"values":["full","narrow"]},"as":{"type":"enum","description":"Semantic HTML element rendered by the root","default":"main","required":false,"values":["div","section","nav","article","aside","header","footer","main","ul","ol"]}},"relations":[],"variants":[{"name":"Full Measure","description":"Page composition that uses the full available canvas","code":"<Main measure=\"full\">\n  <Main.Header>Page statement</Main.Header>\n  <Main.Description>Supporting page context.</Main.Description>\n  <Main.Content>Page content</Main.Content>\n  <Main.Footer>Page actions</Main.Footer>\n</Main>"},{"name":"Narrow Measure","description":"Readable page composition constrained to the canonical 800px measure","code":"<Main measure=\"narrow\">\n  <Main.Header>Settings</Main.Header>\n  <Main.Description>Manage the workspace contract.</Main.Description>\n  <Main.Content>Settings content</Main.Content>\n  <Main.Footer>Save changes</Main.Footer>\n</Main>"}],"contract":{"propsSummary":["children: node (required)","measure: full|narrow (default: full)","as: semantic element (default: main)"]},"ai":{"compositionPattern":"compound","subComponents":["Header","Description","Content","Footer"],"commonPatterns":["<Main>\n  <Main.Header>...</Main.Header>\n  <Main.Description>...</Main.Description>\n  <Main.Content>...</Main.Content>\n  <Main.Footer>...</Main.Footer>\n</Main>"],"requiredChildren":["Header","Description","Content","Footer"]},"propsSummary":["children: node (required)","measure: full|narrow (default: full)","as: semantic element (default: main)"],"sourcePath":"src/components/Main/index.tsx","exportName":"Main","provenance":{"source":"manual","verified":true,"frameworkSupport":"native"},"performance":{"bundleSize":2441,"rawSize":6391,"complexity":"lightweight","budgetPercent":16,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Stack","bytes":4678,"percent":73},{"path":"Main (self)","bytes":1139,"percent":18}]}},"Listbox":{"filePath":"src/components/Listbox/index.tsx","meta":{"name":"Listbox","description":"Controlled listbox for search results, autocomplete dropdowns, and command menus. Provides Menu-like styling without requiring a trigger.","category":"forms","tags":["listbox","search","autocomplete","combobox","command","dropdown"],"status":"stable"},"usage":{"when":["Search result dropdowns","Autocomplete suggestions","Command palette results","Keyboard-navigable option lists"],"whenNot":["Static lists without selection (use List)","Action menus with trigger button (use Menu)","Form field selection (use Select)","Navigation menus (use Sidebar or Tabs)"],"guidelines":["Control open/close state externally based on input focus or query","Listbox provides arrow/home/end + Enter/Space keyboard navigation when focused","Use Listbox.Empty for no results state","Group related items with Listbox.Group when appropriate"],"accessibility":["Uses listbox and option ARIA roles","aria-selected indicates current selection","aria-disabled for non-interactive items","Connect to input with aria-controls for full combobox pattern"]},"props":{"children":{"type":"node","description":"Listbox.Item, Listbox.Group, or Listbox.Empty components","required":true},"style":{"type":"object","description":"","required":false},"tabIndex":{"type":"number","description":"","required":false},"onFocus":{"type":"function","description":"","required":false},"onKeyDown":{"type":"function","description":"","required":false}},"relations":[{"component":"Input","relationship":"sibling","note":"Pair with Input for search/autocomplete patterns"},{"component":"Menu","relationship":"alternative","note":"Use Menu when you need a trigger button"},{"component":"Select","relationship":"alternative","note":"Use Select for form field selection"},{"component":"List","relationship":"alternative","note":"Use List for static, non-interactive lists"}],"variants":[{"name":"Default","description":"Basic listbox with selectable items","code":"<Listbox aria-label=\"Options\">\n  <Listbox.Item selected>First option</Listbox.Item>\n  <Listbox.Item>Second option</Listbox.Item>\n  <Listbox.Item>Third option</Listbox.Item>\n</Listbox>"},{"name":"Search Results","description":"Typical search results pattern with label and metadata","code":"<Listbox aria-label=\"Search results\">\n  <Listbox.Item selected>\n    <span style={{ fontWeight: 500 }}>Button</span>\n    <span style={{ marginLeft: 'auto', fontSize: '0.75rem', color: 'var(--fui-text-tertiary)' }}>Components</span>\n  </Listbox.Item>\n  <Listbox.Item>\n    <span style={{ fontWeight: 500 }}>Badge</span>\n    <span style={{ marginLeft: 'auto', fontSize: '0.75rem', color: 'var(--fui-text-tertiary)' }}>Components</span>\n  </Listbox.Item>\n  <Listbox.Item>\n    <span style={{ fontWeight: 500 }}>Box</span>\n    <span style={{ marginLeft: 'auto', fontSize: '0.75rem', color: 'var(--fui-text-tertiary)' }}>Layout</span>\n  </Listbox.Item>\n</Listbox>"},{"name":"With Groups","description":"Grouped items with labels","code":"<Listbox aria-label=\"Commands\">\n  <Listbox.Group label=\"Recent\">\n    <Listbox.Item selected>Open file...</Listbox.Item>\n    <Listbox.Item>Save as...</Listbox.Item>\n  </Listbox.Group>\n  <Listbox.Group label=\"Actions\">\n    <Listbox.Item>Copy</Listbox.Item>\n    <Listbox.Item>Paste</Listbox.Item>\n    <Listbox.Item disabled>Cut</Listbox.Item>\n  </Listbox.Group>\n</Listbox>"},{"name":"Empty State","description":"No results found message","code":"<Listbox aria-label=\"Search results\">\n  <Listbox.Empty>No results found</Listbox.Empty>\n</Listbox>"},{"name":"With Disabled Items","description":"Mix of enabled and disabled items","code":"<Listbox aria-label=\"Options\">\n  <Listbox.Item>Available option</Listbox.Item>\n  <Listbox.Item disabled>Disabled option</Listbox.Item>\n  <Listbox.Item>Another option</Listbox.Item>\n</Listbox>"}],"contract":{"propsSummary":["children: ReactNode - Listbox.Item components (required)","aria-label: string - accessible label","Listbox.Item selected: boolean - highlight state","Listbox.Item disabled: boolean - non-interactive"],"a11yRules":["A11Y_LISTBOX_ROLE","A11Y_OPTION_ROLE"]},"ai":{"compositionPattern":"compound","subComponents":["Item","Group","Empty"],"requiredChildren":["Item"],"commonPatterns":["<Listbox aria-label=\"Search results\">{results.map(item => <Listbox.Item key={item.id} selected={item.id === selectedId} onClick={() => onSelect(item)}>{item.label}</Listbox.Item>)}</Listbox>"]},"propsSummary":["children: node (required)","style: object","tabIndex: number","onFocus: function","onKeyDown: function"],"sourcePath":"src/components/Listbox/index.tsx","exportName":"Listbox","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:05.924Z"},"performance":{"bundleSize":1661,"rawSize":3896,"complexity":"lightweight","budgetPercent":11,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Listbox (self)","bytes":3237,"percent":83}]}},"Message":{"filePath":"src/components/Message/index.tsx","meta":{"name":"Message","description":"Individual chat message display with role-based styling","category":"ai","tags":["message","chat","ai","conversation","bubble"],"status":"stable"},"usage":{"when":["Displaying individual messages in a chat interface","Building AI assistant or chatbot UIs","Need role-based message styling (user vs assistant)","Messages need actions like copy, regenerate, or feedback"],"whenNot":["Simple text display without chat context (use Text)","Notification-style messages (use Alert or Toast)","Comment threads with nested replies (use Card with custom layout)"],"guidelines":["Always provide a role prop to determine styling","Use status prop to show message state (sending, streaming, error)","Pass avatar={null}, or set showAvatars={false} on the parent ConversationList, to hide avatars; avatarless assistant content is flush while the user's own bubble keeps compact space-1/space-2 padding","User message bubbles are capped at 80% of the available inline measure so they remain visually distinct from assistant responses","User and assistant message chrome uses neutral surface tokens with the primary text foreground; reserve brand accent for actions or semantic state","Consider showing timestamps for longer conversations","Provide hover actions for assistant messages (copy, regenerate)"],"accessibility":["Uses semantic HTML for message structure","Role-based styling has sufficient color contrast","Actions are keyboard accessible","Streaming indicator respects reduced motion preferences"]},"props":{"role":{"type":"enum","description":"Message role determines styling and alignment","required":true,"values":["user","assistant","system"]},"children":{"type":"node","description":"Message content","required":true},"status":{"type":"enum","description":"Message state","default":"complete","required":false,"values":["sending","streaming","complete","error"]},"timestamp":{"type":"object","description":"When the message was sent","required":false},"avatar":{"type":"node","description":"Custom avatar override (null to hide)","required":false},"actions":{"type":"node","description":"Hover actions (copy, regenerate)","required":false}},"relations":[{"component":"ConversationList","relationship":"parent","note":"Messages are typically used within ConversationList"},{"component":"Avatar","relationship":"child","note":"Use Avatar component for custom avatar content"},{"component":"ThinkingIndicator","relationship":"sibling","note":"Show ThinkingIndicator while awaiting assistant response"}],"variants":[{"name":"User Message","description":"Message from the user (right-aligned)","code":"<Message role=\"user\">\n  <Message.Content>\n    Hello! Can you help me with a coding question?\n  </Message.Content>\n</Message>"},{"name":"Assistant Message","description":"Response from the AI assistant","code":"<Message role=\"assistant\">\n  <Message.Content>\n    Of course! I'd be happy to help. What would you like to know?\n  </Message.Content>\n</Message>"},{"name":"System Message","description":"System notification or context","code":"<Message role=\"system\">\n  <Message.Content>\n    Conversation started. Model: GPT-4\n  </Message.Content>\n</Message>"},{"name":"Streaming","description":"Message being streamed (with cursor)","code":"<Message role=\"assistant\" status=\"streaming\">\n  <Message.Content>\n    I'm currently generating a response for you\n  </Message.Content>\n</Message>"},{"name":"With Timestamp","description":"Message with timestamp display","code":"<Message role=\"assistant\" timestamp={new Date(Date.now() - 300000)}>\n  <Message.Content>\n    This message was sent 5 minutes ago.\n  </Message.Content>\n  <Message.Timestamp />\n</Message>"},{"name":"Error State","description":"Message that failed to send","code":"<Message role=\"user\" status=\"error\">\n  <Message.Content>\n    This message failed to send.\n  </Message.Content>\n</Message>"},{"name":"Custom Avatars","description":"Messages with image-based avatars","code":"<>\n  <Message\n    role=\"user\"\n    avatar={<Message.Avatar src=\"https://i.pravatar.cc/64?u=user\" alt=\"Jane\" />}\n  >\n    <Message.Content>\n      Can you help me understand this error?\n    </Message.Content>\n  </Message>\n  <Message\n    role=\"assistant\"\n    avatar={<Message.Avatar src=\"https://i.pravatar.cc/64?u=bot\" alt=\"AI Assistant\" />}\n  >\n    <Message.Content>\n      Sure! Let me take a look at that for you.\n    </Message.Content>\n  </Message>\n</>"},{"name":"With Actions","description":"Message with hover actions","code":"<Message\n  role=\"assistant\"\n  actions={\n    <>\n      <button style={{ padding: '4px 8px', fontSize: '12px' }}>Copy</button>\n      <button style={{ padding: '4px 8px', fontSize: '12px' }}>Regenerate</button>\n    </>\n  }\n>\n  <Message.Content>\n    Hover over this message to see the actions.\n  </Message.Content>\n</Message>"}],"contract":{"propsSummary":["role: \"user\" | \"assistant\" | \"system\" - determines styling","children: ReactNode - message content","status: \"sending\" | \"streaming\" | \"complete\" | \"error\" - message state","timestamp: Date - when message was sent","avatar: ReactNode - custom avatar (null to hide)","actions: ReactNode - hover actions","Avatar.src: string - image URL for avatar","Avatar.alt: string - alt text for image avatar"],"a11yRules":["A11Y_COLOR_CONTRAST","A11Y_MOTION_PREFERENCE"]},"ai":{"compositionPattern":"compound","subComponents":["Content","Actions","Timestamp","Avatar"],"commonPatterns":["<Message>\n  <Message.Content>...</Message.Content>\n</Message>"],"requiredChildren":["Content"]},"propsSummary":["role: user|assistant|system (required)","children: node (required)","status: sending|streaming|complete|error (default: complete)","timestamp: object","avatar: node","actions: node"],"sourcePath":"src/components/Message/index.tsx","exportName":"Message","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:00.333Z"},"performance":{"bundleSize":53971,"rawSize":173860,"complexity":"heavy","budgetPercent":351,"overBudget":true,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Markdown","bytes":161803,"percent":93},{"path":"ConversationList","bytes":4739,"percent":3},{"path":"Avatar","bytes":3348,"percent":2},{"path":"Message (self)","bytes":3092,"percent":2}]}},"Menu":{"filePath":"src/components/Menu/index.tsx","meta":{"name":"Menu","description":"Dropdown menu for actions and commands. Supports submenus, check items, radio groups, and keyboard shortcuts.","category":"feedback","tags":["menu","dropdown","actions","context-menu","commands","submenu"],"status":"stable"},"usage":{"when":["Overflow actions that dont fit in the toolbar","Context menus (right-click)","User account menus","Grouped actions with separators","Nested menus with submenus"],"whenNot":["Selecting from options (use Select)","Navigation (use Tabs or navigation components)","Form selection (use Select or RadioGroup)"],"guidelines":["Group related actions with Menu.Group","Use separators to divide action categories","Include keyboard shortcuts where applicable","Use danger variant for destructive actions","Keep menu items under 10-12 for usability","Use checked prop on Menu.Item for simple selection state","Use Menu.Submenu for nested secondary options","Menu.Trigger supports asChild for links/router-link components (single valid element child required)"],"accessibility":["Full keyboard navigation with arrow keys","Type-ahead search for items","Focus returns to trigger on close","Proper ARIA menu roles","ArrowRight opens submenus, ArrowLeft closes them"]},"props":{"children":{"type":"node","description":"Menu trigger and content","required":true},"open":{"type":"boolean","description":"Controlled open state","required":false},"defaultOpen":{"type":"boolean","description":"Default open state (uncontrolled)","default":"false","required":false},"onOpenChange":{"type":"function","description":"Called when open state changes","required":false},"modal":{"type":"boolean","description":"Whether menu is modal","default":"true","required":false}},"relations":[{"component":"Select","relationship":"alternative","note":"Use Select for form field selection"},{"component":"Popover","relationship":"alternative","note":"Use Popover for rich non-action content"}],"variants":[{"name":"Default","description":"Basic dropdown menu","code":"<Menu>\n  <Menu.Trigger asChild>\n    <Button variant=\"secondary\">Actions</Button>\n  </Menu.Trigger>\n  <Menu.Content>\n    <Menu.Item onSelect={() => {}}>Edit</Menu.Item>\n    <Menu.Item onSelect={() => {}}>Duplicate</Menu.Item>\n    <Menu.Separator />\n    <Menu.Item danger onSelect={() => {}}>Delete</Menu.Item>\n  </Menu.Content>\n</Menu>"},{"name":"With Shortcuts","description":"Menu items with keyboard shortcuts","code":"<Menu>\n  <Menu.Trigger asChild>\n    <Button variant=\"secondary\">Edit</Button>\n  </Menu.Trigger>\n  <Menu.Content>\n    <Menu.Item shortcut=\"Ctrl+Z\" onSelect={() => {}}>Undo</Menu.Item>\n    <Menu.Item shortcut=\"Ctrl+Y\" onSelect={() => {}}>Redo</Menu.Item>\n    <Menu.Separator />\n    <Menu.Item shortcut=\"Ctrl+C\" onSelect={() => {}}>Copy</Menu.Item>\n    <Menu.Item shortcut=\"Ctrl+V\" onSelect={() => {}}>Paste</Menu.Item>\n  </Menu.Content>\n</Menu>"},{"name":"With Groups","description":"Menu with labeled groups","code":"<Menu>\n  <Menu.Trigger asChild>\n    <Button variant=\"secondary\">Options</Button>\n  </Menu.Trigger>\n  <Menu.Content>\n    <Menu.Group>\n      <Menu.GroupLabel>View</Menu.GroupLabel>\n      <Menu.Item onSelect={() => {}}>Zoom In</Menu.Item>\n      <Menu.Item onSelect={() => {}}>Zoom Out</Menu.Item>\n    </Menu.Group>\n    <Menu.Separator />\n    <Menu.Group>\n      <Menu.GroupLabel>Layout</Menu.GroupLabel>\n      <Menu.Item onSelect={() => {}}>Grid View</Menu.Item>\n      <Menu.Item onSelect={() => {}}>List View</Menu.Item>\n    </Menu.Group>\n  </Menu.Content>\n</Menu>"},{"name":"With Checkboxes","description":"Menu with toggleable checkbox options","code":"<Menu>\n  <Menu.Trigger asChild>\n    <Button variant=\"secondary\">Display</Button>\n  </Menu.Trigger>\n  <Menu.Content>\n    <Menu.CheckboxItem defaultChecked>Show Grid</Menu.CheckboxItem>\n    <Menu.CheckboxItem defaultChecked>Show Rulers</Menu.CheckboxItem>\n    <Menu.CheckboxItem>Show Guides</Menu.CheckboxItem>\n  </Menu.Content>\n</Menu>"},{"name":"With Checked Items","description":"Filter menu with check marks indicating active selections","code":"<CheckedItemsMenuDemo />"},{"name":"With Submenu","description":"Menu with nested submenu for grouped secondary options","code":"<Menu>\n  <Menu.Trigger asChild>\n    <Button variant=\"secondary\">File</Button>\n  </Menu.Trigger>\n  <Menu.Content>\n    <Menu.Item onSelect={() => {}}>New File</Menu.Item>\n    <Menu.Item onSelect={() => {}}>Open</Menu.Item>\n    <Menu.Separator />\n    <Menu.Submenu>\n      <Menu.SubmenuTrigger>Export As</Menu.SubmenuTrigger>\n      <Menu.Content side=\"right\" align=\"start\">\n        <Menu.Item onSelect={() => {}}>PNG</Menu.Item>\n        <Menu.Item onSelect={() => {}}>SVG</Menu.Item>\n        <Menu.Item onSelect={() => {}}>PDF</Menu.Item>\n      </Menu.Content>\n    </Menu.Submenu>\n    <Menu.Separator />\n    <Menu.Item danger onSelect={() => {}}>Delete</Menu.Item>\n  </Menu.Content>\n</Menu>"},{"name":"Link Trigger","description":"Use asChild with a non-button trigger element","code":"<Menu>\n  <Menu.Trigger asChild>\n    <a href=\"#menu-actions\">Open menu</a>\n  </Menu.Trigger>\n  <Menu.Content>\n    <Menu.Item onSelect={() => {}}>Inspect</Menu.Item>\n    <Menu.Item onSelect={() => {}}>Rename</Menu.Item>\n  </Menu.Content>\n</Menu>"}],"contract":{"propsSummary":["open: boolean - controlled open state","onOpenChange: (open) => void - state handler","Menu.Trigger asChild supports non-button trigger elements","Menu.Item onSelect: (event) => void - selection callback receives click event","Menu.Item danger: boolean - destructive styling","Menu.Item shortcut: string - keyboard shortcut text","Menu.Item checked: boolean - check indicator for selection state"],"a11yRules":["A11Y_MENU_KEYBOARD","A11Y_MENU_ROLE"]},"ai":{"compositionPattern":"compound","subComponents":["Trigger","Content","Item","CheckboxItem","RadioGroup","RadioItem","Group","GroupLabel","Separator","Submenu","SubmenuTrigger"],"requiredChildren":["Trigger","Content"],"commonPatterns":["<Menu><Menu.Trigger asChild><Button>Actions</Button></Menu.Trigger><Menu.Content><Menu.Item>{action1}</Menu.Item><Menu.Separator /><Menu.Item danger>{delete}</Menu.Item></Menu.Content></Menu>"]},"propsSummary":["children: node (required)","open: boolean","defaultOpen: boolean","onOpenChange: function","modal: boolean (default: true)"],"sourcePath":"src/components/Menu/index.tsx","exportName":"Menu","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:00.159Z"},"performance":{"bundleSize":2603,"rawSize":7498,"complexity":"lightweight","budgetPercent":17,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Menu (self)","bytes":3945,"percent":53},{"path":"src/recipes/popup.ts","bytes":2748,"percent":37}]}},"Markdown":{"filePath":"src/components/Markdown/index.tsx","meta":{"name":"Markdown","description":"Renders markdown strings as styled prose using react-markdown and remark-gfm. Supports headings, lists, tables, code blocks, blockquotes, and more.","category":"display","tags":["markdown","prose","content","text","ai","chat"],"status":"stable","dependencies":[{"name":"react-markdown","version":">=9.0.0","reason":"Optional — parses markdown; without it content renders as plain paragraphs."},{"name":"remark-gfm","version":">=4.0.0","reason":"Optional — adds GitHub-flavored markdown (tables, strikethrough, task lists)."}]},"usage":{"when":["Rendering AI/LLM response content","Displaying user-authored markdown text","Showing documentation or readme content","Rich text display without a WYSIWYG editor"],"whenNot":["Plain text without formatting (use Text)","Editing markdown (use a markdown editor component)","Rendering trusted HTML directly (use dangerouslySetInnerHTML)"],"guidelines":["Install react-markdown and remark-gfm as peer dependencies","Use the components prop to override default element rendering","Content is sanitized by react-markdown by default","The parser is loaded on demand, so the first render on a page is the plain-text fallback and parsed output arrives a tick later; call Markdown.preload() at startup to skip that frame","Falls back to plain text paragraphs if react-markdown is not installed","Standard div props (id, style, aria-*, data-*) are forwarded to the Markdown wrapper"],"accessibility":["Rendered HTML follows semantic structure (headings, lists, tables)","Links are rendered as proper anchor elements","Images include alt text from markdown syntax","Tables use proper th/td structure for screen readers"]},"props":{"content":{"type":"string","description":"Markdown string to render","required":true},"components":{"type":"object","description":"Override map for markdown element components (e.g., { h1: MyHeading }). Accepts custom renderer component signatures used by react-markdown","required":false},"className":{"type":"string","description":"Additional CSS class name","required":false}},"relations":[{"component":"Text","relationship":"alternative","note":"Use Text for plain, non-markdown text"},{"component":"CodeBlock","relationship":"complementary","note":"CodeBlock can be used via components prop for syntax highlighting"},{"component":"Message","relationship":"parent","note":"Message wraps Markdown when markdown prop is true"}],"variants":[{"name":"Default","description":"Basic markdown with headings, paragraphs, inline code, lists, and blockquote","code":"<Markdown content={`# Hello World\n\nThis is a paragraph with **bold text** and *italic text*.\n\nHere is some \\`inline code\\` within a sentence.\n\n- First item\n- Second item\n- Third item\n\n> A blockquote for emphasis.\n`} />"},{"name":"GFM Table","description":"GitHub Flavored Markdown with tables and task lists","code":"<Markdown content={`## Data Overview\n\n| Feature    | Status    | Priority |\n|------------|-----------|----------|\n| Markdown   | Done      | High     |\n| Tables     | Done      | Medium   |\n| Task Lists | Planned   | Low      |\n\nNotes:\n- [x] Support GFM tables\n- [x] Support task lists\n- [ ] Syntax highlighting\n`} />"},{"name":"Code Block","description":"Markdown with fenced code blocks and inline code","code":"<Markdown content={`## Code Example\\n\\nHere is a JavaScript function:\\n\\n```js\\nfunction greet(name) {\\n  return \\`Hello, ${name}!\\`;\\n}\\n```\\n\\nAnd some inline code: \\`const x = 42;\\``} />"},{"name":"Mixed Content","description":"Complex markdown mixing headings, lists, tables, blockquotes, and task lists","code":"<Markdown content={`# Project Update\n\n## Summary\n\nThe project is progressing well. Here are the **key highlights**:\n\n1. Completed the *design system* components\n2. Added markdown rendering support\n3. Integrated with the documentation site\n\n### Performance Metrics\n\n| Metric      | Before | After |\n|-------------|--------|-------|\n| Bundle Size | 142kb  | 98kb  |\n| Load Time   | 1.2s   | 0.8s  |\n| Lighthouse  | 72     | 95    |\n\n> These improvements were achieved through tree-shaking and code splitting.\n\n### Next Steps\n\n- [ ] Add syntax highlighting\n- [ ] Support custom themes\n- [x] GFM table support\n`} />"}],"contract":{"propsSummary":["content: string - Markdown string to render","components: object - Override map for element components (react-markdown renderer components)","className: string - Additional CSS class","Forwards standard HTML div attributes to the wrapper element"],"a11yRules":["A11Y_SEMANTIC_HTML"]},"ai":{"compositionPattern":"compound","subComponents":["Root","preload"]},"propsSummary":["content: string (required)","components: object","className: string"],"sourcePath":"src/components/Markdown/index.tsx","exportName":"Markdown","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:06.091Z"},"performance":{"bundleSize":50128,"rawSize":162535,"complexity":"heavy","budgetPercent":326,"overBudget":true,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"react-markdown","bytes":120667,"percent":74},{"path":"remark-gfm","bytes":40158,"percent":25},{"path":"Markdown (self)","bytes":958,"percent":1}]}},"NavigationMenu":{"filePath":"src/components/NavigationMenu/index.tsx","meta":{"name":"NavigationMenu","description":"Rich navigation menu for site headers with dropdown content panels, animated viewport transitions, and automatic mobile drawer. Supports structured links with titles, descriptions, and icons.","category":"navigation","tags":["navigation","menu","header","dropdown","navbar","mobile","responsive","drawer"],"status":"stable"},"usage":{"when":["Site-level header navigation with rich dropdown content","Navigation with titles, descriptions, and icons in dropdowns","Responsive navigation that converts to a mobile drawer automatically","Multi-section navigation requiring animated viewport transitions"],"whenNot":["Simple flat navigation without dropdowns (use Header.Nav)","Application menus with actions like cut/paste (use Menu)","Sidebar navigation (use Sidebar)","Breadcrumb trail navigation (use Breadcrumbs)"],"guidelines":["Place inside Header component for site-level navigation","Use NavigationMenu.Viewport for animated content panel transitions","Use NavigationMenu.MobileContent to add extra sections to the mobile drawer","Use structured links (title + description) for rich dropdown content","Use simple NavigationMenu.Link for items without dropdown content","NavigationMenu.Link asChild composes click handlers and respects event.preventDefault()","Triggers open on hover (desktop) with configurable delay","Use the icons prop to replace trigger chevrons and mobile drawer controls with icons from any package"],"accessibility":["Uses disclosure pattern (not menu role) per W3C guidance","Keyboard: Arrow keys navigate between triggers, Enter/Space toggles, Escape closes","Content panels have role=\"region\" with aria-labelledby pointing to trigger","Mobile drawer has focus trap, Escape to close, and aria-modal","Supports prefers-reduced-motion for all animations"]},"props":{"children":{"type":"node","description":"NavigationMenu.List, NavigationMenu.Viewport, and optionally NavigationMenu.MobileContent","required":true},"value":{"type":"string","description":"Controlled open item value","required":false},"defaultValue":{"type":"string","description":"Default open item value","default":"''","required":false},"onValueChange":{"type":"function","description":"Callback when open item changes","required":false},"orientation":{"type":"enum","description":"'horizontal' | 'vertical'","default":"horizontal","required":false,"values":["horizontal","vertical"]},"delayDuration":{"type":"number","description":"Hover delay before opening (ms)","default":"200","required":false},"skipDelayDuration":{"type":"number","description":"Duration after close during which moving to another trigger opens instantly (ms)","default":"300","required":false},"icons":{"type":"object","description":"Optional icon overrides for triggerChevron, mobileMenu, mobileClose, and drawerClose controls","required":false}},"relations":[{"component":"Header","relationship":"sibling","note":"Place NavigationMenu inside Header for site navigation"},{"component":"Sidebar","relationship":"alternative","note":"Use Sidebar for persistent side navigation, NavigationMenu for header dropdowns"},{"component":"Menu","relationship":"alternative","note":"Use Menu for action menus (role=menu), NavigationMenu for site navigation (disclosure pattern)"},{"component":"Breadcrumbs","relationship":"sibling","note":"Use Breadcrumbs for hierarchical page trail, NavigationMenu for site-level navigation"}],"variants":[{"name":"Default","description":"Two trigger items with dropdown content and one direct link","code":"<NavigationMenu>\n  <NavigationMenu.List>\n    <NavigationMenu.Item value=\"products\">\n      <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>\n      <NavigationMenu.Content>\n        <NavigationMenu.Link href=\"/analytics\" title=\"Analytics\" description=\"Track your metrics and KPIs.\" />\n        <NavigationMenu.Link href=\"/automation\" title=\"Automation\" description=\"Automate your workflows.\" />\n      </NavigationMenu.Content>\n    </NavigationMenu.Item>\n    <NavigationMenu.Item value=\"resources\">\n      <NavigationMenu.Trigger>Resources</NavigationMenu.Trigger>\n      <NavigationMenu.Content>\n        <NavigationMenu.Link href=\"/docs\" title=\"Documentation\" description=\"Comprehensive API reference.\" />\n        <NavigationMenu.Link href=\"/blog\" title=\"Blog\" description=\"Latest news and updates.\" />\n      </NavigationMenu.Content>\n    </NavigationMenu.Item>\n    <NavigationMenu.Item>\n      <NavigationMenu.Link href=\"/pricing\">Pricing</NavigationMenu.Link>\n    </NavigationMenu.Item>\n  </NavigationMenu.List>\n  <NavigationMenu.Viewport />\n</NavigationMenu>"},{"name":"With Rich Content","description":"Grid layout with icons, titles, and descriptions","code":"<NavigationMenu>\n  <NavigationMenu.List>\n    <NavigationMenu.Item value=\"platform\">\n      <NavigationMenu.Trigger>Platform</NavigationMenu.Trigger>\n      <NavigationMenu.Content>\n        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px', padding: '8px', minWidth: '400px' }}>\n          <NavigationMenu.Link\n            href=\"/dashboard\"\n            title=\"Dashboard\"\n            description=\"Overview of your project metrics.\"\n          />\n          <NavigationMenu.Link\n            href=\"/analytics\"\n            title=\"Analytics\"\n            description=\"Deep dive into your data.\"\n          />\n          <NavigationMenu.Link\n            href=\"/reports\"\n            title=\"Reports\"\n            description=\"Generate custom reports.\"\n          />\n          <NavigationMenu.Link\n            href=\"/settings\"\n            title=\"Settings\"\n            description=\"Configure your workspace.\"\n          />\n        </div>\n      </NavigationMenu.Content>\n    </NavigationMenu.Item>\n  </NavigationMenu.List>\n  <NavigationMenu.Viewport />\n</NavigationMenu>"},{"name":"With Simple Links","description":"Mix of triggers with simple link lists and plain links","code":"<NavigationMenu>\n  <NavigationMenu.List>\n    <NavigationMenu.Item value=\"company\">\n      <NavigationMenu.Trigger>Company</NavigationMenu.Trigger>\n      <NavigationMenu.Content>\n        <div style={{ display: 'flex', flexDirection: 'column', padding: '4px', minWidth: '160px' }}>\n          <NavigationMenu.Link href=\"/about\">About</NavigationMenu.Link>\n          <NavigationMenu.Link href=\"/careers\">Careers</NavigationMenu.Link>\n          <NavigationMenu.Link href=\"/contact\">Contact</NavigationMenu.Link>\n        </div>\n      </NavigationMenu.Content>\n    </NavigationMenu.Item>\n    <NavigationMenu.Item>\n      <NavigationMenu.Link href=\"/blog\">Blog</NavigationMenu.Link>\n    </NavigationMenu.Item>\n    <NavigationMenu.Item>\n      <NavigationMenu.Link href=\"/docs\">Docs</NavigationMenu.Link>\n    </NavigationMenu.Item>\n  </NavigationMenu.List>\n  <NavigationMenu.Viewport />\n</NavigationMenu>"},{"name":"With Featured Card","description":"Highlighted featured item alongside regular links","code":"<NavigationMenu>\n  <NavigationMenu.List>\n    <NavigationMenu.Item value=\"learn\">\n      <NavigationMenu.Trigger>Learn</NavigationMenu.Trigger>\n      <NavigationMenu.Content>\n        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px', padding: '8px', minWidth: '420px' }}>\n          <NavigationMenu.Link\n            href=\"/quickstart\"\n            title=\"Quick Start\"\n            description=\"Get up and running in 5 minutes with our getting started guide.\"\n            featured\n          />\n          <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>\n            <NavigationMenu.Link href=\"/docs\" title=\"Documentation\" description=\"API reference and guides.\" />\n            <NavigationMenu.Link href=\"/examples\" title=\"Examples\" description=\"Browse example projects.\" />\n          </div>\n        </div>\n      </NavigationMenu.Content>\n    </NavigationMenu.Item>\n  </NavigationMenu.List>\n  <NavigationMenu.Viewport />\n</NavigationMenu>"},{"name":"Vertical","description":"Vertical orientation with content panels to the right","code":"<div style={{ display: 'flex' }}>\n  <NavigationMenu orientation=\"vertical\">\n    <NavigationMenu.List>\n      <NavigationMenu.Item value=\"overview\">\n        <NavigationMenu.Trigger>Overview</NavigationMenu.Trigger>\n        <NavigationMenu.Content>\n          <div style={{ padding: '8px', minWidth: '200px' }}>\n            <NavigationMenu.Link href=\"/intro\" title=\"Introduction\" description=\"Learn the basics.\" />\n          </div>\n        </NavigationMenu.Content>\n      </NavigationMenu.Item>\n      <NavigationMenu.Item value=\"guides\">\n        <NavigationMenu.Trigger>Guides</NavigationMenu.Trigger>\n        <NavigationMenu.Content>\n          <div style={{ padding: '8px', minWidth: '200px' }}>\n            <NavigationMenu.Link href=\"/install\" title=\"Installation\" description=\"Get started quickly.\" />\n            <NavigationMenu.Link href=\"/config\" title=\"Configuration\" description=\"Customize your setup.\" />\n          </div>\n        </NavigationMenu.Content>\n      </NavigationMenu.Item>\n    </NavigationMenu.List>\n    <NavigationMenu.Viewport />\n  </NavigationMenu>\n</div>"}],"contract":{"propsSummary":["value: string — controlled open item","onValueChange: (value) => void — open state handler","orientation: horizontal | vertical — layout direction","delayDuration: number — hover open delay (default: 200ms)","icons: { triggerChevron?, mobileMenu?, mobileClose?, drawerClose? } — custom internal control icons","NavigationMenu.Link: title + description + icon for structured links, or children for simple links","NavigationMenu.Link asChild: composes child and menu click handlers (preventDefault keeps menu open)","NavigationMenu.MobileContent: slot for extra mobile-only sections"],"a11yRules":["A11Y_DISCLOSURE_PATTERN","A11Y_KEYBOARD_NAV","A11Y_FOCUS_TRAP"]},"ai":{"compositionPattern":"compound","subComponents":["List","Item","Trigger","Content","Link","Indicator","Viewport","MobileBrand","MobileContent","MobileSection"],"requiredChildren":["List"],"commonPatterns":["<NavigationMenu><NavigationMenu.List><NavigationMenu.Item value=\"docs\"><NavigationMenu.Trigger>Docs</NavigationMenu.Trigger><NavigationMenu.Content><NavigationMenu.Link href=\"/guides\" title=\"Guides\" description=\"Learn the basics\" /></NavigationMenu.Content></NavigationMenu.Item></NavigationMenu.List><NavigationMenu.Viewport /></NavigationMenu>"]},"propsSummary":["children: node (required)","value: string","defaultValue: string","onValueChange: function","orientation: horizontal|vertical (default: horizontal)","delayDuration: number (default: 200)","skipDelayDuration: number (default: 300)","icons: object"],"sourcePath":"src/components/NavigationMenu/index.tsx","exportName":"NavigationMenu","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:01.458Z"},"performance":{"bundleSize":7845,"rawSize":25514,"complexity":"moderate","budgetPercent":51,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"NavigationMenu (self)","bytes":12669,"percent":50},{"path":"@phosphor-icons/react","bytes":5518,"percent":22},{"path":"Collapsible","bytes":2538,"percent":10},{"path":"ScrollArea","bytes":2504,"percent":10},{"path":"src/utils/a11y.tsx","bytes":1358,"percent":5}]}},"Pagination":{"filePath":"src/components/Pagination/index.tsx","meta":{"name":"Pagination","description":"Page navigation for paginated data. Supports controlled/uncontrolled, page counts, and edge/sibling customization.","category":"navigation","tags":["pagination","paging","pages","navigation"],"status":"stable"},"usage":{"when":["Navigating through paginated data sets","Table or list pagination controls","Search results with multiple pages","Any content split across multiple pages"],"whenNot":["Small lists that fit on one page","Infinite scroll patterns (use IntersectionObserver)","Tab-based navigation (use Tabs)","Step-by-step wizards (use Stepper)"],"guidelines":["Place below the content being paginated","Use edgeCount to always show first/last pages","Use siblingCount to control how many pages surround the current page","Pair with Table component for data table pagination","Keep page labels on the body foreground; the current page uses a neutral active surface rather than brand accent","Pagination forwards standard nav props (id, aria-*, data-*, event handlers) to the root <nav>","Previous/Next/Item buttons compose your onClick handlers; call event.preventDefault() to stop the page change"],"accessibility":["Uses nav element with aria-label=\"Pagination\"","aria-current=\"page\" marks the active page","Previous/Next buttons have descriptive aria-labels","Disabled buttons at boundaries prevent invalid navigation"]},"props":{"children":{"type":"node","description":"","required":true},"totalPages":{"type":"number","description":"Total number of pages","required":true},"page":{"type":"number","description":"Controlled current page (1-indexed)","required":false},"defaultPage":{"type":"number","description":"Default page (uncontrolled)","default":"1","required":false},"onPageChange":{"type":"function","description":"Called when page changes","required":false},"edgeCount":{"type":"number","description":"Number of pages shown at edges","default":"1","required":false},"siblingCount":{"type":"number","description":"Number of pages shown around current","default":"1","required":false},"size":{"type":"enum","description":"Visible action size. Resolves through ComponentDefaults when omitted.","required":false,"values":["sm","md","lg"]}},"relations":[{"component":"Table","relationship":"sibling","note":"Commonly paired for table pagination"},{"component":"Listbox","relationship":"alternative","note":"Use Listbox for small sets of options"}],"variants":[{"name":"Default","description":"Basic pagination with 10 pages","code":"<Pagination totalPages={10} defaultPage={1}>\n  <Pagination.Previous />\n  <Pagination.Items />\n  <Pagination.Next />\n</Pagination>"},{"name":"With Edge Pages","description":"Shows 2 pages at each edge","code":"<Pagination totalPages={20} defaultPage={10} edgeCount={2} siblingCount={1}>\n  <Pagination.Previous />\n  <Pagination.Items />\n  <Pagination.Next />\n</Pagination>"},{"name":"Compact","description":"No siblings, minimal display","code":"<Pagination totalPages={20} defaultPage={10} siblingCount={0}>\n  <Pagination.Previous />\n  <Pagination.Items />\n  <Pagination.Next />\n</Pagination>"},{"name":"Controlled","description":"Controlled pagination at page 3","code":"<Pagination totalPages={5} page={3}>\n  <Pagination.Previous />\n  <Pagination.Items />\n  <Pagination.Next />\n</Pagination>"}],"contract":{"propsSummary":["totalPages: number - total page count (required)","page: number - controlled current page (1-indexed)","defaultPage: number - initial page (default: 1)","onPageChange: (page) => void - page change handler","edgeCount: number - pages at edges (default: 1)","siblingCount: number - pages around current (default: 1)","Forwards standard HTML nav attributes to the root element"],"a11yRules":["A11Y_NAV_LABEL","A11Y_CURRENT_PAGE"]},"ai":{"compositionPattern":"compound","subComponents":["Previous","Next","Items","Item","Ellipsis"],"requiredChildren":["Items"],"commonPatterns":["<Pagination totalPages={totalPages} page={currentPage} onPageChange={setPage}><Pagination.Previous /><Pagination.Items /><Pagination.Next /></Pagination>"]},"propsSummary":["children: node (required)","totalPages: number (required)","page: number","defaultPage: number (default: 1)","onPageChange: function","edgeCount: number (default: 1)","siblingCount: number (default: 1)"],"sourcePath":"src/components/Pagination/index.tsx","exportName":"Pagination","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:01.648Z"},"performance":{"bundleSize":1855,"rawSize":4918,"complexity":"lightweight","budgetPercent":12,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Pagination (self)","bytes":4002,"percent":81},{"path":"ComponentDefaults","bytes":194,"percent":4}]}},"Popover":{"filePath":"src/components/Popover/index.tsx","meta":{"name":"Popover","description":"Rich content overlay anchored to a trigger element. Use for forms, detailed information, or interactive content that should stay in context.","category":"feedback","tags":["popover","overlay","dropdown","floating","contextual"],"status":"stable"},"usage":{"when":["Inline editing forms","Rich preview content","Filter panels","Date/color pickers","Content that needs more space than a tooltip"],"whenNot":["Simple hints (use Tooltip)","Action lists (use Menu)","Blocking user interaction (use Dialog)","System notifications (use Toast or Alert)"],"guidelines":["Keep popover content focused and minimal","Include a clear way to close (X button or action buttons)","Position to avoid covering important content","Use arrow to visually connect popover to trigger","Popover.Trigger and Popover.Close support asChild for links/router-link components (single valid element child required)"],"accessibility":["Focus is moved to popover content on open","Closes on Escape key","Focus returns to trigger on close"]},"props":{"children":{"type":"node","description":"Popover trigger and content","required":true},"open":{"type":"boolean","description":"Controlled open state","required":false},"defaultOpen":{"type":"boolean","description":"Default open state (uncontrolled)","default":"false","required":false},"onOpenChange":{"type":"function","description":"Called when open state changes","required":false},"modal":{"type":"boolean","description":"Whether to block page interaction","default":"false","required":false}},"relations":[{"component":"Tooltip","relationship":"alternative","note":"Use Tooltip for brief, non-interactive hints"},{"component":"Menu","relationship":"alternative","note":"Use Menu for action lists"},{"component":"Dialog","relationship":"alternative","note":"Use Dialog for blocking interactions"}],"variants":[{"name":"Default","description":"Basic popover with content","code":"<Popover>\n  <Popover.Trigger asChild>\n    <Button variant=\"secondary\">Open Popover</Button>\n  </Popover.Trigger>\n  <Popover.Content>\n    <Popover.Close />\n    <Popover.Title>Popover Title</Popover.Title>\n    <Popover.Description>\n      This is a popover with some content. It can contain text, forms, or other elements.\n    </Popover.Description>\n  </Popover.Content>\n</Popover>"},{"name":"With Form","description":"Popover containing a form","code":"<Popover>\n  <Popover.Trigger asChild>\n    <Button variant=\"secondary\">Edit Name</Button>\n  </Popover.Trigger>\n  <Popover.Content size=\"sm\">\n    <Popover.Close />\n    <Popover.Title>Edit Name</Popover.Title>\n    <Popover.Body>\n      <Input label=\"Display Name\" placeholder=\"Enter name\" />\n    </Popover.Body>\n    <Popover.Footer>\n      <Popover.Close asChild>\n        <Button variant=\"secondary\" size=\"sm\">Cancel</Button>\n      </Popover.Close>\n      <Button variant=\"primary\" size=\"sm\">Save</Button>\n    </Popover.Footer>\n  </Popover.Content>\n</Popover>"},{"name":"With Arrow","description":"Popover with pointing arrow","code":"<Popover>\n  <Popover.Trigger asChild>\n    <Button variant=\"secondary\">Info</Button>\n  </Popover.Trigger>\n  <Popover.Content arrow>\n    <Popover.Title>Quick Tip</Popover.Title>\n    <Popover.Description>\n      This popover has an arrow pointing to its trigger element.\n    </Popover.Description>\n  </Popover.Content>\n</Popover>"},{"name":"Positions","description":"Popover on different sides","code":"<div style={{ display: 'flex', gap: '16px', padding: '60px' }}>\n  <Popover>\n    <Popover.Trigger asChild>\n      <Button variant=\"secondary\">Top</Button>\n    </Popover.Trigger>\n    <Popover.Content side=\"top\" size=\"sm\">\n      <Popover.Description>Popover on top</Popover.Description>\n    </Popover.Content>\n  </Popover>\n  <Popover>\n    <Popover.Trigger asChild>\n      <Button variant=\"secondary\">Bottom</Button>\n    </Popover.Trigger>\n    <Popover.Content side=\"bottom\" size=\"sm\">\n      <Popover.Description>Popover on bottom</Popover.Description>\n    </Popover.Content>\n  </Popover>\n</div>"},{"name":"Link Trigger","description":"Use asChild with a non-button trigger element","code":"<Popover>\n  <Popover.Trigger asChild>\n    <a href=\"#popover-help\">Open help</a>\n  </Popover.Trigger>\n  <Popover.Content size=\"sm\">\n    <Popover.Description>Popover trigger can be an anchor when using asChild.</Popover.Description>\n  </Popover.Content>\n</Popover>"}],"contract":{"propsSummary":["open: boolean - controlled open state","onOpenChange: (open) => void - state handler","modal: boolean - blocks page interaction (default: false)","Popover.Trigger / Popover.Close asChild support non-button children","Popover.Content side: top|bottom|left|right - position"],"a11yRules":["A11Y_POPOVER_FOCUS","A11Y_POPOVER_ESCAPE","A11Y_TARGET_SIZE_MIN"]},"ai":{"compositionPattern":"compound","subComponents":["Trigger","Content","Close","Title","Description","Body","Footer"],"requiredChildren":["Trigger","Content"],"commonPatterns":["<Popover><Popover.Trigger asChild><Button>Open</Button></Popover.Trigger><Popover.Content><Popover.Close /><Popover.Title>{title}</Popover.Title><Popover.Description>{description}</Popover.Description></Popover.Content></Popover>","<Popover><Popover.Trigger asChild><a href=\"#help\">Open help</a></Popover.Trigger><Popover.Content>...</Popover.Content></Popover>"]},"propsSummary":["children: node (required)","open: boolean","defaultOpen: boolean","onOpenChange: function","modal: boolean (default: false)"],"sourcePath":"src/components/Popover/index.tsx","exportName":"Popover","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:02.154Z"},"performance":{"bundleSize":1344,"rawSize":3486,"complexity":"lightweight","budgetPercent":9,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Popover (self)","bytes":2744,"percent":79}]}},"Progress":{"filePath":"src/components/Progress/index.tsx","meta":{"name":"Progress","description":"Visual indicator of task completion or loading state. Available in linear and circular variants.","category":"feedback","tags":["progress","loading","indicator","percentage","status"],"status":"stable"},"usage":{"when":["Showing upload/download progress","Displaying task completion percentage","Form completion indicators","Loading states with known duration"],"whenNot":["Unknown loading duration (use Spinner)","Step-based progress (use Stepper)","Status without percentage (use Badge)"],"guidelines":["Use determinate progress when you know the completion percentage","Use indeterminate for unknown durations","Include a label for context when the purpose isnt obvious","Use appropriate color variants for success/warning/danger states","Use variant=\"neutral\" with role=\"meter\" for magnitude or distribution values where reaching the maximum is not a success state","Determinate values are clamped to the min/max range for display"],"accessibility":["Uses role=\"progressbar\" with aria-valuenow","Accepts role=\"meter\" for scalar measurements within a known range","Label is associated with the progress bar","State changes are announced to screen readers"]},"props":{"value":{"type":"number","description":"Current progress value (0-100). Null for indeterminate.","default":"null","required":false},"min":{"type":"number","description":"Minimum value","default":"0","required":false},"max":{"type":"number","description":"Maximum value","default":"100","required":false},"size":{"type":"enum","description":"Size of the progress bar","default":"md","required":false,"values":["sm","md","lg"]},"variant":{"type":"enum","description":"Color variant","default":"default","required":false,"values":["default","neutral","success","warning","danger"]},"label":{"type":"string","description":"Label text above the progress bar","required":false},"showValue":{"type":"boolean","description":"Show percentage value","default":"false","required":false},"formatValue":{"type":"function","description":"Custom formatter for displayed progress value","required":false},"role":{"type":"union","description":"","required":false}},"relations":[{"component":"Badge","relationship":"alternative","note":"Use Badge for status without percentage"},{"component":"Alert","relationship":"sibling","note":"Use Alert for completion messages"}],"variants":[{"name":"Default","description":"Basic progress bar with percentage","code":"<Progress value={60} label=\"Uploading...\" showValue />"},{"name":"Variants","description":"Different color variants for different states","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '300px' }}>\n  <Progress value={75} variant=\"default\" label=\"Processing\" showValue />\n  <Progress value={100} variant=\"success\" label=\"Complete\" showValue />\n  <Progress value={80} variant=\"warning\" label=\"Almost full\" showValue />\n  <Progress value={95} variant=\"danger\" label=\"Storage critical\" showValue />\n</div>"},{"name":"Sizes","description":"Different progress bar sizes","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '300px' }}>\n  <Progress value={50} size=\"sm\" label=\"Small\" />\n  <Progress value={50} size=\"md\" label=\"Medium\" />\n  <Progress value={50} size=\"lg\" label=\"Large\" />\n</div>"},{"name":"Indeterminate","description":"Loading state with unknown duration","code":"<Progress value={null} label=\"Loading...\" />"},{"name":"Circular","description":"Circular progress indicator","code":"<div style={{ display: 'flex', gap: '24px', alignItems: 'center' }}>\n  <CircularProgress value={25} size=\"sm\" />\n  <CircularProgress value={50} size=\"md\" showValue />\n  <CircularProgress value={75} size=\"lg\" showValue variant=\"success\" />\n  <CircularProgress value={null} size=\"md\" />\n</div>"}],"contract":{"propsSummary":["value: number|null - progress percentage (null for indeterminate)","size: sm|md|lg - bar thickness","variant: default|success|warning|danger - color","label: string - descriptive label","showValue: boolean - display percentage","Determinate display values are clamped (and invalid min/max ranges render as 0%)"],"a11yRules":["A11Y_PROGRESS_ROLE","A11Y_PROGRESS_VALUE"]},"ai":{"compositionPattern":"compound","subComponents":["Root","Circular"]},"propsSummary":["value: number (default: null)","min: number (default: 0)","max: number (default: 100)","size: sm|md|lg (default: md)","variant: default|neutral|success|warning|danger (default: default)","role: progressbar|meter (default: progressbar)","label: string","showValue: boolean (default: false)","formatValue: function"],"sourcePath":"src/components/Progress/index.tsx","exportName":"Progress","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:02.339Z"},"performance":{"bundleSize":2524,"rawSize":6649,"complexity":"lightweight","budgetPercent":16,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Progress (self)","bytes":6035,"percent":91}]}},"Prompt":{"filePath":"src/components/Prompt/index.tsx","meta":{"name":"Prompt","description":"Multi-line input with toolbar for AI/chat interfaces","category":"ai","tags":["prompt","chat","ai","input","textarea","form"],"status":"stable"},"usage":{"when":["Building chat or AI assistant interfaces","Need multi-line input with submit action","Require toolbar with actions like attachments or model selection"],"whenNot":["Simple single-line text input (use Input)","Basic multi-line without toolbar (use Textarea)","Search-only interface (use Input with search variant)"],"guidelines":["Always provide an onSubmit handler","Use loading state during API calls","Prompt.Textarea forwards native textarea props (autoComplete, inputMode, aria-*, data-*, handlers)","Prompt.Textarea composes your onChange/onKeyDown handlers with built-in submit and auto-resize behavior","Use appearance=\"seamless\" for agent composers where the controls should float on the writing surface rather than sit in a footer","Seamless controls share the dense 32px token scale with body-sized labels and standard glyphs so mixed Prompt.Select, Prompt.Attach and Prompt.Submit rows remain optically aligned","Seamless secondary controls keep transparent hover and open states so they read as inline tools; only Prompt.Submit carries a persistent filled shape","Seamless Prompt.Submit mirrors the trailing ink gutter established by Prompt.Attach at the leading edge","Prompt.Submit uses a neutral inverse surface by default so the primary action stays visible without consuming semantic brand color","Use Prompt.ModeButton for a setting you toggle and Prompt.Select for one you pick from a list","Wire onFiles once: the attach button, pasting a screenshot and dropping on the card all go through it","Render Prompt.Attachments above Prompt.Textarea — attachments are part of the message, not a setting on it","Consider showing usage/token limits for AI contexts"],"accessibility":["Enter submits, Shift+Enter for newline","Submit button is keyboard accessible","Loading state prevents duplicate submissions"]},"props":{"children":{"type":"node","description":"Prompt composition using Prompt sub-components","required":true},"value":{"type":"string","description":"Controlled input value","required":false},"defaultValue":{"type":"string","description":"Uncontrolled default value","default":"","required":false},"onChange":{"type":"function","description":"Called when value changes","required":false},"onSubmit":{"type":"function","description":"Called on form submission","required":false},"placeholder":{"type":"string","description":"Placeholder text for the textarea","default":"Ask, Search or Chat...","required":false},"disabled":{"type":"boolean","description":"Disable the entire prompt","default":"false","required":false},"loading":{"type":"boolean","description":"Show loading state","default":"false","required":false},"minRows":{"type":"number","description":"Minimum number of visible rows","default":"1","required":false},"maxRows":{"type":"number","description":"Maximum number of visible rows","default":"8","required":false},"autoResize":{"type":"boolean","description":"Enable auto-resize based on content","default":"true","required":false},"submitOnEnter":{"type":"boolean","description":"Submit on Enter (Shift+Enter for newline)","default":"true","required":false},"variant":{"type":"enum","description":"Visual/positioning variant","default":"default","required":false,"values":["default","fixed","sticky"]},"onFiles":{"type":"function","description":"Called with files added by the attach button, a paste, or a drop anywhere on the card. Providing it enables all three.","required":false},"accept":{"type":"string","description":"accept filter for the attach button's picker, e.g. \"image/*\"","required":false},"appearance":{"type":"enum","description":"How the card is divided up. \"panel\" keeps the toolbar as a filled footer under a rule; \"seamless\" makes the whole card one writing surface with the controls floating on it.","default":"panel","required":false,"values":["panel","seamless"]}},"relations":[{"component":"Input","relationship":"alternative","note":"Use Input for simple single-line text input"},{"component":"Textarea","relationship":"alternative","note":"Use Textarea for multi-line without toolbar"}],"variants":[{"name":"Basic","description":"Simple prompt with submit button","code":"<Prompt onSubmit={(value) => console.log(value)}>\n  <Prompt.Textarea />\n  <Prompt.Toolbar>\n    <Prompt.Actions />\n    <Prompt.Info>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"},{"name":"With Actions","description":"Prompt with attachment and mode buttons","code":"<Prompt onSubmit={(value) => console.log(value)}>\n  <Prompt.Textarea />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.ActionButton aria-label=\"Add attachment\">\n        +\n      </Prompt.ActionButton>\n      <Prompt.ModeButton>Auto</Prompt.ModeButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"},{"name":"With Usage","description":"Shows token usage indicator","code":"<Prompt onSubmit={(value) => console.log(value)}>\n  <Prompt.Textarea />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.ActionButton aria-label=\"Add attachment\">\n        +\n      </Prompt.ActionButton>\n      <Prompt.ModeButton active>Auto</Prompt.ModeButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Usage>52% used</Prompt.Usage>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"},{"name":"Agent Composer","description":"Seamless surface with the scope of the run chosen on the toolbar","code":"<Prompt\n  appearance=\"seamless\"\n  submitOnEnter={false}\n  minRows={3}\n  onSubmit={(value) => console.log(value)}\n>\n  <Prompt.Textarea placeholder=\"What should be true when this is done?\" />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.Select\n        aria-label=\"Model\"\n        defaultValue=\"claude-opus-4-8\"\n        options={[{ value: 'claude-opus-4-8', label: 'Opus 4.8' }, { value: 'claude-sonnet-5', label: 'Sonnet 5' }]}\n      />\n      <Prompt.ModeButton>Plan</Prompt.ModeButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"},{"name":"Loading State","description":"During API submission","code":"<Prompt\n  onSubmit={(value) => console.log(value)}\n  loading\n  defaultValue=\"Tell me about the weather...\"\n>\n  <Prompt.Textarea />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.ActionButton aria-label=\"Add attachment\">\n        +\n      </Prompt.ActionButton>\n      <Prompt.ModeButton>Auto</Prompt.ModeButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Usage>52% used</Prompt.Usage>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"},{"name":"Disabled","description":"Non-interactive prompt","code":"<Prompt onSubmit={(value) => console.log(value)} disabled>\n  <Prompt.Textarea />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.ActionButton aria-label=\"Add attachment\">\n        +\n      </Prompt.ActionButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"}],"contract":{"propsSummary":["value: string - controlled input value","onSubmit: (value: string) => void - submission handler","placeholder: string - hint text (default: \"Ask, Search or Chat...\")","disabled: boolean - disables interaction","loading: boolean - shows loading state","minRows/maxRows: number - row constraints (default: 1/8)","submitOnEnter: boolean - Enter key behavior (default: true)","Prompt.Textarea accepts native textarea props and optional aria-label override"],"a11yRules":["A11Y_TEXTAREA_LABEL","A11Y_BUTTON_LABEL"]},"ai":{"compositionPattern":"compound","subComponents":["Textarea","Toolbar","Tabs","Tab","Actions","Info","ActionButton","ModeButton","Select","Attach","Attachments","Usage","Submit"],"commonPatterns":["<Prompt>\n  <Prompt.Textarea>...</Prompt.Textarea>\n  <Prompt.Toolbar>...</Prompt.Toolbar>\n  <Prompt.Actions>...</Prompt.Actions>\n  <Prompt.Info>...</Prompt.Info>\n  <Prompt.Submit>...</Prompt.Submit>\n</Prompt>"],"requiredChildren":["Textarea","Toolbar","Actions","Info","Submit"]},"propsSummary":["children: node (required)","value: string","defaultValue: string (default: )","onChange: function","onSubmit: function","placeholder: string (default: Ask, Search or Chat...)","disabled: boolean (default: false)","loading: boolean (default: false)","minRows: number (default: 1)","maxRows: number (default: 8)","autoResize: boolean (default: true)","submitOnEnter: boolean (default: true)","variant: default|fixed|sticky (default: default)","appearance: panel|seamless (default: panel)","onFiles: function","accept: string"],"sourcePath":"src/components/Prompt/index.tsx","exportName":"Prompt","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:02.513Z"},"performance":{"bundleSize":6442,"rawSize":19039,"complexity":"moderate","budgetPercent":42,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Select","bytes":8310,"percent":44},{"path":"Prompt (self)","bytes":7780,"percent":41},{"path":"Loading","bytes":2048,"percent":11}]}},"RadioGroup":{"filePath":"src/components/RadioGroup/index.tsx","meta":{"name":"RadioGroup","description":"Single selection from a list of mutually exclusive options","category":"forms","tags":["form","radio","selection","options"],"status":"stable"},"usage":{"when":["User must select exactly one option from a small set","Options are mutually exclusive","All options should be visible at once","2-5 options available"],"whenNot":["Multiple selections allowed (use Checkbox group)","Many options (use Select)","Binary on/off choice (use Switch)","Options need to be searchable (use Combobox)"],"guidelines":["Always have one option pre-selected when possible","Order options logically (alphabetical, frequency, etc.)","Keep option labels concise","Use helperText on RadioGroup.Item for complex options"],"accessibility":["Group must have an accessible label","Use arrow keys to navigate between options","Selected option should be clearly indicated"]},"props":{"value":{"type":"string","description":"Controlled selected value","required":false},"defaultValue":{"type":"string","description":"Default value (uncontrolled)","required":false},"onValueChange":{"type":"function","description":"Callback when selection changes","required":false},"onChange":{"type":"function","description":"Alias for onValueChange","required":false},"orientation":{"type":"enum","description":"Layout orientation","default":"vertical","required":false,"values":["horizontal","vertical"]},"disabled":{"type":"boolean","description":"Disable all options","default":"false","required":false},"name":{"type":"string","description":"Form field name","required":false},"label":{"type":"string","description":"Group label","required":false},"helperText":{"type":"string","description":"Helper text shown below the group","required":false},"error":{"type":"union","description":"Show error styling. When a string is provided, it is displayed as an error message.","required":false},"size":{"type":"enum","description":"Size variant","default":"md","required":false,"values":["sm","md","lg"]},"variant":{"type":"enum","description":"Visual variant. 'default' is the inline radio, 'card' renders each item as a full-width clickable card with the radio tucked inside.","default":"default","required":false,"values":["default","card"]},"wrapperClassName":{"type":"string","description":"Class name for the outer wrapper element","required":false},"groupClassName":{"type":"string","description":"Class name for the inner radio group element","required":false},"groupId":{"type":"string","description":"ID for the inner element with role=radiogroup; the inherited id remains on the outer field wrapper","required":false},"children":{"type":"node","description":"RadioGroup.Item elements","required":true},"form":{"type":"string","description":"ID of the form that owns the radio inputs","required":false},"inputRef":{"type":"union","description":"Ref to the hidden input element","required":false},"readOnly":{"type":"boolean","description":"Whether the selected value cannot be changed by the user","default":"false","required":false},"required":{"type":"boolean","description":"Whether the user must choose a value before submitting a form","default":"false","required":false}},"relations":[{"component":"Checkbox","relationship":"alternative","note":"Use Checkbox for multiple selections"},{"component":"Select","relationship":"alternative","note":"Use Select for many options or limited space"},{"component":"Switch","relationship":"alternative","note":"Use Switch for binary on/off choices"}],"variants":[{"name":"Default","description":"Basic radio group with labels","code":"<RadioGroup defaultValue=\"option1\" label=\"Select an option\">\n  <RadioGroup.Item value=\"option1\" label=\"Option 1\" />\n  <RadioGroup.Item value=\"option2\" label=\"Option 2\" />\n  <RadioGroup.Item value=\"option3\" label=\"Option 3\" />\n</RadioGroup>"},{"name":"With Helper Text","description":"Radio items with additional context","code":"<RadioGroup defaultValue=\"standard\" label=\"Shipping Method\">\n  <RadioGroup.Item\n    value=\"standard\"\n    label=\"Standard\"\n    helperText=\"5-7 business days\"\n  />\n  <RadioGroup.Item\n    value=\"express\"\n    label=\"Express\"\n    helperText=\"2-3 business days\"\n  />\n  <RadioGroup.Item\n    value=\"overnight\"\n    label=\"Overnight\"\n    helperText=\"Next business day\"\n  />\n</RadioGroup>"},{"name":"Horizontal","description":"Side-by-side layout","code":"<RadioGroup orientation=\"horizontal\" defaultValue=\"small\" label=\"Size\">\n  <RadioGroup.Item value=\"small\" label=\"S\" />\n  <RadioGroup.Item value=\"medium\" label=\"M\" />\n  <RadioGroup.Item value=\"large\" label=\"L\" />\n  <RadioGroup.Item value=\"xlarge\" label=\"XL\" />\n</RadioGroup>"},{"name":"With Group Helper Text","description":"Group-level helper text","code":"<RadioGroup defaultValue=\"standard\" label=\"Plan\" helperText=\"You can change your plan at any time\">\n  <RadioGroup.Item value=\"free\" label=\"Free\" />\n  <RadioGroup.Item value=\"standard\" label=\"Standard\" />\n  <RadioGroup.Item value=\"pro\" label=\"Pro\" />\n</RadioGroup>"},{"name":"With Error","description":"Validation error state (string shows error message)","code":"<RadioGroup label=\"Required selection\" error=\"Please select an option\">\n  <RadioGroup.Item value=\"a\" label=\"Option A\" />\n  <RadioGroup.Item value=\"b\" label=\"Option B\" />\n</RadioGroup>"},{"name":"Disabled","description":"Non-interactive state","code":"<RadioGroup disabled defaultValue=\"locked\" label=\"Locked selection\">\n  <RadioGroup.Item value=\"locked\" label=\"This is locked\" />\n  <RadioGroup.Item value=\"other\" label=\"Cannot select\" />\n</RadioGroup>"},{"name":"Styling Targets","description":"Use explicit class names for wrapper/group/item styling hooks","code":"<RadioGroup\n  defaultValue=\"a\"\n  label=\"Display mode\"\n  wrapperClassName=\"demo-radio-wrapper\"\n  groupClassName=\"demo-radio-group\"\n>\n  <RadioGroup.Item value=\"a\" label=\"Compact\" controlClassName=\"demo-radio-control\" contentClassName=\"demo-radio-content\" />\n  <RadioGroup.Item value=\"b\" label=\"Comfortable\" />\n</RadioGroup>"}],"contract":{"propsSummary":["value: string - selected value","onValueChange: (value: string) => void","onChange: (value: string) => void - alias for onValueChange","orientation: horizontal|vertical (default: vertical)","size: sm|md|lg (default: md)","label: string - group label","helperText: string - helper text below the group","error: boolean | string - error styling and message","disabled: boolean - disable all options","wrapperClassName/groupClassName - explicit styling targets for wrapper and group","groupId: string - ID forwarded to the inner radiogroup while id remains on the wrapper","RadioGroup.Item supports helperText (preferred) and description (legacy alias) plus controlClassName/contentClassName for item-level styling"],"a11yRules":["A11Y_RADIO_GROUP","A11Y_LABEL_REQUIRED","A11Y_TARGET_SIZE_MIN"]},"ai":{"compositionPattern":"compound","subComponents":["Item"],"commonPatterns":["<RadioGroup>\n  <RadioGroup.Item>...</RadioGroup.Item>\n</RadioGroup>"],"requiredChildren":["Item"]},"propsSummary":["value: string","defaultValue: string","onValueChange: function","onChange: function","orientation: horizontal|vertical (default: vertical)","disabled: boolean (default: false)","name: string","label: string","helperText: string","error: union","size: sm|md|lg (default: md)","wrapperClassName: string","groupClassName: string","groupId: string","children: node (required)"],"sourcePath":"src/components/RadioGroup/index.tsx","exportName":"RadioGroup","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:02.692Z"},"performance":{"bundleSize":1510,"rawSize":3917,"complexity":"lightweight","budgetPercent":10,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"RadioGroup (self)","bytes":2689,"percent":69},{"path":"src/utils/aria.ts","bytes":433,"percent":11},{"path":"ComponentDefaults","bytes":198,"percent":5}]}},"ScrollArea":{"filePath":"src/components/ScrollArea/index.tsx","meta":{"name":"ScrollArea","description":"A styled scrollable container with thin scrollbars and optional fade indicators.","category":"layout","tags":["scroll","overflow","scrollbar","container","layout"],"status":"stable"},"usage":{"when":["Content overflows its container and needs scrolling","Horizontal tab bars or chip lists that may overflow","Scrollable panels, sidebars, or dropdown content","Any area where native scrollbars look too heavy"],"whenNot":["Page-level scrolling (use native body scroll)","Very short content that never overflows"],"guidelines":["Use `orientation` to constrain scroll direction","Use `showFades` to hint at hidden content beyond the viewport","The `auto` and `hover` modes keep the thumb quiet until hover or keyboard focus without changing track geometry","Combine with `orientation=\"horizontal\"` for tab bars and chip rows"],"accessibility":["Preserves native scroll behavior and keyboard support across both axes","Scrollbar is visible on focus for keyboard users","Respects prefers-reduced-motion for fade transitions"]},"props":{"children":{"type":"node","description":"Scrollable content","required":true},"orientation":{"type":"enum","description":"Scroll direction","default":"vertical","required":false,"values":["horizontal","vertical","both"]},"scrollbarVisibility":{"type":"enum","description":"When to show the scrollbar","default":"auto","required":false,"values":["auto","always","hover"]},"showFades":{"type":"boolean","description":"Show gradient fade indicators at scroll edges","default":"false","required":false},"className":{"type":"string","description":"Additional class name","required":false},"dir":{"type":"string","description":"","required":false}},"relations":[],"variants":[{"name":"Vertical","description":"Vertical scrollable area with thin scrollbar.","code":"<ScrollArea style={{ height: '200px' }}>\n  {/* Long content */}\n</ScrollArea>"},{"name":"Horizontal","description":"Horizontal scrollable area for overflowing inline content like tabs or chips.","code":"<ScrollArea orientation=\"horizontal\">\n  <div style={{ display: 'flex', gap: '8px' }}>\n    {tags.map(tag => <Chip key={tag}>{tag}</Chip>)}\n  </div>\n</ScrollArea>"},{"name":"With Fades","description":"Fade indicators independently show the available logical direction on each scrollable axis.","code":"<ScrollArea orientation=\"horizontal\" showFades>\n  {/* Overflowing content */}\n</ScrollArea>"},{"name":"Hover Scrollbar","description":"Scrollbar thumb paint appears on hover or keyboard focus without changing track dimensions.","code":"<ScrollArea scrollbarVisibility=\"hover\" style={{ height: '200px' }}>\n  {/* Content */}\n</ScrollArea>"}],"contract":{"propsSummary":["orientation: horizontal|vertical|both - scroll direction","scrollbarVisibility: auto|always|hover - scrollbar display mode","showFades: boolean - gradient edge indicators"]},"ai":{"compositionPattern":"compound","subComponents":["Root"],"commonPatterns":["<ScrollArea orientation=\"horizontal\"><div style={{ display: \"flex\", gap: 8 }}>{items}</div></ScrollArea>","<ScrollArea style={{ height: 300 }}>{longContent}</ScrollArea>"]},"propsSummary":["children: node (required)","orientation: horizontal|vertical|both (default: vertical)","scrollbarVisibility: auto|always|hover (default: auto)","showFades: boolean (default: false)","className: string"],"sourcePath":"src/components/ScrollArea/index.tsx","exportName":"ScrollArea","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:02.867Z"},"performance":{"bundleSize":1519,"rawSize":3074,"complexity":"lightweight","budgetPercent":10,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"ScrollArea (self)","bytes":2482,"percent":81}]}},"Select":{"filePath":"src/components/Select/index.tsx","meta":{"name":"Select","description":"Dropdown for choosing from a list of options. Use when there are more than 4-5 choices that would clutter the UI.","category":"forms","tags":["select","dropdown","form","options","picker"],"status":"stable"},"usage":{"when":["Choosing from a predefined list of options","More than 4-5 options that would clutter UI as radio buttons","Space-constrained forms","When users need to see all options at once"],"whenNot":["Very few options (2-3) - use radio buttons","Users might type custom values - use Combobox","Multiple selections needed - use Checkbox group or MultiSelect","Actions, not selection - use Menu"],"guidelines":["Include a placeholder that explains what to select","Use label prop for accessible field labeling","Use helperText for guidance and error for validation messages","Group related options with SelectGroup","Keep option text concise","Order options logically (alphabetical, by frequency, or by category)"],"accessibility":["Full keyboard navigation support","Type-ahead search within options","Proper ARIA roles and attributes"]},"props":{"children":{"type":"node","description":"Select trigger and content when options prop is not used","required":false},"value":{"type":"string","description":"Controlled selected value","required":false},"defaultValue":{"type":"string","description":"Default selected value (uncontrolled)","required":false},"onValueChange":{"type":"function","description":"Called when selection changes","required":false},"onChange":{"type":"function","description":"Alias for onValueChange","required":false},"open":{"type":"boolean","description":"Controlled open state of the dropdown","required":false},"defaultOpen":{"type":"boolean","description":"Initial open state for uncontrolled usage","default":"false","required":false},"onOpenChange":{"type":"function","description":"Called when dropdown open state changes","required":false},"required":{"type":"boolean","description":"Whether a selection is required","required":false},"name":{"type":"string","description":"Form field name","required":false},"placeholder":{"type":"string","description":"Placeholder text when no value selected","required":false},"options":{"type":"array","description":"Convenience options array for simple selects (alternative to compound Select.Item children)","required":false},"size":{"type":"enum","description":"Size variant","default":"\"md\"","required":false,"values":["sm","md","lg"]},"variant":{"type":"enum","description":"Visual treatment. \"ghost\" drops the field shell for a compact borderless control, for toolbars and dense rows. Pair with size=\"sm\".","default":"field","required":false,"values":["field","ghost"]},"className":{"type":"string","description":"Wrapper class name","required":false},"label":{"type":"string","description":"Visible label text above the select","required":false},"helperText":{"type":"string","description":"Helper text shown below the select","required":false},"error":{"type":"union","description":"Show error styling. When a string is provided, it is displayed as an error message.","required":false},"disabled":{"type":"boolean","description":"Disable the select","default":"false","required":false},"autoComplete":{"type":"string","description":"Browser autofill hint for the hidden input","required":false},"form":{"type":"string","description":"ID of the form that owns the hidden input","required":false},"inputRef":{"type":"union","description":"Ref to the hidden input element","required":false},"readOnly":{"type":"boolean","description":"Whether the user cannot choose a different option","required":false}},"relations":[{"component":"Menu","relationship":"alternative","note":"Use Menu for action-based dropdowns"},{"component":"Input","relationship":"sibling","note":"Use Input for free-form text entry"},{"component":"Checkbox","relationship":"alternative","note":"Use Checkbox group for multiple selections"}],"variants":[{"name":"Default","description":"Basic select dropdown","code":"<StatefulSelect placeholder=\"Select a fruit\">\n  <Select.Trigger />\n  <Select.Content>\n    <Select.Item value=\"apple\">Apple</Select.Item>\n    <Select.Item value=\"banana\">Banana</Select.Item>\n    <Select.Item value=\"orange\">Orange</Select.Item>\n    <Select.Item value=\"grape\">Grape</Select.Item>\n  </Select.Content>\n</StatefulSelect>"},{"name":"With Groups","description":"Options organized into groups","code":"<StatefulSelect placeholder=\"Select a country\">\n  <Select.Trigger />\n  <Select.Content>\n    <Select.Group>\n      <Select.GroupLabel>North America</Select.GroupLabel>\n      <Select.Item value=\"us\">United States</Select.Item>\n      <Select.Item value=\"ca\">Canada</Select.Item>\n      <Select.Item value=\"mx\">Mexico</Select.Item>\n    </Select.Group>\n    <Select.Group>\n      <Select.GroupLabel>Europe</Select.GroupLabel>\n      <Select.Item value=\"uk\">United Kingdom</Select.Item>\n      <Select.Item value=\"de\">Germany</Select.Item>\n      <Select.Item value=\"fr\">France</Select.Item>\n    </Select.Group>\n  </Select.Content>\n</StatefulSelect>"},{"name":"With Label and Helper Text","description":"Select with built-in label and helper text","code":"<StatefulSelect\n  label=\"Timezone\"\n  placeholder=\"Select a timezone\"\n  helperText=\"Used for reminders and calendar notifications.\"\n>\n  <Select.Trigger />\n  <Select.Content>\n    <Select.Item value=\"pt\">Pacific Time</Select.Item>\n    <Select.Item value=\"mt\">Mountain Time</Select.Item>\n    <Select.Item value=\"ct\">Central Time</Select.Item>\n    <Select.Item value=\"et\">Eastern Time</Select.Item>\n  </Select.Content>\n</StatefulSelect>"},{"name":"Error State","description":"Validation error with message","code":"<Select\n  label=\"Country\"\n  placeholder=\"Select a country\"\n  error=\"Please select a country\"\n>\n  <Select.Trigger />\n  <Select.Content>\n    <Select.Item value=\"us\">United States</Select.Item>\n    <Select.Item value=\"uk\">United Kingdom</Select.Item>\n  </Select.Content>\n</Select>"},{"name":"With Disabled Options","description":"Some options are disabled","code":"<StatefulSelect placeholder=\"Select a plan\">\n  <Select.Trigger />\n  <Select.Content>\n    <Select.Item value=\"free\">Free</Select.Item>\n    <Select.Item value=\"pro\">Pro</Select.Item>\n    <Select.Item value=\"enterprise\" disabled>Enterprise (Contact Sales)</Select.Item>\n  </Select.Content>\n</StatefulSelect>"},{"name":"Scrollable List","description":"Long list with scroll hint — shows 4 items with half-peek of the 5th to indicate more","code":"<StatefulSelect placeholder=\"Select a timezone\">\n  <Select.Trigger />\n  <Select.Content>\n    <Select.Item value=\"utc-8\">Pacific Time (UTC-8)</Select.Item>\n    <Select.Item value=\"utc-7\">Mountain Time (UTC-7)</Select.Item>\n    <Select.Item value=\"utc-6\">Central Time (UTC-6)</Select.Item>\n    <Select.Item value=\"utc-5\">Eastern Time (UTC-5)</Select.Item>\n    <Select.Item value=\"utc-4\">Atlantic Time (UTC-4)</Select.Item>\n    <Select.Item value=\"utc+0\">GMT (UTC+0)</Select.Item>\n    <Select.Item value=\"utc+1\">Central European (UTC+1)</Select.Item>\n    <Select.Item value=\"utc+5.5\">India Standard (UTC+5:30)</Select.Item>\n    <Select.Item value=\"utc+8\">China Standard (UTC+8)</Select.Item>\n    <Select.Item value=\"utc+9\">Japan Standard (UTC+9)</Select.Item>\n  </Select.Content>\n</StatefulSelect>"},{"name":"Custom Max Visible Items","description":"Show 6 items before scrolling with half-peek scroll hint","code":"<StatefulSelect placeholder=\"Select a color\">\n  <Select.Trigger />\n  <Select.Content maxVisibleItems={6}>\n    <Select.Item value=\"red\">Red</Select.Item>\n    <Select.Item value=\"orange\">Orange</Select.Item>\n    <Select.Item value=\"yellow\">Yellow</Select.Item>\n    <Select.Item value=\"green\">Green</Select.Item>\n    <Select.Item value=\"blue\">Blue</Select.Item>\n    <Select.Item value=\"indigo\">Indigo</Select.Item>\n    <Select.Item value=\"violet\">Violet</Select.Item>\n    <Select.Item value=\"pink\">Pink</Select.Item>\n    <Select.Item value=\"teal\">Teal</Select.Item>\n    <Select.Item value=\"cyan\">Cyan</Select.Item>\n  </Select.Content>\n</StatefulSelect>"},{"name":"Disabled","description":"Disabled select","code":"<Select disabled placeholder=\"Select an option\">\n  <Select.Trigger />\n  <Select.Content>\n    <Select.Item value=\"1\">Option 1</Select.Item>\n  </Select.Content>\n</Select>"},{"name":"Options Prop","description":"Convenience API for simple lists without manual Select.Item composition","code":"<StatefulSelect\n  placeholder=\"Select a team\"\n  options={[\n    { value: 'eng', label: 'Engineering' },\n    { value: 'design', label: 'Design' },\n    { value: 'pm', label: 'Product' },\n  ]}\n/>"}],"contract":{"propsSummary":["value: string | null - controlled selected value","onValueChange: (value: string | null) => void - selection handler","onChange: (value: string | null) => void - alias for onValueChange","label: string - visible label text","helperText: string - helper text below field","error: boolean | string - error styling and message","placeholder: string - placeholder text","disabled: boolean - disable select","size: sm|md|lg (default: md)","variant: field|ghost (default: field) - ghost is borderless, for toolbars","options: SelectOption[] - convenience API for simple option lists","maxVisibleItems: number - max visible options before scrolling (default 4)","Select.Trigger accepts an icon prop for a leading adornment"],"a11yRules":["A11Y_SELECT_KEYBOARD","A11Y_SELECT_LABEL"]},"ai":{"compositionPattern":"compound","subComponents":["Trigger","Content","Item","Group","GroupLabel"],"requiredChildren":["Trigger","Content"],"commonPatterns":["<Select placeholder=\"Select option\" options={[{ value: 'opt1', label: 'Option 1' }, { value: 'opt2', label: 'Option 2' }]} />","<Select placeholder=\"Select option\"><Select.Trigger /><Select.Content><Select.Item value=\"opt1\">{label1}</Select.Item><Select.Item value=\"opt2\">{label2}</Select.Item></Select.Content></Select>"]},"propsSummary":["children: node","value: string","defaultValue: string","onValueChange: function","onChange: function","open: boolean","defaultOpen: boolean","onOpenChange: function","required: boolean","name: string","placeholder: string","options: array","size: sm|md|lg (default: md)","variant: field|ghost (default: field)","className: string","label: string","helperText: string","error: union","disabled: boolean"],"sourcePath":"src/components/Select/index.tsx","exportName":"Select","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:03.116Z"},"performance":{"bundleSize":3443,"rawSize":9003,"complexity":"lightweight","budgetPercent":22,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Select (self)","bytes":4809,"percent":53},{"path":"src/recipes/popup.ts","bytes":2846,"percent":32},{"path":"src/utils/aria.ts","bytes":433,"percent":5},{"path":"ComponentDefaults","bytes":198,"percent":2}]}},"Separator":{"filePath":"src/components/Separator/index.tsx","meta":{"name":"Separator","description":"Visual divider between content sections. Use to create clear visual boundaries and improve content organization.","category":"layout","tags":["separator","divider","hr","line","layout"],"status":"stable"},"usage":{"when":["Dividing content sections","Separating groups of related items","Creating visual breathing room","Labeled section breaks"],"whenNot":["Creating grid layouts (use CSS Grid)","Decorative borders (use CSS)","Spacing alone is sufficient"],"guidelines":["Use sparingly - too many separators create visual noise","Consider if spacing alone would work","Use soft variant for subtle separation","Labeled separators work well for major section breaks"],"accessibility":["Uses role=\"separator\" for semantic meaning","Decorative separators should be aria-hidden"]},"props":{"orientation":{"type":"enum","description":"Direction of the separator","default":"horizontal","required":false,"values":["horizontal","vertical"]},"spacing":{"type":"enum","description":"Margin around the separator","default":"none","required":false,"values":["none","sm","md","lg"]},"soft":{"type":"boolean","description":"Softer, lighter appearance","default":"false","required":false},"label":{"type":"string","description":"Optional text label (horizontal only)","required":false},"style":{"type":"object","description":"","required":false}},"relations":[{"component":"Card","relationship":"sibling","note":"Cards provide stronger visual grouping"}],"variants":[{"name":"Default","description":"Basic horizontal separator","code":"<div style={{ width: '300px' }}>\n  <p>Content above</p>\n  <Separator spacing=\"md\" />\n  <p>Content below</p>\n</div>"},{"name":"With Label","description":"Labeled section divider","code":"<div style={{ width: '300px' }}>\n  <p>First section</p>\n  <Separator label=\"Or\" spacing=\"md\" />\n  <p>Second section</p>\n</div>"},{"name":"Soft","description":"Subtle separator","code":"<div style={{ width: '300px' }}>\n  <p>Content above</p>\n  <Separator soft spacing=\"md\" />\n  <p>Content below</p>\n</div>"},{"name":"Vertical","description":"Vertical separator between elements","code":"<div style={{ display: 'flex', alignItems: 'center', gap: '16px', height: '40px' }}>\n  <span>Item 1</span>\n  <Separator orientation=\"vertical\" />\n  <span>Item 2</span>\n  <Separator orientation=\"vertical\" />\n  <span>Item 3</span>\n</div>"},{"name":"Spacing Options","description":"Different spacing sizes","code":"<div style={{ width: '300px' }}>\n  <p>No spacing</p>\n  <Separator spacing=\"none\" />\n  <p>Small spacing</p>\n  <Separator spacing=\"sm\" />\n  <p>Medium spacing</p>\n  <Separator spacing=\"md\" />\n  <p>Large spacing</p>\n  <Separator spacing=\"lg\" />\n  <p>End</p>\n</div>"}],"contract":{"propsSummary":["orientation: horizontal|vertical - direction","spacing: none|sm|md|lg - margin","soft: boolean - lighter appearance","label: string - centered label text"],"a11yRules":["A11Y_SEPARATOR_ROLE"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["orientation: horizontal|vertical (default: horizontal)","spacing: none|sm|md|lg (default: none)","soft: boolean (default: false)","label: string","style: object"],"sourcePath":"src/components/Separator/index.tsx","exportName":"Separator","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:03.327Z"},"performance":{"bundleSize":750,"rawSize":1542,"complexity":"lightweight","budgetPercent":5,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Separator (self)","bytes":951,"percent":62}]}},"Sidebar":{"filePath":"src/components/Sidebar/index.tsx","meta":{"name":"Sidebar","description":"Responsive navigation sidebar with collapsible desktop mode and mobile drawer behavior.","category":"navigation","tags":["sidebar","navigation","drawer","menu","layout"],"status":"stable"},"usage":{"when":["Primary app navigation with multiple sections","Dashboard layouts requiring persistent navigation","Admin interfaces with hierarchical menu structure","Apps that need both mobile drawer and desktop sidebar"],"whenNot":["Simple websites with few pages (use header nav)","Content-focused sites where navigation is secondary","Single-page applications with no navigation needs","Mobile-only apps where bottom navigation is preferred"],"guidelines":["Group related items into sections with clear labels","Use icons for all items to support collapsed mode","Limit nesting to 2 levels maximum","Place most frequently used items at the top","Use badges sparingly for notifications or counts","The `active` prop on items should be controlled by your app based on current route","Use activeIndicator=\"end\" when the product language calls for a trailing status dot instead of the default start rail","Use `collapsedContent` on Header to show just a logo icon when collapsed","Submenus are hidden when collapsed - use tooltips for navigation hints instead","Use SidebarProvider to enable external triggers and keyboard shortcuts","Use asChild with routing libraries (Next.js Link, React Router NavLink)","Sidebar.Item and Sidebar.SubItem onClick handlers receive the click event object","Use `multiline` on Sidebar.Item when the row is a list entry rather than a nav link — a title over a status or preview line. Without it the label is one truncating line","Use Sidebar.MenuSkeleton while loading navigation data"],"accessibility":["Uses semantic <nav> element with aria-label","aria-current=\"page\" on active items","aria-expanded on items with submenus","Escape key closes mobile drawer","Cmd/Ctrl+B keyboard shortcut toggles sidebar (when using SidebarProvider)","Focus trap in mobile drawer mode","Minimum 44px touch targets"]},"props":{"children":{"type":"node","description":"Sidebar content (use Sidebar.Header, Sidebar.Nav, Sidebar.Section, etc.)","required":true},"collapsed":{"type":"boolean","description":"Icon-only mode for desktop (controlled)","required":false},"defaultCollapsed":{"type":"boolean","description":"Initial collapsed state (uncontrolled)","default":"false","required":false},"onCollapsedChange":{"type":"function","description":"Called when collapsed state changes","required":false},"open":{"type":"boolean","description":"Mobile drawer open state (controlled)","required":false},"defaultOpen":{"type":"boolean","description":"Initial open state (uncontrolled)","default":"false","required":false},"onOpenChange":{"type":"function","description":"Called when open state changes","required":false},"width":{"type":"string","description":"Width of expanded sidebar","default":"240px","required":false},"collapsedWidth":{"type":"string","description":"Width when collapsed","default":"var(--fui-navigation-sidebar-collapsed-width, 56px)","required":false},"position":{"type":"enum","description":"Sidebar position","default":"left","required":false,"values":["left","right"]},"collapsible":{"type":"enum","description":"Collapse behavior mode","default":"icon","required":false,"values":["icon","offcanvas","none"]},"activeIndicator":{"type":"enum","description":"Placement of the active-item affordance","default":"start","required":false,"values":["start","end"]},"style":{"type":"object","description":"","required":false}},"relations":[{"component":"Tabs","relationship":"alternative","note":"Use Tabs for in-page section navigation"},{"component":"Menu","relationship":"composition","note":"Use Menu for contextual actions within sidebar"}],"variants":[{"name":"Default","description":"Standard sidebar with navigation sections. The `active` prop highlights the current page.","code":"<Sidebar>\n  <Sidebar.Header>\n    <Logo />\n    <span>Acme App</span>\n  </Sidebar.Header>\n  <Sidebar.Nav>\n    <Sidebar.Section>\n      <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>\n      <Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>\n      <Sidebar.Item icon={<UsersIcon />}>Team</Sidebar.Item>\n      <Sidebar.Item icon={<FolderIcon />}>Projects</Sidebar.Item>\n    </Sidebar.Section>\n    <Sidebar.Section label=\"Settings\">\n      <Sidebar.Item icon={<GearIcon />}>Preferences</Sidebar.Item>\n      <Sidebar.Item icon={<HelpIcon />}>Help</Sidebar.Item>\n    </Sidebar.Section>\n  </Sidebar.Nav>\n  <Sidebar.Footer>\n    <Sidebar.CollapseToggle />\n  </Sidebar.Footer>\n</Sidebar>"},{"name":"Collapsed","description":"Icon-only collapsed state. Header shows only logo, tooltips appear on hover.","code":"function App() {\n  const [collapsed, setCollapsed] = useState(true);\n\n  return (\n    <Sidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>\n      <Sidebar.Header collapsedContent={<Logo />}>\n        <Logo />\n        <span>Acme App</span>\n      </Sidebar.Header>\n      <Sidebar.Nav>\n        <Sidebar.Section>\n          <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>\n          <Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n      <Sidebar.Footer>\n        <Sidebar.CollapseToggle />\n      </Sidebar.Footer>\n    </Sidebar>\n  );\n}"},{"name":"With Badges","description":"Navigation items with notification badges for counts or alerts.","code":"<Sidebar>\n  <Sidebar.Nav>\n    <Sidebar.Section>\n      <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>\n      <Sidebar.Item icon={<ChartIcon />} badge=\"3\">Analytics</Sidebar.Item>\n      <Sidebar.Item icon={<UsersIcon />} badge=\"12\">Team</Sidebar.Item>\n      <Sidebar.Item icon={<FolderIcon />}>Projects</Sidebar.Item>\n    </Sidebar.Section>\n  </Sidebar.Nav>\n</Sidebar>"},{"name":"With Submenu","description":"Nested navigation with expandable sections. Use defaultExpanded for initial state without manual state tracking.","code":"<Sidebar>\n  <Sidebar.Nav>\n    <Sidebar.Section>\n      <Sidebar.Item icon={<HomeIcon />}>Dashboard</Sidebar.Item>\n      {/* Use defaultExpanded for uncontrolled mode - no state needed! */}\n      <Sidebar.Item icon={<FolderIcon />} hasSubmenu defaultExpanded>\n        Projects\n      </Sidebar.Item>\n      <Sidebar.Submenu>\n        <Sidebar.SubItem active>Website Redesign</Sidebar.SubItem>\n        <Sidebar.SubItem>Mobile App</Sidebar.SubItem>\n        <Sidebar.SubItem>API Integration</Sidebar.SubItem>\n      </Sidebar.Submenu>\n      {/* Multiple submenus work without tracking separate state */}\n      <Sidebar.Item icon={<UsersIcon />} hasSubmenu>\n        Team\n      </Sidebar.Item>\n      <Sidebar.Submenu>\n        <Sidebar.SubItem>Engineering</Sidebar.SubItem>\n        <Sidebar.SubItem>Design</Sidebar.SubItem>\n      </Sidebar.Submenu>\n    </Sidebar.Section>\n  </Sidebar.Nav>\n</Sidebar>"},{"name":"With Disabled Items","description":"Some navigation items are disabled for permissions or feature flags.","code":"<Sidebar>\n  <Sidebar.Nav>\n    <Sidebar.Section>\n      <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>\n      <Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>\n      <Sidebar.Item icon={<UsersIcon />} disabled>\n        Team (Coming Soon)\n      </Sidebar.Item>\n      <Sidebar.Item icon={<FolderIcon />} disabled>\n        Projects (Upgrade)\n      </Sidebar.Item>\n    </Sidebar.Section>\n  </Sidebar.Nav>\n</Sidebar>"},{"name":"With Provider & External Trigger","description":"SidebarProvider enables external triggers and keyboard shortcuts (Cmd/Ctrl+B).","code":"function App() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <Sidebar.Header>\n          <Logo />\n          <span>Acme App</span>\n          <Sidebar.CollapseToggle />\n        </Sidebar.Header>\n        {/* sidebar nav */}\n      </Sidebar>\n      <MainContent />\n    </SidebarProvider>\n  );\n}\n\nfunction MainContent() {\n  const { toggleSidebar, state } = useSidebar();\n  return (\n    <main>\n      <p>State: {state}</p>\n      <button onClick={toggleSidebar}>Toggle</button>\n    </main>\n  );\n}"},{"name":"With asChild (Polymorphic)","description":"Use asChild to render items as custom elements like Next.js Link or React Router NavLink.","code":"import { Link } from 'next/link';\n\n<Sidebar>\n  <Sidebar.Nav>\n    <Sidebar.Section>\n      <Sidebar.Item icon={<HomeIcon />} active asChild>\n        <Link href=\"/dashboard\">Dashboard</Link>\n      </Sidebar.Item>\n      <Sidebar.Item icon={<ChartIcon />} asChild>\n        <Link href=\"/analytics\">Analytics</Link>\n      </Sidebar.Item>\n    </Sidebar.Section>\n  </Sidebar.Nav>\n</Sidebar>"},{"name":"With Section Action","description":"Section headers can include action buttons for quick actions like \"Add Project\".","code":"<Sidebar>\n  <Sidebar.Nav>\n    <Sidebar.Section\n      label=\"Projects\"\n      action={\n        <Sidebar.SectionAction aria-label=\"Add project\" onClick={handleAdd}>\n          <PlusIcon />\n        </Sidebar.SectionAction>\n      }\n    >\n      <Sidebar.Item icon={<FolderIcon />}>Website Redesign</Sidebar.Item>\n      <Sidebar.Item icon={<FolderIcon />}>Mobile App</Sidebar.Item>\n    </Sidebar.Section>\n  </Sidebar.Nav>\n</Sidebar>"},{"name":"With Loading Skeleton","description":"Show skeleton placeholders while navigation data is loading.","code":"<Sidebar>\n  <Sidebar.Nav>\n    {loading ? (\n      <Sidebar.MenuSkeleton count={6} />\n    ) : (\n      <Sidebar.Section>\n        <Sidebar.Item icon={<HomeIcon />}>Dashboard</Sidebar.Item>\n        {/* ... */}\n      </Sidebar.Section>\n    )}\n  </Sidebar.Nav>\n</Sidebar>"},{"name":"With Rail Toggle","description":"Add a Rail component for a subtle drag-handle style toggle at the sidebar edge. Hover to reveal, click to toggle.","code":"<Sidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>\n  <Sidebar.Header>{/* ... */}</Sidebar.Header>\n  <Sidebar.Nav>{/* ... */}</Sidebar.Nav>\n  <Sidebar.Footer>\n    <Sidebar.CollapseToggle />\n  </Sidebar.Footer>\n  <Sidebar.Rail />\n</Sidebar>"},{"name":"Offcanvas Collapsed","description":"Offcanvas mode hides the sidebar completely when collapsed, but the toggle button remains visible as a floating button so the user can always re-expand.","code":"function App() {\n  const [collapsed, setCollapsed] = useState(true);\n\n  return (\n    <Sidebar collapsed={collapsed} onCollapsedChange={setCollapsed} collapsible=\"offcanvas\">\n      <Sidebar.Header collapsedContent={<Logo />}>\n        <Logo />\n        <span>Acme App</span>\n      </Sidebar.Header>\n      <Sidebar.Nav>\n        <Sidebar.Section>\n          <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>\n          <Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n      <Sidebar.Footer>\n        <Sidebar.CollapseToggle />\n      </Sidebar.Footer>\n    </Sidebar>\n  );\n}"}],"contract":{"propsSummary":["collapsed: boolean - icon-only desktop mode","open: boolean - mobile drawer state","width: string - expanded width (default: 240px)","position: left|right - sidebar position","active: boolean - set on Sidebar.Item to mark current page (app-controlled)","Sidebar.Item/SubItem onClick: (event) => void - click handler receives mouse event"],"a11yRules":["A11Y_NAV_LANDMARK","A11Y_FOCUS_TRAP","A11Y_ESCAPE_CLOSE"]},"ai":{"compositionPattern":"compound","subComponents":["Header","Nav","Section","SectionAction","Item","SubItem","Submenu","Footer","Trigger","Overlay","CollapseToggle","Rail","MenuSkeleton"],"requiredChildren":["Nav"],"commonPatterns":["<Sidebar><Sidebar.Header>{logo}</Sidebar.Header><Sidebar.Nav><Sidebar.Section><Sidebar.Item icon={icon} active>{label}</Sidebar.Item></Sidebar.Section></Sidebar.Nav><Sidebar.Footer><Sidebar.CollapseToggle /></Sidebar.Footer></Sidebar>"]},"propsSummary":["children: node (required)","collapsed: boolean","defaultCollapsed: boolean (default: false)","onCollapsedChange: function","open: boolean","defaultOpen: boolean (default: false)","onOpenChange: function","width: string (default: 240px)","collapsedWidth: string (default: 56px)","position: left|right (default: left)","collapsible: icon|offcanvas|none (default: icon)","activeIndicator: start|end (default: start)","style: object"],"sourcePath":"src/components/Sidebar/index.tsx","exportName":"Sidebar","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:03.784Z"},"performance":{"bundleSize":8724,"rawSize":26409,"complexity":"moderate","budgetPercent":57,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Sidebar (self)","bytes":11928,"percent":45},{"path":"src/utils/keyboard-shortcuts.ts","bytes":3887,"percent":15},{"path":"Collapsible","bytes":2544,"percent":10},{"path":"ScrollArea","bytes":2508,"percent":9},{"path":"Tooltip","bytes":1457,"percent":6},{"path":"Skeleton","bytes":1281,"percent":5},{"path":"Badge","bytes":1061,"percent":4},{"path":"src/utils/a11y.tsx","bytes":779,"percent":3}]}},"Skeleton":{"filePath":"src/components/Skeleton/index.tsx","meta":{"name":"Skeleton","description":"Placeholder loading state for content","category":"feedback","tags":["loading","placeholder","skeleton","shimmer"],"status":"stable"},"usage":{"when":["Content is loading asynchronously","Preventing layout shift during data fetching","Providing visual feedback that content is coming","Improving perceived performance"],"whenNot":["Short loading times (< 300ms)","When spinner is more appropriate","Background operations without visible impact"],"guidelines":["Match skeleton shape to expected content","Use semantic variants (text, heading, avatar) for consistency","Maintain similar dimensions to loaded content","Avoid too many skeleton elements - simplify complex layouts","Skeleton and Skeleton.Text forward DOM props (id, aria-*, data-*, handlers)"],"accessibility":["Skeletons are decorative - use aria-hidden","Announce loading state separately if needed","Ensure sufficient contrast for the animation"]},"props":{"variant":{"type":"enum","description":"Semantic variant that auto-sizes","default":"rect","required":false,"values":["text","heading","avatar","button","input","rect"]},"size":{"type":"enum","description":"Size for avatar/button variants","default":"md","required":false,"values":["sm","md","lg"]},"width":{"type":"union","description":"Custom width (string or number)","required":false},"height":{"type":"union","description":"Custom height (string or number)","required":false},"fill":{"type":"boolean","description":"Fill parent container","default":"false","required":false},"radius":{"type":"enum","description":"Border radius override","required":false,"values":["sm","md","lg","none","full"]},"static":{"type":"boolean","description":"Disable skeleton animation","default":"false","required":false}},"relations":[{"component":"Progress","relationship":"alternative","note":"Use Progress for determinate loading"}],"variants":[{"name":"Default","description":"Basic rectangle skeleton","code":"<Skeleton width={200} height={20} />"},{"name":"Text Lines","description":"Multi-line text placeholder","code":"<Skeleton.Text lines={3} />"},{"name":"Semantic Variants","description":"Pre-configured shapes for common elements","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--fui-space-2)' }}>\n  <Skeleton variant=\"heading\" width={200} />\n  <Skeleton variant=\"text\" width=\"100%\" />\n  <Skeleton variant=\"text\" width=\"80%\" />\n</div>"},{"name":"Avatar Skeleton","description":"Circular placeholder for avatars","code":"<div style={{ display: 'flex', gap: 'var(--fui-space-1)', alignItems: 'center' }}>\n  <Skeleton.Circle size=\"sm\" />\n  <Skeleton.Circle size=\"md\" />\n  <Skeleton.Circle size=\"lg\" />\n</div>"},{"name":"Card Skeleton","description":"Composed skeleton for a card layout","code":"<div style={{ width: 300, padding: 'var(--fui-space-2)', border: '1px solid var(--fui-border)', borderRadius: 'var(--fui-radius-lg)' }}>\n  <Skeleton variant=\"rect\" height={120} radius=\"md\" />\n  <div style={{ marginTop: 'var(--fui-space-2)' }}>\n    <Skeleton variant=\"heading\" width=\"60%\" />\n  </div>\n  <div style={{ marginTop: 'var(--fui-space-1)' }}>\n    <Skeleton.Text lines={2} />\n  </div>\n</div>"}],"contract":{"propsSummary":["variant: text|heading|avatar|button|input|rect","size: sm|md|lg (for avatar/button)","width/height: custom dimensions","fill: boolean - fill parent","Skeleton / Skeleton.Text forward div DOM props"]},"ai":{"compositionPattern":"compound","subComponents":["Text","Circle"]},"propsSummary":["variant: text|heading|avatar|button|input|rect (default: rect)","size: sm|md|lg (default: md)","width: union","height: union","fill: boolean (default: false)","radius: sm|md|lg|none|full","static: boolean (default: false)"],"sourcePath":"src/components/Skeleton/index.tsx","exportName":"Skeleton","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:03.952Z"},"performance":{"bundleSize":944,"rawSize":1845,"complexity":"lightweight","budgetPercent":6,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Skeleton (self)","bytes":1268,"percent":69}]}},"Stack":{"filePath":"src/components/Stack/index.tsx","meta":{"name":"Stack","description":"Flexible layout component for arranging children in rows or columns with consistent spacing. Supports responsive direction and gap.","category":"layout","tags":["stack","layout","flex","spacing","responsive"],"status":"stable"},"usage":{"when":["Arranging elements in a row or column","Creating consistent spacing between items","Building responsive layouts","Simple flexbox-based arrangements"],"whenNot":["Complex grid layouts (use Grid)","Button-specific grouping (use ButtonGroup)","Page-level layout (use AppShell)"],"guidelines":["Use semantic elements via the \"as\" prop when appropriate","Leverage responsive props for mobile-first layouts","Keep spacing consistent within related sections","Consider alignment for visual balance","Pass DOM attributes (id, role, aria-*, data-*, event handlers) directly to Stack root when needed"],"accessibility":["Use semantic elements (nav, section, etc.) via \"as\" prop","Maintains source order for screen readers","No accessibility concerns with visual arrangement"]},"props":{"children":{"type":"node","description":"Elements to arrange","required":true},"direction":{"type":"union","description":"Stack direction: \"row\", \"column\", or responsive object","default":"column","required":false},"gap":{"type":"union","description":"Spacing between items: \"none\"|\"xs\"|\"sm\"|\"md\"|\"lg\"|\"xl\", a number (1-8) for space scale, or responsive object","default":"md","required":false},"align":{"type":"enum","description":"Cross-axis alignment","required":false,"values":["start","center","end","stretch","baseline"]},"justify":{"type":"enum","description":"Main-axis alignment","required":false,"values":["start","center","end","between"]},"wrap":{"type":"boolean","description":"Allow items to wrap","default":"false","required":false},"separator":{"type":"node","description":"Render a separator between children. true = default 1px line, or pass a ReactNode for custom separators.","required":false},"as":{"type":"enum","description":"HTML element to render","default":"div","required":false,"values":["div","section","nav","article","aside","header","footer","main","ul","ol"]},"className":{"type":"string","description":"","required":false},"style":{"type":"object","description":"","required":false}},"relations":[{"component":"Grid","relationship":"alternative","note":"Use Grid for complex 2D layouts"},{"component":"ButtonGroup","relationship":"sibling","note":"ButtonGroup is specialized for buttons"},{"component":"Box","relationship":"sibling","note":"Box for single-element styling"}],"variants":[{"name":"Vertical Stack","description":"Default column layout","code":"<Stack gap=\"sm\">\n  <Badge>Item 1</Badge>\n  <Badge>Item 2</Badge>\n  <Badge>Item 3</Badge>\n</Stack>"},{"name":"Horizontal Stack","description":"Row layout","code":"<Stack direction=\"row\" gap=\"sm\">\n  <Badge>Item 1</Badge>\n  <Badge>Item 2</Badge>\n  <Badge>Item 3</Badge>\n</Stack>"},{"name":"Gap Sizes","description":"Different spacing options","code":"<Stack gap=\"lg\">\n  <Stack direction=\"row\" gap=\"xs\">\n    <Badge variant=\"info\">XS</Badge>\n    <Badge variant=\"info\">Gap</Badge>\n  </Stack>\n  <Stack direction=\"row\" gap=\"sm\">\n    <Badge variant=\"info\">SM</Badge>\n    <Badge variant=\"info\">Gap</Badge>\n  </Stack>\n  <Stack direction=\"row\" gap=\"md\">\n    <Badge variant=\"info\">MD</Badge>\n    <Badge variant=\"info\">Gap</Badge>\n  </Stack>\n  <Stack direction=\"row\" gap=\"lg\">\n    <Badge variant=\"info\">LG</Badge>\n    <Badge variant=\"info\">Gap</Badge>\n  </Stack>\n</Stack>"},{"name":"Numeric Gap","description":"Using number values (1-8) mapped to the spacing scale","code":"<Stack gap=\"lg\">\n  <Stack direction=\"row\" gap={2}>\n    <Badge variant=\"info\">Gap 2</Badge>\n    <Badge variant=\"info\">Gap 2</Badge>\n  </Stack>\n  <Stack direction=\"row\" gap={4}>\n    <Badge variant=\"info\">Gap 4</Badge>\n    <Badge variant=\"info\">Gap 4</Badge>\n  </Stack>\n  <Stack direction=\"row\" gap={6}>\n    <Badge variant=\"info\">Gap 6</Badge>\n    <Badge variant=\"info\">Gap 6</Badge>\n  </Stack>\n</Stack>"},{"name":"Alignment","description":"Cross-axis and main-axis alignment","code":"<Stack gap=\"md\">\n  <Stack direction=\"row\" gap=\"sm\" justify=\"between\" style={{ width: '200px', padding: '8px', background: 'var(--fui-bg-secondary)', borderRadius: '4px' }}>\n    <Badge>Start</Badge>\n    <Badge>End</Badge>\n  </Stack>\n  <Stack direction=\"row\" gap=\"sm\" justify=\"center\" style={{ width: '200px', padding: '8px', background: 'var(--fui-bg-secondary)', borderRadius: '4px' }}>\n    <Badge>Centered</Badge>\n  </Stack>\n</Stack>"},{"name":"Responsive","description":"Direction changes at breakpoints","code":"<Stack\n  direction={{ base: 'column', md: 'row' }}\n  gap={{ base: 'sm', md: 'lg' }}\n>\n  <Button variant=\"secondary\">First</Button>\n  <Button variant=\"secondary\">Second</Button>\n  <Button variant=\"secondary\">Third</Button>\n</Stack>"},{"name":"With Separator","description":"Default line separator between items","code":"<Stack gap=\"md\" separator>\n  <div>Section One</div>\n  <div>Section Two</div>\n  <div>Section Three</div>\n</Stack>"},{"name":"Semantic Element","description":"Using nav element for navigation","code":"<Stack as=\"nav\" direction=\"row\" gap=\"md\">\n  <Button variant=\"ghost\" size=\"sm\">Home</Button>\n  <Button variant=\"ghost\" size=\"sm\">About</Button>\n  <Button variant=\"ghost\" size=\"sm\">Contact</Button>\n</Stack>"}],"contract":{"propsSummary":["direction: row|column|{responsive} - stack direction","gap: none|xs|sm|md|lg|xl|number|{responsive} - spacing (number maps to space scale)","align: start|center|end|stretch|baseline - cross-axis","justify: start|center|end|between - main-axis","wrap: boolean - allow wrapping","separator: boolean|ReactNode - divider between children","as: string - HTML element","Pass-through DOM props supported on the root (id, role, aria-*, data-*, handlers)"],"a11yRules":["A11Y_SEMANTIC_ELEMENTS"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["children: node (required)","direction: union (default: column)","gap: union (default: md)","align: start|center|end|stretch|baseline","justify: start|center|end|between","wrap: boolean (default: false)","separator: node","as: div|section|nav|article|aside|header|footer|main|ul|ol (default: div)","className: string","style: object"],"sourcePath":"src/components/Stack/index.tsx","exportName":"Stack","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:04.310Z"},"performance":{"bundleSize":2146,"rawSize":5254,"complexity":"lightweight","budgetPercent":14,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"src/utils/layout-spacing.ts","bytes":2696,"percent":51},{"path":"Stack (self)","bytes":1983,"percent":38}]}},"Slider":{"filePath":"src/components/Slider/index.tsx","meta":{"name":"Slider","description":"Range input control for selecting a numeric value within a defined range. Supports labels, value display, and custom step intervals.","category":"forms","tags":["slider","range","input","number","control"],"status":"stable"},"usage":{"when":["Selecting a value from a continuous range","Volume or brightness controls","Price range filters","Settings that benefit from visual feedback"],"whenNot":["Precise numeric input (use Input type=\"number\")","Discrete options (use RadioGroup or Select)","Yes/no choices (use Switch)"],"guidelines":["Always provide a label describing what the slider controls","Show the current value when precision matters","Use appropriate min/max values for the context","Consider step size for usability"],"accessibility":["Label is associated with the slider","Keyboard accessible with arrow keys","Current value is announced to screen readers","Uses native slider semantics"]},"props":{"label":{"type":"string","description":"Label text","required":false},"helperText":{"type":"string","description":"Helper text shown below the slider","required":false},"error":{"type":"boolean","description":"Show error styling","default":"false","required":false},"value":{"type":"number","description":"Controlled value","required":false},"defaultValue":{"type":"number","description":"Default value for uncontrolled usage","required":false},"onChange":{"type":"function","description":"Called with new value when changed","required":false},"onValueChange":{"type":"function","description":"Alias for onChange (Radix convention): (value: number) => void","required":false},"min":{"type":"number","description":"Minimum value","default":"0","required":false},"max":{"type":"number","description":"Maximum value","default":"100","required":false},"step":{"type":"number","description":"Step interval","default":"1","required":false},"showValue":{"type":"boolean","description":"Display current value","default":"false","required":false},"showValueOnDrag":{"type":"boolean","description":"Show current value in a floating bubble while dragging the thumb","default":"false","required":false},"valueSuffix":{"type":"string","description":"Suffix after value (e.g., \"%\", \"px\")","default":"","required":false},"disabled":{"type":"boolean","description":"Disable the slider","default":"false","required":false},"name":{"type":"string","description":"","required":false},"aria-label":{"type":"string","description":"Accessible label when visible label is omitted","required":false},"aria-labelledby":{"type":"string","description":"Accessible labelled-by relationship","required":false},"aria-describedby":{"type":"string","description":"Accessible described-by relationship","required":false},"id":{"type":"string","description":"","required":false},"form":{"type":"string","description":"ID of the form that owns the hidden slider input","required":false},"largeStep":{"type":"number","description":"Larger step used for Page Up/Page Down and shift-arrow keyboard input","required":false},"onValueCommitted":{"type":"function","description":"Callback when the user commits a slider value","required":false},"thumbAlignment":{"type":"enum","description":"How the thumb is aligned at the minimum and maximum edges","required":false,"values":["center","edge","edge-client-only"]}},"relations":[{"component":"Input","relationship":"alternative","note":"Use Input for precise numeric entry"},{"component":"Progress","relationship":"sibling","note":"Similar visual, but Progress is read-only"}],"variants":[{"name":"Default","description":"Basic slider with label","code":"<div style={{ width: '300px' }}>\n  <Slider label=\"Volume\" defaultValue={50} />\n</div>"},{"name":"With Value Display","description":"Shows current value alongside the slider","code":"<div style={{ width: '300px' }}>\n  <Slider\n    label=\"Brightness\"\n    defaultValue={75}\n    showValue\n    valueSuffix=\"%\"\n  />\n</div>"},{"name":"Custom Range","description":"Custom min, max, and step values","code":"<div style={{ width: '300px', display: 'flex', flexDirection: 'column', gap: '16px' }}>\n  <Slider\n    label=\"Temperature\"\n    min={60}\n    max={80}\n    step={1}\n    defaultValue={72}\n    showValue\n    valueSuffix=\"°F\"\n  />\n  <Slider\n    label=\"Font Size\"\n    min={12}\n    max={32}\n    step={2}\n    defaultValue={16}\n    showValue\n    valueSuffix=\"px\"\n  />\n</div>"},{"name":"Controlled","description":"Controlled slider with external state","code":"<ControlledSliderDemo />"},{"name":"Drag Value Bubble","description":"Shows a floating value bubble while the thumb is being dragged","code":"<div style={{ width: '300px' }}>\n  <Slider\n    label=\"Mix\"\n    defaultValue={40}\n    showValueOnDrag\n    valueSuffix=\"%\"\n  />\n</div>"},{"name":"With Helper Text","description":"Slider with helper text guidance","code":"<div style={{ width: '300px' }}>\n  <Slider\n    label=\"Quality\"\n    defaultValue={80}\n    showValue\n    valueSuffix=\"%\"\n    helperText=\"Higher quality increases file size\"\n  />\n</div>"},{"name":"Disabled","description":"Disabled slider","code":"<div style={{ width: '300px' }}>\n  <Slider\n    label=\"Locked Setting\"\n    defaultValue={30}\n    showValue\n    disabled\n  />\n</div>"}],"contract":{"propsSummary":["value: number - controlled value","defaultValue: number - initial value","onChange: (value: number) => void - change handler (or onValueChange)","min/max: number - range bounds","step: number - increment size","label: string - field label","helperText: string - helper text below slider","error: boolean - error styling","showValue: boolean - display value","showValueOnDrag: boolean - show value bubble during drag","valueSuffix: string - unit suffix"],"a11yRules":["A11Y_LABEL_REQUIRED","A11Y_KEYBOARD_ACCESSIBLE","A11Y_TARGET_SIZE_MIN"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["label: string","helperText: string","error: boolean (default: false)","value: number","defaultValue: number","onChange: function","onValueChange: function","min: number (default: 0)","max: number (default: 100)","step: number (default: 1)","showValue: boolean (default: false)","showValueOnDrag: boolean (default: false)","valueSuffix: string (default: )","disabled: boolean (default: false)","name: string","aria-label: string","aria-labelledby: string","aria-describedby: string","id: string"],"sourcePath":"src/components/Slider/index.tsx","exportName":"Slider","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:04.141Z"},"performance":{"bundleSize":1217,"rawSize":2657,"complexity":"lightweight","budgetPercent":8,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Slider (self)","bytes":2065,"percent":78}]}},"Table":{"filePath":"src/components/Table/index.tsx","meta":{"name":"Table","description":"Semantic HTML table with compound API. For data-rich tables with sorting and selection, use DataTable.","category":"display","tags":["table","semantic","html","layout"],"status":"stable"},"usage":{"when":["Displaying simple tabular data with semantic HTML","Static data that does not need sorting or selection","Showing structured information with headers and rows","Tables with footers or captions"],"whenNot":["Data that needs sorting (use DataTable)","Data that needs row selection (use DataTable)","Data that needs clickable rows (use DataTable)","Simple lists (use List component)"],"guidelines":["Use Table.HeaderCell for column headers (adds scope=\"col\" by default)","Use Table.Caption for table descriptions (can be visually hidden)","Keep tables simple — use DataTable for interactive features","Consider mobile responsiveness; table scrolls horizontally on small screens"],"accessibility":["Semantic HTML table elements (thead, tbody, tfoot, th, td)","Column headers have scope=\"col\" by default","Caption provides table description for screen readers","Supports visually-hidden caption for screen-reader-only labels"]},"props":{"size":{"type":"enum","description":"Table density","default":"md","required":false,"values":["sm","md","compact"]},"striped":{"type":"boolean","description":"Show alternating row backgrounds","default":"false","required":false},"bordered":{"type":"boolean","description":"Wrap table in a bordered container","default":"false","required":false},"wrapperClassName":{"type":"string","description":"Class name for the outer scroll/wrapper container","required":false},"wrapperProps":{"type":"object","description":"HTML attributes for the outer scroll/wrapper container","required":false},"children":{"type":"node","description":"","required":false},"density":{"type":"enum","description":"Canonical row density.","required":false,"values":["compact","regular","relaxed"]}},"relations":[{"component":"DataTable","relationship":"alternative","note":"Use DataTable for sorting, selection, and TanStack features"}],"variants":[{"name":"Default","description":"Basic semantic table","code":"<Table aria-label=\"Team members\">\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Name</Table.HeaderCell>\n      <Table.HeaderCell>Role</Table.HeaderCell>\n      <Table.HeaderCell>Status</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Alice Johnson</Table.Cell>\n      <Table.Cell>Engineer</Table.Cell>\n      <Table.Cell>Active</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Bob Smith</Table.Cell>\n      <Table.Cell>Designer</Table.Cell>\n      <Table.Cell>Active</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Carol Williams</Table.Cell>\n      <Table.Cell>PM</Table.Cell>\n      <Table.Cell>Away</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"},{"name":"Striped","description":"Alternating row backgrounds for readability","code":"<Table striped aria-label=\"Inventory\">\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Item</Table.HeaderCell>\n      <Table.HeaderCell>Category</Table.HeaderCell>\n      <Table.HeaderCell>Qty</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Widget A</Table.Cell>\n      <Table.Cell>Hardware</Table.Cell>\n      <Table.Cell>120</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Widget B</Table.Cell>\n      <Table.Cell>Software</Table.Cell>\n      <Table.Cell>85</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Widget C</Table.Cell>\n      <Table.Cell>Hardware</Table.Cell>\n      <Table.Cell>200</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Widget D</Table.Cell>\n      <Table.Cell>Software</Table.Cell>\n      <Table.Cell>50</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"},{"name":"Bordered","description":"Table with bordered container","code":"<Table bordered aria-label=\"Pricing\">\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Plan</Table.HeaderCell>\n      <Table.HeaderCell>Price</Table.HeaderCell>\n      <Table.HeaderCell>Features</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Basic</Table.Cell>\n      <Table.Cell>$9/mo</Table.Cell>\n      <Table.Cell>5 projects</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Pro</Table.Cell>\n      <Table.Cell>$29/mo</Table.Cell>\n      <Table.Cell>Unlimited</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"},{"name":"Compact","description":"Small, dense table","code":"<Table size=\"sm\" aria-label=\"Shortcuts\">\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Key</Table.HeaderCell>\n      <Table.HeaderCell>Action</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Ctrl+S</Table.Cell>\n      <Table.Cell>Save</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Ctrl+Z</Table.Cell>\n      <Table.Cell>Undo</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Ctrl+C</Table.Cell>\n      <Table.Cell>Copy</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"},{"name":"With Caption","description":"Table with visible caption","code":"<Table aria-label=\"Q1 results\">\n  <Table.Caption>Quarterly Results (Q1 2026)</Table.Caption>\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Metric</Table.HeaderCell>\n      <Table.HeaderCell>Value</Table.HeaderCell>\n      <Table.HeaderCell>Change</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Revenue</Table.Cell>\n      <Table.Cell>$1.2M</Table.Cell>\n      <Table.Cell>+15%</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Users</Table.Cell>\n      <Table.Cell>24,500</Table.Cell>\n      <Table.Cell>+8%</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"},{"name":"Screen Reader Caption","description":"Visually hidden caption for screen-reader context while keeping visual UI compact","code":"<Table\n  aria-label=\"API keys\"\n  wrapperProps={{ 'data-demo': 'table-wrapper' }}\n  wrapperClassName=\"demo-table-wrapper\"\n>\n  <Table.Caption visuallyHidden>API keys and last-used timestamps</Table.Caption>\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Name</Table.HeaderCell>\n      <Table.HeaderCell>Prefix</Table.HeaderCell>\n      <Table.HeaderCell>Last Used</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Deploy</Table.Cell>\n      <Table.Cell>frg_live_...</Table.Cell>\n      <Table.Cell>2 hours ago</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>CI</Table.Cell>\n      <Table.Cell>frg_test_...</Table.Cell>\n      <Table.Cell>Yesterday</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"},{"name":"With Footer","description":"Table with footer row for totals","code":"<Table bordered aria-label=\"Expenses\">\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Category</Table.HeaderCell>\n      <Table.HeaderCell>Amount</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Marketing</Table.Cell>\n      <Table.Cell>$12,000</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Engineering</Table.Cell>\n      <Table.Cell>$45,000</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Operations</Table.Cell>\n      <Table.Cell>$8,000</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n  <Table.Footer>\n    <Table.Row>\n      <Table.Cell>Total</Table.Cell>\n      <Table.Cell>$65,000</Table.Cell>\n    </Table.Row>\n  </Table.Footer>\n</Table>"}],"contract":{"propsSummary":["size: sm|md - table density","striped: boolean - alternating row backgrounds","bordered: boolean - bordered container","Table.Head, Table.Body, Table.Footer - section wrappers","Table.Row - table row with optional selected prop","Table.HeaderCell - th with scope=\"col\"","Table.Cell - td element","wrapperClassName/wrapperProps - customize outer scroll wrapper","Table.Caption - caption with visuallyHidden prop (hidden is deprecated alias)"],"a11yRules":["A11Y_TABLE_HEADERS","A11Y_TABLE_CAPTION"]},"ai":{"compositionPattern":"compound","subComponents":["Root","Head","Body","Footer","Row","Cell","HeaderCell","Caption"],"commonPatterns":["<Table><Table.Head><Table.Row><Table.HeaderCell>Name</Table.HeaderCell></Table.Row></Table.Head><Table.Body><Table.Row><Table.Cell>Alice</Table.Cell></Table.Row></Table.Body></Table>"],"requiredChildren":["Head","Body","Row","Cell","HeaderCell"]},"propsSummary":["size: sm|md (default: md)","striped: boolean (default: false)","bordered: boolean (default: false)","wrapperClassName: string","wrapperProps: object","children: node"],"sourcePath":"src/components/Table/index.tsx","exportName":"Table","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:04.484Z"},"performance":{"bundleSize":2018,"rawSize":5381,"complexity":"lightweight","budgetPercent":13,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"src/recipes/table-chrome.ts","bytes":2993,"percent":56},{"path":"Table (self)","bytes":1801,"percent":33}]}},"Switch":{"filePath":"src/components/Switch/index.tsx","meta":{"name":"Switch","description":"Binary on/off switch for settings and preferences. Provides immediate visual feedback and is ideal for options that take effect instantly.","category":"forms","tags":["switch","toggle","boolean","settings","preference"],"status":"stable"},"usage":{"when":["Binary settings that take effect immediately (e.g., dark mode, notifications)","Enabling/disabling features in a settings panel","Options where the result is immediately visible","Mobile-friendly boolean inputs"],"whenNot":["Multiple options in a group (use checkbox group)","Selection requires form submission to take effect (use checkbox)","Yes/No questions in forms (use radio buttons)","Complex multi-state options (use select or radio)"],"guidelines":["Switch should always have a visible label explaining what it controls","The \"on\" state should be the positive/enabling action","Changes should take effect immediately - no save button needed","Include helperText for switches whose effect isn't obvious from the label","Group related switches visually in settings panels"],"accessibility":["Uses role=\"switch\" with aria-checked for proper semantics","Must have an accessible label (visible or aria-label)","Focus indicator must be clearly visible","State change must be announced by screen readers"]},"props":{"checked":{"type":"boolean","description":"Whether the switch is in the on state","default":"false","required":false},"defaultChecked":{"type":"boolean","description":"Default checked state (uncontrolled)","required":false},"onCheckedChange":{"type":"function","description":"Called when the switch is toggled: (checked: boolean) => void","required":false},"onChange":{"type":"function","description":"Alias for onCheckedChange: (checked: boolean) => void","required":false},"label":{"type":"string","description":"Visible label text","required":false},"helperText":{"type":"string","description":"Helper text shown below the label (preferred)","required":false},"description":{"type":"string","description":"Deprecated alias for helperText","required":false},"disabled":{"type":"boolean","description":"Whether the switch is non-interactive","default":"false","required":false},"size":{"type":"enum","description":"Switch track size","default":"md","required":false,"values":["sm","md","lg"]},"className":{"type":"string","description":"","required":false},"name":{"type":"string","description":"","required":false},"id":{"type":"string","description":"","required":false},"aria-label":{"type":"string","description":"","required":false},"aria-labelledby":{"type":"string","description":"","required":false},"aria-describedby":{"type":"string","description":"","required":false},"form":{"type":"string","description":"","required":false},"inputRef":{"type":"union","description":"","required":false},"readOnly":{"type":"boolean","description":"","default":"false","required":false},"required":{"type":"boolean","description":"","default":"false","required":false},"uncheckedValue":{"type":"string","description":"","required":false},"value":{"type":"string","description":"","required":false}},"relations":[{"component":"Input","relationship":"sibling","note":"Input handles text/number entry; Switch handles boolean state"},{"component":"Checkbox","relationship":"alternative","note":"Use Checkbox when change requires form submission"}],"variants":[{"name":"Default Off","description":"Switch in the off state","code":"<StatefulSwitch label=\"Email notifications\" />","args":{"label":"Email notifications"}},{"name":"Checked","description":"Switch in the on state","code":"<StatefulSwitch checked label=\"Dark mode\" />","args":{"checked":true,"label":"Dark mode"}},{"name":"With Helper Text","description":"Switch with explanatory helper text","code":"<StatefulSwitch\n  checked\n  label=\"Auto-save\"\n  helperText=\"Automatically save changes as you type\"\n/>","args":{"checked":true,"label":"Auto-save","helperText":"Automatically save changes as you type"}},{"name":"Sizes","description":"Available size variants","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n  <StatefulSwitch size=\"sm\" checked label=\"Small switch\" />\n  <StatefulSwitch size=\"md\" checked label=\"Medium switch (default)\" />\n  <StatefulSwitch size=\"lg\" checked label=\"Large switch\" />\n</div>"},{"name":"Disabled States","description":"Non-interactive switches showing both states","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n  <Switch disabled label=\"Premium feature (upgrade required)\" />\n  <Switch disabled checked label=\"System managed (read-only)\" />\n</div>"},{"name":"Settings Panel","description":"Multiple switches in a realistic settings layout","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '320px' }}>\n  <StatefulSwitch\n    checked\n    label=\"Push notifications\"\n    helperText=\"Receive push notifications on your device\"\n  />\n  <StatefulSwitch\n    checked\n    label=\"Email digest\"\n    helperText=\"Weekly summary of your activity\"\n  />\n  <StatefulSwitch\n    label=\"Marketing emails\"\n    helperText=\"Product updates and promotional offers\"\n  />\n</div>"}],"contract":{"propsSummary":["checked: boolean - on/off state","onCheckedChange: (checked) => void - state change handler","onChange: (checked) => void - alias for onCheckedChange","label: string - visible label text","helperText: string - helper text below label (preferred)","description: string - deprecated alias for helperText","disabled: boolean - non-interactive state","size: sm|md|lg - switch size"],"a11yRules":["A11Y_SWITCH_ROLE","A11Y_SWITCH_LABEL","A11Y_SWITCH_FOCUS","A11Y_TARGET_SIZE_MIN"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["checked: boolean","defaultChecked: boolean","onCheckedChange: function","onChange: function","label: string","helperText: string","description: string","disabled: boolean (default: false)","size: sm|md|lg (default: md)","className: string","name: string","id: string","aria-label: string","aria-labelledby: string","aria-describedby: string"],"sourcePath":"src/components/Switch/index.tsx","exportName":"Switch","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:06.429Z"},"performance":{"bundleSize":1033,"rawSize":2130,"complexity":"lightweight","budgetPercent":7,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Switch (self)","bytes":1238,"percent":58},{"path":"ComponentDefaults","bytes":194,"percent":9},{"path":"src/utils/aria.ts","bytes":109,"percent":5}]}},"TableOfContents":{"filePath":"src/components/TableOfContents/index.tsx","meta":{"name":"TableOfContents","description":"Sticky sidebar navigation for long-form content or filterable lists. Renders a quiet, flush index with nested indentation and an ink-weight active state.","category":"navigation","tags":["toc","table-of-contents","navigation","sidebar","scroll-spy","headings","tree","hierarchy"],"status":"stable"},"usage":{"when":["Long-form content pages (docs, blog posts, articles)","Component documentation with multiple sections","Filterable list sidebars where items are grouped by category","Any page with 3+ headings or nested sections that benefit from quick navigation"],"whenNot":["Short pages with only 1-2 sections","Primary site navigation (use Sidebar or Header)","Step-by-step flows (use Stepper)"],"guidelines":["Pair with a scroll spy hook (e.g., IntersectionObserver) to track active heading","Use TableOfContents.Group to nest items under a labeled, optionally-collapsible parent","The legacy `indent` boolean on Item is preserved for back-compat; prefer Group for new code","Place in a sticky aside for best UX","Heading IDs must match between TOC items and the actual DOM headings","TableOfContents.Item performs smooth scrolling by default; call event.preventDefault() in onClick to override","Group is uncontrolled (defaultOpen=true) by default; pass open + onOpenChange for controlled state"],"accessibility":["Uses <nav aria-label=\"Table of contents\"> for landmark navigation","Active item is marked with aria-current=\"location\"","All items are links with smooth scroll behavior","Group toggle is a real <button> with aria-expanded reflecting open state","Focus-visible ring on keyboard navigation"]},"props":{"children":{"type":"node","description":"TableOfContents.Item or TableOfContents.Group elements","required":true},"label":{"type":"string","description":"Accessible label for the nav landmark","default":"Table of contents","required":false},"title":{"type":"string","description":"Visible title above the list","default":"On This Page","required":false},"hideTitle":{"type":"boolean","description":"Hide the visible title","default":"false","required":false}},"relations":[{"component":"Breadcrumbs","relationship":"complementary","note":"Breadcrumbs show hierarchy, TOC shows page sections"},{"component":"Sidebar","relationship":"complementary","note":"Sidebar for site nav, TOC for in-page nav"},{"component":"Tabs","relationship":"alternative","note":"Tabs for switching views, TOC for scrolling to sections"}],"variants":[{"name":"Default","description":"Basic table of contents with section links","code":"<TableOfContents>\n  <TableOfContents.Item id=\"introduction\">Introduction</TableOfContents.Item>\n  <TableOfContents.Item id=\"getting-started\">Getting Started</TableOfContents.Item>\n  <TableOfContents.Item id=\"installation\" indent>Installation</TableOfContents.Item>\n  <TableOfContents.Item id=\"configuration\" indent>Configuration</TableOfContents.Item>\n  <TableOfContents.Item id=\"api-reference\">API Reference</TableOfContents.Item>\n  <TableOfContents.Item id=\"examples\">Examples</TableOfContents.Item>\n</TableOfContents>"},{"name":"Nested Groups","description":"Filterable list grouped by category with clear nested indentation","code":"<TableOfContents title=\"Components\">\n  <TableOfContents.Item id=\"all\" active>All</TableOfContents.Item>\n  <TableOfContents.Group label=\"Primitives\" trailing={<span>3</span>}>\n    <TableOfContents.Item id=\"button\">Button</TableOfContents.Item>\n    <TableOfContents.Item id=\"card\">Card</TableOfContents.Item>\n    <TableOfContents.Item id=\"input\">Input</TableOfContents.Item>\n  </TableOfContents.Group>\n  <TableOfContents.Group label=\"Custom\" defaultOpen={false}>\n    <TableOfContents.Item id=\"features\">Features</TableOfContents.Item>\n    <TableOfContents.Item id=\"plans\">Plans</TableOfContents.Item>\n  </TableOfContents.Group>\n</TableOfContents>"},{"name":"With Active Item","description":"Active state highlighting the current section","code":"<TableOfContents>\n  <TableOfContents.Item id=\"overview\">Overview</TableOfContents.Item>\n  <TableOfContents.Item id=\"setup\" active>Setup</TableOfContents.Item>\n  <TableOfContents.Item id=\"usage\" indent>Basic Usage</TableOfContents.Item>\n  <TableOfContents.Item id=\"advanced\" indent>Advanced</TableOfContents.Item>\n  <TableOfContents.Item id=\"props\">Props</TableOfContents.Item>\n  <TableOfContents.Item id=\"accessibility\">Accessibility</TableOfContents.Item>\n</TableOfContents>"},{"name":"Custom Title","description":"Table of contents with a custom title","code":"<TableOfContents title=\"Contents\">\n  <TableOfContents.Item id=\"chapter-1\">Chapter 1: The Beginning</TableOfContents.Item>\n  <TableOfContents.Item id=\"chapter-2\">Chapter 2: The Middle</TableOfContents.Item>\n  <TableOfContents.Item id=\"chapter-3\">Chapter 3: The End</TableOfContents.Item>\n</TableOfContents>"},{"name":"No Title","description":"Table of contents without a visible title","code":"<TableOfContents hideTitle>\n  <TableOfContents.Item id=\"section-a\">Section A</TableOfContents.Item>\n  <TableOfContents.Item id=\"section-b\" active>Section B</TableOfContents.Item>\n  <TableOfContents.Item id=\"section-c\">Section C</TableOfContents.Item>\n</TableOfContents>"}],"contract":{"propsSummary":["title: string - visible heading (default \"On This Page\")","hideTitle: boolean - hide the title","label: string - aria-label for nav landmark","TableOfContents.Item id: string - heading ID to link to","TableOfContents.Item active: boolean - highlight the current item with ink and weight","TableOfContents.Item indent: boolean - legacy depth=1 indent for flat lists; prefer Group for new code","TableOfContents.Item leading/trailing: node - optional adornments before/after the label","TableOfContents.Group label: node - header text for the group","TableOfContents.Group defaultOpen / open / onOpenChange - uncontrolled or controlled open state (default open)","TableOfContents.Group collapsible: boolean - render as a static label (default true)","TableOfContents.Group trailing/leading: node - optional adornments on the group header row","Forwards standard nav/anchor DOM props; TableOfContents.Item onClick can prevent default smooth scroll"],"a11yRules":["A11Y_NAV_LANDMARK","A11Y_ARIA_CURRENT","A11Y_ARIA_EXPANDED"]},"ai":{"compositionPattern":"compound","subComponents":["Item","Group"],"requiredChildren":["Item","Group"],"commonPatterns":["<TableOfContents>{headings.map(h => <TableOfContents.Item key={h.id} id={h.id} active={activeId === h.id} indent={h.level === 3}>{h.text}</TableOfContents.Item>)}</TableOfContents>","<TableOfContents>{groups.map(g => <TableOfContents.Group key={g.label} label={g.label} trailing={g.count}>{g.items.map(i => <TableOfContents.Item key={i.id} id={i.id} active={activeId === i.id}>{i.label}</TableOfContents.Item>)}</TableOfContents.Group>)}</TableOfContents>"]},"propsSummary":["children: node (required)","label: string (default: Table of contents)","title: string (default: On This Page)","hideTitle: boolean (default: false)"],"sourcePath":"src/components/TableOfContents/index.tsx","exportName":"TableOfContents","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:04.685Z"},"performance":{"bundleSize":1862,"rawSize":4148,"complexity":"lightweight","budgetPercent":12,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"TableOfContents (self)","bytes":2692,"percent":65},{"path":"Text","bytes":782,"percent":19}]}},"Tabs":{"filePath":"src/components/Tabs/index.tsx","meta":{"name":"Tabs","description":"Organize content into switchable panels. Use for related content that benefits from a compact, navigable layout.","category":"navigation","tags":["tabs","navigation","panels","content-switcher"],"status":"stable"},"usage":{"when":["Organizing related content into sections","Reducing page scrolling by grouping content","Settings pages with multiple categories","Dashboard views with different data perspectives"],"whenNot":["Primary navigation (use sidebar or header nav)","Sequential steps (use Stepper or wizard)","Comparing content side-by-side","Very long lists of options (use Select or Menu)"],"guidelines":["Keep tab labels short (1-2 words)","Order tabs by usage frequency or logical sequence","Avoid more than 5-6 tabs; consider sub-navigation for more","Tab content should be roughly equivalent in scope","Use pills variant for contained sections, underline for page-level tabs"],"accessibility":["Keyboard navigation with arrow keys","Tab panels are properly labeled","Focus management follows WAI-ARIA tabs pattern"]},"props":{"children":{"type":"node","description":"Tab list and panels (use Tabs.List, Tabs.Tab, Tabs.Panel)","required":true},"defaultValue":{"type":"string","description":"Initially active tab (uncontrolled)","required":false},"value":{"type":"string","description":"Controlled active tab value","required":false},"onValueChange":{"type":"function","description":"Called when active tab changes","required":false},"orientation":{"type":"enum","description":"Tab list orientation","default":"horizontal","required":false,"values":["horizontal","vertical"]},"variant":{"type":"enum","description":"Default visual style for Tabs.List (can be overridden on Tabs.List)","default":"underline","required":false,"values":["underline","pills"]},"size":{"type":"enum","description":"Tab control size. Defaults to the component-default control size.","required":false,"values":["sm","md","lg"]}},"relations":[{"component":"Select","relationship":"alternative","note":"Use Select for many options in compact space"},{"component":"Menu","relationship":"alternative","note":"Use Menu for action-based navigation"}],"variants":[{"name":"Underline","description":"Default underline style tabs","code":"<Tabs defaultValue=\"overview\" variant=\"underline\">\n  <Tabs.List>\n    <Tabs.Tab value=\"overview\">Overview</Tabs.Tab>\n    <Tabs.Tab value=\"analytics\">Analytics</Tabs.Tab>\n    <Tabs.Tab value=\"settings\">Settings</Tabs.Tab>\n  </Tabs.List>\n  <Tabs.Panel value=\"overview\">\n    <p>Overview content goes here.</p>\n  </Tabs.Panel>\n  <Tabs.Panel value=\"analytics\">\n    <p>Analytics content goes here.</p>\n  </Tabs.Panel>\n  <Tabs.Panel value=\"settings\">\n    <p>Settings content goes here.</p>\n  </Tabs.Panel>\n</Tabs>"},{"name":"Pills","description":"Pill-style tabs for contained sections","code":"<Tabs defaultValue=\"all\" variant=\"pills\">\n  <Tabs.List>\n    <Tabs.Tab value=\"all\">All</Tabs.Tab>\n    <Tabs.Tab value=\"active\">Active</Tabs.Tab>\n    <Tabs.Tab value=\"archived\">Archived</Tabs.Tab>\n  </Tabs.List>\n  <Tabs.Panel value=\"all\">\n    <p>Showing all items.</p>\n  </Tabs.Panel>\n  <Tabs.Panel value=\"active\">\n    <p>Showing active items only.</p>\n  </Tabs.Panel>\n  <Tabs.Panel value=\"archived\">\n    <p>Showing archived items.</p>\n  </Tabs.Panel>\n</Tabs>"},{"name":"With Disabled","description":"Tabs with a disabled option","code":"<Tabs defaultValue=\"general\" variant=\"underline\">\n  <Tabs.List>\n    <Tabs.Tab value=\"general\">General</Tabs.Tab>\n    <Tabs.Tab value=\"security\">Security</Tabs.Tab>\n    <Tabs.Tab value=\"billing\" disabled>Billing</Tabs.Tab>\n  </Tabs.List>\n  <Tabs.Panel value=\"general\">\n    <p>General settings panel.</p>\n  </Tabs.Panel>\n  <Tabs.Panel value=\"security\">\n    <p>Security settings panel.</p>\n  </Tabs.Panel>\n</Tabs>"},{"name":"List Variant Override","description":"Tabs sets a default variant, and Tabs.List can override it per list","code":"<Tabs defaultValue=\"overview\" variant=\"pills\">\n  <Tabs.List variant=\"underline\">\n    <Tabs.Tab value=\"overview\">Overview</Tabs.Tab>\n    <Tabs.Tab value=\"activity\">Activity</Tabs.Tab>\n  </Tabs.List>\n  <Tabs.Panel value=\"overview\">\n    <p>Root sets pills, but this list overrides to underline.</p>\n  </Tabs.Panel>\n  <Tabs.Panel value=\"activity\">\n    <p>Per-list variant override example.</p>\n  </Tabs.Panel>\n</Tabs>"}],"contract":{"propsSummary":["value: string - controlled active tab","defaultValue: string - initial active tab","onValueChange: (value) => void - tab change handler","variant: underline|pills - default style for Tabs.List","Tabs.List variant?: underline|pills - optional per-list override"],"a11yRules":["A11Y_TABS_KEYBOARD","A11Y_TABS_LABELS"]},"ai":{"compositionPattern":"compound","subComponents":["List","Tab","Panel"],"requiredChildren":["List","Panel"],"commonPatterns":["<Tabs defaultValue=\"tab1\"><Tabs.List><Tabs.Tab value=\"tab1\">{label1}</Tabs.Tab><Tabs.Tab value=\"tab2\">{label2}</Tabs.Tab></Tabs.List><Tabs.Panel value=\"tab1\">{content1}</Tabs.Panel><Tabs.Panel value=\"tab2\">{content2}</Tabs.Panel></Tabs>"]},"propsSummary":["children: node (required)","defaultValue: string","value: string","onValueChange: function","orientation: horizontal|vertical (default: horizontal)","variant: underline|pills (default: underline)"],"sourcePath":"src/components/Tabs/index.tsx","exportName":"Tabs","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:04.871Z"},"performance":{"bundleSize":1013,"rawSize":2410,"complexity":"lightweight","budgetPercent":7,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Tabs (self)","bytes":1579,"percent":66},{"path":"ComponentDefaults","bytes":193,"percent":8}]}},"Text":{"filePath":"src/components/Text/index.tsx","meta":{"name":"Text","description":"Typography component for rendering text with consistent styling. Supports various sizes, weights, colors, and semantic elements.","category":"display","tags":["text","typography","heading","paragraph","font"],"status":"stable"},"usage":{"when":["Displaying text with specific typography styles","Creating headings, paragraphs, or labels","Text that needs truncation or line clamping","Consistent typography across the application"],"whenNot":["Complex rich text (use a rich text editor)","Code display (use CodeBlock)","Interactive text (use Link or Button)"],"guidelines":["Use semantic elements (h1-h6, p) via the \"as\" prop","Maintain heading hierarchy for accessibility","Use color variants sparingly for visual hierarchy","Consider truncation for user-generated content"],"accessibility":["Use proper heading levels (h1-h6) for document structure","Semantic elements convey meaning to screen readers","Truncated text should have full content in title/tooltip"]},"props":{"children":{"type":"node","description":"Text content","required":true},"as":{"type":"enum","description":"HTML element to render","default":"span","required":false,"values":["h1","h2","h3","h4","h5","h6","p","span","label","div","strong","em","small","mark","del","ins","sub","sup","time","address","blockquote","cite","code","abbr"]},"variant":{"type":"enum","description":"Preset text variant","required":false,"values":["section-label"]},"size":{"type":"enum","description":"Font size. 2xs (10), xs (12), sm/base (14), md (15 prose body), lg (20), xl (24), 2xl (30), 3xl (36 page title), 4xl (48 hero).","required":false,"values":["2xs","xs","sm","base","md","lg","xl","2xl","3xl","4xl"]},"weight":{"type":"enum","description":"Font weight","default":"\"normal\"","required":false,"values":["normal","medium","semibold","bold"]},"color":{"type":"enum","description":"Text color (muted is an alias for tertiary; success/warning/danger are for a run of text that carries a state on its own — prefer Badge or Alert when the state deserves a container)","default":"\"primary\"","required":false,"values":["primary","secondary","tertiary","muted","success","warning","danger"]},"font":{"type":"enum","description":"Font family","default":"sans","required":false,"values":["sans","mono"]},"truncate":{"type":"boolean","description":"Truncate with ellipsis on overflow","required":false},"lineClamp":{"type":"number","description":"Number of lines before truncating (requires truncate)","required":false},"style":{"type":"object","description":"","required":false},"letterSpacing":{"type":"enum","description":"","required":false,"values":["normal","tight","tighter","tightest"]},"role":{"type":"enum","description":"","required":false,"values":["caption","ui-compact","ui-standard","body-compact","body-relaxed","title-sm","title-md","title-lg","code"]},"tabularNums":{"type":"boolean","description":"Use tabular (fixed-width) numerals so digits align in columns. Ideal for\nstat values, tables, timestamps, and any updating number.","required":false}},"relations":[{"component":"Link","relationship":"sibling","note":"Use Link for clickable text"},{"component":"CodeBlock","relationship":"alternative","note":"Use CodeBlock for code display"},{"component":"Badge","relationship":"sibling","note":"Use Badge for labels/tags"}],"variants":[{"name":"Sizes","description":"Different text sizes","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n  <Text size=\"2xs\">Extra extra small (2xs — 10px)</Text>\n  <Text size=\"xs\">Extra small (xs — 12px)</Text>\n  <Text size=\"sm\">Small (sm — 14px)</Text>\n  <Text size=\"base\">Base size (14px)</Text>\n  <Text size=\"md\">Medium prose body (md — 15px)</Text>\n  <Text size=\"lg\">Large (lg — 20px)</Text>\n  <Text size=\"xl\">Extra large (xl — 24px)</Text>\n  <Text size=\"2xl\">Extra extra large (2xl — 30px)</Text>\n  <Text size=\"3xl\">Page title (3xl — 36px)</Text>\n  <Text size=\"4xl\">Hero display (4xl — 48px)</Text>\n</div>"},{"name":"Weights","description":"Different font weights","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n  <Text weight=\"normal\">Normal weight</Text>\n  <Text weight=\"medium\">Medium weight</Text>\n  <Text weight=\"semibold\">Semibold weight</Text>\n  <Text weight=\"bold\">Bold weight</Text>\n</div>"},{"name":"Colors","description":"Different text colors","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n  <Text color=\"primary\">Primary color (default)</Text>\n  <Text color=\"secondary\">Secondary color</Text>\n  <Text color=\"tertiary\">Tertiary color</Text>\n  <Text color=\"muted\">Muted color (alias for tertiary)</Text>\n</div>"},{"name":"Semantic Elements","description":"Using appropriate HTML elements","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n  <Text as=\"h1\" size=\"3xl\" weight=\"semibold\">Heading 1</Text>\n  <Text as=\"h2\" size=\"xl\" weight=\"semibold\">Heading 2</Text>\n  <Text as=\"h3\" size=\"lg\" weight=\"semibold\">Heading 3</Text>\n  <Text as=\"p\" size=\"md\" color=\"secondary\">\n    This is a paragraph of text that demonstrates the Text component\n    with semantic paragraph element.\n  </Text>\n</div>"},{"name":"Monospace","description":"Monospace font for code-like text","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n  <Text font=\"mono\" size=\"sm\">const greeting = \"Hello, World!\";</Text>\n  <Text font=\"mono\" size=\"sm\" color=\"secondary\">npm install @usefragments/ui</Text>\n</div>"},{"name":"Truncation","description":"Text truncation with ellipsis","code":"<div style={{ width: '200px', display: 'flex', flexDirection: 'column', gap: '12px' }}>\n  <Text truncate>\n    This is a very long text that will be truncated with an ellipsis when it overflows.\n  </Text>\n  <Text truncate lineClamp={2}>\n    This text will be clamped to two lines. Any content beyond two lines\n    will be hidden and replaced with an ellipsis at the end.\n  </Text>\n</div>"}],"contract":{"propsSummary":["as: string - HTML element","size: 2xs|xs|sm|base|md|lg|xl|2xl|3xl|4xl - font size (px: 10/12/14/14/15/20/24/30/36/48)","weight: normal|medium|semibold|bold - font weight","color: primary|secondary|tertiary|muted|success|warning|danger - text color (muted = tertiary; semantic colours for inline state)","font: sans|mono - font family","truncate: boolean - enable truncation","lineClamp: number - max lines"],"a11yRules":["A11Y_HEADING_HIERARCHY","A11Y_SEMANTIC_ELEMENTS"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["children: node (required)","as: h1|h2|h3|h4|h5|h6|p|span|label|div|strong|em|small|mark|del|ins|sub|sup|time|address|blockquote|cite|code|abbr (default: span)","variant: section-label","size: 2xs|xs|sm|base|md|lg|xl|2xl|3xl|4xl","weight: normal|medium|semibold|bold (default: \"normal\")","color: primary|secondary|tertiary|muted|success|warning|danger (default: \"primary\")","font: sans|mono (default: sans)","truncate: boolean","lineClamp: number","style: object"],"sourcePath":"src/components/Text/index.tsx","exportName":"Text","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:05.045Z"},"performance":{"bundleSize":771,"rawSize":1355,"complexity":"lightweight","budgetPercent":5,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Text (self)","bytes":782,"percent":58}]}},"Textarea":{"filePath":"src/components/Textarea/index.tsx","meta":{"name":"Textarea","description":"Multi-line text input for longer form content","category":"forms","tags":["input","text","form","multiline"],"status":"stable"},"usage":{"when":["Collecting multi-line text (comments, descriptions)","Free-form text input that may span multiple lines","Message composition fields","Code or content editing"],"whenNot":["Single-line input (use Input)","Rich text editing (use rich text editor)","Selecting from predefined options (use Select)"],"guidelines":["Set appropriate rows for expected content length","Use placeholder to show example format","Show character count when maxLength is set","Consider auto-resize for better UX"],"accessibility":["Always provide a visible label","Use helperText for format hints","Error messages should be descriptive"]},"props":{"value":{"type":"string","description":"Controlled value","required":false},"defaultValue":{"type":"string","description":"Default value for uncontrolled usage","required":false},"placeholder":{"type":"string","description":"Placeholder text","required":false},"rows":{"type":"number","description":"Number of visible text rows","default":"3","required":false},"minRows":{"type":"number","description":"Minimum number of rows when auto-resizing","required":false},"maxRows":{"type":"number","description":"Maximum number of rows when auto-resizing","required":false},"resize":{"type":"enum","description":"Resize behavior","default":"vertical","required":false,"values":["none","vertical","horizontal","both"]},"size":{"type":"enum","description":"Size variant","default":"\"md\"","required":false,"values":["sm","md","lg"]},"disabled":{"type":"boolean","description":"Disabled state","default":"false","required":false},"error":{"type":"boolean","description":"Error state","default":"false","required":false},"success":{"type":"boolean","description":"Whether to show success/validated styling","default":"false","required":false},"showCharCount":{"type":"boolean","description":"Show character counter when maxLength is set","default":"false","required":false},"label":{"type":"string","description":"Label text above the textarea","required":false},"helperText":{"type":"string","description":"Helper text below the textarea","required":false},"onChange":{"type":"function","description":"Called when the textarea value changes","required":false},"onValueChange":{"type":"function","description":"Value-first change callback alias: (value: string) => void","required":false},"onBlur":{"type":"function","description":"Called when textarea loses focus","required":false},"onFocus":{"type":"function","description":"Called when textarea receives focus","required":false},"name":{"type":"string","description":"Form field name","required":false},"maxLength":{"type":"number","description":"Maximum character length","required":false},"required":{"type":"boolean","description":"Required field","required":false},"aria-label":{"type":"string","description":"Accessible label for no-visible-label usage","required":false},"aria-labelledby":{"type":"string","description":"Accessible labelled-by relationship","required":false},"aria-describedby":{"type":"string","description":"Accessible described-by relationship","required":false},"rootProps":{"type":"object","description":"HTML attributes applied to the wrapper element","required":false},"className":{"type":"string","description":"Wrapper class name","required":false},"style":{"type":"object","description":"Wrapper styles","required":false}},"relations":[{"component":"Input","relationship":"alternative","note":"Use Input for single-line text"}],"variants":[{"name":"Default","description":"Basic textarea with label","code":"<Textarea\n  label=\"Description\"\n  placeholder=\"Enter a description...\"\n/>"},{"name":"With Helper Text","description":"Textarea with additional guidance","code":"<Textarea\n  label=\"Bio\"\n  placeholder=\"Tell us about yourself...\"\n  helperText=\"Max 500 characters\"\n  maxLength={500}\n/>"},{"name":"Error State","description":"Textarea showing validation error","code":"<Textarea\n  label=\"Comments\"\n  placeholder=\"Add your comments...\"\n  error\n  helperText=\"This field is required\"\n/>"},{"name":"Disabled","description":"Non-interactive textarea","code":"<Textarea\n  label=\"Notes\"\n  placeholder=\"Cannot edit...\"\n  disabled\n/>"},{"name":"Custom Rows","description":"Textarea with more visible rows","code":"<Textarea\n  label=\"Long Description\"\n  placeholder=\"Enter detailed information...\"\n  rows={6}\n/>"},{"name":"Sizes","description":"Available size variants","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '12px', maxWidth: '400px' }}>\n  <Textarea label=\"Small\" size=\"sm\" placeholder=\"Small textarea\" />\n  <Textarea label=\"Medium\" size=\"md\" placeholder=\"Medium textarea\" />\n  <Textarea label=\"Large\" size=\"lg\" placeholder=\"Large textarea\" />\n</div>"},{"name":"With Root Props","description":"Pass wrapper attributes/styling via rootProps","code":"<Textarea\n  label=\"Notes\"\n  placeholder=\"Add notes...\"\n  rootProps={{ 'data-demo': 'textarea-wrapper' }}\n/>"},{"name":"Success State","description":"Textarea showing validated/success styling","code":"<Textarea\n  label=\"Bio\"\n  value=\"A short bio about myself.\"\n  success\n  helperText=\"Looks great!\"\n/>"},{"name":"With Character Counter","description":"Textarea with character count and maxLength","code":"<Textarea\n  label=\"Bio\"\n  placeholder=\"Tell us about yourself...\"\n  maxLength={200}\n  showCharCount\n/>"}],"contract":{"propsSummary":["value: string - controlled value","rows: number - visible rows (default: 3)","label: string - label text","size: sm|md|lg (default: md)","error: boolean - error state","success: boolean - shows success/validated styling","showCharCount: boolean - show character counter (requires maxLength)","disabled: boolean - disabled state","resize: none|vertical|horizontal|both","onValueChange: (value: string) => void - value-first change callback alias","rootProps: HTMLAttributes<HTMLDivElement> - wrapper element props","...native textarea attributes are supported (readOnly, autoComplete, maxLength, onKeyDown, etc.)"],"a11yRules":["A11Y_LABEL_REQUIRED"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["value: string","defaultValue: string","placeholder: string","rows: number (default: 3)","minRows: number","maxRows: number","resize: none|vertical|horizontal|both (default: vertical)","size: sm|md|lg (default: md)","disabled: boolean (default: false)","error: boolean (default: false)","success: boolean (default: false)","showCharCount: boolean (default: false)","label: string","helperText: string","onChange: function","onValueChange: function","onBlur: function","onFocus: function","name: string","maxLength: number","required: boolean","aria-label: string","aria-labelledby: string","aria-describedby: string","rootProps: object","className: string","style: object"],"sourcePath":"src/components/Textarea/index.tsx","exportName":"Textarea","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:05.217Z"},"performance":{"bundleSize":1292,"rawSize":2713,"complexity":"lightweight","budgetPercent":8,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Textarea (self)","bytes":1813,"percent":67},{"path":"ComponentDefaults","bytes":198,"percent":7},{"path":"src/utils/aria.ts","bytes":110,"percent":4}]}},"Theme":{"filePath":"src/components/Theme/index.tsx","meta":{"name":"Theme","description":"Theme management system with provider, toggle, and hook pattern. Supports light, dark, and system modes with localStorage persistence.","category":"navigation","tags":["theme","dark-mode","light-mode","provider","toggle"],"status":"stable"},"usage":{"when":["Providing theme context to an application","Toggling between light and dark modes","Respecting system color scheme preference","Persisting theme preference across sessions"],"whenNot":["Simple one-off color changes (use CSS variables)","Component-level theming (use component props)"],"guidelines":["Wrap your app with ThemeProvider at the root level","Use useTheme hook to access theme state in components","ThemeToggle cycles through light → dark → system","Use storageKey to customize localStorage key","Set attribute=\"class\" if your CSS uses .dark class instead of data-theme","ThemeToggle forwards DOM props (id, data-*, className, handlers) to the toggle group"],"accessibility":["ThemeToggle button has accessible label indicating current mode","Theme changes are applied via CSS custom properties for smooth transitions","System preference is detected via prefers-color-scheme media query"]},"props":{"children":{"type":"node","description":"Application content","required":true},"defaultMode":{"type":"enum","description":"Default theme mode for uncontrolled usage","default":"system","required":false,"values":["light","dark","system"]},"defaultTheme":{"type":"enum","description":"","required":false,"values":["light","dark","system"]},"mode":{"type":"enum","description":"Controlled theme mode","required":false,"values":["light","dark","system"]},"onModeChange":{"type":"function","description":"Callback when mode changes","required":false},"storageKey":{"type":"string","description":"localStorage key for persistence","default":"fui-theme","required":false},"attribute":{"type":"enum","description":"How to apply theme to DOM","default":"data-theme","required":false,"values":["data-theme","class"]},"componentDefaults":{"type":"object","description":"Default primitive component behavior for the subtree.","required":false}},"relations":[{"component":"AppShell","relationship":"sibling","note":"ThemeProvider typically wraps AppShell"}],"variants":[{"name":"Default","description":"ThemeProvider with system default","code":"<ThemeProvider defaultMode=\"system\">\n  <ThemeDemo />\n</ThemeProvider>"},{"name":"With Toggle","description":"ThemeProvider with toggle button","code":"<ThemeProvider defaultMode=\"light\">\n  <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>\n    <ThemeToggle />\n    <span>Click to cycle themes</span>\n  </div>\n</ThemeProvider>"},{"name":"Toggle Sizes","description":"ThemeToggle in different sizes","code":"<ThemeProvider defaultMode=\"light\">\n  <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>\n    <ThemeToggle size=\"sm\" />\n    <ThemeToggle size=\"md\" />\n    <ThemeToggle size=\"lg\" />\n  </div>\n</ThemeProvider>"}],"contract":{"propsSummary":["defaultMode: light|dark|system - initial theme mode","mode: light|dark|system - controlled mode","onModeChange: (mode) => void - change handler","attribute: data-theme|class - DOM theme attribute","ThemeToggle size: sm|md|lg - toggle button size","ThemeToggle forwards div DOM props to the button group root"],"a11yRules":["A11Y_TARGET_SIZE_MIN"]},"propsSummary":["children: node (required)","defaultMode: light|dark|system","defaultTheme: light|dark|system","mode: light|dark|system","onModeChange: function","storageKey: string (default: fui-theme)","attribute: data-theme|class (default: data-theme)"],"sourcePath":"src/components/Theme/index.tsx","exportName":"ThemeProvider","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:05.406Z"},"ai":{"subComponents":["Root","Provider","Toggle","useTheme"],"compositionPattern":"compound"},"performance":{"bundleSize":2738,"rawSize":6658,"complexity":"lightweight","budgetPercent":18,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"ThemeToggle (self)","bytes":2726,"percent":41},{"path":"(other)","bytes":2690,"percent":40},{"path":"ComponentDefaults","bytes":391,"percent":6},{"path":"Theme","bytes":192,"percent":3}]}},"ThinkingIndicator":{"filePath":"src/components/ThinkingIndicator/index.tsx","meta":{"name":"ThinkingIndicator","description":"Animated indicator showing AI is processing","category":"ai","tags":["thinking","loading","ai","processing","indicator","animation"],"status":"stable"},"usage":{"when":["AI is processing a request and generating a response","Need visual feedback during async AI operations","Want to show multi-step progress for complex AI tasks","Indicating streaming is about to begin"],"whenNot":["Simple loading states (use Progress or Skeleton)","Form submission loading (use Button loading state)","Page-level loading (use Progress or Skeleton)"],"guidelines":["Use active prop to control visibility","Choose variant based on context (dots for chat, spinner for actions)","Enable showElapsed for longer operations","Use steps for multi-step AI workflows (tool calls, research)"],"accessibility":["Uses role=\"status\" and aria-live=\"polite\"","Provides aria-label for screen readers","Animations respect prefers-reduced-motion","Elapsed time uses tabular numbers for stability"]},"props":{"active":{"type":"boolean","description":"Whether thinking is active","default":"true","required":false},"label":{"type":"string","description":"Status text","default":"Thinking...","required":false},"variant":{"type":"enum","description":"Animation style","default":"dots","required":false,"values":["dots","pulse","spinner"]},"showElapsed":{"type":"boolean","description":"Show elapsed time","default":"false","required":false},"steps":{"type":"array","description":"Multi-step progress array","required":false}},"relations":[{"component":"Message","relationship":"sibling","note":"Show ThinkingIndicator while waiting for assistant message"},{"component":"ConversationList","relationship":"parent","note":"Typically placed at bottom of ConversationList"},{"component":"Progress","relationship":"alternative","note":"Use Progress for determinate progress"}],"variants":[{"name":"Dots (Default)","description":"Bouncing dots animation","code":"<ThinkingIndicator variant=\"dots\" label=\"Thinking...\" />"},{"name":"Pulse","description":"Pulsing ring animation","code":"<ThinkingIndicator variant=\"pulse\" label=\"Processing...\" />"},{"name":"Spinner","description":"Rotating spinner animation","code":"<ThinkingIndicator variant=\"spinner\" label=\"Loading...\" />"},{"name":"With Elapsed Time","description":"Shows time since started","code":"<ThinkingIndicator\n  variant=\"dots\"\n  label=\"Generating response...\"\n  showElapsed\n/>"},{"name":"Multi-Step Progress","description":"Shows progress through multiple steps","code":"<ThinkingIndicator\n  variant=\"spinner\"\n  label=\"Working...\"\n  steps={[\n    { id: '1', label: 'Analyzing request', status: 'complete' },\n    { id: '2', label: 'Searching knowledge base', status: 'active' },\n    { id: '3', label: 'Generating response', status: 'pending' },\n  ]}\n/>"},{"name":"With Error Step","description":"Shows a step that encountered an error","code":"<ThinkingIndicator\n  variant=\"spinner\"\n  label=\"Retrying...\"\n  steps={[\n    { id: '1', label: 'Connecting to API', status: 'complete' },\n    { id: '2', label: 'Fetching data', status: 'error' },\n    { id: '3', label: 'Retrying with fallback', status: 'active' },\n  ]}\n/>"},{"name":"Custom Label","description":"Custom status text","code":"<ThinkingIndicator\n  variant=\"dots\"\n  label=\"Claude is writing code...\"\n/>"}],"contract":{"propsSummary":["active: boolean - whether indicator is visible (default: true)","label: string - status text (default: \"Thinking...\")","variant: \"dots\" | \"pulse\" | \"spinner\" - animation style","showElapsed: boolean - show elapsed time","steps: ThinkingStep[] - multi-step progress"],"a11yRules":["A11Y_ARIA_LIVE","A11Y_MOTION_PREFERENCE"]},"ai":{"compositionPattern":"compound","subComponents":["Steps","Step"]},"propsSummary":["active: boolean (default: true)","label: string (default: Thinking...)","variant: dots|pulse|spinner (default: dots)","showElapsed: boolean (default: false)","steps: array"],"sourcePath":"src/components/ThinkingIndicator/index.tsx","exportName":"ThinkingIndicator","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:05.747Z"},"performance":{"bundleSize":1922,"rawSize":5331,"complexity":"lightweight","budgetPercent":13,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"ThinkingIndicator (self)","bytes":2608,"percent":49},{"path":"Loading","bytes":2025,"percent":38}]}},"Toast":{"filePath":"src/components/Toast/index.tsx","meta":{"name":"Toast","description":"Brief, non-blocking notification messages","category":"feedback","tags":["notification","alert","message","feedback"],"status":"stable"},"usage":{"when":["Providing feedback after an action","Showing success/error status of operations","Non-critical information that doesn't require action","Temporary messages that auto-dismiss"],"whenNot":["Critical errors requiring user action (use Dialog)","Persistent information (use Alert)","Inline validation (use form error states)","System-wide announcements (use Banner)"],"guidelines":["Keep messages brief and actionable","Use appropriate variant for the message type","Auto-dismiss after reasonable duration (3-5s)","Allow manual dismissal for longer messages","Limit number of simultaneous toasts","useToast() variant helpers accept either (title, description?) or an options object for action/duration/id"],"accessibility":["Use role=\"alert\" for important messages","Ensure sufficient display time for reading","Don't rely solely on color for meaning","Provide dismiss button with accessible label"]},"props":{"onDismiss":{"type":"function","description":"Callback when toast should be dismissed","required":false},"title":{"type":"string","description":"Toast title","required":false},"description":{"type":"string","description":"Additional message content","required":false},"variant":{"type":"enum","description":"Visual variant indicating message type","default":"default","required":false,"values":["default","success","error","warning","info"]},"duration":{"type":"number","description":"Auto-dismiss duration in ms (0 = no auto-dismiss)","default":8000,"required":false},"action":{"type":"object","description":"Optional action button { label, onClick }","required":false},"id":{"type":"string","description":"","required":false},"onPause":{"type":"function","description":"Callback when auto-dismiss timer should pause","required":false},"onResume":{"type":"function","description":"Callback when auto-dismiss timer should resume","required":false}},"relations":[{"component":"Alert","relationship":"alternative","note":"Use Alert for persistent inline messages"},{"component":"Dialog","relationship":"alternative","note":"Use Dialog for messages requiring user action"}],"variants":[{"name":"Default","description":"Interactive toast demo - click buttons to trigger toasts (includes helper object syntax example)","code":"<ToastDemoWrapper />"},{"name":"Success","description":"Success message variant","code":"<Toast\n  title=\"Success!\"\n  description=\"Your changes have been saved.\"\n  variant=\"success\"\n/>"},{"name":"Error","description":"Error message variant","code":"<Toast\n  title=\"Error\"\n  description=\"Failed to save changes. Please try again.\"\n  variant=\"error\"\n/>"},{"name":"Warning","description":"Warning message variant","code":"<Toast\n  title=\"Warning\"\n  description=\"This action cannot be undone.\"\n  variant=\"warning\"\n/>"},{"name":"Info","description":"Informational message variant","code":"<Toast\n  title=\"New Update\"\n  description=\"Version 2.0 is now available.\"\n  variant=\"info\"\n/>"},{"name":"With Action","description":"Toast with an action button","code":"<Toast\n  title=\"File deleted\"\n  description=\"The file has been moved to trash.\"\n  action={{\n    label: 'Undo',\n    onClick: () => console.log('Undo clicked'),\n  }}\n/>"}],"contract":{"propsSummary":["title: string - toast title","description: string - additional message","variant: default|success|error|warning|info","duration: number - ms before auto-dismiss","action: { label, onClick } - optional action","ToastInput (useToast): optional id for deterministic creation/replacement flows","useToast().success/error/warning/info: (title, description?) or ({ title, description, action, duration, id })"],"a11yRules":["A11Y_ALERT_ROLE","A11Y_TARGET_SIZE_MIN"]},"ai":{"compositionPattern":"compound","subComponents":["Provider"]},"propsSummary":["onDismiss: function","title: string","description: string","variant: default|success|error|warning|info (default: default)","duration: number","action: object","id: string","onPause: function","onResume: function"],"sourcePath":"src/components/Toast/index.tsx","exportName":"Toast","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:06.259Z"},"performance":{"bundleSize":2184,"rawSize":5969,"complexity":"lightweight","budgetPercent":14,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Toast (self)","bytes":5348,"percent":90}]}},"Tooltip":{"filePath":"src/components/Tooltip/index.tsx","meta":{"name":"Tooltip","description":"Contextual help text that appears on hover or focus. Perfect for explaining icons, truncated text, or providing additional context.","category":"feedback","tags":["tooltip","hint","help","hover","contextual"],"status":"stable"},"usage":{"when":["Explaining icon-only buttons","Showing full text for truncated content","Providing keyboard shortcuts","Brief contextual help that fits in one line"],"whenNot":["Long-form help content (use Popover)","Critical information users must see (use Alert)","Interactive content (use Popover or Menu)","Mobile-primary interfaces (tooltips require hover)"],"guidelines":["Keep tooltip text concise (under 80 characters)","Use sentence case, no period for single sentences","Avoid duplicating visible label text","Consider mobile users who cannot hover","Use contentProps for tooltip popup attributes/styling; top-level HTML attrs are applied to the popup for backward compatibility"],"accessibility":["Accessible via focus as well as hover","Uses role=\"tooltip\" with proper aria association","Delay prevents tooltips from appearing during navigation"]},"props":{"children":{"type":"element","description":"The element that triggers the tooltip","required":true},"content":{"type":"node","description":"Content to display in the tooltip","required":true},"side":{"type":"enum","description":"Which side to show the tooltip","default":"top","required":false,"values":["top","bottom","left","right"]},"align":{"type":"enum","description":"Alignment along the side","default":"center","required":false,"values":["start","center","end"]},"sideOffset":{"type":"number","description":"Distance from trigger in pixels","default":"6","required":false},"delay":{"type":"number","description":"Delay before showing (ms)","default":"400","required":false},"closeDelay":{"type":"number","description":"Delay before hiding (ms)","default":"0","required":false},"disabled":{"type":"boolean","description":"Disable the tooltip","default":"false","required":false},"arrow":{"type":"boolean","description":"Show arrow pointing to trigger","default":"true","required":false},"open":{"type":"boolean","description":"Controlled open state","required":false},"defaultOpen":{"type":"boolean","description":"Default open state","default":"false","required":false},"onOpenChange":{"type":"function","description":"Callback when open state changes","required":false},"contentProps":{"type":"object","description":"Props forwarded to the tooltip popup element (preferred way to pass popup attrs/className/style)","required":false},"style":{"type":"object","description":"","required":false},"closeOnClick":{"type":"boolean","description":"Whether clicking the trigger closes the tooltip.","default":"false","required":false}},"relations":[{"component":"Popover","relationship":"alternative","note":"Use Popover for interactive or longer content"},{"component":"Alert","relationship":"alternative","note":"Use Alert for critical information that must be visible"}],"variants":[{"name":"Default","description":"Basic tooltip on hover","code":"<Tooltip content=\"Save your changes\">\n  <Button>Save</Button>\n</Tooltip>"},{"name":"Positions","description":"Tooltips on different sides","code":"<div style={{ display: 'flex', gap: '16px', padding: '40px' }}>\n  <Tooltip content=\"Top tooltip\" side=\"top\">\n    <Button variant=\"secondary\">Top</Button>\n  </Tooltip>\n  <Tooltip content=\"Bottom tooltip\" side=\"bottom\">\n    <Button variant=\"secondary\">Bottom</Button>\n  </Tooltip>\n  <Tooltip content=\"Left tooltip\" side=\"left\">\n    <Button variant=\"secondary\">Left</Button>\n  </Tooltip>\n  <Tooltip content=\"Right tooltip\" side=\"right\">\n    <Button variant=\"secondary\">Right</Button>\n  </Tooltip>\n</div>"},{"name":"With Shortcut","description":"Tooltip showing keyboard shortcut","code":"<Tooltip content=\"Undo (Ctrl+Z)\">\n  <Button variant=\"ghost\">Undo</Button>\n</Tooltip>"},{"name":"No Arrow","description":"Tooltip without arrow","code":"<Tooltip content=\"Clean tooltip\" arrow={false}>\n  <Button variant=\"secondary\">Hover me</Button>\n</Tooltip>"},{"name":"With Content Props","description":"Pass popup attributes/styling using contentProps","code":"<Tooltip content=\"Custom popup attrs\" contentProps={{ id: 'custom-tooltip-popup' }}>\n  <Button variant=\"secondary\">Hover me</Button>\n</Tooltip>"}],"contract":{"propsSummary":["content: ReactNode - tooltip content","side: top|bottom|left|right - position","delay: number - show delay in ms (default: 400)","arrow: boolean - show arrow (default: true)","contentProps: HTMLAttributes<HTMLDivElement> - popup element props"],"a11yRules":["A11Y_TOOLTIP_FOCUS","A11Y_TOOLTIP_ROLE"]},"ai":{"compositionPattern":"compound","subComponents":["Root","Provider"]},"propsSummary":["children: element (required)","content: node (required)","side: top|bottom|left|right (default: top)","align: start|center|end (default: center)","sideOffset: number (default: 6)","delay: number","closeDelay: number","disabled: boolean (default: false)","arrow: boolean (default: true)","open: boolean","defaultOpen: boolean","onOpenChange: function","contentProps: object","style: object"],"sourcePath":"src/components/Tooltip/index.tsx","exportName":"Tooltip","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:07.058Z"},"performance":{"bundleSize":1069,"rawSize":2053,"complexity":"lightweight","budgetPercent":7,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"Tooltip (self)","bytes":1443,"percent":70}]}},"ToggleGroup":{"filePath":"src/components/ToggleGroup/index.tsx","meta":{"name":"ToggleGroup","description":"A group of toggle buttons where only one can be selected at a time. Useful for switching between views, modes, or options.","category":"forms","tags":["toggle","group","fragmented","control","tabs","switch"],"status":"stable"},"usage":{"when":["Switching between mutually exclusive views or modes","Selecting one option from a small set (2-5 options)","Fragmented controls like view switchers","Filter or sort options"],"whenNot":["Multiple selections allowed (use Checkbox group)","Many options (use Select or RadioGroup)","Navigation between pages (use Tabs)","On/off toggle (use Switch component)"],"guidelines":["Keep options to 2-5 items for clarity","Use clear, concise labels","Consider icons for common actions (grid/list view)","Use default for an inset tonal rail, pills for an open filter cluster, and outline for connected bordered segments","Ensure adequate touch targets on mobile"],"accessibility":["Uses role=\"radiogroup\" for single-selection semantics","Each item has role=\"radio\" with aria-checked","Keyboard navigable with Tab and arrow keys","Focus visible on active item"]},"props":{"value":{"type":"string","description":"Currently selected value","required":false},"defaultValue":{"type":"string","description":"Initial selected value (uncontrolled)","required":false},"onChange":{"type":"function","description":"Called with new value when selection changes","required":false},"onValueChange":{"type":"function","description":"Alias for onChange (Radix convention): (value: string) => void","required":false},"children":{"type":"node","description":"ToggleGroup.Item components","required":true},"variant":{"type":"enum","description":"Visual style","default":"default","required":false,"values":["default","pills","outline","outlined"]},"size":{"type":"enum","description":"Size variant","default":"\"md\"","required":false,"values":["sm","md","lg"]},"gap":{"type":"enum","description":"Gap between items in the pills variant. Connected variants intentionally ignore gaps.","required":false,"values":["sm","none","xs"]},"selectionMode":{"type":"enum","description":"Selection behavior","default":"single","required":false,"values":["single"]}},"relations":[{"component":"RadioGroup","relationship":"alternative","note":"RadioGroup for form-style single selection"},{"component":"Tabs","relationship":"alternative","note":"Tabs for content panel switching"},{"component":"Switch","relationship":"sibling","note":"Switch for single on/off control"}],"variants":[{"name":"Default","description":"Basic toggle group","code":"<ToggleGroup value={value} onChange={setValue}>\n  <ToggleGroup.Item value=\"left\">Left</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"center\">Center</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"right\">Right</ToggleGroup.Item>\n</ToggleGroup>"},{"name":"Pills Variant","description":"Pill-shaped toggle buttons","code":"<ToggleGroup value={value} onChange={setValue} variant=\"pills\">\n  <ToggleGroup.Item value=\"all\">All</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"active\">Active</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"completed\">Completed</ToggleGroup.Item>\n</ToggleGroup>"},{"name":"Outline Variant","description":"Outlined toggle buttons","code":"<ToggleGroup value={value} onChange={setValue} variant=\"outlined\">\n  <ToggleGroup.Item value=\"day\">Day</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"week\">Week</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"month\">Month</ToggleGroup.Item>\n</ToggleGroup>"},{"name":"Uncontrolled","description":"Use defaultValue for simple single-select state","code":"<ToggleGroup defaultValue=\"list\">\n  <ToggleGroup.Item value=\"grid\">Grid</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"list\">List</ToggleGroup.Item>\n</ToggleGroup>"},{"name":"Sizes","description":"Different size variants","code":"<ToggleGroup value={value} onChange={setValue} size=\"sm\">\n  <ToggleGroup.Item value=\"a\">Small</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"b\">Size</ToggleGroup.Item>\n</ToggleGroup>\n<ToggleGroup value={value} onChange={setValue} size=\"md\">\n  <ToggleGroup.Item value=\"a\">Medium</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"b\">Size</ToggleGroup.Item>\n</ToggleGroup>"},{"name":"View Switcher","description":"Common pattern for switching between views","code":"<ToggleGroup value={view} onChange={setView} size=\"sm\">\n  <ToggleGroup.Item value=\"grid\"><GridIcon /></ToggleGroup.Item>\n  <ToggleGroup.Item value=\"list\"><ListIcon /></ToggleGroup.Item>\n</ToggleGroup>"},{"name":"With Disabled Item","description":"Toggle group with a disabled option","code":"<ToggleGroup value={value} onChange={setValue}>\n  <ToggleGroup.Item value=\"basic\">Basic</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"pro\">Pro</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"enterprise\" disabled>Enterprise</ToggleGroup.Item>\n</ToggleGroup>"}],"contract":{"propsSummary":["value?: string - controlled selected value","defaultValue?: string - initial selected value (uncontrolled)","onChange: (value: string) => void - change handler (or onValueChange)","children: ToggleGroup.Item[] - toggle items","variant: default|pills|outline|outlined - visual style (outlined aliases outline)","size: sm|md|lg - size variant","gap: none|xs|sm - pills spacing (xs by default; connected variants remain gapless)","selectionMode: single (default: single)"],"a11yRules":["A11Y_GROUP_ROLE","A11Y_KEYBOARD_ACCESSIBLE"]},"ai":{"compositionPattern":"compound","subComponents":["Item"],"commonPatterns":["<ToggleGroup>\n  <ToggleGroup.Item>...</ToggleGroup.Item>\n</ToggleGroup>"],"requiredChildren":["Item"]},"propsSummary":["value: string","defaultValue: string","onChange: function","onValueChange: function","children: node (required)","variant: default|pills|outline|outlined (default: default)","size: sm|md|lg (default: md)","gap: sm|none|xs (default: xs for pills; none otherwise)","selectionMode: single (default: single)"],"sourcePath":"src/components/ToggleGroup/index.tsx","exportName":"ToggleGroup","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:07.233Z"},"performance":{"bundleSize":1445,"rawSize":2943,"complexity":"lightweight","budgetPercent":9,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"ToggleGroup (self)","bytes":2088,"percent":71},{"path":"ComponentDefaults","bytes":193,"percent":7}]}},"VisuallyHidden":{"filePath":"src/components/VisuallyHidden/index.tsx","meta":{"name":"VisuallyHidden","description":"Hides content visually while keeping it accessible to screen readers. Essential for accessible icon-only buttons and supplementary text.","category":"navigation","tags":["accessibility","a11y","screen-reader","hidden","sr-only"],"status":"stable"},"usage":{"when":["Providing accessible labels for icon-only buttons","Adding context that screen readers need but sighted users don't","Hiding decorative content while providing text alternatives","Skip links for keyboard navigation"],"whenNot":["Hiding content from everyone (use display: none or conditional render)","Content that should be visible on focus (use focus-visible styles)","Temporarily hidden content (use proper ARIA attributes)","Lazy-loaded content (use suspense or loading states)"],"guidelines":["Always use with icon-only interactive elements","Keep hidden text concise but descriptive","Test with screen readers to verify announcements","Don't overuse; visible text is often better","VisuallyHidden forwards DOM props and className to the rendered element"],"accessibility":["Content is announced by screen readers","Content is focusable if interactive elements are inside","Essential for WCAG 2.1 compliance with icon-only controls","Must convey equivalent information to visual content"]},"props":{"children":{"type":"node","description":"Content to hide visually","required":true},"as":{"type":"enum","description":"HTML element to render","default":"span","required":false,"values":["span","div"]}},"relations":[{"component":"Button","relationship":"child","note":"Use inside icon-only buttons for accessible labels"},{"component":"Icon","relationship":"sibling","note":"Pair with icons to provide text alternatives"}],"variants":[{"name":"Icon Button Label","description":"Accessible label for icon-only button","code":"<button style={{\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: '40px',\n  height: '40px',\n  border: '1px solid var(--fui-border-default)',\n  borderRadius: '8px',\n  background: 'var(--fui-color-surface-primary)',\n  cursor: 'pointer'\n}}>\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n    <path d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n  </svg>\n  <VisuallyHidden>Search</VisuallyHidden>\n</button>"},{"name":"Supplementary Text","description":"Additional context for screen readers","code":"<a href=\"#\" style={{ color: 'var(--fui-color-accent)' }}>\n  Read more\n  <VisuallyHidden> about our accessibility features</VisuallyHidden>\n</a>"},{"name":"Skip Link","description":"Navigation aid that becomes visible on focus","code":"<div>\n  <VisuallyHidden as=\"div\">\n    <a\n      href=\"#main-content\"\n      style={{\n        position: 'absolute',\n        padding: '8px 16px',\n        background: 'var(--fui-color-accent)',\n        color: 'white'\n      }}\n    >\n      Skip to main content\n    </a>\n  </VisuallyHidden>\n  <p style={{ color: 'var(--fui-color-text-tertiary)', fontSize: '14px' }}>\n    (Screen reader only: \"Skip to main content\" link)\n  </p>\n</div>"}],"contract":{"propsSummary":["children: ReactNode - hidden text (required)","as: span|div - HTML element","Forwards standard DOM props (id, aria-*, data-*, className, handlers)"],"a11yRules":["A11Y_SR_ONLY","A11Y_ICON_LABEL"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["children: node (required)","as: span|div (default: span)"],"sourcePath":"src/components/VisuallyHidden/index.tsx","exportName":"VisuallyHidden","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:06.625Z"},"performance":{"bundleSize":535,"rawSize":894,"complexity":"lightweight","budgetPercent":3,"overBudget":false,"measuredAt":"2026-08-01T23:17:40.335Z","imports":[{"path":"VisuallyHidden (self)","bytes":311,"percent":35}]}}},"blocks":{"Account Settings":{"filePath":"src/blocks/AccountSettings.block.ts","name":"Account Settings","description":"Tabbed account settings with profile, security and billing sections","category":"settings","components":["Card","Tabs","Stack","Input","Button","Text"],"code":"<Card>\n  <Card.Header>\n    <Card.Title>Account Settings</Card.Title>\n  </Card.Header>\n  <Tabs defaultValue=\"profile\">\n    <Tabs.List>\n      <Tabs.Tab value=\"profile\">Profile</Tabs.Tab>\n      <Tabs.Tab value=\"security\">Security</Tabs.Tab>\n      <Tabs.Tab value=\"billing\">Billing</Tabs.Tab>\n    </Tabs.List>\n    <Card.Body>\n      <Tabs.Panel value=\"profile\">\n        <Stack gap=\"md\">\n          <Input label=\"Display Name\" defaultValue=\"Jane Doe\" />\n          <Input label=\"Email\" type=\"email\" defaultValue=\"jane@example.com\" />\n          <Button variant=\"primary\">Save Changes</Button>\n        </Stack>\n      </Tabs.Panel>\n      <Tabs.Panel value=\"security\">\n        <Stack gap=\"md\">\n          <Input label=\"Current Password\" type=\"password\" />\n          <Input label=\"New Password\" type=\"password\" />\n          <Input label=\"Confirm Password\" type=\"password\" />\n          <Button variant=\"primary\">Update Password</Button>\n        </Stack>\n      </Tabs.Panel>\n      <Tabs.Panel value=\"billing\">\n        <Stack gap=\"md\">\n          <Text>Current Plan: <Text weight=\"semibold\">Pro</Text></Text>\n          <Text size=\"sm\" color=\"tertiary\">Your next billing date will appear here</Text>\n          <Button variant=\"secondary\">Manage Subscription</Button>\n        </Stack>\n      </Tabs.Panel>\n    </Card.Body>\n  </Tabs>\n</Card>","tags":["account","settings","tabs","profile","security","billing"]},"Activity Feed":{"filePath":"src/blocks/ActivityFeed.block.ts","name":"Activity Feed","description":"Timeline of user activities with avatars and timestamps","category":"dashboard","components":["Card","Stack","Text","Avatar"],"code":"const activities = [\n  { id: 1, user: 'Alice Chen', action: 'created a new project', time: '2 minutes ago', initials: 'AC' },\n  { id: 2, user: 'Bob Smith', action: 'commented on your post', time: '15 minutes ago', initials: 'BS' },\n  { id: 3, user: 'Carol Davis', action: 'shared a document', time: '1 hour ago', initials: 'CD' },\n  { id: 4, user: 'Dan Wilson', action: 'completed a task', time: '3 hours ago', initials: 'DW' },\n];\n\n<Card>\n  <Card.Header>\n    <Card.Title>Recent Activity</Card.Title>\n  </Card.Header>\n  <Card.Body>\n    <Stack gap=\"md\">\n      {activities.map((activity) => (\n        <Stack key={activity.id} direction=\"row\" gap=\"md\" align=\"center\">\n          <Avatar size=\"sm\" initials={activity.initials} />\n          <Stack gap=\"xs\" style={{ flex: 1 }}>\n            <Text>\n              <Text weight=\"semibold\">{activity.user}</Text> {activity.action}\n            </Text>\n            <Text size=\"sm\" color=\"tertiary\">{activity.time}</Text>\n          </Stack>\n        </Stack>\n      ))}\n    </Stack>\n  </Card.Body>\n</Card>","tags":["activity","feed","timeline","notifications"]},"Activity Feed Skeleton":{"filePath":"src/blocks/ActivityFeedSkeleton.block.ts","name":"Activity Feed Skeleton","description":"Skeleton avatar circles with text rows for loading activity feeds","category":"loading","components":["Card","Stack","Skeleton"],"code":"<Card>\n  <Card.Header>\n    <Skeleton variant=\"heading\" width={160} />\n  </Card.Header>\n  <Card.Body>\n    <Stack gap=\"md\">\n      {Array.from({ length: 4 }).map((_, i) => (\n        <Stack key={i} direction=\"row\" gap=\"md\" align=\"center\">\n          <Skeleton.Circle size=\"sm\" />\n          <Stack gap=\"xs\" style={{ flex: 1 }}>\n            <Skeleton variant=\"text\" width=\"70%\" />\n            <Skeleton variant=\"text\" width=\"30%\" />\n          </Stack>\n        </Stack>\n      ))}\n    </Stack>\n  </Card.Body>\n</Card>","tags":["activity","feed","skeleton","loading","placeholder"]},"Blog Editor":{"filePath":"src/blocks/BlogEditor.block.ts","name":"Blog Editor","description":"Full blog post editor with formatting toolbar, auto-save, publish button, and word count","category":"content","components":["Editor","Button"],"code":"<Editor\n  placeholder=\"Start typing your masterpiece here...\"\n  onValueChange={(value) => console.log(value)}\n  onAutoSave={(value) => console.log('Auto-saved:', value)}\n  autoSaveInterval={5000}\n>\n  <Editor.Toolbar>\n    <Editor.ToolbarGroup aria-label=\"Text formatting\">\n      <Editor.ToolbarButton format=\"bold\" />\n      <Editor.ToolbarButton format=\"italic\" />\n      <Editor.ToolbarButton format=\"strikethrough\" />\n      <Editor.ToolbarButton format=\"link\" />\n      <Editor.ToolbarButton format=\"code\" />\n      <Editor.ToolbarButton format=\"bulletList\" />\n    </Editor.ToolbarGroup>\n    <Editor.ToolbarGroup aria-label=\"Actions\">\n      <Editor.StatusIndicator status=\"saved\" />\n      <Button variant=\"accent\" size=\"sm\">Publish</Button>\n    </Editor.ToolbarGroup>\n  </Editor.Toolbar>\n  <Editor.Content />\n  <Editor.StatusBar showWordCount showCharCount />\n</Editor>","tags":["blog","editor","writing","rich-text","publishing","content"]},"Chat Interface":{"filePath":"src/blocks/ChatInterface.block.ts","name":"Chat Interface","description":"Full AI chat with conversation list, messages, and prompt input","category":"ai","components":["Stack","Box","ConversationList","Message","Prompt"],"code":"<Stack style={{ height: '500px', border: '1px solid var(--fui-border)', borderRadius: 'var(--fui-radius-lg)', overflow: 'hidden' }}>\n  <ConversationList autoScroll=\"smart\" style={{ flex: 1 }}>\n    <Message role=\"system\">\n      <Message.Content>\n        Conversation started with Claude\n      </Message.Content>\n    </Message>\n    <Message role=\"user\">\n      <Message.Content>\n        Hello! What can you help me with today?\n      </Message.Content>\n    </Message>\n    <Message role=\"assistant\">\n      <Message.Content>\n        Hi! I'm here to help with coding questions, writing, analysis, and more. What would you like to explore?\n      </Message.Content>\n    </Message>\n  </ConversationList>\n  <Box borderTop>\n    <Prompt placeholder=\"Message Claude...\" onSubmit={(value) => console.log(value)}>\n      <Prompt.Textarea />\n      <Prompt.Toolbar>\n        <Prompt.Actions>\n          <Prompt.ActionButton aria-label=\"Attach file\">+</Prompt.ActionButton>\n        </Prompt.Actions>\n        <Prompt.Info>\n          <Prompt.Submit />\n        </Prompt.Info>\n      </Prompt.Toolbar>\n    </Prompt>\n  </Box>\n</Stack>","tags":["chat","ai","assistant","conversation","prompt"]},"Chat Messages":{"filePath":"src/blocks/ChatMessages.block.ts","name":"Chat Messages","description":"User and assistant message exchange with role-based styling","category":"ai","components":["Stack","Message"],"code":"<Stack gap=\"md\" style={{ maxWidth: '600px' }}>\n  <Message role=\"user\">\n    <Message.Content>\n      Can you explain how React hooks work?\n    </Message.Content>\n  </Message>\n  <Message role=\"assistant\">\n    <Message.Content>\n      React Hooks are functions that let you use state and other React features in functional components. The most common hooks are:\n\n      • useState - for managing local state\n      • useEffect - for side effects like API calls\n      • useContext - for consuming context values\n      • useRef - for mutable refs that persist across renders\n\n      Would you like me to show you some examples?\n    </Message.Content>\n  </Message>\n  <Message role=\"user\">\n    <Message.Content>\n      Yes, please show me a useState example!\n    </Message.Content>\n  </Message>\n</Stack>","tags":["chat","messages","ai","conversation"]},"Checkout Form":{"filePath":"src/blocks/CheckoutForm.block.ts","name":"Checkout Form","description":"E-commerce checkout with billing address, payment details and order summary","category":"ecommerce","components":["Card","Stack","Text","Input","Separator","Button"],"code":"<Card variant=\"elevated\">\n  <Card.Header>\n    <Card.Title>Checkout</Card.Title>\n    <Card.Description>Complete your purchase</Card.Description>\n  </Card.Header>\n  <Card.Body>\n    <Stack gap=\"lg\">\n      <Stack gap=\"md\">\n        <Text weight=\"semibold\">Billing Address</Text>\n        <Input label=\"Full Name\" placeholder=\"John Doe\" />\n        <Input label=\"Address\" placeholder=\"123 Main St\" />\n        <Stack direction={{ base: 'column', sm: 'row' }} gap=\"md\">\n          <Input label=\"City\" placeholder=\"San Francisco\" style={{ flex: 1 }} />\n          <Input label=\"State\" placeholder=\"CA\" style={{ width: '100px' }} />\n          <Input label=\"ZIP\" placeholder=\"94102\" style={{ width: '120px' }} />\n        </Stack>\n      </Stack>\n\n      <Separator />\n\n      <Stack gap=\"md\">\n        <Text weight=\"semibold\">Payment Details</Text>\n        <Input label=\"Card Number\" placeholder=\"4242 4242 4242 4242\" />\n        <Stack direction={{ base: 'column', sm: 'row' }} gap=\"md\">\n          <Input label=\"Expiry\" placeholder=\"MM/YY\" style={{ flex: 1 }} />\n          <Input label=\"CVC\" placeholder=\"123\" style={{ width: '100px' }} />\n        </Stack>\n      </Stack>\n\n      <Separator />\n\n      <Stack gap=\"sm\">\n        <Stack direction=\"row\" justify=\"between\">\n          <Text color=\"tertiary\">Subtotal</Text>\n          <Text>$99.00</Text>\n        </Stack>\n        <Stack direction=\"row\" justify=\"between\">\n          <Text color=\"tertiary\">Tax</Text>\n          <Text>$8.91</Text>\n        </Stack>\n        <Separator />\n        <Stack direction=\"row\" justify=\"between\">\n          <Text weight=\"semibold\">Total</Text>\n          <Text weight=\"semibold\">$107.91</Text>\n        </Stack>\n      </Stack>\n\n      <Button variant=\"primary\" fullWidth>Complete Purchase</Button>\n    </Stack>\n  </Card.Body>\n</Card>","tags":["checkout","payment","ecommerce","form","billing"]},"Command Palette":{"filePath":"src/blocks/CommandPalette.block.ts","name":"Command Palette","description":"Modal command palette for quick actions, composed with Dialog and Command","category":"navigation","components":["Dialog","Command"],"code":"<Dialog>\n  <Dialog.Trigger asChild>\n    <Button variant=\"secondary\">Open Command Palette</Button>\n  </Dialog.Trigger>\n  <Dialog.Content size=\"sm\">\n    <Command>\n      <Command.Input placeholder=\"Search commands...\" />\n      <Command.List>\n        <Command.Group heading=\"Actions\">\n          <Command.Item onItemSelect={() => console.log('new')}>New File</Command.Item>\n          <Command.Item onItemSelect={() => console.log('open')}>Open Recent</Command.Item>\n          <Command.Item onItemSelect={() => console.log('save')}>Save All</Command.Item>\n        </Command.Group>\n        <Command.Separator />\n        <Command.Group heading=\"Settings\">\n          <Command.Item onItemSelect={() => console.log('prefs')}>Preferences</Command.Item>\n          <Command.Item onItemSelect={() => console.log('keys')}>Keyboard Shortcuts</Command.Item>\n        </Command.Group>\n        <Command.Empty>No results found.</Command.Empty>\n      </Command.List>\n    </Command>\n  </Dialog.Content>\n</Dialog>","tags":["command","palette","search","spotlight","quick-actions"]},"Contact Form":{"filePath":"src/blocks/ContactForm.block.ts","name":"Contact Form","description":"Contact form with name, email, subject and message fields","category":"marketing","components":["Card","Stack","Input","Textarea","Button"],"code":"<Card variant=\"elevated\">\n  <Card.Header>\n    <Card.Title>Contact Us</Card.Title>\n    <Card.Description>Send us a message and we'll get back to you soon.</Card.Description>\n  </Card.Header>\n  <Card.Body>\n    <Stack gap=\"md\">\n      <Stack direction={{ base: 'column', sm: 'row' }} gap=\"md\">\n        <Input label=\"Name\" placeholder=\"Your name\" style={{ flex: 1 }} />\n        <Input label=\"Email\" type=\"email\" placeholder=\"your@email.com\" style={{ flex: 1 }} />\n      </Stack>\n      <Input label=\"Subject\" placeholder=\"How can we help?\" />\n      <Textarea label=\"Message\" placeholder=\"Tell us more about your inquiry...\" rows={5} />\n      <Button variant=\"primary\" fullWidth>Send Message</Button>\n    </Stack>\n  </Card.Body>\n</Card>","tags":["contact","form","marketing","message"]},"Dashboard Layout":{"filePath":"src/blocks/DashboardLayout.block.ts","name":"Dashboard Layout","description":"Full application shell with sidebar navigation, header, and metrics grid","category":"dashboard","components":["AppShell","Header","Sidebar","Stack","Grid","Card","Text","Badge","Input","ThemeToggle","Avatar"],"code":"const navItems = [\n  { label: 'Dashboard', active: true },\n  { label: 'Analytics', active: false },\n  { label: 'Projects', active: false },\n  { label: 'Settings', active: false },\n];\n\nconst metrics = [\n  { label: 'Total Users', value: '12,847', change: '+12%' },\n  { label: 'Revenue', value: '$48,352', change: '+8%' },\n  { label: 'Active Projects', value: '23', change: '+3' },\n];\n\n<AppShell>\n  <AppShell.Header>\n    <Header>\n      <Header.Trigger />\n      <Header.Search>\n        <Input placeholder=\"Search...\" style={{ width: '240px' }} />\n      </Header.Search>\n      <Header.Spacer />\n      <Header.Actions>\n        <ThemeToggle size=\"sm\" />\n        <Avatar size=\"sm\" initials=\"JD\" />\n      </Header.Actions>\n    </Header>\n  </AppShell.Header>\n  <AppShell.Sidebar width=\"220px\" collapsible=\"offcanvas\">\n    <Sidebar.Header>\n      <Text weight=\"semibold\" size=\"lg\">Acme Inc</Text>\n    </Sidebar.Header>\n    <Sidebar.Nav>\n      <Sidebar.Section label=\"Main\">\n        {navItems.map((item) => (\n          <Sidebar.Item key={item.label} active={item.active}>\n            {item.label}\n          </Sidebar.Item>\n        ))}\n      </Sidebar.Section>\n    </Sidebar.Nav>\n    <Sidebar.Footer>\n      <Text size=\"sm\" color=\"tertiary\">v2.0.0</Text>\n    </Sidebar.Footer>\n  </AppShell.Sidebar>\n  <AppShell.Main padding=\"lg\">\n    <Stack gap=\"lg\">\n      <Stack gap=\"xs\">\n        <Text size=\"xl\" weight=\"semibold\">Dashboard</Text>\n        <Text color=\"tertiary\">Welcome back! Here's an overview of your metrics.</Text>\n      </Stack>\n      <Grid columns={{ base: 1, md: 3 }} gap=\"md\">\n        {metrics.map((metric) => (\n          <Card key={metric.label}>\n            <Card.Body>\n              <Stack gap=\"sm\">\n                <Text size=\"sm\" color=\"tertiary\">{metric.label}</Text>\n                <Stack direction=\"row\" justify=\"between\" align=\"baseline\">\n                  <Text size=\"2xl\" weight=\"semibold\">{metric.value}</Text>\n                  <Badge variant=\"success\">{metric.change}</Badge>\n                </Stack>\n              </Stack>\n            </Card.Body>\n          </Card>\n        ))}\n      </Grid>\n    </Stack>\n  </AppShell.Main>\n</AppShell>","tags":["dashboard","layout","sidebar","app-shell","navigation"]},"Dashboard Page":{"filePath":"src/blocks/DashboardPage.block.ts","name":"Dashboard Page","description":"Full dashboard page with sidebar navigation, stats cards, revenue chart, transactions table, and activity feed","category":"kitchen-sink","components":["AppShell","Header","Sidebar","Grid","Card","Stack","Box","Text","Badge","Icon","Avatar","Input","Button","Separator","Table","ChartContainer","ChartTooltip","Breadcrumbs","ThemeToggle","Progress","Tabs"],"code":"import { AreaChart, Area, XAxis } from 'recharts';\nimport {\n  TrendUp, TrendDown, Bell, SquaresFour, ChartBar,\n  FileText, GearSix, Users, UserCircle, CreditCard,\n  Bank, Lightning, Wallet, CheckCircle, Clock, XCircle,\n  ArrowClockwise, DownloadSimple,\n} from '@phosphor-icons/react';\n\n// ── Stats data ──────────────────────────────────────────────\nconst stats = [\n  { label: 'Total Revenue', value: '$45,231', change: '+20.1%', up: true },\n  { label: 'Active Users', value: '2,350', change: '+12.5%', up: true },\n  { label: 'Sessions', value: '12,543', change: '-3.2%', up: false },\n  { label: 'Growth Rate', value: '4.5%', change: '+0.8%', up: true },\n];\n\n// ── Chart data ──────────────────────────────────────────────\nconst revenueData = [\n  { month: 'Sep', revenue: 3200 },\n  { month: 'Oct', revenue: 4100 },\n  { month: 'Nov', revenue: 3800 },\n  { month: 'Dec', revenue: 5200 },\n  { month: 'Jan', revenue: 4800 },\n  { month: 'Feb', revenue: 6100 },\n];\n\nconst chartConfig = {\n  revenue: { label: 'Revenue', color: 'var(--fui-color-accent)' },\n};\n\n// ── Table data ──────────────────────────────────────────────\nconst methodIcons = { card: CreditCard, bank: Bank, crypto: Lightning, wallet: Wallet };\nconst methodLabels = { card: 'Card', bank: 'Bank', crypto: 'Crypto', wallet: 'Wallet' };\nconst statusConfig = {\n  completed: { variant: 'success', icon: CheckCircle, label: 'Completed' },\n  pending: { variant: 'warning', icon: Clock, label: 'Pending' },\n  failed: { variant: 'error', icon: XCircle, label: 'Failed' },\n  refunded: { variant: 'info', icon: ArrowClockwise, label: 'Refunded' },\n};\n\nconst transactions = [\n  { id: '1', customer: 'Alice Chen', method: 'card', amount: '$1,250.00', status: 'completed', date: 'Feb 3' },\n  { id: '2', customer: 'Bob Park', method: 'bank', amount: '$890.00', status: 'pending', date: 'Feb 2' },\n  { id: '3', customer: 'Clara Liu', method: 'crypto', amount: '$2,100.00', status: 'completed', date: 'Feb 1' },\n  { id: '4', customer: 'David Kim', method: 'wallet', amount: '$450.00', status: 'failed', date: 'Jan 31' },\n  { id: '5', customer: 'Eva Santos', method: 'card', amount: '$3,200.00', status: 'completed', date: 'Jan 30' },\n];\n\nconst columns = createColumns([\n  {\n    key: 'customer',\n    header: 'Customer',\n    cell: (row) => (\n      <Stack direction=\"row\" gap=\"sm\" align=\"center\">\n        <Icon icon={UserCircle} size=\"sm\" />\n        <Text size=\"sm\" weight=\"medium\">{row.customer}</Text>\n      </Stack>\n    ),\n  },\n  {\n    key: 'method',\n    header: 'Method',\n    cell: (row) => (\n      <Stack direction=\"row\" gap=\"xs\" align=\"center\">\n        <Icon icon={methodIcons[row.method]} size=\"xs\" />\n        <Text size=\"sm\" color=\"secondary\">{methodLabels[row.method]}</Text>\n      </Stack>\n    ),\n  },\n  {\n    key: 'amount',\n    header: 'Amount',\n    cell: (row) => <Text size=\"sm\" weight=\"medium\" font=\"mono\">{row.amount}</Text>,\n  },\n  {\n    key: 'status',\n    header: 'Status',\n    cell: (row) => {\n      const cfg = statusConfig[row.status];\n      return (\n        <Badge variant={cfg.variant} size=\"sm\" icon={<Icon icon={cfg.icon} size=\"xs\" />}>\n          {cfg.label}\n        </Badge>\n      );\n    },\n  },\n  { key: 'date', header: 'Date' },\n]);\n\n// ── Activity data ───────────────────────────────────────────\nconst activities = [\n  { id: 1, user: 'Alice Chen', action: 'completed a purchase', time: '2 min ago', initials: 'AC' },\n  { id: 2, user: 'Bob Park', action: 'submitted a support ticket', time: '15 min ago', initials: 'BP' },\n  { id: 3, user: 'Clara Liu', action: 'upgraded to Pro plan', time: '1 hour ago', initials: 'CL' },\n  { id: 4, user: 'David Kim', action: 'left a review', time: '3 hours ago', initials: 'DK' },\n];\n\n// ── Layout ──────────────────────────────────────────────────\n\n<AppShell>\n  <AppShell.Header>\n    <Header>\n      <Header.Trigger />\n      <Header.Nav>\n        <Breadcrumbs>\n          <Breadcrumbs.Item>Dashboard</Breadcrumbs.Item>\n          <Breadcrumbs.Item>Overview</Breadcrumbs.Item>\n        </Breadcrumbs>\n      </Header.Nav>\n      <Header.Spacer />\n      <Header.Search>\n        <Input placeholder=\"Search...\" size=\"sm\" style={{ width: 200 }} />\n      </Header.Search>\n      <Header.Actions>\n        <Button variant=\"ghost\" size=\"sm\" icon aria-label=\"Notifications\">\n          <Icon icon={Bell} />\n        </Button>\n        <ThemeToggle size=\"sm\" />\n        <Avatar size=\"sm\" initials=\"JD\" />\n      </Header.Actions>\n    </Header>\n  </AppShell.Header>\n\n  <AppShell.Sidebar width=\"220px\" collapsible=\"icon\">\n    <Sidebar.Header>\n      <Text weight=\"semibold\" size=\"lg\">Acme Inc</Text>\n    </Sidebar.Header>\n    <Sidebar.Nav>\n      <Sidebar.Section label=\"Main\">\n        <Sidebar.Item icon={<Icon icon={SquaresFour} />} active>Dashboard</Sidebar.Item>\n        <Sidebar.Item icon={<Icon icon={ChartBar} />}>Analytics</Sidebar.Item>\n        <Sidebar.Item icon={<Icon icon={Users} />}>Customers</Sidebar.Item>\n        <Sidebar.Item icon={<Icon icon={FileText} />}>Reports</Sidebar.Item>\n      </Sidebar.Section>\n      <Sidebar.Section label=\"System\">\n        <Sidebar.Item icon={<Icon icon={GearSix} />}>Settings</Sidebar.Item>\n      </Sidebar.Section>\n    </Sidebar.Nav>\n    <Sidebar.Footer>\n      <Sidebar.CollapseToggle />\n    </Sidebar.Footer>\n  </AppShell.Sidebar>\n\n  <AppShell.Main padding=\"lg\">\n    <Stack gap=\"lg\">\n      {/* Page header */}\n      <Stack direction=\"row\" justify=\"between\" align=\"end\">\n        <Stack gap=\"xs\">\n          <Text size=\"xl\" weight=\"semibold\">Dashboard</Text>\n          <Text color=\"secondary\">Welcome back! Here's an overview of your metrics.</Text>\n        </Stack>\n        <Button variant=\"primary\" size=\"sm\">\n          <Icon icon={DownloadSimple} size=\"sm\" /> Export\n        </Button>\n      </Stack>\n\n      {/* Stats cards */}\n      <Grid columns={{ base: 1, sm: 2, lg: 4 }} gap=\"md\">\n        {stats.map((stat) => (\n          <Card key={stat.label}>\n            <Card.Body>\n              <Stack gap=\"xs\">\n                <Text size=\"sm\" color=\"secondary\">{stat.label}</Text>\n                <Text size=\"2xl\" weight=\"semibold\">{stat.value}</Text>\n                <Badge\n                  variant={stat.up ? 'success' : 'warning'}\n                  size=\"sm\"\n                  icon={<Icon icon={stat.up ? TrendUp : TrendDown} size=\"xs\" />}\n                >\n                  {stat.change}\n                </Badge>\n              </Stack>\n            </Card.Body>\n          </Card>\n        ))}\n      </Grid>\n\n      {/* Chart + Activity feed row */}\n      <Grid columns={{ base: 1, lg: 3 }} gap=\"md\">\n        <Grid.Item colSpan={2}>\n          <Card style={{ height: '100%' }}>\n            <Card.Header>\n              <Stack direction=\"row\" justify=\"between\" align=\"center\">\n                <Card.Title>Revenue</Card.Title>\n                <Text size=\"sm\" color=\"secondary\">Last 6 months</Text>\n              </Stack>\n            </Card.Header>\n            <Card.Body>\n              <Box style={{ height: 220 }}>\n                <ChartContainer config={chartConfig}>\n                  <AreaChart data={revenueData} margin={{ top: 5, right: 5, bottom: 0, left: -20 }}>\n                    <XAxis dataKey=\"month\" tickLine={false} axisLine={false} />\n                    <Area\n                      type=\"monotone\"\n                      dataKey=\"revenue\"\n                      stroke=\"var(--fui-color-accent)\"\n                      fill=\"var(--fui-color-accent)\"\n                      fillOpacity={0.15}\n                      strokeWidth={2}\n                    />\n                    <ChartTooltip />\n                  </AreaChart>\n                </ChartContainer>\n              </Box>\n            </Card.Body>\n          </Card>\n        </Grid.Item>\n\n        <Card>\n          <Card.Header>\n            <Card.Title>Recent Activity</Card.Title>\n          </Card.Header>\n          <Card.Body>\n            <Stack gap=\"md\">\n              {activities.map((a) => (\n                <Stack key={a.id} direction=\"row\" gap=\"sm\" align=\"center\">\n                  <Avatar size=\"sm\" initials={a.initials} />\n                  <Stack gap=\"xs\" style={{ flex: 1 }}>\n                    <Text size=\"sm\">\n                      <Text size=\"sm\" weight=\"semibold\">{a.user}</Text> {a.action}\n                    </Text>\n                    <Text size=\"xs\" color=\"tertiary\">{a.time}</Text>\n                  </Stack>\n                </Stack>\n              ))}\n            </Stack>\n          </Card.Body>\n        </Card>\n      </Grid>\n\n      {/* Transactions table */}\n      <Card>\n        <Card.Header>\n          <Stack direction=\"row\" justify=\"between\" align=\"center\">\n            <Stack direction=\"row\" gap=\"sm\" align=\"center\">\n              <Card.Title>Recent Transactions</Card.Title>\n              <Badge variant=\"outline\" size=\"sm\">5 total</Badge>\n            </Stack>\n            <Button variant=\"ghost\" size=\"sm\" icon aria-label=\"Download\">\n              <Icon icon={DownloadSimple} size=\"sm\" />\n            </Button>\n          </Stack>\n        </Card.Header>\n        <Table\n          columns={columns}\n          data={transactions}\n          size=\"sm\"\n          caption=\"Recent transactions\"\n          captionHidden\n        />\n      </Card>\n    </Stack>\n  </AppShell.Main>\n</AppShell>","tags":["dashboard","full-page","kitchen-sink","chart","table","sidebar","stats","metrics","analytics"]},"Dashboard Skeleton":{"filePath":"src/blocks/DashboardSkeleton.block.ts","name":"Dashboard Skeleton","description":"Grid of card shells with skeleton text and headings for dashboard loading states","category":"loading","components":["Card","Grid","Skeleton"],"code":"<Grid columns={{ base: 1, md: 2, lg: 3 }} gap=\"md\">\n  {Array.from({ length: 6 }).map((_, i) => (\n    <Card key={i}>\n      <Card.Body>\n        <Stack gap=\"md\">\n          <Skeleton variant=\"heading\" width=\"60%\" />\n          <Skeleton.Text lines={2} />\n          <Skeleton variant=\"rect\" height={120} radius=\"md\" />\n          <Stack direction=\"row\" gap=\"sm\" align=\"center\">\n            <Skeleton variant=\"button\" width={80} />\n            <Skeleton variant=\"text\" width={60} />\n          </Stack>\n        </Stack>\n      </Card.Body>\n    </Card>\n  ))}\n</Grid>","tags":["dashboard","skeleton","loading","placeholder"]},"Data Table":{"filePath":"src/blocks/DataTable.block.ts","name":"Data Table","description":"Table displaying structured data with columns","category":"dashboard","components":["Card","Table"],"code":"const columns = [\n  { accessorKey: 'name', header: 'Name' },\n  { accessorKey: 'email', header: 'Email' },\n  { accessorKey: 'status', header: 'Status' },\n];\n\nconst data = [\n  { name: 'John Doe', email: 'john@example.com', status: 'Active' },\n  { name: 'Jane Smith', email: 'jane@example.com', status: 'Pending' },\n  { name: 'Bob Wilson', email: 'bob@example.com', status: 'Active' },\n];\n\n<Card>\n  <Card.Header>\n    <Card.Title>Users</Card.Title>\n  </Card.Header>\n  <Table data={data} columns={columns} />\n</Card>","tags":["table","data","grid","dashboard","list"]},"Empty State":{"filePath":"src/blocks/EmptyState.block.ts","name":"Empty State","description":"Placeholder with icon, message, and action when no content exists","category":"dashboard","components":["EmptyState","Icon","Button"],"code":"import { ArchiveBox } from '@phosphor-icons/react';\n\n<EmptyState>\n  <EmptyState.Icon>\n    <Icon icon={ArchiveBox} size=\"xl\" />\n  </EmptyState.Icon>\n  <EmptyState.Title>No items yet</EmptyState.Title>\n  <EmptyState.Description>Get started by creating your first item.</EmptyState.Description>\n  <EmptyState.Actions>\n    <Button variant=\"primary\">Create Item</Button>\n  </EmptyState.Actions>\n</EmptyState>","tags":["empty","placeholder","zero-state","no-data"]},"FAQ Section":{"filePath":"src/blocks/FAQSection.block.ts","name":"FAQ Section","description":"Frequently asked questions with accordion component","category":"marketing","components":["Card","Accordion","Text"],"code":"const faqs = [\n  { question: 'How do I get started?', answer: 'Simply install the package via npm and import the components you need. Check our documentation for detailed setup instructions.' },\n  { question: 'Is it compatible with my framework?', answer: 'Yes! Our components work with React, Next.js, Remix, and any other React-based framework.' },\n  { question: 'Can I customize the styling?', answer: 'Absolutely. All components support custom CSS, CSS variables, and our built-in theming system.' },\n  { question: 'Do you offer support?', answer: 'We offer community support through GitHub discussions and premium support for enterprise customers.' },\n];\n\n<Card>\n  <Card.Header>\n    <Card.Title>Frequently Asked Questions</Card.Title>\n  </Card.Header>\n  <Card.Body>\n    <Accordion type=\"single\" collapsible>\n      {faqs.map((faq, index) => (\n        <Accordion.Item key={index} value={`item-${index}`}>\n          <Accordion.Trigger>{faq.question}</Accordion.Trigger>\n          <Accordion.Content>\n            <Text color=\"secondary\">{faq.answer}</Text>\n          </Accordion.Content>\n        </Accordion.Item>\n      ))}\n    </Accordion>\n  </Card.Body>\n</Card>","tags":["faq","questions","accordion","marketing","help"]},"Feature Grid":{"filePath":"src/blocks/FeatureGrid.block.ts","name":"Feature Grid","description":"Grid of features with icons and descriptions","category":"marketing","components":["Grid","Card","Stack","Icon","Text"],"code":"const features = [\n  { icon: Rocket, title: 'Fast Performance', description: 'Optimized for speed with minimal bundle size' },\n  { icon: Shield, title: 'Secure by Default', description: 'Built-in security best practices' },\n  { icon: Puzzle, title: 'Modular Design', description: 'Pick only what you need' },\n  { icon: Sparkle, title: 'Modern Stack', description: 'Built with the latest technologies' },\n];\n\n<Grid columns={{ base: 1, md: 2, lg: 4 }} gap=\"lg\">\n  {features.map((feature) => (\n    <Card key={feature.title}>\n      <Card.Body>\n        <Stack gap=\"md\">\n          <Icon icon={feature.icon} size=\"lg\" variant=\"accent\" />\n          <Stack gap=\"xs\">\n            <Text weight=\"semibold\">{feature.title}</Text>\n            <Text size=\"sm\" color=\"tertiary\">{feature.description}</Text>\n          </Stack>\n        </Stack>\n      </Card.Body>\n    </Card>\n  ))}\n</Grid>","tags":["features","grid","marketing","icons"]},"Hero Section":{"filePath":"src/blocks/HeroSection.block.ts","name":"Hero Section","description":"Landing page hero with headline, description and CTA buttons","category":"marketing","components":["Stack","Text","Button","Image"],"code":"<Stack gap=\"xl\" align=\"center\" style={{ textAlign: 'center', padding: '64px 24px' }}>\n  <Stack gap=\"md\" align=\"center\" style={{ maxWidth: '600px' }}>\n    <Text as=\"h1\" size=\"2xl\" weight=\"semibold\">Build beautiful products faster</Text>\n    <Text size=\"lg\" color=\"secondary\">\n      A modern component library designed for developers who want to ship quality interfaces without the complexity.\n    </Text>\n  </Stack>\n  <Stack direction={{ base: 'column', sm: 'row' }} gap=\"md\">\n    <Button variant=\"primary\">Get Started</Button>\n    <Button variant=\"secondary\">Learn More</Button>\n  </Stack>\n  <Image\n    src=\"https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&h=400&fit=crop\"\n    alt=\"Code on screen\"\n    aspectRatio=\"16:9\"\n    rounded=\"lg\"\n    width=\"100%\"\n    style={{ maxWidth: '800px' }}\n  />\n</Stack>","tags":["hero","landing","marketing","cta"]},"Login Form":{"filePath":"src/blocks/LoginForm.block.ts","name":"Login Form","description":"Email/password authentication form with card layout and footer links","category":"authentication","components":["Card","Stack","Input","Button","Text","Link"],"code":"<Card variant=\"elevated\">\n  <Card.Header>\n    <Card.Title>Sign In</Card.Title>\n    <Card.Description>Welcome back! Please enter your details.</Card.Description>\n  </Card.Header>\n  <Card.Body>\n    <Stack gap=\"md\">\n      <Input label=\"Email\" type=\"email\" placeholder=\"Enter your email\" />\n      <Input label=\"Password\" type=\"password\" placeholder=\"Enter your password\" />\n      <Link href=\"#\" variant=\"subtle\"><Text size=\"sm\">Forgot password?</Text></Link>\n      <Button variant=\"primary\" fullWidth>Sign In</Button>\n    </Stack>\n  </Card.Body>\n  <Card.Footer>\n    <Text size=\"sm\" color=\"tertiary\">Don't have an account? <Link href=\"#\">Sign up</Link></Text>\n  </Card.Footer>\n</Card>","tags":["auth","login","signin","form"]},"Navigation Header":{"filePath":"src/blocks/NavigationHeader.block.ts","name":"Navigation Header","description":"Site header with rich dropdown navigation panels, structured links with descriptions, and automatic mobile drawer. Uses NavigationMenu inside Header.","category":"marketing","components":["Header","NavigationMenu","ThemeToggle","Button"],"code":"<Header>\n  <Header.Brand href=\"/\">Acme</Header.Brand>\n  <NavigationMenu aria-label=\"Main navigation\">\n    <NavigationMenu.List>\n      <NavigationMenu.Item value=\"products\">\n        <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>\n        <NavigationMenu.Content>\n          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px', padding: '8px', minWidth: '400px' }}>\n            <NavigationMenu.Link\n              href=\"/analytics\"\n              title=\"Analytics\"\n              description=\"Track your metrics and KPIs in real time.\"\n            />\n            <NavigationMenu.Link\n              href=\"/automation\"\n              title=\"Automation\"\n              description=\"Automate repetitive workflows with ease.\"\n            />\n            <NavigationMenu.Link\n              href=\"/integrations\"\n              title=\"Integrations\"\n              description=\"Connect with your favorite tools.\"\n            />\n            <NavigationMenu.Link\n              href=\"/security\"\n              title=\"Security\"\n              description=\"Enterprise-grade protection for your data.\"\n            />\n          </div>\n        </NavigationMenu.Content>\n      </NavigationMenu.Item>\n      <NavigationMenu.Item value=\"resources\">\n        <NavigationMenu.Trigger>Resources</NavigationMenu.Trigger>\n        <NavigationMenu.Content>\n          <div style={{ display: 'flex', flexDirection: 'column', gap: '4px', padding: '8px', minWidth: '220px' }}>\n            <NavigationMenu.Link\n              href=\"/docs\"\n              title=\"Documentation\"\n              description=\"Comprehensive API reference and guides.\"\n            />\n            <NavigationMenu.Link\n              href=\"/blog\"\n              title=\"Blog\"\n              description=\"Latest news, updates, and tutorials.\"\n            />\n            <NavigationMenu.Link\n              href=\"/changelog\"\n              title=\"Changelog\"\n              description=\"See what's new in every release.\"\n            />\n          </div>\n        </NavigationMenu.Content>\n      </NavigationMenu.Item>\n      <NavigationMenu.Item>\n        <NavigationMenu.Link href=\"/pricing\">Pricing</NavigationMenu.Link>\n      </NavigationMenu.Item>\n    </NavigationMenu.List>\n    <NavigationMenu.Viewport />\n    <NavigationMenu.MobileContent>\n      <NavigationMenu.MobileSection label=\"Company\">\n        <NavigationMenu.Link href=\"/about\">About</NavigationMenu.Link>\n        <NavigationMenu.Link href=\"/careers\">Careers</NavigationMenu.Link>\n        <NavigationMenu.Link href=\"/contact\">Contact</NavigationMenu.Link>\n      </NavigationMenu.MobileSection>\n    </NavigationMenu.MobileContent>\n  </NavigationMenu>\n  <Header.Spacer />\n  <Header.Actions>\n    <ThemeToggle size=\"md\" />\n    <Button variant=\"primary\" size=\"sm\">Get Started</Button>\n  </Header.Actions>\n</Header>","tags":["header","navigation","dropdown","mobile","responsive","navbar"]},"Paginated Table":{"filePath":"src/blocks/PaginatedTable.block.ts","name":"Paginated Table","description":"Data table with pagination controls at the bottom","category":"dashboard","components":["Card","Table","Pagination"],"code":"const columns = [\n  { accessorKey: 'name', header: 'Name' },\n  { accessorKey: 'email', header: 'Email' },\n  { accessorKey: 'status', header: 'Status' },\n];\n\nconst data = [\n  { name: 'John Doe', email: 'john@example.com', status: 'Active' },\n  { name: 'Jane Smith', email: 'jane@example.com', status: 'Pending' },\n  { name: 'Bob Wilson', email: 'bob@example.com', status: 'Active' },\n];\n\n<Card>\n  <Card.Header>\n    <Card.Title>Users</Card.Title>\n  </Card.Header>\n  <Table data={data} columns={columns} />\n  <Card.Footer>\n    <Pagination totalPages={10} defaultPage={1}>\n      <Pagination.Previous />\n      <Pagination.Items />\n      <Pagination.Next />\n    </Pagination>\n  </Card.Footer>\n</Card>","tags":["table","pagination","data","dashboard","list"]},"Pricing Comparison":{"filePath":"src/blocks/PricingComparison.block.ts","name":"Pricing Comparison","description":"Multiple pricing tiers displayed side by side with features and CTAs","category":"marketing","components":["Grid","Card","Stack","Text","Separator","Button"],"code":"const tiers = [\n  { name: 'Basic', price: '$9', period: '/month', description: 'For individuals', features: ['5 projects', 'Basic analytics', 'Email support'], ctaText: 'Get Started' },\n  { name: 'Pro', price: '$29', period: '/month', description: 'For small teams', features: ['Unlimited projects', 'Advanced analytics', 'Priority support', 'API access'], ctaText: 'Start Free Trial' },\n  { name: 'Enterprise', price: '$99', period: '/month', description: 'For large organizations', features: ['Everything in Pro', 'Custom integrations', 'Dedicated support', 'SLA guarantee'], ctaText: 'Contact Sales' },\n];\n\n<Grid columns={{ base: 1, lg: 3 }} gap=\"lg\">\n  {tiers.map((tier) => (\n    <Card key={tier.name}>\n      <Card.Header>\n        <Card.Title>{tier.name}</Card.Title>\n        <Card.Description>{tier.description}</Card.Description>\n      </Card.Header>\n      <Card.Body>\n        <Stack gap=\"md\">\n          <Stack direction=\"row\" align=\"baseline\" gap=\"xs\">\n            <Text size=\"2xl\" weight=\"semibold\">{tier.price}</Text>\n            <Text color=\"tertiary\">{tier.period}</Text>\n          </Stack>\n          <Separator />\n          <Stack gap=\"sm\">\n            {tier.features.map((feature) => (\n              <Text key={feature}>✓ {feature}</Text>\n            ))}\n          </Stack>\n        </Stack>\n      </Card.Body>\n      <Card.Footer>\n        <Button variant=\"primary\" fullWidth>{tier.ctaText}</Button>\n      </Card.Footer>\n    </Card>\n  ))}\n</Grid>","tags":["pricing","plans","tiers","marketing","comparison"]},"Product Card":{"filePath":"src/blocks/ProductCard.block.ts","name":"Product Card","description":"Product display with image, price, stock badge and add to cart button","category":"ecommerce","components":["Card","Image","Stack","Text","Badge","Button"],"code":"<Card style={{ maxWidth: '320px' }}>\n  <Image\n    src=\"https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&h=300&fit=crop\"\n    alt=\"Product\"\n    aspectRatio=\"4:3\"\n  />\n  <Card.Body>\n    <Stack gap=\"sm\">\n      <Stack direction=\"row\" justify=\"between\" align=\"start\">\n        <Stack gap=\"xs\">\n          <Text weight=\"semibold\">Minimalist Watch</Text>\n          <Text size=\"sm\" color=\"tertiary\">Premium Collection</Text>\n        </Stack>\n        <Badge variant=\"success\">In Stock</Badge>\n      </Stack>\n      <Stack direction=\"row\" justify=\"between\" align=\"center\">\n        <Text size=\"lg\" weight=\"semibold\">$299</Text>\n        <Button variant=\"primary\" size=\"sm\">Add to Cart</Button>\n      </Stack>\n    </Stack>\n  </Card.Body>\n</Card>","tags":["product","card","ecommerce","shopping"]},"Registration Form":{"filePath":"src/blocks/RegistrationForm.block.ts","name":"Registration Form","description":"Signup form with name, email, password fields and terms checkbox","category":"authentication","components":["Card","Stack","Input","Checkbox","Button","Text","Link"],"code":"<Card variant=\"elevated\">\n  <Card.Header>\n    <Card.Title>Create Account</Card.Title>\n    <Card.Description>Sign up to get started with your free account.</Card.Description>\n  </Card.Header>\n  <Card.Body>\n    <Stack gap=\"md\">\n      <Stack direction={{ base: 'column', sm: 'row' }} gap=\"md\">\n        <Input label=\"First Name\" placeholder=\"John\" style={{ flex: 1 }} />\n        <Input label=\"Last Name\" placeholder=\"Doe\" style={{ flex: 1 }} />\n      </Stack>\n      <Input label=\"Email\" type=\"email\" placeholder=\"john@example.com\" />\n      <Input label=\"Password\" type=\"password\" placeholder=\"Create a password\" />\n      <Input label=\"Confirm Password\" type=\"password\" placeholder=\"Confirm your password\" />\n      <Stack direction=\"row\" gap=\"sm\" align=\"center\">\n        <Checkbox id=\"terms\" />\n        <Text as=\"label\" htmlFor=\"terms\" size=\"sm\">\n          I agree to the Terms of Service and Privacy Policy\n        </Text>\n      </Stack>\n      <Button variant=\"primary\" fullWidth>Create Account</Button>\n    </Stack>\n  </Card.Body>\n  <Card.Footer>\n    <Text size=\"sm\" color=\"tertiary\">Already have an account? <Link href=\"#\">Sign in</Link></Text>\n  </Card.Footer>\n</Card>","tags":["auth","signup","registration","form"]},"Settings Drawer":{"filePath":"src/blocks/SettingsDrawer.block.ts","name":"Settings Drawer","description":"Side panel for editing settings with form fields and save/cancel actions","category":"settings","components":["Drawer","Form","Field","Button","Switch"],"code":"<Drawer>\n  <Drawer.Trigger asChild>\n    <Button variant=\"secondary\">Settings</Button>\n  </Drawer.Trigger>\n  <Drawer.Content size=\"md\">\n    <Drawer.Close />\n    <Drawer.Header>\n      <Drawer.Title>Settings</Drawer.Title>\n      <Drawer.Description>Manage your preferences.</Drawer.Description>\n    </Drawer.Header>\n    <Drawer.Body>\n      <Form>\n        <Stack gap=\"md\">\n          <Field>\n            <Field.Label>Display Name</Field.Label>\n            <Field.Control>\n              <Input placeholder=\"Enter name\" />\n            </Field.Control>\n          </Field>\n          <Field>\n            <Field.Label>Email Notifications</Field.Label>\n            <Field.Control>\n              <Switch defaultChecked />\n            </Field.Control>\n          </Field>\n        </Stack>\n      </Form>\n    </Drawer.Body>\n    <Drawer.Footer>\n      <Drawer.Close asChild>\n        <Button variant=\"secondary\">Cancel</Button>\n      </Drawer.Close>\n      <Button variant=\"primary\">Save Changes</Button>\n    </Drawer.Footer>\n  </Drawer.Content>\n</Drawer>","tags":["drawer","settings","form","panel","editor"]},"Settings Panel":{"filePath":"src/blocks/SettingsPanel.block.ts","name":"Settings Panel","description":"Settings panel with switches and descriptions","category":"settings","components":["Card","Stack","Text","Switch"],"code":"const settings = [\n  { label: 'Email Notifications', description: 'Receive updates via email', defaultChecked: true },\n  { label: 'Push Notifications', description: 'Receive push notifications on your device', defaultChecked: false },\n  { label: 'Marketing Emails', description: 'Receive product updates and tips', defaultChecked: false },\n];\n\n<Card>\n  <Card.Header>\n    <Card.Title>Settings</Card.Title>\n  </Card.Header>\n  <Card.Body>\n    <Stack gap=\"lg\">\n      {settings.map((setting) => (\n        <Stack key={setting.label} direction=\"row\" justify=\"between\" align=\"center\">\n          <Stack gap=\"xs\">\n            <Text weight=\"medium\">{setting.label}</Text>\n            <Text size=\"sm\" color=\"tertiary\">{setting.description}</Text>\n          </Stack>\n          <Switch defaultChecked={setting.defaultChecked} />\n        </Stack>\n      ))}\n    </Stack>\n  </Card.Body>\n</Card>","tags":["settings","switches","preferences","panel"]},"Shopping Cart":{"filePath":"src/blocks/ShoppingCart.block.ts","name":"Shopping Cart","description":"Cart with item images, quantities, totals and checkout button","category":"ecommerce","components":["Card","Stack","Text","Image","Badge","Separator","Button"],"code":"const items = [\n  { name: 'Wireless Headphones', price: 199, quantity: 1, image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=100&h=100&fit=crop' },\n  { name: 'Smart Watch', price: 299, quantity: 1, image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=100&h=100&fit=crop' },\n];\n\n<Card>\n  <Card.Header>\n    <Stack direction=\"row\" justify=\"between\" align=\"center\">\n      <Card.Title>Shopping Cart</Card.Title>\n      <Badge>2 items</Badge>\n    </Stack>\n  </Card.Header>\n  <Card.Body>\n    <Stack gap=\"md\">\n      {items.map((item) => (\n        <Stack key={item.name} direction=\"row\" gap=\"md\" align=\"center\">\n          <Image src={item.image} alt={item.name} width={64} height={64} rounded=\"md\" />\n          <Stack gap=\"xs\" style={{ flex: 1 }}>\n            <Text weight=\"semibold\">{item.name}</Text>\n            <Text size=\"sm\" color=\"tertiary\">Qty: {item.quantity}</Text>\n          </Stack>\n          <Text weight=\"semibold\">${item.price}</Text>\n        </Stack>\n      ))}\n      <Separator />\n      <Stack direction=\"row\" justify=\"between\">\n        <Text weight=\"semibold\">Total</Text>\n        <Text weight=\"semibold\">$498</Text>\n      </Stack>\n    </Stack>\n  </Card.Body>\n  <Card.Footer>\n    <Button variant=\"primary\" fullWidth>Checkout</Button>\n  </Card.Footer>\n</Card>","tags":["cart","shopping","ecommerce","checkout"]},"Stats Card":{"filePath":"src/blocks/StatsCard.block.ts","name":"Stats Card","description":"Metric card with value, change indicator and icon","category":"dashboard","components":["Card","Stack","Text","Badge","Icon"],"code":"<Card>\n  <Card.Body>\n    <Stack direction=\"row\" justify=\"between\" align=\"start\">\n      <Stack gap=\"xs\">\n        <Text size=\"sm\" color=\"tertiary\">Total Revenue</Text>\n        <Text size=\"2xl\" weight=\"semibold\">$45,231</Text>\n        <Stack direction=\"row\" gap=\"xs\" align=\"center\">\n          <Badge variant=\"success\">+12.5%</Badge>\n          <Text size=\"sm\" color=\"tertiary\">from last month</Text>\n        </Stack>\n      </Stack>\n      <Icon icon={TrendUp} size=\"lg\" color=\"success\" />\n    </Stack>\n  </Card.Body>\n</Card>","tags":["stats","metrics","kpi","dashboard","card"]},"Stats Card Skeleton":{"filePath":"src/blocks/StatsCardSkeleton.block.ts","name":"Stats Card Skeleton","description":"Card with skeleton metric value, label, and badge for loading stat displays","category":"loading","components":["Card","Stack","Skeleton"],"code":"<Card>\n  <Card.Body>\n    <Stack direction=\"row\" justify=\"between\" align=\"start\">\n      <Stack gap=\"sm\">\n        <Skeleton variant=\"text\" width={100} />\n        <Skeleton variant=\"heading\" width={140} />\n        <Stack direction=\"row\" gap=\"xs\" align=\"center\">\n          <Skeleton variant=\"button\" width={60} height={22} />\n          <Skeleton variant=\"text\" width={90} />\n        </Stack>\n      </Stack>\n      <Skeleton.Circle size=\"lg\" />\n    </Stack>\n  </Card.Body>\n</Card>","tags":["stats","skeleton","loading","placeholder"]},"Table Skeleton":{"filePath":"src/blocks/TableSkeleton.block.ts","name":"Table Skeleton","description":"Table-shaped skeleton rows for loading data tables","category":"loading","components":["Card","Stack","Skeleton"],"code":"<Card>\n  <Card.Header>\n    <Stack direction=\"row\" justify=\"between\" align=\"center\">\n      <Skeleton variant=\"heading\" width={120} />\n      <Skeleton variant=\"input\" width={200} />\n    </Stack>\n  </Card.Header>\n  <Card.Body>\n    <Stack gap=\"none\">\n      {/* Table header row */}\n      <Stack direction=\"row\" gap=\"lg\" style={{ padding: 'var(--fui-space-2) 0', borderBottom: '1px solid var(--fui-border)' }}>\n        <Skeleton variant=\"text\" width=\"25%\" />\n        <Skeleton variant=\"text\" width=\"30%\" />\n        <Skeleton variant=\"text\" width=\"20%\" />\n        <Skeleton variant=\"text\" width=\"15%\" />\n      </Stack>\n      {/* Table body rows */}\n      {Array.from({ length: 5 }).map((_, i) => (\n        <Stack key={i} direction=\"row\" gap=\"lg\" align=\"center\" style={{ padding: 'var(--fui-space-2) 0', borderBottom: '1px solid var(--fui-border)' }}>\n          <Skeleton variant=\"text\" width=\"25%\" />\n          <Skeleton variant=\"text\" width=\"30%\" />\n          <Skeleton variant=\"button\" width=\"20%\" />\n          <Skeleton variant=\"text\" width=\"15%\" />\n        </Stack>\n      ))}\n    </Stack>\n  </Card.Body>\n</Card>","tags":["table","skeleton","loading","placeholder"]},"Thinking States":{"filePath":"src/blocks/ThinkingStates.block.ts","name":"Thinking States","description":"Various AI thinking indicator states: dots, pulse, spinner with steps","category":"ai","components":["Stack","Card","ThinkingIndicator"],"code":"<Stack gap=\"lg\">\n  <Card>\n    <Card.Header>\n      <Card.Title>Dots Animation</Card.Title>\n    </Card.Header>\n    <Card.Body>\n      <ThinkingIndicator variant=\"dots\" label=\"Thinking...\" />\n    </Card.Body>\n  </Card>\n\n  <Card>\n    <Card.Header>\n      <Card.Title>Pulse Animation</Card.Title>\n    </Card.Header>\n    <Card.Body>\n      <ThinkingIndicator variant=\"pulse\" label=\"Processing request...\" />\n    </Card.Body>\n  </Card>\n\n  <Card>\n    <Card.Header>\n      <Card.Title>Spinner with Steps</Card.Title>\n    </Card.Header>\n    <Card.Body>\n      <ThinkingIndicator\n        variant=\"spinner\"\n        label=\"Working on your request...\"\n        showElapsed\n        steps={[\n          { id: '1', label: 'Understanding your question', status: 'complete' },\n          { id: '2', label: 'Searching knowledge base', status: 'active' },\n          { id: '3', label: 'Generating response', status: 'pending' },\n        ]}\n      />\n    </Card.Body>\n  </Card>\n</Stack>","tags":["thinking","loading","ai","indicator","spinner"]}},"tokens":{"prefix":"--fui-","total":488,"categories":{"base":[{"name":"--fui-base-unit","value":"7px"}],"other":[{"name":"--fui-seed-brand","value":"#006b57"},{"name":"--fui-seed-danger","value":"#a54f46"},{"name":"--fui-seed-success","value":"#7fc9b3"},{"name":"--fui-seed-warning","value":"#e0aa5c"},{"name":"--fui-seed-info","value":"#7fa6c4"},{"name":"--fui-sidebar-item-active-indicator","value":"transparent"},{"name":"--fui-line-clamp","value":"2"},{"name":"--fui-navmenu-viewport-left","value":"0px"},{"name":"--fui-control-track-micro","value":"24px"},{"name":"--fui-control-track-sm","value":"28px"},{"name":"--fui-control-track-md","value":"32px"},{"name":"--fui-control-track-lg","value":"40px"},{"name":"--fui-field-track-sm","value":"28px"},{"name":"--fui-field-track-md","value":"32px"},{"name":"--fui-field-track-lg","value":"40px"},{"name":"--fui-icon-xs","value":"12px"},{"name":"--fui-icon-sm","value":"14px"},{"name":"--fui-icon-md","value":"16px"},{"name":"--fui-icon-lg","value":"20px"},{"name":"--fui-icon-xl","value":"24px"},{"name":"--fui-icon-2xl","value":"32px"},{"name":"--fui-layout-measure-inline-floor","value":"56px"},{"name":"--fui-layout-measure-compact-content","value":"168px"},{"name":"--fui-layout-measure-grid-cell","value":"224px"},{"name":"--fui-layout-measure-composer-item","value":"210px"},{"name":"--fui-layout-measure-page-narrow","value":"800px"},{"name":"--fui-type-caption-line","value":"16px"},{"name":"--fui-type-caption-weight","value":"400"},{"name":"--fui-type-caption-tracking","value":"0"},{"name":"--fui-type-ui-compact-line","value":"16px"},{"name":"--fui-type-ui-compact-weight","value":"500"},{"name":"--fui-type-ui-compact-tracking","value":"-0.01em"},{"name":"--fui-type-ui-standard-line","value":"20px"},{"name":"--fui-type-ui-standard-weight","value":"500"},{"name":"--fui-type-ui-standard-tracking","value":"-0.01em"},{"name":"--fui-type-body-compact-line","value":"20px"},{"name":"--fui-type-body-compact-weight","value":"400"},{"name":"--fui-type-body-compact-tracking","value":"0"},{"name":"--fui-type-body-relaxed-line","value":"24px"},{"name":"--fui-type-body-relaxed-weight","value":"400"},{"name":"--fui-type-body-relaxed-tracking","value":"0"},{"name":"--fui-type-title-sm-line","value":"24px"},{"name":"--fui-type-title-sm-weight","value":"600"},{"name":"--fui-type-title-sm-tracking","value":"-0.01em"},{"name":"--fui-type-title-md-line","value":"28px"},{"name":"--fui-type-title-md-weight","value":"600"},{"name":"--fui-type-title-md-tracking","value":"-0.02em"},{"name":"--fui-type-title-lg-line","value":"32px"},{"name":"--fui-type-title-lg-weight","value":"600"},{"name":"--fui-type-title-lg-tracking","value":"-0.02em"},{"name":"--fui-type-code-line","value":"20px"},{"name":"--fui-type-code-weight","value":"400"},{"name":"--fui-type-code-tracking","value":"0"},{"name":"--fui-navigation-sidebar-gutter","value":"8px"},{"name":"--fui-navigation-sidebar-leading-box","value":"16px"},{"name":"--fui-navigation-sidebar-dot","value":"6px"},{"name":"--fui-navigation-sidebar-rail","value":"2px"},{"name":"--fui-navigation-sidebar-label-offset","value":"1px"}],"typography":[{"name":"--fui-font-sans","value":"\"Inter Variable\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif"},{"name":"--fui-font-mono","value":"\"JetBrains Mono Variable\", \"JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, monospace"},{"name":"--fui-font-size-2xs","value":"0.714rem"},{"name":"--fui-font-size-xs","value":"0.857rem"},{"name":"--fui-font-size-sm","value":"1rem"},{"name":"--fui-font-size-base","value":"1rem"},{"name":"--fui-font-size-md","value":"1.071rem"},{"name":"--fui-font-size-lg","value":"1.429rem"},{"name":"--fui-font-size-xl","value":"1.714rem"},{"name":"--fui-font-size-2xl","value":"2.143rem"},{"name":"--fui-font-size-3xl","value":"2.571rem"},{"name":"--fui-font-size-4xl","value":"3.429rem"},{"name":"--fui-popup-item-font-size","value":"0.857rem"},{"name":"--fui-font-weight-normal","value":"400"},{"name":"--fui-font-weight-medium","value":"500"},{"name":"--fui-font-weight-semibold","value":"600"},{"name":"--fui-font-weight-bold","value":"700"},{"name":"--fui-line-height-tight","value":"1.25"},{"name":"--fui-line-height-normal","value":"1.5"},{"name":"--fui-line-height-relaxed","value":"1.625"},{"name":"--fui-line-height-display","value":"1.1"},{"name":"--fui-line-height-prose","value":"1.7"},{"name":"--fui-letter-spacing-tight","value":"0"},{"name":"--fui-letter-spacing-normal","value":"normal"},{"name":"--fui-letter-spacing-display","value":"0"},{"name":"--fui-letter-spacing-wide","value":"0.05em"},{"name":"--fui-kbd-font-size","value":"var(--fui-font-size-2xs)"}],"spacing":[{"name":"--fui-space-px","value":"1px"},{"name":"--fui-space-0-5","value":"0.15rem"},{"name":"--fui-space-0-75","value":"0.215rem"},{"name":"--fui-space-1","value":"0.5rem"},{"name":"--fui-space-2","value":"1rem"},{"name":"--fui-space-3","value":"1.5rem"},{"name":"--fui-space-4","value":"2rem"},{"name":"--fui-space-5","value":"2.5rem"},{"name":"--fui-space-6","value":"3rem"},{"name":"--fui-space-8","value":"4rem"},{"name":"--fui-space-10","value":"5rem"},{"name":"--fui-space-12","value":"6rem"},{"name":"--fui-popup-padding","value":"0.5rem"},{"name":"--fui-popup-row-gap","value":"1px"},{"name":"--fui-popup-item-padding-block","value":"0.5rem"},{"name":"--fui-popup-item-padding-inline","value":"1rem"},{"name":"--fui-kbd-padding-x","value":"var(--fui-space-0-75)"},{"name":"--fui-kbd-gap","value":"calc(var(--fui-space-px) * 2)"},{"name":"--fui-prompt-inset-left","value":"0px"},{"name":"--fui-stack-gap","value":"0"},{"name":"--fui-stack-gap-sm","value":"0"},{"name":"--fui-stack-gap-md","value":"0"},{"name":"--fui-stack-gap-lg","value":"0"},{"name":"--fui-stack-gap-xl","value":"0"},{"name":"--fui-raw-space-0","value":"0"},{"name":"--fui-raw-space-2","value":"2px"},{"name":"--fui-raw-space-4","value":"4px"},{"name":"--fui-raw-space-6","value":"6px"},{"name":"--fui-raw-space-8","value":"8px"},{"name":"--fui-raw-space-10","value":"10px"},{"name":"--fui-raw-space-12","value":"12px"},{"name":"--fui-raw-space-16","value":"16px"},{"name":"--fui-raw-space-20","value":"20px"},{"name":"--fui-raw-space-24","value":"24px"},{"name":"--fui-raw-space-32","value":"32px"},{"name":"--fui-raw-space-40","value":"40px"},{"name":"--fui-raw-space-48","value":"48px"},{"name":"--fui-raw-space-64","value":"64px"},{"name":"--fui-field-inline-inset-sm","value":"10px"},{"name":"--fui-field-inline-inset-md","value":"12px"},{"name":"--fui-field-inline-inset-lg","value":"16px"},{"name":"--fui-surface-inset-panel","value":"0"},{"name":"--fui-surface-inset-compact","value":"12px"},{"name":"--fui-surface-inset-default","value":"16px"},{"name":"--fui-surface-inset-roomy","value":"24px"}],"radius":[{"name":"--fui-radius-sm","value":"0.25rem"},{"name":"--fui-radius-md","value":"0.429rem"},{"name":"--fui-radius-lg","value":"0.571rem"},{"name":"--fui-radius-xl","value":"0.857rem"},{"name":"--fui-radius-full","value":"9999px"},{"name":"--fui-kbd-radius","value":"var(--fui-radius-sm)"},{"name":"--fui-badge-radius","value":"var(--fui-radius-lg)"},{"name":"--fui-card-radius","value":"var(--fui-radius-lg)"},{"name":"--fui-checkbox-radius","value":"var(--fui-radius-sm)"}],"transitions":[{"name":"--fui-transition-fast","value":"160ms cubic-bezier(0.25, 0.46, 0.45, 0.94)"},{"name":"--fui-transition-normal","value":"200ms cubic-bezier(0.4, 0, 0.2, 1)"}],"colors":[{"name":"--fui-color-accent","value":"light-dark(#006b57, #7fc9b3)"},{"name":"--fui-color-on-accent","value":"light-dark(#ffffff, #000000)"},{"name":"--fui-color-danger","value":"#a54f46"},{"name":"--fui-color-danger-hover","value":"rgb(149, 64, 56)"},{"name":"--fui-color-success","value":"#7fc9b3"},{"name":"--fui-color-warning","value":"#e0aa5c"},{"name":"--fui-color-info","value":"#7fa6c4"},{"name":"--fui-selection-color","value":"var(--fui-text-primary)"},{"name":"--fui-field-bg","value":"color-mix(in srgb, var(--fui-bg-elevated) 72%, transparent)"},{"name":"--fui-field-bg-disabled","value":"color-mix(in srgb, var(--fui-bg-tertiary) 78%, var(--fui-bg-primary))"},{"name":"--fui-field-selection-bg","value":"color-mix(in srgb, var(--fui-text-primary) 8%, transparent)"},{"name":"--fui-field-selection-bg-hover","value":"color-mix(in srgb, var(--fui-text-primary) 11%, transparent)"},{"name":"--fui-field-selection-color","value":"var(--fui-text-primary)"},{"name":"--fui-form-group-bg","value":"color-mix(in srgb, var(--fui-bg-secondary) 48%, var(--fui-bg-primary))"},{"name":"--fui-kbd-bg","value":"color-mix(in srgb, var(--fui-text-primary) 4%, transparent)"},{"name":"--fui-kbd-color","value":"var(--fui-text-tertiary)"},{"name":"--fui-app-canvas-bg","value":"var(--fui-body-bg)"},{"name":"--fui-app-main-bg","value":"var(--fui-main-bg)"},{"name":"--fui-app-sidebar-bg","value":"color-mix(in srgb, var(--fui-bg-primary) 78%, var(--fui-bg-secondary))"},{"name":"--fui-sidebar-bg","value":"var(--fui-app-sidebar-bg)"},{"name":"--fui-sidebar-item-color","value":"var(--fui-text-secondary)"},{"name":"--fui-sidebar-item-icon-color","value":"var(--fui-text-tertiary)"},{"name":"--fui-sidebar-item-hover-bg","value":"var(--fui-bg-hover)"},{"name":"--fui-sidebar-item-hover-color","value":"var(--fui-text-primary)"},{"name":"--fui-sidebar-item-active-bg","value":"color-mix(in srgb, var(--fui-text-primary) 8%, transparent)"},{"name":"--fui-sidebar-item-active-color","value":"var(--fui-text-primary)"},{"name":"--fui-badge-dot-color","value":"currentColor"},{"name":"--fui-card-bg","value":"color-mix(in srgb, var(--fui-bg-elevated) 92%, transparent)"},{"name":"--fui-card-hover-bg","value":"color-mix(in srgb, var(--fui-bg-elevated) 88%, var(--fui-text-primary) 4%)"},{"name":"--fui-card-stat-bg","value":"color-mix(in srgb, var(--fui-bg-elevated) 74%, transparent)"},{"name":"--fui-panel-bg","value":"color-mix(in srgb, var(--fui-bg-elevated) 74%, transparent)"},{"name":"--fui-table-bg","value":"transparent"},{"name":"--fui-table-header-bg","value":"color-mix(in srgb, var(--fui-text-primary) 5%, transparent)"},{"name":"--fui-table-row-hover-bg","value":"var(--fui-bg-hover)"},{"name":"--fui-table-row-active-bg","value":"var(--fui-bg-active)"},{"name":"--fui-table-row-selected-bg","value":"color-mix(in srgb, var(--fui-text-primary) 8%, transparent)"},{"name":"--fui-table-subrow-bg","value":"color-mix(in srgb, var(--fui-bg-secondary) 62%, transparent)"},{"name":"--fui-tabs-pills-bg","value":"color-mix(in srgb, var(--fui-text-primary) 5%, transparent)"},{"name":"--fui-tabs-pill-hover-bg","value":"transparent"},{"name":"--fui-tabs-pill-active-bg","value":"color-mix(in srgb, var(--fui-text-primary) 9%, transparent)"},{"name":"--fui-toggle-group-selected-bg","value":"var(--fui-selection-bg)"},{"name":"--fui-color-accent-hover","value":"light-dark(\n    hsl(169.9771289871, 164.3448630261%, 13.7353127687%),\n    rgb(111, 185, 163)\n  )"},{"name":"--fui-color-accent-active","value":"light-dark(\n    hsl(169.8890840621, 209.9337122072%, 10.2857473619%),\n    rgb(102, 175, 154)\n  )"},{"name":"--fui-color-danger-bg","value":"color-mix(in oklch, var(--fui-seed-danger) 24%, black)"},{"name":"--fui-color-success-bg","value":"color-mix(in oklch, var(--fui-seed-success) 24%, black)"},{"name":"--fui-color-warning-bg","value":"color-mix(in oklch, var(--fui-seed-warning) 24%, black)"},{"name":"--fui-color-info-bg","value":"color-mix(in oklch, var(--fui-seed-info) 24%, black)"},{"name":"--fui-color-danger-text","value":"color-mix(in oklch, var(--fui-seed-danger) 78%, white 22%)"},{"name":"--fui-color-success-text","value":"color-mix(in oklch, var(--fui-seed-success) 78%, white 22%)"},{"name":"--fui-color-warning-text","value":"color-mix(in oklch, var(--fui-seed-warning) 78%, white 22%)"},{"name":"--fui-color-info-text","value":"color-mix(in oklch, var(--fui-seed-info) 78%, white 22%)"},{"name":"--fui-stroke-hairline","value":"1px"},{"name":"--fui-stroke-default","value":"2px"},{"name":"--fui-stroke-strong","value":"3px"}],"backdrop":[{"name":"--fui-backdrop","value":"light-dark(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8))"}],"surfaces":[{"name":"--fui-bg-primary","value":"light-dark(#ffffff, #212121)"},{"name":"--fui-bg-secondary","value":"light-dark(#f4f4f4, #171717)"},{"name":"--fui-bg-tertiary","value":"light-dark(#f4f4f4, #2f2f2f)"},{"name":"--fui-bg-elevated","value":"light-dark(#ffffff, #2f2f2f)"},{"name":"--fui-bg-subtle","value":"light-dark(#fafafa, #171717)"},{"name":"--fui-bg-hover","value":"light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.055))"},{"name":"--fui-bg-active","value":"light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.085))"},{"name":"--fui-body-bg","value":"light-dark(#fff, #212121)"},{"name":"--fui-main-bg","value":"light-dark(#ffffff, #212121)"},{"name":"--fui-bg-inverse","value":"light-dark(#212121, #ececec)"},{"name":"--fui-bg-highlight","value":"color-mix(in srgb, var(--fui-text-primary) 7%, transparent)"}],"text":[{"name":"--fui-text-primary","value":"light-dark(#212121, #ececec)"},{"name":"--fui-text-secondary","value":"light-dark(rgb(84, 84, 84), #b4b4b4)"},{"name":"--fui-text-tertiary","value":"light-dark(rgb(86, 86, 86), #8f8f8f)"},{"name":"--fui-text-inverse","value":"light-dark(#f4f4f4, #212121)"}],"borders":[{"name":"--fui-border","value":"light-dark(rgba(0, 0, 0, 0.05), #323232)"},{"name":"--fui-border-default","value":"light-dark(rgba(0, 0, 0, 0.05), #323232)"},{"name":"--fui-border-strong","value":"light-dark(rgba(0, 0, 0, 0.1), #4b4b4b)"},{"name":"--fui-border-subtle","value":"color-mix(in srgb, var(--fui-border-default) 68%, transparent)"},{"name":"--fui-field-border","value":"var(--fui-border-strong)"},{"name":"--fui-field-border-focus","value":"var(--fui-text-primary)"},{"name":"--fui-field-selection-border","value":"var(--fui-border-strong)"},{"name":"--fui-form-group-border","value":"var(--fui-border-default)"},{"name":"--fui-kbd-border","value":"color-mix(in srgb, var(--fui-border-strong) 72%, transparent)"},{"name":"--fui-sidebar-border","value":"var(--fui-border-default)"},{"name":"--fui-sidebar-item-active-border","value":"transparent"},{"name":"--fui-sidebar-footer-border","value":"color-mix(in srgb, var(--fui-border-default) 68%, transparent)"},{"name":"--fui-card-border","value":"color-mix(in srgb, var(--fui-border-default) 86%, transparent)"},{"name":"--fui-card-outlined-border","value":"var(--fui-card-border)"},{"name":"--fui-card-hover-border","value":"color-mix(in srgb, var(--fui-border-strong) 86%, transparent)"},{"name":"--fui-card-stat-border","value":"color-mix(in srgb, var(--fui-border-default) 78%, transparent)"},{"name":"--fui-panel-border","value":"color-mix(in srgb, var(--fui-border-default) 78%, transparent)"},{"name":"--fui-table-border","value":"var(--fui-border-default)"},{"name":"--fui-table-header-border","value":"var(--fui-border-strong)"},{"name":"--fui-table-row-selected-border","value":"var(--fui-border-strong)"},{"name":"--fui-tabs-pills-border","value":"var(--fui-border-default)"},{"name":"--fui-tabs-pill-active-border","value":"transparent"},{"name":"--fui-field-border-hover","value":"var(--fui-text-primary)"},{"name":"--fui-toggle-group-selected-border","value":"var(--fui-text-primary)"}],"sizing":[{"name":"--fui-kbd-height","value":"1.286rem","description":"18px at 14px root"},{"name":"--fui-kbd-min-width","value":"1.714rem","description":"24px"},{"name":"--fui-kbd-reserved-width","value":"2.714rem","description":"38px, enough for \"⌘K\""},{"name":"--fui-control-height-xs","value":"measurements.target-value(\"controlTrack\", \"micro\")"},{"name":"--fui-control-height-sm","value":"measurements.target-value(\"controlTrack\", \"sm\")"},{"name":"--fui-control-height-md","value":"measurements.target-value(\"controlTrack\", \"md\")"},{"name":"--fui-control-height-lg","value":"measurements.target-value(\"controlTrack\", \"lg\")"},{"name":"--fui-target-size-min","value":"2.286rem"},{"name":"--fui-sidebar-item-height","value":"2.2857142857rem"},{"name":"--fui-grid-min-child-width","value":"224px"},{"name":"--fui-navmenu-viewport-height","value":"0px"},{"name":"--fui-navmenu-viewport-width","value":"0px"},{"name":"--fui-select-max-items","value":"4.5"},{"name":"--fui-layout-measure-field-minimum","value":"140px"},{"name":"--fui-type-caption-size","value":"12px"},{"name":"--fui-type-ui-compact-size","value":"12px"},{"name":"--fui-type-ui-standard-size","value":"14px"},{"name":"--fui-type-body-compact-size","value":"14px"},{"name":"--fui-type-body-relaxed-size","value":"16px"},{"name":"--fui-type-title-sm-size","value":"16px"},{"name":"--fui-type-title-md-size","value":"20px"},{"name":"--fui-type-title-lg-size","value":"24px"},{"name":"--fui-type-code-size","value":"14px"},{"name":"--fui-navigation-app-shell-header-height","value":"56px"},{"name":"--fui-navigation-sidebar-collapsed-width","value":"56px"}],"component-sizing":[{"name":"--fui-button-primary-base","value":"light-dark(#006b57, #006b57)"},{"name":"--fui-button-primary-hover","value":"light-dark(#187762, #187762)"},{"name":"--fui-button-primary-active","value":"light-dark(#005f4c, #005f4c)"},{"name":"--fui-button-primary-color","value":"#fff"},{"name":"--fui-button-radius","value":"var(--fui-radius-full)"},{"name":"--fui-button-primary-bg","value":"light-dark(#006b57, #006b57)"},{"name":"--fui-button-primary-bg-hover","value":"light-dark(#187762, #187762)"},{"name":"--fui-button-primary-bg-active","value":"light-dark(#005f4c, #005f4c)"},{"name":"--fui-button-primary-shadow","value":"none"},{"name":"--fui-button-primary-shadow-active","value":"none"},{"name":"--fui-button-neutral-color","value":"var(--fui-text-primary)"},{"name":"--fui-button-outlined-shadow","value":"none"},{"name":"--fui-button-neutral-shadow","value":"none"},{"name":"--fui-button-neutral-shadow-active","value":"none"},{"name":"--fui-button-height-xs","value":"measurements.target-value(\"controlTrack\", \"micro\")"},{"name":"--fui-button-height-sm","value":"measurements.target-value(\"controlTrack\", \"sm\")"},{"name":"--fui-button-height-md","value":"measurements.target-value(\"controlTrack\", \"md\")"},{"name":"--fui-button-height-lg","value":"measurements.target-value(\"controlTrack\", \"lg\")"},{"name":"--fui-input-height-sm","value":"28px"},{"name":"--fui-input-height","value":"32px"},{"name":"--fui-input-height-lg","value":"40px"},{"name":"--fui-touch-sm","value":"2.2857142857rem"},{"name":"--fui-touch-md","value":"2.2857142857rem"},{"name":"--fui-touch-lg","value":"3.1428571429rem"}],"code":[{"name":"--fui-code-bg","value":"#171717"},{"name":"--fui-code-selection-bg","value":"color-mix( in srgb, light-dark(#006b57, #006b57) 30%, transparent )"}],"shadows":[{"name":"--fui-card-active-shadow","value":"inset 0 1px 2px color-mix(in srgb, black 12%, transparent)"},{"name":"--fui-card-panel-shadow","value":"var(--fui-card-shadow)"},{"name":"--fui-card-stat-shadow","value":"var(--fui-card-shadow)"},{"name":"--fui-tabs-pill-active-shadow","value":"none"},{"name":"--fui-toggle-group-selected-shadow","value":"none"},{"name":"--fui-shadow-sm","value":"0 1px 2px 0 rgba(0, 0, 0, 0.02)"},{"name":"--fui-shadow-md","value":"0 2px 4px -1px rgba(0, 0, 0, 0.04), 0 1px 3px -2px rgba(0, 0, 0, 0.03)"},{"name":"--fui-shadow-lg","value":"0 8px 12px -3px rgba(0, 0, 0, 0.06), 0 3px 5px -4px rgba(0, 0, 0, 0.04)"}],"focus":[{"name":"--fui-focus-ring-color","value":"light-dark(#006b57, #7fc9b3)"},{"name":"--fui-focus-ring-offset","value":"2px"},{"name":"--fui-focus-ring-width","value":"2px"}],"scrollbar":[{"name":"--fui-scrollbar-width","value":"8px"},{"name":"--fui-scrollbar-track","value":"light-dark(#f4f4f4, transparent)"},{"name":"--fui-scrollbar-thumb","value":"light-dark(#d1d1d1, #4b4b4b)"},{"name":"--fui-scrollbar-thumb-hover","value":"light-dark(\n    #b0b0b0,\n    #b4b4b4\n  )"},{"name":"$fui-base-font-size","value":"14px"},{"name":"$fui-base-unit","value":"7px"},{"name":"$fui-font-sans","value":"\"Inter Variable\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif"},{"name":"$fui-font-mono","value":"\"JetBrains Mono Variable\", \"JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, monospace"},{"name":"$fui-font-size-2xs","value":"0.714rem"},{"name":"$fui-font-size-xs","value":"0.857rem"},{"name":"$fui-font-size-sm","value":"1rem"},{"name":"$fui-font-size-base","value":"1rem"},{"name":"$fui-font-size-md","value":"1.071rem"},{"name":"$fui-font-size-lg","value":"1.429rem"},{"name":"$fui-font-size-xl","value":"1.714rem"},{"name":"$fui-font-size-2xl","value":"2.143rem"},{"name":"$fui-font-size-3xl","value":"2.571rem"},{"name":"$fui-font-size-4xl","value":"3.429rem"},{"name":"$fui-popup-item-font-size","value":"0.857rem"},{"name":"$fui-font-weight-normal","value":"400"},{"name":"$fui-font-weight-medium","value":"500"},{"name":"$fui-font-weight-semibold","value":"600"},{"name":"$fui-font-weight-bold","value":"700"},{"name":"$fui-line-height-tight","value":"1.25"},{"name":"$fui-line-height-normal","value":"1.5"},{"name":"$fui-line-height-relaxed","value":"1.625"},{"name":"$fui-line-height-display","value":"1.1"},{"name":"$fui-line-height-prose","value":"1.7"},{"name":"$fui-letter-spacing-tight","value":"0"},{"name":"$fui-letter-spacing-normal","value":"normal"},{"name":"$fui-letter-spacing-display","value":"0"},{"name":"$fui-letter-spacing-wide","value":"0.05em"},{"name":"$fui-space-px","value":"1px"},{"name":"$fui-space-0-5","value":"0.15rem"},{"name":"$fui-space-0-75","value":"0.215rem"},{"name":"$fui-space-1","value":"0.5rem"},{"name":"$fui-space-2","value":"1rem"},{"name":"$fui-space-3","value":"1.5rem"},{"name":"$fui-space-4","value":"2rem"},{"name":"$fui-space-5","value":"2.5rem"},{"name":"$fui-space-6","value":"3rem"},{"name":"$fui-space-8","value":"4rem"},{"name":"$fui-space-10","value":"5rem"},{"name":"$fui-space-12","value":"6rem"},{"name":"$fui-popup-padding","value":"0.5rem"},{"name":"$fui-popup-row-gap","value":"1px"},{"name":"$fui-popup-item-padding-block","value":"0.5rem"},{"name":"$fui-popup-item-padding-inline","value":"1rem"},{"name":"$fui-radius-sm","value":"0.25rem"},{"name":"$fui-radius-md","value":"0.429rem"},{"name":"$fui-radius-lg","value":"0.571rem"},{"name":"$fui-radius-xl","value":"0.857rem"},{"name":"$fui-radius-full","value":"9999px"},{"name":"$fui-transition-fast","value":"160ms cubic-bezier(0.25, 0.46, 0.45, 0.94)"},{"name":"$fui-transition-normal","value":"200ms cubic-bezier(0.4, 0, 0.2, 1)"},{"name":"$fui-color-accent","value":"#006b57"},{"name":"$fui-color-on-accent","value":"#ffffff"},{"name":"$fui-color-accent-hover","value":"hsl(169.9771289871, 164.3448630261%, 13.7353127687%)"},{"name":"$fui-color-accent-active","value":"hsl(169.8890840621, 209.9337122072%, 10.2857473619%)"},{"name":"$fui-color-danger","value":"#a54f46"},{"name":"$fui-color-danger-hover","value":"rgb(149, 64, 56)"},{"name":"$fui-color-success","value":"#7fc9b3"},{"name":"$fui-color-warning","value":"#e0aa5c"},{"name":"$fui-color-info","value":"#7fa6c4"},{"name":"$fui-color-danger-bg","value":"rgba(165, 79, 70, 0.1)"},{"name":"$fui-color-success-bg","value":"rgba(127, 201, 179, 0.1)"},{"name":"$fui-color-warning-bg","value":"rgba(224, 170, 92, 0.1)"},{"name":"$fui-color-info-bg","value":"rgba(127, 166, 196, 0.1)"},{"name":"$fui-color-danger-text","value":"rgb(158, 73, 64)"},{"name":"$fui-color-success-text","value":"rgb(30, 109, 90)"},{"name":"$fui-color-warning-text","value":"hsl(41.194706405, 139.9133245857%, 21.9712967806%)"},{"name":"$fui-color-info-text","value":"rgb(63, 100, 128)"},{"name":"$fui-color-danger-border","value":"color-mix(in srgb, rgb(158, 73, 64) 30%, transparent)"},{"name":"$fui-color-success-border","value":"color-mix(in srgb, rgb(30, 109, 90) 28%, transparent)"},{"name":"$fui-color-warning-border","value":"color-mix(in srgb, hsl(41.194706405, 139.9133245857%, 21.9712967806%) 28%, transparent)"},{"name":"$fui-color-info-border","value":"color-mix(in srgb, rgb(63, 100, 128) 30%, transparent)"},{"name":"$fui-bg-primary","value":"#ffffff"},{"name":"$fui-bg-secondary","value":"#f4f4f4"},{"name":"$fui-bg-tertiary","value":"#f4f4f4"},{"name":"$fui-bg-elevated","value":"#ffffff"},{"name":"$fui-bg-subtle","value":"#fafafa"},{"name":"$fui-bg-hover","value":"rgba(0, 0, 0, 0.04)"},{"name":"$fui-bg-active","value":"rgba(0, 0, 0, 0.06)"},{"name":"$fui-body-bg","value":"#fff"},{"name":"$fui-main-bg","value":"#ffffff"},{"name":"$fui-text-primary","value":"#212121"},{"name":"$fui-text-secondary","value":"rgb(84, 84, 84)"},{"name":"$fui-text-tertiary","value":"rgb(86, 86, 86)"},{"name":"$fui-text-inverse","value":"#f4f4f4"},{"name":"$fui-bg-inverse","value":"#212121"},{"name":"$fui-border","value":"rgba(0, 0, 0, 0.05)"},{"name":"$fui-border-default","value":"rgba(0, 0, 0, 0.05)"},{"name":"$fui-border-strong","value":"rgba(0, 0, 0, 0.1)"},{"name":"$fui-shadow-sm","value":"0 1px 2px 0 rgba(0, 0, 0, 0.02)"},{"name":"$fui-shadow-md","value":"0 2px 4px -1px rgba(0, 0, 0, 0.04), 0 1px 3px -2px rgba(0, 0, 0, 0.03)"},{"name":"$fui-shadow-lg","value":"0 8px 12px -3px rgba(0, 0, 0, 0.06), 0 3px 5px -4px rgba(0, 0, 0, 0.04)"},{"name":"$fui-focus-ring-color","value":"#006b57"},{"name":"$fui-focus-ring-offset","value":"2px"},{"name":"$fui-focus-ring-width","value":"2px"},{"name":"$fui-scrollbar-width","value":"8px"},{"name":"$fui-scrollbar-track","value":"#f4f4f4"},{"name":"$fui-scrollbar-thumb","value":"#d1d1d1"},{"name":"$fui-scrollbar-thumb-hover","value":"#b0b0b0"},{"name":"$fui-dark-color-accent","value":"#7fc9b3"},{"name":"$fui-dark-color-on-accent","value":"#000000"},{"name":"$fui-dark-color-accent-hover","value":"rgb(111, 185, 163)"},{"name":"$fui-dark-color-accent-active","value":"rgb(102, 175, 154)"},{"name":"$fui-brand-is-default","value":"true"},{"name":"$_rt-dark-accent","value":"$fui-dark-color-accent"},{"name":"$_rt-dark-accent-hover","value":"$fui-dark-color-accent-hover"},{"name":"$_rt-dark-accent-active","value":"$fui-dark-color-accent-active"},{"name":"$fui-dark-bg-primary","value":"#212121"},{"name":"$fui-dark-bg-secondary","value":"#171717"},{"name":"$fui-dark-bg-tertiary","value":"#2f2f2f"},{"name":"$fui-dark-bg-elevated","value":"#2f2f2f"},{"name":"$fui-dark-bg-subtle","value":"#171717"},{"name":"$fui-dark-bg-hover","value":"rgba(255, 255, 255, 0.055)"},{"name":"$fui-dark-bg-active","value":"rgba(255, 255, 255, 0.085)"},{"name":"$fui-dark-body-bg","value":"#212121"},{"name":"$fui-dark-main-bg","value":"#212121"},{"name":"$fui-dark-text-primary","value":"#ececec"},{"name":"$fui-dark-text-secondary","value":"#b4b4b4"},{"name":"$fui-dark-text-tertiary","value":"#8f8f8f"},{"name":"$fui-dark-text-inverse","value":"#212121"},{"name":"$fui-dark-bg-inverse","value":"#ececec"},{"name":"$fui-dark-border","value":"#323232"},{"name":"$fui-dark-border-default","value":"#323232"},{"name":"$fui-dark-border-strong","value":"#4b4b4b"},{"name":"$fui-dark-shadow-sm","value":"0 1px 2px 0 rgba(0, 0, 0, 0.15)"},{"name":"$fui-dark-shadow-md","value":"0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 1px 3px -2px rgba(0, 0, 0, 0.15)"},{"name":"$fui-dark-shadow-lg","value":"0 8px 12px -3px rgba(0, 0, 0, 0.25), 0 3px 5px -4px rgba(0, 0, 0, 0.18)"},{"name":"$fui-dark-color-danger-bg","value":"rgba(165, 79, 70, 0.15)"},{"name":"$fui-dark-color-success-bg","value":"rgba(127, 201, 179, 0.15)"},{"name":"$fui-dark-color-warning-bg","value":"rgba(224, 170, 92, 0.15)"},{"name":"$fui-dark-color-info-bg","value":"rgba(127, 166, 196, 0.15)"},{"name":"$fui-dark-color-danger-text","value":"rgb(212, 121, 110)"},{"name":"$fui-dark-color-success-text","value":"#7fc9b3"},{"name":"$fui-dark-color-warning-text","value":"#e0aa5c"},{"name":"$fui-dark-color-info-text","value":"#7fa6c4"},{"name":"$fui-dark-focus-ring-color","value":"#7fc9b3"},{"name":"$fui-dark-scrollbar-track","value":"transparent"},{"name":"$fui-dark-scrollbar-thumb","value":"#4b4b4b"},{"name":"$fui-dark-scrollbar-thumb-hover","value":"#b4b4b4"},{"name":"$fui-backdrop","value":"rgba(0, 0, 0, 0.5)"},{"name":"$fui-dark-backdrop","value":"rgba(0, 0, 0, 0.8)"},{"name":"$fui-breakpoint-sm","value":"640px"},{"name":"$fui-breakpoint-md","value":"768px"},{"name":"$fui-breakpoint-lg","value":"1024px"},{"name":"$fui-breakpoint-xl","value":"1280px"},{"name":"$fui-control-height-xs","value":"measurements.target-value(\"controlTrack\", \"micro\")"},{"name":"$fui-control-height-sm","value":"measurements.target-value(\"controlTrack\", \"sm\")"},{"name":"$fui-control-height-md","value":"measurements.target-value(\"controlTrack\", \"md\")"},{"name":"$fui-control-height-lg","value":"measurements.target-value(\"controlTrack\", \"lg\")"},{"name":"$fui-button-height-xs","value":"measurements.target-value(\"controlTrack\", \"micro\")"},{"name":"$fui-button-height-sm","value":"measurements.target-value(\"controlTrack\", \"sm\")"},{"name":"$fui-button-height-md","value":"measurements.target-value(\"controlTrack\", \"md\")"},{"name":"$fui-button-height-lg","value":"measurements.target-value(\"controlTrack\", \"lg\")"},{"name":"$fui-button-outlined-shadow","value":"none"},{"name":"$fui-input-height-sm","value":"measurements.target-value(\"fieldTrack\", \"sm\")"},{"name":"$fui-input-height","value":"measurements.target-value(\"fieldTrack\", \"md\")"},{"name":"$fui-input-height-lg","value":"measurements.target-value(\"fieldTrack\", \"lg\")"},{"name":"$fui-touch-sm","value":"2.2857142857rem"},{"name":"$fui-touch-md","value":"2.2857142857rem"},{"name":"$fui-touch-lg","value":"3.1428571429rem"},{"name":"$fui-target-size-min","value":"2.286rem"},{"name":"$fui-target-size-comfortable","value":"2.2857142857rem"},{"name":"$fui-icon-xs","value":"measurements.target-value(\"icon\", \"xs\")"},{"name":"$fui-icon-sm","value":"measurements.target-value(\"icon\", \"sm\")"},{"name":"$fui-icon-md","value":"measurements.target-value(\"icon\", \"md\")"},{"name":"$fui-icon-lg","value":"measurements.target-value(\"icon\", \"lg\")"},{"name":"$fui-icon-xl","value":"measurements.target-value(\"icon\", \"xl\")"},{"name":"$fui-icon-2xl","value":"measurements.target-value(\"icon\", \"2xl\")"},{"name":"$fui-anim-offset-sm","value":"4px"},{"name":"$fui-anim-offset-md","value":"8px"},{"name":"$fui-sidebar-item-height","value":"2.2857142857rem"},{"name":"$fui-appshell-header-height","value":"56px"},{"name":"$fui-header-z-index","value":"40"},{"name":"$fui-code-bg","value":"#171717"},{"name":"$fui-code-selection-bg","value":"color-mix( in srgb, light-dark(#006b57, #006b57) 30%, transparent )"}],"layout":[{"name":"--fui-appshell-header-height","value":"56px"},{"name":"--fui-header-z-index","value":"40"}],"semantic-borders":[{"name":"--fui-color-danger-border","value":"color-mix(in srgb, var(--fui-color-danger-text) 30%, transparent)"},{"name":"--fui-color-success-border","value":"color-mix(in srgb, var(--fui-color-success-text) 28%, transparent)"},{"name":"--fui-color-warning-border","value":"color-mix(in srgb, var(--fui-color-warning-text) 28%, transparent)"},{"name":"--fui-color-info-border","value":"color-mix(in srgb, var(--fui-color-info-text) 30%, transparent)"}],"z-index":[{"name":"--fui-stack-direction","value":"column"},{"name":"--fui-stack-direction-sm","value":"column"},{"name":"--fui-stack-direction-md","value":"column"},{"name":"--fui-stack-direction-lg","value":"column"},{"name":"--fui-stack-direction-xl","value":"column"}]}},"graph":{"nodes":[{"name":"Accordion","category":"layout","status":"stable","compositionPattern":"compound","subComponents":["Item","Trigger","Content"]},{"name":"Alert","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Icon","Body","Title","Content","Actions","Action","Close"]},{"name":"AppShell","category":"layout","status":"stable","compositionPattern":"compound","subComponents":["Header","Sidebar","Main","Aside"]},{"name":"Badge","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Avatar","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Group"]},{"name":"BentoGrid","category":"layout","status":"stable"},{"name":"Box","category":"layout","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Breadcrumbs","category":"navigation","status":"stable","compositionPattern":"compound","subComponents":["Item","Separator"]},{"name":"Button","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"ButtonGroup","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Card","category":"layout","status":"stable","compositionPattern":"compound","subComponents":["Header","Title","Description","Body","Footer"]},{"name":"Chart","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Root","Tooltip","TooltipContent","Legend","LegendContent","preload"]},{"name":"Chip","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Group"]},{"name":"CodeBlock","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Tabbed"]},{"name":"ColorPicker","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Root","preload"]},{"name":"Collapsible","category":"layout","status":"stable","compositionPattern":"compound","subComponents":["Root","Trigger","Content"]},{"name":"Checkbox","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Combobox","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Input","Trigger","Content","Item","ItemIndicator","Empty","Group","GroupLabel"]},{"name":"Command","category":"navigation","status":"stable","compositionPattern":"compound","subComponents":["Input","List","Item","Group","Empty","Separator"]},{"name":"ConversationList","category":"ai","status":"stable","compositionPattern":"compound","subComponents":["DateSeparator","TypingIndicator"]},{"name":"DataTable","category":"display","status":"stable","compositionPattern":"simple","subComponents":["Root","Columns","preload"]},{"name":"DatePicker","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Trigger","Content","Calendar","Preset","preload"]},{"name":"Drawer","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Trigger","Content","Close","SwipeArea","Header","Title","Description","Body","Footer"]},{"name":"Editor","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Toolbar","ToolbarGroup","ToolbarButton","Separator","StatusIndicator","Content","StatusBar","preload"]},{"name":"EmptyState","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Icon","Title","Description","Actions"]},{"name":"Dialog","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Trigger","Content","Close","Header","Title","Description","Body","Footer"]},{"name":"Fieldset","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Legend","Description"]},{"name":"Field","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Label","Control","Description","Error","Validity","Required"]},{"name":"Form","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Root","Actions"]},{"name":"Header","category":"navigation","status":"stable","compositionPattern":"compound","subComponents":["SkipLink","Trigger","Brand","Nav","NavItem","MobileNav","MobileNavLink","MobileNavActions","NavMenu","NavMenuItem","Search","Spacer","Actions"]},{"name":"IconButton","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Icon","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Grid","category":"layout","status":"stable"},{"name":"Input","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Image","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"List","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Item"]},{"name":"Link","category":"navigation","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Loading","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Inline","Screen"]},{"name":"Main","category":"layout","status":"stable","compositionPattern":"compound","subComponents":["Header","Description","Content","Footer"]},{"name":"Listbox","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Item","Group","Empty"]},{"name":"Message","category":"ai","status":"stable","compositionPattern":"compound","subComponents":["Content","Actions","Timestamp","Avatar"]},{"name":"Menu","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Trigger","Content","Item","CheckboxItem","RadioGroup","RadioItem","Group","GroupLabel","Separator","Submenu","SubmenuTrigger"]},{"name":"Markdown","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Root","preload"]},{"name":"NavigationMenu","category":"navigation","status":"stable","compositionPattern":"compound","subComponents":["List","Item","Trigger","Content","Link","Indicator","Viewport","MobileBrand","MobileContent","MobileSection"]},{"name":"Pagination","category":"navigation","status":"stable","compositionPattern":"compound","subComponents":["Previous","Next","Items","Item","Ellipsis"]},{"name":"Popover","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Trigger","Content","Close","Title","Description","Body","Footer"]},{"name":"Progress","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Root","Circular"]},{"name":"Prompt","category":"ai","status":"stable","compositionPattern":"compound","subComponents":["Textarea","Toolbar","Tabs","Tab","Actions","Info","ActionButton","ModeButton","Select","Attach","Attachments","Usage","Submit"]},{"name":"RadioGroup","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Item"]},{"name":"ScrollArea","category":"layout","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Select","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Trigger","Content","Item","Group","GroupLabel"]},{"name":"Separator","category":"layout","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Sidebar","category":"navigation","status":"stable","compositionPattern":"compound","subComponents":["Header","Nav","Section","SectionAction","Item","SubItem","Submenu","Footer","Trigger","Overlay","CollapseToggle","Rail","MenuSkeleton"]},{"name":"Skeleton","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Text","Circle"]},{"name":"Stack","category":"layout","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Slider","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Table","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Root","Head","Body","Footer","Row","Cell","HeaderCell","Caption"]},{"name":"Switch","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"TableOfContents","category":"navigation","status":"stable","compositionPattern":"compound","subComponents":["Item","Group"]},{"name":"Tabs","category":"navigation","status":"stable","compositionPattern":"compound","subComponents":["List","Tab","Panel"]},{"name":"Text","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Textarea","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Theme","category":"navigation","status":"stable","compositionPattern":"compound","subComponents":["Root","Provider","Toggle","useTheme"]},{"name":"ThinkingIndicator","category":"ai","status":"stable","compositionPattern":"compound","subComponents":["Steps","Step"]},{"name":"Toast","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Provider"]},{"name":"Tooltip","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Root","Provider"]},{"name":"ToggleGroup","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Item"]},{"name":"VisuallyHidden","category":"navigation","status":"stable","compositionPattern":"compound","subComponents":["Root"]}],"edges":[{"s":"AppShell","t":"Sidebar","ty":"imports","w":1,"p":"source:AppShell/index.tsx"},{"s":"AppShell","t":"Sidebar","ty":"hook-depends","w":0.75,"p":"source:AppShell/index.tsx"},{"s":"ColorPicker","t":"Input","ty":"imports","w":1,"p":"source:ColorPicker/index.tsx"},{"s":"ConversationList","t":"Loading","ty":"imports","w":1,"p":"source:ConversationList/index.tsx"},{"s":"DataTable","t":"Checkbox","ty":"imports","w":1,"p":"source:DataTable/index.tsx"},{"s":"Header","t":"ScrollArea","ty":"imports","w":1,"p":"source:Header/index.tsx"},{"s":"Header","t":"Sidebar","ty":"hook-depends","w":0.75,"p":"source:Header/index.tsx"},{"s":"Main","t":"Stack","ty":"imports","w":1,"p":"source:Main/index.tsx"},{"s":"Message","t":"Avatar","ty":"imports","w":1,"p":"source:Message/index.tsx"},{"s":"Message","t":"Markdown","ty":"imports","w":1,"p":"source:Message/index.tsx"},{"s":"NavigationMenu","t":"Collapsible","ty":"imports","w":1,"p":"source:NavigationMenu/index.tsx"},{"s":"NavigationMenu","t":"ScrollArea","ty":"imports","w":1,"p":"source:NavigationMenu/index.tsx"},{"s":"Prompt","t":"Loading","ty":"imports","w":1,"p":"source:Prompt/index.tsx"},{"s":"Prompt","t":"Select","ty":"imports","w":1,"p":"source:Prompt/index.tsx"},{"s":"Sidebar","t":"Badge","ty":"imports","w":1,"p":"source:Sidebar/index.tsx"},{"s":"Sidebar","t":"Tooltip","ty":"imports","w":1,"p":"source:Sidebar/index.tsx"},{"s":"Sidebar","t":"Skeleton","ty":"imports","w":1,"p":"source:Sidebar/index.tsx"},{"s":"Sidebar","t":"Collapsible","ty":"imports","w":1,"p":"source:Sidebar/index.tsx"},{"s":"Sidebar","t":"ScrollArea","ty":"imports","w":1,"p":"source:Sidebar/index.tsx"},{"s":"TableOfContents","t":"Text","ty":"imports","w":1,"p":"source:TableOfContents/index.tsx"},{"s":"ThinkingIndicator","t":"Loading","ty":"imports","w":1,"p":"source:ThinkingIndicator/index.tsx"},{"s":"AppShell","t":"Box","ty":"renders","w":0.5,"p":"variant:AppShell"},{"s":"AppShell","t":"Header","ty":"renders","w":0.5,"p":"variant:AppShell"},{"s":"AppShell","t":"Sidebar","ty":"renders","w":0.5,"p":"variant:AppShell"},{"s":"AppShell","t":"Icon","ty":"renders","w":0.5,"p":"variant:AppShell"},{"s":"AppShell","t":"Stack","ty":"renders","w":0.5,"p":"variant:AppShell"},{"s":"AppShell","t":"Text","ty":"renders","w":0.5,"p":"variant:AppShell"},{"s":"Badge","t":"Stack","ty":"renders","w":0.5,"p":"variant:Badge"},{"s":"Avatar","t":"Stack","ty":"renders","w":0.5,"p":"variant:Avatar"},{"s":"ButtonGroup","t":"Button","ty":"renders","w":0.5,"p":"variant:ButtonGroup"},{"s":"Card","t":"Stack","ty":"renders","w":0.5,"p":"variant:Card"},{"s":"Card","t":"Text","ty":"renders","w":0.5,"p":"variant:Card"},{"s":"Card","t":"Progress","ty":"renders","w":0.5,"p":"variant:Card"},{"s":"Chip","t":"Stack","ty":"renders","w":0.5,"p":"variant:Chip"},{"s":"CodeBlock","t":"Button","ty":"renders","w":0.5,"p":"variant:CodeBlock"},{"s":"CodeBlock","t":"Card","ty":"renders","w":0.5,"p":"variant:CodeBlock"},{"s":"Command","t":"Dialog","ty":"renders","w":0.5,"p":"variant:Command"},{"s":"Command","t":"Button","ty":"renders","w":0.5,"p":"variant:Command"},{"s":"ConversationList","t":"Message","ty":"renders","w":0.5,"p":"variant:ConversationList"},{"s":"DataTable","t":"Stack","ty":"renders","w":0.5,"p":"variant:DataTable"},{"s":"DataTable","t":"Text","ty":"renders","w":0.5,"p":"variant:DataTable"},{"s":"DataTable","t":"Button","ty":"renders","w":0.5,"p":"variant:DataTable"},{"s":"DataTable","t":"Input","ty":"renders","w":0.5,"p":"variant:DataTable"},{"s":"DataTable","t":"Menu","ty":"renders","w":0.5,"p":"variant:DataTable"},{"s":"Drawer","t":"Button","ty":"renders","w":0.5,"p":"variant:Drawer"},{"s":"Drawer","t":"Stack","ty":"renders","w":0.5,"p":"variant:Drawer"},{"s":"Drawer","t":"Input","ty":"renders","w":0.5,"p":"variant:Drawer"},{"s":"Editor","t":"Button","ty":"renders","w":0.5,"p":"variant:Editor"},{"s":"EmptyState","t":"Button","ty":"renders","w":0.5,"p":"variant:EmptyState"},{"s":"Dialog","t":"Button","ty":"renders","w":0.5,"p":"variant:Dialog"},{"s":"Fieldset","t":"Grid","ty":"renders","w":0.5,"p":"variant:Fieldset"},{"s":"Fieldset","t":"Field","ty":"renders","w":0.5,"p":"variant:Fieldset"},{"s":"Fieldset","t":"Input","ty":"renders","w":0.5,"p":"variant:Fieldset"},{"s":"Fieldset","t":"Textarea","ty":"renders","w":0.5,"p":"variant:Fieldset"},{"s":"Fieldset","t":"Select","ty":"renders","w":0.5,"p":"variant:Fieldset"},{"s":"Fieldset","t":"Checkbox","ty":"renders","w":0.5,"p":"variant:Fieldset"},{"s":"Field","t":"Input","ty":"renders","w":0.5,"p":"variant:Field"},{"s":"Field","t":"Grid","ty":"renders","w":0.5,"p":"variant:Field"},{"s":"Form","t":"Grid","ty":"renders","w":0.5,"p":"variant:Form"},{"s":"Form","t":"Field","ty":"renders","w":0.5,"p":"variant:Form"},{"s":"Form","t":"Input","ty":"renders","w":0.5,"p":"variant:Form"},{"s":"Form","t":"Checkbox","ty":"renders","w":0.5,"p":"variant:Form"},{"s":"Form","t":"Button","ty":"renders","w":0.5,"p":"variant:Form"},{"s":"Form","t":"Fieldset","ty":"renders","w":0.5,"p":"variant:Form"},{"s":"Form","t":"Select","ty":"renders","w":0.5,"p":"variant:Form"},{"s":"Form","t":"Textarea","ty":"renders","w":0.5,"p":"variant:Form"},{"s":"Form","t":"Switch","ty":"renders","w":0.5,"p":"variant:Form"},{"s":"Form","t":"RadioGroup","ty":"renders","w":0.5,"p":"variant:Form"},{"s":"Header","t":"Button","ty":"renders","w":0.5,"p":"variant:Header"},{"s":"Header","t":"Input","ty":"renders","w":0.5,"p":"variant:Header"},{"s":"Header","t":"NavigationMenu","ty":"renders","w":0.5,"p":"variant:Header"},{"s":"Menu","t":"Button","ty":"renders","w":0.5,"p":"variant:Menu"},{"s":"Popover","t":"Button","ty":"renders","w":0.5,"p":"variant:Popover"},{"s":"Popover","t":"Input","ty":"renders","w":0.5,"p":"variant:Popover"},{"s":"ScrollArea","t":"Chip","ty":"renders","w":0.5,"p":"variant:ScrollArea"},{"s":"Sidebar","t":"Link","ty":"renders","w":0.5,"p":"variant:Sidebar"},{"s":"Stack","t":"Badge","ty":"renders","w":0.5,"p":"variant:Stack"},{"s":"Stack","t":"Button","ty":"renders","w":0.5,"p":"variant:Stack"},{"s":"Tooltip","t":"Button","ty":"renders","w":0.5,"p":"variant:Tooltip"},{"s":"Card","t":"Tabs","ty":"composes","w":0.5,"p":"block:Account Settings"},{"s":"Card","t":"Stack","ty":"composes","w":0.5,"p":"block:Account Settings"},{"s":"Card","t":"Input","ty":"composes","w":0.5,"p":"block:Account Settings"},{"s":"Card","t":"Button","ty":"composes","w":0.5,"p":"block:Account Settings"},{"s":"Card","t":"Text","ty":"composes","w":0.5,"p":"block:Account Settings"},{"s":"Tabs","t":"Stack","ty":"composes","w":0.5,"p":"block:Account Settings"},{"s":"Tabs","t":"Input","ty":"composes","w":0.5,"p":"block:Account Settings"},{"s":"Tabs","t":"Button","ty":"composes","w":0.5,"p":"block:Account Settings"},{"s":"Tabs","t":"Text","ty":"composes","w":0.5,"p":"block:Account Settings"},{"s":"Stack","t":"Input","ty":"composes","w":0.5,"p":"block:Account Settings"},{"s":"Stack","t":"Button","ty":"composes","w":0.5,"p":"block:Account Settings"},{"s":"Stack","t":"Text","ty":"composes","w":0.5,"p":"block:Account Settings"},{"s":"Input","t":"Button","ty":"composes","w":0.5,"p":"block:Account Settings"},{"s":"Input","t":"Text","ty":"composes","w":0.5,"p":"block:Account Settings"},{"s":"Button","t":"Text","ty":"composes","w":0.5,"p":"block:Account Settings"},{"s":"Card","t":"Avatar","ty":"composes","w":0.5,"p":"block:Activity Feed"},{"s":"Stack","t":"Avatar","ty":"composes","w":0.5,"p":"block:Activity Feed"},{"s":"Text","t":"Avatar","ty":"composes","w":0.5,"p":"block:Activity Feed"},{"s":"Card","t":"Skeleton","ty":"composes","w":0.5,"p":"block:Activity Feed Skeleton"},{"s":"Stack","t":"Skeleton","ty":"composes","w":0.5,"p":"block:Activity Feed Skeleton"},{"s":"Editor","t":"Button","ty":"composes","w":0.5,"p":"block:Blog Editor"},{"s":"Stack","t":"Box","ty":"composes","w":0.5,"p":"block:Chat Interface"},{"s":"Stack","t":"ConversationList","ty":"composes","w":0.5,"p":"block:Chat Interface"},{"s":"Stack","t":"Message","ty":"composes","w":0.5,"p":"block:Chat Interface"},{"s":"Stack","t":"Prompt","ty":"composes","w":0.5,"p":"block:Chat Interface"},{"s":"Box","t":"ConversationList","ty":"composes","w":0.5,"p":"block:Chat Interface"},{"s":"Box","t":"Message","ty":"composes","w":0.5,"p":"block:Chat Interface"},{"s":"Box","t":"Prompt","ty":"composes","w":0.5,"p":"block:Chat Interface"},{"s":"ConversationList","t":"Message","ty":"composes","w":0.5,"p":"block:Chat Interface"},{"s":"ConversationList","t":"Prompt","ty":"composes","w":0.5,"p":"block:Chat Interface"},{"s":"Message","t":"Prompt","ty":"composes","w":0.5,"p":"block:Chat Interface"},{"s":"Card","t":"Separator","ty":"composes","w":0.5,"p":"block:Checkout Form"},{"s":"Stack","t":"Separator","ty":"composes","w":0.5,"p":"block:Checkout Form"},{"s":"Text","t":"Input","ty":"composes","w":0.5,"p":"block:Checkout Form"},{"s":"Text","t":"Separator","ty":"composes","w":0.5,"p":"block:Checkout Form"},{"s":"Text","t":"Button","ty":"composes","w":0.5,"p":"block:Checkout Form"},{"s":"Input","t":"Separator","ty":"composes","w":0.5,"p":"block:Checkout Form"},{"s":"Separator","t":"Button","ty":"composes","w":0.5,"p":"block:Checkout Form"},{"s":"Dialog","t":"Command","ty":"composes","w":0.5,"p":"block:Command Palette"},{"s":"Card","t":"Textarea","ty":"composes","w":0.5,"p":"block:Contact Form"},{"s":"Stack","t":"Textarea","ty":"composes","w":0.5,"p":"block:Contact Form"},{"s":"Input","t":"Textarea","ty":"composes","w":0.5,"p":"block:Contact Form"},{"s":"Textarea","t":"Button","ty":"composes","w":0.5,"p":"block:Contact Form"},{"s":"AppShell","t":"Header","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"AppShell","t":"Sidebar","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"AppShell","t":"Stack","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"AppShell","t":"Grid","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"AppShell","t":"Card","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"AppShell","t":"Text","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"AppShell","t":"Badge","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"AppShell","t":"Input","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"AppShell","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"AppShell","t":"Avatar","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Header","t":"Sidebar","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Header","t":"Stack","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Header","t":"Grid","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Header","t":"Card","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Header","t":"Text","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Header","t":"Badge","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Header","t":"Input","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Header","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Header","t":"Avatar","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Sidebar","t":"Stack","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Sidebar","t":"Grid","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Sidebar","t":"Card","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Sidebar","t":"Text","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Sidebar","t":"Badge","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Sidebar","t":"Input","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Sidebar","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Sidebar","t":"Avatar","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Stack","t":"Grid","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Stack","t":"Card","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Stack","t":"Badge","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Stack","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Grid","t":"Card","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Grid","t":"Text","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Grid","t":"Badge","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Grid","t":"Input","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Grid","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Grid","t":"Avatar","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Card","t":"Badge","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Card","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Text","t":"Badge","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Text","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Badge","t":"Input","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Badge","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Badge","t":"Avatar","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Input","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Input","t":"Avatar","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"ThemeToggle","t":"Avatar","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"AppShell","t":"Box","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"AppShell","t":"Icon","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"AppShell","t":"Button","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"AppShell","t":"Separator","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"AppShell","t":"Table","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"AppShell","t":"ChartContainer","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"AppShell","t":"ChartTooltip","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"AppShell","t":"Breadcrumbs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"AppShell","t":"Progress","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"AppShell","t":"Tabs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Header","t":"Box","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Header","t":"Icon","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Header","t":"Button","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Header","t":"Separator","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Header","t":"Table","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Header","t":"ChartContainer","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Header","t":"ChartTooltip","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Header","t":"Breadcrumbs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Header","t":"Progress","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Header","t":"Tabs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Sidebar","t":"Box","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Sidebar","t":"Icon","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Sidebar","t":"Button","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Sidebar","t":"Separator","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Sidebar","t":"Table","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Sidebar","t":"ChartContainer","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Sidebar","t":"ChartTooltip","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Sidebar","t":"Breadcrumbs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Sidebar","t":"Progress","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Sidebar","t":"Tabs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Grid","t":"Stack","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Grid","t":"Box","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Grid","t":"Icon","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Grid","t":"Button","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Grid","t":"Separator","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Grid","t":"Table","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Grid","t":"ChartContainer","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Grid","t":"ChartTooltip","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Grid","t":"Breadcrumbs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Grid","t":"Progress","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Grid","t":"Tabs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Card","t":"Box","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Card","t":"Icon","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Card","t":"Table","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Card","t":"ChartContainer","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Card","t":"ChartTooltip","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Card","t":"Breadcrumbs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Card","t":"Progress","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Stack","t":"Icon","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Stack","t":"Table","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Stack","t":"ChartContainer","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Stack","t":"ChartTooltip","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Stack","t":"Breadcrumbs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Stack","t":"Progress","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Stack","t":"Tabs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Box","t":"Text","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Box","t":"Badge","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Box","t":"Icon","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Box","t":"Avatar","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Box","t":"Input","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Box","t":"Button","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Box","t":"Separator","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Box","t":"Table","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Box","t":"ChartContainer","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Box","t":"ChartTooltip","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Box","t":"Breadcrumbs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Box","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Box","t":"Progress","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Box","t":"Tabs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Text","t":"Icon","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Text","t":"Table","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Text","t":"ChartContainer","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Text","t":"ChartTooltip","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Text","t":"Breadcrumbs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Text","t":"Progress","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Text","t":"Tabs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Badge","t":"Icon","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Badge","t":"Button","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Badge","t":"Separator","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Badge","t":"Table","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Badge","t":"ChartContainer","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Badge","t":"ChartTooltip","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Badge","t":"Breadcrumbs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Badge","t":"Progress","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Badge","t":"Tabs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Icon","t":"Avatar","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Icon","t":"Input","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Icon","t":"Button","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Icon","t":"Separator","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Icon","t":"Table","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Icon","t":"ChartContainer","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Icon","t":"ChartTooltip","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Icon","t":"Breadcrumbs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Icon","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Icon","t":"Progress","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Icon","t":"Tabs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Avatar","t":"Input","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Avatar","t":"Button","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Avatar","t":"Separator","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Avatar","t":"Table","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Avatar","t":"ChartContainer","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Avatar","t":"ChartTooltip","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Avatar","t":"Breadcrumbs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Avatar","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Avatar","t":"Progress","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Avatar","t":"Tabs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Input","t":"Table","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Input","t":"ChartContainer","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Input","t":"ChartTooltip","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Input","t":"Breadcrumbs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Input","t":"Progress","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Input","t":"Tabs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Button","t":"Separator","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Button","t":"Table","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Button","t":"ChartContainer","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Button","t":"ChartTooltip","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Button","t":"Breadcrumbs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Button","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Button","t":"Progress","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Button","t":"Tabs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Separator","t":"Table","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Separator","t":"ChartContainer","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Separator","t":"ChartTooltip","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Separator","t":"Breadcrumbs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Separator","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Separator","t":"Progress","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Separator","t":"Tabs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Table","t":"ChartContainer","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Table","t":"ChartTooltip","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Table","t":"Breadcrumbs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Table","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Table","t":"Progress","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Table","t":"Tabs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"ChartContainer","t":"ChartTooltip","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"ChartContainer","t":"Breadcrumbs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"ChartContainer","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"ChartContainer","t":"Progress","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"ChartContainer","t":"Tabs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"ChartTooltip","t":"Breadcrumbs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"ChartTooltip","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"ChartTooltip","t":"Progress","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"ChartTooltip","t":"Tabs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Breadcrumbs","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Breadcrumbs","t":"Progress","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Breadcrumbs","t":"Tabs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"ThemeToggle","t":"Progress","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"ThemeToggle","t":"Tabs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Progress","t":"Tabs","ty":"composes","w":0.5,"p":"block:Dashboard Page"},{"s":"Card","t":"Grid","ty":"composes","w":0.5,"p":"block:Dashboard Skeleton"},{"s":"Grid","t":"Skeleton","ty":"composes","w":0.5,"p":"block:Dashboard Skeleton"},{"s":"EmptyState","t":"Icon","ty":"composes","w":0.5,"p":"block:Empty State"},{"s":"EmptyState","t":"Button","ty":"composes","w":0.5,"p":"block:Empty State"},{"s":"Card","t":"Accordion","ty":"composes","w":0.5,"p":"block:FAQ Section"},{"s":"Accordion","t":"Text","ty":"composes","w":0.5,"p":"block:FAQ Section"},{"s":"Icon","t":"Text","ty":"composes","w":0.5,"p":"block:Feature Grid"},{"s":"Stack","t":"Image","ty":"composes","w":0.5,"p":"block:Hero Section"},{"s":"Text","t":"Image","ty":"composes","w":0.5,"p":"block:Hero Section"},{"s":"Button","t":"Image","ty":"composes","w":0.5,"p":"block:Hero Section"},{"s":"Card","t":"Link","ty":"composes","w":0.5,"p":"block:Login Form"},{"s":"Stack","t":"Link","ty":"composes","w":0.5,"p":"block:Login Form"},{"s":"Input","t":"Link","ty":"composes","w":0.5,"p":"block:Login Form"},{"s":"Button","t":"Link","ty":"composes","w":0.5,"p":"block:Login Form"},{"s":"Text","t":"Link","ty":"composes","w":0.5,"p":"block:Login Form"},{"s":"Header","t":"NavigationMenu","ty":"composes","w":0.5,"p":"block:Navigation Header"},{"s":"NavigationMenu","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Navigation Header"},{"s":"NavigationMenu","t":"Button","ty":"composes","w":0.5,"p":"block:Navigation Header"},{"s":"ThemeToggle","t":"Button","ty":"composes","w":0.5,"p":"block:Navigation Header"},{"s":"Card","t":"Pagination","ty":"composes","w":0.5,"p":"block:Paginated Table"},{"s":"Table","t":"Pagination","ty":"composes","w":0.5,"p":"block:Paginated Table"},{"s":"Card","t":"Image","ty":"composes","w":0.5,"p":"block:Product Card"},{"s":"Image","t":"Stack","ty":"composes","w":0.5,"p":"block:Product Card"},{"s":"Image","t":"Text","ty":"composes","w":0.5,"p":"block:Product Card"},{"s":"Image","t":"Badge","ty":"composes","w":0.5,"p":"block:Product Card"},{"s":"Image","t":"Button","ty":"composes","w":0.5,"p":"block:Product Card"},{"s":"Card","t":"Checkbox","ty":"composes","w":0.5,"p":"block:Registration Form"},{"s":"Stack","t":"Checkbox","ty":"composes","w":0.5,"p":"block:Registration Form"},{"s":"Input","t":"Checkbox","ty":"composes","w":0.5,"p":"block:Registration Form"},{"s":"Checkbox","t":"Button","ty":"composes","w":0.5,"p":"block:Registration Form"},{"s":"Checkbox","t":"Text","ty":"composes","w":0.5,"p":"block:Registration Form"},{"s":"Checkbox","t":"Link","ty":"composes","w":0.5,"p":"block:Registration Form"},{"s":"Drawer","t":"Form","ty":"composes","w":0.5,"p":"block:Settings Drawer"},{"s":"Drawer","t":"Field","ty":"composes","w":0.5,"p":"block:Settings Drawer"},{"s":"Drawer","t":"Button","ty":"composes","w":0.5,"p":"block:Settings Drawer"},{"s":"Drawer","t":"Switch","ty":"composes","w":0.5,"p":"block:Settings Drawer"},{"s":"Form","t":"Field","ty":"composes","w":0.5,"p":"block:Settings Drawer"},{"s":"Form","t":"Button","ty":"composes","w":0.5,"p":"block:Settings Drawer"},{"s":"Form","t":"Switch","ty":"composes","w":0.5,"p":"block:Settings Drawer"},{"s":"Field","t":"Button","ty":"composes","w":0.5,"p":"block:Settings Drawer"},{"s":"Field","t":"Switch","ty":"composes","w":0.5,"p":"block:Settings Drawer"},{"s":"Button","t":"Switch","ty":"composes","w":0.5,"p":"block:Settings Drawer"},{"s":"Card","t":"Switch","ty":"composes","w":0.5,"p":"block:Settings Panel"},{"s":"Stack","t":"Switch","ty":"composes","w":0.5,"p":"block:Settings Panel"},{"s":"Text","t":"Switch","ty":"composes","w":0.5,"p":"block:Settings Panel"},{"s":"Image","t":"Separator","ty":"composes","w":0.5,"p":"block:Shopping Cart"},{"s":"Stack","t":"ThinkingIndicator","ty":"composes","w":0.5,"p":"block:Thinking States"},{"s":"Card","t":"ThinkingIndicator","ty":"composes","w":0.5,"p":"block:Thinking States"},{"s":"Accordion","t":"Tabs","ty":"alternative-to","w":1,"p":"relation","no":"Use Tabs for horizontal switching between related views"},{"s":"Accordion","t":"Dialog","ty":"alternative-to","w":1,"p":"relation","no":"Use Dialog for focused content that interrupts the flow"},{"s":"Alert","t":"Badge","ty":"alternative-to","w":1,"p":"relation","no":"Use Badge for compact, inline status labels"},{"s":"Alert","t":"Toast","ty":"alternative-to","w":1,"p":"relation","no":"Use Toast for transient notifications that auto-dismiss"},{"s":"Alert","t":"Dialog","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Dialog for blocking confirmations"},{"s":"Theme","t":"AppShell","ty":"parent-of","w":1,"p":"relation","no":"AppShell should be wrapped in ThemeProvider"},{"s":"AppShell","t":"Header","ty":"parent-of","w":1,"p":"relation","no":"Header is placed inside AppShell.Header"},{"s":"AppShell","t":"Sidebar","ty":"parent-of","w":1,"p":"relation","no":"Sidebar content goes inside AppShell.Sidebar"},{"s":"Badge","t":"Alert","ty":"alternative-to","w":1,"p":"relation","no":"Use Alert for prominent, longer messages with actions"},{"s":"Badge","t":"Chip","ty":"sibling-of","w":0.75,"p":"relation","no":"Chip is interactive (clickable/filterable); Badge is display-only"},{"s":"Avatar","t":"Avatar","ty":"parent-of","w":1,"p":"relation","no":"Use Avatar.Group for stacked avatar displays"},{"s":"BentoGrid","t":"Grid","ty":"alternative-to","w":1,"p":"relation","no":"Use Grid for uniform layouts; BentoGrid for asymmetric spans with built-in surfaces"},{"s":"BentoGrid","t":"Card","ty":"sibling-of","w":0.75,"p":"relation","no":"BentoGrid.Item has built-in surface styling similar to Card"},{"s":"Box","t":"Stack","ty":"alternative-to","w":1,"p":"relation","no":"Use Stack for directional layouts with gap"},{"s":"Box","t":"Grid","ty":"alternative-to","w":1,"p":"relation","no":"Use Grid for column-based layouts"},{"s":"Box","t":"Card","ty":"alternative-to","w":1,"p":"relation","no":"Use Card for content containers with structure"},{"s":"Breadcrumbs","t":"Tabs","ty":"alternative-to","w":1,"p":"relation","no":"Use Tabs for flat, non-hierarchical navigation"},{"s":"Button","t":"Link","ty":"alternative-to","w":1,"p":"relation","no":"Use Link for navigation without action context"},{"s":"ButtonGroup","t":"Button","ty":"parent-of","w":1,"p":"relation","no":"Use ButtonGroup for related action sets"},{"s":"ButtonGroup","t":"Stack","ty":"alternative-to","w":1,"p":"relation","no":"Use Stack for more general layout needs"},{"s":"Grid","t":"Card","ty":"parent-of","w":1,"p":"relation","no":"Use Grid + Card for responsive card layouts"},{"s":"Card","t":"List","ty":"alternative-to","w":1,"p":"relation","no":"Use List for linear, text-first layouts"},{"s":"Card","t":"Chart","ty":"parent-of","w":1,"p":"relation","no":"Charts are typically placed inside Cards"},{"s":"Chart","t":"Progress","ty":"alternative-to","w":1,"p":"relation","no":"Use Progress for single-value completion"},{"s":"Chart","t":"Table","ty":"sibling-of","w":0.75,"p":"relation","no":"Combine with Table for full data views"},{"s":"Chip","t":"Badge","ty":"sibling-of","w":0.75,"p":"relation","no":"Badge is display-only; Chip is interactive"},{"s":"Chip","t":"ToggleGroup","ty":"alternative-to","w":1,"p":"relation","no":"Use ToggleGroup for mutually exclusive options"},{"s":"Chip","t":"Button","ty":"alternative-to","w":1,"p":"relation","no":"Use Button for primary actions, Chip for selection/filtering"},{"s":"Card","t":"CodeBlock","ty":"parent-of","w":1,"p":"relation","no":"Can be wrapped in Card for additional context"},{"s":"CodeBlock","t":"Tabs","ty":"parent-of","w":1,"p":"relation","no":"Use in Tabs for showing code in multiple languages"},{"s":"ColorPicker","t":"Input","ty":"sibling-of","w":0.75,"p":"relation","no":"ColorPicker is a specialized input for colors"},{"s":"ColorPicker","t":"RadioGroup","ty":"alternative-to","w":1,"p":"relation","no":"Use RadioGroup for predefined color choices"},{"s":"Field","t":"ColorPicker","ty":"parent-of","w":1,"p":"relation","no":"ColorPicker uses Field internally for structure"},{"s":"Collapsible","t":"Accordion","ty":"alternative-to","w":1,"p":"relation","no":"Use Accordion for multiple exclusive collapsible sections"},{"s":"Collapsible","t":"Menu","ty":"alternative-to","w":1,"p":"relation","no":"Use Menu for dropdown navigation with actions"},{"s":"Checkbox","t":"Switch","ty":"alternative-to","w":1,"p":"relation","no":"Use Switch for immediate-effect settings"},{"s":"Checkbox","t":"Input","ty":"sibling-of","w":0.75,"p":"relation","no":"Checkbox handles boolean; Input handles text"},{"s":"Combobox","t":"Select","ty":"alternative-to","w":1,"p":"relation","no":"Use Select when search/filtering is not needed"},{"s":"Combobox","t":"Input","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Input for free-form text entry"},{"s":"Combobox","t":"Listbox","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Listbox for inline option lists"},{"s":"Command","t":"Dialog","ty":"sibling-of","w":0.75,"p":"relation","no":"Compose inside Dialog for modal command palette"},{"s":"Command","t":"Listbox","ty":"sibling-of","w":0.75,"p":"relation","no":"Command uses Listbox-like keyboard navigation internally"},{"s":"Command","t":"Combobox","ty":"alternative-to","w":1,"p":"relation","no":"Use Combobox for form field selection with search"},{"s":"ConversationList","t":"Message","ty":"parent-of","w":1,"p":"relation","no":"ConversationList contains Message components"},{"s":"ConversationList","t":"ThinkingIndicator","ty":"parent-of","w":1,"p":"relation","no":"Show ThinkingIndicator at bottom while awaiting response"},{"s":"ConversationList","t":"Prompt","ty":"sibling-of","w":0.75,"p":"relation","no":"Typically paired with Prompt for input"},{"s":"DataTable","t":"Table","ty":"alternative-to","w":1,"p":"relation","no":"Use Table for simple semantic HTML tables"},{"s":"DataTable","t":"EmptyState","ty":"sibling-of","w":0.75,"p":"relation","no":"Use EmptyState for empty table states"},{"s":"DataTable","t":"Badge","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Badge for status columns"},{"s":"DataTable","t":"Menu","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Menu for filter dropdowns"},{"s":"DataTable","t":"Checkbox","ty":"sibling-of","w":0.75,"p":"relation","no":"Built-in checkbox selection via showCheckbox"},{"s":"DatePicker","t":"Select","ty":"alternative-to","w":1,"p":"relation","no":"Use Select for choosing from a list of options"},{"s":"DatePicker","t":"Input","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Input for free-form text date entry"},{"s":"DatePicker","t":"Popover","ty":"composes","w":0.5,"p":"relation","no":"DatePicker uses Popover for the calendar dropdown"},{"s":"Drawer","t":"Dialog","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Dialog for centered modal overlays"},{"s":"Drawer","t":"Sidebar","ty":"alternative-to","w":1,"p":"relation","no":"Use Sidebar for permanent side navigation"},{"s":"Drawer","t":"Popover","ty":"alternative-to","w":1,"p":"relation","no":"Use Popover for small contextual content"},{"s":"Editor","t":"Prompt","ty":"sibling-of","w":0.75,"p":"relation","no":"Prompt is for AI/chat input; Editor is for long-form content editing"},{"s":"Editor","t":"Textarea","ty":"alternative-to","w":1,"p":"relation","no":"Use Textarea for simple multi-line input without formatting toolbar"},{"s":"Editor","t":"Input","ty":"alternative-to","w":1,"p":"relation","no":"Use Input for single-line text input"},{"s":"EmptyState","t":"Alert","ty":"alternative-to","w":1,"p":"relation","no":"Use Alert for error states with retry"},{"s":"EmptyState","t":"Progress","ty":"alternative-to","w":1,"p":"relation","no":"Use Progress/Spinner for loading states"},{"s":"Dialog","t":"Popover","ty":"alternative-to","w":1,"p":"relation","no":"Use Popover for non-modal contextual content"},{"s":"Dialog","t":"Menu","ty":"alternative-to","w":1,"p":"relation","no":"Use Menu for action lists"},{"s":"Dialog","t":"Alert","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Alert for inline notifications"},{"s":"Fieldset","t":"Field","ty":"sibling-of","w":0.75,"p":"relation","no":"Contains Field components"},{"s":"Form","t":"Fieldset","ty":"parent-of","w":1,"p":"relation","no":"Used within a Form"},{"s":"Fieldset","t":"Card","ty":"alternative-to","w":1,"p":"relation","no":"Use Card for non-form visual grouping"},{"s":"Field","t":"Input","ty":"alternative-to","w":1,"p":"relation","no":"Use Input for simple fields with built-in label/error"},{"s":"Form","t":"Field","ty":"parent-of","w":1,"p":"relation","no":"Wrap in Form for server-side error distribution"},{"s":"Field","t":"Fieldset","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Fieldset to group related fields"},{"s":"Form","t":"Field","ty":"sibling-of","w":0.75,"p":"relation","no":"Contains Field components for error distribution"},{"s":"Form","t":"Fieldset","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Fieldset to group fields within a Form"},{"s":"Form","t":"Button","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Button type=\"submit\" for form submission"},{"s":"Header","t":"Sidebar","ty":"sibling-of","w":0.75,"p":"relation","no":"Header.Trigger toggles Sidebar on mobile"},{"s":"Header","t":"Theme","ty":"parent-of","w":1,"p":"relation","no":"ThemeToggle is commonly placed in Header.Actions"},{"s":"Header","t":"NavigationMenu","ty":"parent-of","w":1,"p":"relation","no":"Use NavigationMenu inside Header for rich dropdown nav with auto mobile drawer"},{"s":"IconButton","t":"Button","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Button when the action should have a visible text label or broader layout variants"},{"s":"Icon","t":"Button","ty":"parent-of","w":1,"p":"relation","no":"Use inside icon-only buttons with VisuallyHidden label"},{"s":"Icon","t":"VisuallyHidden","ty":"sibling-of","w":0.75,"p":"relation","no":"Pair with VisuallyHidden for accessible icon-only elements"},{"s":"Icon","t":"Badge","ty":"parent-of","w":1,"p":"relation","no":"Can be used as badge icon prop"},{"s":"Grid","t":"Separator","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Separator between grid sections"},{"s":"Input","t":"Textarea","ty":"alternative-to","w":1,"p":"relation","no":"Use Textarea for multi-line text input"},{"s":"Input","t":"Select","ty":"alternative-to","w":1,"p":"relation","no":"Use Select when choosing from predefined options"},{"s":"Field","t":"Input","ty":"parent-of","w":1,"p":"relation","no":"Use Field for advanced form composition and custom controls"},{"s":"Image","t":"Card","ty":"parent-of","w":1,"p":"relation","no":"Common pattern to use Image at top of product cards"},{"s":"Image","t":"Avatar","ty":"alternative-to","w":1,"p":"relation","no":"Use Avatar for user profile pictures"},{"s":"List","t":"Icon","ty":"parent-of","w":1,"p":"relation","no":"Use Icon as List.Item icon prop"},{"s":"List","t":"Stack","ty":"alternative-to","w":1,"p":"relation","no":"Use Stack for non-semantic vertical lists"},{"s":"Link","t":"Button","ty":"alternative-to","w":1,"p":"relation","no":"Use Button for primary actions, Link for navigation"},{"s":"Text","t":"Link","ty":"parent-of","w":1,"p":"relation","no":"Links often appear within Text components"},{"s":"Listbox","t":"Input","ty":"sibling-of","w":0.75,"p":"relation","no":"Pair with Input for search/autocomplete patterns"},{"s":"Listbox","t":"Menu","ty":"alternative-to","w":1,"p":"relation","no":"Use Menu when you need a trigger button"},{"s":"Listbox","t":"Select","ty":"alternative-to","w":1,"p":"relation","no":"Use Select for form field selection"},{"s":"Listbox","t":"List","ty":"alternative-to","w":1,"p":"relation","no":"Use List for static, non-interactive lists"},{"s":"Message","t":"Avatar","ty":"parent-of","w":1,"p":"relation","no":"Use Avatar component for custom avatar content"},{"s":"Message","t":"ThinkingIndicator","ty":"sibling-of","w":0.75,"p":"relation","no":"Show ThinkingIndicator while awaiting assistant response"},{"s":"Menu","t":"Select","ty":"alternative-to","w":1,"p":"relation","no":"Use Select for form field selection"},{"s":"Menu","t":"Popover","ty":"alternative-to","w":1,"p":"relation","no":"Use Popover for rich non-action content"},{"s":"Markdown","t":"Text","ty":"alternative-to","w":1,"p":"relation","no":"Use Text for plain, non-markdown text"},{"s":"Message","t":"Markdown","ty":"parent-of","w":1,"p":"relation","no":"Message wraps Markdown when markdown prop is true"},{"s":"NavigationMenu","t":"Header","ty":"sibling-of","w":0.75,"p":"relation","no":"Place NavigationMenu inside Header for site navigation"},{"s":"NavigationMenu","t":"Sidebar","ty":"alternative-to","w":1,"p":"relation","no":"Use Sidebar for persistent side navigation, NavigationMenu for header dropdowns"},{"s":"NavigationMenu","t":"Menu","ty":"alternative-to","w":1,"p":"relation","no":"Use Menu for action menus (role=menu), NavigationMenu for site navigation (disclosure pattern)"},{"s":"NavigationMenu","t":"Breadcrumbs","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Breadcrumbs for hierarchical page trail, NavigationMenu for site-level navigation"},{"s":"Pagination","t":"Table","ty":"sibling-of","w":0.75,"p":"relation","no":"Commonly paired for table pagination"},{"s":"Pagination","t":"Listbox","ty":"alternative-to","w":1,"p":"relation","no":"Use Listbox for small sets of options"},{"s":"Popover","t":"Tooltip","ty":"alternative-to","w":1,"p":"relation","no":"Use Tooltip for brief, non-interactive hints"},{"s":"Popover","t":"Menu","ty":"alternative-to","w":1,"p":"relation","no":"Use Menu for action lists"},{"s":"Popover","t":"Dialog","ty":"alternative-to","w":1,"p":"relation","no":"Use Dialog for blocking interactions"},{"s":"Progress","t":"Badge","ty":"alternative-to","w":1,"p":"relation","no":"Use Badge for status without percentage"},{"s":"Progress","t":"Alert","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Alert for completion messages"},{"s":"Prompt","t":"Input","ty":"alternative-to","w":1,"p":"relation","no":"Use Input for simple single-line text input"},{"s":"Prompt","t":"Textarea","ty":"alternative-to","w":1,"p":"relation","no":"Use Textarea for multi-line without toolbar"},{"s":"RadioGroup","t":"Checkbox","ty":"alternative-to","w":1,"p":"relation","no":"Use Checkbox for multiple selections"},{"s":"RadioGroup","t":"Select","ty":"alternative-to","w":1,"p":"relation","no":"Use Select for many options or limited space"},{"s":"RadioGroup","t":"Switch","ty":"alternative-to","w":1,"p":"relation","no":"Use Switch for binary on/off choices"},{"s":"Select","t":"Menu","ty":"alternative-to","w":1,"p":"relation","no":"Use Menu for action-based dropdowns"},{"s":"Select","t":"Input","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Input for free-form text entry"},{"s":"Select","t":"Checkbox","ty":"alternative-to","w":1,"p":"relation","no":"Use Checkbox group for multiple selections"},{"s":"Separator","t":"Card","ty":"sibling-of","w":0.75,"p":"relation","no":"Cards provide stronger visual grouping"},{"s":"Sidebar","t":"Tabs","ty":"alternative-to","w":1,"p":"relation","no":"Use Tabs for in-page section navigation"},{"s":"Sidebar","t":"Menu","ty":"composes","w":0.5,"p":"relation","no":"Use Menu for contextual actions within sidebar"},{"s":"Skeleton","t":"Progress","ty":"alternative-to","w":1,"p":"relation","no":"Use Progress for determinate loading"},{"s":"Stack","t":"Grid","ty":"alternative-to","w":1,"p":"relation","no":"Use Grid for complex 2D layouts"},{"s":"Stack","t":"ButtonGroup","ty":"sibling-of","w":0.75,"p":"relation","no":"ButtonGroup is specialized for buttons"},{"s":"Stack","t":"Box","ty":"sibling-of","w":0.75,"p":"relation","no":"Box for single-element styling"},{"s":"Slider","t":"Input","ty":"alternative-to","w":1,"p":"relation","no":"Use Input for precise numeric entry"},{"s":"Slider","t":"Progress","ty":"sibling-of","w":0.75,"p":"relation","no":"Similar visual, but Progress is read-only"},{"s":"Table","t":"DataTable","ty":"alternative-to","w":1,"p":"relation","no":"Use DataTable for sorting, selection, and TanStack features"},{"s":"Switch","t":"Input","ty":"sibling-of","w":0.75,"p":"relation","no":"Input handles text/number entry; Switch handles boolean state"},{"s":"Switch","t":"Checkbox","ty":"alternative-to","w":1,"p":"relation","no":"Use Checkbox when change requires form submission"},{"s":"TableOfContents","t":"Tabs","ty":"alternative-to","w":1,"p":"relation","no":"Tabs for switching views, TOC for scrolling to sections"},{"s":"Tabs","t":"Select","ty":"alternative-to","w":1,"p":"relation","no":"Use Select for many options in compact space"},{"s":"Tabs","t":"Menu","ty":"alternative-to","w":1,"p":"relation","no":"Use Menu for action-based navigation"},{"s":"Text","t":"Link","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Link for clickable text"},{"s":"Text","t":"CodeBlock","ty":"alternative-to","w":1,"p":"relation","no":"Use CodeBlock for code display"},{"s":"Text","t":"Badge","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Badge for labels/tags"},{"s":"Textarea","t":"Input","ty":"alternative-to","w":1,"p":"relation","no":"Use Input for single-line text"},{"s":"Theme","t":"AppShell","ty":"sibling-of","w":0.75,"p":"relation","no":"ThemeProvider typically wraps AppShell"},{"s":"ThinkingIndicator","t":"Message","ty":"sibling-of","w":0.75,"p":"relation","no":"Show ThinkingIndicator while waiting for assistant message"},{"s":"ThinkingIndicator","t":"Progress","ty":"alternative-to","w":1,"p":"relation","no":"Use Progress for determinate progress"},{"s":"Toast","t":"Alert","ty":"alternative-to","w":1,"p":"relation","no":"Use Alert for persistent inline messages"},{"s":"Toast","t":"Dialog","ty":"alternative-to","w":1,"p":"relation","no":"Use Dialog for messages requiring user action"},{"s":"Tooltip","t":"Popover","ty":"alternative-to","w":1,"p":"relation","no":"Use Popover for interactive or longer content"},{"s":"Tooltip","t":"Alert","ty":"alternative-to","w":1,"p":"relation","no":"Use Alert for critical information that must be visible"},{"s":"ToggleGroup","t":"RadioGroup","ty":"alternative-to","w":1,"p":"relation","no":"RadioGroup for form-style single selection"},{"s":"ToggleGroup","t":"Tabs","ty":"alternative-to","w":1,"p":"relation","no":"Tabs for content panel switching"},{"s":"ToggleGroup","t":"Switch","ty":"sibling-of","w":0.75,"p":"relation","no":"Switch for single on/off control"},{"s":"VisuallyHidden","t":"Button","ty":"parent-of","w":1,"p":"relation","no":"Use inside icon-only buttons for accessible labels"},{"s":"VisuallyHidden","t":"Icon","ty":"sibling-of","w":0.75,"p":"relation","no":"Pair with icons to provide text alternatives"}],"health":{"orphans":[],"hubs":[{"name":"Button","degree":58},{"name":"Stack","degree":50},{"name":"Input","degree":49},{"name":"Card","degree":44},{"name":"Text","degree":39},{"name":"Sidebar","degree":36},{"name":"AppShell","degree":32},{"name":"Badge","degree":32},{"name":"Header","degree":32},{"name":"Tabs","degree":32}],"compositionCoverage":56,"connectedComponents":[["Accordion","Alert","AppShell","Avatar","Badge","BentoGrid","Box","Breadcrumbs","Button","ButtonGroup","Card","Chart","ChartContainer","ChartTooltip","Checkbox","Chip","CodeBlock","Collapsible","ColorPicker","Combobox","Command","ConversationList","DataTable","DatePicker","Dialog","Drawer","Editor","EmptyState","Field","Fieldset","Form","Grid","Header","Icon","IconButton","Image","Input","Link","List","Listbox","Loading","Main","Markdown","Menu","Message","NavigationMenu","Pagination","Popover","Progress","Prompt","RadioGroup","ScrollArea","Select","Separator","Sidebar","Skeleton","Slider","Stack","Switch","Table","TableOfContents","Tabs","Text","Textarea","Theme","ThemeToggle","ThinkingIndicator","Toast","ToggleGroup","Tooltip","VisuallyHidden"]],"averageDegree":15.18,"nodeCount":68,"edgeCount":516}},"performanceSummary":{"preset":"standard","budget":15360,"total":68,"overBudget":3,"tiers":{"lightweight":58,"moderate":7,"heavy":3}}}
+{"version":"1.0.0","generatedAt":"2026-09-07T16:46:04.054Z","generatorVersion":"sha256:deea39c65b3a3a6dc24f36bcd4934c99c5a805d61ac68f207cc41c1029339282","buildInputs":["fragments.config.ts","src/assets/fragments-logo.tsx","src/assets/fragments-wordmark.tsx","src/assets/nav-glyph.tsx","src/blocks/ActivityFeed.block.ts","src/blocks/DashboardLayout.block.ts","src/blocks/LoginForm.block.ts","src/blocks/StatsCard.block.ts","src/blocks/components/ActivityFeed.tsx","src/blocks/components/DashboardLayout.tsx","src/blocks/components/LoginForm.tsx","src/blocks/components/StatsCard.tsx","src/components/Accordion/Accordion.contract.json","src/components/Accordion/Accordion.module.scss","src/components/Accordion/Accordion.stories.tsx","src/components/Accordion/index.tsx","src/components/Alert/Alert.contract.json","src/components/Alert/Alert.module.scss","src/components/Alert/Alert.stories.tsx","src/components/Alert/index.tsx","src/components/AppShell/AppShell.contract.json","src/components/AppShell/AppShell.module.scss","src/components/AppShell/AppShell.stories.tsx","src/components/AppShell/index.tsx","src/components/Avatar/Avatar.contract.json","src/components/Avatar/Avatar.module.scss","src/components/Avatar/Avatar.stories.tsx","src/components/Avatar/index.tsx","src/components/Badge/Badge.contract.json","src/components/Badge/Badge.module.scss","src/components/Badge/Badge.stories.tsx","src/components/Badge/index.tsx","src/components/BentoGrid/BentoGrid.contract.json","src/components/BentoGrid/BentoGrid.module.scss","src/components/BentoGrid/BentoGrid.stories.tsx","src/components/BentoGrid/index.tsx","src/components/Box/Box.contract.json","src/components/Box/Box.module.scss","src/components/Box/Box.stories.tsx","src/components/Box/index.tsx","src/components/Breadcrumbs/Breadcrumbs.contract.json","src/components/Breadcrumbs/Breadcrumbs.module.scss","src/components/Breadcrumbs/Breadcrumbs.stories.tsx","src/components/Breadcrumbs/index.tsx","src/components/Button/Button.fragment.tsx","src/components/Button/Button.module.scss","src/components/Button/Button.stories.tsx","src/components/Button/index.tsx","src/components/ButtonGroup/ButtonGroup.contract.json","src/components/ButtonGroup/ButtonGroup.module.scss","src/components/ButtonGroup/ButtonGroup.stories.tsx","src/components/ButtonGroup/index.tsx","src/components/Card/Card.consumer-fixture.module.scss","src/components/Card/Card.fragment.tsx","src/components/Card/Card.module.scss","src/components/Card/Card.stories.tsx","src/components/Card/index.tsx","src/components/Chart/Chart.contract.json","src/components/Chart/Chart.module.scss","src/components/Chart/Chart.stories.tsx","src/components/Chart/index.tsx","src/components/Checkbox/Checkbox.contract.json","src/components/Checkbox/Checkbox.module.scss","src/components/Checkbox/Checkbox.stories.tsx","src/components/Checkbox/index.tsx","src/components/Chip/Chip.contract.json","src/components/Chip/Chip.module.scss","src/components/Chip/Chip.stories.tsx","src/components/Chip/index.tsx","src/components/CodeBlock/CodeBlock.contract.json","src/components/CodeBlock/CodeBlock.module.scss","src/components/CodeBlock/CodeBlock.stories.tsx","src/components/CodeBlock/index.tsx","src/components/Collapsible/Collapsible.contract.json","src/components/Collapsible/Collapsible.module.scss","src/components/Collapsible/Collapsible.stories.tsx","src/components/Collapsible/index.tsx","src/components/ColorPicker/ColorPicker.contract.json","src/components/ColorPicker/ColorPicker.module.scss","src/components/ColorPicker/ColorPicker.stories.tsx","src/components/ColorPicker/index.tsx","src/components/Combobox/Combobox.contract.json","src/components/Combobox/Combobox.module.scss","src/components/Combobox/Combobox.stories.tsx","src/components/Combobox/index.tsx","src/components/Command/Command.contract.json","src/components/Command/Command.module.scss","src/components/Command/Command.stories.tsx","src/components/Command/index.tsx","src/components/ComponentDefaults/ComponentDefaults.contract.json","src/components/ComponentDefaults/index.tsx","src/components/ConversationList/ConversationList.contract.json","src/components/ConversationList/ConversationList.module.scss","src/components/ConversationList/ConversationList.stories.tsx","src/components/ConversationList/index.tsx","src/components/DataTable/DataTable.fragment.tsx","src/components/DataTable/DataTable.icons.tsx","src/components/DataTable/DataTable.module.scss","src/components/DataTable/DataTable.stories.tsx","src/components/DataTable/DataTable.support.tsx","src/components/DataTable/DataTable.virtual.tsx","src/components/DataTable/index.tsx","src/components/DatePicker/DatePicker.contract.json","src/components/DatePicker/DatePicker.module.scss","src/components/DatePicker/DatePicker.stories.tsx","src/components/DatePicker/index.tsx","src/components/Dialog/Dialog.fragment.tsx","src/components/Dialog/Dialog.module.scss","src/components/Dialog/Dialog.stories.tsx","src/components/Dialog/index.tsx","src/components/Drawer/Drawer.contract.json","src/components/Drawer/Drawer.module.scss","src/components/Drawer/Drawer.stories.tsx","src/components/Drawer/index.tsx","src/components/Editor/Editor.contract.json","src/components/Editor/Editor.module.scss","src/components/Editor/Editor.stories.tsx","src/components/Editor/index.tsx","src/components/EmptyState/EmptyState.contract.json","src/components/EmptyState/EmptyState.module.scss","src/components/EmptyState/EmptyState.stories.tsx","src/components/EmptyState/index.tsx","src/components/Field/Field.contract.json","src/components/Field/Field.module.scss","src/components/Field/Field.stories.tsx","src/components/Field/index.tsx","src/components/Fieldset/Fieldset.contract.json","src/components/Fieldset/Fieldset.module.scss","src/components/Fieldset/Fieldset.stories.tsx","src/components/Fieldset/index.tsx","src/components/Form/Form.contract.json","src/components/Form/Form.module.scss","src/components/Form/Form.stories.tsx","src/components/Form/index.tsx","src/components/Grid/Grid.contract.json","src/components/Grid/Grid.module.scss","src/components/Grid/Grid.stories.tsx","src/components/Grid/index.tsx","src/components/Header/Header.contract.json","src/components/Header/Header.module.scss","src/components/Header/Header.stories.tsx","src/components/Header/index.tsx","src/components/Icon/Icon.contract.json","src/components/Icon/Icon.module.scss","src/components/Icon/Icon.stories.tsx","src/components/Icon/index.tsx","src/components/IconButton/IconButton.contract.json","src/components/IconButton/IconButton.module.scss","src/components/IconButton/IconButton.stories.tsx","src/components/IconButton/index.tsx","src/components/Image/Image.contract.json","src/components/Image/Image.module.scss","src/components/Image/Image.stories.tsx","src/components/Image/index.tsx","src/components/Input/Input.contract.json","src/components/Input/Input.module.scss","src/components/Input/Input.stories.tsx","src/components/Input/index.tsx","src/components/Link/Link.contract.json","src/components/Link/Link.module.scss","src/components/Link/Link.stories.tsx","src/components/Link/index.tsx","src/components/List/List.contract.json","src/components/List/List.module.scss","src/components/List/List.stories.tsx","src/components/List/index.tsx","src/components/Listbox/Listbox.contract.json","src/components/Listbox/Listbox.module.scss","src/components/Listbox/Listbox.stories.tsx","src/components/Listbox/index.tsx","src/components/Loading/Loading.contract.json","src/components/Loading/Loading.module.scss","src/components/Loading/Loading.stories.tsx","src/components/Loading/index.tsx","src/components/Main/Main.contract.json","src/components/Main/Main.module.scss","src/components/Main/Main.stories.tsx","src/components/Main/index.tsx","src/components/Markdown/Markdown.contract.json","src/components/Markdown/Markdown.module.scss","src/components/Markdown/Markdown.stories.tsx","src/components/Markdown/index.tsx","src/components/Menu/Menu.contract.json","src/components/Menu/Menu.module.scss","src/components/Menu/Menu.stories.tsx","src/components/Menu/index.tsx","src/components/Message/Message.contract.json","src/components/Message/Message.module.scss","src/components/Message/Message.stories.tsx","src/components/Message/index.tsx","src/components/NavigationMenu/NavigationMenu.contract.json","src/components/NavigationMenu/NavigationMenu.module.scss","src/components/NavigationMenu/NavigationMenu.stories.tsx","src/components/NavigationMenu/index.tsx","src/components/Pagination/Pagination.contract.json","src/components/Pagination/Pagination.module.scss","src/components/Pagination/Pagination.stories.tsx","src/components/Pagination/index.tsx","src/components/Popover/Popover.contract.json","src/components/Popover/Popover.module.scss","src/components/Popover/Popover.stories.tsx","src/components/Popover/index.tsx","src/components/Progress/Progress.contract.json","src/components/Progress/Progress.module.scss","src/components/Progress/Progress.stories.tsx","src/components/Progress/index.tsx","src/components/Prompt/Prompt.contract.json","src/components/Prompt/Prompt.module.scss","src/components/Prompt/Prompt.stories.tsx","src/components/Prompt/index.tsx","src/components/RadioGroup/RadioGroup.contract.json","src/components/RadioGroup/RadioGroup.module.scss","src/components/RadioGroup/RadioGroup.stories.tsx","src/components/RadioGroup/index.tsx","src/components/ScrollArea/ScrollArea.contract.json","src/components/ScrollArea/ScrollArea.module.scss","src/components/ScrollArea/ScrollArea.stories.tsx","src/components/ScrollArea/index.tsx","src/components/Select/Select.fragment.tsx","src/components/Select/Select.module.scss","src/components/Select/Select.stories.tsx","src/components/Select/index.tsx","src/components/Separator/Separator.contract.json","src/components/Separator/Separator.module.scss","src/components/Separator/Separator.stories.tsx","src/components/Separator/index.tsx","src/components/Sidebar/Sidebar.contract.json","src/components/Sidebar/Sidebar.module.scss","src/components/Sidebar/Sidebar.stories.tsx","src/components/Sidebar/index.tsx","src/components/Skeleton/Skeleton.contract.json","src/components/Skeleton/Skeleton.module.scss","src/components/Skeleton/Skeleton.stories.tsx","src/components/Skeleton/index.tsx","src/components/Slider/Slider.contract.json","src/components/Slider/Slider.module.scss","src/components/Slider/Slider.stories.tsx","src/components/Slider/index.tsx","src/components/Stack/Stack.contract.json","src/components/Stack/Stack.module.scss","src/components/Stack/Stack.stories.tsx","src/components/Stack/index.tsx","src/components/Switch/Switch.contract.json","src/components/Switch/Switch.module.scss","src/components/Switch/Switch.stories.tsx","src/components/Switch/index.tsx","src/components/Table/Table.contract.json","src/components/Table/Table.module.scss","src/components/Table/Table.stories.tsx","src/components/Table/index.tsx","src/components/TableOfContents/TableOfContents.contract.json","src/components/TableOfContents/TableOfContents.module.scss","src/components/TableOfContents/TableOfContents.stories.tsx","src/components/TableOfContents/index.tsx","src/components/Tabs/Tabs.contract.json","src/components/Tabs/Tabs.module.scss","src/components/Tabs/Tabs.stories.tsx","src/components/Tabs/index.tsx","src/components/Text/Text.contract.json","src/components/Text/Text.module.scss","src/components/Text/Text.stories.tsx","src/components/Text/index.tsx","src/components/Textarea/Textarea.contract.json","src/components/Textarea/Textarea.module.scss","src/components/Textarea/Textarea.stories.tsx","src/components/Textarea/index.tsx","src/components/Theme/Theme.contract.json","src/components/Theme/Theme.stories.tsx","src/components/Theme/index.tsx","src/components/ThemeToggle/ThemeToggle.module.scss","src/components/ThinkingIndicator/ThinkingIndicator.contract.json","src/components/ThinkingIndicator/ThinkingIndicator.module.scss","src/components/ThinkingIndicator/ThinkingIndicator.stories.tsx","src/components/ThinkingIndicator/index.tsx","src/components/Toast/Toast.contract.json","src/components/Toast/Toast.module.scss","src/components/Toast/Toast.stories.tsx","src/components/Toast/index.tsx","src/components/ToggleGroup/ToggleGroup.contract.json","src/components/ToggleGroup/ToggleGroup.module.scss","src/components/ToggleGroup/ToggleGroup.stories.tsx","src/components/ToggleGroup/index.tsx","src/components/Tooltip/Tooltip.contract.json","src/components/Tooltip/Tooltip.module.scss","src/components/Tooltip/Tooltip.stories.tsx","src/components/Tooltip/index.tsx","src/components/VisuallyHidden/VisuallyHidden.contract.json","src/components/VisuallyHidden/VisuallyHidden.module.scss","src/components/VisuallyHidden/VisuallyHidden.stories.tsx","src/components/VisuallyHidden/index.tsx","src/measurements/MeasurementTargets.stories.tsx","src/recipes/_action.scss","src/recipes/_boolean-range.scss","src/recipes/_feedback.scss","src/recipes/_field.scss","src/recipes/_layout.scss","src/recipes/_navigation.scss","src/recipes/_overlay.scss","src/recipes/_popup.scss","src/recipes/_prose.scss","src/recipes/_representation.scss","src/recipes/_segmented.scss","src/recipes/_surface.scss","src/recipes/_table-chrome.scss","src/recipes/_target.scss","src/recipes/_typography.scss","src/test/utils.tsx","src/tokens/_component-properties.scss","src/tokens/_measurements.catalog.generated.css","src/tokens/_variables.scss","src/utils/a11y.tsx"],"packageName":"@usefragments/ui","fragments":{"Accordion":{"filePath":"src/components/Accordion/index.tsx","meta":{"name":"Accordion","description":"Stacks sections that expand one at a time, or several at once.","category":"layout","tags":["accordion","collapse","expand","disclosure","faq"],"status":"stable"},"usage":{"when":["Answers most readers skip","Settings grouped by area","Long forms broken into stages","Navigation with nested children"],"whenNot":["Content everyone needs to read","A line or two — just show it","Steps in an order (use Stepper)","Switching between panels (use Tabs)"],"guidelines":["Headers should say what is inside","Single mode when one answer at a time is enough","Multiple mode when sections get compared","Open the section most readers came for","Never nest an accordion inside an accordion"],"accessibility":["Keyboard navigation with Enter/Space to toggle","Uses proper ARIA expanded/controls attributes","Focus is visible on accordion triggers"]},"props":{"type":{"type":"enum","description":"Whether one or multiple items can be open","default":"single","required":false,"values":["single","multiple"]},"value":{"type":"union","description":"Controlled open item(s): string in single mode, string[] in multiple mode","required":false},"defaultValue":{"type":"union","description":"Initially open item(s): string in single mode, string[] in multiple mode","required":false},"onValueChange":{"type":"union","description":"Called when open items change (single: string | undefined, multiple: string[])","required":false},"children":{"type":"node","description":"Accordion items (use Accordion.Item with Accordion.Trigger and Accordion.Content)","required":true},"collapsible":{"type":"boolean","description":"Whether all items can be closed (single mode only)","default":"false","required":false},"headingLevel":{"type":"union","description":"Semantic heading level for accordion triggers","default":"3","required":false,"values":["2","3","4","5","6"]}},"relations":[{"component":"Tabs","relationship":"alternative","note":"Use Tabs for horizontal switching between related views"},{"component":"Dialog","relationship":"alternative","note":"Use Dialog for focused content that interrupts the flow"},{"component":"Card","relationship":"complementary","note":"Accordion items can contain Card-like content"}],"variants":[{"name":"Basic","description":"Opening one section closes the last.","code":"import { Accordion } from '@/components/Accordion';\n\n<Accordion type=\"single\" collapsible defaultValue=\"item-1\">\n  <Accordion.Item value=\"item-1\">\n    <Accordion.Trigger>What is Fragments UI?</Accordion.Trigger>\n    <Accordion.Content>\n      Fragments UI is a modern React component library built on Base UI primitives, providing accessible and customizable components.\n    </Accordion.Content>\n  </Accordion.Item>\n  <Accordion.Item value=\"item-2\">\n    <Accordion.Trigger>How do I install it?</Accordion.Trigger>\n    <Accordion.Content>\n      Install via npm or pnpm: pnpm add @usefragments/ui\n    </Accordion.Content>\n  </Accordion.Item>\n  <Accordion.Item value=\"item-3\">\n    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>\n    <Accordion.Content>\n      Yes! All components follow WAI-ARIA guidelines and support keyboard navigation.\n    </Accordion.Content>\n  </Accordion.Item>\n</Accordion>"},{"name":"Multiple Open","description":"Sections stay open so answers can be compared.","code":"import { Accordion } from '@/components/Accordion';\n\n<Accordion type=\"multiple\" defaultValue={['features', 'pricing']}>\n  <Accordion.Item value=\"features\">\n    <Accordion.Trigger>Features</Accordion.Trigger>\n    <Accordion.Content>\n      Comprehensive component library with theming support, accessibility built-in, and TypeScript-first development.\n    </Accordion.Content>\n  </Accordion.Item>\n  <Accordion.Item value=\"pricing\">\n    <Accordion.Trigger>Pricing</Accordion.Trigger>\n    <Accordion.Content>\n      Free and open source. MIT licensed for both personal and commercial use.\n    </Accordion.Content>\n  </Accordion.Item>\n  <Accordion.Item value=\"support\">\n    <Accordion.Trigger>Support</Accordion.Trigger>\n    <Accordion.Content>\n      Community support via GitHub issues and discussions.\n    </Accordion.Content>\n  </Accordion.Item>\n</Accordion>"},{"name":"With Disabled","description":"An unavailable section stays visible but inert.","code":"import { Accordion } from '@/components/Accordion';\n\n<Accordion type=\"single\" collapsible defaultValue=\"available\">\n  <Accordion.Item value=\"available\">\n    <Accordion.Trigger>Notification preferences</Accordion.Trigger>\n    <Accordion.Content>\n      Choose which events send you an email and how often digests arrive.\n    </Accordion.Content>\n  </Accordion.Item>\n  <Accordion.Item value=\"disabled\" disabled>\n    <Accordion.Trigger>Billing history</Accordion.Trigger>\n    <Accordion.Content>\n      Unavailable until a payment method is on file.\n    </Accordion.Content>\n  </Accordion.Item>\n  <Accordion.Item value=\"another\">\n    <Accordion.Trigger>Connected accounts</Accordion.Trigger>\n    <Accordion.Content>\n      Review the services linked to this workspace and revoke the ones you no longer use.\n    </Accordion.Content>\n  </Accordion.Item>\n</Accordion>"}],"contract":{"propsSummary":["type: single|multiple - controls how many items can be open","value/defaultValue are type-discriminated (single -> string, multiple -> string[])","onValueChange is type-discriminated by mode (single -> string|undefined, multiple -> string[])","collapsible: boolean - allow all closed in single mode","Accordion.Trigger forwards button props and defaults type=\"button\""],"a11yRules":["A11Y_DISCLOSURE_KEYBOARD","A11Y_FOCUS_VISIBLE"]},"ai":{"compositionPattern":"compound","subComponents":["Item","Trigger","Content"],"requiredChildren":["Item"],"commonPatterns":["<Accordion type=\"single\" collapsible><Accordion.Item value=\"item-1\"><Accordion.Trigger>{title}</Accordion.Trigger><Accordion.Content>{content}</Accordion.Content></Accordion.Item></Accordion>"]},"propsSummary":["type: single|multiple (default: single)","value: union","defaultValue: union","onValueChange: union","children: node (required)","collapsible: boolean (default: false)","headingLevel: union (default: 3)"],"sourcePath":"src/components/Accordion/index.tsx","exportName":"Accordion","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:49.840Z"},"performance":{"bundleSize":1558,"rawSize":3499,"complexity":"lightweight","budgetPercent":10,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Accordion (self)","bytes":2826,"percent":81}]}},"Alert":{"filePath":"src/components/Alert/index.tsx","meta":{"name":"Alert","description":"Tells the user what just happened, or what is about to.","category":"feedback","tags":["notification","message","feedback","banner","toast"],"status":"stable"},"usage":{"when":["Reporting the outcome of something the user did","Flagging a risk before the user hits it","Standing status that must stay on screen"],"whenNot":["A one-word status (use Badge)","A message that should fade away (use Toast)","An invalid field (use the Input error prop)","A decision the user must make first (use Dialog)"],"guidelines":["Match tone to real stakes — an error that is not an error trains people to ignore you","Every danger alert says what to do next","Add Alert.Title only when the message needs two lines","One action per alert","Only dismissible when losing the message costs nothing","Alert.Action and Alert.Close default to type=\"button\", so they are safe inside a form","Alert.Close runs your onClick and still respects preventDefault()"],"accessibility":["role=\"alert\" means assistive tech announces it on arrival","Alert.Close needs its own label","Icon plus wording carry the tone — never color alone"]},"props":{"children":{"type":"node","description":"Alert content - use Alert.Icon, Alert.Body, Alert.Title, Alert.Content, Alert.Actions, Alert.Close sub-components","required":true},"tone":{"type":"enum","description":"Tone; controls colour, icon and live-region role","default":"info","required":false,"values":["info","success","warning","danger"]},"emphasis":{"type":"enum","description":"How much surface the tone claims. `tint` washes the card in the tone colour; `surface` keeps the page background and colours only the hairline and title.","default":"tint","required":false,"values":["tint","surface"]}},"relations":[{"component":"Badge","relationship":"alternative","note":"Use Badge for compact, inline status labels"},{"component":"Toast","relationship":"alternative","note":"Use Toast for transient notifications that auto-dismiss"},{"component":"Dialog","relationship":"sibling","note":"Use Dialog for blocking confirmations"}],"variants":[{"name":"Info","description":"Neutral context — nothing went wrong, nothing needs doing.","code":"import { Alert } from '@/components/Alert';\n\n<Alert tone=\"info\">\n  <Alert.Icon />\n  <Alert.Body>\n    <Alert.Content>\n      Your session will expire in 15 minutes. Save your work to avoid losing changes.\n    </Alert.Content>\n  </Alert.Body>\n</Alert>"},{"name":"Success","description":"Confirms the thing the user just did actually landed.","code":"import { Alert } from '@/components/Alert';\n\n<Alert tone=\"success\">\n  <Alert.Icon />\n  <Alert.Body>\n    <Alert.Title>Payment processed</Alert.Title>\n    <Alert.Content>\n      Your order #12345 has been confirmed. You will receive a confirmation email shortly.\n    </Alert.Content>\n  </Alert.Body>\n</Alert>"},{"name":"Warning","description":"Nothing is broken yet — act before it is.","code":"import { Alert } from '@/components/Alert';\n\n<Alert tone=\"warning\">\n  <Alert.Icon />\n  <Alert.Body>\n    <Alert.Title>Storage almost full</Alert.Title>\n    <Alert.Content>\n      You have used 90% of your storage quota. Consider deleting unused files.\n    </Alert.Content>\n  </Alert.Body>\n</Alert>"},{"name":"Error","description":"Something failed; say what to do about it.","code":"import { Alert } from '@/components/Alert';\n\n<Alert tone=\"danger\">\n  <Alert.Icon />\n  <Alert.Body>\n    <Alert.Title>Upload failed</Alert.Title>\n    <Alert.Content>\n      The file could not be uploaded. Check your connection and try again.\n    </Alert.Content>\n  </Alert.Body>\n</Alert>"},{"name":"With Action","description":"One button, one job — more than one stalls the reader.","code":"import { Alert } from '@/components/Alert';\n\n<Alert tone=\"warning\">\n  <Alert.Icon />\n  <Alert.Body>\n    <Alert.Title>Update available</Alert.Title>\n    <Alert.Content>\n      A new version is available with important security fixes.\n    </Alert.Content>\n    <Alert.Actions>\n      <Alert.Action onClick={() => {}}>Update now</Alert.Action>\n    </Alert.Actions>\n  </Alert.Body>\n</Alert>"},{"name":"Dismissible","description":"A close button suits news the user can safely ignore.","code":"import { Alert } from '@/components/Alert';\n\n<Alert tone=\"info\">\n  <Alert.Icon />\n  <Alert.Body>\n    <Alert.Content>\n      You can customize your notification preferences in Settings.\n    </Alert.Content>\n  </Alert.Body>\n  <Alert.Close />\n</Alert>"}],"contract":{"propsSummary":["tone: info|success|warning|danger - colour, icon and live-region role","Sub-components: Alert.Icon, Alert.Body, Alert.Title, Alert.Content, Alert.Actions, Alert.Action, Alert.Close","Alert.Action / Alert.Close accept button props and default type=\"button\""],"a11yRules":["A11Y_ALERT_ROLE","A11Y_ALERT_DISMISS","A11Y_ALERT_CONTRAST","A11Y_TARGET_SIZE_MIN"]},"ai":{"compositionPattern":"compound","subComponents":["Icon","Body","Title","Content","Actions","Action","Close"],"requiredChildren":["Body"],"commonPatterns":["<Alert tone=\"info\"><Alert.Icon /><Alert.Body><Alert.Content>{message}</Alert.Content></Alert.Body></Alert>","<Alert tone=\"warning\"><Alert.Icon /><Alert.Body><Alert.Title>{title}</Alert.Title><Alert.Content>{message}</Alert.Content></Alert.Body></Alert>","<Alert tone=\"danger\"><Alert.Icon /><Alert.Body><Alert.Title>{title}</Alert.Title><Alert.Content>{message}</Alert.Content></Alert.Body><Alert.Close /></Alert>"]},"propsSummary":["children: node (required)","tone: info|success|warning|danger (default: info)","emphasis: tint|surface (default: tint)"],"sourcePath":"src/components/Alert/index.tsx","exportName":"Alert","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:50.066Z"},"performance":{"bundleSize":1247,"rawSize":3074,"complexity":"lightweight","budgetPercent":8,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Alert (self)","bytes":2336,"percent":76}]}},"AppShell":{"filePath":"src/components/AppShell/index.tsx","meta":{"name":"AppShell","description":"Lays out header, sidebar, main, and optional aside as one responsive app frame.","category":"layout","tags":["layout","shell","scaffold","dashboard","app-layout"],"status":"stable"},"usage":{"when":["Dashboards and internal tools","Apps with persistent sidebar navigation","Layouts needing header, sidebar, and main together","Navigation that must collapse to a drawer on mobile"],"whenNot":["Marketing and landing pages","Content-first sites with no app navigation","Single-screen tools with no chrome"],"guidelines":["layout=\"default\" puts the logo in a full-width header","layout=\"sidebar\" puts the logo in a full-height sidebar","variant=\"floating\" is per slot — mix it with any layout","bg overrides one slot's background without touching the rest","AppShell supplies SidebarProvider; do not add your own","Set width and collapse behaviour on AppShell.Sidebar","Main reflows automatically when the sidebar collapses","Aside hides itself on mobile"],"accessibility":["Main content area has id=\"main-content\" for skip links","Use Header.SkipLink for keyboard navigation","Sidebar drawer has proper focus trap on mobile","Keyboard navigation supported throughout"]},"props":{"children":{"type":"node","description":"Layout content (use AppShell.Header, AppShell.Sidebar, AppShell.Main, AppShell.Aside)","required":true},"layout":{"type":"enum","description":"Structural layout for CSS grid areas","default":"default","required":false,"values":["default","sidebar","sidebar-floating","floating"]},"bg":{"type":"string","description":"Background color override for the shell container (accepts any CSS color or token reference like \"var(--fui-bg-secondary)\")","required":false},"style":{"type":"object","description":"","required":false}},"relations":[{"component":"Theme","relationship":"parent","note":"AppShell should be wrapped in ThemeProvider"},{"component":"Header","relationship":"child","note":"Header is placed inside AppShell.Header"},{"component":"Sidebar","relationship":"child","note":"Sidebar content goes inside AppShell.Sidebar"}],"variants":[{"name":"Default Layout","description":"Header spans the full width above the sidebar.","code":"import { ChartBar, Gear, House } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box height=\"360px\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"default\">\n    <AppShell.Header>\n      <Header>\n        <Header.Trigger />\n        <Header.Brand>MyApp</Header.Brand>\n        <Header.Nav>\n          <Header.NavItem active>Dashboard</Header.NavItem>\n          <Header.NavItem>Settings</Header.NavItem>\n        </Header.Nav>\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"200px\" collapsible=\"offcanvas\">\n      <Sidebar.Nav>\n        <Sidebar.Section label=\"Menu\">\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Analytics</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={Gear} size=\"md\" />}>Settings</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" scale=\"xl\" weight=\"semibold\">Default Layout</Text>\n        <Text as=\"p\" color=\"secondary\">\n          Header spans full width. Logo is in the header.\n        </Text>\n      </Stack>\n    </AppShell.Main>\n  </AppShell>\n</Box>"},{"name":"Sidebar Layout","description":"Sidebar runs full height with the header beside it.","code":"import { ChartBar, Gear, House, MagnifyingGlass } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box height=\"360px\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"sidebar\">\n    <AppShell.Header>\n      <Header>\n        <Header.Trigger />\n        <Header.Search>\n          <Box background=\"secondary\" rounded=\"sm\" paddingX=\"sm\" paddingY=\"xs\">\n            <Stack direction=\"row\" align=\"center\" gap=\"sm\">\n              <Icon icon={MagnifyingGlass} size=\"sm\" color=\"tertiary\" />\n              <Text scale=\"sm\" color=\"tertiary\">Search...</Text>\n            </Stack>\n          </Box>\n        </Header.Search>\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"200px\" collapsible=\"offcanvas\">\n      <Sidebar.Header>\n        <Text weight=\"semibold\">MyApp</Text>\n      </Sidebar.Header>\n      <Sidebar.Nav>\n        <Sidebar.Section label=\"Menu\">\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Analytics</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={Gear} size=\"md\" />}>Settings</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n      <Sidebar.Footer>v1.0.0</Sidebar.Footer>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" scale=\"xl\" weight=\"semibold\">Sidebar Layout</Text>\n        <Text as=\"p\" color=\"secondary\">\n          Sidebar is full height. Logo is in the sidebar header.\n        </Text>\n      </Stack>\n    </AppShell.Main>\n  </AppShell>\n</Box>"},{"name":"With Aside Panel","description":"Adds a right rail for context, filters, or actions.","code":"import { ChartBar, House } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box height=\"360px\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"default\">\n    <AppShell.Header>\n      <Header>\n        <Header.Brand>App</Header.Brand>\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"180px\" collapsible=\"offcanvas\">\n      <Sidebar.Nav>\n        <Sidebar.Section>\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Stats</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" scale=\"xl\" weight=\"semibold\">Main Content</Text>\n        <Text as=\"p\">Content with aside panel on the right.</Text>\n      </Stack>\n    </AppShell.Main>\n\n    <AppShell.Aside width=\"180px\">\n      <Box padding=\"md\">\n        <Stack gap=\"xs\">\n          <Text as=\"h3\" scale=\"sm\" weight=\"semibold\">Aside Panel</Text>\n          <Text as=\"p\" scale=\"sm\" color=\"secondary\">\n            Additional context, filters, or quick actions.\n          </Text>\n        </Stack>\n      </Box>\n    </AppShell.Aside>\n  </AppShell>\n</Box>"},{"name":"Collapsible Icon Sidebar","description":"Sidebar shrinks to icons on desktop via the footer toggle.","code":"import { ChartBar, Gear, House } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box height=\"360px\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"sidebar\">\n    <AppShell.Header>\n      <Header>\n        <Header.Trigger />\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar collapsible=\"icon\" width=\"200px\" collapsedWidth=\"56px\">\n      <Sidebar.Header>\n        <Text weight=\"semibold\">App</Text>\n      </Sidebar.Header>\n      <Sidebar.Nav>\n        <Sidebar.Section>\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Analytics</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={Gear} size=\"md\" />}>Settings</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n      <Sidebar.Footer>\n        <Sidebar.CollapseToggle />\n      </Sidebar.Footer>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\">\n      <Text as=\"p\">\n        Click the collapse button in the sidebar footer to toggle between expanded and icon-only modes.\n      </Text>\n    </AppShell.Main>\n  </AppShell>\n</Box>"},{"name":"Floating Main","description":"Only the main slot floats — rounded, raised, on its own background.","code":"import { ChartBar, Gear, House, MagnifyingGlass } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box height=\"360px\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"sidebar\">\n    <AppShell.Header>\n      <Header>\n        <Header.Trigger />\n        <Header.Search>\n          <Box background=\"primary\" border rounded=\"sm\" paddingX=\"sm\" paddingY=\"xs\">\n            <Stack direction=\"row\" align=\"center\" gap=\"sm\">\n              <Icon icon={MagnifyingGlass} size=\"sm\" color=\"tertiary\" />\n              <Text scale=\"sm\" color=\"tertiary\">Search...</Text>\n            </Stack>\n          </Box>\n        </Header.Search>\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"200px\" collapsible=\"offcanvas\" variant=\"floating\">\n      <Sidebar.Header>\n        <Text weight=\"semibold\">MyApp</Text>\n      </Sidebar.Header>\n      <Sidebar.Nav>\n        <Sidebar.Section label=\"Menu\">\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Analytics</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={Gear} size=\"md\" />}>Settings</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n      <Sidebar.Footer>v1.0.0</Sidebar.Footer>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\" variant=\"floating\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" scale=\"xl\" weight=\"semibold\">Floating Main</Text>\n        <Text as=\"p\" color=\"secondary\">\n          Main content has rounded corners and visual separation from the sidebar.\n        </Text>\n      </Stack>\n    </AppShell.Main>\n  </AppShell>\n</Box>"},{"name":"Floating Main & Aside","description":"Two slots float independently; the sidebar stays flush.","code":"import { ChartBar, Gear, House, MagnifyingGlass } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box height=\"360px\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"sidebar\">\n    <AppShell.Header>\n      <Header>\n        <Header.Trigger />\n        <Header.Search>\n          <Box background=\"primary\" border rounded=\"sm\" paddingX=\"sm\" paddingY=\"xs\">\n            <Stack direction=\"row\" align=\"center\" gap=\"sm\">\n              <Icon icon={MagnifyingGlass} size=\"sm\" color=\"tertiary\" />\n              <Text scale=\"sm\" color=\"tertiary\">Search...</Text>\n            </Stack>\n          </Box>\n        </Header.Search>\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"200px\" collapsible=\"offcanvas\" variant=\"floating\">\n      <Sidebar.Header>\n        <Text weight=\"semibold\">MyApp</Text>\n      </Sidebar.Header>\n      <Sidebar.Nav>\n        <Sidebar.Section label=\"Menu\">\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Analytics</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={Gear} size=\"md\" />}>Settings</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n      <Sidebar.Footer>v1.0.0</Sidebar.Footer>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\" variant=\"floating\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" scale=\"xl\" weight=\"semibold\">Floating Main & Aside</Text>\n        <Text as=\"p\" color=\"secondary\">\n          Both main content and aside panel float with rounded corners.\n        </Text>\n      </Stack>\n    </AppShell.Main>\n\n    <AppShell.Aside width=\"200px\" variant=\"floating\">\n      <Box padding=\"md\">\n        <Stack gap=\"xs\">\n          <Text as=\"h3\" scale=\"sm\" weight=\"semibold\">Aside Panel</Text>\n          <Text as=\"p\" scale=\"sm\" color=\"secondary\">\n            This aside also floats, matching the main content area.\n          </Text>\n        </Stack>\n      </Box>\n    </AppShell.Aside>\n  </AppShell>\n</Box>"},{"name":"Floating Default Layout","description":"Floating works under any layout, including header-on-top.","code":"import { ChartBar, House } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box height=\"360px\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"default\">\n    <AppShell.Header>\n      <Header>\n        <Header.Brand>MyApp</Header.Brand>\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"180px\" collapsible=\"offcanvas\" variant=\"floating\">\n      <Sidebar.Nav>\n        <Sidebar.Section>\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Stats</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\" variant=\"floating\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" scale=\"xl\" weight=\"semibold\">Floating Default Layout</Text>\n        <Text as=\"p\" color=\"secondary\">\n          Default structure (header on top) with floating main content. Any slot can float in any layout.\n        </Text>\n      </Stack>\n    </AppShell.Main>\n  </AppShell>\n</Box>"},{"name":"Custom Backgrounds","description":"Each slot takes its own bg, so regions read apart.","code":"import { ChartBar, House } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box height=\"360px\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"sidebar\">\n    <AppShell.Header>\n      <Header>\n        <Header.Trigger />\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"200px\" collapsible=\"offcanvas\" bg=\"var(--fui-bg-elevated)\">\n      <Sidebar.Header>\n        <Text weight=\"semibold\">MyApp</Text>\n      </Sidebar.Header>\n      <Sidebar.Nav>\n        <Sidebar.Section label=\"Menu\">\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Analytics</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\" bg=\"var(--fui-bg-primary)\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" scale=\"xl\" weight=\"semibold\">Custom Backgrounds</Text>\n        <Text as=\"p\" color=\"secondary\">\n          Sidebar uses bg-elevated (lighter), main uses bg-primary (darker). Any CSS color or token works.\n        </Text>\n      </Stack>\n    </AppShell.Main>\n\n    <AppShell.Aside width=\"200px\" bg=\"var(--fui-bg-elevated)\">\n      <Box padding=\"md\">\n        <Stack gap=\"xs\">\n          <Text as=\"h3\" scale=\"sm\" weight=\"semibold\">Aside Panel</Text>\n          <Text as=\"p\" scale=\"sm\" color=\"secondary\">\n            Aside with bg-elevated background matching the sidebar.\n          </Text>\n        </Stack>\n      </Box>\n    </AppShell.Aside>\n  </AppShell>\n</Box>"}],"contract":{"propsSummary":["children: node (required)","layout: default|sidebar|sidebar-floating|floating (default: default)","bg: string","style: object"]},"ai":{"compositionPattern":"compound","subComponents":["Header","Sidebar","Main","Aside"],"commonPatterns":["<AppShell>\n  <AppShell.Header>...</AppShell.Header>\n  <AppShell.Sidebar>...</AppShell.Sidebar>\n  <AppShell.Main>...</AppShell.Main>\n</AppShell>"],"requiredChildren":["Header","Sidebar","Main"]},"propsSummary":["children: node (required)","layout: default|sidebar|sidebar-floating|floating (default: default)","bg: string","style: object"],"sourcePath":"src/components/AppShell/index.tsx","exportName":"AppShell","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:50.550Z"},"performance":{"bundleSize":9882,"rawSize":31037,"complexity":"moderate","budgetPercent":64,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Sidebar","bytes":25663,"percent":83},{"path":"AppShell (self)","bytes":4649,"percent":15}]}},"Avatar":{"filePath":"src/components/Avatar/index.tsx","meta":{"name":"Avatar","description":"Shows who someone is — their photo, or their initials when there is none.","category":"display","tags":["user","profile","image","identity"],"status":"stable"},"usage":{"when":["A row, comment, or card needs to say who","Several people belong to one thing — use Avatar.Group"],"whenNot":["The picture is content, not identity (use Image)","A profile hero at display size (build the layout yourself)"],"guidelines":["Pass name even when you pass src — it is the fallback and the label","Hold one size per context; mixed sizes read as a mistake","Avatar.Group max caps the stack and counts the rest","imageProps carries loading, decoding, referrerPolicy"],"accessibility":["alt describes the person, not the word \"avatar\"","Initials come from name, so screen readers get the whole name","Purely decorative? Pass alt=\"\""]},"props":{"src":{"type":"string","description":"Image source URL","required":false},"alt":{"type":"string","description":"Alt text for the image","default":"","required":false},"initials":{"type":"string","description":"Fallback initials (1-2 characters)","required":false},"name":{"type":"string","description":"Full name - used to generate initials","required":false},"size":{"type":"enum","description":"Size variant","default":"md","required":false,"values":["xs","sm","md","lg","xl"]},"customSize":{"type":"union","description":"Custom avatar size (number in px or CSS size string like \"2.25rem\"), overrides size width/height","required":false},"shape":{"type":"enum","description":"Shape variant","default":"circle","required":false,"values":["circle","square"]},"color":{"type":"string","description":"Custom background color for fallback avatar","required":false},"imageStyle":{"type":"object","description":"Inline style object applied to the underlying image element","required":false},"imageProps":{"type":"object","description":"Additional props for the underlying img element (except src/alt/className/style)","required":false},"style":{"type":"object","description":"","required":false},"fallback":{"type":"node","description":"Visual fallback rendered after initials/name and before the generic icon","required":false}},"relations":[{"component":"Image","relationship":"alternative","note":"Use Image for content pictures that are not a person or entity"},{"component":"Badge","relationship":"sibling","note":"Pair with Badge to show presence or role beside a name"}],"variants":[{"name":"Default","description":"A photo, cropped to the circle and centred.","code":"import { Avatar } from '@/components/Avatar';\n\n<Avatar\n  src=\"https://i.pravatar.cc/150?u=jane\"\n  alt=\"Jane Doe\"\n  name=\"Jane Doe\"\n/>"},{"name":"With Initials","description":"No src, so the name collapses to initials.","code":"import { Avatar } from '@/components/Avatar';\n\n<Avatar name=\"John Smith\" />"},{"name":"Sizes","description":"Five steps, xs through xl — pick one per context and stick to it.","code":"import { Avatar } from '@/components/Avatar';\nimport { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" align=\"center\" wrap>\n  <Avatar name=\"XS\" size=\"xs\" />\n  <Avatar name=\"SM\" size=\"sm\" />\n  <Avatar name=\"MD\" size=\"md\" />\n  <Avatar name=\"LG\" size=\"lg\" />\n  <Avatar name=\"XL\" size=\"xl\" />\n</Stack>"},{"name":"Custom Size","description":"customSize takes any number when the scale does not fit.","code":"import { Avatar } from '@/components/Avatar';\n\n<Avatar name=\"Conan McNicholl\" customSize={36} />"},{"name":"Square Shape","description":"Squares read as products or orgs, circles as people.","code":"import { Avatar } from '@/components/Avatar';\n\n<Avatar name=\"App\" shape=\"square\" />"},{"name":"Group","description":"Overlapping stack with a count for whoever did not fit.","code":"import { Avatar } from '@/components/Avatar';\n\n<Avatar.Group max={3} size=\"md\">\n  <Avatar name=\"Alice Johnson\" />\n  <Avatar name=\"Bob Smith\" />\n  <Avatar name=\"Carol Williams\" />\n  <Avatar name=\"David Brown\" />\n  <Avatar name=\"Eve Davis\" />\n</Avatar.Group>"}],"contract":{"propsSummary":["src: string - image URL","name: string - used for initials fallback","size: xs|sm|md|lg|xl (default: md)","customSize: number|string - custom size override","imageStyle: CSSProperties - inline image styling","imageProps: ImgHTMLAttributes - advanced img attributes","shape: circle|square (default: circle)"],"a11yRules":["A11Y_IMG_ALT"]},"ai":{"compositionPattern":"compound","subComponents":["Group"]},"propsSummary":["src: string","alt: string (default: )","initials: string","name: string","size: xs|sm|md|lg|xl (default: md)","customSize: union","shape: circle|square (default: circle)","color: string","imageStyle: object","imageProps: object","style: object"],"sourcePath":"src/components/Avatar/index.tsx","exportName":"Avatar","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:50.743Z"},"performance":{"bundleSize":1972,"rawSize":3875,"complexity":"lightweight","budgetPercent":13,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Avatar (self)","bytes":3286,"percent":85}]}},"Badge":{"filePath":"src/components/Badge/index.tsx","meta":{"name":"Badge","description":"Labels a status, count, or category without pulling focus.","category":"display","tags":["status","label","tag","count","chip"],"status":"stable"},"usage":{"when":["Marking item status: active, pending, archived","Showing a count inline","Tagging or categorising content","Flagging what is new or changed"],"whenNot":["Real errors that need attention — use Alert","Anything longer than a few words — use Alert","Clickable filters — use Chip or ToggleGroup","View switching — use Tabs or links"],"guidelines":["Under 20 characters","dot for live status; add dotPulse only while it is still changing","Semantic tones are borderless soft pills on shared status tokens","outline pairs with dotColor; ghost pairs with active for filter chrome","onRemove for user-created tags only, never system labels"],"accessibility":["The text must carry the meaning — colour alone never does","Removable badges need a named dismiss button","Badges are silent to screen readers unless you pass announce","Do not make a badge the only signal that something changed"]},"props":{"children":{"type":"node","description":"Badge label text","required":true},"variant":{"type":"enum","description":"Chrome family. `soft` is the tinted pill; `outline` is a hairline metadata pill (pair with dotColor); `ghost` is transparent filter chrome (pair with active).","default":"soft","required":false,"values":["soft","outline","ghost"]},"tone":{"type":"enum","description":"Colour on the shared status ramp; `neutral` is the plain badge.","default":"neutral","required":false,"values":["neutral","accent","info","success","warning","danger"]},"size":{"type":"enum","description":"Badge size","default":"md","required":false,"values":["sm","md","lg"]},"dot":{"type":"boolean","description":"Show a colored dot indicator before the label","default":"false","required":false},"dotPulse":{"type":"boolean","description":"Breathe the status dot, for a state that is still happening rather than one that has settled. Opacity only, and honours prefers-reduced-motion","default":"false","required":false},"dotColor":{"type":"string","description":"Color for the leading status dot. Accepts any CSS color including CSS custom properties.","required":false},"icon":{"type":"node","description":"Optional icon element before the text","required":false},"active":{"type":"boolean","description":"Marks variant=\"ghost\" as the currently selected filter. Has no effect on other variants.","default":"false","required":false},"onRemove":{"type":"function","description":"Makes the badge removable. Called when X is clicked.","required":false},"announce":{"type":"boolean","description":"Opt into role=\"status\" live announcement semantics","default":"false","required":false},"role":{"type":"union","description":"","required":false},"style":{"type":"object","description":"","required":false}},"relations":[{"component":"Alert","relationship":"alternative","note":"Use Alert for prominent, longer messages with actions"},{"component":"Chip","relationship":"sibling","note":"Chip is interactive (clickable/filterable); Badge is display-only"}],"variants":[{"name":"Tones","description":"Neutral through info, on shared status tokens.","code":"import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Badge>Neutral</Badge>\n  <Badge tone=\"success\">Active</Badge>\n  <Badge tone=\"warning\">Pending</Badge>\n  <Badge tone=\"danger\">Failed</Badge>\n  <Badge tone=\"info\">New</Badge>\n</Stack>"},{"name":"With Dot","description":"Leading dot for live state; it breathes while still moving.","code":"import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Badge tone=\"success\" dot>Online</Badge>\n  <Badge tone=\"warning\" dot>Away</Badge>\n  <Badge tone=\"danger\" dot>Offline</Badge>\n  <Badge tone=\"info\" dot dotPulse>Syncing</Badge>\n</Stack>"},{"name":"Outline and Ghost","description":"Hairline metadata pill, and filter chrome that marks the active one.","code":"import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Badge variant=\"outline\" dotColor=\"var(--fui-color-accent)\">Design</Badge>\n  <Badge variant=\"outline\" dotColor=\"var(--fui-color-success)\">Shipped</Badge>\n  <Badge variant=\"ghost\" active>All</Badge>\n  <Badge variant=\"ghost\">Archived</Badge>\n</Stack>"},{"name":"Outline","description":"Bordered and transparent, when a fill would shout.","code":"<Badge variant=\"outline\">Outline</Badge>"},{"name":"Sizes","description":"sm for dense tables, lg for reference status pills.","code":"import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" align=\"center\" wrap>\n  <Badge tone=\"success\" size=\"sm\">Small</Badge>\n  <Badge tone=\"success\" size=\"md\">Medium</Badge>\n  <Badge tone=\"success\" size=\"lg\">Large</Badge>\n</Stack>"},{"name":"Removable","description":"Dismissible tags the user added themselves.","code":"import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Badge tone=\"info\" onRemove={() => {}}>React</Badge>\n  <Badge tone=\"info\" onRemove={() => {}}>TypeScript</Badge>\n  <Badge tone=\"info\" onRemove={() => {}}>CSS</Badge>\n</Stack>"},{"name":"Announced Status","description":"Looks the same, but screen readers now hear the change.","code":"<Badge tone=\"success\" announce>Saved</Badge>"}],"contract":{"propsSummary":["children: ReactNode - badge label (required)","variant: soft|outline|ghost - chrome family","tone: neutral|accent|info|success|warning|danger - colour","size: sm|md|lg - badge size","dot: boolean - show status dot indicator","dotPulse: boolean - breathe the dot for an in-progress state (respects prefers-reduced-motion)","dotColor: string - color for the leading status dot","active: boolean - marks variant=\"ghost\" as the selected filter","onRemove: () => void - makes badge removable","announce: boolean - opt into role=\"status\" + auto status aria-label"],"a11yRules":["A11Y_BADGE_CONTRAST","A11Y_BADGE_DISMISS","A11Y_TARGET_SIZE_MIN"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["children: node (required)","variant: soft|outline|ghost (default: soft)","tone: neutral|accent|info|success|warning|danger (default: neutral)","size: sm|md|lg (default: md)","dot: boolean (default: false)","dotPulse: boolean (default: false)","dotColor: string","icon: node","active: boolean (default: false)","onRemove: function","announce: boolean (default: false)","role: union"],"sourcePath":"src/components/Badge/index.tsx","exportName":"Badge","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:50.941Z"},"performance":{"bundleSize":945,"rawSize":1802,"complexity":"lightweight","budgetPercent":6,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Badge (self)","bytes":1215,"percent":67}]}},"BentoGrid":{"filePath":"src/components/BentoGrid/index.tsx","meta":{"name":"BentoGrid","description":"Asymmetric feature grid where tiles span different widths and heights.","category":"layout","tags":["bento","grid","layout","responsive","feature-grid","asymmetric"],"status":"stable"},"usage":{"when":["Feature grids with one hero tile and supporting tiles","Dashboards where cards carry different weight","Marketing sections with mixed-size blocks"],"whenNot":["Uniform tiles of one size (use Grid)","Labelled form fields (use Grid)","A single column of content (use Stack)"],"guidelines":["colSpan and rowSpan take per-breakpoint objects","A hero tile is usually colSpan 2 and rowSpan 2 from lg up","Tiles carry their own surface — do not wrap them in Card","Columns collapse 3 to 2 below lg, and to 1 below sm","Keep source order equal to visual order for screen readers"],"accessibility":["Grid is purely visual — it does not affect reading order or semantics","Ensure logical source order matches visual order for screen readers","Hover effects are disabled when prefers-reduced-motion is set","Border thickness increases in prefers-contrast: more mode"]},"props":{"children":{"type":"node","description":"BentoGrid.Item children","required":false},"columns":{"type":"union","description":"Number of columns — auto-collapses responsively (3→2→1)","default":"3","required":false,"values":["2","3","4"]},"gap":{"type":"enum","description":"Gap between grid items, mapped to spacing tokens","default":"md","required":false,"values":["none","xs","sm","md","lg","xl"]},"style":{"type":"object","description":"","required":false}},"relations":[{"component":"Grid","relationship":"alternative","note":"Use Grid for uniform layouts; BentoGrid for asymmetric spans with built-in surfaces"},{"component":"Card","relationship":"sibling","note":"BentoGrid.Item has built-in surface styling similar to Card"}],"variants":[{"name":"Default","description":"Equal tiles, each on its own surface.","code":"import { BentoGrid } from '@/components/BentoGrid';\nimport { Box } from '@/components/Box';\n\n<Box width=\"100%\">\n  <BentoGrid columns={3} gap=\"md\">\n    <BentoGrid.Item>Item 1</BentoGrid.Item>\n    <BentoGrid.Item>Item 2</BentoGrid.Item>\n    <BentoGrid.Item>Item 3</BentoGrid.Item>\n    <BentoGrid.Item>Item 4</BentoGrid.Item>\n    <BentoGrid.Item>Item 5</BentoGrid.Item>\n    <BentoGrid.Item>Item 6</BentoGrid.Item>\n  </BentoGrid>\n</Box>"},{"name":"Hero Layout","description":"One tile takes two columns and two rows; the rest fill around it.","code":"import { BentoGrid } from '@/components/BentoGrid';\nimport { Box } from '@/components/Box';\n\n<Box width=\"100%\">\n  <BentoGrid columns={3} gap=\"md\">\n    <BentoGrid.Item colSpan={{ base: 1, lg: 2 }} rowSpan={{ base: 1, lg: 2 }}>\n      Hero content\n    </BentoGrid.Item>\n    <BentoGrid.Item>Item 2</BentoGrid.Item>\n    <BentoGrid.Item>Item 3</BentoGrid.Item>\n    <BentoGrid.Item>Item 4</BentoGrid.Item>\n    <BentoGrid.Item>Item 5</BentoGrid.Item>\n  </BentoGrid>\n</Box>"},{"name":"Two Column","description":"colSpan stretches a tile across the whole row.","code":"import { BentoGrid } from '@/components/BentoGrid';\nimport { Box } from '@/components/Box';\n\n<Box width=\"100%\">\n  <BentoGrid columns={2} gap=\"md\">\n    <BentoGrid.Item>Item 1</BentoGrid.Item>\n    <BentoGrid.Item>Item 2</BentoGrid.Item>\n    <BentoGrid.Item colSpan={2}>Wide item</BentoGrid.Item>\n    <BentoGrid.Item>Item 4</BentoGrid.Item>\n    <BentoGrid.Item>Item 5</BentoGrid.Item>\n  </BentoGrid>\n</Box>"}],"contract":{"propsSummary":["columns: 2|3|4 (default: 3) — auto-collapses responsively","gap: none|xs|sm|md|lg|xl (default: md)","BentoGrid.Item colSpan: 1|2|3 | { base, sm, md, lg, xl }","BentoGrid.Item rowSpan: 1|2|3 | { base, sm, md, lg, xl }","BentoGrid and BentoGrid.Item forward div DOM props; Item style is merged with generated span vars"]},"propsSummary":["children: node","columns: union (default: 3)","gap: none|xs|sm|md|lg|xl (default: md)","style: object"],"sourcePath":"src/components/BentoGrid/index.tsx","exportName":"BentoGrid","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:52.407Z"},"performance":{"bundleSize":882,"rawSize":1730,"complexity":"lightweight","budgetPercent":6,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"BentoGrid (self)","bytes":1152,"percent":67}]}},"Box":{"filePath":"src/components/Box/index.tsx","meta":{"name":"Box","description":"Applies spacing, background, border, and radius to any element.","category":"layout","tags":["layout","container","spacing","primitive","box"],"status":"stable"},"usage":{"when":["Padding or insetting a section of content","Bordered or elevated containers","Rendering a semantic element with design-system spacing"],"whenNot":["Spacing a row or column of siblings (use Stack)","Two-dimensional layouts (use Grid)","Header/body/footer surfaces (use Card)","Styling text alone (use Text)"],"guidelines":["Use the padding and margin props, never inline styles","Set as=\"section\" or as=\"article\" so the markup stays semantic","Backgrounds come from the token scale — no custom colours","Reach for Stack or Grid before nesting Boxes for layout"],"accessibility":["Choose semantic as prop values for proper document structure","Avoid div-soup; use meaningful elements like section, article","Ensure proper heading hierarchy within Box containers"]},"props":{"children":{"type":"node","description":"Content to render inside the box","required":false},"as":{"type":"enum","description":"HTML element to render","default":"div","required":false,"values":["div","section","article","aside","main","header","footer","nav","span"]},"padding":{"type":"enum","description":"Padding on all sides","required":false,"values":["none","xs","sm","md","lg","xl"]},"paddingX":{"type":"enum","description":"Horizontal padding","required":false,"values":["none","xs","sm","md","lg","xl"]},"paddingY":{"type":"enum","description":"Vertical padding","required":false,"values":["none","xs","sm","md","lg","xl"]},"margin":{"type":"enum","description":"Margin on all sides","required":false,"values":["none","xs","sm","md","lg","xl","auto"]},"marginX":{"type":"enum","description":"Horizontal margin","required":false,"values":["none","xs","sm","md","lg","xl","auto"]},"marginY":{"type":"enum","description":"Vertical margin","required":false,"values":["none","xs","sm","md","lg","xl","auto"]},"background":{"type":"enum","description":"Background color","required":false,"values":["none","primary","secondary","tertiary","elevated"]},"rounded":{"type":"enum","description":"Border radius","required":false,"values":["none","sm","md","lg","full"]},"border":{"type":"boolean","description":"Show border","default":"false","required":false},"borderTop":{"type":"boolean","description":"Show top border only","default":"false","required":false},"borderBottom":{"type":"boolean","description":"Show bottom border only","default":"false","required":false},"borderLeft":{"type":"boolean","description":"Show left border only","default":"false","required":false},"borderRight":{"type":"boolean","description":"Show right border only","default":"false","required":false},"borderColor":{"type":"enum","description":"Border color variant (requires border or directional border)","required":false,"values":["default","strong","accent","danger"]},"shadow":{"type":"enum","description":"Box shadow","required":false,"values":["none","sm","md","lg"]},"overflow":{"type":"enum","description":"Overflow behavior","required":false,"values":["hidden","auto","scroll","visible"]},"color":{"type":"enum","description":"Text color","required":false,"values":["primary","secondary","tertiary","accent","inverse"]},"display":{"type":"enum","description":"Display type","required":false,"values":["none","block","inline","inline-block","flex","inline-flex","grid"]},"width":{"type":"union","description":"Width (CSS value, e.g. \"100%\", \"300px\", or number for px)","required":false},"minWidth":{"type":"union","description":"Min width","required":false},"maxWidth":{"type":"union","description":"Max width","required":false},"height":{"type":"union","description":"Height (CSS value)","required":false},"minHeight":{"type":"union","description":"Min height","required":false},"maxHeight":{"type":"union","description":"Max height","required":false},"className":{"type":"string","description":"Additional class name","required":false},"style":{"type":"object","description":"Inline styles","required":false}},"relations":[{"component":"Stack","relationship":"alternative","note":"Use Stack for directional layouts with gap"},{"component":"Grid","relationship":"alternative","note":"Use Grid for column-based layouts"},{"component":"Card","relationship":"alternative","note":"Use Card for content containers with structure"}],"variants":[{"name":"Default","description":"Padding, background, and radius in one element.","code":"<Box padding=\"md\" background=\"secondary\" rounded=\"md\">\n  Content with padding and background\n</Box>"},{"name":"With Border","description":"A hairline border instead of a filled background.","code":"<Box padding=\"lg\" border rounded=\"md\">\n  Bordered content area\n</Box>"},{"name":"Directional Padding","description":"Horizontal and vertical padding set separately.","code":"<Box paddingX=\"xl\" paddingY=\"sm\" background=\"tertiary\" rounded=\"sm\">\n  Wide horizontal padding, short vertical\n</Box>"},{"name":"Centered with Auto Margin","description":"marginX=\"auto\" centres a fixed-width box in a wider parent.","code":"import { Box } from '@/components/Box';\n\n<Box width=\"100%\" border rounded=\"md\" padding=\"md\">\n  <Box padding=\"md\" marginX=\"auto\" width=\"240px\" background=\"elevated\" rounded=\"lg\">\n    Centred by auto margin\n  </Box>\n</Box>"},{"name":"Directional Borders","description":"Border on chosen sides only.","code":"<Box padding=\"md\" borderTop borderBottom>\n  Top and bottom borders only\n</Box>"},{"name":"With Shadow","description":"Shadow lifts the surface off the page.","code":"<Box padding=\"lg\" rounded=\"md\" shadow=\"md\" background=\"primary\">\n  Elevated content with shadow\n</Box>"},{"name":"Overflow Hidden","description":"Content past the box's height is clipped, not scrolled.","code":"import { Box } from '@/components/Box';\n\n<Box padding=\"md\" overflow=\"hidden\" border rounded=\"md\" width=\"320px\" height=\"72px\">\n  This box clips its overflowing content. Lorem ipsum dolor sit amet, consectetur\n  adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna\n  aliqua, and this final sentence never becomes visible.\n</Box>"},{"name":"Text Colors","description":"Text colour tokens, from strongest to accent.","code":"import { Box } from '@/components/Box';\nimport { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"md\">\n  <Box color=\"primary\">Primary</Box>\n  <Box color=\"secondary\">Secondary</Box>\n  <Box color=\"tertiary\">Tertiary</Box>\n  <Box color=\"accent\">Accent</Box>\n</Stack>"}],"contract":{"propsSummary":["as: div|section|article|... - HTML element","padding: none|xs|sm|md|lg|xl - all-sides padding","paddingX/paddingY: directional padding overrides","margin: none|xs|sm|md|lg|xl|auto - margin","background: none|primary|secondary|tertiary|elevated","rounded: none|sm|md|lg|full - border radius","border: boolean - show border","borderTop/borderBottom/borderLeft/borderRight: boolean - directional borders","borderColor: default|strong|accent|danger - border color variant","shadow: sm|md|lg|none - box shadow","overflow: hidden|auto|scroll|visible - overflow behavior","color: primary|secondary|tertiary|accent|inverse - text color","width/minWidth/maxWidth: string|number - sizing","height/minHeight/maxHeight: string|number - sizing","All standard HTMLElement props are forwarded to the rendered element"],"a11yRules":["A11Y_SEMANTIC_HTML"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["children: node","as: div|section|article|aside|main|header|footer|nav|span (default: div)","padding: none|xs|sm|md|lg|xl","paddingX: none|xs|sm|md|lg|xl","paddingY: none|xs|sm|md|lg|xl","margin: none|xs|sm|md|lg|xl|auto","marginX: none|xs|sm|md|lg|xl|auto","marginY: none|xs|sm|md|lg|xl|auto","background: none|primary|secondary|tertiary|elevated","rounded: none|sm|md|lg|full","border: boolean","borderTop: boolean","borderBottom: boolean","borderLeft: boolean","borderRight: boolean","borderColor: default|strong|accent|danger","shadow: none|sm|md|lg","overflow: hidden|auto|scroll|visible","color: primary|secondary|tertiary|accent|inverse","display: none|block|inline|inline-block|flex|inline-flex|grid","width: union","minWidth: union","maxWidth: union","height: union","minHeight: union","maxHeight: union","className: string","style: object"],"sourcePath":"src/components/Box/index.tsx","exportName":"Box","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:51.126Z"},"performance":{"bundleSize":967,"rawSize":1876,"complexity":"lightweight","budgetPercent":6,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Box (self)","bytes":1304,"percent":70}]}},"Breadcrumbs":{"filePath":"src/components/Breadcrumbs/index.tsx","meta":{"name":"Breadcrumbs","description":"Shows where the user is and links back up the hierarchy.","category":"navigation","tags":["breadcrumbs","navigation","hierarchy","wayfinding"],"status":"stable"},"usage":{"when":["Nested content more than two levels deep","Jumping back to a parent in one click","Documentation and catalogue hierarchies"],"whenNot":["Flat structures with no parents (use Tabs or header navigation)","Steps in an order (use Stepper)","Primary navigation (use Sidebar or Header)"],"guidelines":["End on the current page, unlinked","Short labels — the trail is a path, not a summary","Set maxItems to fold long paths, keeping first and last","The separator defaults to a slash and takes any node","Set label to rename the landmark (defaults to \"Breadcrumb\")","Crumbs truncate at 200px so one long title cannot push the rest out"],"accessibility":["Uses <nav aria-label=\"Breadcrumb\"> for landmark navigation","Current page is marked with aria-current=\"page\"","Separators are hidden from screen readers with aria-hidden","Ellipsis button has aria-label for collapsed items"]},"props":{"children":{"type":"node","description":"Breadcrumb items (use Breadcrumbs.Item)","required":true},"separator":{"type":"node","description":"Custom separator between items","default":"/","required":false},"maxItems":{"type":"number","description":"Maximum visible items before collapsing middle items with ellipsis","required":false},"label":{"type":"string","description":"Custom aria-label for the breadcrumb nav landmark","default":"Breadcrumb","required":false}},"relations":[{"component":"Tabs","relationship":"alternative","note":"Use Tabs for flat, non-hierarchical navigation"},{"component":"Sidebar","relationship":"complementary","note":"Breadcrumbs complement sidebar navigation for deep hierarchies"}],"variants":[{"name":"Default","description":"Each ancestor links; the last one does not.","code":"<Breadcrumbs>\n  <Breadcrumbs.Item href=\"#\">Home</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Products</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Category</Breadcrumbs.Item>\n  <Breadcrumbs.Item current>Current Page</Breadcrumbs.Item>\n</Breadcrumbs>"},{"name":"With Icons","description":"Glyphs mark what kind of thing each level is.","code":"<Breadcrumbs>\n  <Breadcrumbs.Item\n    href=\"#\"\n    icon={\n      <svg viewBox=\"0 0 16 16\" fill=\"currentColor\">\n        <path d=\"M8 1.25l-7 6v7.5c0 .138.112.25.25.25H5.5V10h5v5h4.25a.25.25 0 0 0 .25-.25v-7.5l-7-6z\" />\n      </svg>\n    }\n  >\n    Home\n  </Breadcrumbs.Item>\n  <Breadcrumbs.Item\n    href=\"#\"\n    icon={\n      <svg viewBox=\"0 0 16 16\" fill=\"currentColor\">\n        <path d=\"M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75z\" />\n      </svg>\n    }\n  >\n    Documents\n  </Breadcrumbs.Item>\n  <Breadcrumbs.Item current>Report.pdf</Breadcrumbs.Item>\n</Breadcrumbs>"},{"name":"Collapsed","description":"Middle levels fold behind an ellipsis.","code":"<Breadcrumbs maxItems={3}>\n  <Breadcrumbs.Item href=\"#\">Home</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Category</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Subcategory</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Section</Breadcrumbs.Item>\n  <Breadcrumbs.Item current>Current Page</Breadcrumbs.Item>\n</Breadcrumbs>"},{"name":"Custom Separator","description":"Any node can replace the slash.","code":"<Breadcrumbs\n  separator={\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n      <path fillRule=\"evenodd\" d=\"M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06z\" />\n    </svg>\n  }\n>\n  <Breadcrumbs.Item href=\"#\">Home</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Settings</Breadcrumbs.Item>\n  <Breadcrumbs.Item current>Profile</Breadcrumbs.Item>\n</Breadcrumbs>"},{"name":"Custom Landmark Label","description":"Renames the landmark screen readers announce.","code":"<Breadcrumbs label=\"Documentation breadcrumbs\">\n  <Breadcrumbs.Item href=\"#\">Docs</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Components</Breadcrumbs.Item>\n  <Breadcrumbs.Item current>Breadcrumbs</Breadcrumbs.Item>\n</Breadcrumbs>"}],"contract":{"propsSummary":["separator: ReactNode - custom separator (default \"/\")","maxItems: number - collapse middle items with ellipsis","label: string - nav landmark label (default \"Breadcrumb\")","Breadcrumbs.Item href: string - makes item a link","Breadcrumbs.Item current: boolean - marks current page","Breadcrumbs.Item icon: ReactNode - icon before label"],"a11yRules":["A11Y_NAV_LANDMARK","A11Y_ARIA_CURRENT","A11Y_TARGET_SIZE_MIN"]},"ai":{"compositionPattern":"compound","subComponents":["Item","Separator"],"requiredChildren":["Item"],"commonPatterns":["<Breadcrumbs><Breadcrumbs.Item href=\"/\">Home</Breadcrumbs.Item><Breadcrumbs.Item href=\"/products\">Products</Breadcrumbs.Item><Breadcrumbs.Item current>Widget</Breadcrumbs.Item></Breadcrumbs>"]},"propsSummary":["children: node (required)","separator: node (default: /)","maxItems: number","label: string (default: Breadcrumb)"],"sourcePath":"src/components/Breadcrumbs/index.tsx","exportName":"Breadcrumbs","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:51.312Z"},"performance":{"bundleSize":1161,"rawSize":2752,"complexity":"lightweight","budgetPercent":8,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Breadcrumbs (self)","bytes":2091,"percent":76}]}},"Button":{"filePath":"src/components/Button/Button.fragment.tsx","meta":{"name":"Button","description":"Triggers an action — save, submit, delete, open.","category":"actions","status":"stable","tags":["action","button","form","interactive"]},"guidance":{"when":["Running an action: save, submit, delete","Submitting a form","Opening a dialog or menu"],"whenNot":["Plain navigation — use Link","Toggling state — use Switch or Checkbox","Picking an option — use Select or RadioGroup"],"dont":[{"reason":"Do not use a Button for plain navigation.","bad":"<Button href=\"/settings\">Settings</Button>","good":"<Link href=\"/settings\">Settings</Link>"}],"guidelines":["One solid accent button per form or section","tone=\"danger\" for anything destructive","Chroma is earned: leave tone at its default unless the action carries that meaning","Loading state must also disable the button","With asChild, put interaction and a11y props on Button — they forward to the child","icon={true} with any variant for icon-only actions"],"accessibility":["Label the action, not the widget","No \"Click here\"","Icon-only buttons need aria-label"]},"usage":{"when":["Running an action: save, submit, delete","Submitting a form","Opening a dialog or menu"],"whenNot":["Plain navigation — use Link","Toggling state — use Switch or Checkbox","Picking an option — use Select or RadioGroup"],"dont":[{"reason":"Do not use a Button for plain navigation.","bad":"<Button href=\"/settings\">Settings</Button>","good":"<Link href=\"/settings\">Settings</Link>"}],"guidelines":["One solid accent button per form or section","tone=\"danger\" for anything destructive","Chroma is earned: leave tone at its default unless the action carries that meaning","Loading state must also disable the button","With asChild, put interaction and a11y props on Button — they forward to the child","icon={true} with any variant for icon-only actions"],"accessibility":["Label the action, not the widget","No \"Click here\"","Icon-only buttons need aria-label"]},"props":{"as":{"type":"enum","description":"","required":false,"values":["a","button"]},"asChild":{"type":"boolean","description":"Merge props onto child element instead of rendering a button. Useful for composition with Link components.","required":false},"children":{"type":"node","description":"","required":true},"fullWidth":{"type":"boolean","description":"Make button full width of container","required":false},"icon":{"type":"boolean","description":"Render as icon-only button (square aspect ratio). Always pass `aria-label`.","required":false},"size":{"type":"enum","description":"Control height.","default":"\"md\"","required":false,"values":["sm","md","lg"]},"tone":{"type":"enum","description":"Colour. Defaults to `\"accent\"` on `solid` and `link`, `\"neutral\"` on\n`soft`, `outline` and `ghost`.","required":false,"values":["neutral","accent","info","success","warning","danger"]},"variant":{"type":"enum","description":"Chrome family.","default":"\"solid\"","required":false,"values":["solid","soft","outline","ghost","link"]}},"relations":[{"component":"Link","relationship":"alternative","note":"Use Link for navigation without action context"},{"component":"Icon","relationship":"complementary","note":"Use Icon inside Button for icon-leading/trailing or icon-only actions"},{"component":"ButtonGroup","relationship":"parent","note":"Use ButtonGroup for related action sets"}],"variants":[{"name":"Solid","description":"The one action you want people to take here. Accent tone by default.","code":"<Button variant=\"solid\">Save changes</Button>","canonical":true},{"name":"Soft","description":"Supporting action that sits beside the main one. Neutral tone by default.","code":"<Button variant=\"soft\">Cancel</Button>"},{"name":"Ghost","description":"No fill, no border — for dense toolbars and repeated rows.","code":"<Button variant=\"ghost\">Learn more</Button>"},{"name":"Link","description":"Reads like a link, behaves like an action.","code":"<Button variant=\"link\">View all →</Button>"},{"name":"Danger","description":"Destructive action people cannot undo: solid chrome, danger tone.","code":"<Button variant=\"solid\" tone=\"danger\">\n          Delete item\n        </Button>"},{"name":"Tones","description":"Tone is colour and colour is meaning; it works on every variant.","code":"<Stack direction=\"row\" gap=\"sm\" align=\"center\" wrap>\n          <Button variant=\"soft\" tone=\"accent\">\n            Accent\n          </Button>\n          <Button variant=\"soft\" tone=\"info\">\n            Info\n          </Button>\n          <Button variant=\"soft\" tone=\"success\">\n            Success\n          </Button>\n          <Button variant=\"soft\" tone=\"warning\">\n            Warning\n          </Button>\n          <Button variant=\"soft\" tone=\"danger\">\n            Danger\n          </Button>\n        </Stack>"},{"name":"Outline","description":"Bordered and transparent — reads over any surface.","code":"<Button variant=\"outline\">View details</Button>"},{"name":"Icon","description":"Square icon-only action. Always pass aria-label.","code":"<Button icon variant=\"outline\" aria-label=\"Add item\">\n          <span aria-hidden>+</span>\n        </Button>"},{"name":"Sizes","description":"sm for inline row actions, lg for hero calls to action.","code":"<Stack direction=\"row\" gap=\"sm\" align=\"center\" wrap>\n          <Button size=\"sm\">Small</Button>\n          <Button size=\"md\">Medium</Button>\n          <Button size=\"lg\">Large</Button>\n        </Stack>"},{"name":"Disabled","description":"Blocks clicks and drops the button out of the tab order.","code":"<Button disabled>Unavailable</Button>"},{"name":"As Child","description":"Paints button styles onto an anchor or router link; props forward to the child.","code":"<Button asChild variant=\"outline\" aria-label=\"Open billing settings\">\n          <a href=\"#billing-settings\">Billing settings</a>\n        </Button>"},{"name":"Long Label","description":"Long labels stay on one line; shorten the label or give the button room.","code":"<Button>\n          Save the localized account preferences and notify every affected workspace administrator\n        </Button>"}],"ai":{"compositionPattern":"compound","subComponents":["Root"]},"contract":{"propsSummary":["variant: solid|soft|outline|ghost|link (default: solid)","tone: neutral|accent|info|success|warning|danger (default: accent on solid/link, neutral on soft/outline/ghost)","size: sm|md|lg (default: md)","disabled: boolean - disables interaction","type: button|submit|reset (default: button)","onClick: (event) => void - action handler","asChild: boolean - composes styles/props onto a child element (links/router links)","icon: boolean - icon-only square layout (can be combined with visual variants)"],"a11yRules":["A11Y_BTN_LABEL","A11Y_BTN_FOCUS"]},"matrix":{"axes":{"variant":"auto","tone":"auto","size":"auto","theme":["light","dark"]},"forced":["hover","focus","disabled"],"worstCase":{"children":"A long localized action label that wraps without hiding the action"}},"preview":{"providers":[],"dynamicRegions":[]},"provenance":{"source":"extracted","verified":true},"sourcePath":"src/components/Button/index.tsx","exportName":"Button","performance":{"bundleSize":1272,"rawSize":2544,"complexity":"lightweight","budgetPercent":8,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Button (self)","bytes":1544,"percent":61},{"path":"src/utils/canonical-stamp.ts","bytes":217,"percent":9},{"path":"ComponentDefaults","bytes":194,"percent":8}]}},"ButtonGroup":{"filePath":"src/components/ButtonGroup/index.tsx","meta":{"name":"ButtonGroup","description":"Lays out related buttons in a row with one shared gap and alignment.","category":"actions","tags":["button","group","toolbar","actions","layout"],"status":"stable"},"usage":{"when":["Confirm/cancel pairs at the end of a form","Toolbars and action bars","Pagination controls"],"whenNot":["Unrelated buttons — use Stack","Navigation links — use a nav element","A single button"],"guidelines":["Two to four buttons; more belongs in a Menu","Confirming action goes last","One primary button per group","align=\"end\" for form footers","Pass role, aria-label, id and data-* straight through to ButtonGroup"],"accessibility":["Each button stays individually focusable","Add role=\"group\" plus aria-label when the set needs a name","Order buttons the way they read, not the way they look"]},"props":{"children":{"type":"node","description":"Button elements to group together","required":true},"gap":{"type":"enum","description":"Spacing between buttons","default":"sm","required":false,"values":["none","xs","sm","md"]},"wrap":{"type":"boolean","description":"Allow buttons to wrap to next line","default":"false","required":false},"align":{"type":"enum","description":"Alignment of buttons","required":false,"values":["start","center","end"]}},"relations":[{"component":"Button","relationship":"child","note":"ButtonGroup contains Button components"},{"component":"Stack","relationship":"alternative","note":"Use Stack for more general layout needs"}],"variants":[{"name":"Default","description":"Confirming action sits last in the row.","code":"<ButtonGroup>\n  <Button variant=\"soft\">Cancel</Button>\n  <Button variant=\"solid\">Save</Button>\n</ButtonGroup>"},{"name":"Spacing","description":"Four gap steps, from touching to airy.","code":"import { Stack } from '@/components/Stack';\n\n<Stack direction=\"column\" gap=\"md\">\n  <ButtonGroup gap=\"none\">\n    <Button variant=\"soft\" size=\"sm\">None</Button>\n    <Button variant=\"soft\" size=\"sm\">Gap</Button>\n  </ButtonGroup>\n  <ButtonGroup gap=\"xs\">\n    <Button variant=\"soft\" size=\"sm\">XS</Button>\n    <Button variant=\"soft\" size=\"sm\">Gap</Button>\n  </ButtonGroup>\n  <ButtonGroup gap=\"sm\">\n    <Button variant=\"soft\" size=\"sm\">SM</Button>\n    <Button variant=\"soft\" size=\"sm\">Gap</Button>\n  </ButtonGroup>\n  <ButtonGroup gap=\"md\">\n    <Button variant=\"soft\" size=\"sm\">MD</Button>\n    <Button variant=\"soft\" size=\"sm\">Gap</Button>\n  </ButtonGroup>\n</Stack>"},{"name":"Alignment","description":"Pins the row to the left, centre, or right of its container.","code":"import { Stack } from '@/components/Stack';\n\n<Stack direction=\"column\" gap=\"md\">\n  <ButtonGroup align=\"start\">\n    <Button variant=\"soft\" size=\"sm\">Start</Button>\n    <Button variant=\"soft\" size=\"sm\">Aligned</Button>\n  </ButtonGroup>\n  <ButtonGroup align=\"center\">\n    <Button variant=\"soft\" size=\"sm\">Center</Button>\n    <Button variant=\"soft\" size=\"sm\">Aligned</Button>\n  </ButtonGroup>\n  <ButtonGroup align=\"end\">\n    <Button variant=\"soft\" size=\"sm\">End</Button>\n    <Button variant=\"soft\" size=\"sm\">Aligned</Button>\n  </ButtonGroup>\n</Stack>"},{"name":"Wrapping","description":"Buttons drop to a second line instead of overflowing.","code":"<ButtonGroup wrap>\n  <Button variant=\"soft\" size=\"sm\">Approve</Button>\n  <Button variant=\"soft\" size=\"sm\">Request changes</Button>\n  <Button variant=\"soft\" size=\"sm\">Reassign reviewer</Button>\n  <Button variant=\"soft\" size=\"sm\">Move to backlog</Button>\n  <Button variant=\"soft\" size=\"sm\">Archive</Button>\n</ButtonGroup>"},{"name":"Form Actions","description":"Right-aligned pair, named for screen readers.","code":"<ButtonGroup align=\"end\" role=\"group\" aria-label=\"Form actions\">\n  <Button variant=\"ghost\">Cancel</Button>\n  <Button variant=\"solid\">Submit</Button>\n</ButtonGroup>"}],"contract":{"propsSummary":["children: ReactNode - buttons to group","gap: none|xs|sm|md - spacing between buttons","wrap: boolean - allow wrapping","align: start|center|end - alignment","Pass-through DOM props supported on root (id, role, aria-*, data-*, handlers)"],"a11yRules":["A11Y_GROUP_LABEL"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["children: node (required)","gap: none|xs|sm|md (default: sm)","wrap: boolean (default: false)","align: start|center|end"],"sourcePath":"src/components/ButtonGroup/index.tsx","exportName":"ButtonGroup","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:51.693Z"},"performance":{"bundleSize":599,"rawSize":1007,"complexity":"lightweight","budgetPercent":4,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"ButtonGroup (self)","bytes":427,"percent":42}]}},"Card":{"filePath":"src/components/Card/Card.fragment.tsx","meta":{"name":"Card","description":"Groups related content onto one bounded surface.","category":"layout","status":"stable","tags":["container","layout","surface"]},"guidance":{"when":["Grouping related content behind one boundary","Previews, summaries, and dashboard tiles","Separating sections that spacing alone cannot"],"whenNot":["Plain text that needs no grouping","Modal surfaces (use Dialog)","Navigation items (use List or Sidebar)"],"dont":[{"reason":"Do not use a Card as a modal surface.","bad":"<Card>Confirm deletion</Card>","good":"<Card variant=\"outline\">\n            <Card.Body>Inline summary</Card.Body>\n          </Card>"}],"guidelines":["Keep one variant per context — mixed variants read as noise","Cards sharing a grid row should size uniformly","tone is earned: accent, warning and danger paint the capsule — reserve it for one surface per page","soft with padding=\"none\" plus Card.Header divided and Card.Body padding is the dashboard panel","Prefer a Button or Link inside the card over making the whole card clickable"],"accessibility":["Card is a semantic container (article/div/section); onClick adds keyboard and role=\"button\" behavior, but explicit Button or Link actions are preferred","Card titles should be appropriate heading levels"]},"usage":{"when":["Grouping related content behind one boundary","Previews, summaries, and dashboard tiles","Separating sections that spacing alone cannot"],"whenNot":["Plain text that needs no grouping","Modal surfaces (use Dialog)","Navigation items (use List or Sidebar)"],"dont":[{"reason":"Do not use a Card as a modal surface.","bad":"<Card>Confirm deletion</Card>","good":"<Card variant=\"outline\">\n            <Card.Body>Inline summary</Card.Body>\n          </Card>"}],"guidelines":["Keep one variant per context — mixed variants read as noise","Cards sharing a grid row should size uniformly","tone is earned: accent, warning and danger paint the capsule — reserve it for one surface per page","soft with padding=\"none\" plus Card.Header divided and Card.Body padding is the dashboard panel","Prefer a Button or Link inside the card over making the whole card clickable"],"accessibility":["Card is a semantic container (article/div/section); onClick adds keyboard and role=\"button\" behavior, but explicit Button or Link actions are preferred","Card titles should be appropriate heading levels"]},"props":{"as":{"type":"enum","description":"Root element tag.","default":"article","required":false,"values":["article","div","section"]},"children":{"type":"node","description":"","required":true},"padding":{"type":"enum","description":"Inner padding.","default":"md","required":false,"values":["none","sm","md","lg"]},"style":{"type":"object","description":"","required":false},"tone":{"type":"enum","description":"Earned-moment capsule. Any tone other than `neutral` paints a\ntone-tinted hairline, a radial wash and the capsule radius on top of the\nvariant: `accent` (the moment), `danger` (a merge is held), `warning`\n(enforcement lapsed). Reserve it for the few surfaces that earn emphasis.","default":"neutral","required":false,"values":["neutral","accent","warning","danger"]},"variant":{"type":"enum","description":"Surface chrome.\n\n- `solid`: the filled, elevated surface for general-purpose cards.\n- `soft`: quiet tint fill for metric tiles and dashboard panels. Add\n `padding=\"none\"` and let `Card.Header divided` + `Card.Body padding`\n own their inset for a panel.\n- `outline`: transparent with a hairline border, for dense layouts.","default":"solid","required":false,"values":["solid","soft","outline"]}},"relations":[{"component":"Grid","relationship":"parent","note":"Use Grid + Card for responsive card layouts"},{"component":"List","relationship":"alternative","note":"Use List for linear, text-first layouts"}],"variants":[{"name":"Default","description":"Quiet surface with a title and description.","code":"<Card>\n          <Card.Header>\n            <Card.Title>Card title</Card.Title>\n            <Card.Description>A brief description</Card.Description>\n          </Card.Header>\n          <Card.Body>Related content</Card.Body>\n        </Card>","canonical":true},{"name":"Content Only","description":"Body alone, when there is nothing to title.","code":"<Card>\n          <Card.Body>Just content, no header or footer.</Card.Body>\n        </Card>"},{"name":"With Footer","description":"Footer parks the actions below the content.","code":"<Card>\n          <Card.Header>\n            <Card.Title>Card with footer</Card.Title>\n            <Card.Description>Complete card layout</Card.Description>\n          </Card.Header>\n          <Card.Body>Main content area.</Card.Body>\n          <Card.Footer>Footer actions go here</Card.Footer>\n        </Card>"},{"name":"Outline","description":"Hairline border on a transparent surface, for dense layouts.","code":"<Card variant=\"outline\">\n          <Card.Body>Related content</Card.Body>\n        </Card>"},{"name":"Soft","description":"Quiet tint fill: metric tiles and dashboard panels read as one system.","code":"<Card variant=\"soft\">\n          <Card.Body>\n            <Text scale=\"xl\" weight=\"semibold\">\n              94%\n            </Text>\n            <Text scale=\"sm\" color=\"secondary\">\n              Component coverage\n            </Text>\n          </Card.Body>\n        </Card>"},{"name":"Panel","description":"Divided header; the body owns its own spacing.","code":"<Card variant=\"soft\" padding=\"none\">\n          <Card.Header divided>\n            <Card.Title>Overview</Card.Title>\n          </Card.Header>\n          <Card.Body padding=\"md\">Panel content</Card.Body>\n        </Card>"},{"name":"Accent","description":"Earned-moment capsule: accent hairline and wash, for the few surfaces that deserve emphasis.","code":"<Card variant=\"soft\" tone=\"accent\" padding=\"lg\">\n          <Card.Header>\n            <Card.Title>Finish setting up governance</Card.Title>\n            <Card.Description>Run the first scan to start tracking drift.</Card.Description>\n          </Card.Header>\n        </Card>"},{"name":"Danger Tone","description":"The same capsule carrying state: the wash and hairline follow the tone.","code":"<Card variant=\"soft\" tone=\"danger\">\n          <Card.Header>\n            <Card.Title>Merge held</Card.Title>\n            <Card.Description>Two blocking findings need a decision.</Card.Description>\n          </Card.Header>\n        </Card>"},{"name":"Interactive","description":"onClick adds keyboard and button behaviour to the whole surface.","code":"<Card as=\"section\" onClick={() => undefined}>\n          <Card.Header>\n            <Card.Title>Open details</Card.Title>\n            <Card.Description>This card is interactive</Card.Description>\n          </Card.Header>\n          <Card.Body>Activate the card to view more.</Card.Body>\n        </Card>"},{"name":"Section Root","description":"The as prop matches the surrounding document semantics.","code":"<Card as=\"section\" aria-labelledby=\"billing-card-title\">\n          <Card.Header>\n            <Card.Title id=\"billing-card-title\">Billing summary</Card.Title>\n          </Card.Header>\n          <Card.Body>Section semantics support the surrounding document outline.</Card.Body>\n        </Card>"},{"name":"Nested Heading","description":"Pick the heading level the page outline expects.","code":"<Card variant=\"soft\" padding=\"none\">\n          <Card.Header divided>\n            <Card.Title as=\"h4\">Nested panel</Card.Title>\n          </Card.Header>\n          <Card.Body padding=\"md\">Panel content</Card.Body>\n        </Card>"},{"name":"Long Content","description":"Long titles and dense text wrap without breaking the surface.","code":"<Card>\n          <Card.Header>\n            <Card.Title>\n              A detailed localized account recovery policy for administrators across multiple\n              workspaces\n            </Card.Title>\n            <Card.Description>\n              Supporting content remains readable when translated strings take substantially more\n              space than the English source.\n            </Card.Description>\n          </Card.Header>\n          <Card.Body>\n            Recovery settings apply to every affected administrator and retain an auditable history\n            of the notification decision.\n          </Card.Body>\n        </Card>"}],"ai":{"compositionPattern":"compound","subComponents":["Header","Title","Description","Body","Footer"],"requiredChildren":["Body"],"commonPatterns":["<Card><Card.Body>{content}</Card.Body></Card>","<Card><Card.Header><Card.Title>{title}</Card.Title></Card.Header><Card.Body>{content}</Card.Body></Card>","<Card><Card.Header><Card.Title>{title}</Card.Title><Card.Description>{desc}</Card.Description></Card.Header><Card.Body>{content}</Card.Body><Card.Footer>{actions}</Card.Footer></Card>"]},"contract":{"propsSummary":["variant: solid|soft|outline (default: solid)","tone: neutral|accent|warning|danger (default: neutral) - non-neutral paints the earned-moment capsule","padding: none|sm|md|lg (default: md) - none + Card.Header divided + Card.Body padding = panel","as: article|div|section (default: article) - card root element","onClick: (event) => void - click handler on root (adds role/button keyboard behavior)","Sub-components: Card.Header, Card.Title, Card.Description, Card.Body, Card.Footer","Card.Body padding: none|sm|md|lg - use for panel body spacing"],"a11yRules":["A11Y_CARD_HEADING","A11Y_CARD_INTERACTIVE"]},"matrix":{"axes":{"variant":"auto","tone":"auto","padding":"auto","theme":["light","dark"]},"forced":["hover","focus"],"worstCase":{"children":"A long localized heading and dense multi-line supporting content"}},"preview":{"providers":[],"dynamicRegions":[]},"provenance":{"source":"extracted","verified":true},"sourcePath":"src/components/Card/index.tsx","exportName":"Card","performance":{"bundleSize":1127,"rawSize":2685,"complexity":"lightweight","budgetPercent":7,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Card (self)","bytes":2003,"percent":75}]}},"Chart":{"filePath":"src/components/Chart/index.tsx","meta":{"name":"Chart","description":"Plots your data with tooltips, legends, and colors that track the theme.","category":"display","tags":["chart","graph","data-visualization","recharts"],"status":"stable","dependencies":[{"name":"recharts","version":">=2.0.0 || >=3.0.0","reason":"Optional — powers Chart.Tooltip and Chart.Legend; both render nothing until it is installed."}]},"usage":{"when":["A trend over time is the point","Categories need comparing side by side","A whole splits into parts worth seeing"],"whenNot":["One number tells the story (use Text or Badge)","Distance to a goal (use Progress)","Readers need exact values (use Table)"],"guidelines":["Wrap every recharts chart in ChartContainer","Map each data key to a label and color in ChartConfig","Colors come from --fui-* variables so both themes stay readable","Pair with ChartTooltip and ChartLegend rather than recharts' own","Give the container a real height — recharts cannot measure zero"],"accessibility":["accessibilityLayer is on by default","ChartConfig labels are what screen readers read","Pass dataTable to offer the same numbers as text"]},"props":{"config":{"type":"object","description":"ChartConfig mapping data keys to labels/colors (optional icon per series)","required":true},"children":{"type":"element","description":"A recharts chart component (LineChart, BarChart, etc.)","required":true},"summary":{"type":"string","description":"Non-visual summary announced to assistive technology users","required":false},"dataTable":{"type":"node","description":"Optional accessible data table or textual fallback","required":false},"style":{"type":"object","description":"","required":false}},"relations":[{"component":"Card","relationship":"parent","note":"Charts are typically placed inside Cards"},{"component":"Progress","relationship":"alternative","note":"Use Progress for single-value completion"},{"component":"Table","relationship":"sibling","note":"Combine with Table for full data views"}],"variants":[{"name":"Line Chart","description":"Two series share one scale, so the gap between them reads instantly.","code":"<div style={{ width: '100%', height: 300 }}>\n  <ChartContainer\n    config={{\n      revenue: { label: 'Revenue', color: 'var(--fui-color-accent)' },\n      users: { label: 'Users', color: 'var(--fui-color-info)' },\n    }}\n  >\n    <LineChart data={monthlyData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>\n      <CartesianGrid strokeDasharray=\"3 3\" />\n      <XAxis dataKey=\"month\" />\n      <YAxis />\n      <ChartTooltip />\n      <ChartLegend />\n      <Line type=\"monotone\" dataKey=\"revenue\" stroke=\"var(--fui-color-accent)\" strokeWidth={2} dot={false} />\n      <Line type=\"monotone\" dataKey=\"users\" stroke=\"var(--fui-color-info)\" strokeWidth={2} dot={false} />\n    </LineChart>\n  </ChartContainer>\n</div>"},{"name":"Bar Chart","description":"Fixed categories, compared by height — the safest default.","code":"<div style={{ width: '100%', height: 300 }}>\n  <ChartContainer\n    config={{\n      sessions: { label: 'Sessions', color: 'var(--fui-color-accent)' },\n    }}\n  >\n    <BarChart data={deviceData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>\n      <CartesianGrid strokeDasharray=\"3 3\" />\n      <XAxis dataKey=\"device\" />\n      <YAxis />\n      <ChartTooltip />\n      <Bar dataKey=\"sessions\" fill=\"var(--fui-color-accent)\" radius={[4, 4, 0, 0]} />\n    </BarChart>\n  </ChartContainer>\n</div>"},{"name":"Area Chart","description":"The fill under the line stresses volume, not just direction.","code":"<div style={{ width: '100%', height: 300 }}>\n  <ChartContainer\n    config={{\n      revenue: { label: 'Revenue', color: 'var(--fui-color-accent)' },\n    }}\n  >\n    <AreaChart data={monthlyData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>\n      <CartesianGrid strokeDasharray=\"3 3\" />\n      <XAxis dataKey=\"month\" />\n      <YAxis />\n      <ChartTooltip />\n      <Area type=\"monotone\" dataKey=\"revenue\" stroke=\"var(--fui-color-accent)\" fill=\"var(--fui-color-accent)\" fillOpacity={0.15} strokeWidth={2} />\n    </AreaChart>\n  </ChartContainer>\n</div>"},{"name":"Pie Chart","description":"Parts of one whole — keep it under six slices or it stops reading.","code":"<div style={{ width: '100%', height: 300 }}>\n  <ChartContainer\n    config={{\n      Chrome: { label: 'Chrome', color: 'var(--fui-color-accent)' },\n      Firefox: { label: 'Firefox', color: 'var(--fui-color-info)' },\n      Safari: { label: 'Safari', color: 'var(--fui-color-success)' },\n      Edge: { label: 'Edge', color: 'var(--fui-color-warning)' },\n    }}\n  >\n    <PieChart>\n      <ChartTooltip />\n      <ChartLegend />\n      <Pie\n        data={browserData}\n        dataKey=\"value\"\n        nameKey=\"name\"\n        cx=\"50%\"\n        cy=\"50%\"\n        innerRadius={60}\n        outerRadius={90}\n        strokeWidth={2}\n      >\n        {browserData.map((entry) => (\n          <Cell key={entry.name} fill={entry.color} />\n        ))}\n      </Pie>\n    </PieChart>\n  </ChartContainer>\n</div>"}],"contract":{"propsSummary":["config: ChartConfig - maps data keys to labels and theme colors","children: ReactElement - recharts chart component","Chart.Tooltip / Chart.Legend support custom content renderers for advanced overlays"],"a11yRules":["A11Y_CHART_LABEL"]},"propsSummary":["config: object (required)","children: element (required)","summary: string","dataTable: node","style: object"],"sourcePath":"src/components/Chart/index.tsx","exportName":"ChartContainer","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:52.043Z"},"ai":{"subComponents":["Root","Tooltip","TooltipContent","Legend","LegendContent","preload"],"compositionPattern":"compound"},"performance":{"bundleSize":2010,"rawSize":4575,"complexity":"lightweight","budgetPercent":13,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Chart (self)","bytes":3659,"percent":80},{"path":"src/utils/aria.ts","bytes":109,"percent":2},{"path":"src/utils/env.ts","bytes":92,"percent":2}]}},"Checkbox":{"filePath":"src/components/Checkbox/index.tsx","meta":{"name":"Checkbox","description":"Selects options that take effect when a form is submitted.","category":"inputs","tags":["checkbox","form","boolean","selection","input"],"status":"stable"},"usage":{"when":["Choices that apply only once the form is submitted","Picking several items from a list","Accepting terms","Filter and preference lists"],"whenNot":["Settings that apply instantly (use Switch)","One choice from a few (use RadioGroup)","Many options (use Select)"],"guidelines":["Always show a label","Add helperText when the consequence is not obvious","Keep related boxes together","Use indeterminate for a parent whose children are partly checked"],"accessibility":["Label is tied to the box","Space toggles it","Focus ring stays visible","Indeterminate is announced as mixed"]},"props":{"checked":{"type":"boolean","description":"Controlled checked state","required":false},"defaultChecked":{"type":"boolean","description":"Default checked state (uncontrolled)","required":false},"onCheckedChange":{"type":"function","description":"Called when checked state changes","required":false},"onChange":{"type":"function","description":"Alias for onCheckedChange: (checked: boolean) => void","required":false},"indeterminate":{"type":"boolean","description":"Indeterminate state (partial selection)","default":"false","required":false},"disabled":{"type":"boolean","description":"Disable the checkbox","default":"false","required":false},"required":{"type":"boolean","description":"Whether the checkbox is required","default":"false","required":false},"size":{"type":"enum","description":"Checkbox size","default":"\"md\"","required":false,"values":["sm","md","lg"]},"variant":{"type":"enum","description":"Chrome. Omit for the inline checkbox beside its label; 'outline' renders a full-width bordered surface with the checkbox tucked inside.","required":false,"values":["outline"]},"label":{"type":"string","description":"Label text","required":false},"helperText":{"type":"string","description":"Helper text shown below the label (preferred)","required":false},"description":{"type":"string","description":"Deprecated alias for helperText","required":false},"name":{"type":"string","description":"Name attribute for form submission","required":false},"value":{"type":"string","description":"Value attribute for form submission","required":false},"id":{"type":"string","description":"ID for the checkbox input","required":false},"controlClassName":{"type":"string","description":"Class name for the checkbox control element (stable styling target)","required":false},"contentClassName":{"type":"string","description":"Class name for the label/description content wrapper","required":false},"aria-label":{"type":"string","description":"Accessible label for icon-only mode","required":false},"aria-labelledby":{"type":"string","description":"Accessible labelled-by relationship for icon-only mode","required":false},"aria-describedby":{"type":"string","description":"Accessible described-by relationship","required":false},"form":{"type":"string","description":"ID of the form that owns the hidden input","required":false},"inputRef":{"type":"union","description":"Ref to the hidden input element","required":false},"parent":{"type":"boolean","description":"Whether this checkbox controls child checkboxes in a checkbox group","required":false},"readOnly":{"type":"boolean","description":"Whether the checkbox cannot be changed by the user","default":"false","required":false},"uncheckedValue":{"type":"string","description":"Value submitted when unchecked","required":false}},"relations":[{"component":"Switch","relationship":"alternative","note":"Use Switch for immediate-effect settings"},{"component":"Input","relationship":"sibling","note":"Checkbox handles boolean; Input handles text"}],"variants":[{"name":"Default","description":"One box, one label, off to start.","code":"<StatefulCheckbox label=\"Accept terms and conditions\" />"},{"name":"With Helper Text","description":"Second line spells out what opting in does.","code":"<StatefulCheckbox\n  label=\"Email notifications\"\n  helperText=\"Receive email updates about your account activity\"\n/>"},{"name":"Checked","description":"Starts on.","code":"<StatefulCheckbox defaultChecked label=\"Subscribe to newsletter\" />"},{"name":"Indeterminate","description":"A dash on the parent means only some children are on.","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n  <Checkbox indeterminate label=\"Select all\" />\n  <div style={{ marginLeft: '24px', display: 'flex', flexDirection: 'column', gap: '8px' }}>\n    <StatefulCheckbox defaultChecked label=\"Option 1\" />\n    <StatefulCheckbox label=\"Option 2\" />\n    <StatefulCheckbox defaultChecked label=\"Option 3\" />\n  </div>\n</div>"},{"name":"Sizes","description":"Three box sizes: sm, md, lg.","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n  <StatefulCheckbox size=\"sm\" label=\"Small checkbox\" />\n  <StatefulCheckbox size=\"md\" label=\"Medium checkbox\" />\n  <StatefulCheckbox size=\"lg\" label=\"Large checkbox\" />\n</div>"},{"name":"Disabled","description":"Locked in both positions, on and off.","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n  <Checkbox disabled label=\"Disabled unchecked\" />\n  <Checkbox disabled checked label=\"Disabled checked\" />\n</div>"},{"name":"Custom Styling Targets","description":"controlClassName styles the box, contentClassName the text.","code":"<Checkbox\n  label=\"Styled checkbox\"\n  helperText=\"Control and content wrappers can be targeted independently\"\n  controlClassName=\"demo-checkbox-control\"\n  contentClassName=\"demo-checkbox-content\"\n/>"}],"contract":{"propsSummary":["checked: boolean - controlled checked state","onCheckedChange: (checked) => void - change handler","onChange: (checked) => void - alias for onCheckedChange","indeterminate: boolean - partial selection state","variant: outline - full-width bordered surface; omit for the inline control","label: string - checkbox label","helperText: string - helper text (preferred)","description: string - deprecated alias for helperText","controlClassName/contentClassName - explicit styling targets for control and content"],"a11yRules":["A11Y_CHECKBOX_LABEL","A11Y_CHECKBOX_FOCUS","A11Y_TARGET_SIZE_MIN"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["checked: boolean","defaultChecked: boolean","onCheckedChange: function","onChange: function","indeterminate: boolean (default: false)","disabled: boolean (default: false)","required: boolean (default: false)","size: sm|md|lg (default: md)","variant: outline","label: string","helperText: string","description: string","name: string","value: string","id: string","controlClassName: string","contentClassName: string","aria-label: string","aria-labelledby: string","aria-describedby: string"],"sourcePath":"src/components/Checkbox/index.tsx","exportName":"Checkbox","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:52.226Z"},"performance":{"bundleSize":1384,"rawSize":3417,"complexity":"lightweight","budgetPercent":9,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Checkbox (self)","bytes":2508,"percent":73},{"path":"ComponentDefaults","bytes":198,"percent":6},{"path":"src/utils/aria.ts","bytes":110,"percent":3}]}},"Chip":{"filePath":"src/components/Chip/index.tsx","meta":{"name":"Chip","description":"Pill control for filtering, multi-select, and removable tags.","category":"inputs","tags":["chip","tag","filter","selection","multi-select","action"],"status":"stable"},"usage":{"when":["Filtering a list by tag or category","Multi-select from a compact set","Showing filters the user can dismiss"],"whenNot":["Read-only status — use Badge","Switching views — use Tabs","On/off state — use Switch","A main call to action — use Button"],"guidelines":["One to three words per chip","Chip.Group when chips share selection state","Keep xs for filters and tags; size up only to match a taller control track","onRemove only when the chip is genuinely dismissible","Pass an explicit value when children are custom JSX"],"accessibility":["Chips are buttons; selection is reported via aria-pressed","Add role and aria-label to Chip.Group when the set needs a name","Remove buttons carry the chip text in their aria-label","Disabled chips are skipped by keyboard and pointer"]},"props":{"children":{"type":"node","description":"Chip label text","required":true},"variant":{"type":"enum","description":"Chrome family. solid is the tinted pill; outline is hairline-bordered; soft is info-tinted for a suggestion","default":"solid","required":false,"values":["solid","outline","soft"]},"size":{"type":"enum","description":"Chip size","default":"\"xs\"","required":false,"values":["xs","sm","md","lg"]},"selected":{"type":"boolean","description":"Whether the chip is in a selected state","default":"false","required":false},"icon":{"type":"node","description":"Icon element rendered before the label","required":false},"avatar":{"type":"node","description":"Avatar element rendered before the label","required":false},"onRemove":{"type":"function","description":"Makes chip removable. Called when X is clicked.","required":false},"value":{"type":"string","description":"Value identifier used by Chip.Group for selection tracking","required":false},"disabled":{"type":"boolean","description":"","default":"false","required":false},"onClick":{"type":"function","description":"","required":false}},"relations":[{"component":"Badge","relationship":"sibling","note":"Badge is display-only; Chip is interactive"},{"component":"ToggleGroup","relationship":"alternative","note":"Use ToggleGroup for mutually exclusive options"},{"component":"Button","relationship":"alternative","note":"Use Button for primary actions, Chip for selection/filtering"}],"variants":[{"name":"Variants","description":"Tinted, hairline, and accent-soft chrome.","code":"import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Chip variant=\"solid\">Solid</Chip>\n  <Chip variant=\"outline\">Outline</Chip>\n  <Chip variant=\"soft\">Soft</Chip>\n</Stack>"},{"name":"Sizes","description":"xs for filter rows; larger sizes match taller field tracks.","code":"import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" align=\"center\" wrap>\n  <Chip variant=\"outline\" size=\"xs\">Extra small</Chip>\n  <Chip variant=\"outline\" size=\"sm\">Small</Chip>\n  <Chip variant=\"outline\" size=\"md\">Medium</Chip>\n  <Chip variant=\"outline\" size=\"lg\">Large</Chip>\n</Stack>"},{"name":"Selected","description":"All three variants share one selection treatment.","code":"import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Chip selected>Solid</Chip>\n  <Chip variant=\"outline\" selected>Outline</Chip>\n  <Chip variant=\"soft\" selected>Soft</Chip>\n</Stack>"},{"name":"With Avatar","description":"Leading face, for people-shaped selections.","code":"<Chip avatar={<img src=\"https://i.pravatar.cc/32?u=chip\" alt=\"\" />}>\n  Jane Doe\n</Chip>"},{"name":"With Remove","description":"Trailing dismiss button clears the tag.","code":"import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Chip variant=\"outline\" onRemove={() => {}}>React</Chip>\n  <Chip variant=\"outline\" selected onRemove={() => {}}>TypeScript</Chip>\n  <Chip variant=\"soft\" onRemove={() => {}}>SCSS</Chip>\n</Stack>"},{"name":"Chip Group","description":"Selection state is held by the group, not each chip.","code":"<Chip.Group defaultValue={['react']}>\n  <Chip value=\"react\">React</Chip>\n  <Chip value=\"vue\">Vue</Chip>\n  <Chip value=\"angular\">Angular</Chip>\n  <Chip value=\"svelte\">Svelte</Chip>\n</Chip.Group>"},{"name":"Chip Group with Custom Labels","description":"Custom JSX children need an explicit value.","code":"<Chip.Group aria-label=\"Assignees\">\n  <Chip value=\"jane\">\n    <span>Jane Doe</span>\n  </Chip>\n  <Chip value=\"sam\">\n    <span>Sam Lee</span>\n  </Chip>\n</Chip.Group>"},{"name":"Disabled","description":"Dimmed and unreachable, selected or not.","code":"import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Chip variant=\"outline\" disabled>Disabled</Chip>\n  <Chip variant=\"outline\" disabled selected>Disabled selected</Chip>\n</Stack>"}],"contract":{"propsSummary":["children: ReactNode - chip label (required)","variant: solid|outline|soft - chrome family","size: xs|sm|md|lg - chip size (xs by default)","selected: boolean - selection state","icon/avatar: ReactNode - leading visual","onRemove: () => void - makes chip removable","value: string - identifier for Chip.Group","Chip.Group forwards DOM props (id, role, aria-*, data-*, handlers)","Chip.Group: non-string chip labels should set an explicit value"],"a11yRules":["A11Y_CHIP_SELECTION","A11Y_CHIP_DISMISS"]},"ai":{"compositionPattern":"compound","subComponents":["Group"]},"propsSummary":["children: node (required)","variant: solid|outline|soft (default: solid)","size: xs|sm|md|lg (default: xs)","selected: boolean (default: false)","icon: node","avatar: node","onRemove: function","value: string","disabled: boolean (default: false)","onClick: function"],"sourcePath":"src/components/Chip/index.tsx","exportName":"Chip","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:54.270Z"},"performance":{"bundleSize":1209,"rawSize":2417,"complexity":"lightweight","budgetPercent":8,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Chip (self)","bytes":1742,"percent":72},{"path":"src/utils/env.ts","bytes":89,"percent":4}]}},"CodeBlock":{"filePath":"src/components/CodeBlock/index.tsx","meta":{"name":"CodeBlock","description":"Shows code with syntax colors, a copy button, and diff or collapse when you need them.","category":"display","tags":["code","syntax","highlighting","documentation","developer","diff"],"status":"stable","dependencies":[{"name":"shiki","version":">=1.0.0","reason":"Optional — provides syntax highlighting; without it code renders unhighlighted."}]},"usage":{"when":["Code examples inside prose or docs","Install and config snippets","Showing what changed, as a diff"],"whenNot":["The user needs to edit it (use an editor)","A couple of words inline (use a code element)"],"guidelines":["Set language every time — wrong highlighting is worse than none","filename for a real file, title for a label, caption for the aside","Line numbers earn their keep once you need to point at a line","highlightLines for emphasis; addedLines and removedLines for diffs","maxHeight or collapsible keeps a long file from swallowing the page","CodeBlock.Tabbed groups the same snippet across languages"],"accessibility":["Renders as semantic pre and code","The copy button is labelled and keyboard reachable","The collapse toggle reports aria-expanded"]},"props":{"code":{"type":"string","description":"The code string to display","required":true},"language":{"type":"enum","description":"Programming language for syntax highlighting","default":"tsx","required":false,"values":["tsx","typescript","ts","javascript","js","jsx","bash","shell","css","scss","sass","json","html","xml","markdown","md","yaml","yml","python","py","ruby","go","rust","java","kotlin","swift","c","cpp","csharp","php","sql","graphql","diff","plaintext","text"]},"theme":{"type":"enum","description":"Syntax highlighting theme. css-variables maps spans onto --fui-code-token-* so both themes stay readable.","default":"css-variables","required":false,"values":["css-variables","synthwave-84","github-dark","github-light","one-dark-pro","dracula","nord","monokai","vitesse-dark","vitesse-light","min-dark","min-light"]},"showCopy":{"type":"boolean","description":"Whether to show the copy button","default":"true","required":false},"title":{"type":"string","description":"Optional title displayed above the code block (external label)","required":false},"filename":{"type":"string","description":"Optional filename shown in header bar inside code block","required":false},"caption":{"type":"string","description":"Optional caption displayed below the code block","required":false},"showLineNumbers":{"type":"boolean","description":"Whether to display line numbers","default":"false","required":false},"startLineNumber":{"type":"number","description":"Starting line number (useful for code excerpts)","default":"1","required":false},"highlightLines":{"type":"array","description":"Lines to highlight (e.g., [1, 3, \"5-7\"])","required":false},"addedLines":{"type":"array","description":"Lines marked as added in diff view (e.g., [2, \"4-6\"])","required":false},"removedLines":{"type":"array","description":"Lines marked as removed in diff view (e.g., [1, 3])","required":false},"wordWrap":{"type":"boolean","description":"Enable word wrapping for long lines","default":"false","required":false},"maxHeight":{"type":"number","description":"Maximum height in pixels (enables scrolling)","required":false},"collapsible":{"type":"boolean","description":"Allow collapsing/expanding the code block","default":"false","required":false},"defaultCollapsed":{"type":"boolean","description":"Initial collapsed state (only applies when collapsible is true)","default":"false","required":false},"collapsedLines":{"type":"number","description":"Number of lines to show when collapsed","default":"5","required":false},"collapseAction":{"type":"enum","description":"Collapse control copy: line-count bar, or a single Expand / Collapse control","default":"lines","required":false,"values":["lines","expand"]},"compact":{"type":"boolean","description":"Compact mode with reduced padding","default":"false","required":false},"persistentCopy":{"type":"boolean","description":"Show a persistent copy button that is always visible","default":"false","required":false},"copyPlacement":{"type":"enum","description":"Where to place the copy button when not using persistentCopy","default":"auto","required":false,"values":["auto","header","overlay"]},"bg":{"type":"string","description":"Custom background color for the code block (useful when the content area is pure black or dark gray)","required":false},"onCopy":{"type":"function","description":"Callback fired when the copy button is clicked and copy succeeds","required":false}},"relations":[{"component":"Card","relationship":"parent","note":"Can be wrapped in Card for additional context"},{"component":"Tabs","relationship":"child","note":"Use in Tabs for showing code in multiple languages"}],"variants":[{"name":"Default","description":"Pass code and language; highlighting and copy come free.","code":"<CodeBlock code={`import { Button } from '@usefragments/ui';\n\nfunction App() {\n  return <Button>Click me</Button>;\n}`} language=\"tsx\" />"},{"name":"With Filename","description":"A header bar names the source file and holds the copy button.","code":"<CodeBlock filename=\"app.tsx\" code={`import { Button, Card } from '@usefragments/ui';\n\nfunction App() {\n  return (\n    <Card>\n      <Card.Header>Welcome</Card.Header>\n      <Card.Content>\n        <Button>Get Started</Button>\n      </Card.Content>\n    </Card>\n  );\n}`} language=\"tsx\" />"},{"name":"With Title","description":"A label above the block, outside the code surface.","code":"<CodeBlock title=\"Installation\" code=\"npm install @usefragments/ui\" language=\"bash\" />"},{"name":"With Caption","description":"A footer line for the aside that does not belong in the code.","code":"<CodeBlock\n  code={`const API_URL = process.env.NEXT_PUBLIC_API_URL;`}\n  language=\"typescript\"\n  caption=\"Environment variables must be prefixed with NEXT_PUBLIC_ to be available in the browser.\"\n/>"},{"name":"With Line Numbers","description":"Turn these on once a snippet is long enough to point at.","code":"<CodeBlock code={`const greeting = \"Hello\";\nconst name = \"World\";\nconsole.log(\\`\\${greeting}, \\${name}!\\`);`} language=\"typescript\" showLineNumbers />"},{"name":"Custom Start Line","description":"Numbering starts where the excerpt actually starts in the file.","code":"<CodeBlock\n  code={`  return (\n    <button onClick={() => setCount(c => c + 1)}>\n      Count: {count}\n    </button>\n  );\n}`}\n  language=\"tsx\"\n  showLineNumbers\n  startLineNumber={15}\n  caption=\"Lines 15-20 from Counter.tsx\"\n/>"},{"name":"With Highlighted Lines","description":"Marks the lines the prose is talking about.","code":"<CodeBlock code={`import { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <button onClick={() => setCount(c => c + 1)}>\n      Count: {count}\n    </button>\n  );\n}`} language=\"tsx\" showLineNumbers highlightLines={[4, '7-9']} />"},{"name":"Diff View","description":"Added and removed lines, side by side with the rest.","code":"<CodeBlock\n  code={`import { useState } from 'react';\nimport { useCallback } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n  const increment = () => setCount(c => c + 1);\n  const increment = useCallback(() => setCount(c => c + 1), []);\n\n  return <button onClick={increment}>Count: {count}</button>;\n}`}\n  language=\"tsx\"\n  showLineNumbers\n  removedLines={[6]}\n  addedLines={[2, 7]}\n/>"},{"name":"Custom Theme","description":"Any Shiki theme works — pass its name to theme.","code":"<CodeBlock\n  code={`async function fetchUser(id: string) {\n  const response = await fetch(\\`/api/users/\\${id}\\`);\n  return response.json();\n}`}\n  language=\"typescript\"\n  theme=\"github-dark\"\n/>"},{"name":"Word Wrap","description":"Long lines break instead of scrolling sideways.","code":"<CodeBlock\n  code={`const longString = \"This is a very long string that would normally cause horizontal scrolling, but with word wrap enabled it will break to the next line instead.\";`}\n  language=\"typescript\"\n  wordWrap\n/>"},{"name":"Max Height with Scroll","description":"Caps the height so one snippet cannot own the page.","code":"<CodeBlock\n  code={`// This code block has a maximum height\nfunction processItems(items: string[]) {\n  const results = [];\n  for (const item of items) {\n    if (item.startsWith('_')) {\n      continue;\n    }\n    const processed = item.trim().toLowerCase();\n    if (processed.length > 0) {\n      results.push(processed);\n    }\n  }\n  return results;\n}\n\nexport default processItems;`}\n  language=\"typescript\"\n  maxHeight={150}\n  showLineNumbers\n/>"},{"name":"Collapsible","description":"Shows the opening lines and hides the rest behind a toggle.","code":"<CodeBlock\n  code={`import React, { useState, useEffect } from 'react';\n\ninterface User {\n  id: string;\n  name: string;\n  email: string;\n  avatar?: string;\n}\n\nexport function UserProfile({ userId }: { userId: string }) {\n  const [user, setUser] = useState<User | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    async function fetchUser() {\n      try {\n        setLoading(true);\n        const response = await fetch(\\`/api/users/\\${userId}\\`);\n        if (!response.ok) throw new Error('Failed to fetch');\n        const data = await response.json();\n        setUser(data);\n      } catch (err) {\n        setError(err instanceof Error ? err.message : 'Unknown error');\n      } finally {\n        setLoading(false);\n      }\n    }\n    fetchUser();\n  }, [userId]);\n\n  if (loading) return <div>Loading...</div>;\n  if (error) return <div>Error: {error}</div>;\n  if (!user) return null;\n\n  return (\n    <div>\n      <h1>{user.name}</h1>\n      <p>{user.email}</p>\n    </div>\n  );\n}`}\n  language=\"tsx\"\n  showLineNumbers\n  collapsible\n  defaultCollapsed\n  collapsedLines={8}\n/>"},{"name":"JSON","description":"Config files highlight the same way source does.","code":"<CodeBlock title=\"package.json\" code={`{\n  \"name\": \"my-app\",\n  \"dependencies\": {\n    \"@usefragments/ui\": \"^0.3.0\"\n  }\n}`} language=\"json\" />"},{"name":"Without Copy Button","description":"Drop the copy button when the snippet is not meant to be reused.","code":"<CodeBlock code=\"const simple = true;\" language=\"typescript\" showCopy={false} />"}],"contract":{"propsSummary":["code: string - required code content","language: tsx|typescript|javascript|jsx|bash|shell|css|scss|sass|json|html|xml|markdown|md|yaml|yml|python|py|ruby|go|rust|java|kotlin|swift|c|cpp|csharp|php|sql|graphql|diff|plaintext","theme: css-variables|synthwave-84|github-dark|github-light|one-dark-pro|dracula|nord|monokai|vitesse-dark|vitesse-light|min-dark|min-light (default: css-variables)","showCopy: boolean (default: true)","copyPlacement: auto|header|overlay (default: auto)","title: string - optional external label","filename: string - optional filename in header bar","caption: string - optional footer caption","showLineNumbers: boolean (default: false)","startLineNumber: number (default: 1)","highlightLines: (number | string)[] - lines to emphasize","addedLines: (number | string)[] - diff added lines","removedLines: (number | string)[] - diff removed lines","wordWrap: boolean (default: false)","maxHeight: number - max height with scrolling","collapsible: boolean (default: false)","defaultCollapsed: boolean (default: false)","collapsedLines: number (default: 5)","CodeBlock.Tabbed: tabs[] plus optional defaultTab/value/onValueChange for multi-language snippets; collapsible/defaultCollapsed/collapsedLines forward to every panel"],"a11yRules":["A11Y_CODE_SEMANTIC","A11Y_BTN_LABEL"]},"ai":{"compositionPattern":"compound","subComponents":["Tabbed"]},"propsSummary":["code: string (required)","language: tsx|typescript|ts|javascript|js|jsx|bash|shell|css|scss|sass|json|html|xml|markdown|md|yaml|yml|python|py|ruby|go|rust|java|kotlin|swift|c|cpp|csharp|php|sql|graphql|diff|plaintext|text (default: tsx)","theme: css-variables|synthwave-84|github-dark|github-light|one-dark-pro|dracula|nord|monokai|vitesse-dark|vitesse-light|min-dark|min-light (default: css-variables)","showCopy: boolean (default: true)","title: string","filename: string","caption: string","showLineNumbers: boolean (default: false)","startLineNumber: number (default: 1)","highlightLines: array","addedLines: array","removedLines: array","wordWrap: boolean (default: false)","maxHeight: number","collapsible: boolean (default: false)","defaultCollapsed: boolean (default: false)","collapsedLines: number (default: 5)","compact: boolean (default: false)","persistentCopy: boolean (default: false)","copyPlacement: auto|header|overlay (default: auto)","bg: string","onCopy: function"],"sourcePath":"src/components/CodeBlock/index.tsx","exportName":"CodeBlock","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:52.626Z"},"performance":{"bundleSize":5887,"rawSize":16360,"complexity":"moderate","budgetPercent":38,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"CodeBlock (self)","bytes":11366,"percent":69},{"path":"Button","bytes":2023,"percent":12},{"path":"Tabs","bytes":1653,"percent":10},{"path":"IconButton","bytes":689,"percent":4}]}},"Collapsible":{"filePath":"src/components/Collapsible/index.tsx","meta":{"name":"Collapsible","description":"Shows or hides one region of content behind a trigger.","category":"layout","tags":["collapsible","expandable","accordion","disclosure","toggle"],"status":"stable"},"usage":{"when":["Detail most readers do not need","Optional or advanced settings","Navigation sections that fold away","Building a disclosure the other components do not cover"],"whenNot":["Several sections that should coordinate (use Accordion)","Content that must overlay the page (use Dialog or Popover)","Action lists (use Menu)"],"guidelines":["The trigger should say what opens, not 'click here'","defaultOpen for content most users want on arrival","Keep the trigger to a short phrase","Keep the chevron direction consistent across the page"],"accessibility":["Trigger must have aria-expanded to indicate state","Content region needs aria-labelledby pointing to trigger","Keyboard: Enter/Space toggles open state","Focus should remain on trigger after toggle"]},"props":{"children":{"type":"node","description":"Collapsible.Trigger and Collapsible.Content components","required":true},"defaultOpen":{"type":"boolean","description":"Whether the collapsible is initially open (uncontrolled)","default":"false","required":false},"open":{"type":"boolean","description":"Controlled open state","required":false},"onOpenChange":{"type":"function","description":"Callback when open state changes - (open: boolean) => void","required":false},"disabled":{"type":"boolean","description":"Whether the collapsible is disabled","default":"false","required":false}},"relations":[{"component":"Accordion","relationship":"alternative","note":"Use Accordion for multiple exclusive collapsible sections"},{"component":"Sidebar","relationship":"used-by","note":"Sidebar uses Collapsible for section expand/collapse"},{"component":"Menu","relationship":"alternative","note":"Use Menu for dropdown navigation with actions"}],"variants":[{"name":"Default","description":"Starts closed and opens on click.","code":"<Collapsible>\n  <Collapsible.Trigger>Click to expand</Collapsible.Trigger>\n  <Collapsible.Content>\n    <p>This content is hidden by default and revealed when the trigger is clicked.</p>\n  </Collapsible.Content>\n</Collapsible>"},{"name":"Default Open","description":"Starts open for content most users want.","code":"<Collapsible defaultOpen>\n  <Collapsible.Trigger>Section Title</Collapsible.Trigger>\n  <Collapsible.Content>\n    <p>This content is visible by default. Click the trigger to collapse.</p>\n  </Collapsible.Content>\n</Collapsible>"},{"name":"Chevron Start","description":"Marker leads the label instead of trailing it.","code":"<Collapsible>\n  <Collapsible.Trigger chevronPosition=\"start\">Navigation</Collapsible.Trigger>\n  <Collapsible.Content>\n    <ul style={{ margin: 0, paddingLeft: '1.5rem' }}>\n      <li>Dashboard</li>\n      <li>Settings</li>\n      <li>Profile</li>\n    </ul>\n  </Collapsible.Content>\n</Collapsible>"},{"name":"No Chevron","description":"Bare trigger when the surrounding layout signals enough.","code":"<Collapsible>\n  <Collapsible.Trigger showChevron={false}>Show more details</Collapsible.Trigger>\n  <Collapsible.Content>\n    <p>Hidden details that appear when triggered.</p>\n  </Collapsible.Content>\n</Collapsible>"},{"name":"Disabled","description":"Locked shut and skipped by the keyboard.","code":"<Collapsible disabled>\n  <Collapsible.Trigger>Cannot toggle (disabled)</Collapsible.Trigger>\n  <Collapsible.Content>\n    <p>This content cannot be shown because the collapsible is disabled.</p>\n  </Collapsible.Content>\n</Collapsible>"},{"name":"Multiple Sections","description":"Independent regions that ignore each other.","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>\n  <Collapsible defaultOpen>\n    <Collapsible.Trigger>Getting Started</Collapsible.Trigger>\n    <Collapsible.Content>\n      <p>Introduction and setup instructions.</p>\n    </Collapsible.Content>\n  </Collapsible>\n  <Collapsible>\n    <Collapsible.Trigger>Advanced Usage</Collapsible.Trigger>\n    <Collapsible.Content>\n      <p>Advanced configuration options.</p>\n    </Collapsible.Content>\n  </Collapsible>\n  <Collapsible>\n    <Collapsible.Trigger>API Reference</Collapsible.Trigger>\n    <Collapsible.Content>\n      <p>Complete API documentation.</p>\n    </Collapsible.Content>\n  </Collapsible>\n</div>"}],"contract":{"propsSummary":["defaultOpen: boolean - initial open state (default: false)","open: boolean - controlled open state","onOpenChange: (open: boolean) => void - state change callback","disabled: boolean - prevents interaction"],"a11yRules":["A11Y_EXPANDED_STATE","A11Y_REGION_LABEL","A11Y_KEYBOARD_NAV"]},"ai":{"compositionPattern":"compound","subComponents":["Root","Trigger","Content"],"commonPatterns":["<Collapsible>\n  <Collapsible.Trigger>...</Collapsible.Trigger>\n  <Collapsible.Content>...</Collapsible.Content>\n</Collapsible>"],"requiredChildren":["Trigger","Content"]},"propsSummary":["children: node (required)","defaultOpen: boolean (default: false)","open: boolean","onOpenChange: function","disabled: boolean (default: false)"],"sourcePath":"src/components/Collapsible/index.tsx","exportName":"Collapsible","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:52.800Z"},"performance":{"bundleSize":1511,"rawSize":3197,"complexity":"lightweight","budgetPercent":10,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Collapsible (self)","bytes":2508,"percent":78}]}},"ColorPicker":{"filePath":"src/components/ColorPicker/index.tsx","meta":{"name":"ColorPicker","description":"Selects a color through a visual picker and hexadecimal input.","category":"inputs","tags":["color","picker","input","hex","swatch","theme"],"status":"stable","dependencies":[{"name":"react-colorful","version":">=5.0.0","reason":"Optional — renders the visual picker surface; the swatch and hex input work without it."}]},"usage":{"when":["Theme and brand customisation","Any colour the user must pick freely","Design tool inputs"],"whenNot":["A fixed palette (use RadioGroup with swatches)","Showing a colour without editing it (use a tinted Badge)","Status colour that should come from a token"],"guidelines":["Label says what the colour is for","Use helperText for constraints, such as contrast rules","Offer presets next to the picker for the common choices","Validate the hex as #RRGGBB before accepting it"],"accessibility":["Label is tied to the hex input","The swatch button carries its own aria-label","The picker popup is reachable from the keyboard","Users can type a hex instead of dragging"]},"props":{"label":{"type":"string","description":"Label text above the picker","required":false},"value":{"type":"string","description":"Controlled color value in hex format (#RRGGBB)","required":false},"defaultValue":{"type":"string","description":"Default color for uncontrolled usage","default":"#000000","required":false},"onChange":{"type":"function","description":"Called with new color value when changed","required":false},"onValueChange":{"type":"function","description":"Alias for onChange (Radix convention)","required":false},"helperText":{"type":"string","description":"Helper text below the picker (preferred)","required":false},"description":{"type":"string","description":"Deprecated alias for helperText","required":false},"error":{"type":"boolean","description":"Show error styling","default":"false","required":false},"disabled":{"type":"boolean","description":"Disable the color picker","default":"false","required":false},"size":{"type":"enum","description":"Size variant","default":"md","required":false,"values":["sm","md","lg"]},"showInput":{"type":"boolean","description":"Show the hex input field","default":"true","required":false}},"relations":[{"component":"Input","relationship":"sibling","note":"ColorPicker is a specialized input for colors"},{"component":"RadioGroup","relationship":"alternative","note":"Use RadioGroup for predefined color choices"},{"component":"Field","relationship":"parent","note":"ColorPicker uses Field internally for structure"}],"variants":[{"name":"Default","description":"Swatch opens the picker; the hex field accepts typing.","code":"<ColorPicker\n  label=\"Brand Color\"\n  defaultValue=\"#3b82f6\"\n/>"},{"name":"With Helper Text","description":"Supporting line says where the colour will be used.","code":"<ColorPicker\n  label=\"Primary Color\"\n  defaultValue=\"#10b981\"\n  helperText=\"This color will be used for buttons and links\"\n/>"},{"name":"Controlled","description":"The parent owns the value and sees every change.","code":"<ControlledColorPickerDemo />"},{"name":"Multiple Pickers","description":"A stacked set reads as one palette.","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '240px' }}>\n  <ColorPicker label=\"Primary\" defaultValue=\"#3b82f6\" />\n  <ColorPicker label=\"Success\" defaultValue=\"#22c55e\" />\n  <ColorPicker label=\"Warning\" defaultValue=\"#f59e0b\" />\n  <ColorPicker label=\"Danger\" defaultValue=\"#ef4444\" />\n</div>"},{"name":"Compact","description":"showInput={false} drops the hex field, leaving a swatch row.","code":"<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>\n  <ColorPicker defaultValue=\"#ef4444\" size=\"sm\" showInput={false} />\n  <ColorPicker defaultValue=\"#f59e0b\" size=\"sm\" showInput={false} />\n  <ColorPicker defaultValue=\"#22c55e\" size=\"sm\" showInput={false} />\n  <ColorPicker defaultValue=\"#3b82f6\" size=\"sm\" showInput={false} />\n</div>"},{"name":"Sizes","description":"Three swatch sizes: sm, md, lg.","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '240px' }}>\n  <ColorPicker label=\"Small\" defaultValue=\"#3b82f6\" size=\"sm\" />\n  <ColorPicker label=\"Medium (default)\" defaultValue=\"#3b82f6\" size=\"md\" />\n  <ColorPicker label=\"Large\" defaultValue=\"#3b82f6\" size=\"lg\" />\n</div>"},{"name":"Error State","description":"Red border on the hex field, and the reason below it.","code":"<ColorPicker\n  label=\"Brand Color\"\n  defaultValue=\"#7c3aed\"\n  error\n  helperText=\"This color fails contrast against the page background\"\n/>"},{"name":"Disabled","description":"Swatch will not open and the hex field will not accept typing.","code":"<ColorPicker\n  label=\"Locked Color\"\n  defaultValue=\"#64748b\"\n  helperText=\"This color cannot be changed\"\n  disabled\n/>"}],"contract":{"propsSummary":["value: string - controlled hex color (#RRGGBB)","defaultValue: string - initial color for uncontrolled usage","onChange: (color: string) => void - change handler","label: string - field label","helperText: string - helper text (preferred)","description: string - deprecated alias for helperText","error: boolean - error styling","disabled: boolean - disable interaction","size: sm|md|lg - size variant","showInput: boolean - show hex input field"],"a11yRules":["A11Y_LABEL_REQUIRED","A11Y_FOCUS_VISIBLE","A11Y_TARGET_SIZE_MIN"]},"ai":{"compositionPattern":"compound","subComponents":["Root","preload"]},"propsSummary":["label: string","value: string","defaultValue: string (default: #000000)","onChange: function","onValueChange: function","helperText: string","description: string","error: boolean (default: false)","disabled: boolean (default: false)","size: sm|md|lg (default: md)","showInput: boolean (default: true)"],"sourcePath":"src/components/ColorPicker/index.tsx","exportName":"ColorPicker","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:53.238Z"},"performance":{"bundleSize":8354,"rawSize":22904,"complexity":"moderate","budgetPercent":54,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"react-colorful","bytes":14089,"percent":62},{"path":"Input","bytes":3081,"percent":13},{"path":"src/recipes/popup.ts","bytes":2532,"percent":11},{"path":"ColorPicker (self)","bytes":2154,"percent":9},{"path":"ComponentDefaults","bytes":199,"percent":1},{"path":"src/utils/env.ts","bytes":93,"percent":0}]}},"Combobox":{"filePath":"src/components/Combobox/index.tsx","meta":{"name":"Combobox","description":"Filters a list of options as the user types.","category":"inputs","tags":["combobox","autocomplete","search","select","typeahead","form","multiselect"],"status":"stable"},"usage":{"when":["Lists too long to scan by eye","The user roughly knows the value they want","Autocomplete or typeahead","Multi-select from a searchable list"],"whenNot":["Under five options (use Select or RadioGroup)","Free-form text with no known options (use Input)","Short list nobody needs to search (use Select)","Actions rather than values (use Menu)"],"guidelines":["Placeholder names what is searchable","Set label so the field is announced","helperText for guidance, error for the failure reason","Override the built-in \"No results found\" with Combobox.Empty when you have better wording","Group related options with Combobox.Group in long lists","Filtering keeps wrapper composition, so groups and fragments survive","Keep option text short and searchable","multiple turns selections into removable chips"],"accessibility":["Arrow keys, Enter, and Escape all work","Typing filters the list in place","Correct ARIA combobox roles and attributes","Filtered result counts are announced","Chips can be removed from the keyboard"]},"props":{"multiple":{"type":"boolean","description":"Allow multiple selections with chips","default":"false","required":false},"value":{"type":"union","description":"Controlled selected value (string for single, string[] for multiple)","required":false},"defaultValue":{"type":"union","description":"Default selected value (uncontrolled)","required":false},"onValueChange":{"type":"union","description":"Called when selection changes","required":false},"onChange":{"type":"union","description":"Alias for onValueChange","required":false},"children":{"type":"node","description":"Combobox input and content","required":true},"open":{"type":"boolean","description":"Controlled open state of the dropdown","required":false},"defaultOpen":{"type":"boolean","description":"Initial open state for uncontrolled usage","default":"false","required":false},"onOpenChange":{"type":"function","description":"Called when dropdown open state changes","required":false},"required":{"type":"boolean","description":"","required":false},"name":{"type":"string","description":"","required":false},"placeholder":{"type":"string","description":"Placeholder text for the input","required":false},"autoHighlight":{"type":"boolean","description":"Auto-highlight first matching item while filtering","default":"true","required":false},"size":{"type":"enum","description":"Size variant","default":"\"md\"","required":false,"values":["sm","md","lg"]},"className":{"type":"string","description":"Wrapper class name","required":false},"label":{"type":"string","description":"Visible label text above the combobox","required":false},"helperText":{"type":"string","description":"Helper text shown below the combobox","required":false},"error":{"type":"union","description":"Show error styling. When a string is provided, it is displayed as an error message.","required":false},"disabled":{"type":"boolean","description":"Disable the combobox","default":"false","required":false},"autoComplete":{"type":"string","description":"","required":false},"form":{"type":"string","description":"","required":false},"inputRef":{"type":"union","description":"","required":false},"readOnly":{"type":"boolean","description":"","required":false}},"relations":[{"component":"Select","relationship":"alternative","note":"Use Select when search/filtering is not needed"},{"component":"Input","relationship":"sibling","note":"Use Input for free-form text entry"},{"component":"Listbox","relationship":"sibling","note":"Use Listbox for inline option lists"}],"variants":[{"name":"Default","description":"Type to narrow the list; unmatched queries show a no-results row.","code":"<StatefulCombobox placeholder=\"Select a fruit\">\n  <Combobox.Input />\n  <Combobox.Content>\n    <Combobox.Item value=\"apple\">Apple</Combobox.Item>\n    <Combobox.Item value=\"banana\">Banana</Combobox.Item>\n    <Combobox.Item value=\"orange\">Orange</Combobox.Item>\n    <Combobox.Item value=\"grape\">Grape</Combobox.Item>\n  </Combobox.Content>\n</StatefulCombobox>"},{"name":"Multiple Selection","description":"Each pick becomes a removable chip in the field.","code":"<StatefulCombobox multiple placeholder=\"Select fruits...\">\n  <Combobox.Input />\n  <Combobox.Content>\n    <Combobox.Item value=\"apple\">Apple</Combobox.Item>\n    <Combobox.Item value=\"banana\">Banana</Combobox.Item>\n    <Combobox.Item value=\"orange\">Orange</Combobox.Item>\n    <Combobox.Item value=\"grape\">Grape</Combobox.Item>\n    <Combobox.Item value=\"mango\">Mango</Combobox.Item>\n    <Combobox.Item value=\"kiwi\">Kiwi</Combobox.Item>\n  </Combobox.Content>\n</StatefulCombobox>"},{"name":"With Label and Helper Text","description":"Helper text tells the user the field is searchable.","code":"<StatefulCombobox\n  label=\"Assignee\"\n  placeholder=\"Search assignees...\"\n  helperText=\"Type to filter the list of available assignees.\"\n>\n  <Combobox.Input />\n  <Combobox.Content>\n    <Combobox.Empty>No matches</Combobox.Empty>\n    <Combobox.Item value=\"alice\">Alice Johnson</Combobox.Item>\n    <Combobox.Item value=\"bob\">Bob Chen</Combobox.Item>\n    <Combobox.Item value=\"carol\">Carol Smith</Combobox.Item>\n  </Combobox.Content>\n</StatefulCombobox>"},{"name":"Error State","description":"Red border, and the message replaces helper text.","code":"<Combobox\n  label=\"Reviewer\"\n  placeholder=\"Search reviewers...\"\n  error=\"Please select a reviewer\"\n>\n  <Combobox.Input />\n  <Combobox.Content>\n    <Combobox.Item value=\"alice\">Alice</Combobox.Item>\n  </Combobox.Content>\n</Combobox>"},{"name":"With Groups","description":"Headed sections stay intact while filtering.","code":"<StatefulCombobox placeholder=\"Search countries...\">\n  <Combobox.Input />\n  <Combobox.Content>\n    <>\n      <Combobox.Group>\n        <Combobox.GroupLabel>North America</Combobox.GroupLabel>\n        <Combobox.Item value=\"us\">United States</Combobox.Item>\n        <Combobox.Item value=\"ca\">Canada</Combobox.Item>\n        <Combobox.Item value=\"mx\">Mexico</Combobox.Item>\n      </Combobox.Group>\n      <Combobox.Group>\n        <Combobox.GroupLabel>Europe</Combobox.GroupLabel>\n        <Combobox.Item value=\"uk\">United Kingdom</Combobox.Item>\n        <Combobox.Item value=\"de\">Germany</Combobox.Item>\n        <Combobox.Item value=\"fr\">France</Combobox.Item>\n      </Combobox.Group>\n      <Combobox.Empty>No matching country</Combobox.Empty>\n    </>\n  </Combobox.Content>\n</StatefulCombobox>"},{"name":"With Empty State","description":"Combobox.Empty replaces the default no-results wording.","code":"<StatefulCombobox placeholder=\"Filter languages...\">\n  <Combobox.Input />\n  <Combobox.Content>\n    <Combobox.Empty>No language matches that search</Combobox.Empty>\n    <Combobox.Item value=\"js\">JavaScript</Combobox.Item>\n    <Combobox.Item value=\"ts\">TypeScript</Combobox.Item>\n    <Combobox.Item value=\"py\">Python</Combobox.Item>\n    <Combobox.Item value=\"rs\">Rust</Combobox.Item>\n    <Combobox.Item value=\"go\">Go</Combobox.Item>\n  </Combobox.Content>\n</StatefulCombobox>"},{"name":"Scrollable List","description":"Caps at four rows and half-shows the fifth as a scroll hint.","code":"<StatefulCombobox placeholder=\"Search languages...\">\n  <Combobox.Input />\n  <Combobox.Content>\n    <Combobox.Empty>No results found</Combobox.Empty>\n    <Combobox.Item value=\"js\">JavaScript</Combobox.Item>\n    <Combobox.Item value=\"ts\">TypeScript</Combobox.Item>\n    <Combobox.Item value=\"py\">Python</Combobox.Item>\n    <Combobox.Item value=\"rs\">Rust</Combobox.Item>\n    <Combobox.Item value=\"go\">Go</Combobox.Item>\n    <Combobox.Item value=\"rb\">Ruby</Combobox.Item>\n    <Combobox.Item value=\"java\">Java</Combobox.Item>\n    <Combobox.Item value=\"swift\">Swift</Combobox.Item>\n    <Combobox.Item value=\"kt\">Kotlin</Combobox.Item>\n    <Combobox.Item value=\"cpp\">C++</Combobox.Item>\n  </Combobox.Content>\n</StatefulCombobox>"},{"name":"Custom Max Visible Items","description":"maxVisibleItems raises the cap to six rows.","code":"<StatefulCombobox placeholder=\"Search cities...\">\n  <Combobox.Input />\n  <Combobox.Content maxVisibleItems={6}>\n    <Combobox.Empty>No results found</Combobox.Empty>\n    <Combobox.Item value=\"nyc\">New York</Combobox.Item>\n    <Combobox.Item value=\"lon\">London</Combobox.Item>\n    <Combobox.Item value=\"tok\">Tokyo</Combobox.Item>\n    <Combobox.Item value=\"par\">Paris</Combobox.Item>\n    <Combobox.Item value=\"syd\">Sydney</Combobox.Item>\n    <Combobox.Item value=\"ber\">Berlin</Combobox.Item>\n    <Combobox.Item value=\"tor\">Toronto</Combobox.Item>\n    <Combobox.Item value=\"sin\">Singapore</Combobox.Item>\n    <Combobox.Item value=\"dub\">Dubai</Combobox.Item>\n    <Combobox.Item value=\"sao\">São Paulo</Combobox.Item>\n  </Combobox.Content>\n</StatefulCombobox>"},{"name":"Disabled","description":"Dimmed and unfocusable.","code":"<Combobox disabled placeholder=\"Search...\">\n  <Combobox.Input />\n  <Combobox.Content>\n    <Combobox.Item value=\"1\">Option 1</Combobox.Item>\n  </Combobox.Content>\n</Combobox>"},{"name":"Explicit Trigger","description":"showTrigger={false} hands the open control to your own Combobox.Trigger.","code":"<StatefulCombobox placeholder=\"Search assignees...\">\n  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>\n    <Combobox.Input showTrigger={false} />\n    <Combobox.Trigger aria-label=\"Open assignee list\" />\n  </div>\n  <Combobox.Content>\n    <Combobox.Item value=\"alice\">Alice</Combobox.Item>\n    <Combobox.Item value=\"bob\">Bob</Combobox.Item>\n    <Combobox.Item value=\"carol\">Carol</Combobox.Item>\n  </Combobox.Content>\n</StatefulCombobox>"}],"contract":{"propsSummary":["value: string | string[] - controlled selected value","onValueChange: (value) => void - selection handler","onChange: (value) => void - alias for onValueChange","multiple: boolean - enable multi-select with chips","When multiple=true, value/defaultValue must be string[] (single mode uses string|null)","placeholder: string - input placeholder text","label: string - visible label text","helperText: string - helper text below field","error: boolean | string - error styling and message","disabled: boolean - disable combobox","size: sm|md|lg (default: md)","autoHighlight: boolean - auto-highlight first match","Combobox.Input showTrigger: boolean - hide built-in trigger when using Combobox.Trigger explicitly","maxVisibleItems: number - max visible options before scrolling (default 4)"],"a11yRules":["A11Y_COMBOBOX_KEYBOARD","A11Y_COMBOBOX_LABEL","A11Y_TARGET_SIZE_MIN"]},"ai":{"compositionPattern":"compound","subComponents":["Input","Trigger","Content","Item","ItemIndicator","Empty","Group","GroupLabel"],"requiredChildren":["Input","Content"],"commonPatterns":["<Combobox placeholder=\"Search...\"><Combobox.Input /><Combobox.Content><Combobox.Item value=\"opt1\">{label1}</Combobox.Item><Combobox.Item value=\"opt2\">{label2}</Combobox.Item></Combobox.Content></Combobox>","<Combobox multiple placeholder=\"Select items...\"><Combobox.Input /><Combobox.Content><Combobox.Item value=\"opt1\">{label1}</Combobox.Item><Combobox.Item value=\"opt2\">{label2}</Combobox.Item></Combobox.Content></Combobox>","<Combobox placeholder=\"Search...\"><Combobox.Input showTrigger={false} /><Combobox.Trigger aria-label=\"Open\" /><Combobox.Content>...</Combobox.Content></Combobox>"]},"propsSummary":["multiple: boolean (default: false)","value: union","defaultValue: union","onValueChange: union","onChange: union","children: node (required)","open: boolean","defaultOpen: boolean","onOpenChange: function","required: boolean","name: string","placeholder: string","autoHighlight: boolean (default: true)","size: sm|md|lg (default: md)","className: string","label: string","helperText: string","error: union","disabled: boolean"],"sourcePath":"src/components/Combobox/index.tsx","exportName":"Combobox","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:53.524Z"},"performance":{"bundleSize":4328,"rawSize":11755,"complexity":"lightweight","budgetPercent":28,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Combobox (self)","bytes":7720,"percent":66},{"path":"src/recipes/popup.ts","bytes":2627,"percent":22},{"path":"src/utils/aria.ts","bytes":436,"percent":4},{"path":"ComponentDefaults","bytes":199,"percent":2}]}},"Command":{"filePath":"src/components/Command/index.tsx","meta":{"name":"Command","description":"Filters a list of actions as the user types.","category":"navigation","tags":["command","palette","search","spotlight","quick-actions","cmdk"],"status":"stable"},"usage":{"when":["A keyboard shortcut that jumps anywhere","Action lists too long to scan","Inline lists that need filtering","Search across everything the app can do"],"whenNot":["A handful of actions (use Menu)","Picking a value for a form (use Select or Combobox)","Fixed navigation (use Sidebar or Tabs)"],"guidelines":["Wrap in Dialog for the summon-anywhere palette","Group by category once the list gets long","Always supply Command.Empty","Add keywords so aliases and synonyms match","Label rows with a verb"],"accessibility":["Uses combobox + listbox ARIA pattern","Keyboard navigation with ArrowUp/ArrowDown, Enter to select","Home/End jump to first/last item","aria-activedescendant tracks focused item"]},"props":{"children":{"type":"node","description":"Command.Input, Command.List, and other sub-components","required":true},"search":{"type":"string","description":"Controlled search value","required":false},"defaultSearch":{"type":"string","description":"Default search value (uncontrolled)","default":"","required":false},"onSearchChange":{"type":"function","description":"Called when search input changes","required":false},"filter":{"type":"function","description":"Custom filter function. Return 0 to hide, >0 to show.","required":false},"loop":{"type":"boolean","description":"Whether to loop keyboard navigation","default":"true","required":false},"hosted":{"type":"boolean","description":"The Command sits inside another surface (a Popover, a Dialog) that draws the frame, so it draws none of its own","default":"false","required":false}},"relations":[{"component":"Dialog","relationship":"sibling","note":"Compose inside Dialog for modal command palette"},{"component":"Listbox","relationship":"sibling","note":"Command uses Listbox-like keyboard navigation internally"},{"component":"Combobox","relationship":"alternative","note":"Use Combobox for form field selection with search"}],"variants":[{"name":"Default","description":"Search field over a flat list.","code":"<div style={{ maxWidth: '400px', width: '100%' }}>\n  <Command>\n    <Command.Input placeholder=\"Type a command...\" />\n    <Command.List>\n      <Command.Item onItemSelect={() => {}}>Open File</Command.Item>\n      <Command.Item onItemSelect={() => {}}>Save Document</Command.Item>\n      <Command.Item onItemSelect={() => {}}>Print</Command.Item>\n      <Command.Empty>No results found.</Command.Empty>\n    </Command.List>\n  </Command>\n</div>"},{"name":"Dialog Command Palette","description":"The same list summoned over the page.","code":"<Dialog>\n  <Dialog.Trigger asChild>\n    <Button variant=\"soft\">Open Command Palette</Button>\n  </Dialog.Trigger>\n  <Dialog.Content width=\"sm\">\n    <Command>\n      <Command.Input placeholder=\"Search commands...\" />\n      <Command.List>\n        <Command.Group heading=\"Actions\">\n          <Command.Item onItemSelect={() => {}}>New File</Command.Item>\n          <Command.Item onItemSelect={() => {}}>Open Recent</Command.Item>\n        </Command.Group>\n        <Command.Separator />\n        <Command.Group heading=\"Settings\">\n          <Command.Item onItemSelect={() => {}}>Preferences</Command.Item>\n          <Command.Item onItemSelect={() => {}}>Keyboard Shortcuts</Command.Item>\n        </Command.Group>\n        <Command.Empty>No results found.</Command.Empty>\n      </Command.List>\n    </Command>\n  </Dialog.Content>\n</Dialog>"},{"name":"With Groups","description":"Category labels survive filtering.","code":"<div style={{ maxWidth: '400px', width: '100%' }}>\n  <Command>\n    <Command.Input placeholder=\"Search...\" />\n    <Command.List>\n      <Command.Group heading=\"Suggestions\">\n        <Command.Item onItemSelect={() => {}}>Calendar</Command.Item>\n        <Command.Item onItemSelect={() => {}}>Calculator</Command.Item>\n      </Command.Group>\n      <Command.Separator />\n      <Command.Group heading=\"Settings\">\n        <Command.Item onItemSelect={() => {}}>Profile</Command.Item>\n        <Command.Item onItemSelect={() => {}}>Billing</Command.Item>\n        <Command.Item disabled onItemSelect={() => {}}>\n          Team (coming soon)\n        </Command.Item>\n      </Command.Group>\n      <Command.Empty>No results found.</Command.Empty>\n    </Command.List>\n  </Command>\n</div>"},{"name":"With Icons","description":"Leading glyphs speed up scanning.","code":"<div style={{ maxWidth: '400px', width: '100%' }}>\n  <Command>\n    <Command.Input placeholder=\"What do you need?\" />\n    <Command.List>\n      <Command.Item onItemSelect={() => {}}>\n        <span style={{ marginRight: '0.5rem', fontSize: '1rem' }}>+</span> New Document\n      </Command.Item>\n      <Command.Item onItemSelect={() => {}}>\n        <span style={{ marginRight: '0.5rem', fontSize: '1rem' }}>{'>'}</span> Open Folder\n      </Command.Item>\n      <Command.Item onItemSelect={() => {}}>\n        <span style={{ marginRight: '0.5rem', fontSize: '1rem' }}>?</span> Search\n      </Command.Item>\n      <Command.Empty>No results found.</Command.Empty>\n    </Command.List>\n  </Command>\n</div>"}],"contract":{"propsSummary":["search: string - controlled search value","onSearchChange: (search) => void - search change handler","filter: (value, search, keywords?) => number - custom filter","loop: boolean - loop keyboard navigation (default: true)","Command.Item value: string - filter match value","Command.Item keywords: string[] - extra filter terms","Command.Item onItemSelect: (value, event) => void - selection handler"],"a11yRules":["A11Y_COMBOBOX_ROLE","A11Y_LISTBOX_ROLE","A11Y_ACTIVE_DESCENDANT"]},"ai":{"compositionPattern":"compound","subComponents":["Input","List","Item","Group","Empty","Separator"],"requiredChildren":["Input","List"],"commonPatterns":["<Dialog><Dialog.Trigger><Button>Open Palette</Button></Dialog.Trigger><Dialog.Content size=\"sm\"><Command><Command.Input placeholder=\"Search...\" /><Command.List><Command.Group heading=\"Actions\"><Command.Item onItemSelect={() => {}}>Action 1</Command.Item></Command.Group><Command.Empty>No results.</Command.Empty></Command.List></Command></Dialog.Content></Dialog>"]},"propsSummary":["children: node (required)","search: string","defaultSearch: string (default: )","onSearchChange: function","filter: function","loop: boolean (default: true)"],"sourcePath":"src/components/Command/index.tsx","exportName":"Command","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:53.723Z"},"performance":{"bundleSize":2650,"rawSize":6138,"complexity":"lightweight","budgetPercent":17,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Command (self)","bytes":5419,"percent":88}]}},"ComponentDefaults":{"filePath":"src/components/ComponentDefaults/index.tsx","meta":{"name":"ComponentDefaults","description":"Utility provider that sets the default control size for every control below it.","category":"utilities","tags":["provider","defaults","size","utility"],"status":"stable"},"usage":{"when":["A region needs every control at one size (dense table toolbars, compact sidebars)","A ThemeProvider subtree should default to sm or lg controls"],"whenNot":["Sizing a single control (pass its size prop)","Changing spacing or typography (use tokens, not control size)"],"guidelines":["Renders no chrome: it only supplies context read through useResolvedControlSize","Nest providers to override the size for a smaller region","An explicit size prop on a control always wins over the provider default","ThemeProvider componentDefaults wires this provider for you at the root"],"accessibility":["sm controls still meet the kit's minimum target size through the action recipe"]},"props":{"children":{"type":"node","description":"Subtree that inherits the defaults","required":true},"controlSize":{"type":"enum","description":"Default size for controls that do not pass their own size prop","required":false,"values":["sm","md","lg"]},"value":{"type":"object","description":"Full defaults object; explicit controlSize wins over value.controlSize","required":false}},"relations":[{"component":"Theme","relationship":"parent","note":"ThemeProvider accepts componentDefaults and mounts this provider"},{"component":"Button","relationship":"child","note":"Controls resolve their size through useResolvedControlSize"}],"variants":[{"name":"Dense Toolbar","description":"Every control in the toolbar defaults to sm without repeating the prop.","code":"<ComponentDefaultsProvider controlSize=\"sm\">\n  <div style={{ display: 'flex', gap: '8px' }}>\n    <Button variant=\"soft\">Filter</Button>\n    <Button variant=\"ghost\">Export</Button>\n  </div>\n</ComponentDefaultsProvider>"},{"name":"Nested Override","description":"A nested provider narrows the default for one region.","code":"<ComponentDefaultsProvider controlSize=\"lg\">\n  <Button>Large by default</Button>\n  <ComponentDefaultsProvider controlSize=\"sm\">\n    <Button>Small in this region</Button>\n  </ComponentDefaultsProvider>\n</ComponentDefaultsProvider>"}],"contract":{"propsSummary":["controlSize: sm|md|lg - default size for controls below the provider","value: { controlSize } - defaults object, explicit controlSize wins","useComponentDefaults() - read the merged defaults","useResolvedControlSize(explicit, fallback) - explicit > provider > fallback (md)"],"a11yRules":[]},"propsSummary":["children: node (required)","controlSize: sm|md|lg","value: { controlSize?: sm|md|lg }"],"sourcePath":"src/components/ComponentDefaults/index.tsx","exportName":"ComponentDefaultsProvider","provenance":{"source":"manual","verified":false,"frameworkSupport":"native","extractedAt":"2026-09-03T00:00:00.000Z"},"performance":{"bundleSize":296,"rawSize":537,"complexity":"lightweight","budgetPercent":2,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"ComponentDefaults (self)","bytes":430,"percent":80}]}},"ConversationList":{"filePath":"src/components/ConversationList/index.tsx","meta":{"name":"ConversationList","description":"Stacks chat messages in a scroller that follows new arrivals.","category":"ai","tags":["conversation","chat","messages","scroll","ai","list"],"status":"stable"},"usage":{"when":["Chat interfaces holding many messages","Transcripts that should follow new arrivals","Paging back through older message history","Runs of messages grouped day by day"],"whenNot":["Plain item lists with no chat context (use List)","A single message (use Message directly)","Layouts that never scroll"],"guidelines":["autoScroll=\"smart\" follows only when the reader is already near the bottom","showAvatars={false} drops the avatar gutter and the inset that goes with it","Chrome stays on neutral surfaces; reserve accent for actions and semantic state","Implement onScrollTop to page in older messages","Your onScroll handler composes with the internal auto-scroll and history logic","Give new conversations an emptyState","Put a DateSeparator between messages from different days"],"accessibility":["Uses proper ARIA roles for separators","Typing indicator uses a status role with an aria-label","Smooth scroll respects reduced motion preferences","Keyboard navigation works within scrollable container"]},"props":{"children":{"type":"node","description":"Message components","required":true},"showAvatars":{"type":"boolean","description":"Show avatars for messages and typing indicators in this conversation","default":"true","required":false},"autoScroll":{"type":"union","description":"Auto-scroll behavior: true (always), false (never), or \"smart\" (only when near bottom)","default":"smart","required":false},"onScrollTop":{"type":"function","description":"Callback when user scrolls to top (for loading history). Receives the scroll event.","required":false},"loadingHistory":{"type":"boolean","description":"Show loading spinner at top when loading history","default":"false","required":false},"emptyState":{"type":"node","description":"Content to show when conversation is empty","required":false},"scrollTopThreshold":{"type":"number","description":"Pixels from top to trigger onScrollTop","default":"50","required":false},"scrollBottomThreshold":{"type":"number","description":"Pixels from bottom for smart auto-scroll","default":"100","required":false}},"relations":[{"component":"Message","relationship":"child","note":"ConversationList contains Message components"},{"component":"ThinkingIndicator","relationship":"child","note":"Show ThinkingIndicator at bottom while awaiting response"},{"component":"Prompt","relationship":"sibling","note":"Typically paired with Prompt for input"}],"variants":[{"name":"Basic","description":"Three turns stacked in reading order.","code":"<ConversationList>\n  <Message role=\"user\">\n    <Message.Content>Hello!</Message.Content>\n  </Message>\n  <Message role=\"assistant\">\n    <Message.Content>Hi there! How can I help you today?</Message.Content>\n  </Message>\n  <Message role=\"user\">\n    <Message.Content>Can you explain React hooks?</Message.Content>\n  </Message>\n</ConversationList>"},{"name":"With Date Separators","description":"A labelled rule marks where one day ends.","code":"<ConversationList>\n  <ConversationList.DateSeparator date={new Date(Date.now() - 86400000)} />\n  <Message role=\"user\">\n    <Message.Content>A message from yesterday</Message.Content>\n  </Message>\n  <ConversationList.DateSeparator date={new Date()} />\n  <Message role=\"assistant\">\n    <Message.Content>And a message from today!</Message.Content>\n  </Message>\n</ConversationList>"},{"name":"Without Avatars","description":"Turns sit flush when nothing needs an avatar gutter.","code":"<ConversationList showAvatars={false}>\n  <Message role=\"user\">\n    <Message.Content>Hello!</Message.Content>\n  </Message>\n  <Message role=\"assistant\">\n    <Message.Content>How can I help?</Message.Content>\n  </Message>\n</ConversationList>"},{"name":"With Typing Indicator","description":"Animated dots hold the reply's place before it lands.","code":"<ConversationList>\n  <Message role=\"user\">\n    <Message.Content>What is TypeScript?</Message.Content>\n  </Message>\n  <ConversationList.TypingIndicator name=\"Assistant\" />\n</ConversationList>"},{"name":"Loading History","description":"A spinner pins to the top while older turns load.","code":"<ConversationList loadingHistory>\n  <Message role=\"user\">\n    <Message.Content>This is the latest message</Message.Content>\n  </Message>\n</ConversationList>"},{"name":"Empty","description":"A fresh conversation shows its placeholder instead of blank space.","code":"<ConversationList\n  emptyState={\n    <EmptyState>\n      <EmptyState.Title>No messages yet</EmptyState.Title>\n      <EmptyState.Description>\n        Ask a question to get started.\n      </EmptyState.Description>\n    </EmptyState>\n  }\n/>"}],"contract":{"propsSummary":["children: ReactNode - Message components","showAvatars: boolean - show message and typing-indicator avatars (default: true)","autoScroll: boolean | \"smart\" - scroll behavior (default: \"smart\")","onScrollTop: (event?) => void - callback for loading history (receives scroll event)","loadingHistory: boolean - show history loading spinner","emptyState: ReactNode - empty conversation content"],"a11yRules":["A11Y_ARIA_ROLES","A11Y_MOTION_PREFERENCE"]},"propsSummary":["children: node (required)","showAvatars: boolean (default: true)","autoScroll: union (default: smart)","onScrollTop: function","loadingHistory: boolean (default: false)","emptyState: node","scrollTopThreshold: number (default: 50)","scrollBottomThreshold: number (default: 100)"],"sourcePath":"src/components/ConversationList/index.tsx","exportName":"ConversationList","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:53.889Z"},"ai":{"subComponents":["DateSeparator","TypingIndicator"],"compositionPattern":"compound"},"performance":{"bundleSize":2122,"rawSize":5480,"complexity":"lightweight","budgetPercent":14,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"ConversationList (self)","bytes":2728,"percent":50},{"path":"Loading","bytes":2026,"percent":37}]}},"DataTable":{"filePath":"src/components/DataTable/DataTable.fragment.tsx","meta":{"name":"DataTable","description":"Interactive table — sort, select, expand, and click through rows of data.","category":"display","status":"stable","tags":["table","data","grid","list","sorting","tanstack"],"dependencies":[{"name":"@tanstack/react-table","version":">=8.0.0","reason":"Optional — powers sorting, selection, and expansion; without it DataTable renders a static, non-interactive table."}]},"guidance":{"when":["Rows need sorting, selection, or expansion","Users scan and compare several attributes per row","A row click opens the record behind it"],"whenNot":["The data is read-only and static (use Table)","Each item is a single line (use List)","Narrow screens where a card list reads better"],"dont":[{"reason":"Do not use DataTable for a simple static comparison.","bad":"<DataTable />","good":"<Table aria-label=\"Plan comparison\">\n            <Table.Head>\n              <Table.Row>\n                <Table.HeaderCell>Plan</Table.HeaderCell>\n                <Table.HeaderCell>Price</Table.HeaderCell>\n              </Table.Row>\n            </Table.Head>\n            <Table.Body>\n              <Table.Row>\n                <Table.Cell>Starter</Table.Cell>\n                <Table.Cell>$0</Table.Cell>\n              </Table.Row>\n            </Table.Body>\n          </Table>"}],"guidelines":["Cap visible columns near 5–7; push the rest behind a row click","Right-align numbers, left-align text","Always set emptyMessage — a bare grid reads as broken","Clickable rows need getRowProps for a role and an accessible name","Reach for density, not the deprecated size prop"],"accessibility":["Headers stay real th elements with scope","Sortable headers are buttons — reachable by keyboard","Selection checkboxes carry their own labels","Expand toggles report aria-expanded"]},"usage":{"when":["Rows need sorting, selection, or expansion","Users scan and compare several attributes per row","A row click opens the record behind it"],"whenNot":["The data is read-only and static (use Table)","Each item is a single line (use List)","Narrow screens where a card list reads better"],"dont":[{"reason":"Do not use DataTable for a simple static comparison.","bad":"<DataTable />","good":"<Table aria-label=\"Plan comparison\">\n            <Table.Head>\n              <Table.Row>\n                <Table.HeaderCell>Plan</Table.HeaderCell>\n                <Table.HeaderCell>Price</Table.HeaderCell>\n              </Table.Row>\n            </Table.Head>\n            <Table.Body>\n              <Table.Row>\n                <Table.Cell>Starter</Table.Cell>\n                <Table.Cell>$0</Table.Cell>\n              </Table.Row>\n            </Table.Body>\n          </Table>"}],"guidelines":["Cap visible columns near 5–7; push the rest behind a row click","Right-align numbers, left-align text","Always set emptyMessage — a bare grid reads as broken","Clickable rows need getRowProps for a role and an accessible name","Reach for density, not the deprecated size prop"],"accessibility":["Headers stay real th elements with scope","Sortable headers are buttons — reachable by keyboard","Selection checkboxes carry their own labels","Expand toggles report aria-expanded"]},"props":{"bordered":{"type":"boolean","description":"Wrap table in a bordered container","required":false},"caption":{"type":"string","description":"Visible caption for the table (recommended for accessibility)","required":false},"captionHidden":{"type":"boolean","description":"Hide the caption visually but keep it for screen readers","required":false},"columns":{"type":"array","description":"Column definitions","required":true},"data":{"type":"array","description":"Data array","required":true},"density":{"type":"enum","description":"Canonical row density. `condensed` is a deprecated alias for `compact`.","required":false,"values":["compact","regular","relaxed","condensed"]},"emptyMessage":{"type":"string","description":"Empty state message (plain text). Ignored if `emptyState` is set.","required":false},"emptyState":{"type":"node","description":"Rich empty-state slot (icon + copy + CTA) rendered when there's no data.","required":false},"expanded":{"type":"union","description":"Controlled expanded state","required":false},"getRowId":{"type":"function","description":"Unique key extractor for each row","required":false},"getRowProps":{"type":"function","description":"Props applied to each rendered data row. Use this for row-level ARIA labels, roles, and data attributes.","required":false},"getSubRows":{"type":"function","description":"Extract sub-rows from a row for expandable tree tables","required":false},"hideHeader":{"type":"boolean","description":"Hide the column header row (e.g. stacked per-group tables share one).","required":false},"loading":{"type":"boolean","description":"When true, render skeleton placeholder rows instead of data.","required":false},"onExpandedChange":{"type":"function","description":"Expanded state change handler","required":false},"onRowClick":{"type":"function","description":"Row click handler","required":false},"onRowSelectionChange":{"type":"function","description":"Selection change handler","required":false},"onSortingChange":{"type":"function","description":"Sorting change handler","required":false},"rowSelection":{"type":"object","description":"Controlled selection state","required":false},"selectable":{"type":"boolean","description":"Enable row selection","required":false},"showCheckbox":{"type":"boolean","description":"Show checkbox column for row selection","required":false},"size":{"type":"enum","description":"","required":false,"values":["sm","md"]},"skeletonRows":{"type":"number","description":"Number of skeleton rows to show while loading (default 6).","required":false},"sortable":{"type":"boolean","description":"Enable sorting","required":false},"sorting":{"type":"array","description":"Controlled sorting state","required":false},"striped":{"type":"boolean","description":"Show alternating row backgrounds","required":false},"wrapperClassName":{"type":"string","description":"Additional class name for the outer wrapper div","required":false},"wrapperProps":{"type":"object","description":"Props forwarded to the outer wrapper div","required":false}},"relations":[{"component":"Table","relationship":"alternative","note":"Use Table for simple semantic HTML tables"},{"component":"EmptyState","relationship":"sibling","note":"Use EmptyState for empty table states"},{"component":"Badge","relationship":"sibling","note":"Use Badge for status columns"},{"component":"Menu","relationship":"sibling","note":"Use Menu for filter dropdowns"},{"component":"Checkbox","relationship":"sibling","note":"Built-in checkbox selection via showCheckbox"}],"variants":[{"name":"Default","description":"Columns and data are the only required props; everything else is opt-in.","code":"<DataTable\n          columns={[\n            { accessorKey: \"name\", header: \"Name\" },\n            { accessorKey: \"status\", header: \"Status\" },\n          ]}\n          data={[\n            { name: \"Ada Lovelace\", status: \"Active\" },\n            { name: \"Grace Hopper\", status: \"Pending\" },\n          ]}\n          aria-label=\"Team members\"\n        />","canonical":true},{"name":"Loading","description":"Skeleton rows hold the table's height so the page never jumps.","code":"<DataTable\n          columns={[\n            { accessorKey: \"name\", header: \"Name\" },\n            { accessorKey: \"status\", header: \"Status\" },\n          ]}\n          data={[]}\n          loading\n          skeletonRows={3}\n          aria-label=\"Loading team members\"\n        />"},{"name":"Rich Cells","description":"A cell renderer drops any component — avatar, badge — straight into the column.","code":"<DataTable\n          columns={[\n            {\n              accessorKey: \"name\",\n              header: \"Name\",\n              cell: ({ row }) => (\n                <Stack direction=\"row\" gap=\"sm\" align=\"center\">\n                  <Avatar name={row.original.name} size=\"sm\" />\n                  <span>{row.original.name}</span>\n                </Stack>\n              ),\n            },\n            { accessorKey: \"role\", header: \"Role\" },\n            {\n              accessorKey: \"status\",\n              header: \"Status\",\n              cell: ({ row }) => (\n                <Badge tone={row.original.status === \"Active\" ? \"success\" : \"warning\"}>\n                  {row.original.status}\n                </Badge>\n              ),\n            },\n          ]}\n          data={[\n            { name: \"Ada Lovelace\", role: \"Engineer\", status: \"Active\" },\n            { name: \"Grace Hopper\", role: \"Admiral\", status: \"Pending\" },\n          ]}\n          bordered\n          aria-label=\"Team members\"\n        />"},{"name":"Sortable","description":"Click a header to sort; click it again to reverse.","code":"<DataTable\n          columns={[\n            { accessorKey: \"name\", header: \"Name\" },\n            { accessorKey: \"amount\", header: \"Amount\" },\n          ]}\n          data={[\n            { name: \"Subscription\", amount: \"$24.00\" },\n            { name: \"Usage\", amount: \"$12.00\" },\n          ]}\n          sortable\n          bordered\n          caption=\"Recent transactions\"\n          captionHidden\n          aria-label=\"Transactions\"\n        />"},{"name":"Checkbox Selection","description":"The header checkbox toggles every row at once.","code":"<DataTable\n          columns={[\n            { accessorKey: \"name\", header: \"Name\" },\n            { accessorKey: \"status\", header: \"Status\" },\n          ]}\n          data={[\n            { id: \"ada\", name: \"Ada Lovelace\", status: \"Active\" },\n            { id: \"grace\", name: \"Grace Hopper\", status: \"Pending\" },\n          ]}\n          getRowId={(row) => row.id}\n          selectable\n          showCheckbox\n          bordered\n          aria-label=\"Team members\"\n        />"},{"name":"Expandable Rows","description":"Children fold away under their parent, like a file tree.","code":"<DataTable\n          columns={[\n            { accessorKey: \"name\", header: \"Name\" },\n            { accessorKey: \"type\", header: \"Type\" },\n          ]}\n          data={[\n            {\n              id: \"src\",\n              name: \"src\",\n              type: \"folder\",\n              subRows: [{ id: \"components\", name: \"components\", type: \"folder\", subRows: [] }],\n            },\n            { id: \"package\", name: \"package.json\", type: \"file\", subRows: [] },\n          ]}\n          getRowId={(row) => row.id}\n          getSubRows={(row) => row.subRows}\n          bordered\n          density=\"compact\"\n          aria-label=\"File tree\"\n        />"},{"name":"With Filters","description":"Filter controls sit outside the table; you own the filtering.","code":"<Stack gap=\"sm\">\n          <Input aria-label=\"Search users\" placeholder=\"Search...\" withFieldWrapper={false} />\n          <DataTable\n            columns={[\n              { accessorKey: \"name\", header: \"Name\" },\n              { accessorKey: \"status\", header: \"Status\" },\n            ]}\n            data={[{ name: \"Ada Lovelace\", status: \"Active\" }]}\n            sortable\n            bordered\n            emptyMessage=\"No users match the current filters\"\n            aria-label=\"Filtered team members\"\n          />\n        </Stack>"},{"name":"Clickable Rows","description":"Mouse or keyboard opens the row; getRowProps supplies its name.","code":"<DataTable\n          columns={[\n            { accessorKey: \"method\", header: \"Method\" },\n            { accessorKey: \"path\", header: \"Path\" },\n          ]}\n          data={[{ method: \"GET\", path: \"/v1/components\" }]}\n          getRowProps={(row) => ({\n            role: \"button\",\n            \"aria-label\": `Open ${row.method} ${row.path}`,\n          })}\n          onRowClick={() => undefined}\n          density=\"compact\"\n          aria-label=\"API endpoints\"\n        />"},{"name":"Striped","description":"Row tint alternates so tightly packed rows stay readable.","code":"<DataTable\n          columns={[\n            { accessorKey: \"method\", header: \"Method\" },\n            { accessorKey: \"path\", header: \"Path\" },\n          ]}\n          data={[\n            { method: \"GET\", path: \"/v1/components\" },\n            { method: \"POST\", path: \"/v1/fragments\" },\n          ]}\n          striped\n          density=\"compact\"\n          sortable\n          aria-label=\"API endpoints\"\n        />"},{"name":"Empty State","description":"emptyMessage replaces the rows and keeps the headers in place.","code":"<DataTable\n          columns={[\n            { accessorKey: \"name\", header: \"Name\" },\n            { accessorKey: \"status\", header: \"Status\" },\n          ]}\n          data={[]}\n          emptyMessage=\"No users match your search criteria\"\n          aria-label=\"Search results\"\n        />"},{"name":"Long Cell Content","description":"Oversized values scroll inside the table instead of stretching the page.","code":"<DataTable\n          columns={[\n            { accessorKey: \"name\", header: \"Administrator\" },\n            { accessorKey: \"status\", header: \"Recovery policy\" },\n          ]}\n          data={[\n            {\n              name: \"A very long localized administrator identity that remains distinguishable\",\n              status:\n                \"Pending confirmation of the detailed workspace recovery policy and notification workflow\",\n            },\n          ]}\n          bordered\n          aria-label=\"Long localized team member data\"\n        />"}],"ai":{"compositionPattern":"simple","subComponents":["Root","Columns","preload"],"commonPatterns":["<DataTable columns={createColumns([{key:\"name\",header:\"Name\"},{key:\"status\",header:\"Status\"}])} data={[{name:\"Item 1\",status:\"Active\"}]} />"]},"contract":{"propsSummary":["columns: ColumnDef[] - column definitions","data: T[] - row data array","sortable: boolean - enable sorting","selectable: boolean - enable row selection","showCheckbox: boolean - add checkbox column","getSubRows: (row) => T[] - enable expandable rows","onRowClick: (row, event) => void - row activation handler with event access","getRowProps: (row) => HTMLAttributes<HTMLTableRowElement> - row-level ARIA, role, data, class, and event props","density: compact|regular|relaxed - row density (size is deprecated)","striped: boolean - alternating row backgrounds","bordered: boolean - bordered container","wrapperClassName / wrapperProps - style and configure the outer wrapper div"],"a11yRules":["A11Y_TABLE_HEADERS","A11Y_TABLE_SORT"]},"matrix":{"axes":{"size":"auto","theme":["light","dark"]},"forced":["loading","empty","focus"],"worstCase":{"data":"Long localized cell values and enough rows to require horizontal and vertical overflow handling"}},"preview":{"providers":[],"dynamicRegions":[]},"provenance":{"source":"extracted","verified":true},"sourcePath":"src/components/DataTable/index.tsx","exportName":"DataTable","performance":{"bundleSize":6263,"rawSize":17910,"complexity":"moderate","budgetPercent":41,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"DataTable (self)","bytes":11556,"percent":65},{"path":"Checkbox","bytes":2850,"percent":16},{"path":"src/recipes/table-chrome.ts","bytes":2782,"percent":16},{"path":"src/utils/env.ts","bytes":93,"percent":1}]}},"DatePicker":{"filePath":"src/components/DatePicker/index.tsx","meta":{"name":"DatePicker","description":"Selects a date or date range from a calendar.","category":"inputs","tags":["date","picker","calendar","range","form","input"],"status":"stable","dependencies":[{"name":"react-day-picker","version":">=9.0.0","reason":"Optional — renders the calendar popup; the trigger and form field work without it."}]},"usage":{"when":["A date the user picks off a calendar","A start and end date together","Filtering by date"],"whenNot":["Time on its own (use a dedicated TimePicker)","A handful of known dates (use Select)","Typed date entry (use Input with a date mask)"],"guidelines":["Pair range mode with numberOfMonths={2} so both ends are visible","size=\"sm\" lines the trigger up with other dense toolbar controls","Offer presets for the common ranges: Today, Last 7 days, Last 30 days","disabledDates blocks past or unavailable days before the user tries","Placeholder names the date, not the action","DatePicker.Trigger defaults to type=\"button\", so it is safe inside a form"],"accessibility":["The calendar grid is fully keyboard navigable","Arrow keys move between days","Escape closes the calendar","Focus returns to the trigger on close"]},"props":{"children":{"type":"node","description":"DatePicker trigger and content","required":true},"className":{"type":"string","description":"Wrapper class name","required":false},"mode":{"type":"enum","description":"Selection mode","default":"single","required":false,"values":["single","range"]},"selected":{"type":"object","description":"Controlled date (single mode). Type: Date | null","required":false},"selectedRange":{"type":"object","description":"Controlled range (range mode). Type: DateRange | null","required":false},"onSelect":{"type":"function","description":"Called when a single date is selected","required":false},"onChange":{"type":"function","description":"Alias for onSelect (consistent with Input/Select onChange convention)","required":false},"onRangeSelect":{"type":"function","description":"Called when a date range is selected","required":false},"numberOfMonths":{"type":"number","description":"Number of months displayed side-by-side","default":"1","required":false},"disabled":{"type":"boolean","description":"Disable the picker","default":"false","required":false},"size":{"type":"enum","description":"Trigger size variant","default":"\"md\"","required":false,"values":["sm","md","lg"]},"disabledDates":{"type":"union","description":"Dates to disable (react-day-picker Matcher | Matcher[])","required":false},"placeholder":{"type":"string","description":"Trigger placeholder text","required":false},"locale":{"type":"object","description":"date-fns locale for i18n","required":false},"fixedWeeks":{"type":"boolean","description":"Always show 6 rows","default":"false","required":false},"formatDate":{"type":"function","description":"Custom trigger date formatter","required":false},"formatRange":{"type":"function","description":"Custom trigger range formatter","required":false},"open":{"type":"boolean","description":"Controlled popover open state","required":false},"onOpenChange":{"type":"function","description":"Popover open state change callback","required":false},"name":{"type":"string","description":"Hidden input name for forms","required":false},"label":{"type":"string","description":"Visible label text above the date picker","required":false},"helperText":{"type":"string","description":"Helper text shown below the date picker","required":false},"error":{"type":"union","description":"Show error styling. When a string is provided, it is displayed as an error message.","required":false}},"relations":[{"component":"Select","relationship":"alternative","note":"Use Select for choosing from a list of options"},{"component":"Input","relationship":"sibling","note":"Use Input for free-form text date entry"},{"component":"Popover","relationship":"composition","note":"DatePicker uses Popover for the calendar dropdown"}],"variants":[{"name":"Default","description":"Trigger opens one month; today is outlined.","code":"<StatefulDatePicker placeholder=\"Pick a date\">\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</StatefulDatePicker>"},{"name":"Small Trigger","description":"Matches the height of other sm toolbar controls.","code":"<StatefulDatePicker size=\"sm\" placeholder=\"Last scanned\">\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</StatefulDatePicker>"},{"name":"Date Range","description":"Two months side by side so both ends of the range are visible.","code":"<StatefulRangePicker placeholder=\"Select date range\" numberOfMonths={2}>\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</StatefulRangePicker>"},{"name":"Multi-Month","description":"Three months at once, for dates far from today.","code":"<StatefulDatePicker placeholder=\"Pick a date\" numberOfMonths={3}>\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</StatefulDatePicker>"},{"name":"Disabled Dates","description":"Everything before today is greyed out and unclickable.","code":"<StatefulDatePicker\n  placeholder=\"Select a future date\"\n  disabledDates={{ before: new Date() }}\n>\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</StatefulDatePicker>"},{"name":"With Presets","description":"Shortcut buttons beside the calendar skip the common ranges.","code":"<StatefulRangePicker placeholder=\"Select date range\" numberOfMonths={2}>\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <div style={{ display: 'flex', gap: '1rem' }}>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', minWidth: '8rem' }}>\n        <DatePicker.Preset range={{ from: today, to: today }}>Today</DatePicker.Preset>\n        <DatePicker.Preset range={{ from: subDays(today, 7), to: today }}>Last 7 days</DatePicker.Preset>\n        <DatePicker.Preset range={{ from: subDays(today, 30), to: today }}>Last 30 days</DatePicker.Preset>\n        <DatePicker.Preset range={{ from: subDays(today, 90), to: today }}>Last 90 days</DatePicker.Preset>\n      </div>\n      <DatePicker.Calendar />\n    </div>\n  </DatePicker.Content>\n</StatefulRangePicker>"},{"name":"With Label and Helper Text","description":"Label above the trigger, supporting text below it.","code":"<StatefulDatePicker\n  label=\"Renewal date\"\n  placeholder=\"Pick a date\"\n  helperText=\"Billing restarts on this day each month.\"\n>\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</StatefulDatePicker>"},{"name":"Error State","description":"Red border on the trigger, and the reason below it.","code":"<DatePicker\n  label=\"Start Date\"\n  placeholder=\"Pick a date\"\n  error=\"Please select a start date\"\n>\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</DatePicker>"},{"name":"Disabled","description":"Dimmed; the calendar will not open.","code":"<StatefulDatePicker placeholder=\"Pick a date\" disabled>\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</StatefulDatePicker>"}],"contract":{"propsSummary":["mode: \"single\" | \"range\" - selection mode","selected: Date - controlled date (single)","selectedRange: DateRange - controlled range","onSelect: (date) => void - single selection handler","onRangeSelect: (range) => void - range selection handler","numberOfMonths: number - months visible (default 1)","size: \"sm\" | \"md\" | \"lg\" - trigger size variant (default md)","label: string - visible label text","helperText: string - helper text below field","error: boolean | string - error styling and message","disabled: boolean - disable picker","disabledDates: Matcher - dates to disable","DatePicker.Trigger: button props supported (type defaults to \"button\")"],"a11yRules":["A11Y_DATEPICKER_KEYBOARD","A11Y_DATEPICKER_LABEL"]},"ai":{"compositionPattern":"compound","subComponents":["Trigger","Content","Calendar","Preset","preload"],"requiredChildren":["Trigger","Content"],"commonPatterns":["<DatePicker size=\"sm\" selected={date} onSelect={setDate}><DatePicker.Trigger placeholder=\"Pick a date\" /><DatePicker.Content><DatePicker.Calendar /></DatePicker.Content></DatePicker>","<DatePicker selected={date} onSelect={setDate}><DatePicker.Trigger placeholder=\"Pick a date\" /><DatePicker.Content><DatePicker.Calendar /></DatePicker.Content></DatePicker>"]},"propsSummary":["children: node (required)","className: string","mode: single|range (default: single)","selected: object","selectedRange: object","onSelect: function","onChange: function","onRangeSelect: function","numberOfMonths: number (default: 1)","disabled: boolean (default: false)","size: sm|md|lg (default: md)","disabledDates: union","placeholder: string","locale: object","fixedWeeks: boolean (default: false)","formatDate: function","formatRange: function","open: boolean","onOpenChange: function","name: string","label: string","helperText: string","error: union"],"sourcePath":"src/components/DatePicker/index.tsx","exportName":"DatePicker","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:54.712Z"},"performance":{"bundleSize":4239,"rawSize":10976,"complexity":"lightweight","budgetPercent":28,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"DatePicker (self)","bytes":7078,"percent":64},{"path":"src/recipes/popup.ts","bytes":2528,"percent":23},{"path":"src/utils/aria.ts","bytes":351,"percent":3},{"path":"ComponentDefaults","bytes":199,"percent":2},{"path":"src/utils/env.ts","bytes":93,"percent":1}]}},"Dialog":{"filePath":"src/components/Dialog/Dialog.fragment.tsx","meta":{"name":"Dialog","description":"Blocks the page with one focused task the user must finish or dismiss.","category":"overlays","status":"stable","tags":["modal","dialog","overlay","popup","confirmation"]},"guidance":{"when":["Confirming something irreversible","Collecting input the user must finish in one pass","Content that needs acknowledgment before continuing","Isolating a step in a longer workflow"],"whenNot":["A short hint (use Tooltip)","A list of actions (use Menu)","Contextual content that should not block (use Popover)","Feedback the user does not act on (use Toast or Alert)"],"dont":[{"reason":"Do not use a Dialog for a non-blocking notification.","bad":"<Dialog>Saved</Dialog>","good":"<Alert tone=\"success\">\n            <Alert.Icon />\n            <Alert.Body>\n              <Alert.Title>Changes saved</Alert.Title>\n              <Alert.Content>Your settings are up to date.</Alert.Content>\n            </Alert.Body>\n          </Alert>"},{"reason":"Do not omit an accessible title and explicit close action from a Dialog.","bad":"<Dialog><Dialog.Content>Focused task</Dialog.Content></Dialog>","good":"<Dialog defaultOpen>\n            <Dialog.Content>\n              <Dialog.Title>Account settings</Dialog.Title>\n              <Dialog.Body>Update your workspace preferences.</Dialog.Body>\n              <Dialog.Close>Close</Dialog.Close>\n            </Dialog.Content>\n          </Dialog>"}],"guidelines":["One task per dialog","Title states the task; body states the consequence","Pair the primary action with an explicit cancel","Leave backdrop and Escape dismissal on unless the choice is destructive","Wrap the trigger with asChild around a real control — the bare trigger ships unstyled"],"accessibility":["Traps focus while open","Escape closes","Focus returns to the trigger on close","role=\"dialog\" with title and description wired to aria attributes"]},"usage":{"when":["Confirming something irreversible","Collecting input the user must finish in one pass","Content that needs acknowledgment before continuing","Isolating a step in a longer workflow"],"whenNot":["A short hint (use Tooltip)","A list of actions (use Menu)","Contextual content that should not block (use Popover)","Feedback the user does not act on (use Toast or Alert)"],"dont":[{"reason":"Do not use a Dialog for a non-blocking notification.","bad":"<Dialog>Saved</Dialog>","good":"<Alert tone=\"success\">\n            <Alert.Icon />\n            <Alert.Body>\n              <Alert.Title>Changes saved</Alert.Title>\n              <Alert.Content>Your settings are up to date.</Alert.Content>\n            </Alert.Body>\n          </Alert>"},{"reason":"Do not omit an accessible title and explicit close action from a Dialog.","bad":"<Dialog><Dialog.Content>Focused task</Dialog.Content></Dialog>","good":"<Dialog defaultOpen>\n            <Dialog.Content>\n              <Dialog.Title>Account settings</Dialog.Title>\n              <Dialog.Body>Update your workspace preferences.</Dialog.Body>\n              <Dialog.Close>Close</Dialog.Close>\n            </Dialog.Content>\n          </Dialog>"}],"guidelines":["One task per dialog","Title states the task; body states the consequence","Pair the primary action with an explicit cancel","Leave backdrop and Escape dismissal on unless the choice is destructive","Wrap the trigger with asChild around a real control — the bare trigger ships unstyled"],"accessibility":["Traps focus while open","Escape closes","Focus returns to the trigger on close","role=\"dialog\" with title and description wired to aria attributes"]},"props":{"children":{"type":"node","description":"","required":true},"defaultOpen":{"type":"boolean","description":"Default open state","required":false},"modal":{"type":"boolean","description":"Whether the dialog blocks interaction with the rest of the page.","default":"true","required":false},"onOpenChange":{"type":"function","description":"Called when open state changes","required":false},"open":{"type":"boolean","description":"Controlled open state","required":false}},"relations":[{"component":"Popover","relationship":"alternative","note":"Use Popover for non-modal contextual content"},{"component":"Menu","relationship":"alternative","note":"Use Menu for action lists"},{"component":"Alert","relationship":"sibling","note":"Use Alert for inline notifications"}],"variants":[{"name":"Default","description":"Header, body, and footer in the standard layout.","code":"<Dialog>\n          <Dialog.Trigger asChild>\n            <Button>Open dialog</Button>\n          </Dialog.Trigger>\n          <Dialog.Content>\n            <Dialog.Close />\n            <Dialog.Header>\n              <Dialog.Title>Dialog title</Dialog.Title>\n              <Dialog.Description>Focused supporting content.</Dialog.Description>\n            </Dialog.Header>\n            <Dialog.Body>Dialog body</Dialog.Body>\n            <Dialog.Footer>\n              <Dialog.Close asChild>\n                <Button variant=\"soft\">Close</Button>\n              </Dialog.Close>\n            </Dialog.Footer>\n          </Dialog.Content>\n        </Dialog>","canonical":true},{"name":"Confirmation","description":"Names the consequence before an irreversible action.","code":"<Dialog>\n          <Dialog.Trigger asChild>\n            <Button variant=\"solid\" tone=\"danger\">Delete item</Button>\n          </Dialog.Trigger>\n          <Dialog.Content>\n            <Dialog.Header>\n              <Dialog.Title>Delete item?</Dialog.Title>\n            </Dialog.Header>\n            <Dialog.Body>This action cannot be undone.</Dialog.Body>\n            <Dialog.Footer>\n              <Dialog.Close asChild>\n                <Button variant=\"soft\">Cancel</Button>\n              </Dialog.Close>\n              <Dialog.Close asChild>\n                <Button variant=\"solid\" tone=\"danger\">Delete</Button>\n              </Dialog.Close>\n            </Dialog.Footer>\n          </Dialog.Content>\n        </Dialog>"},{"name":"Large","description":"Wider surface for denser content.","code":"<Dialog>\n          <Dialog.Trigger asChild>\n            <Button>Open large dialog</Button>\n          </Dialog.Trigger>\n          <Dialog.Content width=\"lg\">\n            <Dialog.Close />\n            <Dialog.Header>\n              <Dialog.Title>Detailed settings</Dialog.Title>\n            </Dialog.Header>\n            <Dialog.Body>Complex content</Dialog.Body>\n            <Dialog.Footer>\n              <Dialog.Close asChild>\n                <Button variant=\"soft\">Close</Button>\n              </Dialog.Close>\n            </Dialog.Footer>\n          </Dialog.Content>\n        </Dialog>"},{"name":"No Initial Focus","description":"Skips autofocus when you place focus yourself.","code":"<Dialog>\n          <Dialog.Trigger asChild>\n            <Button variant=\"soft\">Open settings</Button>\n          </Dialog.Trigger>\n          <Dialog.Content initialFocus={false}>\n            <Dialog.Header>\n              <Dialog.Title>Settings</Dialog.Title>\n              <Dialog.Description>Choose a settings area to edit.</Dialog.Description>\n            </Dialog.Header>\n            <Dialog.Body>Settings content</Dialog.Body>\n            <Dialog.Footer>\n              <Dialog.Close asChild>\n                <Button variant=\"soft\">Close</Button>\n              </Dialog.Close>\n            </Dialog.Footer>\n          </Dialog.Content>\n        </Dialog>"},{"name":"Long Title","description":"A wrapping title keeps the close control reachable.","code":"<Dialog>\n          <Dialog.Trigger asChild>\n            <Button>Open long title dialog</Button>\n          </Dialog.Trigger>\n          <Dialog.Content>\n            <Dialog.Close />\n            <Dialog.Header>\n              <Dialog.Title>\n                Confirm the localized account recovery policy for every workspace administrator\n              </Dialog.Title>\n              <Dialog.Description>\n                The title wraps while the close affordance and recovery action remain reachable.\n              </Dialog.Description>\n            </Dialog.Header>\n            <Dialog.Footer>\n              <Dialog.Close asChild>\n                <Button variant=\"soft\">Close</Button>\n              </Dialog.Close>\n            </Dialog.Footer>\n          </Dialog.Content>\n        </Dialog>"}],"ai":{"compositionPattern":"compound","subComponents":["Trigger","Content","Close","Header","Title","Description","Body","Footer"],"requiredChildren":["Content"],"commonPatterns":["<Dialog><Dialog.Trigger asChild><Button>Open</Button></Dialog.Trigger><Dialog.Content><Dialog.Header><Dialog.Title>{title}</Dialog.Title></Dialog.Header><Dialog.Body>{content}</Dialog.Body><Dialog.Footer><Dialog.Close asChild><Button variant=\"soft\">Cancel</Button></Dialog.Close><Button>Confirm</Button></Dialog.Footer></Dialog.Content></Dialog>","<Dialog><Dialog.Trigger asChild><Button variant=\"soft\">Open settings</Button></Dialog.Trigger><Dialog.Content initialFocus={false}>...</Dialog.Content></Dialog>"]},"contract":{"propsSummary":["open: boolean - controlled open state","onOpenChange: (open) => void - open state handler","modal: boolean - blocks page interaction (default: true)","Dialog.Content initialFocus?: boolean - control auto-focus on open (default: true)","Dialog.Content width: sm|md|lg|xl|full - dialog width (default: md)"],"a11yRules":["A11Y_DIALOG_FOCUS","A11Y_DIALOG_ESCAPE","A11Y_DIALOG_LABEL"]},"matrix":{"axes":{"width":"auto","modal":["true","false"],"theme":["light","dark"]},"forced":["open","focus","reduced-motion"],"worstCase":{"title":"A long localized dialog title that wraps while the close affordance remains reachable"}},"preview":{"providers":[],"dynamicRegions":[]},"provenance":{"source":"extracted","verified":true},"sourcePath":"src/components/Dialog/index.tsx","exportName":"Dialog","performance":{"bundleSize":1126,"rawSize":3005,"complexity":"lightweight","budgetPercent":7,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Dialog (self)","bytes":2254,"percent":75}]}},"Drawer":{"filePath":"src/components/Drawer/index.tsx","meta":{"name":"Drawer","description":"Slides a panel in from a screen edge and dims the page behind it.","category":"overlays","tags":["drawer","sheet","panel","sidebar","slide-over"],"status":"stable"},"usage":{"when":["Editing or creating alongside the page behind it","Touch-reachable action sheets","Navigation that slides in and back out","Detail views that overlay rather than replace"],"whenNot":["A centred task (use Dialog)","Navigation that stays on screen (use Sidebar)","A short list of actions (use Menu or Popover)","Feedback the user does not act on (use Toast)"],"guidelines":["Right for editing, left for navigation, bottom for touch","Always give the user a visible way out","One task per drawer","asChild on Trigger and Close needs a single element child","Set initialFocus={false} when you place focus yourself"],"accessibility":["Automatically traps focus within the drawer","Closes on Escape key press","Returns focus to trigger element on close","Uses role=\"dialog\" with proper aria attributes"]},"props":{"children":{"type":"node","description":"Drawer content (use Drawer.Content, Drawer.Header, etc.)","required":true},"open":{"type":"boolean","description":"Controlled open state","required":false},"defaultOpen":{"type":"boolean","description":"Default open state (uncontrolled)","default":"false","required":false},"onOpenChange":{"type":"function","description":"Called when open state changes","required":false},"modal":{"type":"union","description":"Whether to render as modal (blocks interaction with rest of page)","default":"true","required":false},"disablePointerDismissal":{"type":"boolean","description":"Disable outside-click dismissal","required":false},"onOpenChangeComplete":{"type":"function","description":"Called after open/close animation completes","required":false},"snapPoints":{"type":"array","description":"Preset snap-point heights for bottom-sheet drawers","required":false},"swipeDirection":{"type":"enum","description":"Swipe direction to dismiss.","default":"derived from `side` prop on Content","required":false,"values":["up","down","left","right"]}},"relations":[{"component":"Dialog","relationship":"sibling","note":"Use Dialog for centered modal overlays"},{"component":"Sidebar","relationship":"alternative","note":"Use Sidebar for permanent side navigation"},{"component":"Popover","relationship":"alternative","note":"Use Popover for small contextual content"}],"variants":[{"name":"Default","description":"Enters from the right, the default for editing and forms.","code":"<Drawer>\n  <Drawer.Trigger asChild>\n    <Button>Open Drawer</Button>\n  </Drawer.Trigger>\n  <Drawer.Content>\n    <Drawer.Close />\n    <Drawer.Header>\n      <Drawer.Title>Drawer Title</Drawer.Title>\n      <Drawer.Description>\n        A panel sliding in from the right.\n      </Drawer.Description>\n    </Drawer.Header>\n    <Drawer.Body>\n      <p>Drawer content goes here.</p>\n    </Drawer.Body>\n    <Drawer.Footer>\n      <Drawer.Close asChild>\n        <Button variant=\"soft\">Cancel</Button>\n      </Drawer.Close>\n      <Button variant=\"solid\">Save</Button>\n    </Drawer.Footer>\n  </Drawer.Content>\n</Drawer>"},{"name":"Left Side","description":"Enters from the left, where navigation belongs.","code":"<Drawer>\n  <Drawer.Trigger asChild>\n    <Button variant=\"soft\">Open Left</Button>\n  </Drawer.Trigger>\n  <Drawer.Content side=\"left\">\n    <Drawer.Close />\n    <Drawer.Header>\n      <Drawer.Title>Navigation</Drawer.Title>\n    </Drawer.Header>\n    <Drawer.Body>\n      <p>Left-side drawer for navigation or filters.</p>\n    </Drawer.Body>\n  </Drawer.Content>\n</Drawer>"},{"name":"Bottom Sheet","description":"Rises from the bottom for touch-reachable actions.","code":"<Drawer>\n  <Drawer.Trigger asChild>\n    <Button variant=\"soft\">Open Bottom Sheet</Button>\n  </Drawer.Trigger>\n  <Drawer.Content side=\"bottom\" width=\"sm\">\n    <Drawer.Header>\n      <Drawer.Title>Actions</Drawer.Title>\n    </Drawer.Header>\n    <Drawer.Body>\n      <p>Bottom sheet for mobile-style actions.</p>\n    </Drawer.Body>\n  </Drawer.Content>\n</Drawer>"},{"name":"With Form","description":"Fields in the body, submit and cancel pinned to the footer.","code":"<Drawer>\n  <Drawer.Trigger asChild>\n    <Button>Edit Settings</Button>\n  </Drawer.Trigger>\n  <Drawer.Content width=\"md\">\n    <Drawer.Close />\n    <Drawer.Header>\n      <Drawer.Title>Settings</Drawer.Title>\n      <Drawer.Description>Update your preferences.</Drawer.Description>\n    </Drawer.Header>\n    <Drawer.Body>\n      <Stack gap=\"md\">\n        <Input label=\"Display Name\" placeholder=\"Enter name\" />\n        <Input label=\"Email\" type=\"email\" placeholder=\"you@example.com\" />\n      </Stack>\n    </Drawer.Body>\n    <Drawer.Footer>\n      <Drawer.Close asChild>\n        <Button variant=\"soft\">Cancel</Button>\n      </Drawer.Close>\n      <Button variant=\"solid\">Save Changes</Button>\n    </Drawer.Footer>\n  </Drawer.Content>\n</Drawer>"}],"contract":{"propsSummary":["open: boolean - controlled open state","onOpenChange: (open) => void - open state handler","modal: boolean - blocks page interaction (default: true)","Drawer.Content side: left|right|top|bottom - slide direction (default: right)","Drawer.Content width: sm|md|lg|xl|full - panel width, or height for top/bottom (default: md)","Drawer.Content initialFocus: boolean - auto-focus popup on open (default: true)"],"a11yRules":["A11Y_DIALOG_FOCUS","A11Y_DIALOG_ESCAPE","A11Y_DIALOG_LABEL"]},"ai":{"compositionPattern":"compound","subComponents":["Trigger","Content","Close","SwipeArea","Header","Title","Description","Body","Footer"],"requiredChildren":["Content"],"commonPatterns":["<Drawer><Drawer.Trigger><Button>Open</Button></Drawer.Trigger><Drawer.Content><Drawer.Close /><Drawer.Header><Drawer.Title>{title}</Drawer.Title></Drawer.Header><Drawer.Body>{content}</Drawer.Body><Drawer.Footer><Drawer.Close asChild><Button variant=\"soft\">Cancel</Button></Drawer.Close><Button>Save</Button></Drawer.Footer></Drawer.Content></Drawer>"]},"propsSummary":["children: node (required)","open: boolean","defaultOpen: boolean","onOpenChange: function","modal: boolean (default: true)"],"sourcePath":"src/components/Drawer/index.tsx","exportName":"Drawer","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:55.637Z"},"performance":{"bundleSize":1519,"rawSize":4048,"complexity":"lightweight","budgetPercent":10,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Drawer (self)","bytes":3276,"percent":81}]}},"Editor":{"filePath":"src/components/Editor/index.tsx","meta":{"name":"Editor","description":"Edits rich text with formatting, autosave, and a word count.","category":"inputs","tags":["editor","rich-text","markdown","toolbar","writing","blog","content"],"status":"stable","dependencies":[{"name":"@tiptap/react","version":">=2.0.0","reason":"Optional — enables rich-text mode; without TipTap the editor falls back to a markdown textarea."},{"name":"@tiptap/starter-kit","version":">=2.0.0","reason":"Optional — TipTap extension bundle used by rich-text mode."},{"name":"@tiptap/extension-link","version":">=2.0.0","reason":"Optional — link formatting in rich-text mode."}]},"usage":{"when":["Blog posts and long-form articles","Text that needs formatting controls beside it","Drafts that autosave and report a word count","Markdown or WYSIWYG authoring"],"whenNot":["Single-line text (use Input)","Multi-line with no formatting (use Textarea)","Chat or AI prompt input (use Prompt)","Code editing (use CodeBlock)"],"guidelines":["Compose Editor.Toolbar and Editor.Content to control toolbar layout","Rich text needs @tiptap/react, @tiptap/starter-kit, and @tiptap/extension-link","Without TipTap it falls back to a markdown-aware textarea","onAutoSave may return a Promise; save status updates once it settles","size sets the minimum body height: sm 120px, md 200px, lg 400px","maxLength drives the counter's warning and over-limit states","Headings, blockquote, orderedList, undo, and redo are opt-in via formats","toolbarIcons swaps glyphs without changing labels or keyboard behavior"],"accessibility":["Toolbar has role=\"toolbar\" with aria-label","Format buttons use aria-pressed to indicate active state","Action buttons (undo/redo) omit aria-pressed since they are not toggles","Status indicator uses aria-live=\"polite\" for save status announcements","Keyboard shortcuts match standard text editor conventions (Ctrl+B, Ctrl+I, etc.)","Global shortcuts (e.g., Sidebar Ctrl+B) automatically yield when focus is inside the Editor","Focus ring appears on the editor container when any child element is focused"]},"props":{"children":{"type":"node","description":"","required":false},"value":{"type":"string","description":"Controlled editor value","required":false},"defaultValue":{"type":"string","description":"Default value for uncontrolled usage","default":"","required":false},"onValueChange":{"type":"function","description":"Called when content changes","required":false},"placeholder":{"type":"string","description":"Placeholder text shown when empty","default":"Start typing...","required":false},"disabled":{"type":"boolean","description":"Disable the editor","default":"false","required":false},"readOnly":{"type":"boolean","description":"Make the editor read-only","default":"false","required":false},"formats":{"type":"array","description":"Which format buttons to show in the toolbar","default":"[\"bold\", \"italic\", \"strikethrough\", \"link\", \"code\", \"bulletList\"]","required":false},"toolbar":{"type":"boolean","description":"Show default toolbar","default":"true","required":false},"statusBar":{"type":"boolean","description":"Show default status bar with word/character counts","default":"true","required":false},"onAutoSave":{"type":"function","description":"Auto-save callback, called at autoSaveInterval (may be async)","required":false},"autoSaveInterval":{"type":"number","description":"Auto-save interval in milliseconds","default":"30000","required":false},"size":{"type":"enum","description":"Editor size preset: \"sm\" (120px), \"md\" (200px), or \"lg\" (400px)","default":"md","required":false,"values":["sm","md","lg"]},"maxLength":{"type":"number","description":"Maximum character count. Shows counter in status bar with warning (90%) and error (over limit) states","required":false},"toolbarIcons":{"type":"object","description":"Optional toolbar icon overrides keyed by format/action (e.g. bold, italic, undo). Values can be React nodes or render functions.","required":false}},"relations":[{"component":"Prompt","relationship":"sibling","note":"Prompt is for AI/chat input; Editor is for long-form content editing"},{"component":"Textarea","relationship":"alternative","note":"Use Textarea for simple multi-line input without formatting toolbar"},{"component":"Input","relationship":"alternative","note":"Use Input for single-line text input"}],"variants":[{"name":"Default","description":"Toolbar and status bar you get with no configuration.","code":"<Editor placeholder=\"Start typing your masterpiece here...\" />"},{"name":"With Auto-Save and Publish","description":"Save state sits next to the primary action in the toolbar.","code":"<Editor\n  placeholder=\"Start typing your masterpiece here...\"\n  onValueChange={(v) => console.log(v)}\n>\n  <Editor.Toolbar>\n    <Editor.ToolbarGroup aria-label=\"Text formatting\">\n      <Editor.ToolbarButton format=\"bold\" />\n      <Editor.ToolbarButton format=\"italic\" />\n      <Editor.ToolbarButton format=\"strikethrough\" />\n      <Editor.ToolbarButton format=\"link\" />\n      <Editor.ToolbarButton format=\"code\" />\n      <Editor.ToolbarButton format=\"bulletList\" />\n    </Editor.ToolbarGroup>\n    <Editor.ToolbarGroup aria-label=\"Actions\">\n      <Editor.StatusIndicator status=\"saved\" />\n      <Button variant=\"solid\" tone=\"accent\" size=\"sm\">\n        Publish\n      </Button>\n    </Editor.ToolbarGroup>\n  </Editor.Toolbar>\n  <Editor.Content />\n  <Editor.StatusBar showWordCount showCharCount />\n</Editor>"},{"name":"Save Failed","description":"A failed autosave turns the status text red.","code":"<Editor defaultValue=\"This draft could not be saved.\">\n  <Editor.Toolbar>\n    <Editor.ToolbarGroup aria-label=\"Text formatting\">\n      <Editor.ToolbarButton format=\"bold\" />\n      <Editor.ToolbarButton format=\"italic\" />\n    </Editor.ToolbarGroup>\n    <Editor.ToolbarGroup aria-label=\"Status\">\n      <Editor.StatusIndicator status=\"error\" />\n    </Editor.ToolbarGroup>\n  </Editor.Toolbar>\n  <Editor.Content />\n  <Editor.StatusBar showWordCount showCharCount />\n</Editor>"},{"name":"Disabled","description":"Dimmed and inert, but the text stays readable.","code":"<Editor\n  defaultValue=\"This content cannot be edited.\"\n  disabled\n/>"},{"name":"Read Only","description":"Text can be selected and copied, but never changed.","code":"<Editor\n  defaultValue=\"This content is read-only. You can select and copy text but cannot modify it.\"\n  readOnly\n/>"},{"name":"Custom Toolbar","description":"Separators split the controls into labelled clusters.","code":"<Editor\n  placeholder=\"Write your blog post...\"\n  onValueChange={(v) => console.log(v)}\n>\n  <Editor.Toolbar>\n    <Editor.ToolbarGroup aria-label=\"Basic formatting\">\n      <Editor.ToolbarButton format=\"bold\" />\n      <Editor.ToolbarButton format=\"italic\" />\n    </Editor.ToolbarGroup>\n    <Editor.Separator />\n    <Editor.ToolbarGroup aria-label=\"Advanced formatting\">\n      <Editor.ToolbarButton format=\"link\" />\n      <Editor.ToolbarButton format=\"code\" />\n      <Editor.ToolbarButton format=\"bulletList\" />\n    </Editor.ToolbarGroup>\n    <Editor.ToolbarGroup aria-label=\"Status\">\n      <Editor.StatusIndicator status=\"saving\" />\n    </Editor.ToolbarGroup>\n  </Editor.Toolbar>\n  <Editor.Content />\n  <Editor.StatusBar showWordCount showCharCount />\n</Editor>"},{"name":"Full Formatting","description":"Every opt-in format switched on, at the tallest preset.","code":"<Editor\n  placeholder=\"Write an article...\"\n  size=\"lg\"\n>\n  <Editor.Toolbar>\n    <Editor.ToolbarGroup aria-label=\"History\">\n      <Editor.ToolbarButton format=\"undo\" />\n      <Editor.ToolbarButton format=\"redo\" />\n    </Editor.ToolbarGroup>\n    <Editor.Separator />\n    <Editor.ToolbarGroup aria-label=\"Headings\">\n      <Editor.ToolbarButton format=\"heading1\" />\n      <Editor.ToolbarButton format=\"heading2\" />\n      <Editor.ToolbarButton format=\"heading3\" />\n    </Editor.ToolbarGroup>\n    <Editor.Separator />\n    <Editor.ToolbarGroup aria-label=\"Text formatting\">\n      <Editor.ToolbarButton format=\"bold\" />\n      <Editor.ToolbarButton format=\"italic\" />\n      <Editor.ToolbarButton format=\"strikethrough\" />\n      <Editor.ToolbarButton format=\"code\" />\n    </Editor.ToolbarGroup>\n    <Editor.Separator />\n    <Editor.ToolbarGroup aria-label=\"Block formatting\">\n      <Editor.ToolbarButton format=\"bulletList\" />\n      <Editor.ToolbarButton format=\"orderedList\" />\n      <Editor.ToolbarButton format=\"blockquote\" />\n      <Editor.ToolbarButton format=\"link\" />\n    </Editor.ToolbarGroup>\n  </Editor.Toolbar>\n  <Editor.Content />\n  <Editor.StatusBar showWordCount showCharCount />\n</Editor>"},{"name":"With Character Limit","description":"The counter warns near 280 characters and turns red past it.","code":"<Editor\n  placeholder=\"Write a tweet-sized message...\"\n  maxLength={280}\n  size=\"sm\"\n  formats={['bold', 'italic', 'link']}\n/>"},{"name":"Small Size","description":"A 120px body with a trimmed toolbar, for tight spaces.","code":"<Editor\n  placeholder=\"Quick note...\"\n  size=\"sm\"\n  formats={['bold', 'italic', 'code']}\n/>"}],"contract":{"propsSummary":["value: string - controlled editor value","onValueChange: (value: string) => void - change callback","placeholder: string - hint text (default: \"Start typing...\")","disabled: boolean - disables interaction","readOnly: boolean - prevents editing","formats: EditorFormat[] - toolbar buttons (default: all 6)","toolbar: boolean - show default toolbar (default: true)","statusBar: boolean - show word/char counts (default: true)","onAutoSave: (value: string) => void | Promise<void> - auto-save handler","size: \"sm\" | \"md\" | \"lg\" - editor height preset (default: \"md\")","maxLength: number - character limit with visual indicator","toolbarIcons: Partial<Record<EditorFormat, ReactNode | (state) => ReactNode>> - custom toolbar icons"],"a11yRules":["A11Y_TOOLBAR_ROLE","A11Y_BUTTON_LABEL","A11Y_LIVE_REGION"]},"ai":{"compositionPattern":"compound","subComponents":["Toolbar","ToolbarGroup","ToolbarButton","Separator","StatusIndicator","Content","StatusBar","preload"]},"propsSummary":["children: node","value: string","defaultValue: string (default: )","onValueChange: function","placeholder: string (default: Start typing...)","disabled: boolean (default: false)","readOnly: boolean (default: false)","formats: array","toolbar: boolean (default: true)","statusBar: boolean (default: true)","onAutoSave: function","autoSaveInterval: number (default: 30000)","size: sm|md|lg (default: md)","maxLength: number","toolbarIcons: object"],"sourcePath":"src/components/Editor/index.tsx","exportName":"Editor","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:56.748Z"},"performance":{"bundleSize":138773,"rawSize":442459,"complexity":"heavy","budgetPercent":903,"overBudget":true,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"@tiptap/react","bytes":335208,"percent":76},{"path":"@phosphor-icons/react","bytes":34485,"percent":8},{"path":"@tiptap/starter-kit","bytes":32005,"percent":7},{"path":"@tiptap/extension-link","bytes":25654,"percent":6},{"path":"Editor (self)","bytes":10201,"percent":2},{"path":"src/utils/keyboard-shortcuts.ts","bytes":2656,"percent":1},{"path":"src/utils/env.ts","bytes":93,"percent":0}]}},"EmptyState":{"filePath":"src/components/EmptyState/index.tsx","meta":{"name":"EmptyState","description":"Explains why an area is blank and offers the next step.","category":"feedback","tags":["empty","placeholder","no-data","zero-state","blank-slate"],"status":"stable"},"usage":{"when":["Lists, tables, or search results with nothing to show","First-run screens before any content exists","Filtered views that matched nothing"],"whenNot":["Content still loading (use Skeleton)","Failures that need a retry (use Alert)","Transient confirmations (use Toast)"],"guidelines":["Say why the area is empty, not just that it is","Give one clear action out of the state","Keep to two actions at most, primary first","Match the icon to the cause — search, inbox, folder","Use size=\"sm\" inline and size=\"lg\" for full-page states"],"accessibility":["Empty state content is accessible to screen readers","Action buttons follow button accessibility guidelines"]},"props":{"children":{"type":"node","description":"EmptyState content - use EmptyState.Icon, EmptyState.Title, EmptyState.Description, EmptyState.Actions sub-components","required":true},"size":{"type":"enum","description":"Size variant","default":"md","required":false,"values":["sm","md","lg"]},"variant":{"type":"enum","description":"Chrome. `outline` draws a dashed hairline around the reserved region; `ghost` leaves framing to the surrounding surface.","default":"ghost","required":false,"values":["ghost","outline"]}},"relations":[{"component":"Alert","relationship":"alternative","note":"Use Alert for error states with retry"},{"component":"Progress","relationship":"alternative","note":"Use Progress/Spinner for loading states"}],"variants":[{"name":"Default","description":"First-run state: nothing exists yet, so offer the create action.","code":"<EmptyState>\n  <EmptyState.Icon><FolderIcon /></EmptyState.Icon>\n  <EmptyState.Title>No projects yet</EmptyState.Title>\n  <EmptyState.Description>Get started by creating your first project.</EmptyState.Description>\n  <EmptyState.Actions>\n    <Button>Create Project</Button>\n  </EmptyState.Actions>\n</EmptyState>"},{"name":"No Results","description":"A filter or query matched nothing — offer a way back.","code":"<EmptyState>\n  <EmptyState.Icon><SearchIcon /></EmptyState.Icon>\n  <EmptyState.Title>No results found</EmptyState.Title>\n  <EmptyState.Description>Try adjusting your search terms or filters.</EmptyState.Description>\n  <EmptyState.Actions>\n    <Button variant=\"soft\">Clear Filters</Button>\n  </EmptyState.Actions>\n</EmptyState>"},{"name":"With Secondary Action","description":"One primary action plus a quieter alternative.","code":"<EmptyState>\n  <EmptyState.Icon><InboxIcon /></EmptyState.Icon>\n  <EmptyState.Title>Inbox is empty</EmptyState.Title>\n  <EmptyState.Description>You have no new messages.</EmptyState.Description>\n  <EmptyState.Actions>\n    <Button>Compose Message</Button>\n    <Button variant=\"soft\">View Archive</Button>\n  </EmptyState.Actions>\n</EmptyState>"},{"name":"Small","description":"Compact size for inline panels; no icon, no action.","code":"<EmptyState size=\"sm\">\n  <EmptyState.Title>No items</EmptyState.Title>\n  <EmptyState.Description>Add items to see them here.</EmptyState.Description>\n</EmptyState>"},{"name":"Large","description":"Full-page size for a workspace or onboarding screen.","code":"<EmptyState size=\"lg\">\n  <EmptyState.Icon><FolderIcon /></EmptyState.Icon>\n  <EmptyState.Title>Welcome to your workspace</EmptyState.Title>\n  <EmptyState.Description>\n    This is where your projects will appear. Create your first project to get started.\n  </EmptyState.Description>\n  <EmptyState.Actions>\n    <Button>Create Your First Project</Button>\n  </EmptyState.Actions>\n</EmptyState>"}],"contract":{"propsSummary":["size: sm|md|lg (default: md)","Sub-components: EmptyState.Icon, EmptyState.Title, EmptyState.Description, EmptyState.Actions","Compound sub-components forward DOM props to their rendered elements"],"a11yRules":["A11Y_EMPTY_STATE_CONTENT"]},"ai":{"compositionPattern":"compound","subComponents":["Icon","Title","Description","Actions"],"requiredChildren":["Title"],"commonPatterns":["<EmptyState><EmptyState.Title>{title}</EmptyState.Title><EmptyState.Description>{description}</EmptyState.Description></EmptyState>","<EmptyState><EmptyState.Icon>{icon}</EmptyState.Icon><EmptyState.Title>{title}</EmptyState.Title><EmptyState.Description>{description}</EmptyState.Description><EmptyState.Actions><Button>{action}</Button></EmptyState.Actions></EmptyState>"]},"propsSummary":["children: node (required)","size: sm|md|lg (default: md)","variant: ghost|outline (default: ghost)"],"sourcePath":"src/components/EmptyState/index.tsx","exportName":"EmptyState","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:56.922Z"},"performance":{"bundleSize":813,"rawSize":1902,"complexity":"lightweight","budgetPercent":5,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"EmptyState (self)","bytes":1173,"percent":62}]}},"Field":{"filePath":"src/components/Field/index.tsx","meta":{"name":"Field","description":"Composes labels, descriptions, validation, and errors around a form control.","category":"inputs","tags":["form","field","validation","label","error","input","accessible"],"status":"stable"},"usage":{"when":["One error message per failure reason, not one catch-all","A custom control needs a real label and description","Server errors must land on the field that caused them","You need dirty and touched tracking"],"whenNot":["A plain input with a label and helper text (use Input's own props)","A Select or Textarea whose built-in error display is enough"],"guidelines":["Every Field gets a Field.Label","Wrap the control in Field.Control so it joins the field context","Give each Field.Error a match so the message fits the failure","Nest inside Form to route server errors by field name"],"accessibility":["Label links to the control via aria-labelledby","Description links via aria-describedby","Errors are announced when they appear","data-disabled and data-invalid are available for styling"]},"props":{"children":{"type":"node","description":"Field content (Label, Control, Description, Error)","required":true},"name":{"type":"string","description":"Field name, used for error distribution from Form","required":false},"disabled":{"type":"boolean","description":"Disables the field and its control","required":false},"invalid":{"type":"boolean","description":"Marks the field as invalid","required":false},"validate":{"type":"function","description":"Custom validation function returning error string(s) or null","required":false},"validationMode":{"type":"enum","description":"When to trigger validation","required":false,"values":["onSubmit","onBlur","onChange"]},"validationDebounceTime":{"type":"number","description":"Debounce time in ms for onChange validation","required":false},"size":{"type":"enum","description":"","required":false,"values":["sm","md","lg"]}},"relations":[{"component":"Input","relationship":"alternative","note":"Use Input for simple fields with built-in label/error"},{"component":"Form","relationship":"parent","note":"Wrap in Form for server-side error distribution"},{"component":"Fieldset","relationship":"sibling","note":"Use Fieldset to group related fields"}],"variants":[{"name":"Single field","description":"Label, control and description wired together automatically.","code":"<Field name=\"email\">\n  <Field.Label>Email address</Field.Label>\n  <Field.Control>\n    <Input type=\"email\" placeholder=\"jane@example.com\" />\n  </Field.Control>\n  <Field.Description>We will never share your email.</Field.Description>\n</Field>"},{"name":"Two-column layout","description":"Grid places two short fields side by side and one full-width.","code":"<Grid columns={2} gap=\"md\">\n  <Field name=\"firstName\">\n    <Field.Label>First Name</Field.Label>\n    <Field.Control>\n      <Input placeholder=\"Jane\" />\n    </Field.Control>\n  </Field>\n  <Field name=\"lastName\">\n    <Field.Label>Last Name</Field.Label>\n    <Field.Control>\n      <Input placeholder=\"Doe\" />\n    </Field.Control>\n  </Field>\n  <Grid.Item colSpan=\"full\">\n    <Field name=\"email\">\n      <Field.Label>Email</Field.Label>\n      <Field.Control>\n        <Input type=\"email\" placeholder=\"jane@example.com\" />\n      </Field.Control>\n      <Field.Error match=\"typeMismatch\">Enter a valid email address</Field.Error>\n    </Field>\n  </Grid.Item>\n</Grid>"},{"name":"Invalid","description":"invalid marks the field failed and reveals Field.Error.","code":"<Field name=\"username\" invalid>\n  <Field.Label>Username</Field.Label>\n  <Field.Control>\n    <Input value=\"ada lovelace\" error />\n  </Field.Control>\n  <Field.Error match>Usernames cannot contain spaces</Field.Error>\n</Field>"},{"name":"Custom validation","description":"validate runs on change and feeds Field.Error.","code":"<Field\n  name=\"age\"\n  validate={(value) => {\n    const num = Number(value);\n    if (isNaN(num) || num < 18) return 'Must be 18 or older';\n    return null;\n  }}\n  validationMode=\"onChange\"\n  validationDebounceTime={500}\n>\n  <Field.Label>Age</Field.Label>\n  <Field.Control>\n    <Input type=\"number\" placeholder=\"18\" />\n  </Field.Control>\n  <Field.Description>You must be at least 18 years old.</Field.Description>\n  <Field.Error match=\"customError\" />\n</Field>"}],"contract":{"propsSummary":["name: string - field name for error distribution","validate: (value) => string | null - custom validation","validationMode: onSubmit|onBlur|onChange - validation trigger","Field.Control: wraps any form component (Input, Textarea, etc.)","Field.Error match: valueMissing|typeMismatch|customError|... - granular errors"],"a11yRules":["A11Y_FIELD_LABEL","A11Y_FIELD_ERROR","A11Y_FIELD_DESCRIPTION"]},"ai":{"compositionPattern":"compound","subComponents":["Label","Control","Description","Error","Validity","Required"],"commonPatterns":["<Field>\n  <Field.Label>...</Field.Label>\n  <Field.Control>...</Field.Control>\n  <Field.Description>...</Field.Description>\n</Field>"],"requiredChildren":["Label","Control"]},"propsSummary":["children: node (required)","name: string","disabled: boolean","invalid: boolean","validate: function","validationMode: onSubmit|onBlur|onChange","validationDebounceTime: number"],"sourcePath":"src/components/Field/index.tsx","exportName":"Field","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:59.733Z"},"performance":{"bundleSize":923,"rawSize":2253,"complexity":"lightweight","budgetPercent":6,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Field (self)","bytes":1348,"percent":60},{"path":"ComponentDefaults","bytes":193,"percent":9}]}},"Fieldset":{"filePath":"src/components/Fieldset/index.tsx","meta":{"name":"Fieldset","description":"Groups related form controls under an accessible legend.","category":"inputs","tags":["form","fieldset","group","legend","accessible"],"status":"stable"},"usage":{"when":["Fields that belong to one subject: address, billing, profile","Locking a whole section at once","Screen readers should hear the group name before each field"],"whenNot":["Grouping for looks alone (use Card)","Wrapping one control (use Field)"],"guidelines":["Every Fieldset gets a Fieldset.Legend","disabled on the Fieldset locks every control inside it","Put a Grid inside for multi-column layouts","Fieldset.Legend forwards DOM props for ids, ARIA, and data hooks"],"accessibility":["Renders a real fieldset element","Legend names the group","Disabled cascades to every child field"]},"props":{"children":{"type":"node","description":"Fieldset content including Fieldset.Legend and form fields","required":true},"disabled":{"type":"boolean","description":"Disables all fields within the fieldset","required":false}},"relations":[{"component":"Field","relationship":"sibling","note":"Contains Field components"},{"component":"Form","relationship":"parent","note":"Used within a Form"},{"component":"Card","relationship":"alternative","note":"Use Card for non-form visual grouping"}],"variants":[{"name":"Two-column layout","description":"A Grid inside the legend box pairs short fields on one row.","code":"<Fieldset>\n  <Fieldset.Legend>Personal Information</Fieldset.Legend>\n  <Grid columns={2} gap=\"md\">\n    <Field name=\"firstName\">\n      <Field.Label>First Name</Field.Label>\n      <Field.Control>\n        <Input placeholder=\"Jane\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"lastName\">\n      <Field.Label>Last Name</Field.Label>\n      <Field.Control>\n        <Input placeholder=\"Doe\" />\n      </Field.Control>\n    </Field>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"email\">\n        <Field.Label>Email</Field.Label>\n        <Field.Control>\n          <Input type=\"email\" placeholder=\"jane@example.com\" />\n        </Field.Control>\n      </Field>\n    </Grid.Item>\n  </Grid>\n</Fieldset>"},{"name":"Mixed controls","description":"Textarea, select and checkbox share one spacing rhythm.","code":"<Fieldset>\n  <Fieldset.Legend>Preferences</Fieldset.Legend>\n  <Field name=\"bio\">\n    <Field.Label>Bio</Field.Label>\n    <Field.Control>\n      <Textarea placeholder=\"Tell us about yourself\" rows={3} />\n    </Field.Control>\n    <Field.Description>Brief description for your profile.</Field.Description>\n  </Field>\n  <Field name=\"role\">\n    <Field.Label>Role</Field.Label>\n    <Field.Control>\n      <Select placeholder=\"Select a role\">\n        <Select.Trigger />\n        <Select.Content>\n          <Select.Item value=\"admin\">Admin</Select.Item>\n          <Select.Item value=\"editor\">Editor</Select.Item>\n          <Select.Item value=\"viewer\">Viewer</Select.Item>\n        </Select.Content>\n      </Select>\n    </Field.Control>\n  </Field>\n  <Field name=\"newsletter\">\n    <Field.Control>\n      <Checkbox label=\"Subscribe to newsletter\" />\n    </Field.Control>\n  </Field>\n</Fieldset>"},{"name":"With Description","description":"One sentence under the legend covers the whole group.","code":"<Fieldset>\n  <Fieldset.Legend>Notification Settings</Fieldset.Legend>\n  <Fieldset.Description>Choose how you want to be notified about updates.</Fieldset.Description>\n  <Field name=\"emailNotif\">\n    <Field.Control>\n      <Checkbox label=\"Email notifications\" />\n    </Field.Control>\n  </Field>\n  <Field name=\"smsNotif\">\n    <Field.Control>\n      <Checkbox label=\"SMS notifications\" />\n    </Field.Control>\n  </Field>\n</Fieldset>"},{"name":"Disabled","description":"One prop on the wrapper dims and locks every control inside.","code":"<Fieldset disabled>\n  <Fieldset.Legend>Locked Section</Fieldset.Legend>\n  <Grid columns={2} gap=\"md\">\n    <Field name=\"lockedFirst\">\n      <Field.Label>First Name</Field.Label>\n      <Field.Control>\n        <Input defaultValue=\"Jane\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"lockedLast\">\n      <Field.Label>Last Name</Field.Label>\n      <Field.Control>\n        <Input defaultValue=\"Doe\" />\n      </Field.Control>\n    </Field>\n  </Grid>\n  <Field name=\"lockedCheck\">\n    <Field.Control>\n      <Checkbox label=\"Cannot toggle\" defaultChecked />\n    </Field.Control>\n  </Field>\n</Fieldset>"}],"contract":{"propsSummary":["disabled: boolean - disables all child fields","Fieldset.Legend: accessible group label","Fieldset.Legend forwards DOM props","Fieldset.Description: helper text below the legend"],"a11yRules":["A11Y_FIELDSET_LEGEND"]},"ai":{"compositionPattern":"compound","subComponents":["Legend","Description"],"commonPatterns":["<Fieldset>\n  <Fieldset.Legend>...</Fieldset.Legend>\n</Fieldset>"],"requiredChildren":["Legend"]},"propsSummary":["children: node (required)","disabled: boolean"],"sourcePath":"src/components/Fieldset/index.tsx","exportName":"Fieldset","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:57.275Z"},"performance":{"bundleSize":610,"rawSize":1285,"complexity":"lightweight","budgetPercent":4,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Fieldset (self)","bytes":632,"percent":49}]}},"Form":{"filePath":"src/components/Form/index.tsx","meta":{"name":"Form","description":"Distributes server-side validation errors to its Field components.","category":"inputs","tags":["form","validation","errors","submit","server"],"status":"stable"},"usage":{"when":["The server rejects a submission and each reason must reach its own field","Client and server validation live in the same form"],"whenNot":["Client-side validation only (a native form plus Field is enough)","Layout without submission (use Grid or Card)"],"guidelines":["errors is keyed by field name: Record<string, string | string[]>","Clear a field's error in onClearErrors when the user edits it","Use onSubmit; onFormSubmit is a deprecated alias","A Field picks up its error by matching name","Leave Field.Error unmatched so it shows whatever the server sent","Put a Grid inside Form or Fieldset for multi-column layouts","Buttons go in Form.Actions so they stay right-aligned"],"accessibility":["Renders a real form element","Errors link back to their field via aria-describedby"]},"props":{"children":{"type":"node","description":"Form content","required":true},"errors":{"type":"object","description":"Server-side errors keyed by field name","required":false},"onSubmit":{"type":"function","description":"Form submission handler (preferred)","required":false},"onFormSubmit":{"type":"function","description":"Deprecated alias for onSubmit","required":false},"onClearErrors":{"type":"function","description":"Called with field name when errors should be cleared","required":false},"validationMode":{"type":"enum","description":"When field validation should run","required":false,"values":["onSubmit","onBlur","onChange"]}},"relations":[{"component":"Field","relationship":"sibling","note":"Contains Field components for error distribution"},{"component":"Fieldset","relationship":"sibling","note":"Use Fieldset to group fields within a Form"},{"component":"Button","relationship":"sibling","note":"Use Button type=\"submit\" for form submission"}],"variants":[{"name":"Sign up","description":"Paired name fields, then full-width rows and a right-aligned submit.","code":"<Form onSubmit={(e) => { e.preventDefault(); }}>\n  <Grid columns={2} gap=\"md\">\n    <Field name=\"firstName\">\n      <Field.Label>First Name</Field.Label>\n      <Field.Control>\n        <Input placeholder=\"Jane\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"lastName\">\n      <Field.Label>Last Name</Field.Label>\n      <Field.Control>\n        <Input placeholder=\"Doe\" />\n      </Field.Control>\n    </Field>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"email\">\n        <Field.Label>Email</Field.Label>\n        <Field.Control>\n          <Input type=\"email\" placeholder=\"jane@example.com\" />\n        </Field.Control>\n        <Field.Error match=\"typeMismatch\">Enter a valid email address</Field.Error>\n      </Field>\n    </Grid.Item>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"password\">\n        <Field.Label>Password</Field.Label>\n        <Field.Control>\n          <Input type=\"password\" placeholder=\"At least 8 characters\" />\n        </Field.Control>\n        <Field.Description>Must be at least 8 characters</Field.Description>\n      </Field>\n    </Grid.Item>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"terms\">\n        <Field.Control>\n          <Checkbox label=\"I agree to the terms and conditions\" />\n        </Field.Control>\n      </Field>\n    </Grid.Item>\n  </Grid>\n  <Form.Actions>\n    <Button type=\"submit\" variant=\"solid\">Create Account</Button>\n  </Form.Actions>\n</Form>"},{"name":"Profile settings","description":"Fieldsets split a long form into sections the user can scan.","code":"<Form onSubmit={(e) => { e.preventDefault(); }}>\n  <Fieldset>\n    <Fieldset.Legend>Profile</Fieldset.Legend>\n    <Grid columns={2} gap=\"md\">\n      <Field name=\"displayName\">\n        <Field.Label>Display Name</Field.Label>\n        <Field.Control>\n          <Input placeholder=\"How others see you\" />\n        </Field.Control>\n      </Field>\n      <Field name=\"timezone\">\n        <Field.Label>Timezone</Field.Label>\n        <Field.Control>\n          <Select placeholder=\"Select timezone\">\n            <Select.Trigger />\n            <Select.Content>\n              <Select.Item value=\"utc\">UTC</Select.Item>\n              <Select.Item value=\"est\">Eastern (EST)</Select.Item>\n              <Select.Item value=\"pst\">Pacific (PST)</Select.Item>\n              <Select.Item value=\"gmt\">GMT</Select.Item>\n            </Select.Content>\n          </Select>\n        </Field.Control>\n      </Field>\n      <Grid.Item colSpan=\"full\">\n        <Field name=\"bio\">\n          <Field.Label>Bio</Field.Label>\n          <Field.Control>\n            <Textarea placeholder=\"Tell us about yourself\" rows={3} maxLength={280} />\n          </Field.Control>\n          <Field.Description>Max 280 characters</Field.Description>\n        </Field>\n      </Grid.Item>\n    </Grid>\n  </Fieldset>\n  <Fieldset>\n    <Fieldset.Legend>Notifications</Fieldset.Legend>\n    <Field name=\"emailNotifs\">\n      <Field.Control>\n        <Switch label=\"Email notifications\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"marketingEmails\">\n      <Field.Control>\n        <Switch label=\"Marketing emails\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"frequency\">\n      <Field.Label>Digest frequency</Field.Label>\n      <Field.Control>\n        <RadioGroup name=\"frequency\" orientation=\"vertical\">\n          <RadioGroup.Item value=\"daily\" label=\"Daily\" />\n          <RadioGroup.Item value=\"weekly\" label=\"Weekly\" />\n          <RadioGroup.Item value=\"monthly\" label=\"Monthly\" />\n        </RadioGroup>\n      </Field.Control>\n    </Field>\n  </Fieldset>\n  <Form.Actions>\n    <Button type=\"submit\" variant=\"solid\">Save Changes</Button>\n  </Form.Actions>\n</Form>"},{"name":"Contact form","description":"Mixed control types in one submission flow.","code":"<Form onSubmit={(e) => { e.preventDefault(); }}>\n  <Grid columns={2} gap=\"md\">\n    <Field name=\"name\">\n      <Field.Label>Name</Field.Label>\n      <Field.Control>\n        <Input placeholder=\"Your name\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"email\">\n      <Field.Label>Email</Field.Label>\n      <Field.Control>\n        <Input type=\"email\" placeholder=\"you@example.com\" />\n      </Field.Control>\n    </Field>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"subject\">\n        <Field.Label>Subject</Field.Label>\n        <Field.Control>\n          <Select placeholder=\"What is this about?\">\n            <Select.Trigger />\n            <Select.Content>\n              <Select.Item value=\"general\">General Inquiry</Select.Item>\n              <Select.Item value=\"support\">Technical Support</Select.Item>\n              <Select.Item value=\"billing\">Billing</Select.Item>\n              <Select.Item value=\"feedback\">Feedback</Select.Item>\n            </Select.Content>\n          </Select>\n        </Field.Control>\n      </Field>\n    </Grid.Item>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"message\">\n        <Field.Label>Message</Field.Label>\n        <Field.Control>\n          <Textarea placeholder=\"How can we help?\" rows={5} />\n        </Field.Control>\n      </Field>\n    </Grid.Item>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"copy\">\n        <Field.Control>\n          <Checkbox label=\"Send me a copy\" />\n        </Field.Control>\n      </Field>\n    </Grid.Item>\n  </Grid>\n  <Form.Actions>\n    <Button type=\"submit\" variant=\"solid\">Send Message</Button>\n  </Form.Actions>\n</Form>"},{"name":"With server errors","description":"Errors from the server land on the fields that caused them.","code":"<Form errors={{ username: 'Username is already taken', email: 'Email is already registered' }}>\n  <Grid columns={2} gap=\"md\">\n    <Field name=\"username\">\n      <Field.Label>Username</Field.Label>\n      <Field.Control>\n        <Input defaultValue=\"janedoe\" />\n      </Field.Control>\n      <Field.Error />\n    </Field>\n    <Field name=\"email\">\n      <Field.Label>Email</Field.Label>\n      <Field.Control>\n        <Input type=\"email\" defaultValue=\"jane@example.com\" />\n      </Field.Control>\n      <Field.Error />\n    </Field>\n  </Grid>\n  <Form.Actions>\n    <Button type=\"submit\" variant=\"solid\">Submit</Button>\n  </Form.Actions>\n</Form>"}],"contract":{"propsSummary":["errors: Record<string, string | string[]> - server errors by field name","onSubmit: (event) => void - submission handler (preferred)","onFormSubmit: (event) => void - deprecated alias for onSubmit","onClearErrors: (name) => void - clear errors callback"],"a11yRules":["A11Y_FORM_LABEL"]},"ai":{"compositionPattern":"compound","subComponents":["Root","Actions"],"commonPatterns":["<Form>\n  <Form.Actions>...</Form.Actions>\n</Form>"],"requiredChildren":["Actions"]},"propsSummary":["children: node (required)","errors: object","onSubmit: function","onFormSubmit: function","onClearErrors: function","validationMode: onSubmit|onBlur|onChange"],"sourcePath":"src/components/Form/index.tsx","exportName":"Form","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:57.100Z"},"performance":{"bundleSize":619,"rawSize":1139,"complexity":"lightweight","budgetPercent":4,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Form (self)","bytes":553,"percent":49}]}},"Grid":{"filePath":"src/components/Grid/index.tsx","meta":{"name":"Grid","description":"Arranges items into responsive columns with one shared gap.","category":"layout","tags":["grid","layout","columns","responsive"],"status":"stable"},"usage":{"when":["Cards, tiles, or media that reflow across breakpoints","Multi-column form layouts","Dashboard widget layouts"],"whenNot":["One-directional lists (use Stack)","Editorial mosaics with feature tiles (use BentoGrid)","Navigation bars (use Header)"],"guidelines":["columns=\"auto\" with minChildWidth adapts without breakpoints","Pass { base, md, lg } to columns for explicit per-breakpoint control","Numeric gaps (1-8) map to the same spacing scale as the tokens","Wrap a child in Grid.Item to span columns; colSpan=\"full\" spans the row","Keep source order equal to visual order — Grid does not reorder for screen readers"],"accessibility":["Grid is purely visual — it does not affect reading order or semantics","Ensure logical source order matches visual order for screen readers"]},"props":{"children":{"type":"node","description":"Grid items and content","required":false},"columns":{"type":"union","description":"Number of columns: a number (1-12), a responsive object { base, sm, md, lg, xl }, or \"auto\" for auto-fill","default":"1","required":false,"constraints":["Use \"auto\" with minChildWidth for fully fluid layouts","Use responsive object for explicit breakpoint control: { base: 1, md: 2, lg: 3 }"]},"minChildWidth":{"type":"string","description":"Minimum width for auto-fill columns (e.g., \"16rem\", \"250px\")","required":false,"constraints":["Only applies when columns=\"auto\""]},"gap":{"type":"union","description":"Gap between grid items. Accepts string tokens or numbers (1-8) mapped to the spacing scale","default":"md","required":false,"values":["none","xs","sm","md","lg","xl"]},"alignItems":{"type":"enum","description":"Vertical alignment of items within their cells","required":false,"values":["start","center","end","stretch"]},"justifyItems":{"type":"enum","description":"Horizontal alignment of items within their cells","required":false,"values":["start","center","end","stretch"]},"padding":{"type":"enum","description":"Internal padding of the grid container","default":"none","required":false,"values":["none","sm","md","lg"]},"className":{"type":"string","description":"Additional class name","required":false},"style":{"type":"object","description":"Inline styles","required":false}},"relations":[{"component":"Card","relationship":"child","note":"Grid commonly contains Card components for dashboard and tile layouts"},{"component":"Separator","relationship":"sibling","note":"Use Separator between grid sections"}],"variants":[{"name":"Default","description":"A fixed count of equal columns.","code":"import { Box } from '@/components/Box';\nimport { Grid } from '@/components/Grid';\n\n<Box width=\"100%\">\n  <Grid columns={3} gap=\"md\">\n    <Box background=\"secondary\" rounded=\"sm\" padding=\"sm\">One</Box>\n    <Box background=\"secondary\" rounded=\"sm\" padding=\"sm\">Two</Box>\n    <Box background=\"secondary\" rounded=\"sm\" padding=\"sm\">Three</Box>\n  </Grid>\n</Box>"},{"name":"Responsive","description":"Column count changes per breakpoint.","code":"import { Box } from '@/components/Box';\nimport { Grid } from '@/components/Grid';\n\n<Box width=\"100%\">\n  <Grid columns={{ base: 1, md: 2, lg: 3 }} gap=\"md\">\n    <Box background=\"secondary\" rounded=\"sm\" padding=\"sm\">Card 1</Box>\n    <Box background=\"secondary\" rounded=\"sm\" padding=\"sm\">Card 2</Box>\n    <Box background=\"secondary\" rounded=\"sm\" padding=\"sm\">Card 3</Box>\n  </Grid>\n</Box>"},{"name":"Auto-fill","description":"Columns fit themselves to a minimum child width — no breakpoints needed.","code":"import { Box } from '@/components/Box';\nimport { Grid } from '@/components/Grid';\n\n<Box width=\"100%\">\n  <Grid columns=\"auto\" minChildWidth=\"10rem\" gap=\"md\">\n    <Box background=\"secondary\" rounded=\"sm\" padding=\"sm\">Card 1</Box>\n    <Box background=\"secondary\" rounded=\"sm\" padding=\"sm\">Card 2</Box>\n    <Box background=\"secondary\" rounded=\"sm\" padding=\"sm\">Card 3</Box>\n    <Box background=\"secondary\" rounded=\"sm\" padding=\"sm\">Card 4</Box>\n  </Grid>\n</Box>"},{"name":"With Spanning","description":"Grid.Item stretches a child across columns.","code":"import { Box } from '@/components/Box';\nimport { Grid } from '@/components/Grid';\n\n<Box width=\"100%\">\n  <Grid columns={4} gap=\"md\">\n    <Grid.Item colSpan={2}>\n      <Box background=\"secondary\" rounded=\"sm\" padding=\"sm\">Spans 2 columns</Box>\n    </Grid.Item>\n    <Box background=\"secondary\" rounded=\"sm\" padding=\"sm\">1 col</Box>\n    <Box background=\"secondary\" rounded=\"sm\" padding=\"sm\">1 col</Box>\n    <Grid.Item colSpan=\"full\">\n      <Box background=\"secondary\" rounded=\"sm\" padding=\"sm\">Full width</Box>\n    </Grid.Item>\n  </Grid>\n</Box>"},{"name":"Form Layout","description":"Paired fields with one full-width row.","code":"import { Box } from '@/components/Box';\nimport { Field } from '@/components/Field';\nimport { Grid } from '@/components/Grid';\nimport { Input } from '@/components/Input';\n\n<Box width=\"100%\">\n  <Grid columns={{ base: 1, md: 2 }} gap=\"md\">\n    <Field>\n      <Field.Label>First name</Field.Label>\n      <Input placeholder=\"Ada\" />\n    </Field>\n    <Field>\n      <Field.Label>Last name</Field.Label>\n      <Input placeholder=\"Lovelace\" />\n    </Field>\n    <Grid.Item colSpan=\"full\">\n      <Field>\n        <Field.Label>Email address</Field.Label>\n        <Input type=\"email\" placeholder=\"ada@example.com\" />\n      </Field>\n    </Grid.Item>\n  </Grid>\n</Box>"}],"contract":{"propsSummary":["columns: 1-12 | { base, sm, md, lg, xl } | \"auto\" (default: 1)","minChildWidth: string — min width for auto-fill (only with columns=\"auto\")","gap: none|xs|sm|md|lg|xl|number (default: md, number maps to space scale)","alignItems: start|center|end|stretch — vertical alignment","justifyItems: start|center|end|stretch — horizontal alignment","padding: none|sm|md|lg (default: none)","Pass-through DOM props supported on Grid and Grid.Item roots (id, role, aria-*, data-*, handlers)"]},"propsSummary":["children: node","columns: union (default: 1)","minChildWidth: string","gap: union (default: md)","alignItems: start|center|end|stretch","justifyItems: start|center|end|stretch","padding: none|sm|md|lg (default: none)","className: string","style: object"],"sourcePath":"src/components/Grid/index.tsx","exportName":"Grid","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:57.444Z"},"performance":{"bundleSize":2069,"rawSize":4663,"complexity":"lightweight","budgetPercent":13,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"src/utils/layout-spacing.ts","bytes":2475,"percent":53},{"path":"Grid (self)","bytes":1615,"percent":35}]}},"Header":{"filePath":"src/components/Header/index.tsx","meta":{"name":"Header","description":"Composes brand, navigation, search, and actions into one responsive app bar.","category":"layout","tags":["header","navigation","navbar","brand","layout","dropdown"],"status":"stable"},"usage":{"when":["Top-level navigation for an app or site","Inside AppShell.Header","Anywhere brand, nav, and actions share one row"],"whenNot":["Section headings inside a page (use a heading)","Toolbars scoped to one panel (use Toolbar)","Sidebar-only navigation (use Sidebar)"],"guidelines":["Header.Spacer pushes the actions cluster to the right","Omit Header.Brand when the sidebar already shows the logo","container=\"page\" caps the content at page width for marketing bars","elevatedOnScroll adds a bottom border once the page scrolls","Pair Header.Trigger with Header.MobileNav for small screens","Header.SkipLink should be the first child"],"accessibility":["Include Header.SkipLink for keyboard users","Navigation has aria-label for screen readers","Active nav items use aria-current=\"page\"","Mobile trigger has aria-expanded state","NavMenu dropdown opens with click and is keyboard navigable"]},"props":{"children":{"type":"node","description":"Header content (use Header.Brand, Header.Nav, etc.)","required":true},"height":{"type":"string","description":"Header height","default":"56px","required":false},"position":{"type":"enum","description":"Position behavior (usually controlled by AppShell)","default":"static","required":false,"values":["static","fixed","sticky"]},"elevatedOnScroll":{"type":"union","description":"Apply the elevated header border after scrolling. Object form accepts { threshold?: number }.","default":"false","required":false},"navAlign":{"type":"enum","description":"Navigation alignment inside the header","default":"start","required":false,"values":["start","center"]},"container":{"type":"enum","description":"Header content width","default":"full","required":false,"values":["full","page"]},"icons":{"type":"object","description":"Optional icon overrides for Header.Trigger (menu/close) and Header.NavMenu chevron","required":false},"style":{"type":"object","description":"","required":false}},"relations":[{"component":"AppShell","relationship":"parent","note":"Header is typically used inside AppShell.Header"},{"component":"Sidebar","relationship":"sibling","note":"Header.Trigger toggles Sidebar on mobile"},{"component":"Theme","relationship":"child","note":"ThemeToggle is commonly placed in Header.Actions"},{"component":"NavigationMenu","relationship":"child","note":"Use NavigationMenu inside Header for rich dropdown nav with auto mobile drawer"}],"variants":[{"name":"For Default Layout","description":"Brand, nav, and actions for AppShell layout=\"default\".","code":"import { Box } from '@/components/Box';\nimport { Button } from '@/components/Button';\nimport { Header } from '@/components/Header';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box width=\"100%\" border rounded=\"md\" overflow=\"hidden\">\n  <Header>\n    <Header.SkipLink />\n    <Header.Trigger />\n    <Header.Brand href=\"/\">MyApp</Header.Brand>\n    <Header.Nav>\n      <Header.NavItem href=\"/dashboard\" active>Dashboard</Header.NavItem>\n      <Header.NavItem href=\"/projects\">Projects</Header.NavItem>\n      <Header.NavItem href=\"/settings\">Settings</Header.NavItem>\n    </Header.Nav>\n    <Header.Spacer />\n    <Header.Actions>\n      <ThemeToggle size=\"md\" />\n      <Button variant=\"soft\" size=\"sm\">Sign In</Button>\n    </Header.Actions>\n  </Header>\n</Box>"},{"name":"Marketing Header","description":"Sticky page-width bar that gains a border on scroll, with a mobile drawer.","code":"import { Box } from '@/components/Box';\nimport { Button } from '@/components/Button';\nimport { Header } from '@/components/Header';\n\n<Box width=\"100%\" border rounded=\"md\" overflow=\"hidden\">\n  <Header position=\"sticky\" elevatedOnScroll navAlign=\"center\" container=\"page\">\n    <Header.SkipLink href=\"#main-content\" />\n    <Header.Brand asChild>\n      <a href=\"/\" aria-label=\"Home\">Logo</a>\n    </Header.Brand>\n    <Header.Nav aria-label=\"Main navigation\">\n      <Header.NavItem href=\"/docs\">Docs</Header.NavItem>\n      <Header.NavItem href=\"/pricing\">Pricing</Header.NavItem>\n    </Header.Nav>\n    <Header.Actions>\n      <Button size=\"sm\">Start free</Button>\n    </Header.Actions>\n    <Header.Trigger />\n    <Header.MobileNav>\n      <Header.MobileNavLink href=\"/docs\">Docs</Header.MobileNavLink>\n      <Header.MobileNavLink href=\"/pricing\">Pricing</Header.MobileNavLink>\n      <Header.MobileNavActions>\n        <Button size=\"sm\">Start free</Button>\n      </Header.MobileNavActions>\n    </Header.MobileNav>\n  </Header>\n</Box>"},{"name":"With Dropdown Nav","description":"Header.NavMenu groups related links behind one trigger.","code":"import { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box width=\"100%\" border rounded=\"md\" overflow=\"hidden\">\n  <Header>\n    <Header.Brand href=\"/\">MyApp</Header.Brand>\n    <Header.Nav>\n      <Header.NavItem href=\"/components\" active>Components</Header.NavItem>\n      <Header.NavItem href=\"/blocks\">Blocks</Header.NavItem>\n      <Header.NavMenu label=\"Docs\">\n        <Header.NavMenuItem href=\"/getting-started\">Getting Started</Header.NavMenuItem>\n        <Header.NavMenuItem href=\"/cli\">CLI Reference</Header.NavMenuItem>\n        <Header.NavMenuItem href=\"/mcp\">MCP Tools</Header.NavMenuItem>\n      </Header.NavMenu>\n      <Header.NavItem href=\"/blog\">Blog</Header.NavItem>\n    </Header.Nav>\n    <Header.Spacer />\n    <Header.Actions>\n      <ThemeToggle size=\"md\" />\n    </Header.Actions>\n  </Header>\n</Box>"},{"name":"For Sidebar Layout","description":"No brand — the logo lives in the sidebar instead.","code":"import { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Input } from '@/components/Input';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box width=\"100%\" border rounded=\"md\" overflow=\"hidden\">\n  <Header>\n    <Header.SkipLink />\n    <Header.Trigger />\n    <Header.Search>\n      <Input placeholder=\"Search...\" style={{ width: '240px' }} />\n    </Header.Search>\n    <Header.Spacer />\n    <Header.Actions>\n      <ThemeToggle size=\"md\" />\n    </Header.Actions>\n  </Header>\n</Box>"},{"name":"Minimal","description":"Just the drawer trigger and actions.","code":"import { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box width=\"100%\" border rounded=\"md\" overflow=\"hidden\">\n  <Header>\n    <Header.Trigger />\n    <Header.Spacer />\n    <Header.Actions>\n      <ThemeToggle size=\"md\" />\n    </Header.Actions>\n  </Header>\n</Box>"},{"name":"With Skip Link","description":"Header.SkipLink gives keyboard users a jump to main content.","code":"import { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\n\n<Box width=\"100%\" border rounded=\"md\" overflow=\"hidden\">\n  <Header>\n    <Header.SkipLink href=\"#main-content\">Skip to content</Header.SkipLink>\n    <Header.Brand>Accessible App</Header.Brand>\n    <Header.Nav>\n      <Header.NavItem href=\"/\" active>Home</Header.NavItem>\n      <Header.NavItem href=\"/about\">About</Header.NavItem>\n    </Header.Nav>\n  </Header>\n</Box>"},{"name":"With NavigationMenu","description":"Rich dropdown panels with titles and descriptions.","code":"import { Box } from '@/components/Box';\nimport { Button } from '@/components/Button';\nimport { Header } from '@/components/Header';\nimport { NavigationMenu } from '@/components/NavigationMenu';\nimport { Stack } from '@/components/Stack';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box width=\"100%\" border rounded=\"md\" overflow=\"hidden\">\n  <Header>\n    <Header.Brand href=\"/\">MyApp</Header.Brand>\n    <Header.Nav>\n      <NavigationMenu aria-label=\"Site navigation\">\n        <NavigationMenu.List>\n          <NavigationMenu.Item value=\"products\">\n            <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>\n            <NavigationMenu.Content>\n              <Box padding=\"xs\" style={{ minWidth: '200px' }}>\n                <Stack gap=\"none\">\n                  <NavigationMenu.Link href=\"/analytics\" title=\"Analytics\" description=\"Track your metrics.\" />\n                  <NavigationMenu.Link href=\"/automation\" title=\"Automation\" description=\"Automate workflows.\" />\n                </Stack>\n              </Box>\n            </NavigationMenu.Content>\n          </NavigationMenu.Item>\n          <NavigationMenu.Item>\n            <NavigationMenu.Link href=\"/pricing\">Pricing</NavigationMenu.Link>\n          </NavigationMenu.Item>\n        </NavigationMenu.List>\n        <NavigationMenu.Viewport />\n      </NavigationMenu>\n    </Header.Nav>\n    <Header.Spacer />\n    <Header.Actions>\n      <ThemeToggle size=\"md\" />\n      <Button variant=\"solid\" size=\"sm\">Sign Up</Button>\n    </Header.Actions>\n  </Header>\n</Box>"}],"contract":{"propsSummary":["height: string - header height (default: 56px)","position: static|fixed|sticky - positioning behavior","elevatedOnScroll: boolean|{ threshold?: number } - scroll-elevated boundary","navAlign: start|center - nav placement inside the header","container: full|page - content width and gutter","icons: { menu?, close?, navMenuChevron? } - custom internal control icons (ReactNode or render function)","Header.Brand asChild composes custom link components","Header.Trigger composes click handler with Sidebar toggle behavior","Header.NavMenu provides dropdown groups via Base UI Menu","Header.MobileNavActions provides an action row inside the mobile drawer"],"a11yRules":["A11Y_HEADER_LANDMARK","A11Y_NAV_LABEL","A11Y_SKIP_LINK","A11Y_BUTTON_LABEL"]},"ai":{"compositionPattern":"compound","subComponents":["SkipLink","Trigger","Brand","Nav","NavItem","MobileNav","MobileNavLink","MobileNavActions","NavMenu","NavMenuItem","Search","Spacer","Actions"],"commonPatterns":["<Header><Header.Brand href=\"/\">{appName}</Header.Brand><Header.Nav><Header.NavItem href=\"/home\" active>Home</Header.NavItem></Header.Nav><Header.Spacer /><Header.Actions>{actions}</Header.Actions></Header>","<Header position=\"sticky\" elevatedOnScroll navAlign=\"center\" container=\"page\"><Header.Brand asChild>{link}</Header.Brand><Header.Nav>{links}</Header.Nav><Header.Actions>{actions}</Header.Actions><Header.Trigger /><Header.MobileNav>{mobileLinks}<Header.MobileNavActions>{mobileActions}</Header.MobileNavActions></Header.MobileNav></Header>","<Header><Header.Nav><Header.NavItem href=\"/home\">Home</Header.NavItem><Header.NavMenu label=\"Docs\" active><Header.NavMenuItem href=\"/cli\">CLI</Header.NavMenuItem><Header.NavMenuItem href=\"/mcp\">MCP</Header.NavMenuItem></Header.NavMenu></Header.Nav></Header>"]},"propsSummary":["children: node (required)","height: string (default: 56px)","position: static|fixed|sticky (default: static)","elevatedOnScroll: boolean|{ threshold?: number }","navAlign: start|center (default: start)","container: full|page (default: full)","icons: object","style: object"],"sourcePath":"src/components/Header/index.tsx","exportName":"Header","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:58.820Z"},"performance":{"bundleSize":11366,"rawSize":36934,"complexity":"moderate","budgetPercent":74,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Sidebar","bytes":17553,"percent":48},{"path":"Header (self)","bytes":7135,"percent":19},{"path":"@phosphor-icons/react","bytes":5528,"percent":15},{"path":"src/recipes/popup.ts","bytes":2532,"percent":7},{"path":"ScrollArea","bytes":2512,"percent":7},{"path":"src/utils/a11y.tsx","bytes":779,"percent":2}]}},"Icon":{"filePath":"src/components/Icon/index.tsx","meta":{"name":"Icon","description":"Sizes and colours any icon so it lines up with the text beside it.","category":"display","tags":["icon","visual","symbol","graphic"],"status":"stable"},"usage":{"when":["A symbol sits beside text, inside a button, or leads a list item","State needs a glanceable marker"],"whenNot":["Artwork or illustration (use Image)","Multi-color or animated graphics"],"guidelines":["Reserve the success, warning, and danger tones for real state","Hold one size per context","Match weight to the text weight beside it","iconProps reaches options the wrapper does not expose"],"accessibility":["Icons ship aria-hidden — they are decoration until you label them","An icon-only button needs VisuallyHidden text","Color alone never carries the message"]},"props":{"style":{"type":"object","description":"","required":false},"icon":{"type":"union","description":"Icon component to render","required":true},"size":{"type":"enum","description":"Icon size","default":"md","required":false,"values":["xs","sm","md","lg","xl"]},"weight":{"type":"string","description":"Optional icon style/weight hint (forwarded when supported by the icon component)","default":"regular","required":false,"values":["thin","light","regular","bold","fill","duotone"]},"tone":{"type":"enum","description":"Semantic colour. Reserve success, warning and danger for real state; omit to inherit currentColor","required":false,"values":["accent","info","success","warning","danger"]},"color":{"type":"enum","description":"Text-hierarchy colour, the same axis as Text color. tone wins when both are set","required":false,"values":["primary","secondary","tertiary"]},"iconProps":{"type":"object","description":"Additional props forwarded to the underlying icon component (typed from the icon prop in TypeScript)","required":false}},"relations":[{"component":"Button","relationship":"child","note":"Use inside icon-only buttons with VisuallyHidden label"},{"component":"VisuallyHidden","relationship":"sibling","note":"Pair with VisuallyHidden for accessible icon-only elements"},{"component":"Badge","relationship":"child","note":"Can be used as badge icon prop"}],"variants":[{"name":"Default","description":"Inherits the size and color of its surroundings.","code":"<Icon icon={Heart} />"},{"name":"Sizes","description":"Steps tuned to the type scale, so icons never float off the baseline.","code":"<div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>\n  <Icon icon={Star} size=\"xs\" />\n  <Icon icon={Star} size=\"sm\" />\n  <Icon icon={Star} size=\"md\" />\n  <Icon icon={Star} size=\"lg\" />\n  <Icon icon={Star} size=\"xl\" />\n</div>"},{"name":"Tones","description":"Tone states carry meaning — never use them for decoration.","code":"<div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>\n  <Icon icon={Check} tone=\"success\" />\n  <Icon icon={Warning} tone=\"warning\" />\n  <Icon icon={Warning} tone=\"danger\" />\n  <Icon icon={Info} tone=\"accent\" />\n</div>"},{"name":"Hierarchy","description":"The text colour ladder, for glyphs that sit beside secondary or tertiary copy.","code":"<div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>\n  <Icon icon={Heart} color=\"primary\" />\n  <Icon icon={Heart} color=\"secondary\" />\n  <Icon icon={Heart} color=\"tertiary\" />\n</div>"},{"name":"Weights","description":"Match the stroke to the text weight next to it.","code":"<div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>\n  <Icon icon={Heart} weight=\"thin\" />\n  <Icon icon={Heart} weight=\"light\" />\n  <Icon icon={Heart} weight=\"regular\" />\n  <Icon icon={Heart} weight=\"bold\" />\n  <Icon icon={Heart} weight=\"fill\" />\n  <Icon icon={Heart} weight=\"duotone\" />\n</div>"},{"name":"Advanced Icon Props","description":"iconProps passes anything the underlying icon package supports.","code":"<Icon icon={Heart} iconProps={{ mirrored: true }} />"}],"contract":{"propsSummary":["icon: React component - icon component (required)","size: xs|sm|md|lg|xl - icon size","weight: string - optional style/weight hint for icons that support it","tone: accent|info|success|warning|danger - semantic colour","color: primary|secondary|tertiary - text-hierarchy colour","iconProps: typed from the passed icon component - advanced icon-specific props"],"a11yRules":["A11Y_ICON_LABEL","A11Y_COLOR_CONTRAST"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["style: object","icon: union (required)","size: xs|sm|md|lg|xl (default: md)","weight: string (default: regular)","tone: accent|info|success|warning|danger","color: primary|secondary|tertiary","iconProps: object"],"sourcePath":"src/components/Icon/index.tsx","exportName":"Icon","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:58.998Z"},"performance":{"bundleSize":1797,"rawSize":3847,"complexity":"lightweight","budgetPercent":12,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"src/measurements/index.ts","bytes":2491,"percent":65},{"path":"Icon (self)","bytes":770,"percent":20}]}},"IconButton":{"filePath":"src/components/IconButton/index.tsx","meta":{"name":"IconButton","description":"Runs an action from an icon alone, for toolbars and table rows.","category":"actions","tags":["action","button","icon","toolbar","interactive"],"status":"stable"},"usage":{"when":["Toolbars and top bars where text buttons crowd","Row actions too narrow for a label","Toggle actions that show a pressed state"],"whenNot":["The action needs a visible label — use Button","It flips a persistent setting — use Switch","The icon is decorative — use Icon"],"guidelines":["aria-label or aria-labelledby is required, every time","ghost for ordinary toolbar actions; outline when it needs separation","pressed only for real toggle state, not selection","Keep icon meaning obvious, or pair it with a Tooltip"],"accessibility":["Name the action, not the icon: \"Delete row\", not \"Trash\"","Pressed state is exposed via aria-pressed","Hit target stays at least 24px even at size=\"sm\""]},"props":{"children":{"type":"node","description":"Icon element rendered inside the button","required":true},"variant":{"type":"enum","description":"Visual treatment for the icon-only action","default":"ghost","required":false,"values":["ghost","soft","outline"]},"size":{"type":"enum","description":"Control size aligned with adjacent fields and toolbar actions","default":"\"md\"","required":false,"values":["sm","md","lg"]},"pressed":{"type":"boolean","description":"Marks a toggle-style action as pressed and sets aria-pressed","required":false},"aria-label":{"type":"string","description":"Accessible action name when no labelled-by relationship is available","required":false},"aria-labelledby":{"type":"string","description":"ID reference for an external accessible action label","required":false},"type":{"type":"enum","description":"","default":"button","required":false,"values":["submit","reset","button"]}},"relations":[{"component":"Button","relationship":"sibling","note":"Use Button when the action should have a visible text label or broader layout variants"},{"component":"Icon","relationship":"complementary","note":"Icon supplies the visual glyph rendered inside IconButton"}],"variants":[{"name":"Toolbar action","description":"Icon carries the action; the label lives in aria-label.","code":"import { Plus as PlusIcon } from '@phosphor-icons/react';\n\n<IconButton aria-label=\"Add item\">\n  <PlusIcon aria-hidden />\n</IconButton>"},{"name":"Variants","description":"Rising chrome: transparent, tinted, then bordered.","code":"import { Plus as PlusIcon } from '@phosphor-icons/react';\nimport { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" align=\"center\">\n  <IconButton aria-label=\"Add item\" variant=\"ghost\">\n    <PlusIcon aria-hidden />\n  </IconButton>\n  <IconButton aria-label=\"Add item\" variant=\"soft\">\n    <PlusIcon aria-hidden />\n  </IconButton>\n  <IconButton aria-label=\"Add item\" variant=\"outline\">\n    <PlusIcon aria-hidden />\n  </IconButton>\n</Stack>"},{"name":"Sizes","description":"sm for table rows, lg for primary chrome.","code":"import { Plus as PlusIcon } from '@phosphor-icons/react';\nimport { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" align=\"center\">\n  <IconButton aria-label=\"Add item\" variant=\"outline\" size=\"sm\">\n    <PlusIcon aria-hidden />\n  </IconButton>\n  <IconButton aria-label=\"Add item\" variant=\"outline\" size=\"md\">\n    <PlusIcon aria-hidden />\n  </IconButton>\n  <IconButton aria-label=\"Add item\" variant=\"outline\" size=\"lg\">\n    <PlusIcon aria-hidden />\n  </IconButton>\n</Stack>"},{"name":"Pressed state","description":"Toggle that stays on, reported through aria-pressed.","code":"import { PushPin as PinIcon } from '@phosphor-icons/react';\nimport { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" align=\"center\">\n  <IconButton aria-label=\"Pin item\" variant=\"outline\">\n    <PinIcon aria-hidden />\n  </IconButton>\n  <IconButton aria-label=\"Unpin item\" variant=\"outline\" pressed>\n    <PinIcon aria-hidden />\n  </IconButton>\n</Stack>"},{"name":"Disabled","description":"Unavailable action, out of the tab order.","code":"import { Trash as TrashIcon } from '@phosphor-icons/react';\n\n<IconButton aria-label=\"Delete row\" variant=\"outline\" disabled>\n  <TrashIcon aria-hidden />\n</IconButton>"}],"contract":{"propsSummary":["children: ReactNode - icon element (required)","variant: ghost|soft|outline - visual treatment","size: sm|md|lg - square control size","pressed: boolean - toggle state exposed with aria-pressed","aria-label or aria-labelledby - required accessible name"],"a11yRules":["A11Y_BTN_LABEL","A11Y_BTN_FOCUS","A11Y_TARGET_SIZE_MIN"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["children: node (required)","variant: ghost|soft|outline (default: ghost)","size: sm|md|lg (default: md)","pressed: boolean","aria-label: string","aria-labelledby: string"],"sourcePath":"src/components/IconButton/index.tsx","exportName":"IconButton","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-07-14T00:00:00.000Z"},"performance":{"bundleSize":818,"rawSize":1552,"complexity":"lightweight","budgetPercent":5,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"IconButton (self)","bytes":678,"percent":44},{"path":"ComponentDefaults","bytes":193,"percent":12},{"path":"src/utils/env.ts","bytes":89,"percent":6}]}},"Image":{"filePath":"src/components/Image/index.tsx","meta":{"name":"Image","description":"Renders a picture at a fixed shape with a built-in fallback when loading fails.","category":"display","tags":["image","media","photo","picture","visual"],"status":"stable"},"usage":{"when":["Product shots, thumbnails, and hero art","Uploads you do not control and cannot trust to load"],"whenNot":["A person (use Avatar)","A symbol (use Icon)","Pure decoration behind content (use a CSS background)"],"guidelines":["Set aspectRatio so a grid holds its shape before the file arrives","objectFit=\"contain\" for logos, \"cover\" for photography","Always give fallback something to say","imgProps, onImageLoad, and onImageError expose the raw img when you need it"],"accessibility":["alt is required — describe what the picture shows","Decoration takes alt=\"\"","Words baked into an image must be repeated in alt"]},"props":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for accessibility (required)","required":true},"aspectRatio":{"type":"enum","description":"Aspect ratio of the image container","default":"auto","required":false,"values":["1:1","4:3","16:9","21:9","auto"]},"objectFit":{"type":"enum","description":"How the image fits within its container","default":"cover","required":false,"values":["cover","contain","fill","none"]},"width":{"type":"union","description":"Width of the image container","required":false},"height":{"type":"union","description":"Height of the image container","required":false},"rounded":{"type":"enum","description":"Border radius","default":"none","required":false,"values":["none","sm","md","lg","full"]},"fallback":{"type":"node","description":"Content to show while loading or on error","required":false},"className":{"type":"string","description":"Additional class name","required":false},"style":{"type":"object","description":"Inline styles","required":false},"imgProps":{"type":"object","description":"Additional props for the underlying img element (except src/alt/size/style/events)","required":false},"onImageLoad":{"type":"function","description":"Called when the underlying img element loads","required":false},"onImageError":{"type":"function","description":"Called when the underlying img element fails to load","required":false}},"relations":[{"component":"Card","relationship":"child","note":"Common pattern to use Image at top of product cards"},{"component":"Avatar","relationship":"alternative","note":"Use Avatar for user profile pictures"}],"variants":[{"name":"Default","description":"src plus alt — the shape follows the file.","code":"<Image\n  src=\"https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400&h=300&fit=crop\"\n  alt=\"Code on a screen\"\n  width={300}\n/>"},{"name":"Aspect Ratios","description":"Lock the frame so a grid stays even whatever the file is.","code":"<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>\n  <Image\n    src=\"https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=200&h=200&fit=crop\"\n    alt=\"Square image\"\n    aspectRatio=\"1:1\"\n    width={100}\n  />\n  <Image\n    src=\"https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=200&h=150&fit=crop\"\n    alt=\"4:3 image\"\n    aspectRatio=\"4:3\"\n    width={120}\n  />\n  <Image\n    src=\"https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=320&h=180&fit=crop\"\n    alt=\"16:9 image\"\n    aspectRatio=\"16:9\"\n    width={160}\n  />\n</div>"},{"name":"Rounded Corners","description":"Rounding softens the frame; match it to the surface it sits on.","code":"<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>\n  <Image\n    src=\"https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=100&h=100&fit=crop\"\n    alt=\"No rounding\"\n    rounded=\"none\"\n    width={80}\n    height={80}\n  />\n  <Image\n    src=\"https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=100&h=100&fit=crop\"\n    alt=\"Medium rounding\"\n    rounded=\"md\"\n    width={80}\n    height={80}\n  />\n  <Image\n    src=\"https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=100&h=100&fit=crop\"\n    alt=\"Full rounding\"\n    rounded=\"full\"\n    width={80}\n    height={80}\n  />\n</div>"},{"name":"With Fallback","description":"A dead URL shows this instead of a broken-image glyph.","code":"<Image\n  src=\"https://invalid-url.example/image.jpg\"\n  alt=\"Image that will fail\"\n  width={200}\n  height={150}\n  rounded=\"md\"\n  fallback={\n    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', background: 'var(--fui-color-surface-secondary)' }}>\n      <span style={{ color: 'var(--fui-color-text-tertiary)' }}>No image</span>\n    </div>\n  }\n/>"}],"contract":{"propsSummary":["src: string - image URL (required)","alt: string - accessibility text (required)","aspectRatio: 1:1|4:3|16:9|21:9|auto - container ratio","objectFit: cover|contain|fill|none - image fitting","rounded: none|sm|md|lg|full - border radius","fallback: ReactNode - loading/error content","imgProps/onImageLoad/onImageError - low-level img customization and events"],"a11yRules":["A11Y_IMG_ALT","A11Y_IMG_DECORATIVE"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["src: string (required)","alt: string (required)","aspectRatio: 1:1|4:3|16:9|21:9|auto (default: auto)","objectFit: cover|contain|fill|none (default: cover)","width: union","height: union","rounded: none|sm|md|lg|full (default: none)","fallback: node","className: string","style: object","imgProps: object","onImageLoad: function","onImageError: function"],"sourcePath":"src/components/Image/index.tsx","exportName":"Image","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:59.379Z"},"performance":{"bundleSize":972,"rawSize":1781,"complexity":"lightweight","budgetPercent":6,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Image (self)","bytes":1194,"percent":67}]}},"Input":{"filePath":"src/components/Input/index.tsx","meta":{"name":"Input","description":"Collects a single line of user-entered text.","category":"inputs","tags":["form","input","text"],"status":"stable"},"usage":{"when":["Single-line answers: name, email, password, phone, URL","Search fields","Short free-form values a list cannot cover"],"whenNot":["Multi-line text (use Textarea)","Selecting from predefined options (use Select)","Boolean input (use Checkbox or Switch)","Date/time input (use DatePicker)"],"guidelines":["Give every field a label","Match type to the data — it drives validation and mobile keyboards","Placeholder shows format; it never replaces the label","Pair error with helperText so the reason is announced","Use the shortcut prop for kbd hints instead of custom markup","shortcut is display-only; shortcutBehavior=\"focus-input\" adds the global hotkey"],"accessibility":["Label is programmatically tied to the input","Error text is announced to screen readers","Required fields are marked"]},"props":{"value":{"type":"string","description":"Current input value (controlled)","required":false},"defaultValue":{"type":"string","description":"Default value for uncontrolled usage","required":false},"placeholder":{"type":"string","description":"Placeholder text shown when empty","required":false,"constraints":["Use for format hints only, not as a replacement for labels"]},"type":{"type":"enum","description":"HTML input type for validation and keyboard","default":"text","required":false,"values":["number","text","email","password","tel","url"]},"size":{"type":"enum","description":"Size variant","default":"\"md\"","required":false,"values":["sm","md","lg"]},"disabled":{"type":"boolean","description":"Whether the input is interactive","default":"false","required":false},"error":{"type":"boolean","description":"Whether to show error styling","default":"false","required":false},"label":{"type":"string","description":"Label text displayed above input","required":false},"required":{"type":"boolean","description":"Whether the field is required (shows asterisk)","default":"false","required":false},"helperText":{"type":"string","description":"Helper or error message below input","required":false},"startAdornment":{"type":"node","description":"Content rendered before the input (icon or prefix text)","required":false},"endAdornment":{"type":"node","description":"Content rendered after the input (icon or suffix text)","required":false},"shortcut":{"type":"string","description":"Keyboard shortcut hint displayed as a visual kbd token inside the input","required":false},"shortcutBehavior":{"type":"enum","description":"Whether shortcut hint is visual only or also registers a global focus hotkey","default":"display-only","required":false,"values":["display-only","focus-input"]},"onChange":{"type":"function","description":"Called with new value on change","required":false},"onValueChange":{"type":"function","description":"Value-first change callback alias: (value: string) => void","required":false},"onBlur":{"type":"function","description":"","required":false},"onFocus":{"type":"function","description":"","required":false},"onKeyDown":{"type":"function","description":"","required":false},"rootProps":{"type":"object","description":"HTML attributes applied to the wrapper element","required":false},"inputStyle":{"type":"object","description":"Inline styles applied directly to the input element","required":false},"inputClassName":{"type":"string","description":"Class name applied directly to the input element","required":false},"withFieldWrapper":{"type":"boolean","description":"Render built-in label/helper wrapper (set false for Field composition or bare input rendering)","default":"true","required":false},"className":{"type":"string","description":"Wrapper class name","required":false},"style":{"type":"object","description":"Wrapper styles","required":false}},"relations":[{"component":"Textarea","relationship":"alternative","note":"Use Textarea for multi-line text input"},{"component":"Select","relationship":"alternative","note":"Use Select when choosing from predefined options"},{"component":"Field","relationship":"parent","note":"Use Field for advanced form composition and custom controls"}],"variants":[{"name":"Default","description":"Label plus a placeholder that hints the format.","code":"<Input label=\"Name\" placeholder=\"Enter your name\" />"},{"name":"With Value","description":"Starts with a value already in the field.","code":"<Input label=\"Email\" type=\"email\" value=\"user@example.com\" />"},{"name":"With Helper","description":"Supporting text sits under the field.","code":"<Input\n  label=\"Password\"\n  type=\"password\"\n  placeholder=\"Create a password\"\n  helperText=\"Must be at least 8 characters\"\n/>"},{"name":"Error State","description":"Red border, and helperText becomes the reason.","code":"<Input\n  label=\"Email\"\n  type=\"email\"\n  value=\"invalid-email\"\n  error\n  helperText=\"Please enter a valid email address\"\n/>"},{"name":"Disabled","description":"Dimmed, unfocusable, still shows its value.","code":"<Input label=\"Username\" value=\"ada.lovelace\" disabled />"},{"name":"Required","description":"Asterisk marks the field as mandatory.","code":"<Input\n  label=\"Email\"\n  type=\"email\"\n  placeholder=\"user@example.com\"\n  required\n/>"},{"name":"Sizes","description":"Three heights: sm, md, lg.","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '12px', maxWidth: '300px' }}>\n  <Input label=\"Small\" size=\"sm\" placeholder=\"Small input\" />\n  <Input label=\"Medium\" size=\"md\" placeholder=\"Medium input\" />\n  <Input label=\"Large\" size=\"lg\" placeholder=\"Large input\" />\n</div>"},{"name":"Bare Input (Field Composition)","description":"Drops the built-in label wrapper so Field owns the layout.","code":"<Input\n  withFieldWrapper={false}\n  aria-label=\"Search\"\n  placeholder=\"Search...\"\n  rootProps={{ 'data-demo': 'bare-input-wrapper' }}\n/>"},{"name":"Search With Shortcut","description":"Leading icon and a ⌘K hint that focuses the field.","code":"<Input\n  aria-label=\"Search findings\"\n  placeholder=\"Search findings...\"\n  shortcut=\"⌘K\"\n  shortcutBehavior=\"focus-input\"\n  startAdornment={<MagnifyingGlass aria-hidden=\"true\" />}\n  withFieldWrapper={false}\n/>"},{"name":"With Start Adornment","description":"Prefix sits inside the field, before the text.","code":"<Input\n  label=\"Price\"\n  placeholder=\"0.00\"\n  startAdornment={<span>$</span>}\n/>"},{"name":"With End Adornment","description":"Suffix sits inside the field, after the text.","code":"<Input\n  label=\"Weight\"\n  placeholder=\"0\"\n  endAdornment={<span>kg</span>}\n/>"}],"contract":{"propsSummary":["type: text|email|password|number|tel|url (default: text)","value: string - controlled input value","label: string - accessible label text","placeholder: string - format hint only","disabled: boolean - disables interaction","required: boolean - required field indicator","error: boolean - shows error styling","startAdornment: ReactNode - content before the input (icon or prefix)","endAdornment: ReactNode - content after the input (icon or suffix)","shortcut: string - visual kbd hint inside the input; do not hand-roll extra kbd markup","helperText: string - helper/error message","onValueChange: (value: string) => void - value-first change callback alias","rootProps: HTMLAttributes<HTMLDivElement> - wrapper element props","withFieldWrapper: boolean - toggle built-in wrapper/label rendering (default: true)","shortcutBehavior: display-only|focus-input (default: display-only)","...native input attributes are supported (autoComplete, required, inputMode, pattern, etc.)"],"a11yRules":["A11Y_INPUT_LABEL","A11Y_INPUT_ERROR","A11Y_INPUT_REQUIRED"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["value: string","defaultValue: string","placeholder: string","type: number|text|email|password|tel|url (default: text)","size: sm|md|lg (default: md)","disabled: boolean (default: false)","error: boolean (default: false)","label: string","required: boolean (default: false)","helperText: string","startAdornment: node","endAdornment: node","shortcut: string","shortcutBehavior: display-only|focus-input (default: display-only)","onChange: function","onValueChange: function","onBlur: function","onFocus: function","onKeyDown: function","rootProps: object","inputStyle: object","inputClassName: string","withFieldWrapper: boolean (default: true)","className: string","style: object"],"sourcePath":"src/components/Input/index.tsx","exportName":"Input","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:59.208Z"},"performance":{"bundleSize":1695,"rawSize":3826,"complexity":"lightweight","budgetPercent":11,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Input (self)","bytes":2916,"percent":76},{"path":"ComponentDefaults","bytes":198,"percent":5},{"path":"src/utils/aria.ts","bytes":110,"percent":3}]}},"Link":{"filePath":"src/components/Link/index.tsx","meta":{"name":"Link","description":"Navigates somewhere else, inline or in chrome, with real link semantics.","category":"navigation","tags":["link","anchor","navigation","href","url"],"status":"stable"},"usage":{"when":["Inline links inside body text","Footer and sidebar navigation","\"Forgot password?\" and \"Sign up\" in forms","Pointing out to docs or external resources"],"whenNot":["A main call to action — use Button","Switching views in place — use Tabs","Dropdown items — use Menu"],"guidelines":["Name the destination; never \"click here\"","external sets target and rel — add your own \"opens in a new tab\" cue","tone=\"neutral\" for secondary links; add color=\"tertiary\" for metadata and footers","Links must stay distinguishable from surrounding text","asChild composes handlers with the child rather than replacing them"],"accessibility":["The link text alone should make sense out of context","Say when a link opens a new window","Focus ring must stay visible","A link that looks like a button still needs link semantics"]},"props":{"children":{"type":"node","description":"Link text content","required":true},"tone":{"type":"enum","description":"Colour. accent is the link ink; neutral reads as body text until hovered","default":"accent","required":false,"values":["accent","neutral"]},"color":{"type":"enum","description":"Text-hierarchy colour for a neutral link (Text color axis); tertiary is the quietest link","required":false,"values":["primary","secondary","tertiary"]},"underline":{"type":"enum","description":"Underline behavior","default":"hover","required":false,"values":["always","hover","none","dotted"]},"external":{"type":"boolean","description":"Opens in new tab with noopener noreferrer","default":"false","required":false},"asChild":{"type":"boolean","description":"Render as child element (polymorphic). Merges link props/classes and composes event handlers onto the single child (e.g. Next.js Link).","default":"false","required":false},"className":{"type":"string","description":"Additional class name","required":false},"style":{"type":"object","description":"Inline styles","required":false},"target":{"type":"union","description":"","required":false},"rel":{"type":"string","description":"","required":false}},"relations":[{"component":"Button","relationship":"alternative","note":"Use Button for primary actions, Link for navigation"},{"component":"Text","relationship":"parent","note":"Links often appear within Text components"}],"variants":[{"name":"Default","description":"Accent text that underlines on hover.","code":"<Link href=\"#\">Learn more about our services</Link>"},{"name":"Tones","description":"Accent, then neutral, then the quietest neutral.","code":"import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"md\" align=\"center\" wrap>\n  <Link href=\"#\" tone=\"accent\">Accent</Link>\n  <Link href=\"#\" tone=\"neutral\">Neutral</Link>\n  <Link href=\"#\" tone=\"neutral\" color=\"tertiary\">Tertiary</Link>\n</Stack>"},{"name":"Underline Styles","description":"Four rules for when the line shows.","code":"import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"md\" align=\"center\" wrap>\n  <Link href=\"#\" underline=\"always\">Always underlined</Link>\n  <Link href=\"#\" underline=\"hover\">Underline on hover</Link>\n  <Link href=\"#\" underline=\"dotted\">Dotted underline</Link>\n  <Link href=\"#\" underline=\"none\">No underline</Link>\n</Stack>"},{"name":"External Link","description":"Sets target and rel; you still supply the visible cue.","code":"<Link href=\"https://example.com\" external>\n  View documentation ↗\n</Link>"},{"name":"As Child (Polymorphic)","description":"Paints Link styling onto a router link and keeps both click handlers.","code":"<Link asChild tone=\"neutral\" onClick={() => {}}>\n  <a href=\"#pricing\" onClick={() => {}}>\n    Client-side navigation\n  </a>\n</Link>"}],"contract":{"propsSummary":["children: ReactNode - link text (required)","href: string - destination URL","tone: accent|neutral - colour","color: primary|secondary|tertiary - hierarchy colour on a neutral link","underline: always|hover|none|dotted - underline behavior","external: boolean - opens in new tab","asChild: boolean - polymorphic child rendering with merged styles and composed event handlers"],"a11yRules":["A11Y_LINK_TEXT","A11Y_LINK_FOCUS"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["children: node (required)","tone: accent|neutral (default: accent)","color: primary|secondary|tertiary","underline: always|hover|none|dotted (default: hover)","external: boolean (default: false)","asChild: boolean (default: false)","className: string","style: object","target: union","rel: string"],"sourcePath":"src/components/Link/index.tsx","exportName":"Link","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:59.546Z"},"performance":{"bundleSize":892,"rawSize":1618,"complexity":"lightweight","budgetPercent":6,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Link (self)","bytes":1045,"percent":65}]}},"List":{"filePath":"src/components/List/index.tsx","meta":{"name":"List","description":"Stacks items down the page with evenly spaced bullets, numbers, or icons.","category":"display","tags":["list","items","bullet","ordered","unordered"],"status":"stable"},"usage":{"when":["Steps, instructions, or anything with an order","Feature and benefit lists","Plain stacks of links in a sidebar"],"whenNot":["Items are pickable (use Menu or Select)","Items have columns (use Table)","Items need their own surface (use Card in a Grid)"],"guidelines":["Order matters? Use as=\"ol\" so the numbers are real","Keep one icon meaning per list — mixing icons reads as noise","Write items in parallel grammar; scanning depends on it","Stop nesting at two levels"],"accessibility":["Real ul/ol markup means screen readers announce the item count","Icons are decorative — the text has to carry the meaning"]},"props":{"children":{"type":"node","description":"List.Item components","required":true},"as":{"type":"enum","description":"List type","default":"ul","required":false,"values":["ul","ol"]},"marker":{"type":"enum","description":"Marker drawn before each item","default":"disc","required":false,"values":["none","disc","decimal","icon"]},"gap":{"type":"enum","description":"Spacing between items","default":"sm","required":false,"values":["none","xs","sm","md","lg","xl"]},"style":{"type":"object","description":"","required":false}},"relations":[{"component":"Icon","relationship":"child","note":"Use Icon as List.Item icon prop"},{"component":"Stack","relationship":"alternative","note":"Use Stack for non-semantic vertical lists"}],"variants":[{"name":"Bullet List","description":"The default marker — reach for it when order does not matter.","code":"<List marker=\"disc\">\n  <List.Item>First item</List.Item>\n  <List.Item>Second item</List.Item>\n  <List.Item>Third item</List.Item>\n</List>"},{"name":"Numbered List","description":"as=\"ol\" makes the sequence real, not just visual.","code":"<List as=\"ol\" marker=\"decimal\">\n  <List.Item>Create your account</List.Item>\n  <List.Item>Configure your settings</List.Item>\n  <List.Item>Start building</List.Item>\n</List>"},{"name":"Icon List","description":"Each item takes its own icon — checkmarks sell a feature list.","code":"<List marker=\"icon\">\n  <List.Item icon={<Check weight=\"bold\" color=\"var(--fui-color-success)\" />}>\n    Unlimited projects\n  </List.Item>\n  <List.Item icon={<Check weight=\"bold\" color=\"var(--fui-color-success)\" />}>\n    Priority support\n  </List.Item>\n  <List.Item icon={<Check weight=\"bold\" color=\"var(--fui-color-success)\" />}>\n    Advanced analytics\n  </List.Item>\n</List>"},{"name":"No Style","description":"No markers, wider gap — the shape for stacked nav links.","code":"<List marker=\"none\" gap=\"md\">\n  <List.Item>Dashboard</List.Item>\n  <List.Item>Settings</List.Item>\n  <List.Item>Profile</List.Item>\n</List>"}],"contract":{"propsSummary":["children: List.Item[] - list items (required)","as: ul|ol - list type","marker: none|disc|decimal|icon - marker before each item","gap: none|xs|sm|md|lg|xl - item spacing"],"a11yRules":["A11Y_LIST_SEMANTIC","A11Y_LIST_NESTING"]},"ai":{"compositionPattern":"compound","subComponents":["Item"],"commonPatterns":["<List>\n  <List.Item>...</List.Item>\n</List>"],"requiredChildren":["Item"]},"propsSummary":["children: node (required)","as: ul|ol (default: ul)","marker: none|disc|decimal|icon (default: disc)","gap: none|xs|sm|md|lg|xl (default: sm)","style: object"],"sourcePath":"src/components/List/index.tsx","exportName":"List","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:18:59.915Z"},"performance":{"bundleSize":749,"rawSize":1458,"complexity":"lightweight","budgetPercent":5,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"List (self)","bytes":824,"percent":57}]}},"Listbox":{"filePath":"src/components/Listbox/index.tsx","meta":{"name":"Listbox","description":"Shows a keyboard-navigable list of options with no trigger of its own.","category":"inputs","tags":["listbox","search","autocomplete","combobox","command","dropdown"],"status":"stable"},"usage":{"when":["Results under a search field","Autocomplete suggestions","Command palette results","Any list the user drives with arrow keys"],"whenNot":["A list nobody selects from (use List)","Actions behind a button (use Menu)","A form field (use Select)","Navigation (use Sidebar or Tabs)"],"guidelines":["You own open state — drive it from the input's focus and query","Arrows, Home, End, Enter, and Space are handled for you","Always supply Listbox.Empty","Group once the list draws from more than one source"],"accessibility":["Uses listbox and option ARIA roles","aria-selected indicates current selection","aria-disabled for non-interactive items","Connect to input with aria-controls for full combobox pattern"]},"props":{"children":{"type":"node","description":"Listbox.Item, Listbox.Group, or Listbox.Empty components","required":true},"style":{"type":"object","description":"","required":false},"tabIndex":{"type":"number","description":"","required":false},"onFocus":{"type":"function","description":"","required":false},"onKeyDown":{"type":"function","description":"","required":false}},"relations":[{"component":"Input","relationship":"sibling","note":"Pair with Input for search/autocomplete patterns"},{"component":"Menu","relationship":"alternative","note":"Use Menu when you need a trigger button"},{"component":"Select","relationship":"alternative","note":"Use Select for form field selection"},{"component":"List","relationship":"alternative","note":"Use List for static, non-interactive lists"}],"variants":[{"name":"Default","description":"Plain options, one selectable at a time.","code":"<Listbox aria-label=\"Options\">\n  <Listbox.Item selected>First option</Listbox.Item>\n  <Listbox.Item>Second option</Listbox.Item>\n  <Listbox.Item>Third option</Listbox.Item>\n</Listbox>"},{"name":"Search Results","description":"Trailing metadata explains each match.","code":"<Listbox aria-label=\"Search results\">\n  <Listbox.Item selected>\n    <span style={{ fontWeight: 500 }}>Button</span>\n    <span style={{ marginLeft: 'auto', fontSize: '0.75rem', color: 'var(--fui-text-tertiary)' }}>Components</span>\n  </Listbox.Item>\n  <Listbox.Item>\n    <span style={{ fontWeight: 500 }}>Badge</span>\n    <span style={{ marginLeft: 'auto', fontSize: '0.75rem', color: 'var(--fui-text-tertiary)' }}>Components</span>\n  </Listbox.Item>\n  <Listbox.Item>\n    <span style={{ fontWeight: 500 }}>Box</span>\n    <span style={{ marginLeft: 'auto', fontSize: '0.75rem', color: 'var(--fui-text-tertiary)' }}>Layout</span>\n  </Listbox.Item>\n</Listbox>"},{"name":"With Groups","description":"Labels split the list by source.","code":"<Listbox aria-label=\"Commands\">\n  <Listbox.Group label=\"Recent\">\n    <Listbox.Item selected>Open file...</Listbox.Item>\n    <Listbox.Item>Save as...</Listbox.Item>\n  </Listbox.Group>\n  <Listbox.Group label=\"Actions\">\n    <Listbox.Item>Copy</Listbox.Item>\n    <Listbox.Item>Paste</Listbox.Item>\n    <Listbox.Item disabled>Cut</Listbox.Item>\n  </Listbox.Group>\n</Listbox>"},{"name":"Empty State","description":"Says so when nothing matches.","code":"<Listbox aria-label=\"Search results\">\n  <Listbox.Empty>No results found</Listbox.Empty>\n</Listbox>"},{"name":"With Disabled Items","description":"Unavailable rows stay visible but inert.","code":"<Listbox aria-label=\"Options\">\n  <Listbox.Item>Available option</Listbox.Item>\n  <Listbox.Item disabled>Disabled option</Listbox.Item>\n  <Listbox.Item>Another option</Listbox.Item>\n</Listbox>"}],"contract":{"propsSummary":["children: ReactNode - Listbox.Item components (required)","aria-label: string - accessible label","Listbox.Item selected: boolean - highlight state","Listbox.Item disabled: boolean - non-interactive"],"a11yRules":["A11Y_LISTBOX_ROLE","A11Y_OPTION_ROLE"]},"ai":{"compositionPattern":"compound","subComponents":["Item","Group","Empty"],"requiredChildren":["Item"],"commonPatterns":["<Listbox aria-label=\"Search results\">{results.map(item => <Listbox.Item key={item.id} selected={item.id === selectedId} onClick={() => onSelect(item)}>{item.label}</Listbox.Item>)}</Listbox>"]},"propsSummary":["children: node (required)","style: object","tabIndex: number","onFocus: function","onKeyDown: function"],"sourcePath":"src/components/Listbox/index.tsx","exportName":"Listbox","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:05.924Z"},"performance":{"bundleSize":1661,"rawSize":3896,"complexity":"lightweight","budgetPercent":11,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Listbox (self)","bytes":3237,"percent":83}]}},"Loading":{"filePath":"src/components/Loading/index.tsx","meta":{"name":"Loading","description":"Signals that something is happening when you cannot say how long it will take.","category":"feedback","tags":["loading","spinner","progress","feedback","indicator","async"],"status":"stable"},"usage":{"when":["Fetching or processing content","Waiting on an async action to come back","Buttons, forms, and page sections mid-request","The first paint of an app or page"],"whenNot":["You know the percentage — use Progress","You know the page shape — use Skeleton","AI reasoning states — use ThinkingIndicator"],"guidelines":["spinner for general waits","dots for chat and messaging","pulse for quiet ambient waiting","Always pass a label describing what is loading","Loading.Screen for first page load, Loading.Inline to sit inside a sentence"],"accessibility":["Announced through role=\"status\" with aria-live=\"polite\"","label is what a screen reader reads — make it specific","Animation stops for prefers-reduced-motion"]},"props":{"size":{"type":"enum","description":"Size of the loading indicator","default":"md","required":false,"values":["sm","md","lg","xl"]},"kind":{"type":"enum","description":"Which animation plays","default":"spinner","required":false,"values":["spinner","dots","pulse"]},"label":{"type":"string","description":"Accessible label for screen readers","default":"Loading...","required":false},"centered":{"type":"boolean","description":"Whether to center the loading indicator in its container","default":"false","required":false},"fill":{"type":"boolean","description":"Whether to fill the parent container","default":"false","required":false},"overlay":{"type":"boolean","description":"Whether to show with a backdrop overlay","default":"false","required":false},"color":{"type":"enum","description":"Colour. accent uses the theme accent, current inherits the surrounding text colour","default":"accent","required":false,"values":["accent","current","muted"]}},"relations":[],"variants":[{"name":"Default","description":"Spinner at medium size, accent coloured.","code":"<Loading label=\"Loading content\" />"},{"name":"Sizes","description":"sm inside controls, xl for a whole page.","code":"import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"lg\" align=\"center\">\n  <Loading size=\"sm\" label=\"Loading\" />\n  <Loading size=\"md\" label=\"Loading\" />\n  <Loading size=\"lg\" label=\"Loading\" />\n  <Loading size=\"xl\" label=\"Loading\" />\n</Stack>"},{"name":"Dots","description":"Three bouncing dots, at home in a message thread.","code":"<Loading kind=\"dots\" label=\"Sending message\" />"},{"name":"Pulse","description":"One breathing dot for ambient background work.","code":"<Loading kind=\"pulse\" label=\"Syncing\" />"},{"name":"Colors","description":"Accent, muted, or whatever the surrounding text is.","code":"import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"lg\" align=\"center\">\n  <Loading color=\"accent\" label=\"Loading\" />\n  <Loading color=\"muted\" label=\"Loading\" />\n  <span style={{ color: 'var(--fui-color-info)' }}>\n    <Loading color=\"current\" label=\"Loading\" />\n  </span>\n</Stack>"},{"name":"Inline","description":"Sits on the text baseline mid-sentence.","code":"<p style={{ margin: 0 }}>\n  Processing your request <Loading.Inline label=\"Processing\" /> please wait…\n</p>"},{"name":"Centered","description":"Fills its container and centres in it.","code":"<div\n  style={{\n    width: '200px',\n    height: '100px',\n    border: '1px dashed var(--fui-border)',\n    borderRadius: 'var(--fui-radius-md)',\n  }}\n>\n  <Loading centered fill label=\"Loading section\" />\n</div>"},{"name":"Screen","description":"Covers the surface it sits on and names the wait.","code":"<div\n  style={{\n    position: 'relative',\n    contain: 'layout',\n    width: '300px',\n    height: '200px',\n    border: '1px solid var(--fui-border)',\n    borderRadius: 'var(--fui-radius-md)',\n    overflow: 'hidden',\n  }}\n>\n  <Loading.Screen size=\"lg\" label=\"Loading application…\" showLabel />\n</div>"}],"contract":{"propsSummary":["size: sm|md|lg|xl (default: md)","kind: spinner|dots|pulse (default: spinner)","label: string (default: Loading...)","centered: boolean (default: false)","fill: boolean (default: false)","overlay: boolean (default: false)","color: accent|current|muted (default: accent)"]},"ai":{"compositionPattern":"compound","subComponents":["Inline","Screen"]},"propsSummary":["size: sm|md|lg|xl (default: md)","kind: spinner|dots|pulse (default: spinner)","label: string (default: Loading...)","centered: boolean (default: false)","fill: boolean (default: false)","overlay: boolean (default: false)","color: accent|current|muted (default: accent)"],"sourcePath":"src/components/Loading/index.tsx","exportName":"Loading","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:05.576Z"},"performance":{"bundleSize":1129,"rawSize":2670,"complexity":"lightweight","budgetPercent":7,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Loading (self)","bytes":2026,"percent":76}]}},"Main":{"filePath":"src/components/Main/index.tsx","meta":{"name":"Main","description":"Owns a page's gutters, reading measure, and vertical rhythm.","category":"layout","tags":["main","page","layout","compound"],"status":"stable"},"usage":{"when":["Laying out a page's header, description, content, and footer","Giving a page one consistent gutter and measure"],"whenNot":["Shell-level navigation chrome (use AppShell)","Arbitrary spacing inside a component (use Stack or Box)"],"guidelines":["One Main per page owns the gutters — do not nest them","measure=\"narrow\" caps content for reading; \"full\" uses the whole canvas","Compose regions with Main.Header, Main.Description, Main.Content, Main.Footer","Main.Description caps itself at 68ch regardless of measure"],"accessibility":["Use the default main element unless an existing shell already owns the main landmark"]},"props":{"children":{"type":"node","description":"Page regions composed from Main.Header, Main.Description, Main.Content, and Main.Footer","required":true},"measure":{"type":"enum","description":"Maximum width applied to the page composition","default":"full","required":false,"values":["full","narrow"]},"as":{"type":"enum","description":"Semantic HTML element rendered by the root","default":"main","required":false,"values":["div","section","nav","article","aside","header","footer","main","ul","ol"]}},"relations":[],"variants":[{"name":"Full Measure","description":"Content fills the canvas, inset only by the page gutter.","code":"import { Box } from '@/components/Box';\nimport { Main } from '@/components/Main';\n\n<Box width=\"100%\" border rounded=\"md\">\n  <Main measure=\"full\">\n    <Main.Header>Findings</Main.Header>\n    <Main.Description>\n      Every governance finding raised against this repository, newest first.\n    </Main.Description>\n    <Main.Content>\n      Content stretches edge to edge, inset only by the page gutter.\n    </Main.Content>\n    <Main.Footer>Export report</Main.Footer>\n  </Main>\n</Box>"},{"name":"Narrow Measure","description":"Caps content at the reading measure and centres it on wide screens.","code":"import { Box } from '@/components/Box';\nimport { Main } from '@/components/Main';\n\n<Box width=\"100%\" border rounded=\"md\">\n  <Main measure=\"narrow\">\n    <Main.Header>Settings</Main.Header>\n    <Main.Description>\n      Manage the workspace contract, canonical components, and token files.\n    </Main.Description>\n    <Main.Content>\n      Content is capped at the reading measure and centred, so long prose stays\n      comfortable to read on wide displays.\n    </Main.Content>\n    <Main.Footer>Save changes</Main.Footer>\n  </Main>\n</Box>"}],"contract":{"propsSummary":["children: node (required)","measure: full|narrow (default: full)","as: semantic element (default: main)"]},"ai":{"compositionPattern":"compound","subComponents":["Header","Description","Content","Footer"],"commonPatterns":["<Main>\n  <Main.Header>...</Main.Header>\n  <Main.Description>...</Main.Description>\n  <Main.Content>...</Main.Content>\n  <Main.Footer>...</Main.Footer>\n</Main>"],"requiredChildren":["Header","Description","Content","Footer"]},"propsSummary":["children: node (required)","measure: full|narrow (default: full)","as: semantic element (default: main)"],"sourcePath":"src/components/Main/index.tsx","exportName":"Main","provenance":{"source":"manual","verified":true,"frameworkSupport":"native"},"performance":{"bundleSize":2508,"rawSize":6182,"complexity":"lightweight","budgetPercent":16,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Stack","bytes":4469,"percent":72},{"path":"Main (self)","bytes":1139,"percent":18}]}},"Markdown":{"filePath":"src/components/Markdown/index.tsx","meta":{"name":"Markdown","description":"Turns a Markdown string into styled headings, lists, tables, code, and quotes.","category":"display","tags":["markdown","prose","content","text","ai","chat"],"status":"stable","dependencies":[{"name":"react-markdown","version":">=9.0.0","reason":"Optional — parses markdown; without it content renders as plain paragraphs."},{"name":"remark-gfm","version":">=4.0.0","reason":"Optional — adds GitHub-flavored markdown (tables, strikethrough, task lists)."}]},"usage":{"when":["Rendering an LLM reply","Showing text a user wrote in Markdown","Docs or readme content inside the app"],"whenNot":["The string has no formatting (use Text)","The user needs to edit it (use an editor)"],"guidelines":["react-markdown and remark-gfm are peer dependencies — install both","The parser loads on demand, so the first frame is plain text; call Markdown.preload() at startup to skip it","Without react-markdown installed it degrades to plain paragraphs","components overrides how any element renders","react-markdown sanitises the content for you"],"accessibility":["Output is real headings, lists, and tables","Links render as anchors, images keep their alt text"]},"props":{"content":{"type":"string","description":"Markdown string to render","required":true},"components":{"type":"object","description":"Override map for markdown element components (e.g., { h1: MyHeading }). Accepts custom renderer component signatures used by react-markdown","required":false},"className":{"type":"string","description":"Additional CSS class name","required":false}},"relations":[{"component":"Text","relationship":"alternative","note":"Use Text for plain, non-markdown text"},{"component":"CodeBlock","relationship":"complementary","note":"CodeBlock can be used via components prop for syntax highlighting"},{"component":"Message","relationship":"parent","note":"Message wraps Markdown when markdown prop is true"}],"variants":[{"name":"Default","description":"Headings, emphasis, lists, and quotes all pick up the type scale.","code":"<Markdown content={`# Hello World\n\nThis is a paragraph with **bold text** and *italic text*.\n\nHere is some \\`inline code\\` within a sentence.\n\n- First item\n- Second item\n- Third item\n\n> A blockquote for emphasis.\n`} />"},{"name":"GFM Table","description":"remark-gfm adds tables and checkbox items on top of the basics.","code":"<Markdown content={`## Data Overview\n\n| Feature    | Status    | Priority |\n|------------|-----------|----------|\n| Markdown   | Done      | High     |\n| Tables     | Done      | Medium   |\n| Task Lists | Planned   | Low      |\n\nNotes:\n- [x] Support GFM tables\n- [x] Support task lists\n- [ ] Syntax highlighting\n`} />"},{"name":"Code Block","description":"Fenced blocks get the same code surface as CodeBlock.","code":"<Markdown content={`## Code Example\n\nHere is a JavaScript function:\n\n```js\nfunction greet(name) {\n  return 'Hello, ' + name;\n}\n```\n\nAnd some inline code: \\`const x = 42;\\``} />"},{"name":"Mixed Content","description":"A realistic document — the worst case worth checking.","code":"<Markdown content={`# Project Update\n\n## Summary\n\nThe project is progressing well. Here are the **key highlights**:\n\n1. Completed the *design system* components\n2. Added markdown rendering support\n3. Integrated with the documentation site\n\n### Performance Metrics\n\n| Metric      | Before | After |\n|-------------|--------|-------|\n| Bundle Size | 142kb  | 98kb  |\n| Load Time   | 1.2s   | 0.8s  |\n| Lighthouse  | 72     | 95    |\n\n> These improvements were achieved through tree-shaking and code splitting.\n\n### Next Steps\n\n- [ ] Add syntax highlighting\n- [ ] Support custom themes\n- [x] GFM table support\n`} />"}],"contract":{"propsSummary":["content: string - Markdown string to render","components: object - Override map for element components (react-markdown renderer components)","className: string - Additional CSS class","Forwards standard HTML div attributes to the wrapper element"],"a11yRules":["A11Y_SEMANTIC_HTML"]},"ai":{"compositionPattern":"compound","subComponents":["Root","preload"]},"propsSummary":["content: string (required)","components: object","className: string"],"sourcePath":"src/components/Markdown/index.tsx","exportName":"Markdown","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:06.091Z"},"performance":{"bundleSize":50235,"rawSize":162771,"complexity":"heavy","budgetPercent":327,"overBudget":true,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"react-markdown","bytes":120667,"percent":74},{"path":"remark-gfm","bytes":40158,"percent":25},{"path":"Markdown (self)","bytes":1101,"percent":1},{"path":"src/utils/env.ts","bytes":93,"percent":0}]}},"Menu":{"filePath":"src/components/Menu/index.tsx","meta":{"name":"Menu","description":"Drops a list of actions below a trigger, driveable entirely by keyboard.","category":"overlays","tags":["menu","dropdown","actions","context-menu","commands","submenu"],"status":"stable"},"usage":{"when":["Actions that do not fit in the toolbar","Right-click context actions","Account and profile actions","Related actions that read better grouped"],"whenNot":["Picking a value for a form (use Select)","Moving between pages or views (use Tabs or NavigationMenu)","One of a few visible choices (use RadioGroup)"],"guidelines":["Group related actions and separate the rest","Show the keyboard shortcut where one exists","Mark destructive actions with the danger variant","Past a dozen rows, reach for Command instead","Nest at most one level of submenu","asChild on Trigger needs a single element child"],"accessibility":["Full keyboard navigation with arrow keys","Type-ahead search for items","Focus returns to trigger on close","Proper ARIA menu roles","ArrowRight opens submenus, ArrowLeft closes them"]},"props":{"children":{"type":"node","description":"Menu trigger and content","required":true},"open":{"type":"boolean","description":"Controlled open state","required":false},"defaultOpen":{"type":"boolean","description":"Default open state (uncontrolled)","default":"false","required":false},"onOpenChange":{"type":"function","description":"Called when open state changes","required":false},"modal":{"type":"boolean","description":"Whether menu is modal","default":"true","required":false}},"relations":[{"component":"Select","relationship":"alternative","note":"Use Select for form field selection"},{"component":"Popover","relationship":"alternative","note":"Use Popover for rich non-action content"}],"variants":[{"name":"Default","description":"Plain actions, one per row.","code":"<Menu>\n  <Menu.Trigger asChild>\n    <Button variant=\"soft\">Actions</Button>\n  </Menu.Trigger>\n  <Menu.Content>\n    <Menu.Item onSelect={() => {}}>Edit</Menu.Item>\n    <Menu.Item onSelect={() => {}}>Duplicate</Menu.Item>\n    <Menu.Separator />\n    <Menu.Item danger onSelect={() => {}}>Delete</Menu.Item>\n  </Menu.Content>\n</Menu>"},{"name":"With Shortcuts","description":"Trailing keys teach the faster path.","code":"<Menu>\n  <Menu.Trigger asChild>\n    <Button variant=\"soft\">Edit</Button>\n  </Menu.Trigger>\n  <Menu.Content>\n    <Menu.Item shortcut=\"Ctrl+Z\" onSelect={() => {}}>Undo</Menu.Item>\n    <Menu.Item shortcut=\"Ctrl+Y\" onSelect={() => {}}>Redo</Menu.Item>\n    <Menu.Separator />\n    <Menu.Item shortcut=\"Ctrl+C\" onSelect={() => {}}>Copy</Menu.Item>\n    <Menu.Item shortcut=\"Ctrl+V\" onSelect={() => {}}>Paste</Menu.Item>\n  </Menu.Content>\n</Menu>"},{"name":"With Groups","description":"Labels separate unrelated actions.","code":"<Menu>\n  <Menu.Trigger asChild>\n    <Button variant=\"soft\">Options</Button>\n  </Menu.Trigger>\n  <Menu.Content>\n    <Menu.Group>\n      <Menu.GroupLabel>View</Menu.GroupLabel>\n      <Menu.Item onSelect={() => {}}>Zoom In</Menu.Item>\n      <Menu.Item onSelect={() => {}}>Zoom Out</Menu.Item>\n    </Menu.Group>\n    <Menu.Separator />\n    <Menu.Group>\n      <Menu.GroupLabel>Layout</Menu.GroupLabel>\n      <Menu.Item onSelect={() => {}}>Grid View</Menu.Item>\n      <Menu.Item onSelect={() => {}}>List View</Menu.Item>\n    </Menu.Group>\n  </Menu.Content>\n</Menu>"},{"name":"With Checkboxes","description":"Rows that stay open while you toggle them.","code":"<Menu>\n  <Menu.Trigger asChild>\n    <Button variant=\"soft\">Display</Button>\n  </Menu.Trigger>\n  <Menu.Content>\n    <Menu.CheckboxItem defaultChecked>Show Grid</Menu.CheckboxItem>\n    <Menu.CheckboxItem defaultChecked>Show Rulers</Menu.CheckboxItem>\n    <Menu.CheckboxItem>Show Guides</Menu.CheckboxItem>\n  </Menu.Content>\n</Menu>"},{"name":"With Checked Items","description":"Ticks mark which filters are on.","code":"<CheckedItemsMenuDemo />"},{"name":"With Submenu","description":"Secondary options nest one level deep.","code":"<Menu>\n  <Menu.Trigger asChild>\n    <Button variant=\"soft\">File</Button>\n  </Menu.Trigger>\n  <Menu.Content>\n    <Menu.Item onSelect={() => {}}>New File</Menu.Item>\n    <Menu.Item onSelect={() => {}}>Open</Menu.Item>\n    <Menu.Separator />\n    <Menu.Submenu>\n      <Menu.SubmenuTrigger>Export As</Menu.SubmenuTrigger>\n      <Menu.Content side=\"right\" align=\"start\">\n        <Menu.Item onSelect={() => {}}>PNG</Menu.Item>\n        <Menu.Item onSelect={() => {}}>SVG</Menu.Item>\n        <Menu.Item onSelect={() => {}}>PDF</Menu.Item>\n      </Menu.Content>\n    </Menu.Submenu>\n    <Menu.Separator />\n    <Menu.Item danger onSelect={() => {}}>Delete</Menu.Item>\n  </Menu.Content>\n</Menu>"},{"name":"Link Trigger","description":"asChild lets a link open it.","code":"<Menu>\n  <Menu.Trigger asChild>\n    <a href=\"#menu-actions\">Open menu</a>\n  </Menu.Trigger>\n  <Menu.Content>\n    <Menu.Item onSelect={() => {}}>Inspect</Menu.Item>\n    <Menu.Item onSelect={() => {}}>Rename</Menu.Item>\n  </Menu.Content>\n</Menu>"}],"contract":{"propsSummary":["open: boolean - controlled open state","onOpenChange: (open) => void - state handler","Menu.Trigger asChild supports non-button trigger elements","Menu.Item onSelect: (event) => void - selection callback receives click event","Menu.Item danger: boolean - destructive styling","Menu.Item shortcut: string - keyboard shortcut text","Menu.Item checked: boolean - check indicator for selection state"],"a11yRules":["A11Y_MENU_KEYBOARD","A11Y_MENU_ROLE"]},"ai":{"compositionPattern":"compound","subComponents":["Trigger","Content","Item","CheckboxItem","RadioGroup","RadioItem","Group","GroupLabel","Separator","Submenu","SubmenuTrigger"],"requiredChildren":["Trigger","Content"],"commonPatterns":["<Menu><Menu.Trigger asChild><Button>Actions</Button></Menu.Trigger><Menu.Content><Menu.Item>{action1}</Menu.Item><Menu.Separator /><Menu.Item danger>{delete}</Menu.Item></Menu.Content></Menu>"]},"propsSummary":["children: node (required)","open: boolean","defaultOpen: boolean","onOpenChange: function","modal: boolean (default: true)"],"sourcePath":"src/components/Menu/index.tsx","exportName":"Menu","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:00.159Z"},"performance":{"bundleSize":2660,"rawSize":7277,"complexity":"lightweight","budgetPercent":17,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Menu (self)","bytes":3945,"percent":54},{"path":"src/recipes/popup.ts","bytes":2527,"percent":35}]}},"Message":{"filePath":"src/components/Message/index.tsx","meta":{"name":"Message","description":"Shows one chat message, styled by who sent it.","category":"ai","tags":["message","chat","ai","conversation","bubble"],"status":"stable"},"usage":{"when":["Individual turns in a chat transcript","AI assistant and chatbot interfaces","User and assistant turns that must read differently","Turns carrying copy, regenerate, or feedback actions"],"whenNot":["Plain text with no chat context (use Text)","Notifications (use Alert or Toast)","Threads with nested replies (use Card with a custom layout)"],"guidelines":["Always set role — it drives alignment, avatar, and chrome","status covers pending, streaming, and error","Hide avatars with avatar={null}, or showAvatars={false} on ConversationList","User bubbles cap at 80% of the inline measure so the two sides stay distinct","Chrome stays on neutral surfaces; reserve accent for actions and semantic state","Add timestamps once a conversation runs long","Give assistant turns hover actions such as copy and regenerate"],"accessibility":["Uses semantic HTML for message structure","Role-based styling has sufficient color contrast","Actions are keyboard accessible","Streaming indicator respects reduced motion preferences"]},"props":{"role":{"type":"enum","description":"Message role determines styling and alignment","required":true,"values":["user","assistant","system"]},"children":{"type":"node","description":"Message content","required":true},"status":{"type":"enum","description":"Message state","default":"complete","required":false,"values":["pending","streaming","complete","error"]},"timestamp":{"type":"object","description":"When the message was sent","required":false},"avatar":{"type":"node","description":"Custom avatar override (null to hide)","required":false},"actions":{"type":"node","description":"Hover actions (copy, regenerate)","required":false}},"relations":[{"component":"ConversationList","relationship":"parent","note":"Messages are typically used within ConversationList"},{"component":"Avatar","relationship":"child","note":"Use Avatar component for custom avatar content"},{"component":"ThinkingIndicator","relationship":"sibling","note":"Show ThinkingIndicator while awaiting assistant response"}],"variants":[{"name":"User Message","description":"Right-aligned and capped at 80% of the available width.","code":"<Message role=\"user\">\n  <Message.Content>\n    Hello! Can you help me with a coding question?\n  </Message.Content>\n</Message>"},{"name":"Assistant Message","description":"Left-aligned with an avatar and a wider measure.","code":"<Message role=\"assistant\">\n  <Message.Content>\n    Of course! I'd be happy to help. What would you like to know?\n  </Message.Content>\n</Message>"},{"name":"System Message","description":"Centred and quiet, for context rather than conversation.","code":"<Message role=\"system\">\n  <Message.Content>\n    Conversation started. Model: GPT-4\n  </Message.Content>\n</Message>"},{"name":"Streaming","description":"A blinking caret trails the text as it arrives.","code":"<Message role=\"assistant\" status=\"streaming\">\n  <Message.Content>\n    I'm currently generating a response for you\n  </Message.Content>\n</Message>"},{"name":"With Timestamp","description":"A relative send time sits beneath the bubble.","code":"<Message role=\"assistant\" timestamp={new Date(Date.now() - 300000)}>\n  <Message.Content>\n    This message was sent 5 minutes ago.\n  </Message.Content>\n  <Message.Timestamp />\n</Message>"},{"name":"Error State","description":"A failed send turns the bubble and its border red.","code":"<Message role=\"user\" status=\"error\">\n  <Message.Content>\n    This message failed to send.\n  </Message.Content>\n</Message>"},{"name":"Custom Avatars","description":"Photos replace the default glyphs on both sides.","code":"<>\n  <Message\n    role=\"user\"\n    avatar={<Message.Avatar src=\"https://i.pravatar.cc/64?u=user\" alt=\"Jane\" />}\n  >\n    <Message.Content>\n      Can you help me understand this error?\n    </Message.Content>\n  </Message>\n  <Message\n    role=\"assistant\"\n    avatar={<Message.Avatar src=\"https://i.pravatar.cc/64?u=bot\" alt=\"AI Assistant\" />}\n  >\n    <Message.Content>\n      Sure! Let me take a look at that for you.\n    </Message.Content>\n  </Message>\n</>"},{"name":"With Actions","description":"Controls stay hidden until the pointer enters the row.","code":"<Message\n  role=\"assistant\"\n  actions={\n    <>\n      <Button variant=\"ghost\" size=\"sm\">\n        Copy\n      </Button>\n      <Button variant=\"ghost\" size=\"sm\">\n        Regenerate\n      </Button>\n    </>\n  }\n>\n  <Message.Content>\n    Hover over this message to see the actions.\n  </Message.Content>\n</Message>"}],"contract":{"propsSummary":["role: \"user\" | \"assistant\" | \"system\" - determines styling","children: ReactNode - message content","status: \"pending\" | \"streaming\" | \"complete\" | \"error\" - message state","timestamp: Date - when message was sent","avatar: ReactNode - custom avatar (null to hide)","actions: ReactNode - hover actions","Avatar.src: string - image URL for avatar","Avatar.alt: string - alt text for image avatar"],"a11yRules":["A11Y_COLOR_CONTRAST","A11Y_MOTION_PREFERENCE"]},"ai":{"compositionPattern":"compound","subComponents":["Content","Actions","Timestamp","Avatar"],"commonPatterns":["<Message>\n  <Message.Content>...</Message.Content>\n</Message>"],"requiredChildren":["Content"]},"propsSummary":["role: user|assistant|system (required)","children: node (required)","status: pending|streaming|complete|error (default: complete)","timestamp: object","avatar: node","actions: node"],"sourcePath":"src/components/Message/index.tsx","exportName":"Message","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:00.333Z"},"performance":{"bundleSize":54088,"rawSize":174091,"complexity":"heavy","budgetPercent":352,"overBudget":true,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Markdown","bytes":162039,"percent":93},{"path":"ConversationList","bytes":4734,"percent":3},{"path":"Avatar","bytes":3348,"percent":2},{"path":"Message (self)","bytes":3092,"percent":2}]}},"NavigationMenu":{"filePath":"src/components/NavigationMenu/index.tsx","meta":{"name":"NavigationMenu","description":"Site navigation whose dropdowns become a drawer on small screens.","category":"navigation","tags":["navigation","menu","header","dropdown","navbar","mobile","responsive","drawer"],"status":"stable"},"usage":{"when":["Header navigation with more than links","Dropdowns carrying titles, descriptions, or icons","Navigation that must survive a phone screen","Several sections that animate between each other"],"whenNot":["Flat links with no dropdowns (use Header.Nav)","Application actions like cut and paste (use Menu)","Persistent side navigation (use Sidebar)","Showing where the user already is (use Breadcrumbs)"],"guidelines":["Place it inside Header for site-level navigation","Add Viewport to animate between panels","Use MobileContent for sections that only make sense in the drawer","Title plus description for rich panels, plain Link for the rest","asChild on Link composes your handler and honours preventDefault()","Desktop triggers open on hover after a configurable delay","Point icons at your own icon package to replace the chevrons","Set mobileBreakpoint=\"lg\" when the shell drops its sidebar below 1024px"],"accessibility":["Uses disclosure pattern (not menu role) per W3C guidance","Keyboard: Arrow keys navigate between triggers, Enter/Space toggles, Escape closes","Content panels have role=\"region\" with aria-labelledby pointing to trigger","Mobile drawer has focus trap, Escape to close, and aria-modal","Supports prefers-reduced-motion for all animations"]},"props":{"children":{"type":"node","description":"NavigationMenu.List, NavigationMenu.Viewport, and optionally NavigationMenu.MobileContent","required":true},"value":{"type":"string","description":"Controlled open item value","required":false},"defaultValue":{"type":"string","description":"Default open item value","default":"''","required":false},"onValueChange":{"type":"function","description":"Callback when open item changes","required":false},"orientation":{"type":"enum","description":"'horizontal' | 'vertical'","default":"horizontal","required":false,"values":["horizontal","vertical"]},"delayDuration":{"type":"number","description":"Hover delay before opening (ms)","default":"200","required":false},"skipDelayDuration":{"type":"number","description":"Duration after close during which moving to another trigger opens instantly (ms)","default":"300","required":false},"icons":{"type":"object","description":"Optional icon overrides for triggerChevron, mobileMenu, mobileClose, and drawerClose controls","required":false},"mobileBreakpoint":{"type":"enum","description":"Viewport breakpoint below which the mobile drawer replaces desktop navigation","default":"md","required":false,"values":["md","lg"]}},"relations":[{"component":"Header","relationship":"sibling","note":"Place NavigationMenu inside Header for site navigation"},{"component":"Sidebar","relationship":"alternative","note":"Use Sidebar for persistent side navigation, NavigationMenu for header dropdowns"},{"component":"Menu","relationship":"alternative","note":"Use Menu for action menus (role=menu), NavigationMenu for site navigation (disclosure pattern)"},{"component":"Breadcrumbs","relationship":"sibling","note":"Use Breadcrumbs for hierarchical page trail, NavigationMenu for site-level navigation"}],"variants":[{"name":"Default","description":"Two dropdowns beside one plain link.","code":"<NavigationMenu>\n  <NavigationMenu.List>\n    <NavigationMenu.Item value=\"products\">\n      <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>\n      <NavigationMenu.Content>\n        <NavigationMenu.Link href=\"/analytics\" title=\"Analytics\" description=\"Track your metrics and KPIs.\" />\n        <NavigationMenu.Link href=\"/automation\" title=\"Automation\" description=\"Automate your workflows.\" />\n      </NavigationMenu.Content>\n    </NavigationMenu.Item>\n    <NavigationMenu.Item value=\"resources\">\n      <NavigationMenu.Trigger>Resources</NavigationMenu.Trigger>\n      <NavigationMenu.Content>\n        <NavigationMenu.Link href=\"/docs\" title=\"Documentation\" description=\"Comprehensive API reference.\" />\n        <NavigationMenu.Link href=\"/blog\" title=\"Blog\" description=\"Latest news and updates.\" />\n      </NavigationMenu.Content>\n    </NavigationMenu.Item>\n    <NavigationMenu.Item>\n      <NavigationMenu.Link href=\"/pricing\">Pricing</NavigationMenu.Link>\n    </NavigationMenu.Item>\n  </NavigationMenu.List>\n  <NavigationMenu.Viewport />\n</NavigationMenu>"},{"name":"With Rich Content","description":"A grid of icons, titles, and descriptions.","code":"<NavigationMenu>\n  <NavigationMenu.List>\n    <NavigationMenu.Item value=\"platform\">\n      <NavigationMenu.Trigger>Platform</NavigationMenu.Trigger>\n      <NavigationMenu.Content>\n        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px', padding: '8px', minWidth: '400px' }}>\n          <NavigationMenu.Link\n            href=\"/dashboard\"\n            title=\"Dashboard\"\n            description=\"Overview of your project metrics.\"\n          />\n          <NavigationMenu.Link\n            href=\"/analytics\"\n            title=\"Analytics\"\n            description=\"Deep dive into your data.\"\n          />\n          <NavigationMenu.Link\n            href=\"/reports\"\n            title=\"Reports\"\n            description=\"Generate custom reports.\"\n          />\n          <NavigationMenu.Link\n            href=\"/settings\"\n            title=\"Settings\"\n            description=\"Configure your workspace.\"\n          />\n        </div>\n      </NavigationMenu.Content>\n    </NavigationMenu.Item>\n  </NavigationMenu.List>\n  <NavigationMenu.Viewport />\n</NavigationMenu>"},{"name":"With Simple Links","description":"Link lists where descriptions would be noise.","code":"<NavigationMenu>\n  <NavigationMenu.List>\n    <NavigationMenu.Item value=\"company\">\n      <NavigationMenu.Trigger>Company</NavigationMenu.Trigger>\n      <NavigationMenu.Content>\n        <div style={{ display: 'flex', flexDirection: 'column', padding: '4px', minWidth: '160px' }}>\n          <NavigationMenu.Link href=\"/about\">About</NavigationMenu.Link>\n          <NavigationMenu.Link href=\"/careers\">Careers</NavigationMenu.Link>\n          <NavigationMenu.Link href=\"/contact\">Contact</NavigationMenu.Link>\n        </div>\n      </NavigationMenu.Content>\n    </NavigationMenu.Item>\n    <NavigationMenu.Item>\n      <NavigationMenu.Link href=\"/blog\">Blog</NavigationMenu.Link>\n    </NavigationMenu.Item>\n    <NavigationMenu.Item>\n      <NavigationMenu.Link href=\"/docs\">Docs</NavigationMenu.Link>\n    </NavigationMenu.Item>\n  </NavigationMenu.List>\n  <NavigationMenu.Viewport />\n</NavigationMenu>"},{"name":"With Featured Card","description":"One promoted item leads the panel.","code":"<NavigationMenu>\n  <NavigationMenu.List>\n    <NavigationMenu.Item value=\"learn\">\n      <NavigationMenu.Trigger>Learn</NavigationMenu.Trigger>\n      <NavigationMenu.Content>\n        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px', padding: '8px', minWidth: '420px' }}>\n          <NavigationMenu.Link\n            href=\"/quickstart\"\n            title=\"Quick Start\"\n            description=\"Get up and running in 5 minutes with our getting started guide.\"\n            featured\n          />\n          <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>\n            <NavigationMenu.Link href=\"/docs\" title=\"Documentation\" description=\"API reference and guides.\" />\n            <NavigationMenu.Link href=\"/examples\" title=\"Examples\" description=\"Browse example projects.\" />\n          </div>\n        </div>\n      </NavigationMenu.Content>\n    </NavigationMenu.Item>\n  </NavigationMenu.List>\n  <NavigationMenu.Viewport />\n</NavigationMenu>"},{"name":"Vertical","description":"Panels open to the side instead of below.","code":"<div style={{ display: 'flex' }}>\n  <NavigationMenu orientation=\"vertical\">\n    <NavigationMenu.List>\n      <NavigationMenu.Item value=\"overview\">\n        <NavigationMenu.Trigger>Overview</NavigationMenu.Trigger>\n        <NavigationMenu.Content>\n          <div style={{ padding: '8px', minWidth: '200px' }}>\n            <NavigationMenu.Link href=\"/intro\" title=\"Introduction\" description=\"Learn the basics.\" />\n          </div>\n        </NavigationMenu.Content>\n      </NavigationMenu.Item>\n      <NavigationMenu.Item value=\"guides\">\n        <NavigationMenu.Trigger>Guides</NavigationMenu.Trigger>\n        <NavigationMenu.Content>\n          <div style={{ padding: '8px', minWidth: '200px' }}>\n            <NavigationMenu.Link href=\"/install\" title=\"Installation\" description=\"Get started quickly.\" />\n            <NavigationMenu.Link href=\"/config\" title=\"Configuration\" description=\"Customize your setup.\" />\n          </div>\n        </NavigationMenu.Content>\n      </NavigationMenu.Item>\n    </NavigationMenu.List>\n    <NavigationMenu.Viewport />\n  </NavigationMenu>\n</div>"}],"contract":{"propsSummary":["value: string — controlled open item","onValueChange: (value) => void — open state handler","orientation: horizontal | vertical — layout direction","delayDuration: number — hover open delay (default: 200ms)","icons: { triggerChevron?, mobileMenu?, mobileClose?, drawerClose? } — custom internal control icons","mobileBreakpoint: md | lg — mobile drawer breakpoint (default: md)","NavigationMenu.Link: title + description + icon for structured links, or children for simple links","NavigationMenu.Link asChild: composes child and menu click handlers (preventDefault keeps menu open)","NavigationMenu.MobileContent: slot for extra mobile-only sections"],"a11yRules":["A11Y_DISCLOSURE_PATTERN","A11Y_KEYBOARD_NAV","A11Y_FOCUS_TRAP"]},"ai":{"compositionPattern":"compound","subComponents":["List","Item","Trigger","Content","Link","Indicator","Viewport","MobileBrand","MobileContent","MobileSection"],"requiredChildren":["List"],"commonPatterns":["<NavigationMenu><NavigationMenu.List><NavigationMenu.Item value=\"docs\"><NavigationMenu.Trigger>Docs</NavigationMenu.Trigger><NavigationMenu.Content><NavigationMenu.Link href=\"/guides\" title=\"Guides\" description=\"Learn the basics\" /></NavigationMenu.Content></NavigationMenu.Item></NavigationMenu.List><NavigationMenu.Viewport /></NavigationMenu>"]},"propsSummary":["children: node (required)","value: string","defaultValue: string","onValueChange: function","orientation: horizontal|vertical (default: horizontal)","delayDuration: number (default: 200)","skipDelayDuration: number (default: 300)","icons: object","mobileBreakpoint: md|lg (default: md)"],"sourcePath":"src/components/NavigationMenu/index.tsx","exportName":"NavigationMenu","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:01.458Z"},"performance":{"bundleSize":7933,"rawSize":25748,"complexity":"moderate","budgetPercent":52,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"NavigationMenu (self)","bytes":12903,"percent":50},{"path":"@phosphor-icons/react","bytes":5518,"percent":21},{"path":"Collapsible","bytes":2538,"percent":10},{"path":"ScrollArea","bytes":2504,"percent":10},{"path":"src/utils/a11y.tsx","bytes":1358,"percent":5}]}},"Pagination":{"filePath":"src/components/Pagination/index.tsx","meta":{"name":"Pagination","description":"Steps through content split across numbered pages.","category":"navigation","tags":["pagination","paging","pages","navigation"],"status":"stable"},"usage":{"when":["Data sets served a page at a time","Tables and lists with a known total","Search results past the first screen"],"whenNot":["Everything already fits on one page","Content that loads as the user scrolls","Switching between panels (use Tabs)","Steps in an order (use Stepper)"],"guidelines":["Sit it directly below what it pages","edgeCount keeps the first and last pages reachable","siblingCount sets how many neighbours show","The current page uses a neutral surface, not the brand accent","The root forwards id, aria-*, data-*, and handlers to <nav>","Your onClick runs first — call preventDefault() to stop the change"],"accessibility":["Uses nav element with aria-label=\"Pagination\"","aria-current=\"page\" marks the active page","Previous/Next buttons have descriptive aria-labels","Disabled buttons at boundaries prevent invalid navigation"]},"props":{"children":{"type":"node","description":"","required":true},"totalPages":{"type":"number","description":"Total number of pages","required":true},"page":{"type":"number","description":"Controlled current page (1-indexed)","required":false},"defaultPage":{"type":"number","description":"Default page (uncontrolled)","default":"1","required":false},"onPageChange":{"type":"function","description":"Called when page changes","required":false},"edgeCount":{"type":"number","description":"Number of pages shown at edges","default":"1","required":false},"siblingCount":{"type":"number","description":"Number of pages shown around current","default":"1","required":false},"size":{"type":"enum","description":"Visible action size. Resolves through ComponentDefaults when omitted.","required":false,"values":["sm","md","lg"]}},"relations":[{"component":"Table","relationship":"sibling","note":"Commonly paired for table pagination"},{"component":"Listbox","relationship":"alternative","note":"Use Listbox for small sets of options"}],"variants":[{"name":"Default","description":"Neighbours around the current page, ends always reachable.","code":"<Pagination totalPages={10} defaultPage={1}>\n  <Pagination.Previous />\n  <Pagination.Items />\n  <Pagination.Next />\n</Pagination>"},{"name":"With Edge Pages","description":"Two pages pinned at each end.","code":"<Pagination totalPages={20} defaultPage={10} edgeCount={2} siblingCount={1}>\n  <Pagination.Previous />\n  <Pagination.Items />\n  <Pagination.Next />\n</Pagination>"},{"name":"Compact","description":"Drops the neighbours when space is tight.","code":"<Pagination totalPages={20} defaultPage={10} siblingCount={0}>\n  <Pagination.Previous />\n  <Pagination.Items />\n  <Pagination.Next />\n</Pagination>"},{"name":"Controlled","description":"You hold the page number in state.","code":"<Pagination totalPages={5} page={3}>\n  <Pagination.Previous />\n  <Pagination.Items />\n  <Pagination.Next />\n</Pagination>"}],"contract":{"propsSummary":["totalPages: number - total page count (required)","page: number - controlled current page (1-indexed)","defaultPage: number - initial page (default: 1)","onPageChange: (page) => void - page change handler","edgeCount: number - pages at edges (default: 1)","siblingCount: number - pages around current (default: 1)","Forwards standard HTML nav attributes to the root element"],"a11yRules":["A11Y_NAV_LABEL","A11Y_CURRENT_PAGE"]},"ai":{"compositionPattern":"compound","subComponents":["Previous","Next","Items","Item","Ellipsis"],"requiredChildren":["Items"],"commonPatterns":["<Pagination totalPages={totalPages} page={currentPage} onPageChange={setPage}><Pagination.Previous /><Pagination.Items /><Pagination.Next /></Pagination>"]},"propsSummary":["children: node (required)","totalPages: number (required)","page: number","defaultPage: number (default: 1)","onPageChange: function","edgeCount: number (default: 1)","siblingCount: number (default: 1)"],"sourcePath":"src/components/Pagination/index.tsx","exportName":"Pagination","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:01.648Z"},"performance":{"bundleSize":1855,"rawSize":4918,"complexity":"lightweight","budgetPercent":12,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Pagination (self)","bytes":4002,"percent":81},{"path":"ComponentDefaults","bytes":194,"percent":4}]}},"Popover":{"filePath":"src/components/Popover/index.tsx","meta":{"name":"Popover","description":"Anchors interactive content to a trigger without blocking the page.","category":"overlays","tags":["popover","overlay","dropdown","floating","contextual"],"status":"stable"},"usage":{"when":["Editing a value in place","Previews richer than a line of text","Filter and picker panels","Content that outgrows a tooltip"],"whenNot":["A short hint (use Tooltip)","A list of actions (use Menu)","Anything that must block the page (use Dialog)","Feedback the user does not act on (use Toast or Alert)"],"guidelines":["One job per panel","Always give the user a visible way out","Pick a side that does not cover what the user just clicked","Add the arrow when the trigger is not obvious","asChild on Trigger and Close needs a single element child"],"accessibility":["Focus is moved to popover content on open","Closes on Escape key","Focus returns to trigger on close"]},"props":{"children":{"type":"node","description":"Popover trigger and content","required":true},"open":{"type":"boolean","description":"Controlled open state","required":false},"defaultOpen":{"type":"boolean","description":"Default open state (uncontrolled)","default":"false","required":false},"onOpenChange":{"type":"function","description":"Called when open state changes","required":false},"modal":{"type":"boolean","description":"Whether to block page interaction","default":"false","required":false}},"relations":[{"component":"Tooltip","relationship":"alternative","note":"Use Tooltip for brief, non-interactive hints"},{"component":"Menu","relationship":"alternative","note":"Use Menu for action lists"},{"component":"Dialog","relationship":"alternative","note":"Use Dialog for blocking interactions"}],"variants":[{"name":"Default","description":"Title, body, and a close control.","code":"<Popover>\n  <Popover.Trigger asChild>\n    <Button variant=\"soft\">Open Popover</Button>\n  </Popover.Trigger>\n  <Popover.Content>\n    <Popover.Close />\n    <Popover.Title>Popover Title</Popover.Title>\n    <Popover.Description>\n      This is a popover with some content. It can contain text, forms, or other elements.\n    </Popover.Description>\n  </Popover.Content>\n</Popover>"},{"name":"With Form","description":"Enough room to edit a value in place.","code":"<Popover>\n  <Popover.Trigger asChild>\n    <Button variant=\"soft\">Edit Name</Button>\n  </Popover.Trigger>\n  <Popover.Content size=\"sm\">\n    <Popover.Close />\n    <Popover.Title>Edit Name</Popover.Title>\n    <Popover.Body>\n      <Input label=\"Display Name\" placeholder=\"Enter name\" />\n    </Popover.Body>\n    <Popover.Footer>\n      <Popover.Close asChild>\n        <Button variant=\"soft\" size=\"sm\">Cancel</Button>\n      </Popover.Close>\n      <Button variant=\"solid\" size=\"sm\">Save</Button>\n    </Popover.Footer>\n  </Popover.Content>\n</Popover>"},{"name":"With Arrow","description":"The arrow ties the panel back to its trigger.","code":"<Popover>\n  <Popover.Trigger asChild>\n    <Button variant=\"soft\">Info</Button>\n  </Popover.Trigger>\n  <Popover.Content arrow>\n    <Popover.Title>Quick Tip</Popover.Title>\n    <Popover.Description>\n      This popover has an arrow pointing to its trigger element.\n    </Popover.Description>\n  </Popover.Content>\n</Popover>"},{"name":"Positions","description":"Flips to the opposite side when space runs out.","code":"<div style={{ display: 'flex', gap: '16px', padding: '60px' }}>\n  <Popover>\n    <Popover.Trigger asChild>\n      <Button variant=\"soft\">Top</Button>\n    </Popover.Trigger>\n    <Popover.Content side=\"top\" size=\"sm\">\n      <Popover.Description>Popover on top</Popover.Description>\n    </Popover.Content>\n  </Popover>\n  <Popover>\n    <Popover.Trigger asChild>\n      <Button variant=\"soft\">Bottom</Button>\n    </Popover.Trigger>\n    <Popover.Content side=\"bottom\" size=\"sm\">\n      <Popover.Description>Popover on bottom</Popover.Description>\n    </Popover.Content>\n  </Popover>\n</div>"},{"name":"Link Trigger","description":"asChild lets a link open it.","code":"<Popover>\n  <Popover.Trigger asChild>\n    <a href=\"#popover-help\">Open help</a>\n  </Popover.Trigger>\n  <Popover.Content size=\"sm\">\n    <Popover.Description>Popover trigger can be an anchor when using asChild.</Popover.Description>\n  </Popover.Content>\n</Popover>"}],"contract":{"propsSummary":["open: boolean - controlled open state","onOpenChange: (open) => void - state handler","modal: boolean - blocks page interaction (default: false)","Popover.Trigger / Popover.Close asChild support non-button children","Popover.Content side: top|bottom|left|right - position"],"a11yRules":["A11Y_POPOVER_FOCUS","A11Y_POPOVER_ESCAPE","A11Y_TARGET_SIZE_MIN"]},"ai":{"compositionPattern":"compound","subComponents":["Trigger","Content","Close","Title","Description","Body","Footer"],"requiredChildren":["Trigger","Content"],"commonPatterns":["<Popover><Popover.Trigger asChild><Button>Open</Button></Popover.Trigger><Popover.Content><Popover.Close /><Popover.Title>{title}</Popover.Title><Popover.Description>{description}</Popover.Description></Popover.Content></Popover>","<Popover><Popover.Trigger asChild><a href=\"#help\">Open help</a></Popover.Trigger><Popover.Content>...</Popover.Content></Popover>"]},"propsSummary":["children: node (required)","open: boolean","defaultOpen: boolean","onOpenChange: function","modal: boolean (default: false)"],"sourcePath":"src/components/Popover/index.tsx","exportName":"Popover","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:02.154Z"},"performance":{"bundleSize":1344,"rawSize":3486,"complexity":"lightweight","budgetPercent":9,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Popover (self)","bytes":2744,"percent":79}]}},"Progress":{"filePath":"src/components/Progress/index.tsx","meta":{"name":"Progress","description":"Shows how far along a task is, as a bar or a ring.","category":"feedback","tags":["progress","loading","indicator","percentage","status"],"status":"stable"},"usage":{"when":["Upload and download progress","Percentage of a task finished","How much of a form is filled in","Waits where you know the duration"],"whenNot":["You cannot say how long — use Loading","Discrete steps — use a stepper","Status with no number — use Badge"],"guidelines":["Pass a value when you know the percentage; pass null when you do not","Add a label whenever the bar alone leaves the purpose unclear","success, warning, and danger carry state, not decoration","tone=\"neutral\" with role=\"meter\" for a magnitude where full is not success","Values outside min and max are clamped before display"],"accessibility":["Reports role=\"progressbar\" with aria-valuenow","role=\"meter\" is accepted for scalar readings inside a known range","The label is tied to the bar","Value changes are announced as they happen"]},"props":{"value":{"type":"number","description":"Current progress value (0-100). Null for indeterminate.","default":"null","required":false},"min":{"type":"number","description":"Minimum value","default":"0","required":false},"max":{"type":"number","description":"Maximum value","default":"100","required":false},"size":{"type":"enum","description":"Size of the progress bar","default":"md","required":false,"values":["sm","md","lg"]},"tone":{"type":"enum","description":"Colour. accent is the plain bar; neutral reads as a meter whose maximum is not a success; success, warning and danger carry state.","default":"accent","required":false,"values":["accent","neutral","success","warning","danger"]},"label":{"type":"string","description":"Label text above the progress bar","required":false},"showValue":{"type":"boolean","description":"Show percentage value","default":"false","required":false},"formatValue":{"type":"function","description":"Custom formatter for displayed progress value","required":false},"role":{"type":"union","description":"","required":false}},"relations":[{"component":"Badge","relationship":"alternative","note":"Use Badge for status without percentage"},{"component":"Alert","relationship":"sibling","note":"Use Alert for completion messages"}],"variants":[{"name":"Default","description":"Determinate bar with its percentage spelled out.","code":"<Progress value={60} label=\"Uploading…\" showValue />"},{"name":"Tones","description":"Colour carries state: normal, done, tight, critical.","code":"import { Stack } from '@/components/Stack';\n\n<Stack direction=\"column\" gap=\"md\">\n  <Progress value={75} tone=\"accent\" label=\"Processing\" showValue />\n  <Progress value={100} tone=\"success\" label=\"Complete\" showValue />\n  <Progress value={80} tone=\"warning\" label=\"Almost full\" showValue />\n  <Progress value={95} tone=\"danger\" label=\"Storage critical\" showValue />\n</Stack>"},{"name":"Meter","description":"A reading where hitting the top is not a win.","code":"<Progress\n  value={42}\n  tone=\"neutral\"\n  role=\"meter\"\n  label=\"Seats used\"\n  showValue\n/>"},{"name":"Sizes","description":"Thin for table rows, thick when the bar is the point.","code":"import { Stack } from '@/components/Stack';\n\n<Stack direction=\"column\" gap=\"md\">\n  <Progress value={50} size=\"sm\" label=\"Small\" />\n  <Progress value={50} size=\"md\" label=\"Medium\" />\n  <Progress value={50} size=\"lg\" label=\"Large\" />\n</Stack>"},{"name":"Indeterminate","description":"value={null} sweeps instead of filling.","code":"<Progress value={null} label=\"Loading…\" />"},{"name":"Circular","description":"Same value in a ring, for tiles and compact chrome.","code":"import { CircularProgress } from '@/components/Progress';\nimport { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"lg\" align=\"center\">\n  <CircularProgress value={25} size=\"sm\" />\n  <CircularProgress value={50} size=\"md\" showValue />\n  <CircularProgress value={75} size=\"lg\" showValue tone=\"success\" />\n  <CircularProgress value={null} size=\"md\" />\n</Stack>"}],"contract":{"propsSummary":["value: number|null - progress percentage (null for indeterminate)","size: sm|md|lg - bar thickness","tone: accent|neutral|success|warning|danger - colour","label: string - descriptive label","showValue: boolean - display percentage","Determinate display values are clamped (and invalid min/max ranges render as 0%)"],"a11yRules":["A11Y_PROGRESS_ROLE","A11Y_PROGRESS_VALUE"]},"ai":{"compositionPattern":"compound","subComponents":["Root","Circular"]},"propsSummary":["value: number (default: null)","min: number (default: 0)","max: number (default: 100)","size: sm|md|lg (default: md)","tone: accent|neutral|success|warning|danger (default: accent)","role: progressbar|meter (default: progressbar)","label: string","showValue: boolean (default: false)","formatValue: function"],"sourcePath":"src/components/Progress/index.tsx","exportName":"Progress","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:02.339Z"},"performance":{"bundleSize":2599,"rawSize":6473,"complexity":"lightweight","budgetPercent":17,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Progress (self)","bytes":5859,"percent":91}]}},"Prompt":{"filePath":"src/components/Prompt/index.tsx","meta":{"name":"Prompt","description":"Collects multi-line input for AI and chat interfaces.","category":"ai","tags":["prompt","chat","ai","input","textarea","form"],"status":"stable"},"usage":{"when":["Chat and AI assistant interfaces","Multi-line input with a submit action","Toolbars carrying attachments or a model picker"],"whenNot":["Single-line text (use Input)","Multi-line with no toolbar (use Textarea)","Search-only fields (use Input with the search variant)"],"guidelines":["Always pass an onSubmit handler","Set loading while the request is in flight to block duplicate sends","Prompt.Textarea forwards native textarea props and composes your own handlers","variant=\"ghost\" floats the controls on the writing surface instead of a footer","Seamless secondary controls stay transparent; only Prompt.Submit keeps a filled shape","Prompt.Submit uses a neutral inverse surface, never semantic brand color","Prompt.ModeButton toggles a setting; Prompt.Select picks one from a list","Wire onFiles once — the attach button, paste, and drop all route through it","Render Prompt.Attachments above Prompt.Textarea; they are part of the message"],"accessibility":["Enter submits, Shift+Enter for newline","Submit button is keyboard accessible","Loading state prevents duplicate submissions"]},"props":{"children":{"type":"node","description":"Prompt composition using Prompt sub-components","required":true},"value":{"type":"string","description":"Controlled input value","required":false},"defaultValue":{"type":"string","description":"Uncontrolled default value","default":"","required":false},"onChange":{"type":"function","description":"Called when value changes","required":false},"onSubmit":{"type":"function","description":"Called on form submission","required":false},"placeholder":{"type":"string","description":"Placeholder text for the textarea","default":"Ask, Search or Chat...","required":false},"disabled":{"type":"boolean","description":"Disable the entire prompt","default":"false","required":false},"loading":{"type":"boolean","description":"Show loading state","default":"false","required":false},"minRows":{"type":"number","description":"Minimum number of visible rows","default":"1","required":false},"maxRows":{"type":"number","description":"Maximum number of visible rows","default":"8","required":false},"autoResize":{"type":"boolean","description":"Enable auto-resize based on content","default":"true","required":false},"submitOnEnter":{"type":"boolean","description":"Submit on Enter (Shift+Enter for newline)","default":"true","required":false},"placement":{"type":"enum","description":"Where the card sits: inline in the flow, fixed to the viewport bottom, or sticky to the content area (offset by --fui-prompt-inset-left)","default":"inline","required":false,"values":["inline","fixed","sticky"]},"onFiles":{"type":"function","description":"Called with files added by the attach button, a paste, or a drop anywhere on the card. Providing it enables all three.","required":false},"accept":{"type":"string","description":"accept filter for the attach button's picker, e.g. \"image/*\"","required":false},"variant":{"type":"enum","description":"Card chrome. \"outline\" keeps the toolbar as a filled footer under a rule; \"ghost\" makes the whole card one writing surface with the controls floating on it.","default":"outline","required":false,"values":["outline","ghost"]}},"relations":[{"component":"Input","relationship":"alternative","note":"Use Input for simple single-line text input"},{"component":"Textarea","relationship":"alternative","note":"Use Textarea for multi-line without toolbar"}],"variants":[{"name":"Basic","description":"A textarea and a submit button, nothing else.","code":"<Prompt onSubmit={(value) => console.log(value)}>\n  <Prompt.Textarea />\n  <Prompt.Toolbar>\n    <Prompt.Actions />\n    <Prompt.Info>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"},{"name":"With Actions","description":"Attach and mode controls sit to the left of submit.","code":"<Prompt onSubmit={(value) => console.log(value)}>\n  <Prompt.Textarea />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.ActionButton aria-label=\"Add attachment\">\n        +\n      </Prompt.ActionButton>\n      <Prompt.ModeButton>Auto</Prompt.ModeButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"},{"name":"With Usage","description":"A quota readout sits beside the submit button.","code":"<Prompt onSubmit={(value) => console.log(value)}>\n  <Prompt.Textarea />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.ActionButton aria-label=\"Add attachment\">\n        +\n      </Prompt.ActionButton>\n      <Prompt.ModeButton active>Auto</Prompt.ModeButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Usage>52% used</Prompt.Usage>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"},{"name":"Agent Composer","description":"Controls float on the writing surface instead of a footer.","code":"<Prompt\n  variant=\"ghost\"\n  submitOnEnter={false}\n  minRows={3}\n  onSubmit={(value) => console.log(value)}\n>\n  <Prompt.Textarea placeholder=\"What should be true when this is done?\" />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.Select\n        aria-label=\"Model\"\n        defaultValue=\"claude-opus-4-8\"\n        options={[{ value: 'claude-opus-4-8', label: 'Opus 4.8' }, { value: 'claude-sonnet-5', label: 'Sonnet 5' }]}\n      />\n      <Prompt.ModeButton>Plan</Prompt.ModeButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"},{"name":"With Attachments","description":"Staged files list above the text they belong to.","code":"<Prompt onSubmit={(value) => console.log(value)}>\n  <Prompt.Attachments\n    items={[\n      { id: '1', name: 'findings-export.csv', size: 20480 },\n      { id: '2', name: 'dashboard.png', size: 153600 },\n    ]}\n    onRemove={(id) => console.log(id)}\n  />\n  <Prompt.Textarea />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.ActionButton aria-label=\"Add attachment\">\n        +\n      </Prompt.ActionButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"},{"name":"Loading State","description":"Input locks and submit spins while the request runs.","code":"<Prompt\n  onSubmit={(value) => console.log(value)}\n  loading\n  defaultValue=\"Tell me about the weather...\"\n>\n  <Prompt.Textarea />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.ActionButton aria-label=\"Add attachment\">\n        +\n      </Prompt.ActionButton>\n      <Prompt.ModeButton>Auto</Prompt.ModeButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Usage>52% used</Prompt.Usage>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"},{"name":"Disabled","description":"Everything dims and stops responding to input.","code":"<Prompt onSubmit={(value) => console.log(value)} disabled>\n  <Prompt.Textarea />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.ActionButton aria-label=\"Add attachment\">\n        +\n      </Prompt.ActionButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"}],"contract":{"propsSummary":["value: string - controlled input value","onSubmit: (value: string) => void - submission handler","placeholder: string - hint text (default: \"Ask, Search or Chat...\")","disabled: boolean - disables interaction","loading: boolean - shows loading state","minRows/maxRows: number - row constraints (default: 1/8)","submitOnEnter: boolean - Enter key behavior (default: true)","Prompt.Textarea accepts native textarea props and optional aria-label override"],"a11yRules":["A11Y_TEXTAREA_LABEL","A11Y_BUTTON_LABEL"]},"ai":{"compositionPattern":"compound","subComponents":["Textarea","Toolbar","Tabs","Tab","Actions","Info","ActionButton","ModeButton","Select","Attach","Attachments","Usage","Submit"],"commonPatterns":["<Prompt>\n  <Prompt.Textarea>...</Prompt.Textarea>\n  <Prompt.Toolbar>...</Prompt.Toolbar>\n  <Prompt.Actions>...</Prompt.Actions>\n  <Prompt.Info>...</Prompt.Info>\n  <Prompt.Submit>...</Prompt.Submit>\n</Prompt>"],"requiredChildren":["Textarea","Toolbar","Actions","Info","Submit"]},"propsSummary":["children: node (required)","value: string","defaultValue: string (default: )","onChange: function","onSubmit: function","placeholder: string (default: Ask, Search or Chat...)","disabled: boolean (default: false)","loading: boolean (default: false)","minRows: number (default: 1)","maxRows: number (default: 8)","autoResize: boolean (default: true)","submitOnEnter: boolean (default: true)","placement: inline|fixed|sticky (default: inline)","variant: outline|ghost (default: outline)","onFiles: function","accept: string"],"sourcePath":"src/components/Prompt/index.tsx","exportName":"Prompt","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:02.513Z"},"performance":{"bundleSize":6525,"rawSize":18885,"complexity":"moderate","budgetPercent":42,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Select","bytes":8162,"percent":43},{"path":"Prompt (self)","bytes":7771,"percent":41},{"path":"Loading","bytes":2050,"percent":11}]}},"RadioGroup":{"filePath":"src/components/RadioGroup/index.tsx","meta":{"name":"RadioGroup","description":"Selects one option from a mutually exclusive set.","category":"inputs","tags":["form","radio","selection","options"],"status":"stable"},"usage":{"when":["Exactly one answer out of two to five","Options rule each other out","Every option should be visible without opening anything"],"whenNot":["Several answers allowed (use a Checkbox group)","Long lists (use Select)","A single on/off (use Switch)","Options need searching (use Combobox)"],"guidelines":["Pre-select a sensible default whenever one exists","Order options predictably: alphabetical, by frequency, or by cost","Keep labels short","Put the trade-off in each item's helperText"],"accessibility":["The group carries its own label","Arrow keys move between options","The selected option reads as checked"]},"props":{"value":{"type":"string","description":"Controlled selected value","required":false},"defaultValue":{"type":"string","description":"Default value (uncontrolled)","required":false},"onValueChange":{"type":"function","description":"Callback when selection changes","required":false},"onChange":{"type":"function","description":"Alias for onValueChange","required":false},"orientation":{"type":"enum","description":"Layout orientation","default":"vertical","required":false,"values":["horizontal","vertical"]},"disabled":{"type":"boolean","description":"Disable all options","default":"false","required":false},"name":{"type":"string","description":"Form field name","required":false},"label":{"type":"string","description":"Group label","required":false},"helperText":{"type":"string","description":"Helper text shown below the group","required":false},"error":{"type":"union","description":"Show error styling. When a string is provided, it is displayed as an error message.","required":false},"size":{"type":"enum","description":"Size variant","default":"md","required":false,"values":["sm","md","lg"]},"variant":{"type":"enum","description":"Chrome. Omit for the inline radio beside its label; 'outline' renders each item as a full-width bordered surface with the radio tucked inside.","required":false,"values":["outline"]},"wrapperClassName":{"type":"string","description":"Class name for the outer wrapper element","required":false},"groupClassName":{"type":"string","description":"Class name for the inner radio group element","required":false},"groupId":{"type":"string","description":"ID for the inner element with role=radiogroup; the inherited id remains on the outer field wrapper","required":false},"children":{"type":"node","description":"RadioGroup.Item elements","required":true},"form":{"type":"string","description":"ID of the form that owns the radio inputs","required":false},"inputRef":{"type":"union","description":"Ref to the hidden input element","required":false},"readOnly":{"type":"boolean","description":"Whether the selected value cannot be changed by the user","default":"false","required":false},"required":{"type":"boolean","description":"Whether the user must choose a value before submitting a form","default":"false","required":false}},"relations":[{"component":"Checkbox","relationship":"alternative","note":"Use Checkbox for multiple selections"},{"component":"Select","relationship":"alternative","note":"Use Select for many options or limited space"},{"component":"Switch","relationship":"alternative","note":"Use Switch for binary on/off choices"}],"variants":[{"name":"Default","description":"Three options stacked, the first already chosen.","code":"<RadioGroup defaultValue=\"option1\" label=\"Select an option\">\n  <RadioGroup.Item value=\"option1\" label=\"Option 1\" />\n  <RadioGroup.Item value=\"option2\" label=\"Option 2\" />\n  <RadioGroup.Item value=\"option3\" label=\"Option 3\" />\n</RadioGroup>"},{"name":"With Helper Text","description":"Each option carries the trade-off under its label.","code":"<RadioGroup defaultValue=\"standard\" label=\"Shipping Method\">\n  <RadioGroup.Item\n    value=\"standard\"\n    label=\"Standard\"\n    helperText=\"5-7 business days\"\n  />\n  <RadioGroup.Item\n    value=\"express\"\n    label=\"Express\"\n    helperText=\"2-3 business days\"\n  />\n  <RadioGroup.Item\n    value=\"overnight\"\n    label=\"Overnight\"\n    helperText=\"Next business day\"\n  />\n</RadioGroup>"},{"name":"Horizontal","description":"One row — good for short labels like sizes.","code":"<RadioGroup orientation=\"horizontal\" defaultValue=\"small\" label=\"Size\">\n  <RadioGroup.Item value=\"small\" label=\"S\" />\n  <RadioGroup.Item value=\"medium\" label=\"M\" />\n  <RadioGroup.Item value=\"large\" label=\"L\" />\n  <RadioGroup.Item value=\"xlarge\" label=\"XL\" />\n</RadioGroup>"},{"name":"With Group Helper Text","description":"One note under the whole group instead of per option.","code":"<RadioGroup defaultValue=\"standard\" label=\"Plan\" helperText=\"You can change your plan at any time\">\n  <RadioGroup.Item value=\"free\" label=\"Free\" />\n  <RadioGroup.Item value=\"standard\" label=\"Standard\" />\n  <RadioGroup.Item value=\"pro\" label=\"Pro\" />\n</RadioGroup>"},{"name":"With Error","description":"Passing a string to error tints the group and prints the reason.","code":"<RadioGroup label=\"Required selection\" error=\"Please select an option\">\n  <RadioGroup.Item value=\"a\" label=\"Option A\" />\n  <RadioGroup.Item value=\"b\" label=\"Option B\" />\n</RadioGroup>"},{"name":"Disabled","description":"The choice stays visible but nothing can change it.","code":"<RadioGroup disabled defaultValue=\"locked\" label=\"Locked selection\">\n  <RadioGroup.Item value=\"locked\" label=\"This is locked\" />\n  <RadioGroup.Item value=\"other\" label=\"Cannot select\" />\n</RadioGroup>"},{"name":"Styling Targets","description":"Named class hooks for the wrapper, the group, and each item.","code":"<RadioGroup\n  defaultValue=\"a\"\n  label=\"Display mode\"\n  wrapperClassName=\"demo-radio-wrapper\"\n  groupClassName=\"demo-radio-group\"\n>\n  <RadioGroup.Item value=\"a\" label=\"Compact\" controlClassName=\"demo-radio-control\" contentClassName=\"demo-radio-content\" />\n  <RadioGroup.Item value=\"b\" label=\"Comfortable\" />\n</RadioGroup>"}],"contract":{"propsSummary":["value: string - selected value","onValueChange: (value: string) => void","onChange: (value: string) => void - alias for onValueChange","orientation: horizontal|vertical (default: vertical)","size: sm|md|lg (default: md)","variant: outline - each item a full-width bordered surface; omit for the inline control","label: string - group label","helperText: string - helper text below the group","error: boolean | string - error styling and message","disabled: boolean - disable all options","wrapperClassName/groupClassName - explicit styling targets for wrapper and group","groupId: string - ID forwarded to the inner radiogroup while id remains on the wrapper","RadioGroup.Item supports helperText (preferred) and description (legacy alias) plus controlClassName/contentClassName for item-level styling","RadioGroup.Item trailing: ReactNode - a short value (price, count) at the end of the row on the label's line; pairs with variant=outline for plan pickers"],"a11yRules":["A11Y_RADIO_GROUP","A11Y_LABEL_REQUIRED","A11Y_TARGET_SIZE_MIN"]},"ai":{"compositionPattern":"compound","subComponents":["Item"],"commonPatterns":["<RadioGroup>\n  <RadioGroup.Item>...</RadioGroup.Item>\n</RadioGroup>"],"requiredChildren":["Item"]},"propsSummary":["value: string","defaultValue: string","onValueChange: function","onChange: function","orientation: horizontal|vertical (default: vertical)","disabled: boolean (default: false)","name: string","label: string","helperText: string","error: union","size: sm|md|lg (default: md)","variant: outline","wrapperClassName: string","groupClassName: string","groupId: string","children: node (required)"],"sourcePath":"src/components/RadioGroup/index.tsx","exportName":"RadioGroup","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:02.692Z"},"performance":{"bundleSize":1556,"rawSize":4091,"complexity":"lightweight","budgetPercent":10,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"RadioGroup (self)","bytes":2863,"percent":70},{"path":"src/utils/aria.ts","bytes":433,"percent":11},{"path":"ComponentDefaults","bytes":198,"percent":5}]}},"ScrollArea":{"filePath":"src/components/ScrollArea/index.tsx","meta":{"name":"ScrollArea","description":"Scrolls overflowing content with a slim scrollbar and optional edge fades.","category":"layout","tags":["scroll","overflow","scrollbar","container","layout"],"status":"stable"},"usage":{"when":["Content that overflows a fixed-size container","Tab bars or chip rows that may run past the edge","Scrollable panels, sidebars, and menu content"],"whenNot":["Whole-page scrolling (use the native body scroll)","Content that can never overflow"],"guidelines":["orientation constrains which axis can scroll","showFades hints at hidden content when nothing else does","scrollbarVisibility=\"hover\" hides the thumb without shifting layout","The container needs a fixed height or the area cannot scroll"],"accessibility":["Preserves native scroll behavior and keyboard support across both axes","Scrollbar is visible on focus for keyboard users","Respects prefers-reduced-motion for fade transitions"]},"props":{"children":{"type":"node","description":"Scrollable content","required":true},"orientation":{"type":"enum","description":"Scroll direction","default":"vertical","required":false,"values":["horizontal","vertical","both"]},"scrollbarVisibility":{"type":"enum","description":"When to show the scrollbar","default":"auto","required":false,"values":["auto","always","hover"]},"showFades":{"type":"boolean","description":"Show gradient fade indicators at scroll edges","default":"false","required":false},"className":{"type":"string","description":"Additional class name","required":false},"dir":{"type":"string","description":"","required":false}},"relations":[],"variants":[{"name":"Vertical","description":"Scrolls down with a thin, always-visible thumb.","code":"import { Box } from '@/components/Box';\nimport { ScrollArea } from '@/components/ScrollArea';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\n\n<Box width=\"100%\">\n  <ScrollArea style={{ height: '200px' }}>\n    <Box padding=\"sm\">\n      <Stack gap=\"sm\">\n        <Text>Row 1</Text>\n        <Text>Row 2</Text>\n        <Text>Row 3</Text>\n        <Text>Row 4</Text>\n        <Text>Row 5</Text>\n        <Text>Row 6</Text>\n        <Text>Row 7</Text>\n        <Text>Row 8</Text>\n        <Text>Row 9</Text>\n        <Text>Row 10</Text>\n        <Text>Row 11</Text>\n        <Text>Row 12</Text>\n      </Stack>\n    </Box>\n  </ScrollArea>\n</Box>"},{"name":"Horizontal","description":"Keeps an overflowing row of chips on one line.","code":"import { Box } from '@/components/Box';\nimport { Chip } from '@/components/Chip';\nimport { ScrollArea } from '@/components/ScrollArea';\nimport { Stack } from '@/components/Stack';\n\n<Box width=\"100%\">\n  <ScrollArea orientation=\"horizontal\">\n    <Stack direction=\"row\" gap=\"sm\">\n      <Chip>React</Chip>\n      <Chip>TypeScript</Chip>\n      <Chip>Accessibility</Chip>\n      <Chip>Docs</Chip>\n      <Chip>Playground</Chip>\n      <Chip>CLI</Chip>\n      <Chip>Tokens</Chip>\n      <Chip>Governance</Chip>\n      <Chip>Contracts</Chip>\n      <Chip>Registry</Chip>\n    </Stack>\n  </ScrollArea>\n</Box>"},{"name":"With Fades","description":"Edge fades signal there is more content each way.","code":"import { Box } from '@/components/Box';\nimport { Chip } from '@/components/Chip';\nimport { ScrollArea } from '@/components/ScrollArea';\nimport { Stack } from '@/components/Stack';\n\n<Box width=\"100%\">\n  <ScrollArea orientation=\"horizontal\" showFades>\n    <Stack direction=\"row\" gap=\"sm\">\n      <Chip>React</Chip>\n      <Chip>TypeScript</Chip>\n      <Chip>Accessibility</Chip>\n      <Chip>Docs</Chip>\n      <Chip>Playground</Chip>\n      <Chip>CLI</Chip>\n      <Chip>Tokens</Chip>\n      <Chip>Governance</Chip>\n      <Chip>Contracts</Chip>\n      <Chip>Registry</Chip>\n    </Stack>\n  </ScrollArea>\n</Box>"},{"name":"Hover Scrollbar","description":"Thumb stays invisible until hover or keyboard focus.","code":"import { Box } from '@/components/Box';\nimport { ScrollArea } from '@/components/ScrollArea';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\n\n<Box width=\"100%\">\n  <ScrollArea scrollbarVisibility=\"hover\" style={{ height: '200px' }}>\n    <Box padding=\"sm\">\n      <Stack gap=\"sm\">\n        <Text>Row 1</Text>\n        <Text>Row 2</Text>\n        <Text>Row 3</Text>\n        <Text>Row 4</Text>\n        <Text>Row 5</Text>\n        <Text>Row 6</Text>\n        <Text>Row 7</Text>\n        <Text>Row 8</Text>\n        <Text>Row 9</Text>\n        <Text>Row 10</Text>\n        <Text>Row 11</Text>\n        <Text>Row 12</Text>\n      </Stack>\n    </Box>\n  </ScrollArea>\n</Box>"}],"contract":{"propsSummary":["orientation: horizontal|vertical|both - scroll direction","scrollbarVisibility: auto|always|hover - scrollbar display mode","showFades: boolean - gradient edge indicators"]},"ai":{"compositionPattern":"compound","subComponents":["Root"],"commonPatterns":["<ScrollArea orientation=\"horizontal\"><div style={{ display: \"flex\", gap: 8 }}>{items}</div></ScrollArea>","<ScrollArea style={{ height: 300 }}>{longContent}</ScrollArea>"]},"propsSummary":["children: node (required)","orientation: horizontal|vertical|both (default: vertical)","scrollbarVisibility: auto|always|hover (default: auto)","showFades: boolean (default: false)","className: string"],"sourcePath":"src/components/ScrollArea/index.tsx","exportName":"ScrollArea","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:02.867Z"},"performance":{"bundleSize":1519,"rawSize":3074,"complexity":"lightweight","budgetPercent":10,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"ScrollArea (self)","bytes":2482,"percent":81}]}},"Select":{"filePath":"src/components/Select/Select.fragment.tsx","meta":{"name":"Select","description":"Opens a list and returns the single option the user picks.","category":"inputs","status":"stable","tags":["select","dropdown","form","options","picker"]},"guidance":{"when":["Picking one value from a known list","More than 4-5 options — radios would crowd the form","Tight forms where the list should stay collapsed"],"whenNot":["Two or three options (use RadioGroup)","Users may type their own value (use Combobox)","Multiple selections (use a Checkbox group)","Actions rather than values (use Menu)"],"dont":[{"reason":"Do not use Select for a list of actions.","bad":"<Select>Delete</Select>","good":"<Select label=\"Choose a value\" options={[{ value: \"design\", label: \"Design\" }]} />"}],"guidelines":["Placeholder names the decision, e.g. \"Choose a team\"","Set label so the field is announced","helperText for guidance, error for the failure reason","Group related options with Select.Group","Keep option text short","Order options predictably: alphabetical, by frequency, or by category"],"accessibility":["Full keyboard navigation","Type-ahead jumps to matching options","Trigger and list carry the right ARIA roles"]},"usage":{"when":["Picking one value from a known list","More than 4-5 options — radios would crowd the form","Tight forms where the list should stay collapsed"],"whenNot":["Two or three options (use RadioGroup)","Users may type their own value (use Combobox)","Multiple selections (use a Checkbox group)","Actions rather than values (use Menu)"],"dont":[{"reason":"Do not use Select for a list of actions.","bad":"<Select>Delete</Select>","good":"<Select label=\"Choose a value\" options={[{ value: \"design\", label: \"Design\" }]} />"}],"guidelines":["Placeholder names the decision, e.g. \"Choose a team\"","Set label so the field is announced","helperText for guidance, error for the failure reason","Group related options with Select.Group","Keep option text short","Order options predictably: alphabetical, by frequency, or by category"],"accessibility":["Full keyboard navigation","Type-ahead jumps to matching options","Trigger and list carry the right ARIA roles"]},"props":{"autoComplete":{"type":"string","description":"Browser autofill hint for the hidden input","required":false},"children":{"type":"node","description":"","required":false},"className":{"type":"string","description":"Wrapper class name","required":false},"defaultOpen":{"type":"boolean","description":"Default open state","required":false},"defaultValue":{"type":"string","description":"Default value for uncontrolled usage","required":false},"disabled":{"type":"boolean","description":"Whether the field is disabled","required":false},"error":{"type":"union","description":"Show error styling. When a string is provided, it is displayed as an error message.","required":false},"form":{"type":"string","description":"ID of the form that owns the hidden input","required":false},"helperText":{"type":"string","description":"Helper text shown below the field","required":false},"inputRef":{"type":"union","description":"Ref to the hidden input element","required":false},"label":{"type":"string","description":"Visible label text","required":false},"name":{"type":"string","description":"Form field name","required":false},"onChange":{"type":"function","description":"Alias for onValueChange","required":false},"onOpenChange":{"type":"function","description":"Called when open state changes","required":false},"onValueChange":{"type":"function","description":"Called when selection changes","required":false},"open":{"type":"boolean","description":"Controlled open state","required":false},"options":{"type":"array","description":"Convenience API for simple selects (renders Select.Item entries when children are omitted)","required":false},"placeholder":{"type":"string","description":"Placeholder text when no value is selected","required":false},"readOnly":{"type":"boolean","description":"Whether the user cannot choose a different option","required":false},"required":{"type":"boolean","description":"Whether a selection is required","required":false},"size":{"type":"enum","description":"Size variant.","default":"\"md\"","required":false,"values":["sm","md","lg"]},"value":{"type":"string","description":"Controlled selected value","required":false},"variant":{"type":"enum","description":"Chrome. `outline` is the bordered field shell; `ghost` drops it for a\ncompact, borderless control — for toolbars and dense rows, where a bordered\nfield reads as a form. Pair with `size=\"sm\"`.","default":"outline","required":false,"values":["outline","ghost"]}},"relations":[{"component":"Menu","relationship":"alternative","note":"Use Menu for action-based dropdowns"},{"component":"Input","relationship":"sibling","note":"Use Input for free-form text entry"},{"component":"Checkbox","relationship":"alternative","note":"Use Checkbox group for multiple selections"}],"variants":[{"name":"Default","description":"Label, placeholder, three options.","code":"<Select label=\"Team\" placeholder=\"Choose a team\">\n          <Select.Trigger />\n          <Select.Content>\n            <Select.Item value=\"design\">Design</Select.Item>\n            <Select.Item value=\"engineering\">Engineering</Select.Item>\n            <Select.Item value=\"product\">Product</Select.Item>\n          </Select.Content>\n        </Select>","canonical":true},{"name":"With Groups","description":"Headed sections separate related options.","code":"<Select placeholder=\"Choose a country\">\n          <Select.Trigger />\n          <Select.Content>\n            <Select.Group>\n              <Select.GroupLabel>Americas</Select.GroupLabel>\n              <Select.Item value=\"us\">United States</Select.Item>\n              <Select.Item value=\"ca\">Canada</Select.Item>\n            </Select.Group>\n            <Select.Group>\n              <Select.GroupLabel>Europe</Select.GroupLabel>\n              <Select.Item value=\"uk\">United Kingdom</Select.Item>\n              <Select.Item value=\"de\">Germany</Select.Item>\n            </Select.Group>\n          </Select.Content>\n        </Select>"},{"name":"With Label and Helper Text","description":"Helper text explains what the choice affects.","code":"<Select label=\"Timezone\" helperText=\"Used for reminders and calendar notifications.\">\n          <Select.Trigger placeholder=\"Select a timezone\" />\n          <Select.Content>\n            <Select.Item value=\"pt\">Pacific Time</Select.Item>\n            <Select.Item value=\"mt\">Mountain Time</Select.Item>\n            <Select.Item value=\"ct\">Central Time</Select.Item>\n            <Select.Item value=\"et\">Eastern Time</Select.Item>\n          </Select.Content>\n        </Select>"},{"name":"Error State","description":"Red border, and the message replaces helper text.","code":"<Select label=\"Team\" placeholder=\"Choose a team\" error=\"Choose a team before continuing\">\n          <Select.Trigger />\n          <Select.Content>\n            <Select.Item value=\"design\">Design</Select.Item>\n            <Select.Item value=\"engineering\">Engineering</Select.Item>\n          </Select.Content>\n        </Select>"},{"name":"With Disabled Options","description":"Unavailable options stay visible but cannot be picked.","code":"<Select placeholder=\"Select a plan\">\n          <Select.Trigger />\n          <Select.Content>\n            <Select.Item value=\"free\">Free</Select.Item>\n            <Select.Item value=\"pro\">Pro</Select.Item>\n            <Select.Item value=\"enterprise\" disabled>\n              Enterprise (contact sales)\n            </Select.Item>\n          </Select.Content>\n        </Select>"},{"name":"Scrollable List","description":"Caps at four rows and half-shows the fifth as a scroll hint.","code":"<Select placeholder=\"Select a timezone\">\n          <Select.Trigger />\n          <Select.Content maxVisibleItems={4}>\n            <Select.Item value=\"utc-8\">Pacific Time (UTC-8)</Select.Item>\n            <Select.Item value=\"utc-7\">Mountain Time (UTC-7)</Select.Item>\n            <Select.Item value=\"utc-6\">Central Time (UTC-6)</Select.Item>\n            <Select.Item value=\"utc-5\">Eastern Time (UTC-5)</Select.Item>\n            <Select.Item value=\"utc-4\">Atlantic Time (UTC-4)</Select.Item>\n          </Select.Content>\n        </Select>"},{"name":"Custom Max Visible Items","description":"maxVisibleItems raises the cap to six rows.","code":"<Select placeholder=\"Select a color\">\n          <Select.Trigger />\n          <Select.Content maxVisibleItems={6}>\n            <Select.Item value=\"red\">Red</Select.Item>\n            <Select.Item value=\"orange\">Orange</Select.Item>\n            <Select.Item value=\"yellow\">Yellow</Select.Item>\n            <Select.Item value=\"green\">Green</Select.Item>\n            <Select.Item value=\"blue\">Blue</Select.Item>\n            <Select.Item value=\"indigo\">Indigo</Select.Item>\n            <Select.Item value=\"violet\">Violet</Select.Item>\n          </Select.Content>\n        </Select>"},{"name":"Ghost","description":"Ghost drops the field shell for toolbars and dense rows.","code":"<Select variant=\"ghost\" size=\"sm\" aria-label=\"Sort order\" defaultValue=\"newest\">\n          <Select.Trigger />\n          <Select.Content>\n            <Select.Item value=\"newest\">Newest first</Select.Item>\n            <Select.Item value=\"oldest\">Oldest first</Select.Item>\n          </Select.Content>\n        </Select>"},{"name":"Disabled","description":"Dimmed and cannot be opened.","code":"<Select disabled placeholder=\"Select an option\">\n          <Select.Trigger />\n          <Select.Content>\n            <Select.Item value=\"one\">Option 1</Select.Item>\n          </Select.Content>\n        </Select>"},{"name":"Options Prop","description":"The options array replaces hand-written Select.Item children.","code":"<Select\n          placeholder=\"Select a team\"\n          options={[\n            { value: \"engineering\", label: \"Engineering\" },\n            { value: \"design\", label: \"Design\" },\n            { value: \"product\", label: \"Product\" },\n          ]}\n        />"},{"name":"Long Localized Option","description":"The trigger grows to fit a long label instead of clipping it.","code":"<Select label=\"Workspace region\" placeholder=\"Choose a workspace region\">\n          <Select.Trigger />\n          <Select.Content>\n            <Select.Item value=\"eu-central\">\n              Central European workspace with localized administrator recovery requirements\n            </Select.Item>\n            <Select.Item value=\"us-east\">United States East</Select.Item>\n          </Select.Content>\n        </Select>"}],"ai":{"compositionPattern":"compound","subComponents":["Trigger","Content","Item","Group","GroupLabel"],"requiredChildren":["Trigger","Content"],"commonPatterns":["<Select placeholder=\"Select option\" options={[{ value: 'opt1', label: 'Option 1' }, { value: 'opt2', label: 'Option 2' }]} />","<Select placeholder=\"Select option\"><Select.Trigger /><Select.Content><Select.Item value=\"opt1\">{label1}</Select.Item><Select.Item value=\"opt2\">{label2}</Select.Item></Select.Content></Select>"]},"contract":{"propsSummary":["value: string | null - controlled selected value","onValueChange: (value: string | null) => void - selection handler","onChange: (value: string | null) => void - alias for onValueChange","label: string - visible label text","helperText: string - helper text below field","error: boolean | string - error styling and message","placeholder: string - placeholder text","disabled: boolean - disable select","size: sm|md|lg (default: md)","variant: outline|ghost (default: outline) - ghost is borderless, for toolbars","options: SelectOption[] - convenience API for simple option lists","maxVisibleItems: number - max visible options before scrolling (default 4)","Select.Trigger accepts an icon prop for a leading adornment"],"a11yRules":["A11Y_SELECT_KEYBOARD","A11Y_SELECT_LABEL"]},"matrix":{"axes":{"size":"auto","variant":"auto","theme":["light","dark"]},"forced":["open","focus","disabled","error"],"worstCase":{"options":"A long localized option label that remains readable inside the bounded list"}},"preview":{"providers":[],"dynamicRegions":[]},"provenance":{"source":"extracted","verified":true},"sourcePath":"src/components/Select/index.tsx","exportName":"Select","performance":{"bundleSize":3534,"rawSize":8857,"complexity":"lightweight","budgetPercent":23,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Select (self)","bytes":4884,"percent":55},{"path":"src/recipes/popup.ts","bytes":2625,"percent":30},{"path":"src/utils/aria.ts","bytes":433,"percent":5},{"path":"ComponentDefaults","bytes":198,"percent":2}]}},"Separator":{"filePath":"src/components/Separator/index.tsx","meta":{"name":"Separator","description":"Draws a rule between sections of related content.","category":"layout","tags":["separator","divider","hr","line","layout"],"status":"stable"},"usage":{"when":["Dividing sections that spacing alone cannot separate","Labelled breaks such as an Or divider","Splitting items inside a toolbar or row"],"whenNot":["Whenever spacing already reads as a break","Decorative rules (use a border)","Building layout structure (use Grid)"],"guidelines":["Use sparingly — stacked rules read as noise","soft halves the rule's weight for quieter breaks","orientation=\"vertical\" needs a parent with a set height","Add aria-hidden when the rule is purely decorative"],"accessibility":["Uses role=\"separator\" for semantic meaning","Decorative separators should be aria-hidden"]},"props":{"orientation":{"type":"enum","description":"Direction of the separator","default":"horizontal","required":false,"values":["horizontal","vertical"]},"gap":{"type":"enum","description":"Breathing room around the rule","default":"none","required":false,"values":["none","xs","sm","md","lg","xl"]},"soft":{"type":"boolean","description":"Softer, lighter appearance","default":"false","required":false},"label":{"type":"string","description":"Optional text label (horizontal only)","required":false},"style":{"type":"object","description":"","required":false}},"relations":[{"component":"Card","relationship":"sibling","note":"Cards provide stronger visual grouping"}],"variants":[{"name":"Default","description":"Standard and soft weights, one above the other.","code":"import { Box } from '@/components/Box';\nimport { Separator } from '@/components/Separator';\nimport { Text } from '@/components/Text';\n\n<Box width=\"100%\">\n  <Text>Standard weight</Text>\n  <Separator gap=\"md\" />\n  <Text>Soft weight</Text>\n  <Separator soft gap=\"md\" />\n  <Text>Below</Text>\n</Box>"},{"name":"With Label","description":"A label sits inside the rule for a major break.","code":"import { Box } from '@/components/Box';\nimport { Separator } from '@/components/Separator';\nimport { Text } from '@/components/Text';\n\n<Box width=\"100%\">\n  <Text>First section</Text>\n  <Separator label=\"Or\" gap=\"md\" />\n  <Text>Second section</Text>\n</Box>"},{"name":"Vertical","description":"Divides items sitting in a row.","code":"import { Box } from '@/components/Box';\nimport { Separator } from '@/components/Separator';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\n\n<Stack direction=\"row\" align=\"center\" gap=\"md\" style={{ height: '40px' }}>\n  <Text>Item 1</Text>\n  <Separator orientation=\"vertical\" />\n  <Text>Item 2</Text>\n  <Separator orientation=\"vertical\" />\n  <Text>Item 3</Text>\n</Stack>"},{"name":"Gap Options","description":"gap sets the breathing room around the rule.","code":"import { Box } from '@/components/Box';\nimport { Separator } from '@/components/Separator';\nimport { Text } from '@/components/Text';\n\n<Box width=\"100%\">\n  <Text>none</Text>\n  <Separator gap=\"none\" />\n  <Text>sm</Text>\n  <Separator gap=\"sm\" />\n  <Text>md</Text>\n  <Separator gap=\"md\" />\n  <Text>lg</Text>\n  <Separator gap=\"lg\" />\n  <Text>End</Text>\n</Box>"}],"contract":{"propsSummary":["orientation: horizontal|vertical - direction","gap: none|xs|sm|md|lg|xl - breathing room","soft: boolean - lighter appearance","label: string - centered label text"],"a11yRules":["A11Y_SEPARATOR_ROLE"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["orientation: horizontal|vertical (default: horizontal)","gap: none|xs|sm|md|lg|xl (default: none)","soft: boolean (default: false)","label: string","style: object"],"sourcePath":"src/components/Separator/index.tsx","exportName":"Separator","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:03.327Z"},"performance":{"bundleSize":760,"rawSize":1560,"complexity":"lightweight","budgetPercent":5,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Separator (self)","bytes":969,"percent":62}]}},"Sidebar":{"filePath":"src/components/Sidebar/index.tsx","meta":{"name":"Sidebar","description":"Collapsible navigation panel that turns into a drawer on mobile.","category":"layout","tags":["sidebar","navigation","drawer","menu","layout"],"status":"stable"},"usage":{"when":["Primary navigation for an app shell","Navigation that must collapse to icons or hide entirely","Grouped destinations with active state"],"whenNot":["Top-level horizontal navigation (use Header)","Temporary side panels for one task (use Drawer)","In-page section links (use a list of links)"],"guidelines":["Give every item an icon so the collapsed rail stays readable","collapsible=\"icon\" shrinks to a rail; \"offcanvas\" hides it completely","Wrap in SidebarProvider only when something outside must toggle it","An explicit collapsed prop overrides any surrounding provider","Sidebar.Rail and Sidebar.CollapseToggle are alternative toggles — pick one","Use Sidebar.MenuSkeleton while navigation data loads"],"accessibility":["Uses semantic <nav> element with aria-label","aria-current=\"page\" on active items","aria-expanded on items with submenus","Escape key closes mobile drawer","Cmd/Ctrl+B keyboard shortcut toggles sidebar (when using SidebarProvider)","Focus trap in mobile drawer mode","Minimum 44px touch targets"]},"props":{"children":{"type":"node","description":"Sidebar content (use Sidebar.Header, Sidebar.Nav, Sidebar.Section, etc.)","required":true},"collapsed":{"type":"boolean","description":"Icon-only mode for desktop (controlled)","required":false},"defaultCollapsed":{"type":"boolean","description":"Initial collapsed state (uncontrolled)","default":"false","required":false},"onCollapsedChange":{"type":"function","description":"Called when collapsed state changes","required":false},"open":{"type":"boolean","description":"Mobile drawer open state (controlled)","required":false},"defaultOpen":{"type":"boolean","description":"Initial open state (uncontrolled)","default":"false","required":false},"onOpenChange":{"type":"function","description":"Called when open state changes","required":false},"width":{"type":"string","description":"Width of expanded sidebar","default":"240px","required":false},"collapsedWidth":{"type":"string","description":"Width when collapsed","default":"var(--fui-navigation-sidebar-collapsed-width, 56px)","required":false},"position":{"type":"enum","description":"Sidebar position","default":"left","required":false,"values":["left","right"]},"collapsible":{"type":"enum","description":"Collapse behavior mode","default":"icon","required":false,"values":["icon","offcanvas","none"]},"activeIndicator":{"type":"enum","description":"Placement of the active-item affordance","default":"start","required":false,"values":["start","end"]},"style":{"type":"object","description":"","required":false}},"relations":[{"component":"Tabs","relationship":"alternative","note":"Use Tabs for in-page section navigation"},{"component":"Menu","relationship":"composition","note":"Use Menu for contextual actions within sidebar"}],"variants":[{"name":"Default","description":"Sections group items; active marks the current page.","code":"<Sidebar>\n  <Sidebar.Header>\n    <Logo />\n    <span>Acme App</span>\n  </Sidebar.Header>\n  <Sidebar.Nav>\n    <Sidebar.Section>\n      <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>\n      <Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>\n      <Sidebar.Item icon={<UsersIcon />}>Team</Sidebar.Item>\n      <Sidebar.Item icon={<FolderIcon />}>Projects</Sidebar.Item>\n    </Sidebar.Section>\n    <Sidebar.Section label=\"Settings\">\n      <Sidebar.Item icon={<GearIcon />}>Preferences</Sidebar.Item>\n      <Sidebar.Item icon={<HelpIcon />}>Help</Sidebar.Item>\n    </Sidebar.Section>\n  </Sidebar.Nav>\n  <Sidebar.Footer>\n    <Sidebar.CollapseToggle />\n  </Sidebar.Footer>\n</Sidebar>"},{"name":"Collapsed","description":"Icon-only rail; labels move into hover tooltips.","code":"function App() {\n  const [collapsed, setCollapsed] = useState(true);\n\n  return (\n    <Sidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>\n      <Sidebar.Header collapsedContent={<Logo />}>\n        <Logo />\n        <span>Acme App</span>\n      </Sidebar.Header>\n      <Sidebar.Nav>\n        <Sidebar.Section>\n          <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>\n          <Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n      <Sidebar.Footer>\n        <Sidebar.CollapseToggle />\n      </Sidebar.Footer>\n    </Sidebar>\n  );\n}"},{"name":"With Badges","description":"Trailing counts for unread or pending work.","code":"<Sidebar>\n  <Sidebar.Nav>\n    <Sidebar.Section>\n      <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>\n      <Sidebar.Item icon={<ChartIcon />} badge=\"3\">Analytics</Sidebar.Item>\n      <Sidebar.Item icon={<UsersIcon />} badge=\"12\">Team</Sidebar.Item>\n      <Sidebar.Item icon={<FolderIcon />}>Projects</Sidebar.Item>\n    </Sidebar.Section>\n  </Sidebar.Nav>\n</Sidebar>"},{"name":"With Submenu","description":"Nested items; defaultExpanded sets the opening state.","code":"<Sidebar>\n  <Sidebar.Nav>\n    <Sidebar.Section>\n      <Sidebar.Item icon={<HomeIcon />}>Dashboard</Sidebar.Item>\n      {/* Use defaultExpanded for uncontrolled mode - no state needed! */}\n      <Sidebar.Item icon={<FolderIcon />} hasSubmenu defaultExpanded>\n        Projects\n      </Sidebar.Item>\n      <Sidebar.Submenu>\n        <Sidebar.SubItem active>Website Redesign</Sidebar.SubItem>\n        <Sidebar.SubItem>Mobile App</Sidebar.SubItem>\n        <Sidebar.SubItem>API Integration</Sidebar.SubItem>\n      </Sidebar.Submenu>\n      {/* Multiple submenus work without tracking separate state */}\n      <Sidebar.Item icon={<UsersIcon />} hasSubmenu>\n        Team\n      </Sidebar.Item>\n      <Sidebar.Submenu>\n        <Sidebar.SubItem>Engineering</Sidebar.SubItem>\n        <Sidebar.SubItem>Design</Sidebar.SubItem>\n      </Sidebar.Submenu>\n    </Sidebar.Section>\n  </Sidebar.Nav>\n</Sidebar>"},{"name":"With Disabled Items","description":"Items switched off by permissions or feature flags.","code":"<Sidebar>\n  <Sidebar.Nav>\n    <Sidebar.Section>\n      <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>\n      <Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>\n      <Sidebar.Item icon={<UsersIcon />} disabled>\n        Team (Coming Soon)\n      </Sidebar.Item>\n      <Sidebar.Item icon={<FolderIcon />} disabled>\n        Projects (Upgrade)\n      </Sidebar.Item>\n    </Sidebar.Section>\n  </Sidebar.Nav>\n</Sidebar>"},{"name":"With Provider & External Trigger","description":"useSidebar drives the sidebar from anywhere, plus Cmd/Ctrl+B.","code":"function App() {\n  return (\n    <SidebarProvider>\n      <Stack direction=\"row\" gap=\"lg\" align=\"start\">\n        <Sidebar>\n          <Sidebar.Header>\n            <Logo />\n            <span>Acme App</span>\n          </Sidebar.Header>\n          <Sidebar.Nav>\n            <Sidebar.Section>\n              <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>\n              <Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>\n            </Sidebar.Section>\n          </Sidebar.Nav>\n        </Sidebar>\n        <MainContent />\n      </Stack>\n    </SidebarProvider>\n  );\n}\n\nfunction MainContent() {\n  const { toggleSidebar, state } = useSidebar();\n\n  return (\n    <Stack gap=\"sm\" align=\"start\">\n      <Text scale=\"sm\" color=\"secondary\">State: {state}</Text>\n      <Button size=\"sm\" variant=\"soft\" onClick={toggleSidebar}>\n        Toggle sidebar\n      </Button>\n    </Stack>\n  );\n}"},{"name":"With asChild (Polymorphic)","description":"Render items as your router's link component.","code":"import Link from 'next/link';\n\n<Sidebar>\n  <Sidebar.Nav>\n    <Sidebar.Section>\n      <Sidebar.Item icon={<HomeIcon />} active asChild>\n        <Link href=\"/dashboard\">Dashboard</Link>\n      </Sidebar.Item>\n      <Sidebar.Item icon={<ChartIcon />} asChild>\n        <Link href=\"/analytics\">Analytics</Link>\n      </Sidebar.Item>\n    </Sidebar.Section>\n  </Sidebar.Nav>\n</Sidebar>"},{"name":"With Section Action","description":"A section header can carry one quick action.","code":"<Sidebar>\n  <Sidebar.Nav>\n    <Sidebar.Section\n      label=\"Projects\"\n      action={\n        <Sidebar.SectionAction aria-label=\"Add project\" onClick={handleAdd}>\n          <PlusIcon />\n        </Sidebar.SectionAction>\n      }\n    >\n      <Sidebar.Item icon={<FolderIcon />}>Website Redesign</Sidebar.Item>\n      <Sidebar.Item icon={<FolderIcon />}>Mobile App</Sidebar.Item>\n    </Sidebar.Section>\n  </Sidebar.Nav>\n</Sidebar>"},{"name":"With Loading Skeleton","description":"Placeholder rows to show while navigation data loads.","code":"<Sidebar>\n  <Sidebar.Header>\n    <Logo />\n    <span>Acme App</span>\n  </Sidebar.Header>\n  <Sidebar.Nav>\n    <Sidebar.MenuSkeleton count={6} />\n  </Sidebar.Nav>\n</Sidebar>"},{"name":"With Rail Toggle","description":"Drag-handle toggle on the sidebar edge — hover to reveal, click to collapse.","code":"function App() {\n  const [collapsed, setCollapsed] = useState(false);\n\n  return (\n    <Sidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>\n      <Sidebar.Header collapsedContent={<Logo />}>\n        <Logo />\n        <span>Acme App</span>\n      </Sidebar.Header>\n      <Sidebar.Nav>\n        <Sidebar.Section>\n          <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>\n          <Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>\n          <Sidebar.Item icon={<FolderIcon />}>Projects</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n      <Sidebar.Rail />\n    </Sidebar>\n  );\n}"},{"name":"Offcanvas Collapsed","description":"Hides the panel entirely, leaving a floating re-open button.","code":"function App() {\n  const [collapsed, setCollapsed] = useState(true);\n\n  return (\n    <Sidebar collapsed={collapsed} onCollapsedChange={setCollapsed} collapsible=\"offcanvas\">\n      <Sidebar.Header collapsedContent={<Logo />}>\n        <Logo />\n        <span>Acme App</span>\n      </Sidebar.Header>\n      <Sidebar.Nav>\n        <Sidebar.Section>\n          <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>\n          <Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n      <Sidebar.Footer>\n        <Sidebar.CollapseToggle />\n      </Sidebar.Footer>\n    </Sidebar>\n  );\n}"}],"contract":{"propsSummary":["collapsed: boolean - icon-only desktop mode","open: boolean - mobile drawer state","width: string - expanded width (default: 240px)","position: left|right - sidebar position","active: boolean - set on Sidebar.Item to mark current page (app-controlled)","Sidebar.Item/SubItem onClick: (event) => void - click handler receives mouse event"],"a11yRules":["A11Y_NAV_LANDMARK","A11Y_FOCUS_TRAP","A11Y_ESCAPE_CLOSE"]},"ai":{"compositionPattern":"compound","subComponents":["Header","Nav","Section","SectionAction","Item","SubItem","Submenu","Footer","Trigger","Overlay","CollapseToggle","Rail","MenuSkeleton"],"requiredChildren":["Nav"],"commonPatterns":["<Sidebar><Sidebar.Header>{logo}</Sidebar.Header><Sidebar.Nav><Sidebar.Section><Sidebar.Item icon={icon} active>{label}</Sidebar.Item></Sidebar.Section></Sidebar.Nav><Sidebar.Footer><Sidebar.CollapseToggle /></Sidebar.Footer></Sidebar>"]},"propsSummary":["children: node (required)","collapsed: boolean","defaultCollapsed: boolean (default: false)","onCollapsedChange: function","open: boolean","defaultOpen: boolean (default: false)","onOpenChange: function","width: string (default: 240px)","collapsedWidth: string (default: 56px)","position: left|right (default: left)","collapsible: icon|offcanvas|none (default: icon)","activeIndicator: start|end (default: start)","style: object"],"sourcePath":"src/components/Sidebar/index.tsx","exportName":"Sidebar","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:03.784Z"},"performance":{"bundleSize":8828,"rawSize":26613,"complexity":"moderate","budgetPercent":57,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Sidebar (self)","bytes":11967,"percent":45},{"path":"src/utils/keyboard-shortcuts.ts","bytes":3887,"percent":15},{"path":"Collapsible","bytes":2544,"percent":10},{"path":"ScrollArea","bytes":2508,"percent":9},{"path":"Tooltip","bytes":1461,"percent":5},{"path":"Skeleton","bytes":1275,"percent":5},{"path":"Badge","bytes":1228,"percent":5},{"path":"src/utils/a11y.tsx","bytes":779,"percent":3}]}},"Skeleton":{"filePath":"src/components/Skeleton/index.tsx","meta":{"name":"Skeleton","description":"Holds the shape of content that has not arrived yet.","category":"feedback","tags":["loading","placeholder","skeleton","shimmer"],"status":"stable"},"usage":{"when":["Content is still being fetched","You want to stop the layout jumping when it lands","Making a wait feel shorter than it is"],"whenNot":["Waits under about 300ms","A spinner says it better","Work the user cannot see anyway"],"guidelines":["Match the shape and size of the real content","Prefer the text, heading, and avatar shapes over hand-rolled boxes","Give Skeleton.Text an ancestor with a real width — percentage lines collapse without one","A few big shapes beat many small ones","Skeleton and Skeleton.Text forward id, aria-*, data-* and handlers"],"accessibility":["Skeletons are decoration — hide them with aria-hidden","Announce the loading state separately if it matters","Keep the pulse subtle but visible against the surface"]},"props":{"shape":{"type":"enum","description":"Semantic shape that auto-sizes","default":"rect","required":false,"values":["text","heading","avatar","button","input","rect"]},"size":{"type":"enum","description":"Size for avatar/button shapes","default":"md","required":false,"values":["sm","md","lg"]},"width":{"type":"union","description":"Custom width (string or number)","required":false},"height":{"type":"union","description":"Custom height (string or number)","required":false},"fill":{"type":"boolean","description":"Fill parent container","default":"false","required":false},"radius":{"type":"enum","description":"Border radius override","required":false,"values":["sm","md","lg","none","full"]},"static":{"type":"boolean","description":"Disable skeleton animation","default":"false","required":false}},"relations":[{"component":"Progress","relationship":"alternative","note":"Use Progress for determinate loading"}],"variants":[{"name":"Default","description":"One rectangle at an explicit size.","code":"<Skeleton width={200} height={20} />"},{"name":"Text Lines","description":"Stacked lines that fill the width they are given.","code":"<div style={{ width: 260 }}>\n  <Skeleton.Text lines={3} />\n</div>"},{"name":"Semantic Shapes","description":"Heading sits taller than the body lines under it.","code":"<div\n  style={{\n    width: 260,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 'var(--fui-space-2)',\n  }}\n>\n  <Skeleton shape=\"heading\" width={200} />\n  <Skeleton shape=\"text\" width=\"100%\" />\n  <Skeleton shape=\"text\" width=\"80%\" />\n</div>"},{"name":"Avatar Skeleton","description":"Circles matching the three avatar sizes.","code":"<div style={{ display: 'flex', gap: 'var(--fui-space-1)', alignItems: 'center' }}>\n  <Skeleton.Circle size=\"sm\" />\n  <Skeleton.Circle size=\"md\" />\n  <Skeleton.Circle size=\"lg\" />\n</div>"},{"name":"Card Skeleton","description":"Media, title, then body — the card before it loads.","code":"<div\n  style={{\n    width: 300,\n    padding: 'var(--fui-space-2)',\n    border: '1px solid var(--fui-border)',\n    borderRadius: 'var(--fui-radius-lg)',\n  }}\n>\n  <Skeleton shape=\"rect\" height={120} radius=\"md\" />\n  <div style={{ marginTop: 'var(--fui-space-2)' }}>\n    <Skeleton shape=\"heading\" width=\"60%\" />\n  </div>\n  <div style={{ marginTop: 'var(--fui-space-1)' }}>\n    <Skeleton.Text lines={2} />\n  </div>\n</div>"}],"contract":{"propsSummary":["shape: text|heading|avatar|button|input|rect","size: sm|md|lg (for avatar/button)","width/height: custom dimensions","fill: boolean - fill parent","Skeleton / Skeleton.Text forward div DOM props"]},"ai":{"compositionPattern":"compound","subComponents":["Text","Circle"]},"propsSummary":["shape: text|heading|avatar|button|input|rect (default: rect)","size: sm|md|lg (default: md)","width: union","height: union","fill: boolean (default: false)","radius: sm|md|lg|none|full","static: boolean (default: false)"],"sourcePath":"src/components/Skeleton/index.tsx","exportName":"Skeleton","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:03.952Z"},"performance":{"bundleSize":943,"rawSize":1839,"complexity":"lightweight","budgetPercent":6,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Skeleton (self)","bytes":1262,"percent":69}]}},"Slider":{"filePath":"src/components/Slider/index.tsx","meta":{"name":"Slider","description":"Selects a numeric value within a defined range.","category":"inputs","tags":["slider","range","input","number","control"],"status":"stable"},"usage":{"when":["Any value along a range, where roughly right is good enough","Volume, brightness, opacity","Price and range filters","The effect is visible as the user drags"],"whenNot":["An exact number matters (use Input type=\"number\")","A handful of fixed choices (use RadioGroup or Select)","On or off (use Switch)"],"guidelines":["Label what the track controls","Turn on showValue whenever the number matters","Set min and max to the real limits, not 0-100 by habit","Pick a step the user can actually land on"],"accessibility":["Label is tied to the track","Arrow keys move the thumb","The current value is announced","Native slider semantics throughout"]},"props":{"label":{"type":"string","description":"Label text","required":false},"helperText":{"type":"string","description":"Helper text shown below the slider","required":false},"error":{"type":"boolean","description":"Show error styling","default":"false","required":false},"value":{"type":"number","description":"Controlled value","required":false},"defaultValue":{"type":"number","description":"Default value for uncontrolled usage","required":false},"onChange":{"type":"function","description":"Called with new value when changed","required":false},"onValueChange":{"type":"function","description":"Alias for onChange (Radix convention): (value: number) => void","required":false},"min":{"type":"number","description":"Minimum value","default":"0","required":false},"max":{"type":"number","description":"Maximum value","default":"100","required":false},"step":{"type":"number","description":"Step interval","default":"1","required":false},"showValue":{"type":"boolean","description":"Display current value","default":"false","required":false},"showValueOnDrag":{"type":"boolean","description":"Show current value in a floating bubble while dragging the thumb","default":"false","required":false},"valueSuffix":{"type":"string","description":"Suffix after value (e.g., \"%\", \"px\")","default":"","required":false},"disabled":{"type":"boolean","description":"Disable the slider","default":"false","required":false},"name":{"type":"string","description":"","required":false},"aria-label":{"type":"string","description":"Accessible label when visible label is omitted","required":false},"aria-labelledby":{"type":"string","description":"Accessible labelled-by relationship","required":false},"aria-describedby":{"type":"string","description":"Accessible described-by relationship","required":false},"id":{"type":"string","description":"","required":false},"form":{"type":"string","description":"ID of the form that owns the hidden slider input","required":false},"largeStep":{"type":"number","description":"Larger step used for Page Up/Page Down and shift-arrow keyboard input","required":false},"onValueCommitted":{"type":"function","description":"Callback when the user commits a slider value","required":false},"thumbAlignment":{"type":"enum","description":"How the thumb is aligned at the minimum and maximum edges","required":false,"values":["center","edge","edge-client-only"]}},"relations":[{"component":"Input","relationship":"alternative","note":"Use Input for precise numeric entry"},{"component":"Progress","relationship":"sibling","note":"Similar visual, but Progress is read-only"}],"variants":[{"name":"Default","description":"0-100 with no number shown.","code":"<div style={{ width: '300px' }}>\n  <Slider label=\"Volume\" defaultValue={50} />\n</div>"},{"name":"With Value Display","description":"showValue prints the number opposite the label.","code":"<div style={{ width: '300px' }}>\n  <Slider\n    label=\"Brightness\"\n    defaultValue={75}\n    showValue\n    valueSuffix=\"%\"\n  />\n</div>"},{"name":"Custom Range","description":"min, max and step bound the track to real-world units.","code":"<div style={{ width: '300px', display: 'flex', flexDirection: 'column', gap: '16px' }}>\n  <Slider\n    label=\"Temperature\"\n    min={60}\n    max={80}\n    step={1}\n    defaultValue={72}\n    showValue\n    valueSuffix=\"°F\"\n  />\n  <Slider\n    label=\"Font Size\"\n    min={12}\n    max={32}\n    step={2}\n    defaultValue={16}\n    showValue\n    valueSuffix=\"px\"\n  />\n</div>"},{"name":"Controlled","description":"The parent owns the value and can react to every move.","code":"<ControlledSliderDemo />"},{"name":"Drag Value Bubble","description":"The number floats above the thumb only while dragging.","code":"<div style={{ width: '300px' }}>\n  <Slider\n    label=\"Mix\"\n    defaultValue={40}\n    showValueOnDrag\n    valueSuffix=\"%\"\n  />\n</div>"},{"name":"With Helper Text","description":"A line below the track explains the trade-off.","code":"<div style={{ width: '300px' }}>\n  <Slider\n    label=\"Quality\"\n    defaultValue={80}\n    showValue\n    valueSuffix=\"%\"\n    helperText=\"Higher quality increases file size\"\n  />\n</div>"},{"name":"Disabled","description":"Dimmed; the thumb will not move.","code":"<div style={{ width: '300px' }}>\n  <Slider\n    label=\"Locked Setting\"\n    defaultValue={30}\n    showValue\n    disabled\n  />\n</div>"}],"contract":{"propsSummary":["value: number - controlled value","defaultValue: number - initial value","onChange: (value: number) => void - change handler (or onValueChange)","min/max: number - range bounds","step: number - increment size","label: string - field label","helperText: string - helper text below slider","error: boolean - error styling","showValue: boolean - display value","showValueOnDrag: boolean - show value bubble during drag","valueSuffix: string - unit suffix"],"a11yRules":["A11Y_LABEL_REQUIRED","A11Y_KEYBOARD_ACCESSIBLE","A11Y_TARGET_SIZE_MIN"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["label: string","helperText: string","error: boolean (default: false)","value: number","defaultValue: number","onChange: function","onValueChange: function","min: number (default: 0)","max: number (default: 100)","step: number (default: 1)","showValue: boolean (default: false)","showValueOnDrag: boolean (default: false)","valueSuffix: string (default: )","disabled: boolean (default: false)","name: string","aria-label: string","aria-labelledby: string","aria-describedby: string","id: string"],"sourcePath":"src/components/Slider/index.tsx","exportName":"Slider","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:04.141Z"},"performance":{"bundleSize":1217,"rawSize":2657,"complexity":"lightweight","budgetPercent":8,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Slider (self)","bytes":2065,"percent":78}]}},"Stack":{"filePath":"src/components/Stack/index.tsx","meta":{"name":"Stack","description":"Stacks children in a row or column with one consistent gap.","category":"layout","tags":["stack","layout","flex","spacing","responsive"],"status":"stable"},"usage":{"when":["Spacing a short row or column of elements","Any one-directional flexbox arrangement","Layouts that flip direction at a breakpoint"],"whenNot":["Two-dimensional layouts (use Grid)","Grouping buttons into one control (use ButtonGroup)","Page shell regions (use AppShell)"],"guidelines":["Set gap once on the parent instead of margins on children","Numeric gaps (1-8) map to the same spacing scale as the tokens","direction, gap, and align all accept per-breakpoint objects","Use as=\"nav\" or as=\"ul\" so the markup stays semantic","separator draws dividers without extra elements"],"accessibility":["Use semantic elements (nav, section, etc.) via \"as\" prop","Maintains source order for screen readers","No accessibility concerns with visual arrangement"]},"props":{"children":{"type":"node","description":"Elements to arrange","required":true},"direction":{"type":"union","description":"Stack direction: \"row\", \"column\", or responsive object","default":"column","required":false},"gap":{"type":"union","description":"Spacing between items: \"none\"|\"xs\"|\"sm\"|\"md\"|\"lg\"|\"xl\", a number (1-8) for space scale, or responsive object","default":"md","required":false},"align":{"type":"enum","description":"Cross-axis alignment","required":false,"values":["start","center","end","stretch","baseline"]},"justify":{"type":"enum","description":"Main-axis alignment","required":false,"values":["start","center","end","between"]},"wrap":{"type":"boolean","description":"Allow items to wrap","default":"false","required":false},"separator":{"type":"node","description":"Render a separator between children. true = default 1px line, or pass a ReactNode for custom separators.","required":false},"as":{"type":"enum","description":"HTML element to render","default":"div","required":false,"values":["div","section","nav","article","aside","header","footer","main","ul","ol"]},"className":{"type":"string","description":"","required":false},"style":{"type":"object","description":"","required":false}},"relations":[{"component":"Grid","relationship":"alternative","note":"Use Grid for complex 2D layouts"},{"component":"ButtonGroup","relationship":"sibling","note":"ButtonGroup is specialized for buttons"},{"component":"Box","relationship":"sibling","note":"Box for single-element styling"}],"variants":[{"name":"Vertical Stack","description":"Children flow top to bottom — the default.","code":"import { Box } from '@/components/Box';\nimport { Stack } from '@/components/Stack';\n\n<Stack gap=\"sm\">\n  <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">One</Box>\n  <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">Two</Box>\n  <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">Three</Box>\n</Stack>"},{"name":"Horizontal Stack","description":"Children flow left to right.","code":"import { Box } from '@/components/Box';\nimport { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\">\n  <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">One</Box>\n  <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">Two</Box>\n  <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">Three</Box>\n</Stack>"},{"name":"Gap Sizes","description":"One spacing token sets every gap in the stack.","code":"import { Box } from '@/components/Box';\nimport { Stack } from '@/components/Stack';\n\n<Stack gap=\"lg\">\n  <Stack direction=\"row\" gap=\"xs\">\n    <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">xs</Box>\n    <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">xs</Box>\n  </Stack>\n  <Stack direction=\"row\" gap=\"sm\">\n    <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">sm</Box>\n    <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">sm</Box>\n  </Stack>\n  <Stack direction=\"row\" gap=\"md\">\n    <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">md</Box>\n    <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">md</Box>\n  </Stack>\n  <Stack direction=\"row\" gap=\"lg\">\n    <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">lg</Box>\n    <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">lg</Box>\n  </Stack>\n</Stack>"},{"name":"Alignment","description":"justify positions children along the main axis.","code":"import { Box } from '@/components/Box';\nimport { Stack } from '@/components/Stack';\n\n<Stack gap=\"md\">\n  <Box width=\"240px\" border rounded=\"sm\" padding=\"sm\">\n    <Stack direction=\"row\" gap=\"sm\" justify=\"between\">\n      <Box background=\"secondary\" rounded=\"sm\" paddingX=\"sm\" paddingY=\"xs\">Start</Box>\n      <Box background=\"secondary\" rounded=\"sm\" paddingX=\"sm\" paddingY=\"xs\">End</Box>\n    </Stack>\n  </Box>\n  <Box width=\"240px\" border rounded=\"sm\" padding=\"sm\">\n    <Stack direction=\"row\" gap=\"sm\" justify=\"center\">\n      <Box background=\"secondary\" rounded=\"sm\" paddingX=\"sm\" paddingY=\"xs\">Centered</Box>\n    </Stack>\n  </Box>\n</Stack>"},{"name":"Responsive","description":"Swap direction and gap per breakpoint with an object value.","code":"<Stack\n  direction={{ base: 'column', md: 'row' }}\n  gap={{ base: 'sm', md: 'lg' }}\n>\n  <Button variant=\"soft\">First</Button>\n  <Button variant=\"soft\">Second</Button>\n  <Button variant=\"soft\">Third</Button>\n</Stack>"},{"name":"With Separator","description":"Draws a divider between each child.","code":"import { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\n\n<Stack gap=\"md\" separator>\n  <Text>Section one</Text>\n  <Text>Section two</Text>\n  <Text>Section three</Text>\n</Stack>"},{"name":"Semantic Element","description":"The as prop renders a real nav, section, or list element.","code":"<Stack as=\"nav\" direction=\"row\" gap=\"md\">\n  <Button variant=\"ghost\" size=\"sm\">Home</Button>\n  <Button variant=\"ghost\" size=\"sm\">About</Button>\n  <Button variant=\"ghost\" size=\"sm\">Contact</Button>\n</Stack>"}],"contract":{"propsSummary":["direction: row|column|{responsive} - stack direction","gap: none|xs|sm|md|lg|xl|number|{responsive} - spacing (number maps to space scale)","align: start|center|end|stretch|baseline - cross-axis","justify: start|center|end|between - main-axis","wrap: boolean - allow wrapping","separator: boolean|ReactNode - divider between children","as: string - HTML element","Pass-through DOM props supported on the root (id, role, aria-*, data-*, handlers)"],"a11yRules":["A11Y_SEMANTIC_ELEMENTS"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["children: node (required)","direction: union (default: column)","gap: union (default: md)","align: start|center|end|stretch|baseline","justify: start|center|end|between","wrap: boolean (default: false)","separator: node","as: div|section|nav|article|aside|header|footer|main|ul|ol (default: div)","className: string","style: object"],"sourcePath":"src/components/Stack/index.tsx","exportName":"Stack","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:04.310Z"},"performance":{"bundleSize":2214,"rawSize":5045,"complexity":"lightweight","budgetPercent":14,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"src/utils/layout-spacing.ts","bytes":2475,"percent":49},{"path":"Stack (self)","bytes":1995,"percent":40}]}},"Switch":{"filePath":"src/components/Switch/index.tsx","meta":{"name":"Switch","description":"Toggles a setting that takes effect immediately.","category":"inputs","tags":["switch","toggle","boolean","settings","preference"],"status":"stable"},"usage":{"when":["Settings that apply the moment they change","Turning a feature on or off in a settings panel","The result is visible straight away"],"whenNot":["Choices that only apply on submit (use Checkbox)","Several options at once (use a Checkbox group)","Yes/no questions in a form (use RadioGroup)","More than two states (use Select or RadioGroup)"],"guidelines":["The label names what is being turned on","On always means enabled, never the reverse","Apply the change immediately — no save button","Add helperText when the label alone is ambiguous","Stack related switches together"],"accessibility":["role=\"switch\" with aria-checked","Every switch has a label, visible or aria-label","Focus ring stays visible","Flipping it is announced"]},"props":{"checked":{"type":"boolean","description":"Whether the switch is in the on state","default":"false","required":false},"defaultChecked":{"type":"boolean","description":"Default checked state (uncontrolled)","required":false},"onCheckedChange":{"type":"function","description":"Called when the switch is toggled: (checked: boolean) => void","required":false},"onChange":{"type":"function","description":"Alias for onCheckedChange: (checked: boolean) => void","required":false},"label":{"type":"string","description":"Visible label text","required":false},"helperText":{"type":"string","description":"Helper text shown below the label (preferred)","required":false},"description":{"type":"string","description":"Deprecated alias for helperText","required":false},"disabled":{"type":"boolean","description":"Whether the switch is non-interactive","default":"false","required":false},"size":{"type":"enum","description":"Switch track size","default":"md","required":false,"values":["sm","md","lg"]},"className":{"type":"string","description":"","required":false},"name":{"type":"string","description":"","required":false},"id":{"type":"string","description":"","required":false},"aria-label":{"type":"string","description":"","required":false},"aria-labelledby":{"type":"string","description":"","required":false},"aria-describedby":{"type":"string","description":"","required":false},"form":{"type":"string","description":"","required":false},"inputRef":{"type":"union","description":"","required":false},"readOnly":{"type":"boolean","description":"","default":"false","required":false},"required":{"type":"boolean","description":"","default":"false","required":false},"uncheckedValue":{"type":"string","description":"","required":false},"value":{"type":"string","description":"","required":false}},"relations":[{"component":"Input","relationship":"sibling","note":"Input handles text/number entry; Switch handles boolean state"},{"component":"Checkbox","relationship":"alternative","note":"Use Checkbox when change requires form submission"}],"variants":[{"name":"Default Off","description":"Nothing happens until the user flips it.","code":"<StatefulSwitch label=\"Email notifications\" />","args":{"label":"Email notifications"}},{"name":"Checked","description":"Starts on; the track fills with the accent colour.","code":"<StatefulSwitch defaultChecked label=\"Dark mode\" />","args":{"defaultChecked":true,"label":"Dark mode"}},{"name":"With Helper Text","description":"Second line says what the setting actually does.","code":"<StatefulSwitch\n  defaultChecked\n  label=\"Auto-save\"\n  helperText=\"Automatically save changes as you type\"\n/>","args":{"defaultChecked":true,"label":"Auto-save","helperText":"Automatically save changes as you type"}},{"name":"Sizes","description":"Three track sizes: sm, md, lg.","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n  <StatefulSwitch size=\"sm\" defaultChecked label=\"Small switch\" />\n  <StatefulSwitch size=\"md\" defaultChecked label=\"Medium switch (default)\" />\n  <StatefulSwitch size=\"lg\" defaultChecked label=\"Large switch\" />\n</div>"},{"name":"Disabled States","description":"Locked off and locked on, both dimmed.","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n  <Switch disabled label=\"Premium feature (upgrade required)\" />\n  <Switch disabled checked label=\"System managed (read-only)\" />\n</div>"},{"name":"Settings Panel","description":"Stacked switches sharing one rhythm and helper column.","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '320px' }}>\n  <StatefulSwitch\n    defaultChecked\n    label=\"Push notifications\"\n    helperText=\"Receive push notifications on your device\"\n  />\n  <StatefulSwitch\n    defaultChecked\n    label=\"Email digest\"\n    helperText=\"Weekly summary of your activity\"\n  />\n  <StatefulSwitch\n    label=\"Marketing emails\"\n    helperText=\"Product updates and promotional offers\"\n  />\n</div>"}],"contract":{"propsSummary":["checked: boolean - on/off state","onCheckedChange: (checked) => void - state change handler","onChange: (checked) => void - alias for onCheckedChange","label: string - visible label text","helperText: string - helper text below label (preferred)","description: string - deprecated alias for helperText","disabled: boolean - non-interactive state","size: sm|md|lg - switch size"],"a11yRules":["A11Y_SWITCH_ROLE","A11Y_SWITCH_LABEL","A11Y_SWITCH_FOCUS","A11Y_TARGET_SIZE_MIN"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["checked: boolean","defaultChecked: boolean","onCheckedChange: function","onChange: function","label: string","helperText: string","description: string","disabled: boolean (default: false)","size: sm|md|lg (default: md)","className: string","name: string","id: string","aria-label: string","aria-labelledby: string","aria-describedby: string"],"sourcePath":"src/components/Switch/index.tsx","exportName":"Switch","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:06.429Z"},"performance":{"bundleSize":1033,"rawSize":2130,"complexity":"lightweight","budgetPercent":7,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Switch (self)","bytes":1238,"percent":58},{"path":"ComponentDefaults","bytes":194,"percent":9},{"path":"src/utils/aria.ts","bytes":109,"percent":5}]}},"Table":{"filePath":"src/components/Table/index.tsx","meta":{"name":"Table","description":"Renders tabular data as a real HTML table — headers, rows, footer.","category":"display","tags":["table","semantic","html","layout"],"status":"stable"},"usage":{"when":["The data is static — read it, do not interact with it","You need real thead/tbody/tfoot semantics","The table needs a caption or a totals footer"],"whenNot":["Rows need sorting, selection, or clicking (use DataTable)","Content is a single column of items (use List)"],"guidelines":["Header cells go in Table.HeaderCell — it sets scope=\"col\" for you","Give every table a caption or aria-label; visuallyHidden keeps it off screen","Reach for density, not the deprecated size prop","Narrow viewports scroll the table sideways — keep column count low"],"accessibility":["Semantic HTML table elements (thead, tbody, tfoot, th, td)","Column headers have scope=\"col\" by default","Caption provides table description for screen readers","Supports visually-hidden caption for screen-reader-only labels"]},"props":{"size":{"type":"enum","description":"Table density","default":"md","required":false,"values":["sm","md","compact"]},"striped":{"type":"boolean","description":"Show alternating row backgrounds","default":"false","required":false},"bordered":{"type":"boolean","description":"Wrap table in a bordered container","default":"false","required":false},"wrapperClassName":{"type":"string","description":"Class name for the outer scroll/wrapper container","required":false},"wrapperProps":{"type":"object","description":"HTML attributes for the outer scroll/wrapper container","required":false},"children":{"type":"node","description":"","required":false},"density":{"type":"enum","description":"Canonical row density.","required":false,"values":["compact","regular","relaxed"]}},"relations":[{"component":"DataTable","relationship":"alternative","note":"Use DataTable for sorting, selection, and TanStack features"}],"variants":[{"name":"Default","description":"Header row plus body rows, no extra styling.","code":"<Table aria-label=\"Team members\">\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Name</Table.HeaderCell>\n      <Table.HeaderCell>Role</Table.HeaderCell>\n      <Table.HeaderCell>Status</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Alice Johnson</Table.Cell>\n      <Table.Cell>Engineer</Table.Cell>\n      <Table.Cell>Active</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Bob Smith</Table.Cell>\n      <Table.Cell>Designer</Table.Cell>\n      <Table.Cell>Active</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Carol Williams</Table.Cell>\n      <Table.Cell>PM</Table.Cell>\n      <Table.Cell>Away</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"},{"name":"Empty","description":"Keep the headers and fill one full-width cell so the layout holds.","code":"<Table aria-label=\"Team members\">\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Name</Table.HeaderCell>\n      <Table.HeaderCell>Role</Table.HeaderCell>\n      <Table.HeaderCell>Status</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell colSpan={3}>No team members yet.</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"},{"name":"Striped","description":"Row tint alternates so the eye tracks across wide rows.","code":"<Table striped aria-label=\"Inventory\">\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Item</Table.HeaderCell>\n      <Table.HeaderCell>Category</Table.HeaderCell>\n      <Table.HeaderCell>Qty</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Widget A</Table.Cell>\n      <Table.Cell>Hardware</Table.Cell>\n      <Table.Cell>120</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Widget B</Table.Cell>\n      <Table.Cell>Software</Table.Cell>\n      <Table.Cell>85</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Widget C</Table.Cell>\n      <Table.Cell>Hardware</Table.Cell>\n      <Table.Cell>200</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Widget D</Table.Cell>\n      <Table.Cell>Software</Table.Cell>\n      <Table.Cell>50</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"},{"name":"Bordered","description":"A border wraps the data so it reads as one block on a busy page.","code":"<Table bordered aria-label=\"Pricing\">\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Plan</Table.HeaderCell>\n      <Table.HeaderCell>Price</Table.HeaderCell>\n      <Table.HeaderCell>Features</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Basic</Table.Cell>\n      <Table.Cell>$9/mo</Table.Cell>\n      <Table.Cell>5 projects</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Pro</Table.Cell>\n      <Table.Cell>$29/mo</Table.Cell>\n      <Table.Cell>Unlimited</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"},{"name":"Compact","description":"Tighter rows fit more data in the same height.","code":"<Table density=\"compact\" aria-label=\"Shortcuts\">\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Key</Table.HeaderCell>\n      <Table.HeaderCell>Action</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Ctrl+S</Table.Cell>\n      <Table.Cell>Save</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Ctrl+Z</Table.Cell>\n      <Table.Cell>Undo</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Ctrl+C</Table.Cell>\n      <Table.Cell>Copy</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"},{"name":"With Caption","description":"A visible caption titles the data for every reader.","code":"<Table aria-label=\"Q1 results\">\n  <Table.Caption>Quarterly Results (Q1 2026)</Table.Caption>\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Metric</Table.HeaderCell>\n      <Table.HeaderCell>Value</Table.HeaderCell>\n      <Table.HeaderCell>Change</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Revenue</Table.Cell>\n      <Table.Cell>$1.2M</Table.Cell>\n      <Table.Cell>+15%</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Users</Table.Cell>\n      <Table.Cell>24,500</Table.Cell>\n      <Table.Cell>+8%</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"},{"name":"Screen Reader Caption","description":"The caption reaches screen readers only; the layout stays tight.","code":"<Table aria-label=\"API keys\">\n  <Table.Caption visuallyHidden>API keys and last-used timestamps</Table.Caption>\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Name</Table.HeaderCell>\n      <Table.HeaderCell>Prefix</Table.HeaderCell>\n      <Table.HeaderCell>Last Used</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Deploy</Table.Cell>\n      <Table.Cell>frg_live_...</Table.Cell>\n      <Table.Cell>2 hours ago</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>CI</Table.Cell>\n      <Table.Cell>frg_test_...</Table.Cell>\n      <Table.Cell>Yesterday</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"},{"name":"With Footer","description":"Totals sit in a footer that stays separate from the data.","code":"<Table bordered aria-label=\"Expenses\">\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Category</Table.HeaderCell>\n      <Table.HeaderCell>Amount</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Marketing</Table.Cell>\n      <Table.Cell>$12,000</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Engineering</Table.Cell>\n      <Table.Cell>$45,000</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Operations</Table.Cell>\n      <Table.Cell>$8,000</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n  <Table.Footer>\n    <Table.Row>\n      <Table.Cell>Total</Table.Cell>\n      <Table.Cell>$65,000</Table.Cell>\n    </Table.Row>\n  </Table.Footer>\n</Table>"}],"contract":{"propsSummary":["size: sm|md - table density","striped: boolean - alternating row backgrounds","bordered: boolean - bordered container","Table.Head, Table.Body, Table.Footer - section wrappers","Table.Row - table row with optional selected prop","Table.HeaderCell - th with scope=\"col\"","Table.Cell - td element","wrapperClassName/wrapperProps - customize outer scroll wrapper","Table.Caption - caption with visuallyHidden prop (hidden is deprecated alias)"],"a11yRules":["A11Y_TABLE_HEADERS","A11Y_TABLE_CAPTION"]},"ai":{"compositionPattern":"compound","subComponents":["Root","Head","Body","Footer","Row","Cell","HeaderCell","Caption"],"commonPatterns":["<Table><Table.Head><Table.Row><Table.HeaderCell>Name</Table.HeaderCell></Table.Row></Table.Head><Table.Body><Table.Row><Table.Cell>Alice</Table.Cell></Table.Row></Table.Body></Table>"],"requiredChildren":["Head","Body","Row","Cell","HeaderCell"]},"propsSummary":["size: sm|md (default: md)","striped: boolean (default: false)","bordered: boolean (default: false)","wrapperClassName: string","wrapperProps: object","children: node"],"sourcePath":"src/components/Table/index.tsx","exportName":"Table","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:04.484Z"},"performance":{"bundleSize":2079,"rawSize":5160,"complexity":"lightweight","budgetPercent":14,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"src/recipes/table-chrome.ts","bytes":2772,"percent":54},{"path":"Table (self)","bytes":1801,"percent":35}]}},"TableOfContents":{"filePath":"src/components/TableOfContents/index.tsx","meta":{"name":"TableOfContents","description":"Indexes a long page and marks the section currently in view.","category":"navigation","tags":["toc","table-of-contents","navigation","sidebar","scroll-spy","headings","tree","hierarchy"],"status":"stable"},"usage":{"when":["Docs, articles, and other long reads","Reference pages with many sections","Filterable sidebars grouped by category","Anything past three headings"],"whenNot":["Pages with one or two sections","Site navigation (use Sidebar or Header)","Steps in an order (use Stepper)"],"guidelines":["Drive the active item from an IntersectionObserver scroll spy","Sub-items show by default — pass hideSubItems for a compact index","Group nests items under a labelled, optionally collapsible parent","Item ids must match the real heading ids","Items smooth-scroll — call preventDefault() in onClick to take over","Group is uncontrolled and open by default; pass open and onOpenChange to drive it","The legacy indent boolean still works; prefer Group in new code"],"accessibility":["Uses <nav aria-label=\"Table of contents\"> for landmark navigation","Active item is marked with aria-current=\"location\"","All items are links with smooth scroll behavior","Group toggle is a real <button> with aria-expanded reflecting open state","Focus-visible ring on keyboard navigation"]},"props":{"children":{"type":"node","description":"TableOfContents.Item or TableOfContents.Group elements","required":true},"label":{"type":"string","description":"Accessible label for the nav landmark","default":"Table of contents","required":false},"title":{"type":"string","description":"Visible title above the list","default":"On This Page","required":false},"hideTitle":{"type":"boolean","description":"Hide the visible title","default":"false","required":false},"hideSubItems":{"type":"boolean","description":"Hide indented items and nested groups","default":"false","required":false}},"relations":[{"component":"Breadcrumbs","relationship":"complementary","note":"Breadcrumbs show hierarchy, TOC shows page sections"},{"component":"Sidebar","relationship":"complementary","note":"Sidebar for site nav, TOC for in-page nav"},{"component":"Tabs","relationship":"alternative","note":"Tabs for switching views, TOC for scrolling to sections"}],"variants":[{"name":"Default","description":"Sections and their subsections, indented.","code":"<TableOfContents>\n  <TableOfContents.Item id=\"introduction\">Introduction</TableOfContents.Item>\n  <TableOfContents.Item id=\"getting-started\">Getting Started</TableOfContents.Item>\n  <TableOfContents.Item id=\"installation\" indent>Installation</TableOfContents.Item>\n  <TableOfContents.Item id=\"configuration\" indent>Configuration</TableOfContents.Item>\n  <TableOfContents.Item id=\"api-reference\">API Reference</TableOfContents.Item>\n  <TableOfContents.Item id=\"examples\">Examples</TableOfContents.Item>\n</TableOfContents>"},{"name":"Top-level Only","description":"Drops subsections when the index would crowd.","code":"<TableOfContents hideSubItems>\n  <TableOfContents.Item id=\"overview\">Overview</TableOfContents.Item>\n  <TableOfContents.Item id=\"basic-usage\" indent>Basic usage</TableOfContents.Item>\n  <TableOfContents.Item id=\"advanced-usage\" indent>Advanced usage</TableOfContents.Item>\n  <TableOfContents.Item id=\"accessibility\">Accessibility</TableOfContents.Item>\n</TableOfContents>"},{"name":"Nested Groups","description":"Collapsible categories with counts.","code":"<TableOfContents title=\"Components\">\n  <TableOfContents.Item id=\"all\" active>All</TableOfContents.Item>\n  <TableOfContents.Group label=\"Primitives\" trailing={<span>3</span>}>\n    <TableOfContents.Item id=\"button\">Button</TableOfContents.Item>\n    <TableOfContents.Item id=\"card\">Card</TableOfContents.Item>\n    <TableOfContents.Item id=\"input\">Input</TableOfContents.Item>\n  </TableOfContents.Group>\n  <TableOfContents.Group label=\"Custom\" defaultOpen={false}>\n    <TableOfContents.Item id=\"features\">Features</TableOfContents.Item>\n    <TableOfContents.Item id=\"plans\">Plans</TableOfContents.Item>\n  </TableOfContents.Group>\n</TableOfContents>"},{"name":"With Active Item","description":"The current section stays marked while you read.","code":"<TableOfContents>\n  <TableOfContents.Item id=\"overview\">Overview</TableOfContents.Item>\n  <TableOfContents.Item id=\"setup\" active>Setup</TableOfContents.Item>\n  <TableOfContents.Item id=\"usage\" indent>Basic Usage</TableOfContents.Item>\n  <TableOfContents.Item id=\"advanced\" indent>Advanced</TableOfContents.Item>\n  <TableOfContents.Item id=\"props\">Props</TableOfContents.Item>\n  <TableOfContents.Item id=\"accessibility\">Accessibility</TableOfContents.Item>\n</TableOfContents>"},{"name":"Custom Title","description":"Any heading in place of the default.","code":"<TableOfContents title=\"Contents\">\n  <TableOfContents.Item id=\"chapter-1\">Chapter 1: The Beginning</TableOfContents.Item>\n  <TableOfContents.Item id=\"chapter-2\">Chapter 2: The Middle</TableOfContents.Item>\n  <TableOfContents.Item id=\"chapter-3\">Chapter 3: The End</TableOfContents.Item>\n</TableOfContents>"},{"name":"No Title","description":"Bare list where the surrounding layout already says enough.","code":"<TableOfContents hideTitle>\n  <TableOfContents.Item id=\"section-a\">Section A</TableOfContents.Item>\n  <TableOfContents.Item id=\"section-b\" active>Section B</TableOfContents.Item>\n  <TableOfContents.Item id=\"section-c\">Section C</TableOfContents.Item>\n</TableOfContents>"}],"contract":{"propsSummary":["title: string - visible heading (default \"On This Page\")","hideTitle: boolean - hide the title","hideSubItems: boolean - hide indented items and nested groups (default false)","label: string - aria-label for nav landmark","TableOfContents.Item id: string - heading ID to link to","TableOfContents.Item active: boolean - highlight the current item with ink and weight","TableOfContents.Item indent: boolean - legacy depth=1 indent for flat lists; prefer Group for new code","TableOfContents.Item leading/trailing: node - optional adornments before/after the label","TableOfContents.Group label: node - header text for the group","TableOfContents.Group defaultOpen / open / onOpenChange - uncontrolled or controlled open state (default open)","TableOfContents.Group collapsible: boolean - render as a static label (default true)","TableOfContents.Group trailing/leading: node - optional adornments on the group header row","Forwards standard nav/anchor DOM props; TableOfContents.Item onClick can prevent default smooth scroll"],"a11yRules":["A11Y_NAV_LANDMARK","A11Y_ARIA_CURRENT","A11Y_ARIA_EXPANDED"]},"ai":{"compositionPattern":"compound","subComponents":["Item","Group"],"requiredChildren":["Item","Group"],"commonPatterns":["<TableOfContents>{headings.map(h => <TableOfContents.Item key={h.id} id={h.id} active={activeId === h.id} indent={h.level === 3}>{h.text}</TableOfContents.Item>)}</TableOfContents>","<TableOfContents>{groups.map(g => <TableOfContents.Group key={g.label} label={g.label} trailing={g.count}>{g.items.map(i => <TableOfContents.Item key={i.id} id={i.id} active={activeId === i.id}>{i.label}</TableOfContents.Item>)}</TableOfContents.Group>)}</TableOfContents>"]},"propsSummary":["children: node (required)","label: string (default: Table of contents)","title: string (default: On This Page)","hideTitle: boolean (default: false)","hideSubItems: boolean (default: false)"],"sourcePath":"src/components/TableOfContents/index.tsx","exportName":"TableOfContents","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:04.685Z"},"performance":{"bundleSize":2038,"rawSize":4560,"complexity":"lightweight","budgetPercent":13,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"TableOfContents (self)","bytes":2953,"percent":65},{"path":"Text","bytes":933,"percent":20}]}},"Tabs":{"filePath":"src/components/Tabs/index.tsx","meta":{"name":"Tabs","description":"Swaps between sibling panels without leaving the page.","category":"navigation","tags":["tabs","navigation","panels","content-switcher"],"status":"stable"},"usage":{"when":["Sibling sections of equal weight","Cutting scroll on a long page","Settings split by category","One data set seen several ways"],"whenNot":["Moving between pages (use Sidebar or header navigation)","Steps in an order (use Stepper)","Content the user compares side by side","More options than fit in a row (use Select)"],"guidelines":["One or two words per label","Order by how often each panel is used","Past five or six tabs, split the page instead","Keep panels comparable in depth","Soft rails inside cards, ghost at page level"],"accessibility":["Keyboard navigation with arrow keys","Tab panels are properly labeled","Focus management follows WAI-ARIA tabs pattern"]},"props":{"children":{"type":"node","description":"Tab list and panels (use Tabs.List, Tabs.Tab, Tabs.Panel)","required":true},"defaultValue":{"type":"string","description":"Initially active tab (uncontrolled)","required":false},"value":{"type":"string","description":"Controlled active tab value","required":false},"onValueChange":{"type":"function","description":"Called when active tab changes","required":false},"orientation":{"type":"enum","description":"Tab list orientation","default":"horizontal","required":false,"values":["horizontal","vertical"]},"variant":{"type":"enum","description":"Default chrome for Tabs.List (can be overridden on Tabs.List): ghost draws a rule under the active tab, soft is a filled rail with a selected segment","default":"ghost","required":false,"values":["ghost","soft"]},"size":{"type":"enum","description":"Tab control size. Defaults to the component-default control size.","required":false,"values":["sm","md","lg"]}},"relations":[{"component":"Select","relationship":"alternative","note":"Use Select for many options in compact space"},{"component":"Menu","relationship":"alternative","note":"Use Menu for action-based navigation"}],"variants":[{"name":"Ghost","description":"A rule tracks the active panel.","code":"<Tabs defaultValue=\"overview\" variant=\"ghost\">\n  <Tabs.List>\n    <Tabs.Tab value=\"overview\">Overview</Tabs.Tab>\n    <Tabs.Tab value=\"analytics\">Analytics</Tabs.Tab>\n    <Tabs.Tab value=\"settings\">Settings</Tabs.Tab>\n  </Tabs.List>\n  <Tabs.Panel value=\"overview\">\n    <p>Overview content goes here.</p>\n  </Tabs.Panel>\n  <Tabs.Panel value=\"analytics\">\n    <p>Analytics content goes here.</p>\n  </Tabs.Panel>\n  <Tabs.Panel value=\"settings\">\n    <p>Settings content goes here.</p>\n  </Tabs.Panel>\n</Tabs>"},{"name":"Soft","description":"A filled rail suits panels inside a card.","code":"<Tabs defaultValue=\"all\" variant=\"soft\">\n  <Tabs.List>\n    <Tabs.Tab value=\"all\">All</Tabs.Tab>\n    <Tabs.Tab value=\"active\">Active</Tabs.Tab>\n    <Tabs.Tab value=\"archived\">Archived</Tabs.Tab>\n  </Tabs.List>\n  <Tabs.Panel value=\"all\">\n    <p>Showing all items.</p>\n  </Tabs.Panel>\n  <Tabs.Panel value=\"active\">\n    <p>Showing active items only.</p>\n  </Tabs.Panel>\n  <Tabs.Panel value=\"archived\">\n    <p>Showing archived items.</p>\n  </Tabs.Panel>\n</Tabs>"},{"name":"With Disabled","description":"An unavailable panel stays visible but unreachable.","code":"<Tabs defaultValue=\"general\" variant=\"ghost\">\n  <Tabs.List>\n    <Tabs.Tab value=\"general\">General</Tabs.Tab>\n    <Tabs.Tab value=\"security\">Security</Tabs.Tab>\n    <Tabs.Tab value=\"billing\" disabled>Billing</Tabs.Tab>\n  </Tabs.List>\n  <Tabs.Panel value=\"general\">\n    <p>General settings panel.</p>\n  </Tabs.Panel>\n  <Tabs.Panel value=\"security\">\n    <p>Security settings panel.</p>\n  </Tabs.Panel>\n</Tabs>"},{"name":"List Variant Override","description":"One list can opt out of the root's style.","code":"<Tabs defaultValue=\"overview\" variant=\"soft\">\n  <Tabs.List variant=\"ghost\">\n    <Tabs.Tab value=\"overview\">Overview</Tabs.Tab>\n    <Tabs.Tab value=\"activity\">Activity</Tabs.Tab>\n  </Tabs.List>\n  <Tabs.Panel value=\"overview\">\n    <p>Root sets soft, but this list overrides to ghost.</p>\n  </Tabs.Panel>\n  <Tabs.Panel value=\"activity\">\n    <p>Per-list variant override example.</p>\n  </Tabs.Panel>\n</Tabs>"}],"contract":{"propsSummary":["value: string - controlled active tab","defaultValue: string - initial active tab","onValueChange: (value) => void - tab change handler","variant: ghost|soft - default chrome for Tabs.List","Tabs.List variant?: ghost|soft - optional per-list override"],"a11yRules":["A11Y_TABS_KEYBOARD","A11Y_TABS_LABELS"]},"ai":{"compositionPattern":"compound","subComponents":["List","Tab","Panel"],"requiredChildren":["List","Panel"],"commonPatterns":["<Tabs defaultValue=\"tab1\"><Tabs.List><Tabs.Tab value=\"tab1\">{label1}</Tabs.Tab><Tabs.Tab value=\"tab2\">{label2}</Tabs.Tab></Tabs.List><Tabs.Panel value=\"tab1\">{content1}</Tabs.Panel><Tabs.Panel value=\"tab2\">{content2}</Tabs.Panel></Tabs>"]},"propsSummary":["children: node (required)","defaultValue: string","value: string","onValueChange: function","orientation: horizontal|vertical (default: horizontal)","variant: ghost|soft (default: ghost)"],"sourcePath":"src/components/Tabs/index.tsx","exportName":"Tabs","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:04.871Z"},"performance":{"bundleSize":1040,"rawSize":2471,"complexity":"lightweight","budgetPercent":7,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Tabs (self)","bytes":1640,"percent":66},{"path":"ComponentDefaults","bytes":193,"percent":8}]}},"Text":{"filePath":"src/components/Text/index.tsx","meta":{"name":"Text","description":"Applies the type scale to any text element, without hand-rolling font rules.","category":"display","tags":["text","typography","heading","paragraph","font"],"status":"stable"},"usage":{"when":["Any text that should sit on the type scale","Headings and paragraphs that need real tags","Text that must truncate or clamp"],"whenNot":["Rich or authored content (use Markdown)","Code (use CodeBlock)","Anything clickable (use Link or Button)"],"guidelines":["Pick the tag with as, the look with role (or scale) — they are separate decisions","Never skip heading levels to get a smaller heading","Color is for hierarchy and state, not decoration","Truncated text needs the full string in title or a tooltip"],"accessibility":["as keeps the document outline intact for screen readers","Clamped text still exposes its full content to assistive tech"]},"props":{"children":{"type":"node","description":"Text content","required":true},"as":{"type":"enum","description":"HTML element to render","default":"span","required":false,"values":["h1","h2","h3","h4","h5","h6","p","span","label","div","strong","em","small","mark","del","ins","sub","sup","time","address","blockquote","cite","code","abbr"]},"role":{"type":"enum","description":"Typography role: one named setting of size, weight, line height and tracking. section-label is the small list heading; eyebrow is the small semibold label above a statement. A role owns the whole setting, so scale, weight, font and letterSpacing are unavailable beside it.","required":false,"values":["caption","ui-compact","ui-standard","body-compact","body-relaxed","title-sm","title-md","title-lg","display","code","section-label","eyebrow"]},"scale":{"type":"enum","description":"Type-scale step for text with no role. 2xs (10), xs (12), sm/base (14), md (15 prose body), lg (20), xl (24), 2xl (30), 3xl (36 page title), 4xl (48 hero).","required":false,"values":["2xs","xs","sm","base","md","lg","xl","2xl","3xl","4xl"]},"weight":{"type":"enum","description":"Font weight","default":"\"normal\"","required":false,"values":["normal","medium","semibold","bold"]},"color":{"type":"enum","description":"Text color (muted is an alias for tertiary; success/warning/danger are for a run of text that carries a state on its own — prefer Badge or Alert when the state deserves a container)","default":"\"primary\"","required":false,"values":["primary","secondary","tertiary","muted","accent","success","warning","danger"]},"font":{"type":"enum","description":"Font family","default":"sans","required":false,"values":["sans","mono"]},"truncate":{"type":"boolean","description":"Truncate with ellipsis on overflow","required":false},"lineClamp":{"type":"number","description":"Number of lines before truncating (requires truncate)","required":false},"style":{"type":"object","description":"","required":false},"letterSpacing":{"type":"enum","description":"Letter-spacing preset. `\"tight\"` suits dense UI chrome labels (-0.01em);\n`\"tighter\"` suits headings and stat values (-0.02em); `\"tightest\"` suits\ndisplay numerics (-0.025em). Omit for the font's default tracking.","required":false,"values":["normal","tight","tighter","tightest"]},"tabularNums":{"type":"boolean","description":"Use tabular (fixed-width) numerals so digits align in columns. Ideal for\nstat values, tables, timestamps, and any updating number.","required":false}},"relations":[{"component":"Link","relationship":"sibling","note":"Use Link for clickable text"},{"component":"CodeBlock","relationship":"alternative","note":"Use CodeBlock for code display"},{"component":"Badge","relationship":"sibling","note":"Use Badge for labels/tags"}],"variants":[{"name":"Scale","description":"Ten steps from caption to hero, all on the same scale.","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n  <Text scale=\"2xs\">Extra extra small (2xs — 10px)</Text>\n  <Text scale=\"xs\">Extra small (xs — 12px)</Text>\n  <Text scale=\"sm\">Small (sm — 14px)</Text>\n  <Text scale=\"base\">Base size (14px)</Text>\n  <Text scale=\"md\">Medium prose body (md — 15px)</Text>\n  <Text scale=\"lg\">Large (lg — 20px)</Text>\n  <Text scale=\"xl\">Extra large (xl — 24px)</Text>\n  <Text scale=\"2xl\">Extra extra large (2xl — 30px)</Text>\n  <Text scale=\"3xl\">Page title (3xl — 36px)</Text>\n  <Text scale=\"4xl\">Hero display (4xl — 48px)</Text>\n</div>"},{"name":"Weights","description":"Four weights — reach past semibold only for real emphasis.","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n  <Text weight=\"normal\">Normal weight</Text>\n  <Text weight=\"medium\">Medium weight</Text>\n  <Text weight=\"semibold\">Semibold weight</Text>\n  <Text weight=\"bold\">Bold weight</Text>\n</div>"},{"name":"Colors","description":"Dimmer tones push text back; success and danger carry state.","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n  <Text color=\"primary\">Primary color (default)</Text>\n  <Text color=\"secondary\">Secondary color</Text>\n  <Text color=\"tertiary\">Tertiary color</Text>\n  <Text color=\"muted\">Muted color (alias for tertiary)</Text>\n</div>"},{"name":"Semantic Elements","description":"The as prop picks the tag, so the outline stays correct.","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n  <Text as=\"h1\" scale=\"3xl\" weight=\"semibold\">Heading 1</Text>\n  <Text as=\"h2\" scale=\"xl\" weight=\"semibold\">Heading 2</Text>\n  <Text as=\"h3\" scale=\"lg\" weight=\"semibold\">Heading 3</Text>\n  <Text as=\"p\" scale=\"md\" color=\"secondary\">\n    This is a paragraph of text that demonstrates the Text component\n    with semantic paragraph element.\n  </Text>\n</div>"},{"name":"Monospace","description":"Fixed width for IDs, keys, and anything meant to be compared.","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n  <Text font=\"mono\" scale=\"sm\">const greeting = \"Hello, World!\";</Text>\n  <Text font=\"mono\" scale=\"sm\" color=\"secondary\">npm install @usefragments/ui</Text>\n</div>"},{"name":"Truncation","description":"One line with an ellipsis, or clamp to a set number of lines.","code":"<div style={{ width: '200px', display: 'flex', flexDirection: 'column', gap: '12px' }}>\n  <Text truncate>\n    This is a very long text that will be truncated with an ellipsis when it overflows.\n  </Text>\n  <Text truncate lineClamp={2}>\n    This text will be clamped to two lines. Any content beyond two lines\n    will be hidden and replaced with an ellipsis at the end.\n  </Text>\n</div>"}],"contract":{"propsSummary":["as: string - HTML element","role: caption|ui-compact|ui-standard|body-compact|body-relaxed|title-sm|title-md|title-lg|code|section-label|eyebrow - typography role (owns size, weight, line height, tracking)","scale: 2xs|xs|sm|base|md|lg|xl|2xl|3xl|4xl - type-scale step for text with no role (px: 10/12/14/14/15/20/24/30/36/48)","weight: normal|medium|semibold|bold - font weight","color: primary|secondary|tertiary|muted|accent|success|warning|danger - text color (muted = tertiary; accent = brand spend; semantic colours for inline state)","font: sans|mono - font family","truncate: boolean - enable truncation","lineClamp: number - max lines"],"a11yRules":["A11Y_HEADING_HIERARCHY","A11Y_SEMANTIC_ELEMENTS"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["children: node (required)","as: h1|h2|h3|h4|h5|h6|p|span|label|div|strong|em|small|mark|del|ins|sub|sup|time|address|blockquote|cite|code|abbr (default: span)","role: caption|ui-compact|ui-standard|body-compact|body-relaxed|title-sm|title-md|title-lg|code|section-label|eyebrow","scale: 2xs|xs|sm|base|md|lg|xl|2xl|3xl|4xl","weight: normal|medium|semibold|bold (default: \"normal\")","color: primary|secondary|tertiary|muted|accent|success|warning|danger (default: \"primary\")","font: sans|mono (default: sans)","truncate: boolean","lineClamp: number","style: object"],"sourcePath":"src/components/Text/index.tsx","exportName":"Text","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:05.045Z"},"performance":{"bundleSize":847,"rawSize":1506,"complexity":"lightweight","budgetPercent":6,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Text (self)","bytes":844,"percent":56},{"path":"src/utils/env.ts","bytes":89,"percent":6}]}},"Textarea":{"filePath":"src/components/Textarea/index.tsx","meta":{"name":"Textarea","description":"Collects multi-line text for longer form content.","category":"inputs","tags":["input","text","form","multiline"],"status":"stable"},"usage":{"when":["Collecting multi-line text (comments, descriptions)","Free-form text input that may span multiple lines","Message composition fields","Code or content editing"],"whenNot":["Single-line input (use Input)","Rich text editing (use rich text editor)","Selecting from predefined options (use Select)"],"guidelines":["Set rows to match the expected answer length","Placeholder shows an example, not the label","Pair maxLength with showCharCount so the limit is visible","Use resize=\"none\" only when the layout truly cannot flex"],"accessibility":["Give every textarea a visible label","Put format hints in helperText, not the placeholder","Error text says what to fix, not just that it failed"]},"props":{"value":{"type":"string","description":"Controlled value","required":false},"defaultValue":{"type":"string","description":"Default value for uncontrolled usage","required":false},"placeholder":{"type":"string","description":"Placeholder text","required":false},"rows":{"type":"number","description":"Number of visible text rows","default":"3","required":false},"minRows":{"type":"number","description":"Minimum number of rows when auto-resizing","required":false},"maxRows":{"type":"number","description":"Maximum number of rows when auto-resizing","required":false},"resize":{"type":"enum","description":"Resize behavior","default":"vertical","required":false,"values":["none","vertical","horizontal","both"]},"size":{"type":"enum","description":"Size variant","default":"\"md\"","required":false,"values":["sm","md","lg"]},"disabled":{"type":"boolean","description":"Disabled state","default":"false","required":false},"error":{"type":"boolean","description":"Error state","default":"false","required":false},"showCharCount":{"type":"boolean","description":"Show character counter when maxLength is set","default":"false","required":false},"label":{"type":"string","description":"Label text above the textarea","required":false},"helperText":{"type":"string","description":"Helper text below the textarea","required":false},"onChange":{"type":"function","description":"Called when the textarea value changes","required":false},"onValueChange":{"type":"function","description":"Value-first change callback alias: (value: string) => void","required":false},"onBlur":{"type":"function","description":"Called when textarea loses focus","required":false},"onFocus":{"type":"function","description":"Called when textarea receives focus","required":false},"name":{"type":"string","description":"Form field name","required":false},"maxLength":{"type":"number","description":"Maximum character length","required":false},"required":{"type":"boolean","description":"Required field","required":false},"aria-label":{"type":"string","description":"Accessible label for no-visible-label usage","required":false},"aria-labelledby":{"type":"string","description":"Accessible labelled-by relationship","required":false},"aria-describedby":{"type":"string","description":"Accessible described-by relationship","required":false},"rootProps":{"type":"object","description":"HTML attributes applied to the wrapper element","required":false},"className":{"type":"string","description":"Wrapper class name","required":false},"style":{"type":"object","description":"Wrapper styles","required":false}},"relations":[{"component":"Input","relationship":"alternative","note":"Use Input for single-line text"}],"variants":[{"name":"Default","description":"Three rows, draggable from the bottom-right corner.","code":"<Textarea\n  label=\"Description\"\n  placeholder=\"Enter a description...\"\n/>"},{"name":"With Helper Text","description":"Supporting text sits under the box.","code":"<Textarea\n  label=\"Bio\"\n  placeholder=\"Tell us about yourself...\"\n  helperText=\"Max 500 characters\"\n  maxLength={500}\n/>"},{"name":"Error State","description":"Red border, and helperText becomes the reason.","code":"<Textarea\n  label=\"Comments\"\n  placeholder=\"Add your comments...\"\n  error\n  helperText=\"This field is required\"\n/>"},{"name":"Disabled","description":"Dimmed and unfocusable.","code":"<Textarea\n  label=\"Notes\"\n  placeholder=\"Cannot edit...\"\n  disabled\n/>"},{"name":"Custom Rows","description":"rows={6} doubles the visible height before scrolling.","code":"<Textarea\n  label=\"Long Description\"\n  placeholder=\"Enter detailed information...\"\n  rows={6}\n/>"},{"name":"Sizes","description":"Three heights: sm, md, lg.","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '12px', maxWidth: '400px' }}>\n  <Textarea label=\"Small\" size=\"sm\" placeholder=\"Small textarea\" />\n  <Textarea label=\"Medium\" size=\"md\" placeholder=\"Medium textarea\" />\n  <Textarea label=\"Large\" size=\"lg\" placeholder=\"Large textarea\" />\n</div>"},{"name":"Fixed Height","description":"resize=\"none\" removes the drag handle so the box stays put.","code":"<Textarea\n  label=\"Notes\"\n  placeholder=\"Add notes...\"\n  resize=\"none\"\n/>"},{"name":"With Character Counter","description":"Live count against maxLength sits below the box.","code":"<Textarea\n  label=\"Bio\"\n  placeholder=\"Tell us about yourself...\"\n  maxLength={200}\n  showCharCount\n/>"}],"contract":{"propsSummary":["value: string - controlled value","rows: number - visible rows (default: 3)","label: string - label text","size: sm|md|lg (default: md)","error: boolean - error state","showCharCount: boolean - show character counter (requires maxLength)","disabled: boolean - disabled state","resize: none|vertical|horizontal|both","onValueChange: (value: string) => void - value-first change callback alias","rootProps: HTMLAttributes<HTMLDivElement> - wrapper element props","...native textarea attributes are supported (readOnly, autoComplete, maxLength, onKeyDown, etc.)"],"a11yRules":["A11Y_LABEL_REQUIRED"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["value: string","defaultValue: string","placeholder: string","rows: number (default: 3)","minRows: number","maxRows: number","resize: none|vertical|horizontal|both (default: vertical)","size: sm|md|lg (default: md)","disabled: boolean (default: false)","error: boolean (default: false)","showCharCount: boolean (default: false)","label: string","helperText: string","onChange: function","onValueChange: function","onBlur: function","onFocus: function","name: string","maxLength: number","required: boolean","aria-label: string","aria-labelledby: string","aria-describedby: string","rootProps: object","className: string","style: object"],"sourcePath":"src/components/Textarea/index.tsx","exportName":"Textarea","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:05.217Z"},"performance":{"bundleSize":1260,"rawSize":2623,"complexity":"lightweight","budgetPercent":8,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Textarea (self)","bytes":1725,"percent":66},{"path":"ComponentDefaults","bytes":198,"percent":8},{"path":"src/utils/aria.ts","bytes":110,"percent":4}]}},"Theme":{"filePath":"src/components/Theme/index.tsx","meta":{"name":"Theme","description":"Utility provider that gives everything below it a light, dark, or system color mode.","category":"utilities","tags":["theme","dark-mode","light-mode","provider","toggle"],"status":"stable"},"usage":{"when":["An app needs light and dark modes","The user's choice should survive a reload","You want to honour the OS setting by default"],"whenNot":["Recoloring one component (use its props)","A single one-off color swap (use a CSS variable)"],"guidelines":["ThemeProvider goes at the root, once","useTheme reads and sets the mode anywhere below it","storageKey renames the localStorage entry","attribute=\"class\" if your CSS keys off .dark instead of data-theme","ThemeProvider renders no chrome of its own; Theme.Toggle is the segmented light/dark/system control and Theme.Button the single icon button for tight toolbars"],"accessibility":["The toggle's label names the mode it is in","System mode follows prefers-color-scheme"]},"props":{"children":{"type":"node","description":"Application content","required":true},"defaultMode":{"type":"enum","description":"Default theme mode for uncontrolled usage","default":"system","required":false,"values":["light","dark","system"]},"defaultTheme":{"type":"enum","description":"","required":false,"values":["light","dark","system"]},"mode":{"type":"enum","description":"Controlled theme mode","required":false,"values":["light","dark","system"]},"onModeChange":{"type":"function","description":"Callback when mode changes","required":false},"storageKey":{"type":"string","description":"localStorage key for persistence","default":"fui-theme","required":false},"attribute":{"type":"enum","description":"How to apply theme to DOM","default":"data-theme","required":false,"values":["data-theme","class"]},"componentDefaults":{"type":"object","description":"Default primitive component behavior for the subtree.","required":false}},"relations":[{"component":"AppShell","relationship":"sibling","note":"ThemeProvider typically wraps AppShell"}],"variants":[{"name":"Default","description":"Wrap the app once; every token below resolves to the active mode.","code":"<ThemeProvider defaultMode=\"system\">\n  <div\n    style={{\n      padding: '16px',\n      borderRadius: '8px',\n      background: 'var(--fui-bg-elevated)',\n      color: 'var(--fui-text-primary)',\n    }}\n  >\n    Everything inside follows the system color scheme.\n  </div>\n</ThemeProvider>"},{"name":"With Toggle","description":"The toggle cycles light, dark, then back to system.","code":"<ThemeProvider defaultMode=\"light\">\n  <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>\n    <ThemeToggle />\n    <span>Click to cycle themes</span>\n  </div>\n</ThemeProvider>"},{"name":"Toggle Sizes","description":"Three sizes so the control fits whatever bar holds it.","code":"<ThemeProvider defaultMode=\"light\">\n  <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>\n    <ThemeToggle size=\"sm\" />\n    <ThemeToggle size=\"md\" />\n    <ThemeToggle size=\"lg\" />\n  </div>\n</ThemeProvider>"},{"name":"Theme Button","description":"A single icon button for toolbars with no room to spare.","code":"<ThemeProvider defaultMode=\"system\">\n  <ThemeButton aria-label=\"Switch color mode\" />\n</ThemeProvider>"}],"contract":{"propsSummary":["defaultMode: light|dark|system - initial theme mode","mode: light|dark|system - controlled mode","onModeChange: (mode) => void - change handler","attribute: data-theme|class - DOM theme attribute","Theme.Toggle size: sm|md|lg - segmented light/dark/system control","Theme.Toggle forwards div DOM props to the button group root","Theme.Button size: sm|md|lg - single ghost icon button that flips light and dark, built on IconButton"],"a11yRules":["A11Y_TARGET_SIZE_MIN"]},"propsSummary":["children: node (required)","defaultMode: light|dark|system","defaultTheme: light|dark|system","mode: light|dark|system","onModeChange: function","storageKey: string (default: fui-theme)","attribute: data-theme|class (default: data-theme)","Theme.Toggle size: sm|md|lg","Theme.Button size: sm|md|lg"],"sourcePath":"src/components/Theme/index.tsx","exportName":"ThemeProvider","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:05.406Z"},"ai":{"subComponents":["Root","Provider","Toggle","Button","useTheme"],"compositionPattern":"compound"},"performance":{"bundleSize":3396,"rawSize":8460,"complexity":"lightweight","budgetPercent":22,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"ThemeToggle (self)","bytes":3950,"percent":47},{"path":"(other)","bytes":3237,"percent":38},{"path":"ComponentDefaults","bytes":393,"percent":5},{"path":"Theme","bytes":192,"percent":2}]}},"ThinkingIndicator":{"filePath":"src/components/ThinkingIndicator/index.tsx","meta":{"name":"ThinkingIndicator","description":"Shows that an AI response is being generated.","category":"ai","tags":["thinking","loading","ai","processing","indicator","animation"],"status":"stable"},"usage":{"when":["A model is working on a request","Async AI work that would otherwise look frozen","Multi-stage tasks worth showing stage by stage","The moment before streaming starts"],"whenNot":["Ordinary loading (use Progress or Skeleton)","Form submission (use the Button loading state)","Whole-page loading (use Progress or Skeleton)"],"guidelines":["active controls whether it shows at all","dots suits chat; spinner suits a discrete action","Turn on showElapsed once waits run past a few seconds","Use steps for tool calls, research, and other staged work"],"accessibility":["Uses role=\"status\" and aria-live=\"polite\"","Provides aria-label for screen readers","Animations respect prefers-reduced-motion","Elapsed time uses tabular numbers for stability"]},"props":{"active":{"type":"boolean","description":"Whether thinking is active","default":"true","required":false},"label":{"type":"string","description":"Status text","default":"Thinking...","required":false},"kind":{"type":"enum","description":"Animation style","default":"dots","required":false,"values":["dots","pulse","spinner"]},"showElapsed":{"type":"boolean","description":"Show elapsed time","default":"false","required":false},"steps":{"type":"array","description":"Multi-step progress array","required":false}},"relations":[{"component":"Message","relationship":"sibling","note":"Show ThinkingIndicator while waiting for assistant message"},{"component":"ConversationList","relationship":"parent","note":"Typically placed at bottom of ConversationList"},{"component":"Progress","relationship":"alternative","note":"Use Progress for determinate progress"}],"variants":[{"name":"Dots (Default)","description":"Three dots bounce in sequence; the quietest option.","code":"<ThinkingIndicator kind=\"dots\" label=\"Thinking...\" />"},{"name":"Pulse","description":"A single ring breathes in place.","code":"<ThinkingIndicator kind=\"pulse\" label=\"Processing...\" />"},{"name":"Spinner","description":"A rotating arc, for work with a definite end.","code":"<ThinkingIndicator kind=\"spinner\" label=\"Loading...\" />"},{"name":"With Elapsed Time","description":"A live counter reassures the reader during long waits.","code":"<ThinkingIndicator\n  kind=\"dots\"\n  label=\"Generating response...\"\n  showElapsed\n/>"},{"name":"Multi-Step Progress","description":"Finished, running, and queued stages read at a glance.","code":"<ThinkingIndicator\n  kind=\"spinner\"\n  label=\"Working...\"\n  steps={[\n    { id: '1', label: 'Analyzing request', status: 'complete' },\n    { id: '2', label: 'Searching knowledge base', status: 'pending' },\n    { id: '3', label: 'Generating response', status: 'idle' },\n  ]}\n/>"},{"name":"With Error Step","description":"A failed stage turns red while the next one retries.","code":"<ThinkingIndicator\n  kind=\"spinner\"\n  label=\"Retrying...\"\n  steps={[\n    { id: '1', label: 'Connecting to API', status: 'complete' },\n    { id: '2', label: 'Fetching data', status: 'error' },\n    { id: '3', label: 'Retrying with fallback', status: 'pending' },\n  ]}\n/>"},{"name":"Custom Label","description":"Name the actual task instead of a generic status.","code":"<ThinkingIndicator\n  kind=\"dots\"\n  label=\"Claude is writing code...\"\n/>"}],"contract":{"propsSummary":["active: boolean - whether indicator is visible (default: true)","label: string - status text (default: \"Thinking...\")","kind: \"dots\" | \"pulse\" | \"spinner\" - animation style","steps[].status: \"idle\" | \"pending\" | \"streaming\" | \"complete\" | \"error\" - shared lifecycle axis","showElapsed: boolean - show elapsed time","steps: ThinkingStep[] - multi-step progress"],"a11yRules":["A11Y_ARIA_LIVE","A11Y_MOTION_PREFERENCE"]},"ai":{"compositionPattern":"compound","subComponents":["Steps","Step"]},"propsSummary":["active: boolean (default: true)","label: string (default: Thinking...)","kind: dots|pulse|spinner (default: dots)","showElapsed: boolean (default: false)","steps: array"],"sourcePath":"src/components/ThinkingIndicator/index.tsx","exportName":"ThinkingIndicator","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:05.747Z"},"performance":{"bundleSize":1922,"rawSize":5284,"complexity":"lightweight","budgetPercent":13,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"ThinkingIndicator (self)","bytes":2560,"percent":48},{"path":"Loading","bytes":2026,"percent":38}]}},"Toast":{"filePath":"src/components/Toast/index.tsx","meta":{"name":"Toast","description":"Briefly reports what just happened, without blocking the page.","category":"feedback","tags":["notification","alert","message","feedback"],"status":"stable"},"usage":{"when":["Confirming an action landed","Reporting whether an operation worked","News the user does not have to act on","Messages that can disappear on their own"],"whenNot":["Errors the user must resolve — use Dialog","Anything that must stay on screen — use Alert","Field-level validation — use form error states","Site-wide notices — use a banner"],"guidelines":["One sentence, plus a title if it helps","Match the tone to what actually happened","Auto-dismiss in three to five seconds","Anything with an action needs a manual dismiss too","Two or three on screen at once, no more","useToast() helpers take (title, description) or an options object for action, duration, and id"],"accessibility":["role=\"alert\" for anything the user must not miss","Leave enough time to read it","Never let colour be the only signal","Give the dismiss button a real label"]},"props":{"onDismiss":{"type":"function","description":"Callback when toast should be dismissed","required":false},"title":{"type":"string","description":"Toast title","required":false},"description":{"type":"string","description":"Additional message content","required":false},"tone":{"type":"enum","description":"Colour on the shared status ramp; neutral is the plain notification. The useToast().error helper sets tone=\"danger\".","default":"neutral","required":false,"values":["neutral","success","danger","warning","info"]},"duration":{"type":"number","description":"Auto-dismiss duration in ms (0 = no auto-dismiss)","default":8000,"required":false},"action":{"type":"object","description":"Optional action button { label, onClick }","required":false},"id":{"type":"string","description":"","required":false},"onPause":{"type":"function","description":"Callback when auto-dismiss timer should pause","required":false},"onResume":{"type":"function","description":"Callback when auto-dismiss timer should resume","required":false}},"relations":[{"component":"Alert","relationship":"alternative","note":"Use Alert for persistent inline messages"},{"component":"Dialog","relationship":"alternative","note":"Use Dialog for messages requiring user action"}],"variants":[{"name":"Default","description":"Neutral message with a title and one line under it.","code":"<Toast\n  title=\"Draft saved\"\n  description=\"We will keep it until you publish.\"\n/>"},{"name":"Tones","description":"Icon and colour together carry the outcome.","code":"import { Stack } from '@/components/Stack';\n\n<Stack direction=\"column\" gap=\"sm\">\n  <Toast\n    title=\"Success!\"\n    description=\"Your changes have been saved.\"\n    tone=\"success\"\n  />\n  <Toast\n    title=\"Error\"\n    description=\"Failed to save changes. Please try again.\"\n    tone=\"danger\"\n  />\n  <Toast\n    title=\"Warning\"\n    description=\"This action cannot be undone.\"\n    tone=\"warning\"\n  />\n  <Toast\n    title=\"New update\"\n    description=\"Version 2.0 is now available.\"\n    tone=\"info\"\n  />\n</Stack>"},{"name":"With Action","description":"One-tap way back from something destructive.","code":"<Toast\n  title=\"File deleted\"\n  description=\"The file has been moved to trash.\"\n  action={{\n    label: 'Undo',\n    onClick: () => {},\n  }}\n/>"},{"name":"Dismissible","description":"onDismiss adds a close button for longer messages.","code":"<Toast\n  title=\"Export running\"\n  description=\"We will email you when the file is ready.\"\n  tone=\"info\"\n  onDismiss={() => {}}\n/>"}],"contract":{"propsSummary":["title: string - toast title","description: string - additional message","tone: neutral|success|danger|warning|info","duration: number - ms before auto-dismiss","action: { label, onClick } - optional action","ToastInput (useToast): optional id for deterministic creation/replacement flows","useToast().success/error/warning/info: (title, description?) or ({ title, description, action, duration, id })"],"a11yRules":["A11Y_ALERT_ROLE","A11Y_TARGET_SIZE_MIN"]},"ai":{"compositionPattern":"compound","subComponents":["Provider"]},"propsSummary":["onDismiss: function","title: string","description: string","tone: neutral|success|danger|warning|info (default: neutral)","duration: number","action: object","id: string","onPause: function","onResume: function"],"sourcePath":"src/components/Toast/index.tsx","exportName":"Toast","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:06.259Z"},"performance":{"bundleSize":3236,"rawSize":8780,"complexity":"lightweight","budgetPercent":21,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Toast (self)","bytes":5496,"percent":63},{"path":"Button","bytes":1967,"percent":22},{"path":"IconButton","bytes":682,"percent":8}]}},"ToggleGroup":{"filePath":"src/components/ToggleGroup/index.tsx","meta":{"name":"ToggleGroup","description":"Picks exactly one option from a short row of toggle buttons.","category":"actions","tags":["toggle","group","fragmented","control","tabs","switch"],"status":"stable"},"usage":{"when":["Switching between mutually exclusive views or modes","Choosing one of two to five options","View switchers and segmented filters"],"whenNot":["More than one can be picked — use a Checkbox group","More than five options — use Select or RadioGroup","Moving between pages — use Tabs","A single on/off — use Switch"],"guidelines":["Two to five items","Labels short enough to scan in one pass","Icons work for well-known modes like grid and list","soft for an inset tonal rail, ghost for an open filter cluster, outline for connected segments","Keep targets at least 24px on touch"],"accessibility":["The group is a radiogroup; each item is a radio with aria-checked","Arrow keys move between items, Tab enters and leaves the group","Icon-only items still need an aria-label","Focus stays visible on the selected item"]},"props":{"value":{"type":"string","description":"Currently selected value","required":false},"defaultValue":{"type":"string","description":"Initial selected value (uncontrolled)","required":false},"onChange":{"type":"function","description":"Called with new value when selection changes","required":false},"onValueChange":{"type":"function","description":"Alias for onChange (Radix convention): (value: string) => void","required":false},"children":{"type":"node","description":"ToggleGroup.Item components","required":true},"variant":{"type":"enum","description":"Chrome: soft is the filled rail, ghost the open pill cluster, outline the connected bordered segments","default":"soft","required":false,"values":["soft","ghost","outline"]},"size":{"type":"enum","description":"Size variant","default":"\"md\"","required":false,"values":["sm","md","lg"]},"gap":{"type":"enum","description":"Gap between items in the ghost variant. Connected variants intentionally ignore gaps.","required":false,"values":["sm","none","xs"]},"selectionMode":{"type":"enum","description":"Selection behavior","default":"single","required":false,"values":["single"]}},"relations":[{"component":"RadioGroup","relationship":"alternative","note":"RadioGroup for form-style single selection"},{"component":"Tabs","relationship":"alternative","note":"Tabs for content panel switching"},{"component":"Switch","relationship":"sibling","note":"Switch for single on/off control"}],"variants":[{"name":"Default","description":"Inset tonal rail; the selected segment lifts.","code":"<ToggleGroup value={value} onChange={setValue}>\n  <ToggleGroup.Item value=\"left\">Left</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"center\">Center</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"right\">Right</ToggleGroup.Item>\n</ToggleGroup>"},{"name":"Ghost","description":"Detached rounded buttons for open filter clusters.","code":"<ToggleGroup value={value} onChange={setValue} variant=\"ghost\">\n  <ToggleGroup.Item value=\"all\">All</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"active\">Active</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"completed\">Completed</ToggleGroup.Item>\n</ToggleGroup>"},{"name":"Outline","description":"Bordered segments sharing one continuous edge.","code":"<ToggleGroup value={value} onChange={setValue} variant=\"outline\">\n  <ToggleGroup.Item value=\"day\">Day</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"week\">Week</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"month\">Month</ToggleGroup.Item>\n</ToggleGroup>"},{"name":"Uncontrolled","description":"defaultValue when nothing outside needs the selection.","code":"<ToggleGroup defaultValue=\"list\">\n  <ToggleGroup.Item value=\"grid\">Grid</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"list\">List</ToggleGroup.Item>\n</ToggleGroup>"},{"name":"Sizes","description":"sm for toolbars, lg where the rail anchors a page.","code":"import { Stack } from '@/components/Stack';\n\n<Stack direction=\"column\" gap=\"md\" align=\"start\">\n  <ToggleGroup defaultValue=\"a\" size=\"sm\">\n    <ToggleGroup.Item value=\"a\">Small</ToggleGroup.Item>\n    <ToggleGroup.Item value=\"b\">Rail</ToggleGroup.Item>\n  </ToggleGroup>\n  <ToggleGroup defaultValue=\"a\" size=\"md\">\n    <ToggleGroup.Item value=\"a\">Medium</ToggleGroup.Item>\n    <ToggleGroup.Item value=\"b\">Rail</ToggleGroup.Item>\n  </ToggleGroup>\n  <ToggleGroup defaultValue=\"a\" size=\"lg\">\n    <ToggleGroup.Item value=\"a\">Large</ToggleGroup.Item>\n    <ToggleGroup.Item value=\"b\">Rail</ToggleGroup.Item>\n  </ToggleGroup>\n</Stack>"},{"name":"View Switcher","description":"Icon-only modes, each named for screen readers.","code":"import { SquaresFour as GridIcon, ListBullets as ListIcon } from '@phosphor-icons/react';\n\n<ToggleGroup value={view} onChange={setView} size=\"sm\">\n  <ToggleGroup.Item value=\"grid\" aria-label=\"Grid view\">\n    <GridIcon aria-hidden />\n  </ToggleGroup.Item>\n  <ToggleGroup.Item value=\"list\" aria-label=\"List view\">\n    <ListIcon aria-hidden />\n  </ToggleGroup.Item>\n</ToggleGroup>"},{"name":"Disabled Item","description":"One option locked out; the rest stay reachable.","code":"<ToggleGroup value={value} onChange={setValue}>\n  <ToggleGroup.Item value=\"basic\">Basic</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"pro\">Pro</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"enterprise\" disabled>Enterprise</ToggleGroup.Item>\n</ToggleGroup>"}],"contract":{"propsSummary":["value?: string - controlled selected value","defaultValue?: string - initial selected value (uncontrolled)","onChange: (value: string) => void - change handler (or onValueChange)","children: ToggleGroup.Item[] - toggle items","variant: soft|ghost|outline - chrome (soft rail, ghost cluster, outline segments)","size: sm|md|lg - size variant","gap: none|xs|sm - ghost spacing (xs by default; connected variants remain gapless)","selectionMode: single (default: single)"],"a11yRules":["A11Y_GROUP_ROLE","A11Y_KEYBOARD_ACCESSIBLE"]},"ai":{"compositionPattern":"compound","subComponents":["Item"],"commonPatterns":["<ToggleGroup>\n  <ToggleGroup.Item>...</ToggleGroup.Item>\n</ToggleGroup>"],"requiredChildren":["Item"]},"propsSummary":["value: string","defaultValue: string","onChange: function","onValueChange: function","children: node (required)","variant: soft|ghost|outline (default: soft)","size: sm|md|lg (default: md)","gap: sm|none|xs (default: xs for ghost; none otherwise)","selectionMode: single (default: single)"],"sourcePath":"src/components/ToggleGroup/index.tsx","exportName":"ToggleGroup","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:07.233Z"},"performance":{"bundleSize":1431,"rawSize":2911,"complexity":"lightweight","budgetPercent":9,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"ToggleGroup (self)","bytes":2056,"percent":71},{"path":"ComponentDefaults","bytes":193,"percent":7}]}},"Tooltip":{"filePath":"src/components/Tooltip/index.tsx","meta":{"name":"Tooltip","description":"Shows a one-line hint when a control is hovered or focused.","category":"overlays","tags":["tooltip","hint","help","hover","contextual"],"status":"stable"},"usage":{"when":["Naming icon-only buttons","Showing text that had to be truncated","Surfacing a keyboard shortcut","One line of help, no more"],"whenNot":["Help longer than a line — use Popover","Anything the user must not miss — use Alert","Content they need to click — use Popover or Menu","Touch-first screens, where there is no hover"],"guidelines":["Under 80 characters","Sentence case, no trailing period","Never just repeat the visible label","Always leave a non-hover path to the same information","contentProps sets attributes and styling on the popup"],"accessibility":["Opens on keyboard focus, not only hover","The open delay stops tooltips flashing while the pointer crosses the screen","Do not put anything critical here — treat it as a hint, not a label"]},"props":{"children":{"type":"element","description":"The element that triggers the tooltip","required":true},"content":{"type":"node","description":"Content to display in the tooltip","required":true},"side":{"type":"enum","description":"Which side to show the tooltip","default":"top","required":false,"values":["top","bottom","left","right"]},"align":{"type":"enum","description":"Alignment along the side","default":"center","required":false,"values":["start","center","end"]},"sideOffset":{"type":"number","description":"Distance from trigger in pixels","default":"6","required":false},"delay":{"type":"number","description":"Delay before showing (ms)","default":"400","required":false},"closeDelay":{"type":"number","description":"Delay before hiding (ms)","default":"0","required":false},"disabled":{"type":"boolean","description":"Disable the tooltip","default":"false","required":false},"arrow":{"type":"boolean","description":"Show arrow pointing to trigger","default":"true","required":false},"open":{"type":"boolean","description":"Controlled open state","required":false},"defaultOpen":{"type":"boolean","description":"Default open state","default":"false","required":false},"onOpenChange":{"type":"function","description":"Callback when open state changes","required":false},"contentProps":{"type":"object","description":"Props forwarded to the tooltip popup element (preferred way to pass popup attrs/className/style)","required":false},"style":{"type":"object","description":"","required":false},"closeOnClick":{"type":"boolean","description":"Whether clicking the trigger closes the tooltip.","default":"false","required":false}},"relations":[{"component":"Popover","relationship":"alternative","note":"Use Popover for interactive or longer content"},{"component":"Alert","relationship":"alternative","note":"Use Alert for critical information that must be visible"}],"variants":[{"name":"Default","description":"Appears after a short delay above the trigger.","code":"<Tooltip content=\"Save your changes\">\n  <Button>Save</Button>\n</Tooltip>"},{"name":"Positions","description":"Four sides; it flips if the edge is too close.","code":"import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"md\" align=\"center\" wrap>\n  <Tooltip content=\"Top tooltip\" side=\"top\">\n    <Button variant=\"soft\">Top</Button>\n  </Tooltip>\n  <Tooltip content=\"Bottom tooltip\" side=\"bottom\">\n    <Button variant=\"soft\">Bottom</Button>\n  </Tooltip>\n  <Tooltip content=\"Left tooltip\" side=\"left\">\n    <Button variant=\"soft\">Left</Button>\n  </Tooltip>\n  <Tooltip content=\"Right tooltip\" side=\"right\">\n    <Button variant=\"soft\">Right</Button>\n  </Tooltip>\n</Stack>"},{"name":"With Shortcut","description":"Spells out the key combination the icon implies.","code":"<Tooltip content=\"Undo (Ctrl+Z)\">\n  <Button variant=\"ghost\">Undo</Button>\n</Tooltip>"},{"name":"No Arrow","description":"Drops the pointer for tooltips packed into dense chrome.","code":"<Tooltip content=\"No arrow on this one\" arrow={false}>\n  <Button variant=\"soft\">Arrowless</Button>\n</Tooltip>"},{"name":"With Content Props","description":"contentProps lands on the popup element itself.","code":"<Tooltip\n  content=\"Styled through contentProps\"\n  contentProps={{ id: 'custom-tooltip-popup' }}\n>\n  <Button variant=\"soft\">Custom popup</Button>\n</Tooltip>"}],"contract":{"propsSummary":["content: ReactNode - tooltip content","side: top|bottom|left|right - position","delay: number - show delay in ms (default: 400)","arrow: boolean - show arrow (default: true)","contentProps: HTMLAttributes<HTMLDivElement> - popup element props"],"a11yRules":["A11Y_TOOLTIP_FOCUS","A11Y_TOOLTIP_ROLE"]},"ai":{"compositionPattern":"compound","subComponents":["Root","Provider"]},"propsSummary":["children: element (required)","content: node (required)","side: top|bottom|left|right (default: top)","align: start|center|end (default: center)","sideOffset: number (default: 6)","delay: number","closeDelay: number","disabled: boolean (default: false)","arrow: boolean (default: true)","open: boolean","defaultOpen: boolean","onOpenChange: function","contentProps: object","style: object"],"sourcePath":"src/components/Tooltip/index.tsx","exportName":"Tooltip","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:07.058Z"},"performance":{"bundleSize":1069,"rawSize":2053,"complexity":"lightweight","budgetPercent":7,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"Tooltip (self)","bytes":1443,"percent":70}]}},"VisuallyHidden":{"filePath":"src/components/VisuallyHidden/index.tsx","meta":{"name":"VisuallyHidden","description":"Keeps text in the accessibility tree while taking it off the screen.","category":"utilities","tags":["accessibility","a11y","screen-reader","hidden","sr-only"],"status":"stable"},"usage":{"when":["An icon-only control needs a name","A link's text is vague out of context","A skip link needs to hide until focused"],"whenNot":["Nobody should see or hear it (render nothing)","The content is just collapsed (use aria-expanded)"],"guidelines":["Every icon-only button gets one","Say the action, not the icon: \"Search\", not \"magnifier\"","Keep it short — it is read aloud","Visible text beats hidden text whenever there is room"],"accessibility":["Screen readers announce it; the layout never moves","Focusable children inside still receive focus","Required for WCAG 2.1 on icon-only controls"]},"props":{"children":{"type":"node","description":"Content to hide visually","required":true},"as":{"type":"enum","description":"HTML element to render","default":"span","required":false,"values":["span","div"]}},"relations":[{"component":"Button","relationship":"child","note":"Use inside icon-only buttons for accessible labels"},{"component":"Icon","relationship":"sibling","note":"Pair with icons to provide text alternatives"}],"variants":[{"name":"Icon Button Label","description":"The only thing telling a screen reader what this button does.","code":"<button style={{\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: '40px',\n  height: '40px',\n  border: '1px solid var(--fui-border-default)',\n  borderRadius: '8px',\n  background: 'var(--fui-color-surface-primary)',\n  cursor: 'pointer'\n}}>\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n    <path d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n  </svg>\n  <VisuallyHidden>Search</VisuallyHidden>\n</button>"},{"name":"Supplementary Text","description":"Gives a vague link the context sighted readers get from layout.","code":"<a href=\"#\" style={{ color: 'var(--fui-color-accent)' }}>\n  Read more\n  <VisuallyHidden> about our accessibility features</VisuallyHidden>\n</a>"},{"name":"Skip Link","description":"Hidden until focused, then it jumps keyboard users past the nav.","code":"<div>\n  <VisuallyHidden as=\"div\">\n    <a\n      href=\"#main-content\"\n      style={{\n        position: 'absolute',\n        padding: '8px 16px',\n        background: 'var(--fui-color-accent)',\n        color: 'white'\n      }}\n    >\n      Skip to main content\n    </a>\n  </VisuallyHidden>\n  <p style={{ color: 'var(--fui-color-text-tertiary)', fontSize: '14px' }}>\n    (Screen reader only: \"Skip to main content\" link)\n  </p>\n</div>"}],"contract":{"propsSummary":["children: ReactNode - hidden text (required)","as: span|div - HTML element","Forwards standard DOM props (id, aria-*, data-*, className, handlers)"],"a11yRules":["A11Y_SR_ONLY","A11Y_ICON_LABEL"]},"ai":{"compositionPattern":"compound","subComponents":["Root"]},"propsSummary":["children: node (required)","as: span|div (default: span)"],"sourcePath":"src/components/VisuallyHidden/index.tsx","exportName":"VisuallyHidden","provenance":{"source":"migrated","verified":false,"frameworkSupport":"native","extractedAt":"2026-03-13T23:19:06.625Z"},"performance":{"bundleSize":535,"rawSize":894,"complexity":"lightweight","budgetPercent":3,"overBudget":false,"measuredAt":"2026-09-07T16:46:04.054Z","imports":[{"path":"VisuallyHidden (self)","bytes":311,"percent":35}]}}},"blocks":{"Activity Feed":{"filePath":"src/blocks/ActivityFeed.block.ts","name":"Activity Feed","description":"Timeline of user activities with avatars and timestamps","category":"dashboard","components":["Card","Stack","Text","Avatar"],"code":"const activities = [\n  { id: 1, user: 'Alice Chen', action: 'created a new project', time: '2 minutes ago', initials: 'AC' },\n  { id: 2, user: 'Bob Smith', action: 'commented on your post', time: '15 minutes ago', initials: 'BS' },\n  { id: 3, user: 'Carol Davis', action: 'shared a document', time: '1 hour ago', initials: 'CD' },\n  { id: 4, user: 'Dan Wilson', action: 'completed a task', time: '3 hours ago', initials: 'DW' },\n];\n\n<Card>\n  <Card.Header>\n    <Card.Title>Recent Activity</Card.Title>\n  </Card.Header>\n  <Card.Body>\n    <Stack gap=\"md\">\n      {activities.map((activity) => (\n        <Stack key={activity.id} direction=\"row\" gap=\"md\" align=\"center\">\n          <Avatar size=\"sm\" initials={activity.initials} />\n          <Stack gap=\"xs\" style={{ flex: 1 }}>\n            <Text>\n              <Text weight=\"semibold\">{activity.user}</Text> {activity.action}\n            </Text>\n            <Text scale=\"sm\" color=\"tertiary\">{activity.time}</Text>\n          </Stack>\n        </Stack>\n      ))}\n    </Stack>\n  </Card.Body>\n</Card>","tags":["activity","feed","timeline","notifications"]},"Dashboard Layout":{"filePath":"src/blocks/DashboardLayout.block.ts","name":"Dashboard Layout","description":"Full application shell with sidebar navigation, header, and metrics grid","category":"dashboard","components":["AppShell","Header","Sidebar","Stack","Grid","Card","Text","Badge","Input","ThemeToggle","Avatar"],"code":"const navItems = [\n  { label: 'Dashboard', active: true },\n  { label: 'Analytics', active: false },\n  { label: 'Projects', active: false },\n  { label: 'Settings', active: false },\n];\n\nconst metrics = [\n  { label: 'Total Users', value: '12,847', change: '+12%' },\n  { label: 'Revenue', value: '$48,352', change: '+8%' },\n  { label: 'Active Projects', value: '23', change: '+3' },\n];\n\n<AppShell>\n  <AppShell.Header>\n    <Header>\n      <Header.Trigger />\n      <Header.Search>\n        <Input placeholder=\"Search...\" style={{ width: '240px' }} />\n      </Header.Search>\n      <Header.Spacer />\n      <Header.Actions>\n        <ThemeToggle size=\"sm\" />\n        <Avatar size=\"sm\" initials=\"JD\" />\n      </Header.Actions>\n    </Header>\n  </AppShell.Header>\n  <AppShell.Sidebar width=\"220px\" collapsible=\"offcanvas\">\n    <Sidebar.Header>\n      <Text weight=\"semibold\" scale=\"lg\">Acme Inc</Text>\n    </Sidebar.Header>\n    <Sidebar.Nav>\n      <Sidebar.Section label=\"Main\">\n        {navItems.map((item) => (\n          <Sidebar.Item key={item.label} active={item.active}>\n            {item.label}\n          </Sidebar.Item>\n        ))}\n      </Sidebar.Section>\n    </Sidebar.Nav>\n    <Sidebar.Footer>\n      <Text scale=\"sm\" color=\"tertiary\">v2.0.0</Text>\n    </Sidebar.Footer>\n  </AppShell.Sidebar>\n  <AppShell.Main padding=\"lg\">\n    <Stack gap=\"lg\">\n      <Stack gap=\"xs\">\n        <Text scale=\"xl\" weight=\"semibold\">Dashboard</Text>\n        <Text color=\"tertiary\">Welcome back! Here's an overview of your metrics.</Text>\n      </Stack>\n      <Grid columns={{ base: 1, md: 3 }} gap=\"md\">\n        {metrics.map((metric) => (\n          <Card key={metric.label}>\n            <Card.Body>\n              <Stack gap=\"sm\">\n                <Text scale=\"sm\" color=\"tertiary\">{metric.label}</Text>\n                <Stack direction=\"row\" justify=\"between\" align=\"baseline\">\n                  <Text scale=\"2xl\" weight=\"semibold\">{metric.value}</Text>\n                  <Badge tone=\"success\">{metric.change}</Badge>\n                </Stack>\n              </Stack>\n            </Card.Body>\n          </Card>\n        ))}\n      </Grid>\n    </Stack>\n  </AppShell.Main>\n</AppShell>","tags":["dashboard","layout","sidebar","app-shell","navigation"]},"Login Form":{"filePath":"src/blocks/LoginForm.block.ts","name":"Login Form","description":"Email/password authentication form with card layout and footer links","category":"authentication","components":["Card","Stack","Input","Button","Text","Link"],"code":"<Card variant=\"solid\">\n  <Card.Header>\n    <Card.Title>Sign In</Card.Title>\n    <Card.Description>Welcome back! Please enter your details.</Card.Description>\n  </Card.Header>\n  <Card.Body>\n    <Stack gap=\"md\">\n      <Input label=\"Email\" type=\"email\" placeholder=\"Enter your email\" />\n      <Input label=\"Password\" type=\"password\" placeholder=\"Enter your password\" />\n      <Link href=\"#\" tone=\"neutral\"><Text scale=\"sm\">Forgot password?</Text></Link>\n      <Button variant=\"solid\" fullWidth>Sign In</Button>\n    </Stack>\n  </Card.Body>\n  <Card.Footer>\n    <Text scale=\"sm\" color=\"tertiary\">Don't have an account? <Link href=\"#\">Sign up</Link></Text>\n  </Card.Footer>\n</Card>","tags":["auth","login","signin","form"]},"Stats Card":{"filePath":"src/blocks/StatsCard.block.ts","name":"Stats Card","description":"Metric card with value, change indicator and icon","category":"dashboard","components":["Card","Stack","Text","Badge","Icon"],"code":"<Card>\n  <Card.Body>\n    <Stack direction=\"row\" justify=\"between\" align=\"start\">\n      <Stack gap=\"xs\">\n        <Text scale=\"sm\" color=\"tertiary\">Total Revenue</Text>\n        <Text scale=\"2xl\" weight=\"semibold\">$45,231</Text>\n        <Stack direction=\"row\" gap=\"xs\" align=\"center\">\n          <Badge tone=\"success\">+12.5%</Badge>\n          <Text scale=\"sm\" color=\"tertiary\">from last month</Text>\n        </Stack>\n      </Stack>\n      <Icon icon={TrendUp} size=\"lg\" tone=\"success\" />\n    </Stack>\n  </Card.Body>\n</Card>","tags":["stats","metrics","kpi","dashboard","card"]}},"tokens":{"prefix":"--","total":787,"categories":{"other":[{"name":"--_alert-tint","value":"var(--fui-color-info-bg, #{$fui-color-info-bg})"},{"name":"--_alert-ink","value":"var(--fui-color-info-text, #{$fui-color-info-text})"},{"name":"--_alert-line","value":"var(--fui-color-info-border, #{$fui-color-info-border})"},{"name":"--_badge-tint","value":"var(--fui-bg-tertiary, #{$fui-bg-tertiary})"},{"name":"--_badge-ink","value":"var(--fui-text-secondary, #{$fui-text-secondary})"},{"name":"--_badge-line","value":"var(--fui-border-strong, #{$fui-border-strong})"},{"name":"$_tint-light","value":"24%"},{"name":"$_tint-dark","value":"28%"},{"name":"--_tone-ink","value":"var(--fui-button-neutral-color, var(--fui-text-primary, #{$fui-text-primary}))"},{"name":"--_tone-soft","value":"var(--fui-button-neutral-bg, var(--fui-bg-tertiary, #{$fui-bg-tertiary}))"},{"name":"--_tone-soft-hover","value":"var(--fui-button-neutral-bg-hover, var(--fui-bg-hover, #{$fui-bg-hover}))"},{"name":"--_tone-soft-active","value":"var(--fui-button-neutral-bg-active, var(--fui-bg-active, #{$fui-bg-active}))"},{"name":"--_tone-wash","value":"var(--fui-bg-hover, #{$fui-bg-hover})"},{"name":"--_tone-wash-active","value":"var(--fui-bg-active, #{$fui-bg-active})"},{"name":"--_tone-line","value":"var(--fui-button-neutral-border, var(--fui-border-strong, #{$fui-border-strong}))"},{"name":"--_tone-line-hover","value":"var(--fui-color-accent, #{$fui-color-accent})"},{"name":"--fui-card-consumer-fixture","value":"1"},{"name":"--shiki-token-keyword","value":"#9a3412"},{"name":"--shiki-token-string","value":"light-dark(#166534, #7dcea0)"},{"name":"--shiki-token-string-expression","value":"light-dark(#166534, #7dcea0)"},{"name":"--shiki-token-comment","value":"#5c5348"},{"name":"--shiki-token-function","value":"#1e3a8a"},{"name":"--shiki-token-constant","value":"light-dark(#92400e, #e8b86d)"},{"name":"--shiki-token-parameter","value":"#3d3429"},{"name":"--shiki-token-punctuation","value":"#3d3429"},{"name":"--shiki-token-link","value":"var(--fui-link-ink, #{$fui-link-ink})"},{"name":"$rows","value":"5"},{"name":"--_cols","value":"1"},{"name":"--beam-angle","value":"0deg"},{"name":"--_gutter","value":"var(--fui-space-3, #{$fui-space-3})"},{"name":"--_fui-scrollarea-inline-fade","value":"calc(1 * 48px))"},{"name":"--_fui-scrollarea-block-fade","value":"calc(1 * 32px))"},{"name":"--_fui-scrollarea-inline-mask","value":"linear-gradient(black, black)"},{"name":"--_fui-scrollarea-block-mask","value":"linear-gradient(black, black)"},{"name":"$_inline-fade","value":"measurements.raw-space(48)"},{"name":"$_block-fade","value":"measurements.raw-space(32)"},{"name":"$_mask-none","value":"linear-gradient(black, black)"},{"name":"$_gutter","value":"navigation.gutter()"},{"name":"$_leading-box","value":"navigation.leading-box()"},{"name":"$_active-rail","value":"navigation.active-rail()"},{"name":"$_switch-travel-md","value":"calc(#{boolean.switch-inline-size(\"md\")} - #{boolean.switch-block-size(\"md\")})"},{"name":"$_track","value":"field.track(\"md\")"},{"name":"--_toast-tint","value":"var(--fui-bg-elevated, #{$fui-bg-elevated})"},{"name":"--_toast-line","value":"var(--fui-border, #{$fui-border})"},{"name":"--_toast-ink","value":"var(--fui-text-primary, #{$fui-text-primary})"},{"name":"--_toast-ink-soft","value":"var(--fui-text-secondary, #{$fui-text-secondary})"},{"name":"--_fui-action-type-line","value":"#{typography.line-height(\"ui-compact\")}"},{"name":"--_fui-action-type-weight","value":"#{typography.weight(\"ui-compact\")}"},{"name":"--_fui-action-type-tracking","value":"#{typography.tracking(\"ui-compact\")}"},{"name":"--_fui-action-type-family","value":"#{typography.font-family(\"ui-compact\")}"},{"name":"--_fui-action-track","value":"#{track($role)}"},{"name":"$icon-role","value":"null"},{"name":"--_fui-switch-travel","value":"calc(var(--_fui-switch-inline-size) - var(--_fui-switch-block-size))"},{"name":"$type-role","value":"\"ui-standard\""},{"name":"--_fui-feedback-empty-title-line","value":"#{typography.line-height(\"ui-standard\")}"},{"name":"--_fui-feedback-empty-title-weight","value":"#{typography.weight(\"ui-standard\")}"},{"name":"--_fui-feedback-empty-title-tracking","value":"#{typography.tracking(\"ui-standard\")}"},{"name":"--_fui-feedback-empty-copy-line","value":"#{typography.line-height(\"caption\")}"},{"name":"--_fui-feedback-empty-copy-weight","value":"#{typography.weight(\"caption\")}"},{"name":"--_fui-feedback-empty-copy-tracking","value":"#{typography.tracking(\"caption\")}"},{"name":"$top","value":"var( --fui-feedback-viewport-inset-top, max(calc(1 * 16px), env(safe-area-inset-top)) )"},{"name":"$bottom","value":"var( --fui-feedback-viewport-inset-bottom, max(calc(1 * 16px), env(safe-area-inset-bottom)) )"},{"name":"$left","value":"var( --fui-feedback-viewport-inset-left, max(calc(1 * 16px), env(safe-area-inset-left)) )"},{"name":"$right","value":"var( --fui-feedback-viewport-inset-right, max(calc(1 * 16px), env(safe-area-inset-right)) )"},{"name":"--_fui-field-track","value":"#{track($size)}"},{"name":"--fui-navigation-row-track","value":"calc(1 * 32px))"},{"name":"--fui-navigation-section-track","value":"calc(1 * 24px))"},{"name":"--fui-navigation-gutter","value":"navigation.gutter()"},{"name":"--fui-navigation-leading-box","value":"navigation.leading-box()"},{"name":"--fui-navigation-active-rail","value":"navigation.active-rail()"},{"name":"--fui-navigation-active-dot","value":"_navigation(\"sidebarDot\")"},{"name":"--fui-navigation-label-optical-y","value":"#{_navigation(\"sidebarLabelOffset\")}"},{"name":"$_row-track","value":"measurements.target-value(\"controlTrack\", \"md\")"},{"name":"$_section-track","value":"measurements.target-value(\"controlTrack\", \"micro\")"},{"name":"$_active-dot","value":"_navigation(\"sidebarDot\")"},{"name":"--fui-popup-row-pitch","value":"calc(1 * 32px))"},{"name":"--fui-popup-indicator-box","value":"calc(1 * 16px)})"},{"name":"--fui-popup-offset","value":"calc(1 * 4px)})"},{"name":"--fui-popup-viewport-rows","value":"4.5"},{"name":"--_fui-popup-effective-row-pitch","value":"calc(1 * 32px)))"},{"name":"$_row-pitch","value":"measurements.raw-space(32)"},{"name":"$_viewport-rows","value":"4.5"},{"name":"$step","value":"null"},{"name":"--_fui-segmented-track","value":"#{action.track($size)}"},{"name":"--fui-table-row-track-compact","value":"calc(1 * 32px)})"},{"name":"--fui-table-row-track-regular","value":"calc(1 * 40px)})"},{"name":"--fui-table-row-track-relaxed","value":"calc(1 * 48px)})"},{"name":"--fui-table-tree-indent-step","value":"calc(1 * 24px))"},{"name":"--_fui-table-row-track","value":"#{row-track($density)}"},{"name":"$_tree-indent-step","value":"measurements.raw-space(24)"},{"name":"$_validated-role","value":"measurements.typography-value($role, \"size\")"},{"name":"--fui-line-clamp","value":"2"},{"name":"--fui-navmenu-viewport-left","value":"0px"},{"name":"--fui-table-tree-depth","value":"0"},{"name":"--fui-progress-diameter","value":"calc(1 * 48px)"},{"name":"--fui-progress-dash-full","value":"0"},{"name":"--fui-progress-dash-quarter","value":"0"},{"name":"--fui-control-track-micro","value":"calc(1 * 24px)"},{"name":"--fui-control-track-sm","value":"calc(1 * 28px)"},{"name":"--fui-control-track-md","value":"calc(1 * 32px)"},{"name":"--fui-control-track-lg","value":"calc(1 * 40px)"},{"name":"--fui-field-track-sm","value":"calc(1 * 28px)"},{"name":"--fui-field-track-md","value":"calc(1 * 32px)"},{"name":"--fui-field-track-lg","value":"calc(1 * 40px)"},{"name":"--fui-icon-xs","value":"calc(1 * 12px)"},{"name":"--fui-icon-sm","value":"calc(1 * 14px)"},{"name":"--fui-icon-md","value":"calc(1 * 16px)"},{"name":"--fui-icon-lg","value":"calc(1 * 20px)"},{"name":"--fui-icon-xl","value":"calc(1 * 24px)"},{"name":"--fui-icon-2xl","value":"calc(1 * 32px)"},{"name":"--fui-layout-measure-inline-floor","value":"calc(1 * 56px)"},{"name":"--fui-layout-measure-compact-content","value":"calc(1 * 168px)"},{"name":"--fui-layout-measure-grid-cell","value":"calc(1 * 224px)"},{"name":"--fui-layout-measure-composer-item","value":"calc(1 * 210px)"},{"name":"--fui-layout-measure-page-narrow","value":"calc(1 * 800px)"},{"name":"--fui-overlay-popover-sm","value":"calc(1 * 256px)"},{"name":"--fui-overlay-popover-md","value":"calc(1 * 384px)"},{"name":"--fui-overlay-popover-lg","value":"calc(1 * 512px)"},{"name":"--fui-overlay-dialog-sm","value":"calc(1 * 384px)"},{"name":"--fui-overlay-dialog-md","value":"calc(1 * 448px)"},{"name":"--fui-overlay-dialog-lg","value":"calc(1 * 576px)"},{"name":"--fui-overlay-dialog-xl","value":"calc(1 * 768px)"},{"name":"--fui-overlay-drawer-sm","value":"calc(1 * 320px)"},{"name":"--fui-overlay-drawer-md","value":"calc(1 * 384px)"},{"name":"--fui-overlay-drawer-lg","value":"calc(1 * 512px)"},{"name":"--fui-overlay-drawer-xl","value":"calc(1 * 768px)"},{"name":"--fui-type-caption-line","value":"16px"},{"name":"--fui-type-caption-weight","value":"400"},{"name":"--fui-type-caption-tracking","value":"0"},{"name":"--fui-type-ui-compact-line","value":"16px"},{"name":"--fui-type-ui-compact-weight","value":"500"},{"name":"--fui-type-ui-compact-tracking","value":"-0.01em"},{"name":"--fui-type-ui-standard-line","value":"20px"},{"name":"--fui-type-ui-standard-weight","value":"500"},{"name":"--fui-type-ui-standard-tracking","value":"-0.01em"},{"name":"--fui-type-body-compact-line","value":"20px"},{"name":"--fui-type-body-compact-weight","value":"400"},{"name":"--fui-type-body-compact-tracking","value":"0"},{"name":"--fui-type-body-relaxed-line","value":"24px"},{"name":"--fui-type-body-relaxed-weight","value":"400"},{"name":"--fui-type-body-relaxed-tracking","value":"0"},{"name":"--fui-type-display-line","value":"40px"},{"name":"--fui-type-display-weight","value":"600"},{"name":"--fui-type-display-tracking","value":"-0.02em"},{"name":"--fui-type-title-sm-line","value":"24px"},{"name":"--fui-type-title-sm-weight","value":"600"},{"name":"--fui-type-title-sm-tracking","value":"-0.01em"},{"name":"--fui-type-title-md-line","value":"28px"},{"name":"--fui-type-title-md-weight","value":"600"},{"name":"--fui-type-title-md-tracking","value":"-0.02em"},{"name":"--fui-type-title-lg-line","value":"32px"},{"name":"--fui-type-title-lg-weight","value":"600"},{"name":"--fui-type-title-lg-tracking","value":"-0.02em"},{"name":"--fui-type-code-line","value":"20px"},{"name":"--fui-type-code-weight","value":"400"},{"name":"--fui-type-code-tracking","value":"0"},{"name":"--fui-navigation-sidebar-gutter","value":"calc(1 * 8px)"},{"name":"--fui-navigation-sidebar-leading-box","value":"calc(1 * 16px)"},{"name":"--fui-navigation-sidebar-dot","value":"calc(1 * 6px)"},{"name":"--fui-navigation-sidebar-rail","value":"2px"},{"name":"--fui-navigation-sidebar-label-offset","value":"1px"},{"name":"--fui-seed-brand","value":"#{$fui-color-accent}"},{"name":"--fui-seed-danger","value":"#{$fui-color-danger}"},{"name":"--fui-seed-success","value":"#{$fui-color-success}"},{"name":"--fui-seed-warning","value":"#{$fui-color-warning}"},{"name":"--fui-seed-info","value":"#{$fui-color-info}"},{"name":"--fui-skeleton","value":"color-mix(in srgb, var(--fui-border-default) 62%, var(--fui-bg-secondary))"},{"name":"--fui-skeleton-hi","value":"color-mix(in srgb, var(--fui-border-default) 24%, var(--fui-bg-secondary))"},{"name":"--fui-link-ink","value":"light-dark(#{$fui-link-ink}, #{$fui-dark-link-ink})"},{"name":"--fui-sidebar-item-active-indicator","value":"transparent"}],"bentogrid-item":[{"name":"--_col-span","value":"1"},{"name":"--_row-span","value":"1"}],"colors":[{"name":"--_button-bg","value":"transparent"},{"name":"--_button-color","value":"var(--fui-text-primary, #{$fui-text-primary})"},{"name":"--_tone-fill","value":"var(--fui-bg-inverse, #{$fui-bg-inverse})"},{"name":"--_tone-fill-line","value":"var(--_tone-fill, var(--fui-bg-inverse, #{$fui-bg-inverse}))"},{"name":"--_tone-fill-line-hover","value":"var(--_tone-fill-hover, var(--fui-bg-inverse, #{$fui-bg-inverse}))"},{"name":"--_tone-on-fill","value":"var(--fui-text-inverse, #{$fui-text-inverse})"},{"name":"--shiki-color-text","value":"var(--fui-code-text, var(--fui-text-primary, #{$fui-text-primary}))"},{"name":"--shiki-color-background","value":"var(--fui-code-bg, #{$fui-code-bg})"},{"name":"$fui-colorpicker-size","value":"200px"},{"name":"$fui-colorpicker-hue-height","value":"$fui-target-size-min"},{"name":"$fui-colorpicker-pointer-size","value":"$fui-target-size-min"},{"name":"--fui-data-table-bg","value":"transparent)"},{"name":"--fui-sidebar-hover-bg","value":"var(--fui-sidebar-item-hover-bg, var(--fui-bg-hover, #{$fui-bg-hover}))"},{"name":"--fui-table-row-bg","value":"var(--fui-table-row-base-bg)"},{"name":"--fui-table-row-base-bg","value":"var(--fui-table-subrow-bg, var(--fui-bg-subtle, #{$fui-bg-subtle}))"},{"name":"$_stroke","value":"field.stroke()"},{"name":"--_fui-field-stroke","value":"#{stroke()}"},{"name":"--fui-chart-marker-stroke","value":"2px"},{"name":"--fui-stroke-hairline","value":"1px"},{"name":"--fui-stroke-default","value":"2px"},{"name":"--fui-stroke-strong","value":"calc(1 * 3px)"},{"name":"--fui-color-accent","value":"light-dark(#{$fui-color-accent}, #{$fui-dark-color-accent})"},{"name":"--fui-color-on-accent","value":"light-dark(#{$fui-color-on-accent}, #{$fui-dark-color-on-accent})"},{"name":"--fui-color-danger","value":"#{$fui-color-danger}"},{"name":"--fui-color-danger-hover","value":"#{$fui-color-danger-hover}"},{"name":"--fui-color-success","value":"#{$fui-color-success}"},{"name":"--fui-color-warning","value":"#{$fui-color-warning}"},{"name":"--fui-color-info","value":"#{$fui-color-info}"},{"name":"--fui-selection-color","value":"var(--fui-text-primary)"},{"name":"--fui-control-selected-bg","value":"color-mix(in srgb, var(--fui-text-primary) 9%, transparent)"},{"name":"--fui-control-checked-bg","value":"var(--fui-color-accent)"},{"name":"--fui-control-checked-bg-hover","value":"var(--fui-color-accent-hover)"},{"name":"--fui-control-checked-color","value":"var(--fui-color-on-accent)"},{"name":"--fui-field-selection-bg","value":"var(--fui-control-selected-bg)"},{"name":"--fui-field-selection-bg-hover","value":"color-mix(in srgb, var(--fui-text-primary) 11%, transparent)"},{"name":"--fui-field-selection-color","value":"var(--fui-text-primary)"},{"name":"--fui-form-group-bg","value":"color-mix(in srgb, var(--fui-bg-secondary) 48%, var(--fui-bg-primary))"},{"name":"--fui-kbd-bg","value":"color-mix(in srgb, var(--fui-text-primary) 4%, transparent)"},{"name":"--fui-kbd-color","value":"var(--fui-text-tertiary)"},{"name":"--fui-card-accent-bg","value":"var(--fui-bg-tertiary)"},{"name":"--fui-app-canvas-bg","value":"var(--fui-body-bg)"},{"name":"--fui-app-main-bg","value":"var(--fui-body-bg)"},{"name":"--fui-app-sidebar-bg","value":"var(--fui-bg-tertiary)"},{"name":"--fui-sidebar-bg","value":"var(--fui-app-sidebar-bg)"},{"name":"--fui-sidebar-item-color","value":"var(--fui-text-secondary)"},{"name":"--fui-sidebar-item-icon-color","value":"var(--fui-text-tertiary)"},{"name":"--fui-sidebar-item-hover-bg","value":"var(--fui-bg-hover)"},{"name":"--fui-sidebar-item-hover-color","value":"var(--fui-text-primary)"},{"name":"--fui-sidebar-item-active-bg","value":"var(--fui-control-selected-bg)"},{"name":"--fui-sidebar-item-active-color","value":"var(--fui-text-primary)"},{"name":"--fui-badge-dot-color","value":"currentColor"},{"name":"--fui-card-bg","value":"color-mix(in srgb, var(--fui-bg-elevated) 92%, transparent)"},{"name":"--fui-card-header-bg","value":"var(--fui-bg-subtle)"},{"name":"--fui-card-hover-bg","value":"color-mix(in srgb, var(--fui-bg-elevated) 88%, var(--fui-text-primary) 4%)"},{"name":"--fui-card-stat-bg","value":"color-mix(in srgb, var(--fui-bg-elevated) 74%, transparent)"},{"name":"--fui-panel-bg","value":"color-mix(in srgb, var(--fui-bg-elevated) 74%, transparent)"},{"name":"--fui-table-bg","value":"transparent"},{"name":"--fui-table-header-bg","value":"color-mix(in srgb, var(--fui-text-primary) 5%, transparent)"},{"name":"--fui-table-row-hover-bg","value":"var(--fui-bg-hover)"},{"name":"--fui-table-row-active-bg","value":"var(--fui-bg-active)"},{"name":"--fui-table-row-selected-bg","value":"var(--fui-control-selected-bg)"},{"name":"--fui-table-subrow-bg","value":"color-mix(in srgb, var(--fui-bg-secondary) 62%, transparent)"},{"name":"--fui-tabs-pills-bg","value":"color-mix(in srgb, var(--fui-text-primary) 5%, transparent)"},{"name":"--fui-tabs-pill-hover-bg","value":"transparent"},{"name":"--fui-color-accent-hover","value":"#{$_rt-dark-accent-hover}"},{"name":"--fui-color-accent-active","value":"#{$_rt-dark-accent-active}"},{"name":"--fui-color-danger-bg","value":"color-mix(in oklch, var(--fui-seed-danger) 24%, black)"},{"name":"--fui-color-success-bg","value":"color-mix(in oklch, var(--fui-seed-success) 24%, black)"},{"name":"--fui-color-warning-bg","value":"color-mix(in oklch, var(--fui-seed-warning) 24%, black)"},{"name":"--fui-color-info-bg","value":"color-mix(in oklch, var(--fui-seed-info) 24%, black)"},{"name":"--fui-color-danger-text","value":"color-mix(in oklch, var(--fui-seed-danger) 78%, white 22%)"},{"name":"--fui-color-success-text","value":"color-mix(in oklch, var(--fui-seed-success) 78%, white 22%)"},{"name":"--fui-color-warning-text","value":"color-mix(in oklch, var(--fui-seed-warning) 78%, white 22%)"},{"name":"--fui-color-info-text","value":"color-mix(in oklch, var(--fui-seed-info) 78%, white 22%)"}],"surfaces":[{"name":"--_button-bg-hover","value":"var(--fui-bg-hover, #{$fui-bg-hover})"},{"name":"--_button-bg-active","value":"var(--fui-bg-active, #{$fui-bg-active})"},{"name":"--fui-bg-primary","value":"light-dark(#{$fui-bg-primary}, #{$fui-dark-bg-primary})"},{"name":"--fui-bg-secondary","value":"light-dark(#{$fui-bg-secondary}, #{$fui-dark-bg-secondary})"},{"name":"--fui-bg-tertiary","value":"light-dark(#{$fui-bg-tertiary}, #{$fui-dark-bg-tertiary})"},{"name":"--fui-bg-elevated","value":"light-dark(#{$fui-bg-elevated}, #{$fui-dark-bg-elevated})"},{"name":"--fui-bg-subtle","value":"light-dark(#{$fui-bg-subtle}, #{$fui-dark-bg-subtle})"},{"name":"--fui-bg-hover","value":"light-dark(#{$fui-bg-hover}, #{$fui-dark-bg-hover})"},{"name":"--fui-bg-active","value":"light-dark(#{$fui-bg-active}, #{$fui-dark-bg-active})"},{"name":"--fui-body-bg","value":"light-dark(#{$fui-body-bg}, #{$fui-dark-body-bg})"},{"name":"--fui-main-bg","value":"light-dark(#{$fui-main-bg}, #{$fui-dark-main-bg})"},{"name":"--fui-bg-inverse","value":"light-dark(#{$fui-bg-inverse}, #{$fui-dark-bg-inverse})"},{"name":"--fui-bg-highlight","value":"color-mix(in srgb, var(--fui-text-primary) 7%, transparent)"}],"borders":[{"name":"--_button-border","value":"transparent"},{"name":"--_button-border-hover","value":"transparent"},{"name":"--fui-sidebar-active-border","value":"transparent"},{"name":"--fui-border","value":"light-dark(#{$fui-border}, #{$fui-dark-border})"},{"name":"--fui-border-default","value":"light-dark(#{$fui-border-default}, #{$fui-dark-border-default})"},{"name":"--fui-border-strong","value":"light-dark(#{$fui-border-strong}, #{$fui-dark-border-strong})"},{"name":"--fui-border-subtle","value":"color-mix(in srgb, var(--fui-border-default) 68%, transparent)"},{"name":"--fui-control-selected-border","value":"transparent"},{"name":"--fui-control-checked-border","value":"var(--fui-color-accent)"},{"name":"--fui-control-checked-border-hover","value":"var(--fui-color-accent-hover)"},{"name":"--fui-field-selection-border","value":"var(--fui-border-strong)"},{"name":"--fui-form-group-border","value":"var(--fui-border-default)"},{"name":"--fui-kbd-border","value":"color-mix(in srgb, var(--fui-border-strong) 72%, transparent)"},{"name":"--fui-card-accent-border","value":"color-mix(in srgb, var(--fui-color-accent) 30%, var(--fui-border))"},{"name":"--fui-sidebar-border","value":"var(--fui-border-default)"},{"name":"--fui-sidebar-item-active-border","value":"transparent"},{"name":"--fui-sidebar-footer-border","value":"color-mix(in srgb, var(--fui-border-default) 68%, transparent)"},{"name":"--fui-card-border","value":"color-mix(in srgb, var(--fui-border-default) 86%, transparent)"},{"name":"--fui-card-outlined-border","value":"var(--fui-card-border)"},{"name":"--fui-card-hover-border","value":"color-mix(in srgb, var(--fui-border-strong) 86%, transparent)"},{"name":"--fui-card-stat-border","value":"color-mix(in srgb, var(--fui-border-default) 78%, transparent)"},{"name":"--fui-panel-border","value":"color-mix(in srgb, var(--fui-border-default) 78%, transparent)"},{"name":"--fui-table-border","value":"var(--fui-border-default)"},{"name":"--fui-table-header-border","value":"var(--fui-border-strong)"},{"name":"--fui-table-row-selected-border","value":"var(--fui-border-strong)"},{"name":"--fui-tabs-pills-border","value":"var(--fui-border-default)"}],"shadows":[{"name":"--_button-shadow","value":"none"},{"name":"--_button-shadow-hover","value":"none"},{"name":"--_button-shadow-active","value":"none"},{"name":"--fui-card-active-shadow","value":"inset 0 1px 2px color-mix(in srgb, black 12%, transparent)"},{"name":"--fui-card-panel-shadow","value":"var(--fui-card-shadow)"},{"name":"--fui-card-stat-shadow","value":"var(--fui-card-shadow)"},{"name":"--fui-shadow-sm","value":"#{$fui-shadow-sm}"},{"name":"--fui-shadow-md","value":"#{$fui-shadow-md}"},{"name":"--fui-shadow-lg","value":"#{$fui-shadow-lg}"}],"padding":[{"name":"--_card-root-requested-inset","value":"#{surface.inset(\"panel\")}"}],"spacing":[{"name":"--_card-body-inset","value":"#{surface.inset(\"panel\")}"},{"name":"--_control-padding","value":"var(--fui-space-2, #{$fui-space-2})"},{"name":"--_chip-padding","value":"var(--fui-space-1, #{$fui-space-1})"},{"name":"$_block-inset","value":"calc(1 * 8px)})"},{"name":"--_fui-action-gap","value":"#{gap($role)}"},{"name":"--_fui-action-inline-inset","value":"#{inline-inset($role)}"},{"name":"--_fui-boolean-label-gap","value":"#{label-gap($size)}"},{"name":"--_fui-switch-inset","value":"2px})"},{"name":"--_fui-field-inline-inset","value":"#{inline-inset($size)}"},{"name":"--fui-field-label-gap","value":"calc(1 * 6px))"},{"name":"--fui-field-message-gap","value":"calc(1 * 4px))"},{"name":"$_label-gap","value":"measurements.raw-space(6)"},{"name":"$_message-gap","value":"measurements.raw-space(4)"},{"name":"--fui-navigation-inline-inset","value":"navigation.gutter()"},{"name":"--fui-navigation-content-gap","value":"navigation.gutter()"},{"name":"--fui-popup-container-inset","value":"calc(1 * 4px))"},{"name":"--fui-popup-row-block-inset","value":"calc(1 * 8px))"},{"name":"--fui-popup-row-inline-inset","value":"calc(1 * 8px))"},{"name":"--fui-popup-row-content-gap","value":"calc(1 * 8px))"},{"name":"--fui-popup-separator-gap","value":"calc(1 * 4px))"},{"name":"$_container-inset","value":"measurements.raw-space(4)"},{"name":"$_row-inset","value":"measurements.raw-space(8)"},{"name":"$_separator-gap","value":"measurements.raw-space(4)"},{"name":"--_fui-chart-tooltip-item-gap","value":"#{_raw(8)}"},{"name":"--_fui-segmented-inline-inset","value":"#{action.inline-inset($size)}"},{"name":"--_fui-segmented-gap","value":"#{action.gap($size)}"},{"name":"--fui-table-cell-inline-inset-compact","value":"calc(1 * 8px)})"},{"name":"--fui-table-cell-inline-inset-regular","value":"calc(1 * 12px)})"},{"name":"--fui-table-cell-inline-inset-relaxed","value":"calc(1 * 16px)})"},{"name":"--fui-table-cell-block-inset-compact","value":"calc(1 * 4px)})"},{"name":"--fui-table-cell-block-inset-regular","value":"calc(1 * 10px)})"},{"name":"--fui-table-cell-block-inset-relaxed","value":"calc(1 * 12px)})"},{"name":"--fui-table-header-block-inset-compact","value":"calc(1 * 4px)})"},{"name":"--fui-table-header-block-inset-regular","value":"calc(1 * 8px)})"},{"name":"--fui-table-header-block-inset-relaxed","value":"calc(1 * 12px)})"},{"name":"--_fui-table-cell-inline-inset","value":"#{cell-inline-inset($density)}"},{"name":"--_fui-table-cell-block-inset","value":"#{cell-block-inset($density)}"},{"name":"--_fui-table-header-block-inset","value":"#{header-block-inset($density)}"},{"name":"$_cell-inline-inset","value":"cell-inline-inset(\"regular\")"},{"name":"$_cell-block-inset","value":"cell-block-inset(\"regular\")"},{"name":"--fui-feedback-text-gap","value":"calc(1 * 4px)"},{"name":"--fui-feedback-transient-gap","value":"calc(1 * 8px)"},{"name":"--fui-feedback-viewport-inset-top","value":"max(calc(1 * 16px), env(safe-area-inset-top))"},{"name":"--fui-feedback-viewport-inset-right","value":"max(calc(1 * 16px), env(safe-area-inset-right))"},{"name":"--fui-feedback-viewport-inset-bottom","value":"max(calc(1 * 16px), env(safe-area-inset-bottom))"},{"name":"--fui-feedback-viewport-inset-left","value":"max(calc(1 * 16px), env(safe-area-inset-left))"},{"name":"--fui-overlay-close-inset","value":"calc(1 * 12px)"},{"name":"--fui-overlay-section-gap","value":"calc(1 * 8px)"},{"name":"--fui-prompt-inset-left","value":"0px"},{"name":"--fui-stack-gap","value":"0"},{"name":"--fui-stack-gap-sm","value":"0"},{"name":"--fui-stack-gap-md","value":"0"},{"name":"--fui-stack-gap-lg","value":"0"},{"name":"--fui-stack-gap-xl","value":"0"},{"name":"--fui-raw-space-0","value":"0"},{"name":"--fui-raw-space-2","value":"2px"},{"name":"--fui-raw-space-4","value":"calc(1 * 4px)"},{"name":"--fui-raw-space-6","value":"calc(1 * 6px)"},{"name":"--fui-raw-space-8","value":"calc(1 * 8px)"},{"name":"--fui-raw-space-10","value":"calc(1 * 10px)"},{"name":"--fui-raw-space-12","value":"calc(1 * 12px)"},{"name":"--fui-raw-space-16","value":"calc(1 * 16px)"},{"name":"--fui-raw-space-20","value":"calc(1 * 20px)"},{"name":"--fui-raw-space-24","value":"calc(1 * 24px)"},{"name":"--fui-raw-space-32","value":"calc(1 * 32px)"},{"name":"--fui-raw-space-40","value":"calc(1 * 40px)"},{"name":"--fui-raw-space-48","value":"calc(1 * 48px)"},{"name":"--fui-raw-space-64","value":"calc(1 * 64px)"},{"name":"--fui-field-inline-inset-sm","value":"calc(1 * 10px)"},{"name":"--fui-field-inline-inset-md","value":"calc(1 * 12px)"},{"name":"--fui-field-inline-inset-lg","value":"calc(1 * 16px)"},{"name":"--fui-surface-inset-panel","value":"0"},{"name":"--fui-surface-inset-compact","value":"calc(1 * 12px)"},{"name":"--fui-surface-inset-default","value":"calc(1 * 16px)"},{"name":"--fui-surface-inset-roomy","value":"calc(1 * 24px)"},{"name":"--fui-space-px","value":"#{$fui-space-px}"},{"name":"--fui-space-0-5","value":"calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-0-5})"},{"name":"--fui-space-0-75","value":"calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-0-75})"},{"name":"--fui-space-1","value":"calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-1})"},{"name":"--fui-space-2","value":"calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-2})"},{"name":"--fui-space-3","value":"calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-3})"},{"name":"--fui-space-4","value":"calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-4})"},{"name":"--fui-space-5","value":"calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-5})"},{"name":"--fui-space-6","value":"calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-6})"},{"name":"--fui-space-8","value":"calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-8})"},{"name":"--fui-space-10","value":"calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-10})"},{"name":"--fui-space-12","value":"calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-12})"},{"name":"--fui-popup-padding","value":"#{$fui-popup-padding}"},{"name":"--fui-popup-row-gap","value":"1px"},{"name":"--fui-popup-item-padding-block","value":"#{$fui-popup-item-padding-block}"},{"name":"--fui-popup-item-padding-inline","value":"#{$fui-popup-item-padding-inline}"},{"name":"--fui-kbd-padding-x","value":"var(--fui-space-0-75)"},{"name":"--fui-kbd-gap","value":"calc(var(--fui-space-px) * 2)"}],"code":[{"name":"--_fui-code-inline-inset","value":"calc(1 * 16px)})"},{"name":"--fui-code-bg","value":"#{$fui-code-bg}"},{"name":"--fui-code-selection-bg","value":"#{$fui-code-selection-bg}"},{"name":"--fui-code-text","value":"var(--fui-text-primary)"},{"name":"--fui-code-token-string","value":"light-dark(#166534, #7dcea0)"},{"name":"--fui-code-token-number","value":"light-dark(#92400e, #e8b86d)"}],"sizing":[{"name":"--_day-size","value":"#{action.track(\"md\")}"},{"name":"--_loading-inline-size","value":"0.875em"},{"name":"--_chip-height","value":"#{action.track(\"sm\")}"},{"name":"--_fui-scrollarea-track-size","value":"calc(1 * 6px))"},{"name":"$_track-size","value":"measurements.raw-space(6)"},{"name":"--_fui-target-hit-size","value":"#{target.hit-size(\"touch\")}"},{"name":"--_fui-action-type-size","value":"#{typography.font-size(\"ui-compact\")}"},{"name":"--_fui-action-icon-size","value":"#{icon-size($role)}"},{"name":"--_fui-boolean-mark-size","value":"#{mark-size($size)}"},{"name":"--_fui-switch-inline-size","value":"#{switch-inline-size($size)}"},{"name":"--_fui-switch-block-size","value":"#{switch-block-size($size)}"},{"name":"--_fui-switch-thumb-size","value":"#{switch-thumb-size($size)}"},{"name":"--_fui-feedback-empty-icon-size","value":"calc(1 * 24px)"},{"name":"--_fui-feedback-empty-max-inline","value":"240px"},{"name":"--_fui-feedback-empty-title-size","value":"#{typography.font-size(\"ui-standard\")}"},{"name":"--_fui-feedback-empty-copy-size","value":"#{typography.font-size(\"caption\")}"},{"name":"--fui-popup-separator-size","value":"1px)"},{"name":"$_separator-size","value":"measurements.target-value(\"stroke\", \"hairline\")"},{"name":"--_fui-activity-size","value":"#{activity-size($size)}"},{"name":"--_fui-segmented-icon-size","value":"#{action.icon-size($size)}"},{"name":"--fui-table-divider-size","value":"1px)"},{"name":"$_divider-size","value":"measurements.target-value(\"stroke\", \"hairline\")"},{"name":"--fui-grid-min-child-width","value":"calc(1 * 224px)"},{"name":"--fui-navmenu-viewport-height","value":"0px"},{"name":"--fui-navmenu-viewport-width","value":"0px"},{"name":"--fui-overlay-arrow-size","value":"calc(1 * 10px)"},{"name":"--fui-select-max-items","value":"4.5"},{"name":"--fui-layout-measure-field-minimum","value":"calc(1 * 140px)"},{"name":"--fui-layout-measure-menu-min","value":"calc(1 * 192px)"},{"name":"--fui-overlay-popover-min","value":"calc(1 * 192px)"},{"name":"--fui-overlay-tooltip-max","value":"calc(1 * 320px)"},{"name":"--fui-type-caption-size","value":"12px"},{"name":"--fui-type-ui-compact-size","value":"12px"},{"name":"--fui-type-ui-standard-size","value":"14px"},{"name":"--fui-type-body-compact-size","value":"14px"},{"name":"--fui-type-body-relaxed-size","value":"16px"},{"name":"--fui-type-display-size","value":"32px"},{"name":"--fui-type-title-sm-size","value":"16px"},{"name":"--fui-type-title-md-size","value":"20px"},{"name":"--fui-type-title-lg-size","value":"24px"},{"name":"--fui-type-code-size","value":"14px"},{"name":"--fui-navigation-app-shell-header-height","value":"calc(1 * 56px)"},{"name":"--fui-navigation-sidebar-collapsed-width","value":"calc(1 * 56px)"},{"name":"--fui-kbd-height","value":"1.286rem","description":"18px at 14px root"},{"name":"--fui-kbd-min-width","value":"1.714rem","description":"24px"},{"name":"--fui-kbd-reserved-width","value":"2.714rem","description":"38px, enough for \"⌘K\""},{"name":"--fui-sidebar-section-label-size","value":"var(--fui-font-size-xs)"},{"name":"--fui-control-height-xs","value":"measurements.target-value(\"controlTrack\", \"micro\")"},{"name":"--fui-control-height-sm","value":"measurements.target-value(\"controlTrack\", \"sm\")"},{"name":"--fui-control-height-md","value":"measurements.target-value(\"controlTrack\", \"md\")"},{"name":"--fui-control-height-lg","value":"measurements.target-value(\"controlTrack\", \"lg\")"},{"name":"--fui-target-size-min","value":"#{$fui-target-size-min}"}],"typography":[{"name":"--fui-markdown-text","value":"currentColor"},{"name":"--fui-textarea-min-rows","value":"1"},{"name":"--fui-textarea-max-rows","value":"9999"},{"name":"--fui-font-sans","value":"\"Onest Variable\", Onest, -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif"},{"name":"--fui-font-mono","value":"\"JetBrains Mono Variable\", \"JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, monospace"},{"name":"--fui-font-size-2xs","value":"#{$fui-font-size-2xs}"},{"name":"--fui-font-size-xs","value":"#{$fui-font-size-xs}"},{"name":"--fui-font-size-sm","value":"#{$fui-font-size-sm}"},{"name":"--fui-font-size-base","value":"#{$fui-font-size-base}"},{"name":"--fui-font-size-md","value":"#{$fui-font-size-md}"},{"name":"--fui-font-size-lg","value":"#{$fui-font-size-lg}"},{"name":"--fui-font-size-xl","value":"#{$fui-font-size-xl}"},{"name":"--fui-font-size-2xl","value":"#{$fui-font-size-2xl}"},{"name":"--fui-font-size-3xl","value":"#{$fui-font-size-3xl}"},{"name":"--fui-font-size-4xl","value":"#{$fui-font-size-4xl}"},{"name":"--fui-popup-item-font-size","value":"#{$fui-popup-item-font-size}"},{"name":"--fui-font-weight-normal","value":"#{$fui-font-weight-normal}"},{"name":"--fui-font-weight-medium","value":"#{$fui-font-weight-medium}"},{"name":"--fui-font-weight-semibold","value":"#{$fui-font-weight-semibold}"},{"name":"--fui-font-weight-bold","value":"#{$fui-font-weight-bold}"},{"name":"--fui-line-height-tight","value":"#{$fui-line-height-tight}"},{"name":"--fui-line-height-normal","value":"#{$fui-line-height-normal}"},{"name":"--fui-line-height-relaxed","value":"#{$fui-line-height-relaxed}"},{"name":"--fui-line-height-display","value":"#{$fui-line-height-display}"},{"name":"--fui-line-height-prose","value":"#{$fui-line-height-prose}"},{"name":"--fui-letter-spacing-tight","value":"#{$fui-letter-spacing-tight}"},{"name":"--fui-letter-spacing-normal","value":"#{$fui-letter-spacing-normal}"},{"name":"--fui-letter-spacing-display","value":"#{$fui-letter-spacing-display}"},{"name":"--fui-letter-spacing-wide","value":"#{$fui-letter-spacing-wide}"},{"name":"--fui-kbd-font-size","value":"var(--fui-font-size-2xs)"}],"size-variants":[{"name":"--_fui-textarea-block-inset","value":"calc(1 * 6px)})"}],"radius":[{"name":"--fui-checkbox-radius","value":"var(--fui-radius-l3)"},{"name":"--fui-radius-sm","value":"#{$fui-radius-sm}"},{"name":"--fui-radius-md","value":"#{$fui-radius-md}"},{"name":"--fui-radius-lg","value":"#{$fui-radius-lg}"},{"name":"--fui-radius-xl","value":"#{$fui-radius-xl}"},{"name":"--fui-radius-full","value":"#{$fui-radius-full}"},{"name":"--fui-radius-none","value":"0px"},{"name":"--fui-radius-l1","value":"var(--fui-radius-lg)"},{"name":"--fui-radius-l2","value":"var(--fui-radius-md)"},{"name":"--fui-radius-l3","value":"var(--fui-radius-sm)"},{"name":"--fui-kbd-radius","value":"var(--fui-radius-sm)"},{"name":"--fui-card-accent-radius","value":"#{$fui-card-accent-radius}"},{"name":"--fui-sidebar-item-radius","value":"var(--fui-radius-full)"},{"name":"--fui-badge-radius","value":"var(--fui-radius-lg)"},{"name":"--fui-card-radius","value":"var(--fui-radius-lg)"}],"z-index":[{"name":"--fui-stack-direction","value":"column"},{"name":"--fui-stack-direction-sm","value":"column"},{"name":"--fui-stack-direction-md","value":"column"},{"name":"--fui-stack-direction-lg","value":"column"},{"name":"--fui-stack-direction-xl","value":"column"}],"base":[{"name":"--fui-base-unit","value":"#{$fui-base-unit}"}],"transitions":[{"name":"--fui-transition-fast","value":"160ms cubic-bezier(0.25, 0.46, 0.45, 0.94)"},{"name":"--fui-opacity-disabled","value":"0.5"},{"name":"--fui-opacity-muted","value":"0.7"},{"name":"--fui-opacity-faint","value":"0.3"},{"name":"--fui-scale","value":"1"},{"name":"--fui-transition-normal","value":"200ms cubic-bezier(0.4, 0, 0.2, 1)"}],"motion-primitives":[{"name":"--fui-anim-offset-sm","value":"4px"},{"name":"--fui-anim-offset-md","value":"8px"},{"name":"--fui-duration-spin","value":"800ms"},{"name":"--fui-duration-pulse","value":"1500ms"},{"name":"--fui-duration-shimmer","value":"2000ms"}],"overlay-stacking-layers":[{"name":"--fui-overlay-layer-swipe","value":"49"},{"name":"--fui-overlay-layer-backdrop","value":"50"},{"name":"--fui-overlay-layer-modal","value":"51"},{"name":"--fui-overlay-layer-anchored","value":"52"},{"name":"--fui-overlay-layer-toast","value":"55"},{"name":"--fui-overlay-layer-tooltip","value":"60"}],"backdrop":[{"name":"--fui-backdrop","value":"light-dark(#{$fui-backdrop}, #{$fui-dark-backdrop})"}],"text":[{"name":"--fui-text-primary","value":"light-dark(#{$fui-text-primary}, #{$fui-dark-text-primary})"},{"name":"--fui-text-secondary","value":"light-dark(#{$fui-text-secondary}, #{$fui-dark-text-secondary})"},{"name":"--fui-text-tertiary","value":"light-dark(#{$fui-text-tertiary}, #{$fui-dark-text-tertiary})"},{"name":"--fui-text-inverse","value":"light-dark(#{$fui-text-inverse}, #{$fui-dark-text-inverse})"}],"component-sizing":[{"name":"--fui-button-primary-base","value":"var(--fui-bg-inverse)"},{"name":"--fui-button-primary-color","value":"var(--fui-text-inverse)"},{"name":"--fui-button-radius","value":"var(--fui-radius-xl)"},{"name":"--fui-button-primary-hover","value":"var(--fui-color-accent-hover)"},{"name":"--fui-button-primary-active","value":"var(--fui-color-accent-active)"},{"name":"--fui-button-primary-border","value":"var(--fui-button-primary-base)"},{"name":"--fui-button-primary-border-hover","value":"var(--fui-button-primary-hover)"},{"name":"--fui-button-primary-bg","value":"var(--fui-button-primary-base)"},{"name":"--fui-button-primary-bg-hover","value":"var(--fui-button-primary-hover)"},{"name":"--fui-button-primary-bg-active","value":"var(--fui-button-primary-active)"},{"name":"--fui-button-primary-shadow","value":"none"},{"name":"--fui-button-primary-shadow-active","value":"none"},{"name":"--fui-button-neutral-color","value":"var(--fui-text-primary)"},{"name":"--fui-button-outlined-shadow","value":"none"},{"name":"--fui-button-neutral-shadow","value":"none"},{"name":"--fui-button-neutral-shadow-active","value":"none"},{"name":"--fui-button-height-xs","value":"measurements.target-value(\"controlTrack\", \"micro\")"},{"name":"--fui-button-height-sm","value":"measurements.target-value(\"controlTrack\", \"sm\")"},{"name":"--fui-button-height-md","value":"measurements.target-value(\"controlTrack\", \"md\")"},{"name":"--fui-button-height-lg","value":"measurements.target-value(\"controlTrack\", \"lg\")"},{"name":"--fui-input-height-sm","value":"calc(1 * 28px)"},{"name":"--fui-input-height","value":"calc(1 * 32px)"},{"name":"--fui-input-height-lg","value":"calc(1 * 40px)"},{"name":"--fui-touch-sm","value":"#{$fui-touch-sm}"},{"name":"--fui-touch-md","value":"#{$fui-touch-md}"},{"name":"--fui-touch-lg","value":"#{$fui-touch-lg}"}],"layout":[{"name":"--fui-header-search-bg","value":"var(--fui-bg-hover)"},{"name":"--fui-appshell-header-height","value":"#{$fui-appshell-header-height}"},{"name":"--fui-header-z-index","value":"40"}],"focus":[{"name":"--fui-focus-ring-color","value":"light-dark(#{$fui-focus-ring-color}, #{$fui-dark-focus-ring-color})"},{"name":"--fui-focus-ring-offset","value":"2px"},{"name":"--fui-focus-ring-width","value":"2px"}],"scrollbar":[{"name":"--fui-scrollbar-width","value":"8px"},{"name":"--fui-scrollbar-track","value":"light-dark(#{$fui-scrollbar-track}, #{$fui-dark-scrollbar-track})"},{"name":"--fui-scrollbar-thumb","value":"light-dark(#{$fui-scrollbar-thumb}, #{$fui-dark-scrollbar-thumb})"},{"name":"--fui-scrollbar-thumb-hover","value":"#{$fui-dark-scrollbar-thumb-hover}"},{"name":"$fui-base-font-size","value":"computed.$computed-base-font-size"},{"name":"$fui-base-unit","value":"computed.$computed-base-unit"},{"name":"$fui-font-sans","value":"\"Onest Variable\", Onest, -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif"},{"name":"$fui-font-mono","value":"\"JetBrains Mono Variable\", \"JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, monospace"},{"name":"$fui-font-size-2xs","value":"map.get(measurements.$legacy, \"typography\", \"fontSize\", \"2xs\")"},{"name":"$fui-font-size-xs","value":"map.get(measurements.$legacy, \"typography\", \"fontSize\", \"xs\")"},{"name":"$fui-font-size-sm","value":"map.get(measurements.$legacy, \"typography\", \"fontSize\", \"sm\")"},{"name":"$fui-font-size-base","value":"map.get(measurements.$legacy, \"typography\", \"fontSize\", \"base\")"},{"name":"$fui-font-size-md","value":"map.get(measurements.$legacy, \"typography\", \"fontSize\", \"md\")"},{"name":"$fui-font-size-lg","value":"map.get(measurements.$legacy, \"typography\", \"fontSize\", \"lg\")"},{"name":"$fui-font-size-xl","value":"map.get(measurements.$legacy, \"typography\", \"fontSize\", \"xl\")"},{"name":"$fui-font-size-2xl","value":"map.get(measurements.$legacy, \"typography\", \"fontSize\", \"2xl\")"},{"name":"$fui-font-size-3xl","value":"map.get(measurements.$legacy, \"typography\", \"fontSize\", \"3xl\")"},{"name":"$fui-font-size-4xl","value":"map.get(measurements.$legacy, \"typography\", \"fontSize\", \"4xl\")"},{"name":"$fui-popup-item-font-size","value":"$fui-font-size-xs"},{"name":"$fui-font-weight-normal","value":"map.get( measurements.$legacy, \"typography\", \"fontWeight\", \"normal\" )"},{"name":"$fui-font-weight-medium","value":"map.get( measurements.$legacy, \"typography\", \"fontWeight\", \"medium\" )"},{"name":"$fui-font-weight-semibold","value":"map.get( measurements.$legacy, \"typography\", \"fontWeight\", \"semibold\" )"},{"name":"$fui-font-weight-bold","value":"map.get(measurements.$legacy, \"typography\", \"fontWeight\", \"bold\")"},{"name":"$fui-line-height-tight","value":"map.get(measurements.$legacy, \"typography\", \"lineHeight\", \"tight\")"},{"name":"$fui-line-height-normal","value":"map.get( measurements.$legacy, \"typography\", \"lineHeight\", \"normal\" )"},{"name":"$fui-line-height-relaxed","value":"map.get( measurements.$legacy, \"typography\", \"lineHeight\", \"relaxed\" )"},{"name":"$fui-line-height-display","value":"map.get( measurements.$legacy, \"typography\", \"lineHeight\", \"display\" )"},{"name":"$fui-line-height-prose","value":"map.get(measurements.$legacy, \"typography\", \"lineHeight\", \"prose\")"},{"name":"$fui-letter-spacing-tight","value":"map.get( measurements.$legacy, \"typography\", \"letterSpacing\", \"tight\" )"},{"name":"$fui-letter-spacing-normal","value":"map.get( measurements.$legacy, \"typography\", \"letterSpacing\", \"normal\" )"},{"name":"$fui-letter-spacing-display","value":"map.get( measurements.$legacy, \"typography\", \"letterSpacing\", \"display\" )"},{"name":"$fui-letter-spacing-wide","value":"map.get( measurements.$legacy, \"typography\", \"letterSpacing\", \"wide\" )"},{"name":"$fui-space-px","value":"computed.$computed-space-px"},{"name":"$fui-space-0-5","value":"computed.$computed-space-0-5"},{"name":"$fui-space-0-75","value":"computed.$computed-space-0-75"},{"name":"$fui-space-1","value":"computed.$computed-space-1"},{"name":"$fui-space-2","value":"computed.$computed-space-2"},{"name":"$fui-space-3","value":"computed.$computed-space-3"},{"name":"$fui-space-4","value":"computed.$computed-space-4"},{"name":"$fui-space-5","value":"computed.$computed-space-5"},{"name":"$fui-space-6","value":"computed.$computed-space-6"},{"name":"$fui-space-8","value":"computed.$computed-space-8"},{"name":"$fui-space-10","value":"computed.$computed-space-10"},{"name":"$fui-space-12","value":"computed.$computed-space-12"},{"name":"$fui-popup-padding","value":"$fui-space-1"},{"name":"$fui-popup-row-gap","value":"1px"},{"name":"$fui-popup-item-padding-block","value":"$fui-space-1"},{"name":"$fui-popup-item-padding-inline","value":"$fui-space-2"},{"name":"$fui-radius-sm","value":"computed.$computed-radius-sm"},{"name":"$fui-radius-md","value":"computed.$computed-radius-md"},{"name":"$fui-radius-lg","value":"computed.$computed-radius-lg"},{"name":"$fui-radius-xl","value":"computed.$computed-radius-xl"},{"name":"$fui-radius-full","value":"computed.$computed-radius-full"},{"name":"$fui-radius-none","value":"0px"},{"name":"$fui-radius-l1","value":"$fui-radius-lg"},{"name":"$fui-radius-l2","value":"$fui-radius-md"},{"name":"$fui-radius-l3","value":"$fui-radius-sm"},{"name":"$fui-stroke-hairline","value":"measurements.target-value(\"stroke\", \"hairline\")"},{"name":"$fui-stroke-default","value":"measurements.target-value(\"stroke\", \"default\")"},{"name":"$fui-stroke-strong","value":"measurements.target-value(\"stroke\", \"strong\")"},{"name":"$fui-opacity-disabled","value":"0.5"},{"name":"$fui-opacity-muted","value":"0.7"},{"name":"$fui-opacity-faint","value":"0.3"},{"name":"$fui-control-selected-border","value":"transparent"},{"name":"$fui-scale","value":"1"},{"name":"$fui-control-track-micro","value":"measurements.target-value(\"controlTrack\", \"micro\")"},{"name":"$fui-control-track-sm","value":"measurements.target-value(\"controlTrack\", \"sm\")"},{"name":"$fui-control-track-md","value":"measurements.target-value(\"controlTrack\", \"md\")"},{"name":"$fui-control-track-lg","value":"measurements.target-value(\"controlTrack\", \"lg\")"},{"name":"$fui-transition-fast","value":"160ms cubic-bezier(0.25, 0.46, 0.45, 0.94)"},{"name":"$fui-transition-normal","value":"200ms cubic-bezier(0.4, 0, 0.2, 1)"},{"name":"$fui-color-accent","value":"computed.$computed-color-accent"},{"name":"$fui-color-on-accent","value":"computed.$computed-color-on-accent"},{"name":"$fui-color-accent-hover","value":"computed.$computed-color-accent-hover"},{"name":"$fui-color-accent-active","value":"computed.$computed-color-accent-active"},{"name":"$fui-color-danger","value":"computed.$computed-color-danger"},{"name":"$fui-color-danger-hover","value":"computed.$computed-color-danger-hover"},{"name":"$fui-color-success","value":"computed.$computed-color-success"},{"name":"$fui-color-warning","value":"computed.$computed-color-warning"},{"name":"$fui-color-info","value":"computed.$computed-color-info"},{"name":"$fui-color-danger-bg","value":"computed.$computed-color-danger-bg"},{"name":"$fui-color-success-bg","value":"computed.$computed-color-success-bg"},{"name":"$fui-color-warning-bg","value":"computed.$computed-color-warning-bg"},{"name":"$fui-color-info-bg","value":"computed.$computed-color-info-bg"},{"name":"$fui-color-danger-text","value":"computed.$computed-color-danger-text"},{"name":"$fui-color-success-text","value":"computed.$computed-color-success-text"},{"name":"$fui-color-warning-text","value":"computed.$computed-color-warning-text"},{"name":"$fui-color-info-text","value":"computed.$computed-color-info-text"},{"name":"$fui-color-danger-border","value":"color-mix(in srgb, $fui-color-danger-text 30%, transparent)"},{"name":"$fui-color-success-border","value":"color-mix(in srgb, $fui-color-success-text 28%, transparent)"},{"name":"$fui-color-warning-border","value":"color-mix(in srgb, $fui-color-warning-text 28%, transparent)"},{"name":"$fui-color-info-border","value":"color-mix(in srgb, $fui-color-info-text 30%, transparent)"},{"name":"$fui-bg-primary","value":"computed.$computed-bg-primary"},{"name":"$fui-bg-secondary","value":"computed.$computed-bg-secondary"},{"name":"$fui-bg-tertiary","value":"computed.$computed-bg-tertiary"},{"name":"$fui-bg-elevated","value":"computed.$computed-bg-elevated"},{"name":"$fui-bg-subtle","value":"computed.$computed-bg-subtle"},{"name":"$fui-bg-hover","value":"computed.$computed-bg-hover"},{"name":"$fui-bg-active","value":"computed.$computed-bg-active"},{"name":"$fui-body-bg","value":"computed.$computed-body-bg"},{"name":"$fui-main-bg","value":"computed.$computed-main-bg"},{"name":"$fui-text-primary","value":"computed.$computed-text-primary"},{"name":"$fui-text-secondary","value":"computed.$computed-text-secondary"},{"name":"$fui-text-tertiary","value":"computed.$computed-text-tertiary"},{"name":"$fui-text-inverse","value":"computed.$computed-text-inverse"},{"name":"$fui-bg-inverse","value":"$fui-text-primary"},{"name":"$fui-border","value":"computed.$computed-border"},{"name":"$fui-border-default","value":"computed.$computed-border-default"},{"name":"$fui-border-strong","value":"computed.$computed-border-strong"},{"name":"$fui-shadow-sm","value":"computed.$computed-shadow-sm"},{"name":"$fui-shadow-md","value":"computed.$computed-shadow-md"},{"name":"$fui-shadow-lg","value":"computed.$computed-shadow-lg"},{"name":"$fui-focus-ring-color","value":"computed.$computed-focus-ring-color"},{"name":"$fui-focus-ring-offset","value":"2px"},{"name":"$fui-focus-ring-width","value":"2px"},{"name":"$fui-scrollbar-width","value":"8px"},{"name":"$fui-scrollbar-track","value":"computed.$computed-scrollbar-track"},{"name":"$fui-scrollbar-thumb","value":"computed.$computed-scrollbar-thumb"},{"name":"$fui-scrollbar-thumb-hover","value":"computed.$computed-scrollbar-thumb-hover"},{"name":"$fui-dark-color-accent","value":"computed.$computed-dark-color-accent"},{"name":"$fui-dark-color-on-accent","value":"computed.$computed-dark-color-on-accent"},{"name":"$fui-dark-color-accent-hover","value":"computed.$computed-dark-color-accent-hover"},{"name":"$fui-dark-color-accent-active","value":"computed.$computed-dark-color-accent-active"},{"name":"$fui-brand-is-default","value":"computed.$brand-is-fragments-default"},{"name":"$_rt-dark-accent","value":"$fui-dark-color-accent"},{"name":"$_rt-dark-accent-hover","value":"$fui-dark-color-accent-hover"},{"name":"$_rt-dark-accent-active","value":"$fui-dark-color-accent-active"},{"name":"$fui-dark-bg-primary","value":"computed.$computed-dark-bg-primary"},{"name":"$fui-dark-bg-secondary","value":"computed.$computed-dark-bg-secondary"},{"name":"$fui-dark-bg-tertiary","value":"computed.$computed-dark-bg-tertiary"},{"name":"$fui-dark-bg-elevated","value":"computed.$computed-dark-bg-elevated"},{"name":"$fui-dark-bg-subtle","value":"computed.$computed-dark-bg-subtle"},{"name":"$fui-dark-bg-hover","value":"computed.$computed-dark-bg-hover"},{"name":"$fui-dark-bg-active","value":"computed.$computed-dark-bg-active"},{"name":"$fui-dark-body-bg","value":"computed.$computed-dark-body-bg"},{"name":"$fui-dark-main-bg","value":"computed.$computed-dark-main-bg"},{"name":"$fui-dark-text-primary","value":"computed.$computed-dark-text-primary"},{"name":"$fui-dark-text-secondary","value":"computed.$computed-dark-text-secondary"},{"name":"$fui-dark-text-tertiary","value":"computed.$computed-dark-text-tertiary"},{"name":"$fui-dark-text-inverse","value":"computed.$computed-dark-text-inverse"},{"name":"$fui-dark-bg-inverse","value":"computed.$computed-dark-text-primary"},{"name":"$fui-dark-border","value":"computed.$computed-dark-border"},{"name":"$fui-dark-border-default","value":"computed.$computed-dark-border-default"},{"name":"$fui-dark-border-strong","value":"computed.$computed-dark-border-strong"},{"name":"$fui-dark-shadow-sm","value":"computed.$computed-dark-shadow-sm"},{"name":"$fui-dark-shadow-md","value":"computed.$computed-dark-shadow-md"},{"name":"$fui-dark-shadow-lg","value":"computed.$computed-dark-shadow-lg"},{"name":"$fui-dark-color-danger-bg","value":"computed.$computed-dark-color-danger-bg"},{"name":"$fui-dark-color-success-bg","value":"computed.$computed-dark-color-success-bg"},{"name":"$fui-dark-color-warning-bg","value":"computed.$computed-dark-color-warning-bg"},{"name":"$fui-dark-color-info-bg","value":"computed.$computed-dark-color-info-bg"},{"name":"$fui-dark-color-danger-text","value":"computed.$computed-dark-color-danger-text"},{"name":"$fui-dark-color-success-text","value":"computed.$computed-dark-color-success-text"},{"name":"$fui-dark-color-warning-text","value":"computed.$computed-dark-color-warning-text"},{"name":"$fui-dark-color-info-text","value":"computed.$computed-dark-color-info-text"},{"name":"$fui-dark-focus-ring-color","value":"computed.$computed-dark-focus-ring-color"},{"name":"$fui-dark-scrollbar-track","value":"computed.$computed-dark-scrollbar-track"},{"name":"$fui-dark-scrollbar-thumb","value":"computed.$computed-dark-scrollbar-thumb"},{"name":"$fui-dark-scrollbar-thumb-hover","value":"computed.$computed-dark-scrollbar-thumb-hover"},{"name":"$fui-backdrop","value":"computed.$computed-backdrop"},{"name":"$fui-dark-backdrop","value":"computed.$computed-dark-backdrop"},{"name":"$fui-breakpoint-sm","value":"640px"},{"name":"$fui-breakpoint-md","value":"768px"},{"name":"$fui-breakpoint-lg","value":"1024px"},{"name":"$fui-breakpoint-xl","value":"1280px"},{"name":"$fui-control-height-xs","value":"measurements.target-value(\"controlTrack\", \"micro\")"},{"name":"$fui-control-height-sm","value":"measurements.target-value(\"controlTrack\", \"sm\")"},{"name":"$fui-control-height-md","value":"measurements.target-value(\"controlTrack\", \"md\")"},{"name":"$fui-control-height-lg","value":"measurements.target-value(\"controlTrack\", \"lg\")"},{"name":"$fui-button-height-xs","value":"measurements.target-value(\"controlTrack\", \"micro\")"},{"name":"$fui-button-height-sm","value":"measurements.target-value(\"controlTrack\", \"sm\")"},{"name":"$fui-button-height-md","value":"measurements.target-value(\"controlTrack\", \"md\")"},{"name":"$fui-button-height-lg","value":"measurements.target-value(\"controlTrack\", \"lg\")"},{"name":"$fui-button-outlined-shadow","value":"none"},{"name":"$fui-input-height-sm","value":"measurements.target-value(\"fieldTrack\", \"sm\")"},{"name":"$fui-input-height","value":"measurements.target-value(\"fieldTrack\", \"md\")"},{"name":"$fui-input-height-lg","value":"measurements.target-value(\"fieldTrack\", \"lg\")"},{"name":"$fui-touch-sm","value":"computed.$computed-touch-sm"},{"name":"$fui-touch-md","value":"computed.$computed-touch-md"},{"name":"$fui-touch-lg","value":"computed.$computed-touch-lg"},{"name":"$fui-target-size-min","value":"map.get(measurements.$legacy, \"touch\", \"minimum\")"},{"name":"$fui-target-size-comfortable","value":"$fui-touch-md"},{"name":"$fui-icon-xs","value":"measurements.target-value(\"icon\", \"xs\")"},{"name":"$fui-icon-sm","value":"measurements.target-value(\"icon\", \"sm\")"},{"name":"$fui-icon-md","value":"measurements.target-value(\"icon\", \"md\")"},{"name":"$fui-icon-lg","value":"measurements.target-value(\"icon\", \"lg\")"},{"name":"$fui-icon-xl","value":"measurements.target-value(\"icon\", \"xl\")"},{"name":"$fui-icon-2xl","value":"measurements.target-value(\"icon\", \"2xl\")"},{"name":"$fui-anim-offset-sm","value":"4px"},{"name":"$fui-anim-offset-md","value":"8px"},{"name":"$fui-duration-spin","value":"800ms"},{"name":"$fui-duration-pulse","value":"1500ms"},{"name":"$fui-duration-shimmer","value":"2000ms"},{"name":"$fui-overlay-layer-swipe","value":"49"},{"name":"$fui-overlay-layer-backdrop","value":"50"},{"name":"$fui-overlay-layer-modal","value":"51"},{"name":"$fui-overlay-layer-anchored","value":"52"},{"name":"$fui-overlay-layer-toast","value":"55"},{"name":"$fui-overlay-layer-tooltip","value":"60"},{"name":"$fui-sidebar-item-height","value":"computed.$computed-sidebar-item-height"},{"name":"$fui-appshell-header-height","value":"map.get( measurements.$legacy, \"navigation\", \"appShellHeaderHeight\" )"},{"name":"$fui-header-z-index","value":"40"},{"name":"$fui-code-bg","value":"light-dark(#{$fui-bg-tertiary}, #{$fui-dark-bg-tertiary})"},{"name":"$fui-card-accent-bg","value":"$fui-bg-tertiary"},{"name":"$fui-card-accent-border","value":"color-mix(in srgb, $fui-color-accent 30%, $fui-border)"},{"name":"$fui-card-accent-radius","value":"$fui-radius-xl"},{"name":"$fui-code-selection-bg","value":"color-mix( in srgb, var(--fui-color-accent, #f56138) 30%, transparent )"},{"name":"$fui-code-text","value":"$fui-text-primary"},{"name":"$fui-code-token-keyword","value":"#9a3412"},{"name":"$fui-code-token-string","value":"#166534"},{"name":"$fui-code-token-comment","value":"#5c5348"},{"name":"$fui-code-token-function","value":"#1e3a8a"},{"name":"$fui-code-token-number","value":"#92400e"},{"name":"$fui-code-token-punctuation","value":"#3d3429"},{"name":"$fui-code-token-variable","value":"#3d3429"},{"name":"$fui-dark-code-token-keyword","value":"#f56138"},{"name":"$fui-dark-code-token-string","value":"#7dcea0"},{"name":"$fui-dark-code-token-comment","value":"#a89b8c"},{"name":"$fui-dark-code-token-function","value":"#8cb4e8"},{"name":"$fui-dark-code-token-number","value":"#e8b86d"},{"name":"$fui-dark-code-token-punctuation","value":"#c9c2b8"},{"name":"$fui-dark-code-token-variable","value":"#f0ede9"},{"name":"$fui-link-ink","value":"#9a3412"},{"name":"$fui-dark-link-ink","value":"$fui-dark-color-accent"}],"sidebar":[{"name":"--fui-sidebar-item-height","value":"#{$fui-sidebar-item-height}"}],"semantic-borders":[{"name":"--fui-color-danger-border","value":"color-mix(in srgb, var(--fui-color-danger-text) 30%, transparent)"},{"name":"--fui-color-success-border","value":"color-mix(in srgb, var(--fui-color-success-text) 28%, transparent)"},{"name":"--fui-color-warning-border","value":"color-mix(in srgb, var(--fui-color-warning-text) 28%, transparent)"},{"name":"--fui-color-info-border","value":"color-mix(in srgb, var(--fui-color-info-text) 30%, transparent)"}]}},"graph":{"nodes":[{"name":"Accordion","category":"layout","status":"stable","compositionPattern":"compound","subComponents":["Item","Trigger","Content"]},{"name":"Alert","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Icon","Body","Title","Content","Actions","Action","Close"]},{"name":"AppShell","category":"layout","status":"stable","compositionPattern":"compound","subComponents":["Header","Sidebar","Main","Aside"]},{"name":"Avatar","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Group"]},{"name":"Badge","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"BentoGrid","category":"layout","status":"stable"},{"name":"Box","category":"layout","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Breadcrumbs","category":"navigation","status":"stable","compositionPattern":"compound","subComponents":["Item","Separator"]},{"name":"Button","category":"actions","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"ButtonGroup","category":"actions","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Card","category":"layout","status":"stable","compositionPattern":"compound","subComponents":["Header","Title","Description","Body","Footer"]},{"name":"Chart","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Root","Tooltip","TooltipContent","Legend","LegendContent","preload"]},{"name":"Checkbox","category":"inputs","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Chip","category":"inputs","status":"stable","compositionPattern":"compound","subComponents":["Group"]},{"name":"CodeBlock","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Tabbed"]},{"name":"Collapsible","category":"layout","status":"stable","compositionPattern":"compound","subComponents":["Root","Trigger","Content"]},{"name":"ColorPicker","category":"inputs","status":"stable","compositionPattern":"compound","subComponents":["Root","preload"]},{"name":"Combobox","category":"inputs","status":"stable","compositionPattern":"compound","subComponents":["Input","Trigger","Content","Item","ItemIndicator","Empty","Group","GroupLabel"]},{"name":"Command","category":"navigation","status":"stable","compositionPattern":"compound","subComponents":["Input","List","Item","Group","Empty","Separator"]},{"name":"ComponentDefaults","category":"utilities","status":"stable"},{"name":"ConversationList","category":"ai","status":"stable","compositionPattern":"compound","subComponents":["DateSeparator","TypingIndicator"]},{"name":"DataTable","category":"display","status":"stable","compositionPattern":"simple","subComponents":["Root","Columns","preload"]},{"name":"DatePicker","category":"inputs","status":"stable","compositionPattern":"compound","subComponents":["Trigger","Content","Calendar","Preset","preload"]},{"name":"Dialog","category":"overlays","status":"stable","compositionPattern":"compound","subComponents":["Trigger","Content","Close","Header","Title","Description","Body","Footer"]},{"name":"Drawer","category":"overlays","status":"stable","compositionPattern":"compound","subComponents":["Trigger","Content","Close","SwipeArea","Header","Title","Description","Body","Footer"]},{"name":"Editor","category":"inputs","status":"stable","compositionPattern":"compound","subComponents":["Toolbar","ToolbarGroup","ToolbarButton","Separator","StatusIndicator","Content","StatusBar","preload"]},{"name":"EmptyState","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Icon","Title","Description","Actions"]},{"name":"Field","category":"inputs","status":"stable","compositionPattern":"compound","subComponents":["Label","Control","Description","Error","Validity","Required"]},{"name":"Fieldset","category":"inputs","status":"stable","compositionPattern":"compound","subComponents":["Legend","Description"]},{"name":"Form","category":"inputs","status":"stable","compositionPattern":"compound","subComponents":["Root","Actions"]},{"name":"Grid","category":"layout","status":"stable"},{"name":"Header","category":"layout","status":"stable","compositionPattern":"compound","subComponents":["SkipLink","Trigger","Brand","Nav","NavItem","MobileNav","MobileNavLink","MobileNavActions","NavMenu","NavMenuItem","Search","Spacer","Actions"]},{"name":"Icon","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"IconButton","category":"actions","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Image","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Input","category":"inputs","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Link","category":"navigation","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"List","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Item"]},{"name":"Listbox","category":"inputs","status":"stable","compositionPattern":"compound","subComponents":["Item","Group","Empty"]},{"name":"Loading","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Inline","Screen"]},{"name":"Main","category":"layout","status":"stable","compositionPattern":"compound","subComponents":["Header","Description","Content","Footer"]},{"name":"Markdown","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Root","preload"]},{"name":"Menu","category":"overlays","status":"stable","compositionPattern":"compound","subComponents":["Trigger","Content","Item","CheckboxItem","RadioGroup","RadioItem","Group","GroupLabel","Separator","Submenu","SubmenuTrigger"]},{"name":"Message","category":"ai","status":"stable","compositionPattern":"compound","subComponents":["Content","Actions","Timestamp","Avatar"]},{"name":"NavigationMenu","category":"navigation","status":"stable","compositionPattern":"compound","subComponents":["List","Item","Trigger","Content","Link","Indicator","Viewport","MobileBrand","MobileContent","MobileSection"]},{"name":"Pagination","category":"navigation","status":"stable","compositionPattern":"compound","subComponents":["Previous","Next","Items","Item","Ellipsis"]},{"name":"Popover","category":"overlays","status":"stable","compositionPattern":"compound","subComponents":["Trigger","Content","Close","Title","Description","Body","Footer"]},{"name":"Progress","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Root","Circular"]},{"name":"Prompt","category":"ai","status":"stable","compositionPattern":"compound","subComponents":["Textarea","Toolbar","Tabs","Tab","Actions","Info","ActionButton","ModeButton","Select","Attach","Attachments","Usage","Submit"]},{"name":"RadioGroup","category":"inputs","status":"stable","compositionPattern":"compound","subComponents":["Item"]},{"name":"ScrollArea","category":"layout","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Select","category":"inputs","status":"stable","compositionPattern":"compound","subComponents":["Trigger","Content","Item","Group","GroupLabel"]},{"name":"Separator","category":"layout","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Sidebar","category":"layout","status":"stable","compositionPattern":"compound","subComponents":["Header","Nav","Section","SectionAction","Item","SubItem","Submenu","Footer","Trigger","Overlay","CollapseToggle","Rail","MenuSkeleton"]},{"name":"Skeleton","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Text","Circle"]},{"name":"Slider","category":"inputs","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Stack","category":"layout","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Switch","category":"inputs","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Table","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Root","Head","Body","Footer","Row","Cell","HeaderCell","Caption"]},{"name":"TableOfContents","category":"navigation","status":"stable","compositionPattern":"compound","subComponents":["Item","Group"]},{"name":"Tabs","category":"navigation","status":"stable","compositionPattern":"compound","subComponents":["List","Tab","Panel"]},{"name":"Text","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Textarea","category":"inputs","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Theme","category":"utilities","status":"stable","compositionPattern":"compound","subComponents":["Root","Provider","Toggle","Button","useTheme"]},{"name":"ThinkingIndicator","category":"ai","status":"stable","compositionPattern":"compound","subComponents":["Steps","Step"]},{"name":"Toast","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Provider"]},{"name":"ToggleGroup","category":"actions","status":"stable","compositionPattern":"compound","subComponents":["Item"]},{"name":"Tooltip","category":"overlays","status":"stable","compositionPattern":"compound","subComponents":["Root","Provider"]},{"name":"VisuallyHidden","category":"utilities","status":"stable","compositionPattern":"compound","subComponents":["Root"]}],"edges":[{"s":"AppShell","t":"Sidebar","ty":"imports","w":1,"p":"source:AppShell/index.tsx"},{"s":"AppShell","t":"Sidebar","ty":"hook-depends","w":0.75,"p":"source:AppShell/index.tsx"},{"s":"CodeBlock","t":"Button","ty":"imports","w":1,"p":"source:CodeBlock/index.tsx"},{"s":"CodeBlock","t":"IconButton","ty":"imports","w":1,"p":"source:CodeBlock/index.tsx"},{"s":"ColorPicker","t":"Input","ty":"imports","w":1,"p":"source:ColorPicker/index.tsx"},{"s":"ConversationList","t":"Loading","ty":"imports","w":1,"p":"source:ConversationList/index.tsx"},{"s":"DataTable","t":"Checkbox","ty":"imports","w":1,"p":"source:DataTable/index.tsx"},{"s":"Header","t":"ScrollArea","ty":"imports","w":1,"p":"source:Header/index.tsx"},{"s":"Header","t":"Sidebar","ty":"hook-depends","w":0.75,"p":"source:Header/index.tsx"},{"s":"Main","t":"Stack","ty":"imports","w":1,"p":"source:Main/index.tsx"},{"s":"Message","t":"Avatar","ty":"imports","w":1,"p":"source:Message/index.tsx"},{"s":"Message","t":"Markdown","ty":"imports","w":1,"p":"source:Message/index.tsx"},{"s":"NavigationMenu","t":"Collapsible","ty":"imports","w":1,"p":"source:NavigationMenu/index.tsx"},{"s":"NavigationMenu","t":"ScrollArea","ty":"imports","w":1,"p":"source:NavigationMenu/index.tsx"},{"s":"Prompt","t":"Loading","ty":"imports","w":1,"p":"source:Prompt/index.tsx"},{"s":"Prompt","t":"Select","ty":"imports","w":1,"p":"source:Prompt/index.tsx"},{"s":"Sidebar","t":"Badge","ty":"imports","w":1,"p":"source:Sidebar/index.tsx"},{"s":"Sidebar","t":"Tooltip","ty":"imports","w":1,"p":"source:Sidebar/index.tsx"},{"s":"Sidebar","t":"Skeleton","ty":"imports","w":1,"p":"source:Sidebar/index.tsx"},{"s":"Sidebar","t":"Collapsible","ty":"imports","w":1,"p":"source:Sidebar/index.tsx"},{"s":"Sidebar","t":"ScrollArea","ty":"imports","w":1,"p":"source:Sidebar/index.tsx"},{"s":"TableOfContents","t":"Text","ty":"imports","w":1,"p":"source:TableOfContents/index.tsx"},{"s":"Theme","t":"ComponentDefaults","ty":"imports","w":1,"p":"source:Theme/index.tsx"},{"s":"ThinkingIndicator","t":"Loading","ty":"imports","w":1,"p":"source:ThinkingIndicator/index.tsx"},{"s":"Toast","t":"Button","ty":"imports","w":1,"p":"source:Toast/index.tsx"},{"s":"Toast","t":"IconButton","ty":"imports","w":1,"p":"source:Toast/index.tsx"},{"s":"AppShell","t":"Box","ty":"renders","w":0.5,"p":"variant:AppShell"},{"s":"AppShell","t":"Header","ty":"renders","w":0.5,"p":"variant:AppShell"},{"s":"AppShell","t":"Sidebar","ty":"renders","w":0.5,"p":"variant:AppShell"},{"s":"AppShell","t":"Icon","ty":"renders","w":0.5,"p":"variant:AppShell"},{"s":"AppShell","t":"Stack","ty":"renders","w":0.5,"p":"variant:AppShell"},{"s":"AppShell","t":"Text","ty":"renders","w":0.5,"p":"variant:AppShell"},{"s":"Avatar","t":"Stack","ty":"renders","w":0.5,"p":"variant:Avatar"},{"s":"Badge","t":"Stack","ty":"renders","w":0.5,"p":"variant:Badge"},{"s":"BentoGrid","t":"Box","ty":"renders","w":0.5,"p":"variant:BentoGrid"},{"s":"Box","t":"Stack","ty":"renders","w":0.5,"p":"variant:Box"},{"s":"Button","t":"Stack","ty":"renders","w":0.5,"p":"variant:Button"},{"s":"ButtonGroup","t":"Button","ty":"renders","w":0.5,"p":"variant:ButtonGroup"},{"s":"ButtonGroup","t":"Stack","ty":"renders","w":0.5,"p":"variant:ButtonGroup"},{"s":"Card","t":"Text","ty":"renders","w":0.5,"p":"variant:Card"},{"s":"Chip","t":"Stack","ty":"renders","w":0.5,"p":"variant:Chip"},{"s":"CodeBlock","t":"Button","ty":"renders","w":0.5,"p":"variant:CodeBlock"},{"s":"CodeBlock","t":"Card","ty":"renders","w":0.5,"p":"variant:CodeBlock"},{"s":"Command","t":"Dialog","ty":"renders","w":0.5,"p":"variant:Command"},{"s":"Command","t":"Button","ty":"renders","w":0.5,"p":"variant:Command"},{"s":"ComponentDefaults","t":"Button","ty":"renders","w":0.5,"p":"variant:ComponentDefaults"},{"s":"ConversationList","t":"Message","ty":"renders","w":0.5,"p":"variant:ConversationList"},{"s":"ConversationList","t":"EmptyState","ty":"renders","w":0.5,"p":"variant:ConversationList"},{"s":"DataTable","t":"Stack","ty":"renders","w":0.5,"p":"variant:DataTable"},{"s":"DataTable","t":"Avatar","ty":"renders","w":0.5,"p":"variant:DataTable"},{"s":"DataTable","t":"Badge","ty":"renders","w":0.5,"p":"variant:DataTable"},{"s":"DataTable","t":"Input","ty":"renders","w":0.5,"p":"variant:DataTable"},{"s":"Dialog","t":"Button","ty":"renders","w":0.5,"p":"variant:Dialog"},{"s":"Drawer","t":"Button","ty":"renders","w":0.5,"p":"variant:Drawer"},{"s":"Drawer","t":"Stack","ty":"renders","w":0.5,"p":"variant:Drawer"},{"s":"Drawer","t":"Input","ty":"renders","w":0.5,"p":"variant:Drawer"},{"s":"Editor","t":"Button","ty":"renders","w":0.5,"p":"variant:Editor"},{"s":"EmptyState","t":"Button","ty":"renders","w":0.5,"p":"variant:EmptyState"},{"s":"Field","t":"Input","ty":"renders","w":0.5,"p":"variant:Field"},{"s":"Field","t":"Grid","ty":"renders","w":0.5,"p":"variant:Field"},{"s":"Fieldset","t":"Grid","ty":"renders","w":0.5,"p":"variant:Fieldset"},{"s":"Fieldset","t":"Field","ty":"renders","w":0.5,"p":"variant:Fieldset"},{"s":"Fieldset","t":"Input","ty":"renders","w":0.5,"p":"variant:Fieldset"},{"s":"Fieldset","t":"Textarea","ty":"renders","w":0.5,"p":"variant:Fieldset"},{"s":"Fieldset","t":"Select","ty":"renders","w":0.5,"p":"variant:Fieldset"},{"s":"Fieldset","t":"Checkbox","ty":"renders","w":0.5,"p":"variant:Fieldset"},{"s":"Form","t":"Grid","ty":"renders","w":0.5,"p":"variant:Form"},{"s":"Form","t":"Field","ty":"renders","w":0.5,"p":"variant:Form"},{"s":"Form","t":"Input","ty":"renders","w":0.5,"p":"variant:Form"},{"s":"Form","t":"Checkbox","ty":"renders","w":0.5,"p":"variant:Form"},{"s":"Form","t":"Button","ty":"renders","w":0.5,"p":"variant:Form"},{"s":"Form","t":"Fieldset","ty":"renders","w":0.5,"p":"variant:Form"},{"s":"Form","t":"Select","ty":"renders","w":0.5,"p":"variant:Form"},{"s":"Form","t":"Textarea","ty":"renders","w":0.5,"p":"variant:Form"},{"s":"Form","t":"Switch","ty":"renders","w":0.5,"p":"variant:Form"},{"s":"Form","t":"RadioGroup","ty":"renders","w":0.5,"p":"variant:Form"},{"s":"Grid","t":"Box","ty":"renders","w":0.5,"p":"variant:Grid"},{"s":"Grid","t":"Field","ty":"renders","w":0.5,"p":"variant:Grid"},{"s":"Grid","t":"Input","ty":"renders","w":0.5,"p":"variant:Grid"},{"s":"Header","t":"Box","ty":"renders","w":0.5,"p":"variant:Header"},{"s":"Header","t":"Button","ty":"renders","w":0.5,"p":"variant:Header"},{"s":"Header","t":"Input","ty":"renders","w":0.5,"p":"variant:Header"},{"s":"Header","t":"NavigationMenu","ty":"renders","w":0.5,"p":"variant:Header"},{"s":"Header","t":"Stack","ty":"renders","w":0.5,"p":"variant:Header"},{"s":"IconButton","t":"Stack","ty":"renders","w":0.5,"p":"variant:IconButton"},{"s":"Link","t":"Stack","ty":"renders","w":0.5,"p":"variant:Link"},{"s":"Loading","t":"Stack","ty":"renders","w":0.5,"p":"variant:Loading"},{"s":"Main","t":"Box","ty":"renders","w":0.5,"p":"variant:Main"},{"s":"Menu","t":"Button","ty":"renders","w":0.5,"p":"variant:Menu"},{"s":"Message","t":"Button","ty":"renders","w":0.5,"p":"variant:Message"},{"s":"Popover","t":"Button","ty":"renders","w":0.5,"p":"variant:Popover"},{"s":"Popover","t":"Input","ty":"renders","w":0.5,"p":"variant:Popover"},{"s":"Progress","t":"Stack","ty":"renders","w":0.5,"p":"variant:Progress"},{"s":"ScrollArea","t":"Box","ty":"renders","w":0.5,"p":"variant:ScrollArea"},{"s":"ScrollArea","t":"Stack","ty":"renders","w":0.5,"p":"variant:ScrollArea"},{"s":"ScrollArea","t":"Text","ty":"renders","w":0.5,"p":"variant:ScrollArea"},{"s":"ScrollArea","t":"Chip","ty":"renders","w":0.5,"p":"variant:ScrollArea"},{"s":"Separator","t":"Box","ty":"renders","w":0.5,"p":"variant:Separator"},{"s":"Separator","t":"Text","ty":"renders","w":0.5,"p":"variant:Separator"},{"s":"Separator","t":"Stack","ty":"renders","w":0.5,"p":"variant:Separator"},{"s":"Sidebar","t":"Stack","ty":"renders","w":0.5,"p":"variant:Sidebar"},{"s":"Sidebar","t":"Text","ty":"renders","w":0.5,"p":"variant:Sidebar"},{"s":"Sidebar","t":"Button","ty":"renders","w":0.5,"p":"variant:Sidebar"},{"s":"Sidebar","t":"Link","ty":"renders","w":0.5,"p":"variant:Sidebar"},{"s":"Stack","t":"Box","ty":"renders","w":0.5,"p":"variant:Stack"},{"s":"Stack","t":"Button","ty":"renders","w":0.5,"p":"variant:Stack"},{"s":"Stack","t":"Text","ty":"renders","w":0.5,"p":"variant:Stack"},{"s":"Toast","t":"Stack","ty":"renders","w":0.5,"p":"variant:Toast"},{"s":"ToggleGroup","t":"Stack","ty":"renders","w":0.5,"p":"variant:ToggleGroup"},{"s":"Tooltip","t":"Button","ty":"renders","w":0.5,"p":"variant:Tooltip"},{"s":"Tooltip","t":"Stack","ty":"renders","w":0.5,"p":"variant:Tooltip"},{"s":"Card","t":"Stack","ty":"composes","w":0.5,"p":"block:Activity Feed"},{"s":"Card","t":"Text","ty":"composes","w":0.5,"p":"block:Activity Feed"},{"s":"Card","t":"Avatar","ty":"composes","w":0.5,"p":"block:Activity Feed"},{"s":"Stack","t":"Text","ty":"composes","w":0.5,"p":"block:Activity Feed"},{"s":"Stack","t":"Avatar","ty":"composes","w":0.5,"p":"block:Activity Feed"},{"s":"Text","t":"Avatar","ty":"composes","w":0.5,"p":"block:Activity Feed"},{"s":"AppShell","t":"Header","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"AppShell","t":"Sidebar","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"AppShell","t":"Stack","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"AppShell","t":"Grid","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"AppShell","t":"Card","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"AppShell","t":"Text","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"AppShell","t":"Badge","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"AppShell","t":"Input","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"AppShell","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"AppShell","t":"Avatar","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Header","t":"Sidebar","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Header","t":"Stack","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Header","t":"Grid","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Header","t":"Card","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Header","t":"Text","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Header","t":"Badge","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Header","t":"Input","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Header","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Header","t":"Avatar","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Sidebar","t":"Stack","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Sidebar","t":"Grid","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Sidebar","t":"Card","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Sidebar","t":"Text","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Sidebar","t":"Badge","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Sidebar","t":"Input","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Sidebar","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Sidebar","t":"Avatar","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Stack","t":"Grid","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Stack","t":"Card","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Stack","t":"Badge","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Stack","t":"Input","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Stack","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Grid","t":"Card","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Grid","t":"Text","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Grid","t":"Badge","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Grid","t":"Input","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Grid","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Grid","t":"Avatar","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Card","t":"Badge","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Card","t":"Input","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Card","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Text","t":"Badge","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Text","t":"Input","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Text","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Badge","t":"Input","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Badge","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Badge","t":"Avatar","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Input","t":"ThemeToggle","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Input","t":"Avatar","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"ThemeToggle","t":"Avatar","ty":"composes","w":0.5,"p":"block:Dashboard Layout"},{"s":"Card","t":"Button","ty":"composes","w":0.5,"p":"block:Login Form"},{"s":"Card","t":"Link","ty":"composes","w":0.5,"p":"block:Login Form"},{"s":"Stack","t":"Button","ty":"composes","w":0.5,"p":"block:Login Form"},{"s":"Stack","t":"Link","ty":"composes","w":0.5,"p":"block:Login Form"},{"s":"Input","t":"Button","ty":"composes","w":0.5,"p":"block:Login Form"},{"s":"Input","t":"Text","ty":"composes","w":0.5,"p":"block:Login Form"},{"s":"Input","t":"Link","ty":"composes","w":0.5,"p":"block:Login Form"},{"s":"Button","t":"Text","ty":"composes","w":0.5,"p":"block:Login Form"},{"s":"Button","t":"Link","ty":"composes","w":0.5,"p":"block:Login Form"},{"s":"Text","t":"Link","ty":"composes","w":0.5,"p":"block:Login Form"},{"s":"Card","t":"Icon","ty":"composes","w":0.5,"p":"block:Stats Card"},{"s":"Stack","t":"Icon","ty":"composes","w":0.5,"p":"block:Stats Card"},{"s":"Text","t":"Icon","ty":"composes","w":0.5,"p":"block:Stats Card"},{"s":"Badge","t":"Icon","ty":"composes","w":0.5,"p":"block:Stats Card"},{"s":"Accordion","t":"Tabs","ty":"alternative-to","w":1,"p":"relation","no":"Use Tabs for horizontal switching between related views"},{"s":"Accordion","t":"Dialog","ty":"alternative-to","w":1,"p":"relation","no":"Use Dialog for focused content that interrupts the flow"},{"s":"Alert","t":"Badge","ty":"alternative-to","w":1,"p":"relation","no":"Use Badge for compact, inline status labels"},{"s":"Alert","t":"Toast","ty":"alternative-to","w":1,"p":"relation","no":"Use Toast for transient notifications that auto-dismiss"},{"s":"Alert","t":"Dialog","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Dialog for blocking confirmations"},{"s":"Theme","t":"AppShell","ty":"parent-of","w":1,"p":"relation","no":"AppShell should be wrapped in ThemeProvider"},{"s":"AppShell","t":"Header","ty":"parent-of","w":1,"p":"relation","no":"Header is placed inside AppShell.Header"},{"s":"AppShell","t":"Sidebar","ty":"parent-of","w":1,"p":"relation","no":"Sidebar content goes inside AppShell.Sidebar"},{"s":"Avatar","t":"Image","ty":"alternative-to","w":1,"p":"relation","no":"Use Image for content pictures that are not a person or entity"},{"s":"Avatar","t":"Badge","ty":"sibling-of","w":0.75,"p":"relation","no":"Pair with Badge to show presence or role beside a name"},{"s":"Badge","t":"Alert","ty":"alternative-to","w":1,"p":"relation","no":"Use Alert for prominent, longer messages with actions"},{"s":"Badge","t":"Chip","ty":"sibling-of","w":0.75,"p":"relation","no":"Chip is interactive (clickable/filterable); Badge is display-only"},{"s":"BentoGrid","t":"Grid","ty":"alternative-to","w":1,"p":"relation","no":"Use Grid for uniform layouts; BentoGrid for asymmetric spans with built-in surfaces"},{"s":"BentoGrid","t":"Card","ty":"sibling-of","w":0.75,"p":"relation","no":"BentoGrid.Item has built-in surface styling similar to Card"},{"s":"Box","t":"Stack","ty":"alternative-to","w":1,"p":"relation","no":"Use Stack for directional layouts with gap"},{"s":"Box","t":"Grid","ty":"alternative-to","w":1,"p":"relation","no":"Use Grid for column-based layouts"},{"s":"Box","t":"Card","ty":"alternative-to","w":1,"p":"relation","no":"Use Card for content containers with structure"},{"s":"Breadcrumbs","t":"Tabs","ty":"alternative-to","w":1,"p":"relation","no":"Use Tabs for flat, non-hierarchical navigation"},{"s":"Button","t":"Link","ty":"alternative-to","w":1,"p":"relation","no":"Use Link for navigation without action context"},{"s":"ButtonGroup","t":"Button","ty":"parent-of","w":1,"p":"relation","no":"Use ButtonGroup for related action sets"},{"s":"ButtonGroup","t":"Stack","ty":"alternative-to","w":1,"p":"relation","no":"Use Stack for more general layout needs"},{"s":"Grid","t":"Card","ty":"parent-of","w":1,"p":"relation","no":"Use Grid + Card for responsive card layouts"},{"s":"Card","t":"List","ty":"alternative-to","w":1,"p":"relation","no":"Use List for linear, text-first layouts"},{"s":"Card","t":"Chart","ty":"parent-of","w":1,"p":"relation","no":"Charts are typically placed inside Cards"},{"s":"Chart","t":"Progress","ty":"alternative-to","w":1,"p":"relation","no":"Use Progress for single-value completion"},{"s":"Chart","t":"Table","ty":"sibling-of","w":0.75,"p":"relation","no":"Combine with Table for full data views"},{"s":"Checkbox","t":"Switch","ty":"alternative-to","w":1,"p":"relation","no":"Use Switch for immediate-effect settings"},{"s":"Checkbox","t":"Input","ty":"sibling-of","w":0.75,"p":"relation","no":"Checkbox handles boolean; Input handles text"},{"s":"Chip","t":"Badge","ty":"sibling-of","w":0.75,"p":"relation","no":"Badge is display-only; Chip is interactive"},{"s":"Chip","t":"ToggleGroup","ty":"alternative-to","w":1,"p":"relation","no":"Use ToggleGroup for mutually exclusive options"},{"s":"Chip","t":"Button","ty":"alternative-to","w":1,"p":"relation","no":"Use Button for primary actions, Chip for selection/filtering"},{"s":"Card","t":"CodeBlock","ty":"parent-of","w":1,"p":"relation","no":"Can be wrapped in Card for additional context"},{"s":"CodeBlock","t":"Tabs","ty":"parent-of","w":1,"p":"relation","no":"Use in Tabs for showing code in multiple languages"},{"s":"Collapsible","t":"Accordion","ty":"alternative-to","w":1,"p":"relation","no":"Use Accordion for multiple exclusive collapsible sections"},{"s":"Collapsible","t":"Menu","ty":"alternative-to","w":1,"p":"relation","no":"Use Menu for dropdown navigation with actions"},{"s":"ColorPicker","t":"Input","ty":"sibling-of","w":0.75,"p":"relation","no":"ColorPicker is a specialized input for colors"},{"s":"ColorPicker","t":"RadioGroup","ty":"alternative-to","w":1,"p":"relation","no":"Use RadioGroup for predefined color choices"},{"s":"Field","t":"ColorPicker","ty":"parent-of","w":1,"p":"relation","no":"ColorPicker uses Field internally for structure"},{"s":"Combobox","t":"Select","ty":"alternative-to","w":1,"p":"relation","no":"Use Select when search/filtering is not needed"},{"s":"Combobox","t":"Input","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Input for free-form text entry"},{"s":"Combobox","t":"Listbox","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Listbox for inline option lists"},{"s":"Command","t":"Dialog","ty":"sibling-of","w":0.75,"p":"relation","no":"Compose inside Dialog for modal command palette"},{"s":"Command","t":"Listbox","ty":"sibling-of","w":0.75,"p":"relation","no":"Command uses Listbox-like keyboard navigation internally"},{"s":"Command","t":"Combobox","ty":"alternative-to","w":1,"p":"relation","no":"Use Combobox for form field selection with search"},{"s":"Theme","t":"ComponentDefaults","ty":"parent-of","w":1,"p":"relation","no":"ThemeProvider accepts componentDefaults and mounts this provider"},{"s":"ComponentDefaults","t":"Button","ty":"parent-of","w":1,"p":"relation","no":"Controls resolve their size through useResolvedControlSize"},{"s":"ConversationList","t":"Message","ty":"parent-of","w":1,"p":"relation","no":"ConversationList contains Message components"},{"s":"ConversationList","t":"ThinkingIndicator","ty":"parent-of","w":1,"p":"relation","no":"Show ThinkingIndicator at bottom while awaiting response"},{"s":"ConversationList","t":"Prompt","ty":"sibling-of","w":0.75,"p":"relation","no":"Typically paired with Prompt for input"},{"s":"DataTable","t":"Table","ty":"alternative-to","w":1,"p":"relation","no":"Use Table for simple semantic HTML tables"},{"s":"DataTable","t":"EmptyState","ty":"sibling-of","w":0.75,"p":"relation","no":"Use EmptyState for empty table states"},{"s":"DataTable","t":"Badge","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Badge for status columns"},{"s":"DataTable","t":"Menu","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Menu for filter dropdowns"},{"s":"DataTable","t":"Checkbox","ty":"sibling-of","w":0.75,"p":"relation","no":"Built-in checkbox selection via showCheckbox"},{"s":"DatePicker","t":"Select","ty":"alternative-to","w":1,"p":"relation","no":"Use Select for choosing from a list of options"},{"s":"DatePicker","t":"Input","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Input for free-form text date entry"},{"s":"DatePicker","t":"Popover","ty":"composes","w":0.5,"p":"relation","no":"DatePicker uses Popover for the calendar dropdown"},{"s":"Dialog","t":"Popover","ty":"alternative-to","w":1,"p":"relation","no":"Use Popover for non-modal contextual content"},{"s":"Dialog","t":"Menu","ty":"alternative-to","w":1,"p":"relation","no":"Use Menu for action lists"},{"s":"Dialog","t":"Alert","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Alert for inline notifications"},{"s":"Drawer","t":"Dialog","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Dialog for centered modal overlays"},{"s":"Drawer","t":"Sidebar","ty":"alternative-to","w":1,"p":"relation","no":"Use Sidebar for permanent side navigation"},{"s":"Drawer","t":"Popover","ty":"alternative-to","w":1,"p":"relation","no":"Use Popover for small contextual content"},{"s":"Editor","t":"Prompt","ty":"sibling-of","w":0.75,"p":"relation","no":"Prompt is for AI/chat input; Editor is for long-form content editing"},{"s":"Editor","t":"Textarea","ty":"alternative-to","w":1,"p":"relation","no":"Use Textarea for simple multi-line input without formatting toolbar"},{"s":"Editor","t":"Input","ty":"alternative-to","w":1,"p":"relation","no":"Use Input for single-line text input"},{"s":"EmptyState","t":"Alert","ty":"alternative-to","w":1,"p":"relation","no":"Use Alert for error states with retry"},{"s":"EmptyState","t":"Progress","ty":"alternative-to","w":1,"p":"relation","no":"Use Progress/Spinner for loading states"},{"s":"Field","t":"Input","ty":"alternative-to","w":1,"p":"relation","no":"Use Input for simple fields with built-in label/error"},{"s":"Form","t":"Field","ty":"parent-of","w":1,"p":"relation","no":"Wrap in Form for server-side error distribution"},{"s":"Field","t":"Fieldset","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Fieldset to group related fields"},{"s":"Fieldset","t":"Field","ty":"sibling-of","w":0.75,"p":"relation","no":"Contains Field components"},{"s":"Form","t":"Fieldset","ty":"parent-of","w":1,"p":"relation","no":"Used within a Form"},{"s":"Fieldset","t":"Card","ty":"alternative-to","w":1,"p":"relation","no":"Use Card for non-form visual grouping"},{"s":"Form","t":"Field","ty":"sibling-of","w":0.75,"p":"relation","no":"Contains Field components for error distribution"},{"s":"Form","t":"Fieldset","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Fieldset to group fields within a Form"},{"s":"Form","t":"Button","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Button type=\"submit\" for form submission"},{"s":"Grid","t":"Separator","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Separator between grid sections"},{"s":"Header","t":"Sidebar","ty":"sibling-of","w":0.75,"p":"relation","no":"Header.Trigger toggles Sidebar on mobile"},{"s":"Header","t":"Theme","ty":"parent-of","w":1,"p":"relation","no":"ThemeToggle is commonly placed in Header.Actions"},{"s":"Header","t":"NavigationMenu","ty":"parent-of","w":1,"p":"relation","no":"Use NavigationMenu inside Header for rich dropdown nav with auto mobile drawer"},{"s":"Icon","t":"Button","ty":"parent-of","w":1,"p":"relation","no":"Use inside icon-only buttons with VisuallyHidden label"},{"s":"Icon","t":"VisuallyHidden","ty":"sibling-of","w":0.75,"p":"relation","no":"Pair with VisuallyHidden for accessible icon-only elements"},{"s":"Icon","t":"Badge","ty":"parent-of","w":1,"p":"relation","no":"Can be used as badge icon prop"},{"s":"IconButton","t":"Button","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Button when the action should have a visible text label or broader layout variants"},{"s":"Image","t":"Card","ty":"parent-of","w":1,"p":"relation","no":"Common pattern to use Image at top of product cards"},{"s":"Image","t":"Avatar","ty":"alternative-to","w":1,"p":"relation","no":"Use Avatar for user profile pictures"},{"s":"Input","t":"Textarea","ty":"alternative-to","w":1,"p":"relation","no":"Use Textarea for multi-line text input"},{"s":"Input","t":"Select","ty":"alternative-to","w":1,"p":"relation","no":"Use Select when choosing from predefined options"},{"s":"Field","t":"Input","ty":"parent-of","w":1,"p":"relation","no":"Use Field for advanced form composition and custom controls"},{"s":"Link","t":"Button","ty":"alternative-to","w":1,"p":"relation","no":"Use Button for primary actions, Link for navigation"},{"s":"Text","t":"Link","ty":"parent-of","w":1,"p":"relation","no":"Links often appear within Text components"},{"s":"List","t":"Icon","ty":"parent-of","w":1,"p":"relation","no":"Use Icon as List.Item icon prop"},{"s":"List","t":"Stack","ty":"alternative-to","w":1,"p":"relation","no":"Use Stack for non-semantic vertical lists"},{"s":"Listbox","t":"Input","ty":"sibling-of","w":0.75,"p":"relation","no":"Pair with Input for search/autocomplete patterns"},{"s":"Listbox","t":"Menu","ty":"alternative-to","w":1,"p":"relation","no":"Use Menu when you need a trigger button"},{"s":"Listbox","t":"Select","ty":"alternative-to","w":1,"p":"relation","no":"Use Select for form field selection"},{"s":"Listbox","t":"List","ty":"alternative-to","w":1,"p":"relation","no":"Use List for static, non-interactive lists"},{"s":"Markdown","t":"Text","ty":"alternative-to","w":1,"p":"relation","no":"Use Text for plain, non-markdown text"},{"s":"Message","t":"Markdown","ty":"parent-of","w":1,"p":"relation","no":"Message wraps Markdown when markdown prop is true"},{"s":"Menu","t":"Select","ty":"alternative-to","w":1,"p":"relation","no":"Use Select for form field selection"},{"s":"Menu","t":"Popover","ty":"alternative-to","w":1,"p":"relation","no":"Use Popover for rich non-action content"},{"s":"Message","t":"Avatar","ty":"parent-of","w":1,"p":"relation","no":"Use Avatar component for custom avatar content"},{"s":"Message","t":"ThinkingIndicator","ty":"sibling-of","w":0.75,"p":"relation","no":"Show ThinkingIndicator while awaiting assistant response"},{"s":"NavigationMenu","t":"Header","ty":"sibling-of","w":0.75,"p":"relation","no":"Place NavigationMenu inside Header for site navigation"},{"s":"NavigationMenu","t":"Sidebar","ty":"alternative-to","w":1,"p":"relation","no":"Use Sidebar for persistent side navigation, NavigationMenu for header dropdowns"},{"s":"NavigationMenu","t":"Menu","ty":"alternative-to","w":1,"p":"relation","no":"Use Menu for action menus (role=menu), NavigationMenu for site navigation (disclosure pattern)"},{"s":"NavigationMenu","t":"Breadcrumbs","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Breadcrumbs for hierarchical page trail, NavigationMenu for site-level navigation"},{"s":"Pagination","t":"Table","ty":"sibling-of","w":0.75,"p":"relation","no":"Commonly paired for table pagination"},{"s":"Pagination","t":"Listbox","ty":"alternative-to","w":1,"p":"relation","no":"Use Listbox for small sets of options"},{"s":"Popover","t":"Tooltip","ty":"alternative-to","w":1,"p":"relation","no":"Use Tooltip for brief, non-interactive hints"},{"s":"Popover","t":"Menu","ty":"alternative-to","w":1,"p":"relation","no":"Use Menu for action lists"},{"s":"Popover","t":"Dialog","ty":"alternative-to","w":1,"p":"relation","no":"Use Dialog for blocking interactions"},{"s":"Progress","t":"Badge","ty":"alternative-to","w":1,"p":"relation","no":"Use Badge for status without percentage"},{"s":"Progress","t":"Alert","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Alert for completion messages"},{"s":"Prompt","t":"Input","ty":"alternative-to","w":1,"p":"relation","no":"Use Input for simple single-line text input"},{"s":"Prompt","t":"Textarea","ty":"alternative-to","w":1,"p":"relation","no":"Use Textarea for multi-line without toolbar"},{"s":"RadioGroup","t":"Checkbox","ty":"alternative-to","w":1,"p":"relation","no":"Use Checkbox for multiple selections"},{"s":"RadioGroup","t":"Select","ty":"alternative-to","w":1,"p":"relation","no":"Use Select for many options or limited space"},{"s":"RadioGroup","t":"Switch","ty":"alternative-to","w":1,"p":"relation","no":"Use Switch for binary on/off choices"},{"s":"Select","t":"Menu","ty":"alternative-to","w":1,"p":"relation","no":"Use Menu for action-based dropdowns"},{"s":"Select","t":"Input","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Input for free-form text entry"},{"s":"Select","t":"Checkbox","ty":"alternative-to","w":1,"p":"relation","no":"Use Checkbox group for multiple selections"},{"s":"Separator","t":"Card","ty":"sibling-of","w":0.75,"p":"relation","no":"Cards provide stronger visual grouping"},{"s":"Sidebar","t":"Tabs","ty":"alternative-to","w":1,"p":"relation","no":"Use Tabs for in-page section navigation"},{"s":"Sidebar","t":"Menu","ty":"composes","w":0.5,"p":"relation","no":"Use Menu for contextual actions within sidebar"},{"s":"Skeleton","t":"Progress","ty":"alternative-to","w":1,"p":"relation","no":"Use Progress for determinate loading"},{"s":"Slider","t":"Input","ty":"alternative-to","w":1,"p":"relation","no":"Use Input for precise numeric entry"},{"s":"Slider","t":"Progress","ty":"sibling-of","w":0.75,"p":"relation","no":"Similar visual, but Progress is read-only"},{"s":"Stack","t":"Grid","ty":"alternative-to","w":1,"p":"relation","no":"Use Grid for complex 2D layouts"},{"s":"Stack","t":"ButtonGroup","ty":"sibling-of","w":0.75,"p":"relation","no":"ButtonGroup is specialized for buttons"},{"s":"Stack","t":"Box","ty":"sibling-of","w":0.75,"p":"relation","no":"Box for single-element styling"},{"s":"Switch","t":"Input","ty":"sibling-of","w":0.75,"p":"relation","no":"Input handles text/number entry; Switch handles boolean state"},{"s":"Switch","t":"Checkbox","ty":"alternative-to","w":1,"p":"relation","no":"Use Checkbox when change requires form submission"},{"s":"Table","t":"DataTable","ty":"alternative-to","w":1,"p":"relation","no":"Use DataTable for sorting, selection, and TanStack features"},{"s":"TableOfContents","t":"Tabs","ty":"alternative-to","w":1,"p":"relation","no":"Tabs for switching views, TOC for scrolling to sections"},{"s":"Tabs","t":"Select","ty":"alternative-to","w":1,"p":"relation","no":"Use Select for many options in compact space"},{"s":"Tabs","t":"Menu","ty":"alternative-to","w":1,"p":"relation","no":"Use Menu for action-based navigation"},{"s":"Text","t":"Link","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Link for clickable text"},{"s":"Text","t":"CodeBlock","ty":"alternative-to","w":1,"p":"relation","no":"Use CodeBlock for code display"},{"s":"Text","t":"Badge","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Badge for labels/tags"},{"s":"Textarea","t":"Input","ty":"alternative-to","w":1,"p":"relation","no":"Use Input for single-line text"},{"s":"Theme","t":"AppShell","ty":"sibling-of","w":0.75,"p":"relation","no":"ThemeProvider typically wraps AppShell"},{"s":"ThinkingIndicator","t":"Message","ty":"sibling-of","w":0.75,"p":"relation","no":"Show ThinkingIndicator while waiting for assistant message"},{"s":"ThinkingIndicator","t":"Progress","ty":"alternative-to","w":1,"p":"relation","no":"Use Progress for determinate progress"},{"s":"Toast","t":"Alert","ty":"alternative-to","w":1,"p":"relation","no":"Use Alert for persistent inline messages"},{"s":"Toast","t":"Dialog","ty":"alternative-to","w":1,"p":"relation","no":"Use Dialog for messages requiring user action"},{"s":"ToggleGroup","t":"RadioGroup","ty":"alternative-to","w":1,"p":"relation","no":"RadioGroup for form-style single selection"},{"s":"ToggleGroup","t":"Tabs","ty":"alternative-to","w":1,"p":"relation","no":"Tabs for content panel switching"},{"s":"ToggleGroup","t":"Switch","ty":"sibling-of","w":0.75,"p":"relation","no":"Switch for single on/off control"},{"s":"Tooltip","t":"Popover","ty":"alternative-to","w":1,"p":"relation","no":"Use Popover for interactive or longer content"},{"s":"Tooltip","t":"Alert","ty":"alternative-to","w":1,"p":"relation","no":"Use Alert for critical information that must be visible"},{"s":"VisuallyHidden","t":"Button","ty":"parent-of","w":1,"p":"relation","no":"Use inside icon-only buttons for accessible labels"},{"s":"VisuallyHidden","t":"Icon","ty":"sibling-of","w":0.75,"p":"relation","no":"Pair with icons to provide text alternatives"}],"health":{"orphans":[],"hubs":[{"name":"Stack","degree":44},{"name":"Input","degree":37},{"name":"Button","degree":33},{"name":"Sidebar","degree":29},{"name":"Text","degree":26},{"name":"Card","degree":25},{"name":"Badge","degree":23},{"name":"Header","degree":23},{"name":"AppShell","degree":22},{"name":"Grid","degree":21}],"compositionCoverage":19,"connectedComponents":[["Accordion","Alert","AppShell","Avatar","Badge","BentoGrid","Box","Breadcrumbs","Button","ButtonGroup","Card","Chart","Checkbox","Chip","CodeBlock","Collapsible","ColorPicker","Combobox","Command","ComponentDefaults","ConversationList","DataTable","DatePicker","Dialog","Drawer","Editor","EmptyState","Field","Fieldset","Form","Grid","Header","Icon","IconButton","Image","Input","Link","List","Listbox","Loading","Main","Markdown","Menu","Message","NavigationMenu","Pagination","Popover","Progress","Prompt","RadioGroup","ScrollArea","Select","Separator","Sidebar","Skeleton","Slider","Stack","Switch","Table","TableOfContents","Tabs","Text","Textarea","Theme","ThemeToggle","ThinkingIndicator","Toast","ToggleGroup","Tooltip","VisuallyHidden"]],"averageDegree":9.71,"nodeCount":69,"edgeCount":335}},"performanceSummary":{"preset":"standard","budget":15360,"total":69,"overBudget":3,"tiers":{"lightweight":58,"moderate":8,"heavy":3}}}