@fragments-sdk/ui 0.8.4 → 0.8.6

package/fragments.json

@@ -1 +1 @@
-{"version":"1.0.0","generatedAt":"2026-02-13T15:18:13.000Z","packageName":"@fragments-sdk/ui","fragments":{"Accordion":{"filePath":"src/components/Accordion/Accordion.fragment.tsx","meta":{"name":"Accordion","description":"Vertically stacked, collapsible content sections. Use for organizing related content that can be progressively disclosed.","category":"layout","status":"stable","tags":["accordion","collapse","expand","disclosure","faq"],"since":"0.2.0"},"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","Arrow keys navigate between accordion headers","Uses proper ARIA expanded/controls attributes","Focus is visible on accordion triggers"]},"props":{"children":{"type":"node","description":"Accordion items (use Accordion.Item with Accordion.Trigger and Accordion.Content)","required":true},"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)","required":false},"defaultValue":{"type":"union","description":"Initially open item(s) for uncontrolled usage","required":false},"onValueChange":{"type":"function","description":"Called when open items change","required":false},"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 @fragments-sdk/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>"}],"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>"]},"contract":{"propsSummary":["type: single|multiple - controls how many items can be open","value: string|string[] - controlled open items","defaultValue: string|string[] - initial open items","collapsible: boolean - allow all closed in single mode"],"a11yRules":["A11Y_DISCLOSURE_KEYBOARD","A11Y_FOCUS_VISIBLE"]}},"Alert":{"filePath":"src/components/Alert/Alert.fragment.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","status":"stable","tags":["notification","message","feedback","banner","toast"],"since":"0.1.0"},"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"],"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>"}],"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>"]},"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"],"a11yRules":["A11Y_ALERT_ROLE","A11Y_ALERT_DISMISS","A11Y_ALERT_CONTRAST","A11Y_TARGET_SIZE_MIN"]}},"AppShell":{"filePath":"src/components/AppShell/AppShell.fragment.tsx","meta":{"name":"AppShell","description":"Full layout wrapper integrating sidebar, header, main content, and optional aside panel. Supports three layout modes: default (header on top), sidebar (sidebar full height), and sidebar-floating (sidebar + rounded main content).","category":"layout","status":"stable","tags":["layout","shell","scaffold","dashboard","app-layout"],"since":"0.5.0"},"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)","Use layout=\"sidebar-floating\" for a modern look with rounded, elevated main content","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":"Layout mode for header/sidebar positioning","default":"default","required":false,"values":["default","sidebar","sidebar-floating"]}},"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 height=\"400px\" 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 height=\"400px\" 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 height=\"400px\" 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 height=\"400px\" 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":"Sidebar Floating Layout","description":"Modern layout with rounded main content area and visual separation from sidebar. Main content floats with a distinct 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=\"400px\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"sidebar-floating\">\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\">\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 Floating Layout</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>"}],"ai":{"subComponents":["Header","Sidebar","Main","Aside"],"compositionPattern":"compound","commonPatterns":["<AppShell>\n  <AppShell.Header>...</AppShell.Header>\n  <AppShell.Sidebar>...</AppShell.Sidebar>\n  <AppShell.Main>...</AppShell.Main>\n</AppShell>"],"requiredChildren":["Header","Sidebar","Main"]}},"Avatar":{"filePath":"src/components/Avatar/Avatar.fragment.tsx","meta":{"name":"Avatar","description":"Visual representation of a user or entity","category":"display","status":"stable","tags":["user","profile","image","identity"]},"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"],"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"]},"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}},"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":"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)","shape: circle|square (default: circle)"],"a11yRules":["A11Y_IMG_ALT"]},"ai":{"subComponents":["Group"],"compositionPattern":"compound"}},"Badge":{"filePath":"src/components/Badge/Badge.fragment.tsx","meta":{"name":"Badge","description":"Compact label for status, counts, or categorization. Draws attention to metadata without dominating the layout.","category":"display","status":"stable","tags":["status","label","tag","count","chip"],"since":"0.1.0"},"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","Use onRemove for user-created tags only, not system-generated badges"],"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","default":"default","required":false,"values":["default","success","warning","error","info","outline"]},"size":{"type":"enum","description":"Badge size","default":"md","required":false,"values":["sm","md"]},"dot":{"type":"boolean","description":"Show a colored dot indicator before the label","default":false,"required":false},"icon":{"type":"node","description":"Optional icon element before the text","required":false},"onRemove":{"type":"function","description":"Makes the badge removable. Called when X is clicked.","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":"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":"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 - visual style","size: sm|md - badge size","dot: boolean - show status dot indicator","onRemove: () => void - makes badge removable"],"a11yRules":["A11Y_BADGE_CONTRAST","A11Y_BADGE_DISMISS","A11Y_TARGET_SIZE_MIN"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Box":{"filePath":"src/components/Box/Box.fragment.tsx","meta":{"name":"Box","description":"Primitive layout component for applying spacing, backgrounds, and borders. A flexible container for building custom layouts.","category":"layout","status":"stable","tags":["layout","container","spacing","primitive","box"],"since":"0.1.0"},"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"],"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":["auto","hidden","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"],"a11yRules":["A11Y_SEMANTIC_HTML"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Breadcrumbs":{"filePath":"src/components/Breadcrumbs/Breadcrumbs.fragment.tsx","meta":{"name":"Breadcrumbs","description":"Breadcrumb navigation showing the current page location within a hierarchy. Helps users navigate back through parent pages.","category":"navigation","status":"stable","tags":["breadcrumbs","navigation","hierarchy","wayfinding"],"since":"0.7.0"},"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"],"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}},"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>"}],"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>"]},"contract":{"propsSummary":["separator: ReactNode - custom separator (default \"/\")","maxItems: number - collapse middle items with ellipsis","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"]}},"Button":{"filePath":"src/components/Button/Button.fragment.tsx","meta":{"name":"Button","description":"Interactive element for user actions and form submissions","category":"forms","status":"stable","tags":["action","button","form","interactive"]},"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"],"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","default":"primary","required":false,"values":["primary","secondary","ghost","danger"],"constraints":["Only one primary button per context"]},"size":{"type":"enum","description":"Button size","default":"md","required":false,"values":["sm","md","lg"]},"icon":{"type":"boolean","description":"Render as icon-only button (square aspect ratio)","default":"false","required":false},"fullWidth":{"type":"boolean","description":"Make button full width of container","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":"Danger","description":"Destructive action requiring attention","code":"<Button variant=\"danger\">Delete Item</Button>"},{"name":"Sizes","description":"Available size options","code":"<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>\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>"}],"contract":{"propsSummary":["variant: primary|secondary|ghost|danger (default: primary)","size: sm|md|lg (default: md)","disabled: boolean - disables interaction","type: button|submit|reset (default: button)","onClick: () => void - action handler"],"a11yRules":["A11Y_BTN_LABEL","A11Y_BTN_FOCUS"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"ButtonGroup":{"filePath":"src/components/ButtonGroup/ButtonGroup.fragment.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","status":"stable","tags":["button","group","toolbar","actions","layout"],"since":"0.2.0"},"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"],"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"]},"className":{"type":"string","description":"","required":false}},"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\">\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"],"a11yRules":["A11Y_GROUP_LABEL"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Card":{"filePath":"src/components/Card/Card.fragment.tsx","meta":{"name":"Card","description":"Container for grouping related content","category":"layout","status":"stable","tags":["container","layout","surface"]},"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","Interactive cards should have clear hover states"],"accessibility":["Interactive cards should use button or link semantics","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","elevated"],"constraints":["Use \"elevated\" sparingly to maintain visual hierarchy"]},"padding":{"type":"enum","description":"Internal padding size","default":"md","required":false,"values":["none","sm","md","lg"]},"onClick":{"type":"function","description":"Click handler - makes card interactive","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":"Default","description":"Standard card with subtle shadow","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":"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":"Interactive","description":"Clickable card","code":"<Card 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":"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>"}],"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: default|outlined|elevated (default: default)","padding: none|sm|md|lg (default: md)","onClick: () => void - makes card interactive","Sub-components: Card.Header, Card.Title, Card.Description, Card.Body, Card.Footer"],"a11yRules":["A11Y_CARD_HEADING","A11Y_CARD_INTERACTIVE"]}},"Chart":{"filePath":"src/components/Chart/Chart.fragment.tsx","meta":{"name":"Chart","description":"Composable chart wrapper for recharts with theme-aware tooltips, legends, and color integration.","category":"display","status":"stable","tags":["chart","graph","data-visualization","recharts"],"since":"0.3.0"},"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","Use FUI CSS variables for colors so charts adapt to theme changes","Use ChartTooltip and ChartLegend for consistent themed overlays"],"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 and colors","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}},"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"],"a11yRules":["A11Y_CHART_LABEL"]},"ai":{"subComponents":["Root","Tooltip","TooltipContent","Legend","LegendContent"],"compositionPattern":"compound"}},"Checkbox":{"filePath":"src/components/Checkbox/Checkbox.fragment.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","status":"stable","tags":["checkbox","form","boolean","selection","input"],"since":"0.1.0"},"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 description 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},"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"]},"label":{"type":"string","description":"Label text","required":false},"description":{"type":"string","description":"Description text below the label","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},"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}},"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 Description","description":"Checkbox with helper text","code":"<StatefulCheckbox\n  label=\"Email notifications\"\n  description=\"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>"}],"contract":{"propsSummary":["checked: boolean - controlled checked state","onCheckedChange: (checked) => void - change handler","indeterminate: boolean - partial selection state","label: string - checkbox label","description: string - helper text"],"a11yRules":["A11Y_CHECKBOX_LABEL","A11Y_CHECKBOX_FOCUS","A11Y_TARGET_SIZE_MIN"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Chip":{"filePath":"src/components/Chip/Chip.fragment.tsx","meta":{"name":"Chip","description":"Interactive pill-shaped element for filtering, selecting, and tagging. Supports single and multi-select via Chip.Group.","category":"forms","status":"stable","tags":["chip","tag","filter","selection","multi-select","action"],"since":"0.7.0"},"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","Use onRemove only when users should be able to dismiss the chip","Pair avatar chips with user-related selections (assignees, reviewers)"],"accessibility":["Chips use role=\"option\" with aria-selected for selection state","Chip.Group uses role=\"listbox\" with aria-multiselectable","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","soft"]},"size":{"type":"enum","description":"Chip size","default":"md","required":false,"values":["sm","md"]},"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}},"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":"Selected","description":"Chip in selected state across variants","code":"<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>\n  <Chip selected>Filled</Chip>\n  <Chip variant=\"outlined\" selected>Outlined</Chip>\n  <Chip variant=\"soft\" selected>Soft</Chip>\n</div>"},{"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":"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":"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|soft - visual style","size: sm|md - chip size","selected: boolean - selection state","icon/avatar: ReactNode - leading visual","onRemove: () => void - makes chip removable","value: string - identifier for Chip.Group"],"a11yRules":["A11Y_CHIP_SELECTION","A11Y_CHIP_DISMISS"]},"ai":{"subComponents":["Group"],"compositionPattern":"compound"}},"CodeBlock":{"filePath":"src/components/CodeBlock/CodeBlock.fragment.tsx","meta":{"name":"CodeBlock","description":"Syntax-highlighted code display with copy functionality, theming, diff view, and collapsible sections","category":"display","status":"stable","tags":["code","syntax","highlighting","documentation","developer","diff"]},"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"],"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","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":{"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"]}},"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 '@fragments-sdk/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 '@fragments-sdk/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 @fragments-sdk/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    \"@fragments-sdk/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)"],"a11yRules":["A11Y_CODE_SEMANTIC","A11Y_BTN_LABEL"]},"ai":{"subComponents":["Tabbed"],"compositionPattern":"compound"}},"Collapsible":{"filePath":"src/components/Collapsible/Collapsible.fragment.tsx","meta":{"name":"Collapsible","description":"An interactive component that expands/collapses to show or hide content","category":"layout","status":"stable","tags":["collapsible","expandable","accordion","disclosure","toggle"]},"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},"className":{"type":"string","description":"Additional class name","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":{"subComponents":["Root","Trigger","Content"],"compositionPattern":"compound","commonPatterns":["<Collapsible>\n  <Collapsible.Trigger>...</Collapsible.Trigger>\n  <Collapsible.Content>...</Collapsible.Content>\n</Collapsible>"],"requiredChildren":["Trigger","Content"]}},"ColorPicker":{"filePath":"src/components/ColorPicker/ColorPicker.fragment.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","status":"stable","tags":["color","picker","input","hex","swatch","theme"],"since":"0.2.0"},"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 description 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},"description":{"type":"string","description":"Helper text below the picker","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"]},"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 Description","description":"Color picker with helper text","code":"<ColorPicker\n  label=\"Primary Color\"\n  defaultValue=\"#10b981\"\n  description=\"This color will be used for buttons and links\"\n/>"},{"name":"Controlled","description":"Controlled color picker that logs changes","code":"{\n  const [color, setColor] = React.useState('#ef4444');\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n      <ColorPicker\n        label=\"Accent Color\"\n        value={color}\n        onChange={setColor}\n      />\n      <div style={{ fontSize: '14px', color: 'var(--fui-text-secondary)' }}>\n        Selected: {color}\n      </div>\n    </div>\n  );\n}"},{"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</div>"},{"name":"Disabled","description":"Disabled color picker","code":"<ColorPicker\n  label=\"Locked Color\"\n  defaultValue=\"#64748b\"\n  description=\"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","description: string - helper text","disabled: boolean - disable interaction","size: sm|md - size variant","showInput: boolean - show hex input field"],"a11yRules":["A11Y_LABEL_REQUIRED","A11Y_FOCUS_VISIBLE","A11Y_TARGET_SIZE_MIN"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Combobox":{"filePath":"src/components/Combobox/Combobox.fragment.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","status":"stable","tags":["combobox","autocomplete","search","select","typeahead","form","multiselect"],"since":"0.1.0"},"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","Provide an empty state message when no results match","Group related options with Combobox.Group for large lists","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":{"children":{"type":"node","description":"Combobox input and content","required":true},"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":"function","description":"Called when selection changes","required":false},"multiple":{"type":"boolean","description":"Allow multiple selections with chips","default":false,"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},"disabled":{"type":"boolean","description":"Disable the combobox","default":"false","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}},"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 Groups","description":"Options organized into groups","code":"<StatefulCombobox placeholder=\"Search countries...\">\n  <Combobox.Input />\n  <Combobox.Content>\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.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>"}],"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>"]},"contract":{"propsSummary":["value: string | string[] - controlled selected value","onValueChange: (value) => void - selection handler","multiple: boolean - enable multi-select with chips","placeholder: string - input placeholder text","disabled: boolean - disable combobox","autoHighlight: boolean - auto-highlight first match","maxVisibleItems: number - max visible options before scrolling (default 4)"],"a11yRules":["A11Y_COMBOBOX_KEYBOARD","A11Y_COMBOBOX_LABEL","A11Y_TARGET_SIZE_MIN"]}},"ConversationList":{"filePath":"src/components/ConversationList/ConversationList.fragment.tsx","meta":{"name":"ConversationList","description":"Scrollable message container with auto-scroll and history loading","category":"ai","status":"stable","tags":["conversation","chat","messages","scroll","ai","list"]},"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)","Implement onScrollTop for loading older messages","Provide an emptyState for new conversations","Use DateSeparator between messages from different days"],"accessibility":["Uses proper ARIA roles for separators","Typing indicator has aria-label","Smooth scroll respects reduced motion preferences","Keyboard navigation works within scrollable container"]},"props":{"children":{"type":"node","description":"Message components","required":true},"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)","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":"<div style={{ height: '300px', border: '1px solid #e4e4e7', borderRadius: '8px' }}>\n  <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>\n</div>"},{"name":"With Date Separators","description":"Messages grouped by date","code":"<div style={{ height: '300px', border: '1px solid #e4e4e7', borderRadius: '8px' }}>\n  <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>\n</div>"},{"name":"With Typing Indicator","description":"Shows assistant is typing","code":"<div style={{ height: '300px', border: '1px solid #e4e4e7', borderRadius: '8px' }}>\n  <ConversationList>\n    <Message role=\"user\">\n      <Message.Content>What is TypeScript?</Message.Content>\n    </Message>\n    <ConversationList.TypingIndicator name=\"Assistant\" />\n  </ConversationList>\n</div>"},{"name":"Loading History","description":"Loading older messages","code":"<div style={{ height: '300px', border: '1px solid #e4e4e7', borderRadius: '8px' }}>\n  <ConversationList loadingHistory>\n    <Message role=\"user\">\n      <Message.Content>This is the latest message</Message.Content>\n    </Message>\n  </ConversationList>\n</div>"},{"name":"Empty State","description":"No messages yet","code":"<div style={{ height: '300px', border: '1px solid #e4e4e7', borderRadius: '8px' }}>\n  <ConversationList\n    emptyState={\n      <div style={{ textAlign: 'center', color: '#71717a', padding: '2rem' }}>\n        <p>No messages yet</p>\n        <p style={{ fontSize: '12px' }}>Start a conversation!</p>\n      </div>\n    }\n  >\n    {/* No messages */}\n  </ConversationList>\n</div>"}],"contract":{"propsSummary":["children: ReactNode - Message components","autoScroll: boolean | \"smart\" - scroll behavior (default: \"smart\")","onScrollTop: () => void - callback for loading history","loadingHistory: boolean - show history loading spinner","emptyState: ReactNode - empty conversation content"],"a11yRules":["A11Y_ARIA_ROLES","A11Y_MOTION_PREFERENCE"]},"ai":{"subComponents":["DateSeparator","TypingIndicator"],"compositionPattern":"compound"}},"DatePicker":{"filePath":"src/components/DatePicker/DatePicker.fragment.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","status":"stable","tags":["date","picker","calendar","range","form","input"],"since":"0.8.0"},"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","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"],"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},"mode":{"type":"enum","description":"Selection mode","default":"single","required":false,"values":["single","range"]},"selected":{"type":"object","description":"Controlled date (single mode)","required":false},"selectedRange":{"type":"object","description":"Controlled range (range mode)","required":false},"onSelect":{"type":"function","description":"Called when a single date is selected","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},"disabledDates":{"type":"union","description":"Dates to disable (react-day-picker 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}},"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":"uses","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":"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":"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>"}],"ai":{"compositionPattern":"compound","subComponents":["Trigger","Content","Calendar","Preset"],"requiredChildren":["Trigger","Content"],"commonPatterns":["<DatePicker selected={date} onSelect={setDate}><DatePicker.Trigger placeholder=\"Pick a date\" /><DatePicker.Content><DatePicker.Calendar /></DatePicker.Content></DatePicker>"]},"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)","disabled: boolean - disable picker","disabledDates: Matcher - dates to disable"],"a11yRules":["A11Y_DATEPICKER_KEYBOARD","A11Y_DATEPICKER_LABEL"]}},"Dialog":{"filePath":"src/components/Dialog/Dialog.fragment.tsx","meta":{"name":"Dialog","description":"Modal overlay for focused user interactions. Use for confirmations, forms, or content requiring full attention.","category":"feedback","status":"stable","tags":["modal","dialog","overlay","popup","confirmation"],"since":"0.1.0"},"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"],"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>"}],"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>"]},"contract":{"propsSummary":["open: boolean - controlled open state","onOpenChange: (open) => void - open state handler","modal: boolean - blocks page interaction (default: true)","Dialog.Content size: sm|md|lg|xl|full - dialog width"],"a11yRules":["A11Y_DIALOG_FOCUS","A11Y_DIALOG_ESCAPE","A11Y_DIALOG_LABEL"]}},"EmptyState":{"filePath":"src/components/EmptyState/EmptyState.fragment.tsx","meta":{"name":"EmptyState","description":"Placeholder for empty content areas. Provides context, guidance, and actions when no data is available.","category":"feedback","status":"stable","tags":["empty","placeholder","no-data","zero-state","blank-slate"],"since":"0.1.0"},"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"],"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>"}],"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>"]},"contract":{"propsSummary":["size: sm|md|lg (default: md)","Sub-components: EmptyState.Icon, EmptyState.Title, EmptyState.Description, EmptyState.Actions"],"a11yRules":["A11Y_EMPTY_STATE_CONTENT"]}},"Field":{"filePath":"src/components/Field/Field.fragment.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","status":"stable","tags":["form","field","validation","label","error","input","accessible"],"since":"0.4.0"},"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}},"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":{"subComponents":["Label","Control","Description","Error","Validity"],"compositionPattern":"compound","commonPatterns":["<Field>\n  <Field.Label>...</Field.Label>\n  <Field.Control>...</Field.Control>\n  <Field.Description>...</Field.Description>\n</Field>"],"requiredChildren":["Label","Control"]}},"Fieldset":{"filePath":"src/components/Fieldset/Fieldset.fragment.tsx","meta":{"name":"Fieldset","description":"Groups related form fields with an accessible legend. Use to organize forms into logical sections.","category":"forms","status":"stable","tags":["form","fieldset","group","legend","accessible"],"since":"0.4.0"},"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"],"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":"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"],"a11yRules":["A11Y_FIELDSET_LEGEND"]},"ai":{"subComponents":["Legend"],"compositionPattern":"compound","commonPatterns":["<Fieldset>\n  <Fieldset.Legend>...</Fieldset.Legend>\n</Fieldset>"],"requiredChildren":["Legend"]}},"Form":{"filePath":"src/components/Form/Form.fragment.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","status":"stable","tags":["form","validation","errors","submit","server"],"since":"0.4.0"},"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 onFormSubmit for form submission handling","Field components with matching name prop display errors automatically","Use Grid inside Form or Fieldset for multi-column layouts"],"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},"onFormSubmit":{"type":"function","description":"Form submission handler","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 onFormSubmit={(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.Item colSpan=\"full\">\n      <Button type=\"submit\" variant=\"primary\">Create Account</Button>\n    </Grid.Item>\n  </Grid>\n</Form>"},{"name":"Profile settings","description":"Multi-section form with Fieldsets, switches, and radio group","code":"<Form onFormSubmit={(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  <Button type=\"submit\" variant=\"primary\">Save Changes</Button>\n</Form>"},{"name":"Contact form","description":"Contact form with select, textarea, and checkbox","code":"<Form onFormSubmit={(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.Item colSpan=\"full\">\n      <Button type=\"submit\" variant=\"primary\">Send Message</Button>\n    </Grid.Item>\n  </Grid>\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.Item colSpan=\"full\">\n      <Button type=\"submit\" variant=\"primary\">Submit</Button>\n    </Grid.Item>\n  </Grid>\n</Form>"}],"contract":{"propsSummary":["errors: Record<string, string | string[]> - server errors by field name","onFormSubmit: (event) => void - submission handler","onClearErrors: (name) => void - clear errors callback"],"a11yRules":["A11Y_FORM_LABEL"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Grid":{"filePath":"src/components/Grid/Grid.fragment.tsx","meta":{"name":"Grid","description":"Responsive grid layout for arranging items in columns with consistent spacing","category":"layout","status":"stable","tags":["grid","layout","columns","responsive"]},"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"],"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":"enum","description":"Gap between grid items, mapped to spacing tokens","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":"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 (default: md)","alignItems: start|center|end|stretch — vertical alignment","justifyItems: start|center|end|stretch — horizontal alignment","padding: none|sm|md|lg (default: none)"]}},"Header":{"filePath":"src/components/Header/Header.fragment.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","status":"stable","tags":["header","navigation","navbar","brand","layout","dropdown"],"since":"0.5.0"},"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.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"],"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"]}},"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"}],"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":"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>"}],"ai":{"compositionPattern":"compound","subComponents":["SkipLink","Trigger","Brand","Nav","NavItem","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><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>"]}},"Icon":{"filePath":"src/components/Icon/Icon.fragment.tsx","meta":{"name":"Icon","description":"Wrapper for Phosphor icons with consistent sizing and semantic colors. Provides standardized icon rendering across the design system.","category":"display","status":"stable","tags":["icon","phosphor","visual","symbol","graphic"],"since":"0.1.0"},"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 to surrounding text weight for visual consistency","Use consistent sizes within the same context"],"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":{"icon":{"type":"union","description":"Phosphor icon component to render","required":true},"size":{"type":"enum","description":"Icon size","default":"md","required":false,"values":["xs","sm","md","lg","xl"]},"weight":{"type":"enum","description":"Icon stroke weight/style","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"]}},"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>"}],"contract":{"propsSummary":["icon: PhosphorIcon - icon component (required)","size: xs|sm|md|lg|xl - icon size","weight: thin|light|regular|bold|fill|duotone - stroke style","variant: default|primary|secondary|tertiary|accent|success|warning|error - color"],"a11yRules":["A11Y_ICON_LABEL","A11Y_COLOR_CONTRAST"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Image":{"filePath":"src/components/Image/Image.fragment.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","status":"stable","tags":["image","media","photo","picture","visual"],"since":"0.1.0"},"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"],"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}},"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"],"a11yRules":["A11Y_IMG_ALT","A11Y_IMG_DECORATIVE"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Input":{"filePath":"src/components/Input/Input.fragment.tsx","meta":{"name":"Input","description":"Text input field for single-line user data entry","category":"forms","status":"stable","tags":["form","input","text"]},"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"],"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":"","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},"helperText":{"type":"string","description":"Helper or error message below input","required":false},"shortcut":{"type":"string","description":"Keyboard shortcut hint displayed inside the input","required":false},"onChange":{"type":"function","description":"Called with new value on change","required":false},"onBlur":{"type":"function","description":"","required":false},"onFocus":{"type":"function","description":"","required":false},"onKeyDown":{"type":"function","description":"","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},"name":{"type":"string","description":"","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 />"}],"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","error: boolean - shows error styling","helperText: string - helper/error message"],"a11yRules":["A11Y_INPUT_LABEL","A11Y_INPUT_ERROR","A11Y_INPUT_REQUIRED"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Link":{"filePath":"src/components/Link/Link.fragment.tsx","meta":{"name":"Link","description":"Styled anchor element for navigation. Supports internal and external links with consistent visual treatment.","category":"navigation","status":"stable","tags":["link","anchor","navigation","href","url"],"since":"0.1.0"},"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 (use Card with onClick)"],"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"],"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},"className":{"type":"string","description":"Additional class name","required":false},"style":{"type":"object","description":"Inline styles","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>"}],"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"],"a11yRules":["A11Y_LINK_TEXT","A11Y_LINK_FOCUS"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"List":{"filePath":"src/components/List/List.fragment.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","status":"stable","tags":["list","items","bullet","ordered","unordered"],"since":"0.1.0"},"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"]}},"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":{"subComponents":["Item"],"compositionPattern":"compound","commonPatterns":["<List>\n  <List.Item>...</List.Item>\n</List>"],"requiredChildren":["Item"]}},"Listbox":{"filePath":"src/components/Listbox/Listbox.fragment.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","status":"stable","tags":["listbox","search","autocomplete","combobox","command","dropdown"],"since":"0.3.0"},"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","Implement keyboard navigation (arrow keys, enter, escape) in parent","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}},"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>"}],"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>"]},"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"]}},"Loading":{"filePath":"src/components/Loading/Loading.fragment.tsx","meta":{"name":"Loading","description":"Versatile loading indicator with multiple variants for showing progress or waiting states","category":"feedback","status":"stable","tags":["loading","spinner","progress","feedback","indicator","async"]},"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' }}>\n  <Loading.Screen size=\"lg\" label=\"Loading application...\" showLabel />\n</div>"}],"ai":{"subComponents":["Inline","Screen"],"compositionPattern":"compound"}},"Markdown":{"filePath":"src/components/Markdown/Markdown.fragment.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","status":"stable","tags":["markdown","prose","content","text","ai","chat"],"since":"0.7.0"},"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","Falls back to plain text paragraphs if react-markdown is not installed"],"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 })","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","className: string - Additional CSS class"],"a11yRules":["A11Y_SEMANTIC_HTML"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Menu":{"filePath":"src/components/Menu/Menu.fragment.tsx","meta":{"name":"Menu","description":"Dropdown menu for actions and commands. Use for contextual actions, overflow menus, or grouped commands.","category":"feedback","status":"stable","tags":["menu","dropdown","actions","context-menu","commands"],"since":"0.1.0"},"usage":{"when":["Overflow actions that dont fit in the toolbar","Context menus (right-click)","User account menus","Grouped actions with separators"],"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"],"accessibility":["Full keyboard navigation with arrow keys","Type-ahead search for items","Focus returns to trigger on close","Proper ARIA menu roles"]},"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 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>"}],"ai":{"compositionPattern":"compound","subComponents":["Trigger","Content","Item","CheckboxItem","RadioGroup","RadioItem","Group","GroupLabel","Separator"],"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>"]},"contract":{"propsSummary":["open: boolean - controlled open state","onOpenChange: (open) => void - state handler","Menu.Item danger: boolean - destructive styling","Menu.Item shortcut: string - keyboard shortcut text"],"a11yRules":["A11Y_MENU_KEYBOARD","A11Y_MENU_ROLE"]}},"Message":{"filePath":"src/components/Message/Message.fragment.tsx","meta":{"name":"Message","description":"Individual chat message display with role-based styling","category":"ai","status":"stable","tags":["message","chat","ai","conversation","bubble"]},"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)","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":"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"],"a11yRules":["A11Y_COLOR_CONTRAST","A11Y_MOTION_PREFERENCE"]},"ai":{"subComponents":["Content","Actions","Timestamp","Avatar"],"compositionPattern":"compound","commonPatterns":["<Message>\n  <Message.Content>...</Message.Content>\n</Message>"],"requiredChildren":["Content"]}},"Popover":{"filePath":"src/components/Popover/Popover.fragment.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","status":"stable","tags":["popover","overlay","dropdown","floating","contextual"],"since":"0.1.0"},"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"],"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>"}],"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>"]},"contract":{"propsSummary":["open: boolean - controlled open state","onOpenChange: (open) => void - state handler","modal: boolean - blocks page interaction (default: false)","Popover.Content side: top|bottom|left|right - position"],"a11yRules":["A11Y_POPOVER_FOCUS","A11Y_POPOVER_ESCAPE","A11Y_TARGET_SIZE_MIN"]}},"Progress":{"filePath":"src/components/Progress/Progress.fragment.tsx","meta":{"name":"Progress","description":"Visual indicator of task completion or loading state. Available in linear and circular variants.","category":"feedback","status":"stable","tags":["progress","loading","indicator","percentage","status"],"since":"0.1.0"},"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"],"accessibility":["Uses role=\"progressbar\" with aria-valuenow","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","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}},"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"],"a11yRules":["A11Y_PROGRESS_ROLE","A11Y_PROGRESS_VALUE"]},"ai":{"subComponents":["Root","Circular"],"compositionPattern":"compound"}},"Prompt":{"filePath":"src/components/Prompt/Prompt.fragment.tsx","meta":{"name":"Prompt","description":"Multi-line input with toolbar for AI/chat interfaces","category":"ai","status":"stable","tags":["prompt","chat","ai","input","textarea","form"]},"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","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"]}},"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":"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)"],"a11yRules":["A11Y_TEXTAREA_LABEL","A11Y_BUTTON_LABEL"]},"ai":{"subComponents":["Textarea","Toolbar","Actions","Info","ActionButton","ModeButton","Usage","Submit"],"compositionPattern":"compound","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"]}},"RadioGroup":{"filePath":"src/components/RadioGroup/RadioGroup.fragment.tsx","meta":{"name":"RadioGroup","description":"Single selection from a list of mutually exclusive options","category":"forms","status":"stable","tags":["form","radio","selection","options"]},"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 descriptions 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},"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},"error":{"type":"string","description":"Error message","required":false},"size":{"type":"enum","description":"Size variant","default":"md","required":false,"values":["sm","md","lg"]},"children":{"type":"node","description":"RadioGroup.Item elements","required":true}},"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 Descriptions","description":"Radio items with additional context","code":"<RadioGroup defaultValue=\"standard\" label=\"Shipping Method\">\n  <RadioGroup.Item\n    value=\"standard\"\n    label=\"Standard\"\n    description=\"5-7 business days\"\n  />\n  <RadioGroup.Item\n    value=\"express\"\n    label=\"Express\"\n    description=\"2-3 business days\"\n  />\n  <RadioGroup.Item\n    value=\"overnight\"\n    label=\"Overnight\"\n    description=\"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 Error","description":"Validation error state","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>"}],"contract":{"propsSummary":["value: string - selected value","onValueChange: (value: string) => void","orientation: horizontal|vertical (default: vertical)","size: sm|md|lg (default: md)","disabled: boolean - disable all options"],"a11yRules":["A11Y_RADIO_GROUP","A11Y_LABEL_REQUIRED","A11Y_TARGET_SIZE_MIN"]},"ai":{"subComponents":["Item"],"compositionPattern":"compound","commonPatterns":["<RadioGroup>\n  <RadioGroup.Item>...</RadioGroup.Item>\n</RadioGroup>"],"requiredChildren":["Item"]}},"ScrollArea":{"filePath":"src/components/ScrollArea/ScrollArea.fragment.tsx","meta":{"name":"ScrollArea","description":"A styled scrollable container with thin scrollbars and optional fade indicators.","category":"layout","status":"stable","tags":["scroll","overflow","scrollbar","container","layout"],"since":"0.4.0"},"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 `hover` scrollbar visibility keeps the UI clean until the user interacts","Combine with `orientation=\"horizontal\"` for tab bars and chip rows"],"accessibility":["Preserves native scroll behavior and keyboard support","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}},"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 show when content is scrollable in either direction.","code":"<ScrollArea orientation=\"horizontal\" showFades>\n  {/* Overflowing content */}\n</ScrollArea>"},{"name":"Hover Scrollbar","description":"Scrollbar is hidden until the user hovers over the scroll area.","code":"<ScrollArea scrollbarVisibility=\"hover\" style={{ height: '200px' }}>\n  {/* Content */}\n</ScrollArea>"}],"ai":{"commonPatterns":["<ScrollArea orientation=\"horizontal\"><div style={{ display: \"flex\", gap: 8 }}>{items}</div></ScrollArea>","<ScrollArea style={{ height: 300 }}>{longContent}</ScrollArea>"],"subComponents":["Root"],"compositionPattern":"compound"},"contract":{"propsSummary":["orientation: horizontal|vertical|both - scroll direction","scrollbarVisibility: auto|always|hover - scrollbar display mode","showFades: boolean - gradient edge indicators"]}},"Select":{"filePath":"src/components/Select/Select.fragment.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","status":"stable","tags":["select","dropdown","form","options","picker"],"since":"0.1.0"},"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","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","required":true},"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},"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},"disabled":{"type":"boolean","description":"Disable the select","default":"false","required":false},"required":{"type":"boolean","description":"","required":false},"name":{"type":"string","description":"","required":false},"placeholder":{"type":"string","description":"Placeholder text when no value selected","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 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>"}],"ai":{"compositionPattern":"compound","subComponents":["Trigger","Content","Item","Group","GroupLabel"],"requiredChildren":["Trigger","Content"],"commonPatterns":["<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 - controlled selected value","onValueChange: (value) => void - selection handler","placeholder: string - placeholder text","disabled: boolean - disable select","maxVisibleItems: number - max visible options before scrolling (default 4)"],"a11yRules":["A11Y_SELECT_KEYBOARD","A11Y_SELECT_LABEL"]}},"Separator":{"filePath":"src/components/Separator/Separator.fragment.tsx","meta":{"name":"Separator","description":"Visual divider between content sections. Use to create clear visual boundaries and improve content organization.","category":"layout","status":"stable","tags":["separator","divider","hr","line","layout"],"since":"0.1.0"},"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}},"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":{"subComponents":["Root"],"compositionPattern":"compound"}},"Sidebar":{"filePath":"src/components/Sidebar/Sidebar.fragment.tsx","meta":{"name":"Sidebar","description":"Responsive navigation sidebar with collapsible desktop mode and mobile drawer behavior.","category":"navigation","status":"stable","tags":["sidebar","navigation","drawer","menu","layout"],"since":"0.3.0"},"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 `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)","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":"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"]}},"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}"}],"ai":{"compositionPattern":"compound","subComponents":["Header","Nav","Section","Item","SubItem","Submenu","Footer","CollapseToggle","Rail","MenuSkeleton","SectionAction"],"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>"]},"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)"],"a11yRules":["A11Y_NAV_LANDMARK","A11Y_FOCUS_TRAP","A11Y_ESCAPE_CLOSE"]}},"Skeleton":{"filePath":"src/components/Skeleton/Skeleton.fragment.tsx","meta":{"name":"Skeleton","description":"Placeholder loading state for content","category":"feedback","status":"stable","tags":["loading","placeholder","skeleton","shimmer"]},"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"],"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},"className":{"type":"string","description":"Additional class name","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"]},"ai":{"subComponents":["Text","Circle"],"compositionPattern":"compound"}},"Slider":{"filePath":"src/components/Slider/Slider.fragment.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","status":"stable","tags":["slider","range","input","number","control"],"since":"0.2.0"},"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},"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},"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},"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}},"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":"{\n  const [value, setValue] = React.useState(50);\n  return (\n    <div style={{ width: '300px', display: 'flex', flexDirection: 'column', gap: '12px' }}>\n      <Slider\n        label=\"Opacity\"\n        value={value}\n        onChange={setValue}\n        showValue\n        valueSuffix=\"%\"\n      />\n      <div style={{ fontSize: '14px', color: 'var(--fui-text-secondary)' }}>\n        Current value: {value}%\n      </div>\n    </div>\n  );\n}"},{"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","min/max: number - range bounds","step: number - increment size","label: string - field label","showValue: boolean - display value","valueSuffix: string - unit suffix"],"a11yRules":["A11Y_LABEL_REQUIRED","A11Y_KEYBOARD_ACCESSIBLE","A11Y_TARGET_SIZE_MIN"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Stack":{"filePath":"src/components/Stack/Stack.fragment.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","status":"stable","tags":["stack","layout","flex","spacing","responsive"],"since":"0.2.0"},"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"],"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\", 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":"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|{responsive} - spacing","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"],"a11yRules":["A11Y_SEMANTIC_ELEMENTS"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Table":{"filePath":"src/components/Table/Table.fragment.tsx","meta":{"name":"Table","description":"Data table with sorting and row selection. Use for displaying structured data that needs to be scanned, compared, or acted upon.","category":"display","status":"stable","tags":["table","data","grid","list","sorting"],"since":"0.1.0"},"usage":{"when":["Displaying structured, tabular data","Data that users need to scan and compare","Lists with multiple attributes per item","Data that needs sorting or selection"],"whenNot":["Simple lists (use List component)","Card-based layouts (use Grid with Cards)","Heavily interactive data (consider DataGrid)","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"],"accessibility":["Proper table semantics with headers","Sortable columns are keyboard accessible","Row selection is properly announced"]},"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},"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","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}},"relations":[{"component":"EmptyState","relationship":"sibling","note":"Use EmptyState for empty table states"},{"component":"Badge","relationship":"sibling","note":"Use Badge for status columns"}],"variants":[{"name":"Default","description":"Basic data table","code":"<Table\n  columns={columns}\n  data={sampleUsers}\n/>"},{"name":"Sortable","description":"Table with sortable columns","code":"<Table\n  columns={columns}\n  data={sampleUsers}\n  sortable\n/>"},{"name":"Clickable Rows","description":"Table with clickable rows","code":"<Table\n  columns={columns}\n  data={sampleUsers}\n  onRowClick={(row) => alert(`Clicked: ${row.name}`)}\n/>"},{"name":"Compact","description":"Smaller, denser table","code":"<Table\n  columns={columns}\n  data={sampleUsers}\n  size=\"sm\"\n/>"},{"name":"Striped","description":"Table with alternating row backgrounds","code":"<Table\n  columns={columns}\n  data={sampleUsers}\n  striped\n/>"},{"name":"Bordered","description":"Table with bordered container","code":"<Table\n  columns={columns}\n  data={sampleUsers}\n  bordered\n/>"},{"name":"Empty State","description":"Table with no data","code":"<Table\n  columns={columns}\n  data={[]}\n  emptyMessage=\"No users found\"\n/>"}],"ai":{"compositionPattern":"simple","commonPatterns":["<Table columns={[{header:\"Name\",accessorKey:\"name\"},{header:\"Status\",accessorKey:\"status\"}]} data={[{name:\"Item 1\",status:\"Active\"}]} />"],"subComponents":["Root","Columns"]},"contract":{"propsSummary":["columns: ColumnDef[] - column definitions","data: T[] - row data array","sortable: boolean - enable sorting","selectable: boolean - enable row selection","size: sm|md - table density","striped: boolean - alternating row backgrounds","bordered: boolean - bordered container"],"a11yRules":["A11Y_TABLE_HEADERS","A11Y_TABLE_SORT"]}},"TableOfContents":{"filePath":"src/components/TableOfContents/TableOfContents.fragment.tsx","meta":{"name":"TableOfContents","description":"Sticky sidebar navigation for long-form content. Renders heading links with active state highlighting for scroll spy integration.","category":"navigation","status":"stable","tags":["toc","table-of-contents","navigation","sidebar","scroll-spy","headings"],"since":"0.9.0"},"usage":{"when":["Long-form content pages (docs, blog posts, articles)","Component documentation with multiple sections","Any page with 3+ headings that benefits 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 indent on sub-headings (h3) to show hierarchy","Place in a sticky aside for best UX","Heading IDs must match between TOC items and the actual DOM headings"],"accessibility":["Uses <nav aria-label=\"Table of contents\"> for landmark navigation","Active item is marked with aria-current=\"true\"","All items are links with smooth scroll behavior","Focus-visible ring on keyboard navigation"]},"props":{"children":{"type":"node","description":"TableOfContents.Item 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":"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>"}],"ai":{"compositionPattern":"compound","subComponents":["Item"],"requiredChildren":["Item"],"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>"]},"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 as current","TableOfContents.Item indent: boolean - indent for sub-headings"],"a11yRules":["A11Y_NAV_LANDMARK","A11Y_ARIA_CURRENT"]}},"Tabs":{"filePath":"src/components/Tabs/Tabs.fragment.tsx","meta":{"name":"Tabs","description":"Organize content into switchable panels. Use for related content that benefits from a compact, navigable layout.","category":"navigation","status":"stable","tags":["tabs","navigation","panels","content-switcher"],"since":"0.1.0"},"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":"union","description":"Initially active tab (uncontrolled)","required":false},"value":{"type":"union","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"]}},"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\">\n  <Tabs.List variant=\"underline\">\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\">\n  <Tabs.List variant=\"pills\">\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\">\n  <Tabs.List variant=\"underline\">\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>"}],"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>"]},"contract":{"propsSummary":["value: string - controlled active tab","defaultValue: string - initial active tab","onValueChange: (value) => void - tab change handler","Tabs.List variant: underline|pills - visual style"],"a11yRules":["A11Y_TABS_KEYBOARD","A11Y_TABS_LABELS"]}},"Text":{"filePath":"src/components/Text/Text.fragment.tsx","meta":{"name":"Text","description":"Typography component for rendering text with consistent styling. Supports various sizes, weights, colors, and semantic elements.","category":"display","status":"stable","tags":["text","typography","heading","paragraph","font"],"since":"0.2.0"},"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":"string","description":"","required":false},"size":{"type":"enum","description":"Font size","required":false,"values":["2xs","xs","sm","base","lg","xl","2xl"]},"weight":{"type":"enum","description":"Font weight","required":false,"values":["normal","medium","semibold"]},"color":{"type":"enum","description":"Text color","required":false,"values":["primary","secondary","tertiary"]},"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}},"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)</Text>\n  <Text size=\"xs\">Extra small (xs)</Text>\n  <Text size=\"sm\">Small (sm)</Text>\n  <Text size=\"base\">Base size</Text>\n  <Text size=\"lg\">Large (lg)</Text>\n  <Text size=\"xl\">Extra large (xl)</Text>\n  <Text size=\"2xl\">Extra extra large (2xl)</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</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</div>"},{"name":"Semantic Elements","description":"Using appropriate HTML elements","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n  <Text as=\"h1\" size=\"2xl\" weight=\"semibold\">Heading 1</Text>\n  <Text as=\"h2\" size=\"xl\" weight=\"semibold\">Heading 2</Text>\n  <Text as=\"h3\" size=\"lg\" weight=\"medium\">Heading 3</Text>\n  <Text as=\"p\" 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 @fragments-sdk/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|lg|xl|2xl - font size","weight: normal|medium|semibold - font weight","color: primary|secondary|tertiary - text color","font: sans|mono - font family","truncate: boolean - enable truncation","lineClamp: number - max lines"],"a11yRules":["A11Y_HEADING_HIERARCHY","A11Y_SEMANTIC_ELEMENTS"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Textarea":{"filePath":"src/components/Textarea/Textarea.fragment.tsx","meta":{"name":"Textarea","description":"Multi-line text input for longer form content","category":"forms","status":"stable","tags":["input","text","form","multiline"]},"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"]},"disabled":{"type":"boolean","description":"Disabled state","default":false,"required":false},"error":{"type":"boolean","description":"Error state","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 value changes","required":false},"onBlur":{"type":"function","description":"Called when textarea loses 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","default":false,"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}},"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/>"}],"contract":{"propsSummary":["value: string - controlled value","rows: number - visible rows (default: 3)","label: string - label text","error: boolean - error state","disabled: boolean - disabled state","resize: none|vertical|horizontal|both"],"a11yRules":["A11Y_LABEL_REQUIRED"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Theme":{"filePath":"src/components/Theme/Theme.fragment.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","status":"stable","tags":["theme","dark-mode","light-mode","provider","toggle"],"since":"0.5.0"},"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"],"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"]},"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"]}},"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"],"a11yRules":["A11Y_TARGET_SIZE_MIN"]},"ai":{"subComponents":["Root","Provider","Toggle","useTheme"],"compositionPattern":"compound"}},"ThinkingIndicator":{"filePath":"src/components/ThinkingIndicator/ThinkingIndicator.fragment.tsx","meta":{"name":"ThinkingIndicator","description":"Animated indicator showing AI is processing","category":"ai","status":"stable","tags":["thinking","loading","ai","processing","indicator","animation"]},"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":{"subComponents":["Steps","Step"],"compositionPattern":"compound"}},"Toast":{"filePath":"src/components/Toast/Toast.fragment.tsx","meta":{"name":"Toast","description":"Brief, non-blocking notification messages","category":"feedback","status":"stable","tags":["notification","alert","message","feedback"]},"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"],"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":5000,"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","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"],"a11yRules":["A11Y_ALERT_ROLE","A11Y_TARGET_SIZE_MIN"]},"ai":{"subComponents":["Provider"],"compositionPattern":"compound"}},"Switch":{"filePath":"src/components/Toggle/Toggle.fragment.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","status":"stable","tags":["switch","toggle","boolean","settings","preference"],"since":"0.1.0"},"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 a description 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":"","required":false},"onChange":{"type":"function","description":"Callback with new checked state: (checked: boolean) => void","required":false},"label":{"type":"string","description":"Visible label text","required":false},"description":{"type":"string","description":"Helper text shown below the label","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"]},"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}},"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 Description","description":"Switch with explanatory helper text","code":"<StatefulSwitch\n  checked\n  label=\"Auto-save\"\n  description=\"Automatically save changes as you type\"\n/>","args":{"checked":true,"label":"Auto-save","description":"Automatically save changes as you type"}},{"name":"Small Size","description":"Compact switch for dense settings panels","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n  <StatefulSwitch size=\"sm\" checked label=\"Show line numbers\" />\n  <StatefulSwitch size=\"sm\" label=\"Word wrap\" />\n  <StatefulSwitch size=\"sm\" checked label=\"Minimap\" />\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    description=\"Receive push notifications on your device\"\n  />\n  <StatefulSwitch\n    checked\n    label=\"Email digest\"\n    description=\"Weekly summary of your activity\"\n  />\n  <StatefulSwitch\n    label=\"Marketing emails\"\n    description=\"Product updates and promotional offers\"\n  />\n</div>"}],"contract":{"propsSummary":["checked: boolean - on/off state","onChange: (checked) => void - state change handler","label: string - visible label text","description: string - helper text below label","disabled: boolean - non-interactive state","size: sm|md - switch size"],"a11yRules":["A11Y_SWITCH_ROLE","A11Y_SWITCH_LABEL","A11Y_SWITCH_FOCUS","A11Y_TARGET_SIZE_MIN"]}},"ToggleGroup":{"filePath":"src/components/ToggleGroup/ToggleGroup.fragment.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","status":"stable","tags":["toggle","group","fragmented","control","tabs","switch"],"since":"0.2.0"},"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)","Ensure adequate touch targets on mobile"],"accessibility":["Uses role=\"group\" for semantic grouping","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":true},"onChange":{"type":"function","description":"Called with new value when selection changes","required":true},"children":{"type":"node","description":"ToggleGroup.Item components","required":true},"variant":{"type":"enum","description":"Visual style","default":"default","required":false,"values":["default","pills","outline"]},"size":{"type":"enum","description":"Size variant","default":"md","required":false,"values":["sm","md"]},"gap":{"type":"enum","description":"Gap between items (pills/outline variants)","default":"xs","required":false,"values":["sm","none","xs"]}},"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=\"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":"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 - selected value (required)","onChange: (value: string) => void - change handler (required)","children: ToggleGroup.Item[] - toggle items","variant: default|pills|outline - visual style","size: sm|md - size variant","gap: none|xs|sm - spacing"],"a11yRules":["A11Y_GROUP_ROLE","A11Y_KEYBOARD_ACCESSIBLE"]},"ai":{"subComponents":["Item"],"compositionPattern":"compound","commonPatterns":["<ToggleGroup>\n  <ToggleGroup.Item>...</ToggleGroup.Item>\n</ToggleGroup>"],"requiredChildren":["Item"]}},"Tooltip":{"filePath":"src/components/Tooltip/Tooltip.fragment.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","status":"stable","tags":["tooltip","hint","help","hover","contextual"],"since":"0.1.0"},"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"],"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}},"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>"}],"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)"],"a11yRules":["A11Y_TOOLTIP_FOCUS","A11Y_TOOLTIP_ROLE"]},"ai":{"subComponents":["Root","Provider"],"compositionPattern":"compound"}},"VisuallyHidden":{"filePath":"src/components/VisuallyHidden/VisuallyHidden.fragment.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","status":"stable","tags":["accessibility","a11y","screen-reader","hidden","sr-only"],"since":"0.1.0"},"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"],"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"],"a11yRules":["A11Y_SR_ONLY","A11Y_ICON_LABEL"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}}},"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"]},"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"]},"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"]},"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"]},"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 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"]},"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":120,"categories":{"base":[{"name":"--fui-base-unit","value":"7px"}],"typography":[{"name":"--fui-font-sans","value":"'Geist Sans', 'Geist', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"},{"name":"--fui-font-mono","value":"'Geist Mono', 'SF Mono', SFMono-Regular, ui-monospace, 'Cascadia Code', 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":"1.143rem"},{"name":"--fui-font-size-lg","value":"1.286rem"},{"name":"--fui-font-size-xl","value":"1.714rem"},{"name":"--fui-font-size-2xl","value":"2.143rem"},{"name":"--fui-font-weight-normal","value":"400"},{"name":"--fui-font-weight-medium","value":"500"},{"name":"--fui-font-weight-semibold","value":"600"},{"name":"--fui-line-height-tight","value":"1.25"},{"name":"--fui-line-height-normal","value":"1.5"},{"name":"--fui-line-height-relaxed","value":"1.625"}],"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-padding-container-sm","value":"1.5rem"},{"name":"--fui-padding-container-md","value":"2rem"},{"name":"--fui-padding-container-lg","value":"3rem"},{"name":"--fui-padding-container-xl","value":"4rem"},{"name":"--fui-padding-inline-sm","value":"1rem"},{"name":"--fui-padding-inline-md","value":"1.5rem"},{"name":"--fui-padding-inline-lg","value":"2rem"},{"name":"--fui-padding-item-xs","value":"0.5rem"},{"name":"--fui-padding-item-sm","value":"1rem"},{"name":"--fui-padding-item-md","value":"1.5rem"},{"name":"--fui-padding-item-lg","value":"2rem"}],"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"}],"transitions":[{"name":"--fui-transition-fast","value":"150ms ease"},{"name":"--fui-transition-normal","value":"200ms ease"}],"colors":[{"name":"--fui-color-accent","value":"#f2f2f2"},{"name":"--fui-color-accent-hover","value":"rgb(218, 218, 218)"},{"name":"--fui-color-accent-active","value":"rgb(203, 203, 203)"},{"name":"--fui-color-danger","value":"#ef4444"},{"name":"--fui-color-danger-hover","value":"rgb(237, 40, 40)"},{"name":"--fui-color-success","value":"#22c55e"},{"name":"--fui-color-warning","value":"#f59e0b"},{"name":"--fui-color-info","value":"#3b82f6"},{"name":"--fui-color-danger-bg","value":"rgba(239, 68, 68, 0.15)"},{"name":"--fui-color-success-bg","value":"rgba(34, 197, 94, 0.15)"},{"name":"--fui-color-warning-bg","value":"rgba(245, 158, 11, 0.15)"},{"name":"--fui-color-info-bg","value":"rgba(59, 130, 246, 0.15)"},{"name":"--fui-color-danger-text","value":"rgb(241, 96, 96)"},{"name":"--fui-color-success-text","value":"#22c55e"},{"name":"--fui-color-warning-text","value":"#f59e0b"},{"name":"--fui-color-info-text","value":"rgb(79, 142, 247)"},{"name":"--fui-backdrop","value":"rgba(0, 0, 0, 0.8)"}],"surfaces":[{"name":"--fui-bg-primary","value":"#09090b"},{"name":"--fui-bg-secondary","value":"#18181b"},{"name":"--fui-bg-tertiary","value":"#27272a"},{"name":"--fui-bg-elevated","value":"rgb(28, 28, 31)"},{"name":"--fui-bg-subtle","value":"rgb(17, 17, 19)"},{"name":"--fui-bg-hover","value":"rgba(0, 0, 0, 0.12)"},{"name":"--fui-bg-active","value":"rgba(0, 0, 0, 0.18)"}],"text":[{"name":"--fui-text-primary","value":"#f4f4f5"},{"name":"--fui-text-secondary","value":"#a1a1aa"},{"name":"--fui-text-tertiary","value":"#71717a"},{"name":"--fui-text-inverse","value":"#18181b"}],"borders":[{"name":"--fui-border","value":"var(--fui-text-primary)"},{"name":"--fui-border-default","value":"rgba(255, 255, 255, 0.08)"},{"name":"--fui-border-strong","value":"var(--fui-text-primary)"}],"shadows":[{"name":"--fui-shadow-sm","value":"0 1px 2px 0 rgba(0, 0, 0, 0.2)"},{"name":"--fui-shadow-md","value":"0 2px 4px -1px rgba(0, 0, 0, 0.25), 0 1px 3px -2px rgba(0, 0, 0, 0.2)"},{"name":"--fui-shadow-lg","value":"0 8px 12px -3px rgba(0, 0, 0, 0.35), 0 3px 5px -4px rgba(0, 0, 0, 0.25)"}],"focus":[{"name":"--fui-focus-ring-color","value":"#f2f2f2"},{"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":"#27272a"},{"name":"--fui-scrollbar-thumb","value":"#52525b"},{"name":"--fui-scrollbar-thumb-hover","value":"#71717a"}],"component-sizing":[{"name":"--fui-button-height-sm","value":"2rem"},{"name":"--fui-button-height-md","value":"2.5714285714rem"},{"name":"--fui-button-height-lg","value":"3.1428571429rem"},{"name":"--fui-input-height","value":"2.8571428571rem"},{"name":"--fui-input-height-sm","value":"2rem"},{"name":"--fui-input-height-lg","value":"3.1428571429rem"},{"name":"--fui-target-size-min","value":"1.714rem"},{"name":"--fui-target-size-comfortable","value":"2.2857142857rem"}],"layout":[{"name":"--fui-appshell-header-height","value":"56px"},{"name":"--fui-appshell-sidebar-width","value":"240px"},{"name":"--fui-appshell-sidebar-collapsed-width","value":"64px"},{"name":"--fui-appshell-aside-width","value":"280px"},{"name":"--fui-header-z-index","value":"40"}],"code":[{"name":"--fui-code-bg","value":"var(--fui-bg-elevated)"},{"name":"--fui-code-header-bg","value":"var(--fui-bg-elevated)"},{"name":"--fui-code-text","value":"#d4d4d4"},{"name":"--fui-code-text-muted","value":"#6b7280"},{"name":"--fui-code-border","value":"rgba(255, 255, 255, 0.1)"},{"name":"--fui-code-tab-bg","value":"rgba(255, 255, 255, 0.03)"},{"name":"--fui-code-tab-border","value":"rgba(255, 255, 255, 0.08)"},{"name":"--fui-code-tab-text","value":"#9ca3af"},{"name":"--fui-code-tab-text-active","value":"#e5e7eb"},{"name":"--fui-code-copy-bg","value":"rgba(255, 255, 255, 0.1)"},{"name":"--fui-code-copy-bg-hover","value":"rgba(255, 255, 255, 0.15)"},{"name":"--fui-code-highlight-bg","value":"rgba(255, 255, 255, 0.08)"},{"name":"--fui-code-selection-bg","value":"rgba(59, 130, 246, 0.4)"},{"name":"--fui-code-scrollbar-track","value":"rgba(255, 255, 255, 0.05)"},{"name":"--fui-code-scrollbar-thumb","value":"rgba(255, 255, 255, 0.15)"},{"name":"--fui-code-scrollbar-thumb-hover","value":"rgba(255, 255, 255, 0.25)"}],"tooltip":[{"name":"--fui-tooltip-bg","value":"#1e293b"},{"name":"--fui-tooltip-text","value":"#f8fafc"},{"name":"--fui-tooltip-shadow","value":"0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.15)"}],"marketing":[{"name":"--fui-hero-gradient-color","value":"rgba(120, 119, 198, 0.15)"}]}},"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":"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"]},{"name":"Checkbox","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Chip","category":"forms","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":"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":"ConversationList","category":"ai","status":"stable","compositionPattern":"compound","subComponents":["DateSeparator","TypingIndicator"]},{"name":"DatePicker","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Trigger","Content","Calendar","Preset"]},{"name":"Dialog","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Trigger","Content","Close","Header","Title","Description","Body","Footer"]},{"name":"EmptyState","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Icon","Title","Description","Actions"]},{"name":"Field","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Label","Control","Description","Error","Validity"]},{"name":"Fieldset","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Legend"]},{"name":"Form","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Grid","category":"layout","status":"stable"},{"name":"Header","category":"navigation","status":"stable","compositionPattern":"compound","subComponents":["SkipLink","Trigger","Brand","Nav","NavItem","NavMenu","NavMenuItem","Search","Spacer","Actions"]},{"name":"Icon","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Image","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Input","category":"forms","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":"forms","status":"stable","compositionPattern":"compound","subComponents":["Item","Group","Empty"]},{"name":"Loading","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Inline","Screen"]},{"name":"Markdown","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Menu","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Trigger","Content","Item","CheckboxItem","RadioGroup","RadioItem","Group","GroupLabel","Separator"]},{"name":"Message","category":"ai","status":"stable","compositionPattern":"compound","subComponents":["Content","Actions","Timestamp","Avatar"]},{"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","Actions","Info","ActionButton","ModeButton","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","Item","SubItem","Submenu","Footer","CollapseToggle","Rail","MenuSkeleton","SectionAction"]},{"name":"Skeleton","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Text","Circle"]},{"name":"Slider","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Stack","category":"layout","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Table","category":"display","status":"stable","compositionPattern":"simple","subComponents":["Root","Columns"]},{"name":"TableOfContents","category":"navigation","status":"stable","compositionPattern":"compound","subComponents":["Item"]},{"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":"Switch","category":"forms","status":"stable"},{"name":"ToggleGroup","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Item"]},{"name":"Tooltip","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Root","Provider"]},{"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":"CodeBlock","t":"Button","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":"Header","t":"Sidebar","ty":"hook-depends","w":0.75,"p":"source:Header/index.tsx"},{"s":"Message","t":"Markdown","ty":"imports","w":1,"p":"source:Message/index.tsx"},{"s":"Prompt","t":"Loading","ty":"imports","w":1,"p":"source:Prompt/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":"Avatar","t":"Stack","ty":"renders","w":0.5,"p":"variant:Avatar"},{"s":"Badge","t":"Stack","ty":"renders","w":0.5,"p":"variant:Badge"},{"s":"ButtonGroup","t":"Button","ty":"renders","w":0.5,"p":"variant:ButtonGroup"},{"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":"ConversationList","t":"Message","ty":"renders","w":0.5,"p":"variant:ConversationList"},{"s":"Dialog","t":"Button","ty":"renders","w":0.5,"p":"variant:Dialog"},{"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":"Header","t":"Button","ty":"renders","w":0.5,"p":"variant:Header"},{"s":"Header","t":"Input","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":"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":"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":"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":"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":"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":"Avatar","t":"Avatar","ty":"parent-of","w":1,"p":"relation","no":"Use Avatar.Group for stacked avatar displays"},{"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":"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":"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":"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":"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":"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":"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":"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":"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":"Table","t":"EmptyState","ty":"sibling-of","w":0.75,"p":"relation","no":"Use EmptyState for empty table states"},{"s":"Table","t":"Badge","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Badge for status columns"},{"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":"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":"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":"Button","degree":47},{"name":"Input","degree":46},{"name":"Stack","degree":44},{"name":"Card","degree":37},{"name":"Text","degree":37},{"name":"Sidebar","degree":33},{"name":"AppShell","degree":32},{"name":"Tabs","degree":32},{"name":"Badge","degree":31},{"name":"Box","degree":28}],"compositionCoverage":49,"connectedComponents":[["Accordion","Alert","AppShell","Avatar","Badge","Box","Breadcrumbs","Button","ButtonGroup","Card","Chart","ChartContainer","ChartTooltip","Checkbox","Chip","CodeBlock","Collapsible","ColorPicker","Combobox","ConversationList","DatePicker","Dialog","EmptyState","Field","Fieldset","Form","Grid","Header","Icon","Image","Input","Link","List","Listbox","Loading","Markdown","Menu","Message","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.15,"nodeCount":59,"edgeCount":447}}}
+{"version":"1.0.0","generatedAt":"2026-02-13T23:00:36.864Z","packageName":"@fragments-sdk/ui","fragments":{"Accordion":{"filePath":"src/components/Accordion/Accordion.fragment.tsx","meta":{"name":"Accordion","description":"Vertically stacked, collapsible content sections. Use for organizing related content that can be progressively disclosed.","category":"layout","status":"stable","tags":["accordion","collapse","expand","disclosure","faq"],"since":"0.2.0"},"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","Arrow keys navigate between accordion headers","Uses proper ARIA expanded/controls attributes","Focus is visible on accordion triggers"]},"props":{"children":{"type":"node","description":"Accordion items (use Accordion.Item with Accordion.Trigger and Accordion.Content)","required":true},"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)","required":false},"defaultValue":{"type":"union","description":"Initially open item(s) for uncontrolled usage","required":false},"onValueChange":{"type":"function","description":"Called when open items change","required":false},"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 @fragments-sdk/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>"}],"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>"]},"contract":{"propsSummary":["type: single|multiple - controls how many items can be open","value: string|string[] - controlled open items","defaultValue: string|string[] - initial open items","collapsible: boolean - allow all closed in single mode"],"a11yRules":["A11Y_DISCLOSURE_KEYBOARD","A11Y_FOCUS_VISIBLE"]}},"Alert":{"filePath":"src/components/Alert/Alert.fragment.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","status":"stable","tags":["notification","message","feedback","banner","toast"],"since":"0.1.0"},"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"],"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>"}],"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>"]},"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"],"a11yRules":["A11Y_ALERT_ROLE","A11Y_ALERT_DISMISS","A11Y_ALERT_CONTRAST","A11Y_TARGET_SIZE_MIN"]}},"AppShell":{"filePath":"src/components/AppShell/AppShell.fragment.tsx","meta":{"name":"AppShell","description":"Full layout wrapper integrating sidebar, header, main content, and optional aside panel. Supports three layout modes: default (header on top), sidebar (sidebar full height), and sidebar-floating (sidebar + rounded main content).","category":"layout","status":"stable","tags":["layout","shell","scaffold","dashboard","app-layout"],"since":"0.5.0"},"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)","Use layout=\"sidebar-floating\" for a modern look with rounded, elevated main content","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":"Layout mode for header/sidebar positioning","default":"default","required":false,"values":["default","sidebar","sidebar-floating"]}},"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 height=\"400px\" 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 height=\"400px\" 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 height=\"400px\" 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 height=\"400px\" 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":"Sidebar Floating Layout","description":"Modern layout with rounded main content area and visual separation from sidebar. Main content floats with a distinct 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=\"400px\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"sidebar-floating\">\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\">\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 Floating Layout</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>"}],"ai":{"subComponents":["Header","Sidebar","Main","Aside"],"compositionPattern":"compound","commonPatterns":["<AppShell>\n  <AppShell.Header>...</AppShell.Header>\n  <AppShell.Sidebar>...</AppShell.Sidebar>\n  <AppShell.Main>...</AppShell.Main>\n</AppShell>"],"requiredChildren":["Header","Sidebar","Main"]}},"Avatar":{"filePath":"src/components/Avatar/Avatar.fragment.tsx","meta":{"name":"Avatar","description":"Visual representation of a user or entity","category":"display","status":"stable","tags":["user","profile","image","identity"]},"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"],"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"]},"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}},"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":"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)","shape: circle|square (default: circle)"],"a11yRules":["A11Y_IMG_ALT"]},"ai":{"subComponents":["Group"],"compositionPattern":"compound"}},"Badge":{"filePath":"src/components/Badge/Badge.fragment.tsx","meta":{"name":"Badge","description":"Compact label for status, counts, or categorization. Draws attention to metadata without dominating the layout.","category":"display","status":"stable","tags":["status","label","tag","count","chip"],"since":"0.1.0"},"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","Use onRemove for user-created tags only, not system-generated badges"],"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","default":"default","required":false,"values":["default","success","warning","error","info","outline"]},"size":{"type":"enum","description":"Badge size","default":"md","required":false,"values":["sm","md"]},"dot":{"type":"boolean","description":"Show a colored dot indicator before the label","default":false,"required":false},"icon":{"type":"node","description":"Optional icon element before the text","required":false},"onRemove":{"type":"function","description":"Makes the badge removable. Called when X is clicked.","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":"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":"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 - visual style","size: sm|md - badge size","dot: boolean - show status dot indicator","onRemove: () => void - makes badge removable"],"a11yRules":["A11Y_BADGE_CONTRAST","A11Y_BADGE_DISMISS","A11Y_TARGET_SIZE_MIN"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Box":{"filePath":"src/components/Box/Box.fragment.tsx","meta":{"name":"Box","description":"Primitive layout component for applying spacing, backgrounds, and borders. A flexible container for building custom layouts.","category":"layout","status":"stable","tags":["layout","container","spacing","primitive","box"],"since":"0.1.0"},"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"],"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":["auto","hidden","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"],"a11yRules":["A11Y_SEMANTIC_HTML"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Breadcrumbs":{"filePath":"src/components/Breadcrumbs/Breadcrumbs.fragment.tsx","meta":{"name":"Breadcrumbs","description":"Breadcrumb navigation showing the current page location within a hierarchy. Helps users navigate back through parent pages.","category":"navigation","status":"stable","tags":["breadcrumbs","navigation","hierarchy","wayfinding"],"since":"0.7.0"},"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"],"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}},"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>"}],"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>"]},"contract":{"propsSummary":["separator: ReactNode - custom separator (default \"/\")","maxItems: number - collapse middle items with ellipsis","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"]}},"Button":{"filePath":"src/components/Button/Button.fragment.tsx","meta":{"name":"Button","description":"Interactive element for user actions and form submissions","category":"forms","status":"stable","tags":["action","button","form","interactive"]},"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"],"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","default":"primary","required":false,"values":["primary","secondary","ghost","danger"],"constraints":["Only one primary button per context"]},"size":{"type":"enum","description":"Button size","default":"md","required":false,"values":["sm","md","lg"]},"icon":{"type":"boolean","description":"Render as icon-only button (square aspect ratio)","default":"false","required":false},"fullWidth":{"type":"boolean","description":"Make button full width of container","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":"Danger","description":"Destructive action requiring attention","code":"<Button variant=\"danger\">Delete Item</Button>"},{"name":"Sizes","description":"Available size options","code":"<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>\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>"}],"contract":{"propsSummary":["variant: primary|secondary|ghost|danger (default: primary)","size: sm|md|lg (default: md)","disabled: boolean - disables interaction","type: button|submit|reset (default: button)","onClick: () => void - action handler"],"a11yRules":["A11Y_BTN_LABEL","A11Y_BTN_FOCUS"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"ButtonGroup":{"filePath":"src/components/ButtonGroup/ButtonGroup.fragment.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","status":"stable","tags":["button","group","toolbar","actions","layout"],"since":"0.2.0"},"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"],"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"]},"className":{"type":"string","description":"","required":false}},"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\">\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"],"a11yRules":["A11Y_GROUP_LABEL"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Card":{"filePath":"src/components/Card/Card.fragment.tsx","meta":{"name":"Card","description":"Container for grouping related content","category":"layout","status":"stable","tags":["container","layout","surface"]},"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","Interactive cards should have clear hover states"],"accessibility":["Interactive cards should use button or link semantics","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","elevated"],"constraints":["Use \"elevated\" sparingly to maintain visual hierarchy"]},"padding":{"type":"enum","description":"Internal padding size","default":"md","required":false,"values":["none","sm","md","lg"]},"onClick":{"type":"function","description":"Click handler - makes card interactive","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":"Default","description":"Standard card with subtle shadow","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":"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":"Interactive","description":"Clickable card","code":"<Card 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":"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>"}],"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: default|outlined|elevated (default: default)","padding: none|sm|md|lg (default: md)","onClick: () => void - makes card interactive","Sub-components: Card.Header, Card.Title, Card.Description, Card.Body, Card.Footer"],"a11yRules":["A11Y_CARD_HEADING","A11Y_CARD_INTERACTIVE"]}},"Chart":{"filePath":"src/components/Chart/Chart.fragment.tsx","meta":{"name":"Chart","description":"Composable chart wrapper for recharts with theme-aware tooltips, legends, and color integration.","category":"display","status":"stable","tags":["chart","graph","data-visualization","recharts"],"since":"0.3.0","dependencies":[{"name":"recharts","version":">=2.0.0","reason":"Chart rendering engine"}]},"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","Use FUI CSS variables for colors so charts adapt to theme changes","Use ChartTooltip and ChartLegend for consistent themed overlays"],"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 and colors","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}},"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"],"a11yRules":["A11Y_CHART_LABEL"]},"ai":{"subComponents":["Root","Tooltip","TooltipContent","Legend","LegendContent"],"compositionPattern":"compound"}},"Checkbox":{"filePath":"src/components/Checkbox/Checkbox.fragment.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","status":"stable","tags":["checkbox","form","boolean","selection","input"],"since":"0.1.0"},"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 description 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},"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"]},"label":{"type":"string","description":"Label text","required":false},"description":{"type":"string","description":"Description text below the label","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},"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}},"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 Description","description":"Checkbox with helper text","code":"<StatefulCheckbox\n  label=\"Email notifications\"\n  description=\"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>"}],"contract":{"propsSummary":["checked: boolean - controlled checked state","onCheckedChange: (checked) => void - change handler","indeterminate: boolean - partial selection state","label: string - checkbox label","description: string - helper text"],"a11yRules":["A11Y_CHECKBOX_LABEL","A11Y_CHECKBOX_FOCUS","A11Y_TARGET_SIZE_MIN"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Chip":{"filePath":"src/components/Chip/Chip.fragment.tsx","meta":{"name":"Chip","description":"Interactive pill-shaped element for filtering, selecting, and tagging. Supports single and multi-select via Chip.Group.","category":"forms","status":"stable","tags":["chip","tag","filter","selection","multi-select","action"],"since":"0.7.0"},"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","Use onRemove only when users should be able to dismiss the chip","Pair avatar chips with user-related selections (assignees, reviewers)"],"accessibility":["Chips use role=\"option\" with aria-selected for selection state","Chip.Group uses role=\"listbox\" with aria-multiselectable","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","soft"]},"size":{"type":"enum","description":"Chip size","default":"md","required":false,"values":["sm","md"]},"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}},"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":"Selected","description":"Chip in selected state across variants","code":"<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>\n  <Chip selected>Filled</Chip>\n  <Chip variant=\"outlined\" selected>Outlined</Chip>\n  <Chip variant=\"soft\" selected>Soft</Chip>\n</div>"},{"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":"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":"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|soft - visual style","size: sm|md - chip size","selected: boolean - selection state","icon/avatar: ReactNode - leading visual","onRemove: () => void - makes chip removable","value: string - identifier for Chip.Group"],"a11yRules":["A11Y_CHIP_SELECTION","A11Y_CHIP_DISMISS"]},"ai":{"subComponents":["Group"],"compositionPattern":"compound"}},"CodeBlock":{"filePath":"src/components/CodeBlock/CodeBlock.fragment.tsx","meta":{"name":"CodeBlock","description":"Syntax-highlighted code display with copy functionality, theming, diff view, and collapsible sections","category":"display","status":"stable","tags":["code","syntax","highlighting","documentation","developer","diff"],"dependencies":[{"name":"shiki","version":">=1.0.0","reason":"Syntax highlighting engine"}]},"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"],"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","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":{"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"]}},"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 '@fragments-sdk/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 '@fragments-sdk/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 @fragments-sdk/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    \"@fragments-sdk/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)"],"a11yRules":["A11Y_CODE_SEMANTIC","A11Y_BTN_LABEL"]},"ai":{"subComponents":["Tabbed"],"compositionPattern":"compound"}},"Collapsible":{"filePath":"src/components/Collapsible/Collapsible.fragment.tsx","meta":{"name":"Collapsible","description":"An interactive component that expands/collapses to show or hide content","category":"layout","status":"stable","tags":["collapsible","expandable","accordion","disclosure","toggle"]},"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},"className":{"type":"string","description":"Additional class name","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":{"subComponents":["Root","Trigger","Content"],"compositionPattern":"compound","commonPatterns":["<Collapsible>\n  <Collapsible.Trigger>...</Collapsible.Trigger>\n  <Collapsible.Content>...</Collapsible.Content>\n</Collapsible>"],"requiredChildren":["Trigger","Content"]}},"ColorPicker":{"filePath":"src/components/ColorPicker/ColorPicker.fragment.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","status":"stable","tags":["color","picker","input","hex","swatch","theme"],"since":"0.2.0","dependencies":[{"name":"react-colorful","version":">=5.0.0","reason":"Color picker widget"}]},"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 description 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},"description":{"type":"string","description":"Helper text below the picker","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"]},"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 Description","description":"Color picker with helper text","code":"<ColorPicker\n  label=\"Primary Color\"\n  defaultValue=\"#10b981\"\n  description=\"This color will be used for buttons and links\"\n/>"},{"name":"Controlled","description":"Controlled color picker that logs changes","code":"{\n  const [color, setColor] = React.useState('#ef4444');\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n      <ColorPicker\n        label=\"Accent Color\"\n        value={color}\n        onChange={setColor}\n      />\n      <div style={{ fontSize: '14px', color: 'var(--fui-text-secondary)' }}>\n        Selected: {color}\n      </div>\n    </div>\n  );\n}"},{"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</div>"},{"name":"Disabled","description":"Disabled color picker","code":"<ColorPicker\n  label=\"Locked Color\"\n  defaultValue=\"#64748b\"\n  description=\"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","description: string - helper text","disabled: boolean - disable interaction","size: sm|md - size variant","showInput: boolean - show hex input field"],"a11yRules":["A11Y_LABEL_REQUIRED","A11Y_FOCUS_VISIBLE","A11Y_TARGET_SIZE_MIN"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Combobox":{"filePath":"src/components/Combobox/Combobox.fragment.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","status":"stable","tags":["combobox","autocomplete","search","select","typeahead","form","multiselect"],"since":"0.1.0"},"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","Provide an empty state message when no results match","Group related options with Combobox.Group for large lists","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":{"children":{"type":"node","description":"Combobox input and content","required":true},"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":"function","description":"Called when selection changes","required":false},"multiple":{"type":"boolean","description":"Allow multiple selections with chips","default":false,"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},"disabled":{"type":"boolean","description":"Disable the combobox","default":"false","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}},"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 Groups","description":"Options organized into groups","code":"<StatefulCombobox placeholder=\"Search countries...\">\n  <Combobox.Input />\n  <Combobox.Content>\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.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>"}],"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>"]},"contract":{"propsSummary":["value: string | string[] - controlled selected value","onValueChange: (value) => void - selection handler","multiple: boolean - enable multi-select with chips","placeholder: string - input placeholder text","disabled: boolean - disable combobox","autoHighlight: boolean - auto-highlight first match","maxVisibleItems: number - max visible options before scrolling (default 4)"],"a11yRules":["A11Y_COMBOBOX_KEYBOARD","A11Y_COMBOBOX_LABEL","A11Y_TARGET_SIZE_MIN"]}},"ConversationList":{"filePath":"src/components/ConversationList/ConversationList.fragment.tsx","meta":{"name":"ConversationList","description":"Scrollable message container with auto-scroll and history loading","category":"ai","status":"stable","tags":["conversation","chat","messages","scroll","ai","list"]},"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)","Implement onScrollTop for loading older messages","Provide an emptyState for new conversations","Use DateSeparator between messages from different days"],"accessibility":["Uses proper ARIA roles for separators","Typing indicator has aria-label","Smooth scroll respects reduced motion preferences","Keyboard navigation works within scrollable container"]},"props":{"children":{"type":"node","description":"Message components","required":true},"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)","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":"<div style={{ height: '300px', border: '1px solid #e4e4e7', borderRadius: '8px' }}>\n  <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>\n</div>"},{"name":"With Date Separators","description":"Messages grouped by date","code":"<div style={{ height: '300px', border: '1px solid #e4e4e7', borderRadius: '8px' }}>\n  <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>\n</div>"},{"name":"With Typing Indicator","description":"Shows assistant is typing","code":"<div style={{ height: '300px', border: '1px solid #e4e4e7', borderRadius: '8px' }}>\n  <ConversationList>\n    <Message role=\"user\">\n      <Message.Content>What is TypeScript?</Message.Content>\n    </Message>\n    <ConversationList.TypingIndicator name=\"Assistant\" />\n  </ConversationList>\n</div>"},{"name":"Loading History","description":"Loading older messages","code":"<div style={{ height: '300px', border: '1px solid #e4e4e7', borderRadius: '8px' }}>\n  <ConversationList loadingHistory>\n    <Message role=\"user\">\n      <Message.Content>This is the latest message</Message.Content>\n    </Message>\n  </ConversationList>\n</div>"},{"name":"Empty State","description":"No messages yet","code":"<div style={{ height: '300px', border: '1px solid #e4e4e7', borderRadius: '8px' }}>\n  <ConversationList\n    emptyState={\n      <div style={{ textAlign: 'center', color: '#71717a', padding: '2rem' }}>\n        <p>No messages yet</p>\n        <p style={{ fontSize: '12px' }}>Start a conversation!</p>\n      </div>\n    }\n  >\n    {/* No messages */}\n  </ConversationList>\n</div>"}],"contract":{"propsSummary":["children: ReactNode - Message components","autoScroll: boolean | \"smart\" - scroll behavior (default: \"smart\")","onScrollTop: () => void - callback for loading history","loadingHistory: boolean - show history loading spinner","emptyState: ReactNode - empty conversation content"],"a11yRules":["A11Y_ARIA_ROLES","A11Y_MOTION_PREFERENCE"]},"ai":{"subComponents":["DateSeparator","TypingIndicator"],"compositionPattern":"compound"}},"DatePicker":{"filePath":"src/components/DatePicker/DatePicker.fragment.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","status":"stable","tags":["date","picker","calendar","range","form","input"],"since":"0.8.0","dependencies":[{"name":"react-day-picker","version":">=9.0.0","reason":"Calendar rendering"},{"name":"date-fns","version":">=3.0.0","reason":"Date formatting"}]},"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","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"],"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},"mode":{"type":"enum","description":"Selection mode","default":"single","required":false,"values":["single","range"]},"selected":{"type":"object","description":"Controlled date (single mode)","required":false},"selectedRange":{"type":"object","description":"Controlled range (range mode)","required":false},"onSelect":{"type":"function","description":"Called when a single date is selected","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},"disabledDates":{"type":"union","description":"Dates to disable (react-day-picker 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}},"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":"uses","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":"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":"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>"}],"ai":{"compositionPattern":"compound","subComponents":["Trigger","Content","Calendar","Preset"],"requiredChildren":["Trigger","Content"],"commonPatterns":["<DatePicker selected={date} onSelect={setDate}><DatePicker.Trigger placeholder=\"Pick a date\" /><DatePicker.Content><DatePicker.Calendar /></DatePicker.Content></DatePicker>"]},"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)","disabled: boolean - disable picker","disabledDates: Matcher - dates to disable"],"a11yRules":["A11Y_DATEPICKER_KEYBOARD","A11Y_DATEPICKER_LABEL"]}},"Dialog":{"filePath":"src/components/Dialog/Dialog.fragment.tsx","meta":{"name":"Dialog","description":"Modal overlay for focused user interactions. Use for confirmations, forms, or content requiring full attention.","category":"feedback","status":"stable","tags":["modal","dialog","overlay","popup","confirmation"],"since":"0.1.0"},"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"],"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>"}],"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>"]},"contract":{"propsSummary":["open: boolean - controlled open state","onOpenChange: (open) => void - open state handler","modal: boolean - blocks page interaction (default: true)","Dialog.Content size: sm|md|lg|xl|full - dialog width"],"a11yRules":["A11Y_DIALOG_FOCUS","A11Y_DIALOG_ESCAPE","A11Y_DIALOG_LABEL"]}},"EmptyState":{"filePath":"src/components/EmptyState/EmptyState.fragment.tsx","meta":{"name":"EmptyState","description":"Placeholder for empty content areas. Provides context, guidance, and actions when no data is available.","category":"feedback","status":"stable","tags":["empty","placeholder","no-data","zero-state","blank-slate"],"since":"0.1.0"},"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"],"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>"}],"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>"]},"contract":{"propsSummary":["size: sm|md|lg (default: md)","Sub-components: EmptyState.Icon, EmptyState.Title, EmptyState.Description, EmptyState.Actions"],"a11yRules":["A11Y_EMPTY_STATE_CONTENT"]}},"Field":{"filePath":"src/components/Field/Field.fragment.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","status":"stable","tags":["form","field","validation","label","error","input","accessible"],"since":"0.4.0"},"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}},"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":{"subComponents":["Label","Control","Description","Error","Validity"],"compositionPattern":"compound","commonPatterns":["<Field>\n  <Field.Label>...</Field.Label>\n  <Field.Control>...</Field.Control>\n  <Field.Description>...</Field.Description>\n</Field>"],"requiredChildren":["Label","Control"]}},"Fieldset":{"filePath":"src/components/Fieldset/Fieldset.fragment.tsx","meta":{"name":"Fieldset","description":"Groups related form fields with an accessible legend. Use to organize forms into logical sections.","category":"forms","status":"stable","tags":["form","fieldset","group","legend","accessible"],"since":"0.4.0"},"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"],"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":"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"],"a11yRules":["A11Y_FIELDSET_LEGEND"]},"ai":{"subComponents":["Legend"],"compositionPattern":"compound","commonPatterns":["<Fieldset>\n  <Fieldset.Legend>...</Fieldset.Legend>\n</Fieldset>"],"requiredChildren":["Legend"]}},"Form":{"filePath":"src/components/Form/Form.fragment.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","status":"stable","tags":["form","validation","errors","submit","server"],"since":"0.4.0"},"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 onFormSubmit for form submission handling","Field components with matching name prop display errors automatically","Use Grid inside Form or Fieldset for multi-column layouts"],"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},"onFormSubmit":{"type":"function","description":"Form submission handler","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 onFormSubmit={(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.Item colSpan=\"full\">\n      <Button type=\"submit\" variant=\"primary\">Create Account</Button>\n    </Grid.Item>\n  </Grid>\n</Form>"},{"name":"Profile settings","description":"Multi-section form with Fieldsets, switches, and radio group","code":"<Form onFormSubmit={(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  <Button type=\"submit\" variant=\"primary\">Save Changes</Button>\n</Form>"},{"name":"Contact form","description":"Contact form with select, textarea, and checkbox","code":"<Form onFormSubmit={(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.Item colSpan=\"full\">\n      <Button type=\"submit\" variant=\"primary\">Send Message</Button>\n    </Grid.Item>\n  </Grid>\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.Item colSpan=\"full\">\n      <Button type=\"submit\" variant=\"primary\">Submit</Button>\n    </Grid.Item>\n  </Grid>\n</Form>"}],"contract":{"propsSummary":["errors: Record<string, string | string[]> - server errors by field name","onFormSubmit: (event) => void - submission handler","onClearErrors: (name) => void - clear errors callback"],"a11yRules":["A11Y_FORM_LABEL"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Grid":{"filePath":"src/components/Grid/Grid.fragment.tsx","meta":{"name":"Grid","description":"Responsive grid layout for arranging items in columns with consistent spacing","category":"layout","status":"stable","tags":["grid","layout","columns","responsive"]},"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"],"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":"enum","description":"Gap between grid items, mapped to spacing tokens","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":"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 (default: md)","alignItems: start|center|end|stretch — vertical alignment","justifyItems: start|center|end|stretch — horizontal alignment","padding: none|sm|md|lg (default: none)"]}},"Header":{"filePath":"src/components/Header/Header.fragment.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","status":"stable","tags":["header","navigation","navbar","brand","layout","dropdown"],"since":"0.5.0"},"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.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","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"]}},"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":"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>"}],"ai":{"compositionPattern":"compound","subComponents":["SkipLink","Trigger","Brand","Nav","NavItem","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><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>"]}},"Icon":{"filePath":"src/components/Icon/Icon.fragment.tsx","meta":{"name":"Icon","description":"Wrapper for Phosphor icons with consistent sizing and semantic colors. Provides standardized icon rendering across the design system.","category":"display","status":"stable","tags":["icon","phosphor","visual","symbol","graphic"],"since":"0.1.0"},"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 to surrounding text weight for visual consistency","Use consistent sizes within the same context"],"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":{"icon":{"type":"union","description":"Phosphor icon component to render","required":true},"size":{"type":"enum","description":"Icon size","default":"md","required":false,"values":["xs","sm","md","lg","xl"]},"weight":{"type":"enum","description":"Icon stroke weight/style","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"]}},"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>"}],"contract":{"propsSummary":["icon: PhosphorIcon - icon component (required)","size: xs|sm|md|lg|xl - icon size","weight: thin|light|regular|bold|fill|duotone - stroke style","variant: default|primary|secondary|tertiary|accent|success|warning|error - color"],"a11yRules":["A11Y_ICON_LABEL","A11Y_COLOR_CONTRAST"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Image":{"filePath":"src/components/Image/Image.fragment.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","status":"stable","tags":["image","media","photo","picture","visual"],"since":"0.1.0"},"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"],"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}},"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"],"a11yRules":["A11Y_IMG_ALT","A11Y_IMG_DECORATIVE"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Input":{"filePath":"src/components/Input/Input.fragment.tsx","meta":{"name":"Input","description":"Text input field for single-line user data entry","category":"forms","status":"stable","tags":["form","input","text"]},"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"],"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":"","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},"helperText":{"type":"string","description":"Helper or error message below input","required":false},"shortcut":{"type":"string","description":"Keyboard shortcut hint displayed inside the input","required":false},"onChange":{"type":"function","description":"Called with new value on change","required":false},"onBlur":{"type":"function","description":"","required":false},"onFocus":{"type":"function","description":"","required":false},"onKeyDown":{"type":"function","description":"","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},"name":{"type":"string","description":"","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 />"}],"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","error: boolean - shows error styling","helperText: string - helper/error message"],"a11yRules":["A11Y_INPUT_LABEL","A11Y_INPUT_ERROR","A11Y_INPUT_REQUIRED"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Link":{"filePath":"src/components/Link/Link.fragment.tsx","meta":{"name":"Link","description":"Styled anchor element for navigation. Supports internal and external links with consistent visual treatment.","category":"navigation","status":"stable","tags":["link","anchor","navigation","href","url"],"since":"0.1.0"},"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 (use Card with onClick)"],"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"],"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 onto the single child. Useful for rendering as Next.js Link for client-side navigation.","default":false,"required":false},"className":{"type":"string","description":"Additional class name","required":false},"style":{"type":"object","description":"Inline styles","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. Useful with Next.js Link for client-side navigation.","code":"<Link asChild variant=\"subtle\">\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 - render as child element for polymorphic usage (e.g. Next.js Link)"],"a11yRules":["A11Y_LINK_TEXT","A11Y_LINK_FOCUS"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"List":{"filePath":"src/components/List/List.fragment.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","status":"stable","tags":["list","items","bullet","ordered","unordered"],"since":"0.1.0"},"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"]}},"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":{"subComponents":["Item"],"compositionPattern":"compound","commonPatterns":["<List>\n  <List.Item>...</List.Item>\n</List>"],"requiredChildren":["Item"]}},"Listbox":{"filePath":"src/components/Listbox/Listbox.fragment.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","status":"stable","tags":["listbox","search","autocomplete","combobox","command","dropdown"],"since":"0.3.0"},"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","Implement keyboard navigation (arrow keys, enter, escape) in parent","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}},"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>"}],"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>"]},"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"]}},"Loading":{"filePath":"src/components/Loading/Loading.fragment.tsx","meta":{"name":"Loading","description":"Versatile loading indicator with multiple variants for showing progress or waiting states","category":"feedback","status":"stable","tags":["loading","spinner","progress","feedback","indicator","async"]},"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' }}>\n  <Loading.Screen size=\"lg\" label=\"Loading application...\" showLabel />\n</div>"}],"ai":{"subComponents":["Inline","Screen"],"compositionPattern":"compound"}},"Markdown":{"filePath":"src/components/Markdown/Markdown.fragment.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","status":"stable","tags":["markdown","prose","content","text","ai","chat"],"since":"0.7.0","dependencies":[{"name":"react-markdown","version":">=9.0.0","reason":"Markdown parsing and rendering"},{"name":"remark-gfm","version":">=4.0.0","reason":"GitHub Flavored Markdown support (optional)"}]},"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","Falls back to plain text paragraphs if react-markdown is not installed"],"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 })","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","className: string - Additional CSS class"],"a11yRules":["A11Y_SEMANTIC_HTML"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Menu":{"filePath":"src/components/Menu/Menu.fragment.tsx","meta":{"name":"Menu","description":"Dropdown menu for actions and commands. Use for contextual actions, overflow menus, or grouped commands.","category":"feedback","status":"stable","tags":["menu","dropdown","actions","context-menu","commands"],"since":"0.1.0"},"usage":{"when":["Overflow actions that dont fit in the toolbar","Context menus (right-click)","User account menus","Grouped actions with separators"],"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"],"accessibility":["Full keyboard navigation with arrow keys","Type-ahead search for items","Focus returns to trigger on close","Proper ARIA menu roles"]},"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 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>"}],"ai":{"compositionPattern":"compound","subComponents":["Trigger","Content","Item","CheckboxItem","RadioGroup","RadioItem","Group","GroupLabel","Separator"],"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>"]},"contract":{"propsSummary":["open: boolean - controlled open state","onOpenChange: (open) => void - state handler","Menu.Item danger: boolean - destructive styling","Menu.Item shortcut: string - keyboard shortcut text"],"a11yRules":["A11Y_MENU_KEYBOARD","A11Y_MENU_ROLE"]}},"Message":{"filePath":"src/components/Message/Message.fragment.tsx","meta":{"name":"Message","description":"Individual chat message display with role-based styling","category":"ai","status":"stable","tags":["message","chat","ai","conversation","bubble"]},"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)","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":"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"],"a11yRules":["A11Y_COLOR_CONTRAST","A11Y_MOTION_PREFERENCE"]},"ai":{"subComponents":["Content","Actions","Timestamp","Avatar"],"compositionPattern":"compound","commonPatterns":["<Message>\n  <Message.Content>...</Message.Content>\n</Message>"],"requiredChildren":["Content"]}},"NavigationMenu":{"filePath":"src/components/NavigationMenu/NavigationMenu.fragment.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","status":"stable","tags":["navigation","menu","header","dropdown","navbar","mobile","responsive","drawer"],"since":"0.9.0"},"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","Triggers open on hover (desktop) with configurable delay"],"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}},"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>"}],"ai":{"compositionPattern":"compound","subComponents":["List","Item","Trigger","Content","Link","Indicator","Viewport","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>"]},"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)","NavigationMenu.Link: title + description + icon for structured links, or children for simple links","NavigationMenu.MobileContent: slot for extra mobile-only sections"],"a11yRules":["A11Y_DISCLOSURE_PATTERN","A11Y_KEYBOARD_NAV","A11Y_FOCUS_TRAP"]}},"Popover":{"filePath":"src/components/Popover/Popover.fragment.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","status":"stable","tags":["popover","overlay","dropdown","floating","contextual"],"since":"0.1.0"},"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"],"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>"}],"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>"]},"contract":{"propsSummary":["open: boolean - controlled open state","onOpenChange: (open) => void - state handler","modal: boolean - blocks page interaction (default: false)","Popover.Content side: top|bottom|left|right - position"],"a11yRules":["A11Y_POPOVER_FOCUS","A11Y_POPOVER_ESCAPE","A11Y_TARGET_SIZE_MIN"]}},"Progress":{"filePath":"src/components/Progress/Progress.fragment.tsx","meta":{"name":"Progress","description":"Visual indicator of task completion or loading state. Available in linear and circular variants.","category":"feedback","status":"stable","tags":["progress","loading","indicator","percentage","status"],"since":"0.1.0"},"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"],"accessibility":["Uses role=\"progressbar\" with aria-valuenow","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","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}},"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"],"a11yRules":["A11Y_PROGRESS_ROLE","A11Y_PROGRESS_VALUE"]},"ai":{"subComponents":["Root","Circular"],"compositionPattern":"compound"}},"Prompt":{"filePath":"src/components/Prompt/Prompt.fragment.tsx","meta":{"name":"Prompt","description":"Multi-line input with toolbar for AI/chat interfaces","category":"ai","status":"stable","tags":["prompt","chat","ai","input","textarea","form"]},"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","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"]}},"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":"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)"],"a11yRules":["A11Y_TEXTAREA_LABEL","A11Y_BUTTON_LABEL"]},"ai":{"subComponents":["Textarea","Toolbar","Actions","Info","ActionButton","ModeButton","Usage","Submit"],"compositionPattern":"compound","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"]}},"RadioGroup":{"filePath":"src/components/RadioGroup/RadioGroup.fragment.tsx","meta":{"name":"RadioGroup","description":"Single selection from a list of mutually exclusive options","category":"forms","status":"stable","tags":["form","radio","selection","options"]},"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 descriptions 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},"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},"error":{"type":"string","description":"Error message","required":false},"size":{"type":"enum","description":"Size variant","default":"md","required":false,"values":["sm","md","lg"]},"children":{"type":"node","description":"RadioGroup.Item elements","required":true}},"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 Descriptions","description":"Radio items with additional context","code":"<RadioGroup defaultValue=\"standard\" label=\"Shipping Method\">\n  <RadioGroup.Item\n    value=\"standard\"\n    label=\"Standard\"\n    description=\"5-7 business days\"\n  />\n  <RadioGroup.Item\n    value=\"express\"\n    label=\"Express\"\n    description=\"2-3 business days\"\n  />\n  <RadioGroup.Item\n    value=\"overnight\"\n    label=\"Overnight\"\n    description=\"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 Error","description":"Validation error state","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>"}],"contract":{"propsSummary":["value: string - selected value","onValueChange: (value: string) => void","orientation: horizontal|vertical (default: vertical)","size: sm|md|lg (default: md)","disabled: boolean - disable all options"],"a11yRules":["A11Y_RADIO_GROUP","A11Y_LABEL_REQUIRED","A11Y_TARGET_SIZE_MIN"]},"ai":{"subComponents":["Item"],"compositionPattern":"compound","commonPatterns":["<RadioGroup>\n  <RadioGroup.Item>...</RadioGroup.Item>\n</RadioGroup>"],"requiredChildren":["Item"]}},"ScrollArea":{"filePath":"src/components/ScrollArea/ScrollArea.fragment.tsx","meta":{"name":"ScrollArea","description":"A styled scrollable container with thin scrollbars and optional fade indicators.","category":"layout","status":"stable","tags":["scroll","overflow","scrollbar","container","layout"],"since":"0.4.0"},"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 `hover` scrollbar visibility keeps the UI clean until the user interacts","Combine with `orientation=\"horizontal\"` for tab bars and chip rows"],"accessibility":["Preserves native scroll behavior and keyboard support","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}},"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 show when content is scrollable in either direction.","code":"<ScrollArea orientation=\"horizontal\" showFades>\n  {/* Overflowing content */}\n</ScrollArea>"},{"name":"Hover Scrollbar","description":"Scrollbar is hidden until the user hovers over the scroll area.","code":"<ScrollArea scrollbarVisibility=\"hover\" style={{ height: '200px' }}>\n  {/* Content */}\n</ScrollArea>"}],"ai":{"commonPatterns":["<ScrollArea orientation=\"horizontal\"><div style={{ display: \"flex\", gap: 8 }}>{items}</div></ScrollArea>","<ScrollArea style={{ height: 300 }}>{longContent}</ScrollArea>"],"subComponents":["Root"],"compositionPattern":"compound"},"contract":{"propsSummary":["orientation: horizontal|vertical|both - scroll direction","scrollbarVisibility: auto|always|hover - scrollbar display mode","showFades: boolean - gradient edge indicators"]}},"Select":{"filePath":"src/components/Select/Select.fragment.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","status":"stable","tags":["select","dropdown","form","options","picker"],"since":"0.1.0"},"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","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","required":true},"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},"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},"disabled":{"type":"boolean","description":"Disable the select","default":"false","required":false},"required":{"type":"boolean","description":"","required":false},"name":{"type":"string","description":"","required":false},"placeholder":{"type":"string","description":"Placeholder text when no value selected","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 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>"}],"ai":{"compositionPattern":"compound","subComponents":["Trigger","Content","Item","Group","GroupLabel"],"requiredChildren":["Trigger","Content"],"commonPatterns":["<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 - controlled selected value","onValueChange: (value) => void - selection handler","placeholder: string - placeholder text","disabled: boolean - disable select","maxVisibleItems: number - max visible options before scrolling (default 4)"],"a11yRules":["A11Y_SELECT_KEYBOARD","A11Y_SELECT_LABEL"]}},"Separator":{"filePath":"src/components/Separator/Separator.fragment.tsx","meta":{"name":"Separator","description":"Visual divider between content sections. Use to create clear visual boundaries and improve content organization.","category":"layout","status":"stable","tags":["separator","divider","hr","line","layout"],"since":"0.1.0"},"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}},"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":{"subComponents":["Root"],"compositionPattern":"compound"}},"Sidebar":{"filePath":"src/components/Sidebar/Sidebar.fragment.tsx","meta":{"name":"Sidebar","description":"Responsive navigation sidebar with collapsible desktop mode and mobile drawer behavior.","category":"navigation","status":"stable","tags":["sidebar","navigation","drawer","menu","layout"],"since":"0.3.0"},"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 `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)","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":"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"]}},"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}"}],"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>"]},"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)"],"a11yRules":["A11Y_NAV_LANDMARK","A11Y_FOCUS_TRAP","A11Y_ESCAPE_CLOSE"]}},"Skeleton":{"filePath":"src/components/Skeleton/Skeleton.fragment.tsx","meta":{"name":"Skeleton","description":"Placeholder loading state for content","category":"feedback","status":"stable","tags":["loading","placeholder","skeleton","shimmer"]},"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"],"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},"className":{"type":"string","description":"Additional class name","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"]},"ai":{"subComponents":["Text","Circle"],"compositionPattern":"compound"}},"Slider":{"filePath":"src/components/Slider/Slider.fragment.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","status":"stable","tags":["slider","range","input","number","control"],"since":"0.2.0"},"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},"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},"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},"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}},"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":"{\n  const [value, setValue] = React.useState(50);\n  return (\n    <div style={{ width: '300px', display: 'flex', flexDirection: 'column', gap: '12px' }}>\n      <Slider\n        label=\"Opacity\"\n        value={value}\n        onChange={setValue}\n        showValue\n        valueSuffix=\"%\"\n      />\n      <div style={{ fontSize: '14px', color: 'var(--fui-text-secondary)' }}>\n        Current value: {value}%\n      </div>\n    </div>\n  );\n}"},{"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","min/max: number - range bounds","step: number - increment size","label: string - field label","showValue: boolean - display value","valueSuffix: string - unit suffix"],"a11yRules":["A11Y_LABEL_REQUIRED","A11Y_KEYBOARD_ACCESSIBLE","A11Y_TARGET_SIZE_MIN"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Stack":{"filePath":"src/components/Stack/Stack.fragment.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","status":"stable","tags":["stack","layout","flex","spacing","responsive"],"since":"0.2.0"},"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"],"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\", 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":"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|{responsive} - spacing","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"],"a11yRules":["A11Y_SEMANTIC_ELEMENTS"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Table":{"filePath":"src/components/Table/Table.fragment.tsx","meta":{"name":"Table","description":"Data table with sorting and row selection. Use for displaying structured data that needs to be scanned, compared, or acted upon.","category":"display","status":"stable","tags":["table","data","grid","list","sorting"],"since":"0.1.0","dependencies":[{"name":"@tanstack/react-table","version":">=8.0.0","reason":"Table state management and rendering"}]},"usage":{"when":["Displaying structured, tabular data","Data that users need to scan and compare","Lists with multiple attributes per item","Data that needs sorting or selection"],"whenNot":["Simple lists (use List component)","Card-based layouts (use Grid with Cards)","Heavily interactive data (consider DataGrid)","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"],"accessibility":["Proper table semantics with headers","Sortable columns are keyboard accessible","Row selection is properly announced"]},"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},"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","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}},"relations":[{"component":"EmptyState","relationship":"sibling","note":"Use EmptyState for empty table states"},{"component":"Badge","relationship":"sibling","note":"Use Badge for status columns"}],"variants":[{"name":"Default","description":"Basic data table","code":"<Table\n  columns={columns}\n  data={sampleUsers}\n/>"},{"name":"Sortable","description":"Table with sortable columns","code":"<Table\n  columns={columns}\n  data={sampleUsers}\n  sortable\n/>"},{"name":"Clickable Rows","description":"Table with clickable rows","code":"<Table\n  columns={columns}\n  data={sampleUsers}\n  onRowClick={(row) => alert(`Clicked: ${row.name}`)}\n/>"},{"name":"Compact","description":"Smaller, denser table","code":"<Table\n  columns={columns}\n  data={sampleUsers}\n  size=\"sm\"\n/>"},{"name":"Striped","description":"Table with alternating row backgrounds","code":"<Table\n  columns={columns}\n  data={sampleUsers}\n  striped\n/>"},{"name":"Bordered","description":"Table with bordered container","code":"<Table\n  columns={columns}\n  data={sampleUsers}\n  bordered\n/>"},{"name":"Empty State","description":"Table with no data","code":"<Table\n  columns={columns}\n  data={[]}\n  emptyMessage=\"No users found\"\n/>"}],"ai":{"compositionPattern":"simple","commonPatterns":["<Table columns={[{header:\"Name\",accessorKey:\"name\"},{header:\"Status\",accessorKey:\"status\"}]} data={[{name:\"Item 1\",status:\"Active\"}]} />"],"subComponents":["Root","Columns"]},"contract":{"propsSummary":["columns: ColumnDef[] - column definitions","data: T[] - row data array","sortable: boolean - enable sorting","selectable: boolean - enable row selection","size: sm|md - table density","striped: boolean - alternating row backgrounds","bordered: boolean - bordered container"],"a11yRules":["A11Y_TABLE_HEADERS","A11Y_TABLE_SORT"]}},"TableOfContents":{"filePath":"src/components/TableOfContents/TableOfContents.fragment.tsx","meta":{"name":"TableOfContents","description":"Sticky sidebar navigation for long-form content. Renders heading links with active state highlighting for scroll spy integration.","category":"navigation","status":"stable","tags":["toc","table-of-contents","navigation","sidebar","scroll-spy","headings"],"since":"0.9.0"},"usage":{"when":["Long-form content pages (docs, blog posts, articles)","Component documentation with multiple sections","Any page with 3+ headings that benefits 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 indent on sub-headings (h3) to show hierarchy","Place in a sticky aside for best UX","Heading IDs must match between TOC items and the actual DOM headings"],"accessibility":["Uses <nav aria-label=\"Table of contents\"> for landmark navigation","Active item is marked with aria-current=\"true\"","All items are links with smooth scroll behavior","Focus-visible ring on keyboard navigation"]},"props":{"children":{"type":"node","description":"TableOfContents.Item 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":"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>"}],"ai":{"compositionPattern":"compound","subComponents":["Item"],"requiredChildren":["Item"],"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>"]},"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 as current","TableOfContents.Item indent: boolean - indent for sub-headings"],"a11yRules":["A11Y_NAV_LANDMARK","A11Y_ARIA_CURRENT"]}},"Tabs":{"filePath":"src/components/Tabs/Tabs.fragment.tsx","meta":{"name":"Tabs","description":"Organize content into switchable panels. Use for related content that benefits from a compact, navigable layout.","category":"navigation","status":"stable","tags":["tabs","navigation","panels","content-switcher"],"since":"0.1.0"},"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":"union","description":"Initially active tab (uncontrolled)","required":false},"value":{"type":"union","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"]}},"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\">\n  <Tabs.List variant=\"underline\">\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\">\n  <Tabs.List variant=\"pills\">\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\">\n  <Tabs.List variant=\"underline\">\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>"}],"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>"]},"contract":{"propsSummary":["value: string - controlled active tab","defaultValue: string - initial active tab","onValueChange: (value) => void - tab change handler","Tabs.List variant: underline|pills - visual style"],"a11yRules":["A11Y_TABS_KEYBOARD","A11Y_TABS_LABELS"]}},"Text":{"filePath":"src/components/Text/Text.fragment.tsx","meta":{"name":"Text","description":"Typography component for rendering text with consistent styling. Supports various sizes, weights, colors, and semantic elements.","category":"display","status":"stable","tags":["text","typography","heading","paragraph","font"],"since":"0.2.0"},"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":"string","description":"","required":false},"size":{"type":"enum","description":"Font size","required":false,"values":["2xs","xs","sm","base","lg","xl","2xl"]},"weight":{"type":"enum","description":"Font weight","required":false,"values":["normal","medium","semibold"]},"color":{"type":"enum","description":"Text color","required":false,"values":["primary","secondary","tertiary"]},"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}},"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)</Text>\n  <Text size=\"xs\">Extra small (xs)</Text>\n  <Text size=\"sm\">Small (sm)</Text>\n  <Text size=\"base\">Base size</Text>\n  <Text size=\"lg\">Large (lg)</Text>\n  <Text size=\"xl\">Extra large (xl)</Text>\n  <Text size=\"2xl\">Extra extra large (2xl)</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</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</div>"},{"name":"Semantic Elements","description":"Using appropriate HTML elements","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n  <Text as=\"h1\" size=\"2xl\" weight=\"semibold\">Heading 1</Text>\n  <Text as=\"h2\" size=\"xl\" weight=\"semibold\">Heading 2</Text>\n  <Text as=\"h3\" size=\"lg\" weight=\"medium\">Heading 3</Text>\n  <Text as=\"p\" 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 @fragments-sdk/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|lg|xl|2xl - font size","weight: normal|medium|semibold - font weight","color: primary|secondary|tertiary - text color","font: sans|mono - font family","truncate: boolean - enable truncation","lineClamp: number - max lines"],"a11yRules":["A11Y_HEADING_HIERARCHY","A11Y_SEMANTIC_ELEMENTS"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Textarea":{"filePath":"src/components/Textarea/Textarea.fragment.tsx","meta":{"name":"Textarea","description":"Multi-line text input for longer form content","category":"forms","status":"stable","tags":["input","text","form","multiline"]},"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"]},"disabled":{"type":"boolean","description":"Disabled state","default":false,"required":false},"error":{"type":"boolean","description":"Error state","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 value changes","required":false},"onBlur":{"type":"function","description":"Called when textarea loses 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","default":false,"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}},"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/>"}],"contract":{"propsSummary":["value: string - controlled value","rows: number - visible rows (default: 3)","label: string - label text","error: boolean - error state","disabled: boolean - disabled state","resize: none|vertical|horizontal|both"],"a11yRules":["A11Y_LABEL_REQUIRED"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}},"Theme":{"filePath":"src/components/Theme/Theme.fragment.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","status":"stable","tags":["theme","dark-mode","light-mode","provider","toggle"],"since":"0.5.0"},"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"],"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"]},"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"]}},"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"],"a11yRules":["A11Y_TARGET_SIZE_MIN"]},"ai":{"subComponents":["Root","Provider","Toggle","useTheme"],"compositionPattern":"compound"}},"ThinkingIndicator":{"filePath":"src/components/ThinkingIndicator/ThinkingIndicator.fragment.tsx","meta":{"name":"ThinkingIndicator","description":"Animated indicator showing AI is processing","category":"ai","status":"stable","tags":["thinking","loading","ai","processing","indicator","animation"]},"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":{"subComponents":["Steps","Step"],"compositionPattern":"compound"}},"Toast":{"filePath":"src/components/Toast/Toast.fragment.tsx","meta":{"name":"Toast","description":"Brief, non-blocking notification messages","category":"feedback","status":"stable","tags":["notification","alert","message","feedback"]},"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"],"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":5000,"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","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"],"a11yRules":["A11Y_ALERT_ROLE","A11Y_TARGET_SIZE_MIN"]},"ai":{"subComponents":["Provider"],"compositionPattern":"compound"}},"Switch":{"filePath":"src/components/Toggle/Toggle.fragment.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","status":"stable","tags":["switch","toggle","boolean","settings","preference"],"since":"0.1.0"},"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 a description 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":"","required":false},"onChange":{"type":"function","description":"Callback with new checked state: (checked: boolean) => void","required":false},"label":{"type":"string","description":"Visible label text","required":false},"description":{"type":"string","description":"Helper text shown below the label","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"]},"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}},"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 Description","description":"Switch with explanatory helper text","code":"<StatefulSwitch\n  checked\n  label=\"Auto-save\"\n  description=\"Automatically save changes as you type\"\n/>","args":{"checked":true,"label":"Auto-save","description":"Automatically save changes as you type"}},{"name":"Small Size","description":"Compact switch for dense settings panels","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n  <StatefulSwitch size=\"sm\" checked label=\"Show line numbers\" />\n  <StatefulSwitch size=\"sm\" label=\"Word wrap\" />\n  <StatefulSwitch size=\"sm\" checked label=\"Minimap\" />\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    description=\"Receive push notifications on your device\"\n  />\n  <StatefulSwitch\n    checked\n    label=\"Email digest\"\n    description=\"Weekly summary of your activity\"\n  />\n  <StatefulSwitch\n    label=\"Marketing emails\"\n    description=\"Product updates and promotional offers\"\n  />\n</div>"}],"contract":{"propsSummary":["checked: boolean - on/off state","onChange: (checked) => void - state change handler","label: string - visible label text","description: string - helper text below label","disabled: boolean - non-interactive state","size: sm|md - switch size"],"a11yRules":["A11Y_SWITCH_ROLE","A11Y_SWITCH_LABEL","A11Y_SWITCH_FOCUS","A11Y_TARGET_SIZE_MIN"]}},"ToggleGroup":{"filePath":"src/components/ToggleGroup/ToggleGroup.fragment.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","status":"stable","tags":["toggle","group","fragmented","control","tabs","switch"],"since":"0.2.0"},"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)","Ensure adequate touch targets on mobile"],"accessibility":["Uses role=\"group\" for semantic grouping","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":true},"onChange":{"type":"function","description":"Called with new value when selection changes","required":true},"children":{"type":"node","description":"ToggleGroup.Item components","required":true},"variant":{"type":"enum","description":"Visual style","default":"default","required":false,"values":["default","pills","outline"]},"size":{"type":"enum","description":"Size variant","default":"md","required":false,"values":["sm","md"]},"gap":{"type":"enum","description":"Gap between items (pills/outline variants)","default":"xs","required":false,"values":["sm","none","xs"]}},"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=\"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":"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 - selected value (required)","onChange: (value: string) => void - change handler (required)","children: ToggleGroup.Item[] - toggle items","variant: default|pills|outline - visual style","size: sm|md - size variant","gap: none|xs|sm - spacing"],"a11yRules":["A11Y_GROUP_ROLE","A11Y_KEYBOARD_ACCESSIBLE"]},"ai":{"subComponents":["Item"],"compositionPattern":"compound","commonPatterns":["<ToggleGroup>\n  <ToggleGroup.Item>...</ToggleGroup.Item>\n</ToggleGroup>"],"requiredChildren":["Item"]}},"Tooltip":{"filePath":"src/components/Tooltip/Tooltip.fragment.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","status":"stable","tags":["tooltip","hint","help","hover","contextual"],"since":"0.1.0"},"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"],"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}},"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>"}],"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)"],"a11yRules":["A11Y_TOOLTIP_FOCUS","A11Y_TOOLTIP_ROLE"]},"ai":{"subComponents":["Root","Provider"],"compositionPattern":"compound"}},"VisuallyHidden":{"filePath":"src/components/VisuallyHidden/VisuallyHidden.fragment.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","status":"stable","tags":["accessibility","a11y","screen-reader","hidden","sr-only"],"since":"0.1.0"},"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"],"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"],"a11yRules":["A11Y_SR_ONLY","A11Y_ICON_LABEL"]},"ai":{"subComponents":["Root"],"compositionPattern":"compound"}}},"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"]},"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"]},"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"]},"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"]},"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 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"]},"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":120,"categories":{"base":[{"name":"--fui-base-unit","value":"7px"}],"typography":[{"name":"--fui-font-sans","value":"'Geist Sans', 'Geist', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"},{"name":"--fui-font-mono","value":"'Geist Mono', 'SF Mono', SFMono-Regular, ui-monospace, 'Cascadia Code', 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":"1.143rem"},{"name":"--fui-font-size-lg","value":"1.286rem"},{"name":"--fui-font-size-xl","value":"1.714rem"},{"name":"--fui-font-size-2xl","value":"2.143rem"},{"name":"--fui-font-weight-normal","value":"400"},{"name":"--fui-font-weight-medium","value":"500"},{"name":"--fui-font-weight-semibold","value":"600"},{"name":"--fui-line-height-tight","value":"1.25"},{"name":"--fui-line-height-normal","value":"1.5"},{"name":"--fui-line-height-relaxed","value":"1.625"}],"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-padding-container-sm","value":"1.5rem"},{"name":"--fui-padding-container-md","value":"2rem"},{"name":"--fui-padding-container-lg","value":"3rem"},{"name":"--fui-padding-container-xl","value":"4rem"},{"name":"--fui-padding-inline-sm","value":"1rem"},{"name":"--fui-padding-inline-md","value":"1.5rem"},{"name":"--fui-padding-inline-lg","value":"2rem"},{"name":"--fui-padding-item-xs","value":"0.5rem"},{"name":"--fui-padding-item-sm","value":"1rem"},{"name":"--fui-padding-item-md","value":"1.5rem"},{"name":"--fui-padding-item-lg","value":"2rem"}],"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"}],"transitions":[{"name":"--fui-transition-fast","value":"150ms ease"},{"name":"--fui-transition-normal","value":"200ms ease"}],"colors":[{"name":"--fui-color-accent","value":"#f2f2f2"},{"name":"--fui-color-accent-hover","value":"rgb(218, 218, 218)"},{"name":"--fui-color-accent-active","value":"rgb(203, 203, 203)"},{"name":"--fui-color-danger","value":"#ef4444"},{"name":"--fui-color-danger-hover","value":"rgb(237, 40, 40)"},{"name":"--fui-color-success","value":"#22c55e"},{"name":"--fui-color-warning","value":"#f59e0b"},{"name":"--fui-color-info","value":"#3b82f6"},{"name":"--fui-color-danger-bg","value":"rgba(239, 68, 68, 0.15)"},{"name":"--fui-color-success-bg","value":"rgba(34, 197, 94, 0.15)"},{"name":"--fui-color-warning-bg","value":"rgba(245, 158, 11, 0.15)"},{"name":"--fui-color-info-bg","value":"rgba(59, 130, 246, 0.15)"},{"name":"--fui-color-danger-text","value":"rgb(241, 96, 96)"},{"name":"--fui-color-success-text","value":"#22c55e"},{"name":"--fui-color-warning-text","value":"#f59e0b"},{"name":"--fui-color-info-text","value":"rgb(79, 142, 247)"},{"name":"--fui-backdrop","value":"rgba(0, 0, 0, 0.8)"}],"surfaces":[{"name":"--fui-bg-primary","value":"#09090b"},{"name":"--fui-bg-secondary","value":"#18181b"},{"name":"--fui-bg-tertiary","value":"#27272a"},{"name":"--fui-bg-elevated","value":"rgb(28, 28, 31)"},{"name":"--fui-bg-subtle","value":"rgb(17, 17, 19)"},{"name":"--fui-bg-hover","value":"rgba(0, 0, 0, 0.12)"},{"name":"--fui-bg-active","value":"rgba(0, 0, 0, 0.18)"}],"text":[{"name":"--fui-text-primary","value":"#f4f4f5"},{"name":"--fui-text-secondary","value":"#a1a1aa"},{"name":"--fui-text-tertiary","value":"#71717a"},{"name":"--fui-text-inverse","value":"#18181b"}],"borders":[{"name":"--fui-border","value":"var(--fui-text-primary)"},{"name":"--fui-border-default","value":"rgba(255, 255, 255, 0.08)"},{"name":"--fui-border-strong","value":"var(--fui-text-primary)"}],"shadows":[{"name":"--fui-shadow-sm","value":"0 1px 2px 0 rgba(0, 0, 0, 0.2)"},{"name":"--fui-shadow-md","value":"0 2px 4px -1px rgba(0, 0, 0, 0.25), 0 1px 3px -2px rgba(0, 0, 0, 0.2)"},{"name":"--fui-shadow-lg","value":"0 8px 12px -3px rgba(0, 0, 0, 0.35), 0 3px 5px -4px rgba(0, 0, 0, 0.25)"}],"focus":[{"name":"--fui-focus-ring-color","value":"#f2f2f2"},{"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":"#27272a"},{"name":"--fui-scrollbar-thumb","value":"#52525b"},{"name":"--fui-scrollbar-thumb-hover","value":"#71717a"}],"component-sizing":[{"name":"--fui-button-height-sm","value":"2rem"},{"name":"--fui-button-height-md","value":"2.5714285714rem"},{"name":"--fui-button-height-lg","value":"3.1428571429rem"},{"name":"--fui-input-height","value":"2.8571428571rem"},{"name":"--fui-input-height-sm","value":"2rem"},{"name":"--fui-input-height-lg","value":"3.1428571429rem"},{"name":"--fui-target-size-min","value":"1.714rem"},{"name":"--fui-target-size-comfortable","value":"2.2857142857rem"}],"layout":[{"name":"--fui-appshell-header-height","value":"56px"},{"name":"--fui-appshell-sidebar-width","value":"240px"},{"name":"--fui-appshell-sidebar-collapsed-width","value":"64px"},{"name":"--fui-appshell-aside-width","value":"280px"},{"name":"--fui-header-z-index","value":"40"}],"code":[{"name":"--fui-code-bg","value":"var(--fui-bg-elevated)"},{"name":"--fui-code-header-bg","value":"var(--fui-bg-elevated)"},{"name":"--fui-code-text","value":"#d4d4d4"},{"name":"--fui-code-text-muted","value":"#6b7280"},{"name":"--fui-code-border","value":"rgba(255, 255, 255, 0.1)"},{"name":"--fui-code-tab-bg","value":"rgba(255, 255, 255, 0.03)"},{"name":"--fui-code-tab-border","value":"rgba(255, 255, 255, 0.08)"},{"name":"--fui-code-tab-text","value":"#9ca3af"},{"name":"--fui-code-tab-text-active","value":"#e5e7eb"},{"name":"--fui-code-copy-bg","value":"rgba(255, 255, 255, 0.1)"},{"name":"--fui-code-copy-bg-hover","value":"rgba(255, 255, 255, 0.15)"},{"name":"--fui-code-highlight-bg","value":"rgba(255, 255, 255, 0.08)"},{"name":"--fui-code-selection-bg","value":"rgba(59, 130, 246, 0.4)"},{"name":"--fui-code-scrollbar-track","value":"rgba(255, 255, 255, 0.05)"},{"name":"--fui-code-scrollbar-thumb","value":"rgba(255, 255, 255, 0.15)"},{"name":"--fui-code-scrollbar-thumb-hover","value":"rgba(255, 255, 255, 0.25)"}],"tooltip":[{"name":"--fui-tooltip-bg","value":"#1e293b"},{"name":"--fui-tooltip-text","value":"#f8fafc"},{"name":"--fui-tooltip-shadow","value":"0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.15)"}],"marketing":[{"name":"--fui-hero-gradient-color","value":"rgba(120, 119, 198, 0.15)"}]}},"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":"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"]},{"name":"Checkbox","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Chip","category":"forms","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":"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":"ConversationList","category":"ai","status":"stable","compositionPattern":"compound","subComponents":["DateSeparator","TypingIndicator"]},{"name":"DatePicker","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Trigger","Content","Calendar","Preset"]},{"name":"Dialog","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Trigger","Content","Close","Header","Title","Description","Body","Footer"]},{"name":"EmptyState","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Icon","Title","Description","Actions"]},{"name":"Field","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Label","Control","Description","Error","Validity"]},{"name":"Fieldset","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Legend"]},{"name":"Form","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Grid","category":"layout","status":"stable"},{"name":"Header","category":"navigation","status":"stable","compositionPattern":"compound","subComponents":["SkipLink","Trigger","Brand","Nav","NavItem","NavMenu","NavMenuItem","Search","Spacer","Actions"]},{"name":"Icon","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Image","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Input","category":"forms","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":"forms","status":"stable","compositionPattern":"compound","subComponents":["Item","Group","Empty"]},{"name":"Loading","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Inline","Screen"]},{"name":"Markdown","category":"display","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Menu","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Trigger","Content","Item","CheckboxItem","RadioGroup","RadioItem","Group","GroupLabel","Separator"]},{"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","MobileContent","MobileSection"]},{"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","Actions","Info","ActionButton","ModeButton","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":"Slider","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Stack","category":"layout","status":"stable","compositionPattern":"compound","subComponents":["Root"]},{"name":"Table","category":"display","status":"stable","compositionPattern":"simple","subComponents":["Root","Columns"]},{"name":"TableOfContents","category":"navigation","status":"stable","compositionPattern":"compound","subComponents":["Item"]},{"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":"Switch","category":"forms","status":"stable"},{"name":"ToggleGroup","category":"forms","status":"stable","compositionPattern":"compound","subComponents":["Item"]},{"name":"Tooltip","category":"feedback","status":"stable","compositionPattern":"compound","subComponents":["Root","Provider"]},{"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":"CodeBlock","t":"Button","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":"Header","t":"Sidebar","ty":"hook-depends","w":0.75,"p":"source:Header/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":"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":"Avatar","t":"Stack","ty":"renders","w":0.5,"p":"variant:Avatar"},{"s":"Badge","t":"Stack","ty":"renders","w":0.5,"p":"variant:Badge"},{"s":"ButtonGroup","t":"Button","ty":"renders","w":0.5,"p":"variant:ButtonGroup"},{"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":"ConversationList","t":"Message","ty":"renders","w":0.5,"p":"variant:ConversationList"},{"s":"Dialog","t":"Button","ty":"renders","w":0.5,"p":"variant:Dialog"},{"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":"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":"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":"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":"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":"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":"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":"Avatar","t":"Avatar","ty":"parent-of","w":1,"p":"relation","no":"Use Avatar.Group for stacked avatar displays"},{"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":"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":"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":"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":"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":"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":"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":"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":"Table","t":"EmptyState","ty":"sibling-of","w":0.75,"p":"relation","no":"Use EmptyState for empty table states"},{"s":"Table","t":"Badge","ty":"sibling-of","w":0.75,"p":"relation","no":"Use Badge for status columns"},{"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":"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":"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":"Button","degree":49},{"name":"Input","degree":46},{"name":"Stack","degree":44},{"name":"Card","degree":37},{"name":"Text","degree":37},{"name":"Sidebar","degree":34},{"name":"AppShell","degree":32},{"name":"Tabs","degree":32},{"name":"Badge","degree":31},{"name":"Header","degree":31}],"compositionCoverage":50,"connectedComponents":[["Accordion","Alert","AppShell","Avatar","Badge","Box","Breadcrumbs","Button","ButtonGroup","Card","Chart","ChartContainer","ChartTooltip","Checkbox","Chip","CodeBlock","Collapsible","ColorPicker","Combobox","ConversationList","DatePicker","Dialog","EmptyState","Field","Fieldset","Form","Grid","Header","Icon","Image","Input","Link","List","Listbox","Loading","Markdown","Menu","Message","NavigationMenu","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.3,"nodeCount":60,"edgeCount":459}}}