@fragments-sdk/ui 0.2.2 → 0.3.0

package/fragments.json

@@ -1 +1 @@
-{"version":"1.0.0","generatedAt":"2026-01-27T19:51:44.929Z","segments":{"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 titles for complex messages; skip titles for brief one-liners","Limit to one action per alert to avoid decision paralysis","Dismissible alerts should only be used for non-critical information"],"accessibility":["Uses role=\"alert\" for screen reader announcement","Error and warning alerts are announced immediately by assistive technology","Dismiss button must have an accessible label","Color alone must not convey meaning - icons and text reinforce severity"]},"props":{"children":{"type":"node","description":"Alert message content","required":true},"title":{"type":"string","description":"Optional bold title displayed above the message"},"severity":{"type":"enum","description":"Visual severity level","default":"info","values":["info","success","warning","error"]},"dismissible":{"type":"boolean","description":"Whether the alert shows a dismiss button","default":"false"},"onDismiss":{"type":"function","description":"Callback when the alert is dismissed"},"action":{"type":"custom","description":"Optional action button: { label: string, onClick: () => void }"}},"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":"<Alert severity=\"info\">\n          Your session will expire in 15 minutes. Save your work to avoid losing changes.\n        </Alert>"},{"name":"Success","description":"Positive confirmation of completed action","code":"<Alert severity=\"success\" title=\"Payment processed\">\n          Your order #12345 has been confirmed. You will receive a confirmation email shortly.\n        </Alert>"},{"name":"Warning","description":"Caution about potential issues","code":"<Alert severity=\"warning\" title=\"Storage almost full\">\n          You have used 90% of your storage quota. Consider deleting unused files.\n        </Alert>"},{"name":"Error","description":"Error state requiring user attention","code":"<Alert severity=\"error\" title=\"Upload failed\">\n          The file could not be uploaded. Check your connection and try again.\n        </Alert>"},{"name":"With Action","description":"Alert with an actionable button","code":"<Alert\n          severity=\"warning\"\n          title=\"Update available\"\n          action={{ label: 'Update now', onClick: () => {} }}\n        >\n          A new version is available with important security fixes.\n        </Alert>"},{"name":"Dismissible","description":"Alert that can be closed by the user","code":"<Alert severity=\"info\" dismissible>\n          You can customize your notification preferences in Settings.\n        </Alert>"}]},"Avatar":{"filePath":"src/components/Avatar/Avatar.fragment.tsx","meta":{"name":"Avatar","description":"Visual representation of a user or entity","category":"data-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"},"alt":{"type":"string","description":"Alt text for the image"},"name":{"type":"string","description":"Full name - used to generate initials"},"initials":{"type":"string","description":"Fallback initials (1-2 characters)"},"size":{"type":"enum","description":"Size variant","default":"md","values":["xs","sm","md","lg","xl"]},"shape":{"type":"enum","description":"Shape variant","default":"circle","values":["circle","square"]}},"relations":[{"component":"AvatarGroup","relationship":"parent","note":"Use Avatar.Group for stacked avatar displays"}],"variants":[{"name":"Default","description":"Avatar with image","code":"<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":"<Avatar name=\"John Smith\" />"},{"name":"Sizes","description":"Available size options","code":"<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>\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        </div>"},{"name":"Square Shape","description":"Square variant for app icons or brands","code":"<Avatar name=\"App\" shape=\"square\" />"},{"name":"Group","description":"Multiple avatars stacked together","code":"<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>"}]},"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":"feedback","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/toggle group)","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","values":["default","success","warning","error","info"]},"size":{"type":"enum","description":"Badge size","default":"md","values":["sm","md"]},"dot":{"type":"boolean","description":"Show a colored dot indicator before the label","default":"false"},"icon":{"type":"node","description":"Optional icon element before the text"},"onRemove":{"type":"function","description":"Makes the badge removable. Called when X is clicked."}},"relations":[{"component":"Alert","relationship":"alternative","note":"Use Alert for prominent, longer messages with actions"},{"component":"Tag","relationship":"sibling","note":"Tag is interactive (clickable/filterable); Badge is display-only"}],"variants":[{"name":"Default","description":"Neutral badge for general labels","code":"<Badge>Default</Badge>"},{"name":"Status Variants","description":"All severity variants for different contexts","code":"<div style={{ display: 'flex', gap: '8px', flexWrap: '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        </div>"},{"name":"With Dot","description":"Live status indicators using dot prefix","code":"<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>\n          <Badge variant=\"success\" dot>Online</Badge>\n          <Badge variant=\"warning\" dot>Away</Badge>\n          <Badge variant=\"error\" dot>Offline</Badge>\n        </div>"},{"name":"Small Size","description":"Compact badges for dense UIs","code":"<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>\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        </div>"},{"name":"Removable","description":"User-created tags that can be dismissed","code":"<div style={{ display: 'flex', gap: '8px' }}>\n          <Badge variant=\"info\" onRemove={() => {}}>React</Badge>\n          <Badge variant=\"info\" onRemove={() => {}}>TypeScript</Badge>\n          <Badge variant=\"info\" onRemove={() => {}}>CSS</Badge>\n        </div>"}]},"Button":{"filePath":"src/components/Button/Button.fragment.tsx","meta":{"name":"Button","description":"Interactive element for user actions and form submissions","category":"actions","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":{"children":{"type":"node","description":"Button label content","required":true},"variant":{"type":"enum","description":"Visual style variant","default":"primary","values":["primary","secondary","ghost","danger"],"constraints":["Only one primary button per context"]},"size":{"type":"enum","description":"Button size","default":"md","values":["sm","md","lg"]},"disabled":{"type":"boolean","description":"Whether the button is disabled","default":false},"onClick":{"type":"function","description":"Click handler"},"type":{"type":"enum","description":"HTML button type attribute","default":"button","values":["button","submit","reset"]}},"relations":[{"component":"Link","relationship":"alternative","note":"Use Link for navigation without action context"},{"component":"IconButton","relationship":"alternative","note":"Use IconButton for 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>"}]},"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 NavItem or similar)"],"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"},"title":{"type":"string","description":"Card header title"},"description":{"type":"string","description":"Card header description/subtitle"},"variant":{"type":"enum","description":"Visual style of the card surface","default":"default","values":["default","outlined","elevated"],"constraints":["Use \"elevated\" sparingly to maintain visual hierarchy"]},"padding":{"type":"enum","description":"Internal padding size","default":"md","values":["none","sm","md","lg"]},"onClick":{"type":"function","description":"Click handler - makes card interactive"}},"relations":[{"component":"CardGrid","relationship":"parent","note":"Use CardGrid for responsive card layouts"},{"component":"ListItem","relationship":"alternative","note":"Use ListItem for linear list layouts"}],"variants":[{"name":"Default","description":"Standard card with subtle shadow","code":"<Card title=\"Card Title\" description=\"A brief description\">\n          Card content goes here.\n        </Card>"},{"name":"Outlined","description":"Card with border instead of shadow","code":"<Card variant=\"outlined\" title=\"Outlined Card\">\n          Content with border.\n        </Card>"},{"name":"Elevated","description":"Card with prominent shadow for emphasis","code":"<Card variant=\"elevated\" title=\"Featured Item\">\n          Important content.\n        </Card>"},{"name":"Interactive","description":"Clickable card","code":"<Card\n          title=\"Click Me\"\n          description=\"This card is interactive\"\n          onClick={() => alert('Card clicked!')}\n        >\n          Click anywhere on this card.\n        </Card>"},{"name":"Content Only","description":"Card without header","code":"<Card>\n          Just content, no title or description.\n        </Card>"}]},"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 Toggle 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 Toggle)","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"},"defaultChecked":{"type":"boolean","description":"Default checked state (uncontrolled)"},"onCheckedChange":{"type":"function","description":"Called when checked state changes"},"indeterminate":{"type":"boolean","description":"Indeterminate state (partial selection)","default":"false"},"disabled":{"type":"boolean","description":"Disable the checkbox","default":"false"},"label":{"type":"string","description":"Label text"},"description":{"type":"string","description":"Description text below the label"},"size":{"type":"enum","description":"Checkbox size","default":"md","values":["sm","md","lg"]}},"relations":[{"component":"Toggle","relationship":"alternative","note":"Use Toggle 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>"}]},"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":"overlays","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"},"defaultOpen":{"type":"boolean","description":"Default open state (uncontrolled)","default":"false"},"onOpenChange":{"type":"function","description":"Called when open state changes"},"modal":{"type":"boolean","description":"Whether to render as modal (blocks interaction with rest of page)","default":"true"}},"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>"}]},"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":{"title":{"type":"string","description":"Main heading text","required":true},"description":{"type":"string","description":"Supporting description text"},"icon":{"type":"node","description":"Optional icon element"},"action":{"type":"object","description":"Primary action button: { label, onClick, variant? }"},"secondaryAction":{"type":"object","description":"Secondary action button: { label, onClick, variant? }"},"size":{"type":"enum","description":"Size variant","default":"md","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          icon={<FolderIcon />}\n          title=\"No projects yet\"\n          description=\"Get started by creating your first project.\"\n          action={{\n            label: 'Create Project',\n            onClick: () => {},\n          }}\n        />"},{"name":"No Results","description":"Empty search results","code":"<EmptyState\n          icon={<SearchIcon />}\n          title=\"No results found\"\n          description=\"Try adjusting your search terms or filters.\"\n          action={{\n            label: 'Clear Filters',\n            onClick: () => {},\n            variant: 'secondary',\n          }}\n        />"},{"name":"With Secondary Action","description":"Empty state with two actions","code":"<EmptyState\n          icon={<InboxIcon />}\n          title=\"Inbox is empty\"\n          description=\"You have no new messages.\"\n          action={{\n            label: 'Compose Message',\n            onClick: () => {},\n          }}\n          secondaryAction={{\n            label: 'View Archive',\n            onClick: () => {},\n          }}\n        />"},{"name":"Small","description":"Compact empty state for inline use","code":"<EmptyState\n          size=\"sm\"\n          title=\"No items\"\n          description=\"Add items to see them here.\"\n        />"},{"name":"Large","description":"Prominent empty state for full-page use","code":"<EmptyState\n          size=\"lg\"\n          icon={<FolderIcon />}\n          title=\"Welcome to your workspace\"\n          description=\"This is where your projects will appear. Create your first project to get started.\"\n          action={{\n            label: 'Create Your First Project',\n            onClick: () => {},\n          }}\n        />"}]},"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":"overlays","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"},"defaultOpen":{"type":"boolean","description":"Default open state (uncontrolled)","default":"false"},"onOpenChange":{"type":"function","description":"Called when open state changes"},"modal":{"type":"boolean","description":"Whether menu is modal","default":"true"}},"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>"}]},"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)"},"placeholder":{"type":"string","description":"Placeholder text shown when empty","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","values":["text","email","password","number","tel","url"]},"disabled":{"type":"boolean","description":"Whether the input is interactive","default":false},"error":{"type":"boolean","description":"Whether to show error styling","default":false},"label":{"type":"string","description":"Label text displayed above input"},"helperText":{"type":"string","description":"Helper or error message below input"},"onChange":{"type":"function","description":"Called with new value on change"}},"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":"FormField","relationship":"parent","note":"Wrap in FormField for consistent form layout"}],"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 />"}]},"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":"overlays","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"},"defaultOpen":{"type":"boolean","description":"Default open state (uncontrolled)","default":"false"},"onOpenChange":{"type":"function","description":"Called when open state changes"},"modal":{"type":"boolean","description":"Whether to block page interaction","default":"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>"}]},"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."},"size":{"type":"enum","description":"Size of the progress bar","default":"md","values":["sm","md","lg"]},"variant":{"type":"enum","description":"Color variant","default":"default","values":["default","success","warning","danger"]},"label":{"type":"string","description":"Label text above the progress bar"},"showValue":{"type":"boolean","description":"Show percentage value","default":"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>"}]},"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":{"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,"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\")","constraints":["Only applies when columns=\"auto\""]},"gap":{"type":"enum","description":"Gap between grid items, mapped to spacing tokens","default":"md","values":["none","xs","sm","md","lg","xl"]},"alignItems":{"type":"enum","description":"Vertical alignment of items within their cells","values":["start","center","end","stretch"]},"justifyItems":{"type":"enum","description":"Horizontal alignment of items within their cells","values":["start","center","end","stretch"]},"padding":{"type":"enum","description":"Internal padding of the grid container","default":"none","values":["none","sm","md","lg"]}},"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: '1rem', background: '#f1f5f9' }}>Item 1</div>\n          <div style={{ padding: '1rem', background: '#f1f5f9' }}>Item 2</div>\n          <div style={{ padding: '1rem', background: '#f1f5f9' }}>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: '1rem', background: '#f1f5f9' }}>Card 1</div>\n          <div style={{ padding: '1rem', background: '#f1f5f9' }}>Card 2</div>\n          <div style={{ padding: '1rem', background: '#f1f5f9' }}>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: '1rem', background: '#f1f5f9' }}>Card 1</div>\n          <div style={{ padding: '1rem', background: '#f1f5f9' }}>Card 2</div>\n          <div style={{ padding: '1rem', background: '#f1f5f9' }}>Card 3</div>\n          <div style={{ padding: '1rem', background: '#f1f5f9' }}>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: '1rem', background: '#f1f5f9' }}>Spans 2 cols</div>\n          </Grid.Item>\n          <div style={{ padding: '1rem', background: '#f1f5f9' }}>1 col</div>\n          <div style={{ padding: '1rem', background: '#f1f5f9' }}>1 col</div>\n          <Grid.Item colSpan=\"full\">\n            <div style={{ padding: '1rem', background: '#f1f5f9' }}>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: '0.5rem', background: '#f1f5f9' }}>First Name</div>\n          <div style={{ padding: '0.5rem', background: '#f1f5f9' }}>Last Name</div>\n          <Grid.Item colSpan=\"full\">\n            <div style={{ padding: '0.5rem', background: '#f1f5f9' }}>Email Address</div>\n          </Grid.Item>\n        </Grid>"}]},"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 Toggle/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"},"defaultValue":{"type":"string","description":"Default value (uncontrolled)"},"onValueChange":{"type":"function","description":"Callback when selection changes"},"orientation":{"type":"enum","description":"Layout orientation","default":"vertical","values":["horizontal","vertical"]},"size":{"type":"enum","description":"Size variant","default":"md","values":["sm","md","lg"]},"disabled":{"type":"boolean","description":"Disable all options","default":false},"label":{"type":"string","description":"Group label"},"error":{"type":"string","description":"Error message"}},"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":"Toggle","relationship":"alternative","note":"Use Toggle 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>"}]},"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"},"defaultValue":{"type":"string","description":"Default selected value (uncontrolled)"},"onValueChange":{"type":"function","description":"Called when selection changes"},"placeholder":{"type":"string","description":"Placeholder text when no value selected"},"disabled":{"type":"boolean","description":"Disable the select","default":"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":"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>"}]},"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","values":["horizontal","vertical"]},"spacing":{"type":"enum","description":"Margin around the separator","default":"none","values":["none","sm","md","lg"]},"soft":{"type":"boolean","description":"Softer, lighter appearance","default":"false"},"label":{"type":"string","description":"Optional text label (horizontal only)"}},"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>"}]},"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","values":["text","heading","avatar","button","input","rect"]},"size":{"type":"enum","description":"Size for avatar/button variants","default":"md","values":["sm","md","lg"]},"width":{"type":"union","description":"Custom width (string or number)"},"height":{"type":"union","description":"Custom height (string or number)"},"fill":{"type":"boolean","description":"Fill parent container","default":false},"radius":{"type":"enum","description":"Border radius override","values":["none","sm","md","lg","full"]}},"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: '12px' }}>\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: '8px', 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: 16, border: '1px solid #e5e7eb', borderRadius: 8 }}>\n          <Skeleton variant=\"rect\" height={120} radius=\"md\" />\n          <div style={{ marginTop: 12 }}>\n            <Skeleton variant=\"heading\" width=\"60%\" />\n          </div>\n          <div style={{ marginTop: 8 }}>\n            <Skeleton.Text lines={2} />\n          </div>\n        </div>"}]},"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":"data-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 CardGrid)","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},"sortable":{"type":"boolean","description":"Enable column sorting","default":"false"},"selectable":{"type":"boolean","description":"Enable row selection","default":"false"},"onRowClick":{"type":"function","description":"Handler for row clicks"},"emptyMessage":{"type":"string","description":"Message when no data","default":"No data available"},"size":{"type":"enum","description":"Table density","default":"md","values":["sm","md"]}},"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":"Empty State","description":"Table with no data","code":"<Table\n          columns={columns}\n          data={[]}\n          emptyMessage=\"No users found\"\n        />"}]},"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":"string","description":"Initially active tab (uncontrolled)"},"value":{"type":"string","description":"Controlled active tab value"},"onValueChange":{"type":"function","description":"Called when active tab changes"},"orientation":{"type":"enum","description":"Tab list orientation","default":"horizontal","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>"}]},"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"},"placeholder":{"type":"string","description":"Placeholder text"},"rows":{"type":"number","description":"Number of visible text rows","default":3},"label":{"type":"string","description":"Label text above the textarea"},"helperText":{"type":"string","description":"Helper text below the textarea"},"error":{"type":"boolean","description":"Error state","default":false},"disabled":{"type":"boolean","description":"Disabled state","default":false},"resize":{"type":"enum","description":"Resize behavior","default":"vertical","values":["none","vertical","horizontal","both"]},"maxLength":{"type":"number","description":"Maximum character length"}},"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        />"}]},"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":{"title":{"type":"string","description":"Toast title"},"description":{"type":"string","description":"Additional message content"},"variant":{"type":"enum","description":"Visual variant indicating message type","default":"default","values":["default","success","error","warning","info"]},"duration":{"type":"number","description":"Auto-dismiss duration in ms (0 = no auto-dismiss)","default":5000},"action":{"type":"object","description":"Optional action button { label, onClick }"}},"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        />"}]},"Toggle":{"filePath":"src/components/Toggle/Toggle.fragment.tsx","meta":{"name":"Toggle","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":["Toggle 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 toggles whose effect isn't obvious from the label","Group related toggles 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 toggle is in the on state","default":"false"},"onChange":{"type":"function","description":"Callback with new checked state: (checked: boolean) => void"},"label":{"type":"string","description":"Visible label text"},"description":{"type":"string","description":"Helper text shown below the label"},"disabled":{"type":"boolean","description":"Whether the toggle is non-interactive","default":"false"},"size":{"type":"enum","description":"Toggle track size","default":"md","values":["sm","md"]}},"relations":[{"component":"Input","relationship":"sibling","note":"Input handles text/number entry; Toggle handles boolean state"},{"component":"Checkbox","relationship":"alternative","note":"Use Checkbox when change requires form submission"}],"variants":[{"name":"Default Off","description":"Toggle in the off state","code":"<StatefulToggle label=\"Email notifications\" />","args":{"label":"Email notifications"}},{"name":"Checked","description":"Toggle in the on state","code":"<StatefulToggle checked label=\"Dark mode\" />","args":{"checked":true,"label":"Dark mode"}},{"name":"With Description","description":"Toggle with explanatory helper text","code":"<StatefulToggle\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 toggle for dense settings panels","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n          <StatefulToggle size=\"sm\" checked label=\"Show line numbers\" />\n          <StatefulToggle size=\"sm\" label=\"Word wrap\" />\n          <StatefulToggle size=\"sm\" checked label=\"Minimap\" />\n        </div>"},{"name":"Disabled States","description":"Non-interactive toggles showing both states","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n          <Toggle disabled label=\"Premium feature (upgrade required)\" />\n          <Toggle disabled checked label=\"System managed (read-only)\" />\n        </div>"},{"name":"Settings Panel","description":"Multiple toggles in a realistic settings layout","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '320px' }}>\n          <StatefulToggle\n            checked\n            label=\"Push notifications\"\n            description=\"Receive push notifications on your device\"\n          />\n          <StatefulToggle\n            checked\n            label=\"Email digest\"\n            description=\"Weekly summary of your activity\"\n          />\n          <StatefulToggle\n            label=\"Marketing emails\"\n            description=\"Product updates and promotional offers\"\n          />\n        </div>"}]},"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":"overlays","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","values":["top","bottom","left","right"]},"align":{"type":"enum","description":"Alignment along the side","default":"center","values":["start","center","end"]},"sideOffset":{"type":"number","description":"Distance from trigger in pixels","default":"6"},"delay":{"type":"number","description":"Delay before showing (ms)","default":"400"},"arrow":{"type":"boolean","description":"Show arrow pointing to trigger","default":"true"},"disabled":{"type":"boolean","description":"Disable the tooltip","default":"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>"}]}},"recipes":{"Card Grid":{"filePath":"src/recipes/CardGrid.recipe.ts","name":"Card Grid","description":"Responsive grid of cards that reflows based on available space","category":"layout","components":["Grid","Card"],"code":"<Grid columns=\"auto\" minChildWidth=\"16rem\" gap=\"md\">\n  {items.map(item => (\n    <Card key={item.id} title={item.title} description={item.description}>\n      {item.content}\n    </Card>\n  ))}\n</Grid>","tags":["grid","cards","responsive","dashboard","tiles"]},"Confirm Dialog":{"filePath":"src/recipes/ConfirmDialog.recipe.ts","name":"Confirm Dialog","description":"Confirmation dialog with destructive action warning","category":"overlays","components":["Dialog","Button"],"code":"<Dialog open={isOpen} onClose={onClose}>\n  <Dialog.Title>{title}</Dialog.Title>\n  <Dialog.Description>{description}</Dialog.Description>\n  <Dialog.Actions>\n    <Button variant=\"secondary\" onClick={onClose}>Cancel</Button>\n    <Button variant=\"danger\" onClick={onConfirm}>Confirm</Button>\n  </Dialog.Actions>\n</Dialog>","tags":["confirm","dialog","modal","destructive"]},"Dashboard Layout":{"filePath":"src/recipes/DashboardLayout.recipe.ts","name":"Dashboard Layout","description":"Dashboard grid with a featured full-width card and smaller metric cards below","category":"layout","components":["Grid","Card","Badge","Separator"],"code":"<Grid columns={4} gap=\"lg\">\n  <Grid.Item colSpan=\"full\">\n    <Card title=\"Overview\" description=\"Key metrics for this period\">\n      {summaryContent}\n    </Card>\n  </Grid.Item>\n  <Card title=\"Users\" variant=\"outlined\">\n    <Badge variant=\"success\">{stats.users}</Badge>\n  </Card>\n  <Card title=\"Revenue\" variant=\"outlined\">\n    <Badge variant=\"info\">{stats.revenue}</Badge>\n  </Card>\n  <Card title=\"Orders\" variant=\"outlined\">\n    <Badge variant=\"warning\">{stats.orders}</Badge>\n  </Card>\n  <Card title=\"Errors\" variant=\"outlined\">\n    <Badge variant=\"danger\">{stats.errors}</Badge>\n  </Card>\n  <Grid.Item colSpan=\"full\">\n    <Separator spacing=\"md\" />\n  </Grid.Item>\n  <Grid.Item colSpan={2}>\n    <Card title=\"Recent Activity\">{activityList}</Card>\n  </Grid.Item>\n  <Grid.Item colSpan={2}>\n    <Card title=\"Notifications\">{notificationList}</Card>\n  </Grid.Item>\n</Grid>","tags":["dashboard","layout","metrics","widgets","overview"]},"Form Layout":{"filePath":"src/recipes/FormLayout.recipe.ts","name":"Form Layout","description":"Two-column form with full-width fields where needed, using Grid for alignment","category":"forms","components":["Grid","Input","Textarea","Select","Button"],"code":"<Grid columns={2} gap=\"md\">\n  <Input label=\"First Name\" placeholder=\"Jane\" />\n  <Input label=\"Last Name\" placeholder=\"Doe\" />\n  <Grid.Item colSpan=\"full\">\n    <Input label=\"Email\" type=\"email\" placeholder=\"jane@example.com\" />\n  </Grid.Item>\n  <Grid.Item colSpan=\"full\">\n    <Select label=\"Role\">\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>\n  </Grid.Item>\n  <Grid.Item colSpan=\"full\">\n    <Textarea label=\"Bio\" placeholder=\"Tell us about yourself\" />\n  </Grid.Item>\n  <Grid.Item colSpan=\"full\">\n    <Button type=\"submit\" variant=\"primary\">Save</Button>\n  </Grid.Item>\n</Grid>","tags":["form","layout","grid","inputs","settings"]},"Login Form":{"filePath":"src/recipes/LoginForm.recipe.ts","name":"Login Form","description":"Email/password authentication form with validation states","category":"forms","components":["FormField","Input","Button","Alert"],"code":"<FormField label=\"Email\" error={errors.email}>\n  <Input type=\"email\" placeholder=\"you@example.com\" />\n</FormField>\n<FormField label=\"Password\" error={errors.password}>\n  <Input type=\"password\" />\n</FormField>\n<Button type=\"submit\" variant=\"primary\">Sign in</Button>\n{error && <Alert variant=\"danger\">{error}</Alert>}","tags":["auth","login","form"]},"Settings Page":{"filePath":"src/recipes/SettingsPage.recipe.ts","name":"Settings Page","description":"Settings page with labeled sections using cards, toggles, and a save action","category":"forms","components":["Grid","Card","Toggle","Input","Select","Separator","Button"],"code":"<Grid columns={1} gap=\"lg\">\n  <Card title=\"Profile\" description=\"Your public profile information\">\n    <Grid columns={2} gap=\"md\">\n      <Input label=\"Display Name\" defaultValue={user.name} />\n      <Input label=\"Email\" type=\"email\" defaultValue={user.email} />\n      <Grid.Item colSpan=\"full\">\n        <Input label=\"Website\" type=\"url\" defaultValue={user.website} />\n      </Grid.Item>\n    </Grid>\n  </Card>\n\n  <Card title=\"Notifications\" description=\"Choose what you get notified about\">\n    <Grid columns={1} gap=\"sm\">\n      <Toggle label=\"Email notifications\" checked={prefs.emailNotifs} onChange={onToggle('emailNotifs')} />\n      <Toggle label=\"Push notifications\" checked={prefs.pushNotifs} onChange={onToggle('pushNotifs')} />\n      <Toggle label=\"Weekly digest\" checked={prefs.digest} onChange={onToggle('digest')} />\n    </Grid>\n  </Card>\n\n  <Card title=\"Appearance\">\n    <Select label=\"Theme\" value={prefs.theme} onChange={onThemeChange}>\n      <Select.Item value=\"light\">Light</Select.Item>\n      <Select.Item value=\"dark\">Dark</Select.Item>\n      <Select.Item value=\"system\">System</Select.Item>\n    </Select>\n  </Card>\n\n  <Separator />\n  <Button variant=\"primary\" type=\"submit\">Save Changes</Button>\n</Grid>","tags":["settings","preferences","form","toggle","layout"]}}}
+{"version":"1.0.0","generatedAt":"2026-01-29T01:00:24.524Z","packageName":"@fragments-sdk/ui","segments":{"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 titles for complex messages; skip titles for brief one-liners","Limit to one action per alert to avoid decision paralysis","Dismissible alerts should only be used for non-critical information"],"accessibility":["Uses role=\"alert\" for screen reader announcement","Error and warning alerts are announced immediately by assistive technology","Dismiss button must have an accessible label","Color alone must not convey meaning - icons and text reinforce severity"]},"props":{"children":{"type":"node","description":"Alert message content","required":true},"title":{"type":"string","description":"Optional bold title displayed above the message"},"severity":{"type":"enum","description":"Visual severity level","default":"info","values":["info","success","warning","error"]},"dismissible":{"type":"boolean","description":"Whether the alert shows a dismiss button","default":"false"},"onDismiss":{"type":"function","description":"Callback when the alert is dismissed"},"action":{"type":"custom","description":"Optional action button: { label: string, onClick: () => void }"}},"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":"<Alert severity=\"info\">\n          Your session will expire in 15 minutes. Save your work to avoid losing changes.\n        </Alert>"},{"name":"Success","description":"Positive confirmation of completed action","code":"<Alert severity=\"success\" title=\"Payment processed\">\n          Your order #12345 has been confirmed. You will receive a confirmation email shortly.\n        </Alert>"},{"name":"Warning","description":"Caution about potential issues","code":"<Alert severity=\"warning\" title=\"Storage almost full\">\n          You have used 90% of your storage quota. Consider deleting unused files.\n        </Alert>"},{"name":"Error","description":"Error state requiring user attention","code":"<Alert severity=\"error\" title=\"Upload failed\">\n          The file could not be uploaded. Check your connection and try again.\n        </Alert>"},{"name":"With Action","description":"Alert with an actionable button","code":"<Alert\n          severity=\"warning\"\n          title=\"Update available\"\n          action={{ label: 'Update now', onClick: () => {} }}\n        >\n          A new version is available with important security fixes.\n        </Alert>"},{"name":"Dismissible","description":"Alert that can be closed by the user","code":"<Alert severity=\"info\" dismissible>\n          You can customize your notification preferences in Settings.\n        </Alert>"}]},"Avatar":{"filePath":"src/components/Avatar/Avatar.fragment.tsx","meta":{"name":"Avatar","description":"Visual representation of a user or entity","category":"data-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"},"alt":{"type":"string","description":"Alt text for the image"},"name":{"type":"string","description":"Full name - used to generate initials"},"initials":{"type":"string","description":"Fallback initials (1-2 characters)"},"size":{"type":"enum","description":"Size variant","default":"md","values":["xs","sm","md","lg","xl"]},"shape":{"type":"enum","description":"Shape variant","default":"circle","values":["circle","square"]}},"relations":[{"component":"AvatarGroup","relationship":"parent","note":"Use Avatar.Group for stacked avatar displays"}],"variants":[{"name":"Default","description":"Avatar with image","code":"<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":"<Avatar name=\"John Smith\" />"},{"name":"Sizes","description":"Available size options","code":"<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>\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        </div>"},{"name":"Square Shape","description":"Square variant for app icons or brands","code":"<Avatar name=\"App\" shape=\"square\" />"},{"name":"Group","description":"Multiple avatars stacked together","code":"<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>"}]},"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":"feedback","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/toggle group)","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","values":["default","success","warning","error","info"]},"size":{"type":"enum","description":"Badge size","default":"md","values":["sm","md"]},"dot":{"type":"boolean","description":"Show a colored dot indicator before the label","default":"false"},"icon":{"type":"node","description":"Optional icon element before the text"},"onRemove":{"type":"function","description":"Makes the badge removable. Called when X is clicked."}},"relations":[{"component":"Alert","relationship":"alternative","note":"Use Alert for prominent, longer messages with actions"},{"component":"Tag","relationship":"sibling","note":"Tag is interactive (clickable/filterable); Badge is display-only"}],"variants":[{"name":"Default","description":"Neutral badge for general labels","code":"<Badge>Default</Badge>"},{"name":"Status Variants","description":"All severity variants for different contexts","code":"<div style={{ display: 'flex', gap: '8px', flexWrap: '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        </div>"},{"name":"With Dot","description":"Live status indicators using dot prefix","code":"<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>\n          <Badge variant=\"success\" dot>Online</Badge>\n          <Badge variant=\"warning\" dot>Away</Badge>\n          <Badge variant=\"error\" dot>Offline</Badge>\n        </div>"},{"name":"Small Size","description":"Compact badges for dense UIs","code":"<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>\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        </div>"},{"name":"Removable","description":"User-created tags that can be dismissed","code":"<div style={{ display: 'flex', gap: '8px' }}>\n          <Badge variant=\"info\" onRemove={() => {}}>React</Badge>\n          <Badge variant=\"info\" onRemove={() => {}}>TypeScript</Badge>\n          <Badge variant=\"info\" onRemove={() => {}}>CSS</Badge>\n        </div>"}]},"Button":{"filePath":"src/components/Button/Button.fragment.tsx","meta":{"name":"Button","description":"Interactive element for user actions and form submissions","category":"actions","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":{"children":{"type":"node","description":"Button label content","required":true},"variant":{"type":"enum","description":"Visual style variant","default":"primary","values":["primary","secondary","ghost","danger"],"constraints":["Only one primary button per context"]},"size":{"type":"enum","description":"Button size","default":"md","values":["sm","md","lg"]},"disabled":{"type":"boolean","description":"Whether the button is disabled","default":false},"onClick":{"type":"function","description":"Click handler"},"type":{"type":"enum","description":"HTML button type attribute","default":"button","values":["button","submit","reset"]}},"relations":[{"component":"Link","relationship":"alternative","note":"Use Link for navigation without action context"},{"component":"IconButton","relationship":"alternative","note":"Use IconButton for 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>"}]},"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 NavItem or similar)"],"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"},"title":{"type":"string","description":"Card header title"},"description":{"type":"string","description":"Card header description/subtitle"},"variant":{"type":"enum","description":"Visual style of the card surface","default":"default","values":["default","outlined","elevated"],"constraints":["Use \"elevated\" sparingly to maintain visual hierarchy"]},"padding":{"type":"enum","description":"Internal padding size","default":"md","values":["none","sm","md","lg"]},"onClick":{"type":"function","description":"Click handler - makes card interactive"}},"relations":[{"component":"CardGrid","relationship":"parent","note":"Use CardGrid for responsive card layouts"},{"component":"ListItem","relationship":"alternative","note":"Use ListItem for linear list layouts"}],"variants":[{"name":"Default","description":"Standard card with subtle shadow","code":"<Card title=\"Card Title\" description=\"A brief description\">\n          Card content goes here.\n        </Card>"},{"name":"Outlined","description":"Card with border instead of shadow","code":"<Card variant=\"outlined\" title=\"Outlined Card\">\n          Content with border.\n        </Card>"},{"name":"Elevated","description":"Card with prominent shadow for emphasis","code":"<Card variant=\"elevated\" title=\"Featured Item\">\n          Important content.\n        </Card>"},{"name":"Interactive","description":"Clickable card","code":"<Card\n          title=\"Click Me\"\n          description=\"This card is interactive\"\n          onClick={() => alert('Card clicked!')}\n        >\n          Click anywhere on this card.\n        </Card>"},{"name":"Content Only","description":"Card without header","code":"<Card>\n          Just content, no title or description.\n        </Card>"}]},"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 Toggle 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 Toggle)","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"},"defaultChecked":{"type":"boolean","description":"Default checked state (uncontrolled)"},"onCheckedChange":{"type":"function","description":"Called when checked state changes"},"indeterminate":{"type":"boolean","description":"Indeterminate state (partial selection)","default":"false"},"disabled":{"type":"boolean","description":"Disable the checkbox","default":"false"},"label":{"type":"string","description":"Label text"},"description":{"type":"string","description":"Description text below the label"},"size":{"type":"enum","description":"Checkbox size","default":"md","values":["sm","md","lg"]}},"relations":[{"component":"Toggle","relationship":"alternative","note":"Use Toggle 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>"}]},"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":{"title":{"type":"string","description":"Main heading text","required":true},"description":{"type":"string","description":"Supporting description text"},"icon":{"type":"node","description":"Optional icon element"},"action":{"type":"object","description":"Primary action button: { label, onClick, variant? }"},"secondaryAction":{"type":"object","description":"Secondary action button: { label, onClick, variant? }"},"size":{"type":"enum","description":"Size variant","default":"md","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          icon={<FolderIcon />}\n          title=\"No projects yet\"\n          description=\"Get started by creating your first project.\"\n          action={{\n            label: 'Create Project',\n            onClick: () => {},\n          }}\n        />"},{"name":"No Results","description":"Empty search results","code":"<EmptyState\n          icon={<SearchIcon />}\n          title=\"No results found\"\n          description=\"Try adjusting your search terms or filters.\"\n          action={{\n            label: 'Clear Filters',\n            onClick: () => {},\n            variant: 'secondary',\n          }}\n        />"},{"name":"With Secondary Action","description":"Empty state with two actions","code":"<EmptyState\n          icon={<InboxIcon />}\n          title=\"Inbox is empty\"\n          description=\"You have no new messages.\"\n          action={{\n            label: 'Compose Message',\n            onClick: () => {},\n          }}\n          secondaryAction={{\n            label: 'View Archive',\n            onClick: () => {},\n          }}\n        />"},{"name":"Small","description":"Compact empty state for inline use","code":"<EmptyState\n          size=\"sm\"\n          title=\"No items\"\n          description=\"Add items to see them here.\"\n        />"},{"name":"Large","description":"Prominent empty state for full-page use","code":"<EmptyState\n          size=\"lg\"\n          icon={<FolderIcon />}\n          title=\"Welcome to your workspace\"\n          description=\"This is where your projects will appear. Create your first project to get started.\"\n          action={{\n            label: 'Create Your First Project',\n            onClick: () => {},\n          }}\n        />"}]},"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":"overlays","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"},"defaultOpen":{"type":"boolean","description":"Default open state (uncontrolled)","default":"false"},"onOpenChange":{"type":"function","description":"Called when open state changes"},"modal":{"type":"boolean","description":"Whether to render as modal (blocks interaction with rest of page)","default":"true"}},"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>"}]},"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":{"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,"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\")","constraints":["Only applies when columns=\"auto\""]},"gap":{"type":"enum","description":"Gap between grid items, mapped to spacing tokens","default":"md","values":["none","xs","sm","md","lg","xl"]},"alignItems":{"type":"enum","description":"Vertical alignment of items within their cells","values":["start","center","end","stretch"]},"justifyItems":{"type":"enum","description":"Horizontal alignment of items within their cells","values":["start","center","end","stretch"]},"padding":{"type":"enum","description":"Internal padding of the grid container","default":"none","values":["none","sm","md","lg"]}},"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: '1rem', background: '#f1f5f9' }}>Item 1</div>\n          <div style={{ padding: '1rem', background: '#f1f5f9' }}>Item 2</div>\n          <div style={{ padding: '1rem', background: '#f1f5f9' }}>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: '1rem', background: '#f1f5f9' }}>Card 1</div>\n          <div style={{ padding: '1rem', background: '#f1f5f9' }}>Card 2</div>\n          <div style={{ padding: '1rem', background: '#f1f5f9' }}>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: '1rem', background: '#f1f5f9' }}>Card 1</div>\n          <div style={{ padding: '1rem', background: '#f1f5f9' }}>Card 2</div>\n          <div style={{ padding: '1rem', background: '#f1f5f9' }}>Card 3</div>\n          <div style={{ padding: '1rem', background: '#f1f5f9' }}>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: '1rem', background: '#f1f5f9' }}>Spans 2 cols</div>\n          </Grid.Item>\n          <div style={{ padding: '1rem', background: '#f1f5f9' }}>1 col</div>\n          <div style={{ padding: '1rem', background: '#f1f5f9' }}>1 col</div>\n          <Grid.Item colSpan=\"full\">\n            <div style={{ padding: '1rem', background: '#f1f5f9' }}>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: '0.5rem', background: '#f1f5f9' }}>First Name</div>\n          <div style={{ padding: '0.5rem', background: '#f1f5f9' }}>Last Name</div>\n          <Grid.Item colSpan=\"full\">\n            <div style={{ padding: '0.5rem', background: '#f1f5f9' }}>Email Address</div>\n          </Grid.Item>\n        </Grid>"}]},"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)"},"placeholder":{"type":"string","description":"Placeholder text shown when empty","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","values":["text","email","password","number","tel","url"]},"disabled":{"type":"boolean","description":"Whether the input is interactive","default":false},"error":{"type":"boolean","description":"Whether to show error styling","default":false},"label":{"type":"string","description":"Label text displayed above input"},"helperText":{"type":"string","description":"Helper or error message below input"},"onChange":{"type":"function","description":"Called with new value on change"}},"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":"FormField","relationship":"parent","note":"Wrap in FormField for consistent form layout"}],"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 />"}]},"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":"overlays","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"},"defaultOpen":{"type":"boolean","description":"Default open state (uncontrolled)","default":"false"},"onOpenChange":{"type":"function","description":"Called when open state changes"},"modal":{"type":"boolean","description":"Whether menu is modal","default":"true"}},"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>"}]},"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":"overlays","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"},"defaultOpen":{"type":"boolean","description":"Default open state (uncontrolled)","default":"false"},"onOpenChange":{"type":"function","description":"Called when open state changes"},"modal":{"type":"boolean","description":"Whether to block page interaction","default":"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>"}]},"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."},"size":{"type":"enum","description":"Size of the progress bar","default":"md","values":["sm","md","lg"]},"variant":{"type":"enum","description":"Color variant","default":"default","values":["default","success","warning","danger"]},"label":{"type":"string","description":"Label text above the progress bar"},"showValue":{"type":"boolean","description":"Show percentage value","default":"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>"}]},"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 Toggle/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"},"defaultValue":{"type":"string","description":"Default value (uncontrolled)"},"onValueChange":{"type":"function","description":"Callback when selection changes"},"orientation":{"type":"enum","description":"Layout orientation","default":"vertical","values":["horizontal","vertical"]},"size":{"type":"enum","description":"Size variant","default":"md","values":["sm","md","lg"]},"disabled":{"type":"boolean","description":"Disable all options","default":false},"label":{"type":"string","description":"Group label"},"error":{"type":"string","description":"Error message"}},"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":"Toggle","relationship":"alternative","note":"Use Toggle 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>"}]},"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"},"defaultValue":{"type":"string","description":"Default selected value (uncontrolled)"},"onValueChange":{"type":"function","description":"Called when selection changes"},"placeholder":{"type":"string","description":"Placeholder text when no value selected"},"disabled":{"type":"boolean","description":"Disable the select","default":"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":"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>"}]},"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","values":["horizontal","vertical"]},"spacing":{"type":"enum","description":"Margin around the separator","default":"none","values":["none","sm","md","lg"]},"soft":{"type":"boolean","description":"Softer, lighter appearance","default":"false"},"label":{"type":"string","description":"Optional text label (horizontal only)"}},"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>"}]},"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)"},"defaultCollapsed":{"type":"boolean","description":"Initial collapsed state (uncontrolled)","default":false},"onCollapsedChange":{"type":"function","description":"Called when collapsed state changes"},"open":{"type":"boolean","description":"Mobile drawer open state (controlled)"},"defaultOpen":{"type":"boolean","description":"Initial open state (uncontrolled)","default":false},"onOpenChange":{"type":"function","description":"Called when open state changes"},"width":{"type":"string","description":"Width of expanded sidebar","default":"240px"},"collapsedWidth":{"type":"string","description":"Width when collapsed","default":"64px"},"position":{"type":"enum","description":"Sidebar position","default":"left","values":["left","right"]},"collapsible":{"type":"enum","description":"Collapse behavior mode","default":"icon","values":["icon","offcanvas","none"]},"asChild":{"type":"boolean","description":"(Sidebar.Item) Render as child element for polymorphic composition","default":false}},"relations":[{"component":"Tabs","relationship":"alternative","note":"Use Tabs for in-page section navigation"},{"component":"Menu","relationship":"composition","note":"Use Menu for contextual actions within sidebar"}],"variants":[{"name":"Default","description":"Standard sidebar with navigation sections. The `active` prop highlights the current page.","code":"<div style={demoContainerStyle}>\n          <Sidebar>\n            <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>\n              <LogoIcon size={32} />\n              <span style={{ fontWeight: 600, fontSize: '16px' }}>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>\n          <main style={mainContentStyle}>\n            Dashboard content goes here\n          </main>\n        </div>"},{"name":"Collapsed","description":"Icon-only collapsed state. Header shows only logo, tooltips appear on hover.","code":"<CollapsedDemo />"},{"name":"With Badges","description":"Navigation items with notification badges for counts or alerts.","code":"<div style={demoContainerStyle}>\n          <Sidebar>\n            <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>\n              <LogoIcon size={32} />\n              <span style={{ fontWeight: 600, fontSize: '16px' }}>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 />} 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.Footer>\n              <Sidebar.CollapseToggle />\n            </Sidebar.Footer>\n          </Sidebar>\n          <main style={mainContentStyle}>\n            Badges indicate unread items or notifications\n          </main>\n        </div>"},{"name":"With Submenu","description":"Nested navigation with expandable sections. Use defaultExpanded for initial state without manual state tracking.","code":"<SubmenuDemo />"},{"name":"With Disabled Items","description":"Some navigation items are disabled for permissions or feature flags.","code":"<div style={demoContainerStyle}>\n          <Sidebar>\n            <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>\n              <LogoIcon size={32} />\n              <span style={{ fontWeight: 600, fontSize: '16px' }}>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 />} disabled>Team (Coming Soon)</Sidebar.Item>\n                <Sidebar.Item icon={<FolderIcon />} disabled>Projects (Upgrade)</Sidebar.Item>\n              </Sidebar.Section>\n            </Sidebar.Nav>\n            <Sidebar.Footer>\n              <Sidebar.CollapseToggle />\n            </Sidebar.Footer>\n          </Sidebar>\n          <main style={mainContentStyle}>\n            Disabled items cannot be clicked\n          </main>\n        </div>"},{"name":"With Provider & External Trigger","description":"SidebarProvider enables external triggers and keyboard shortcuts (Cmd/Ctrl+B).","code":"<ProviderDemo />"},{"name":"With asChild (Polymorphic)","description":"Use asChild to render items as custom elements like Next.js Link or React Router NavLink.","code":"<AsChildDemo />"},{"name":"With Section Action","description":"Section headers can include action buttons for quick actions like \"Add Project\".","code":"<SectionActionDemo />"},{"name":"With Loading Skeleton","description":"Show skeleton placeholders while navigation data is loading.","code":"<SkeletonDemo />"},{"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":"<RailDemo />"}]},"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","values":["text","heading","avatar","button","input","rect"]},"size":{"type":"enum","description":"Size for avatar/button variants","default":"md","values":["sm","md","lg"]},"width":{"type":"union","description":"Custom width (string or number)"},"height":{"type":"union","description":"Custom height (string or number)"},"fill":{"type":"boolean","description":"Fill parent container","default":false},"radius":{"type":"enum","description":"Border radius override","values":["none","sm","md","lg","full"]}},"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: '12px' }}>\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: '8px', 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: 16, border: '1px solid #e5e7eb', borderRadius: 8 }}>\n          <Skeleton variant=\"rect\" height={120} radius=\"md\" />\n          <div style={{ marginTop: 12 }}>\n            <Skeleton variant=\"heading\" width=\"60%\" />\n          </div>\n          <div style={{ marginTop: 8 }}>\n            <Skeleton.Text lines={2} />\n          </div>\n        </div>"}]},"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":"data-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 CardGrid)","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},"sortable":{"type":"boolean","description":"Enable column sorting","default":"false"},"selectable":{"type":"boolean","description":"Enable row selection","default":"false"},"onRowClick":{"type":"function","description":"Handler for row clicks"},"emptyMessage":{"type":"string","description":"Message when no data","default":"No data available"},"size":{"type":"enum","description":"Table density","default":"md","values":["sm","md"]}},"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":"Empty State","description":"Table with no data","code":"<Table\n          columns={columns}\n          data={[]}\n          emptyMessage=\"No users found\"\n        />"}]},"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":"string","description":"Initially active tab (uncontrolled)"},"value":{"type":"string","description":"Controlled active tab value"},"onValueChange":{"type":"function","description":"Called when active tab changes"},"orientation":{"type":"enum","description":"Tab list orientation","default":"horizontal","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>"}]},"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"},"placeholder":{"type":"string","description":"Placeholder text"},"rows":{"type":"number","description":"Number of visible text rows","default":3},"label":{"type":"string","description":"Label text above the textarea"},"helperText":{"type":"string","description":"Helper text below the textarea"},"error":{"type":"boolean","description":"Error state","default":false},"disabled":{"type":"boolean","description":"Disabled state","default":false},"resize":{"type":"enum","description":"Resize behavior","default":"vertical","values":["none","vertical","horizontal","both"]},"maxLength":{"type":"number","description":"Maximum character length"}},"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        />"}]},"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":{"title":{"type":"string","description":"Toast title"},"description":{"type":"string","description":"Additional message content"},"variant":{"type":"enum","description":"Visual variant indicating message type","default":"default","values":["default","success","error","warning","info"]},"duration":{"type":"number","description":"Auto-dismiss duration in ms (0 = no auto-dismiss)","default":5000},"action":{"type":"object","description":"Optional action button { label, onClick }"}},"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        />"}]},"Toggle":{"filePath":"src/components/Toggle/Toggle.fragment.tsx","meta":{"name":"Toggle","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":["Toggle 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 toggles whose effect isn't obvious from the label","Group related toggles 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 toggle is in the on state","default":"false"},"onChange":{"type":"function","description":"Callback with new checked state: (checked: boolean) => void"},"label":{"type":"string","description":"Visible label text"},"description":{"type":"string","description":"Helper text shown below the label"},"disabled":{"type":"boolean","description":"Whether the toggle is non-interactive","default":"false"},"size":{"type":"enum","description":"Toggle track size","default":"md","values":["sm","md"]}},"relations":[{"component":"Input","relationship":"sibling","note":"Input handles text/number entry; Toggle handles boolean state"},{"component":"Checkbox","relationship":"alternative","note":"Use Checkbox when change requires form submission"}],"variants":[{"name":"Default Off","description":"Toggle in the off state","code":"<StatefulToggle label=\"Email notifications\" />","args":{"label":"Email notifications"}},{"name":"Checked","description":"Toggle in the on state","code":"<StatefulToggle checked label=\"Dark mode\" />","args":{"checked":true,"label":"Dark mode"}},{"name":"With Description","description":"Toggle with explanatory helper text","code":"<StatefulToggle\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 toggle for dense settings panels","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n          <StatefulToggle size=\"sm\" checked label=\"Show line numbers\" />\n          <StatefulToggle size=\"sm\" label=\"Word wrap\" />\n          <StatefulToggle size=\"sm\" checked label=\"Minimap\" />\n        </div>"},{"name":"Disabled States","description":"Non-interactive toggles showing both states","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n          <Toggle disabled label=\"Premium feature (upgrade required)\" />\n          <Toggle disabled checked label=\"System managed (read-only)\" />\n        </div>"},{"name":"Settings Panel","description":"Multiple toggles in a realistic settings layout","code":"<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '320px' }}>\n          <StatefulToggle\n            checked\n            label=\"Push notifications\"\n            description=\"Receive push notifications on your device\"\n          />\n          <StatefulToggle\n            checked\n            label=\"Email digest\"\n            description=\"Weekly summary of your activity\"\n          />\n          <StatefulToggle\n            label=\"Marketing emails\"\n            description=\"Product updates and promotional offers\"\n          />\n        </div>"}]},"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":"overlays","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","values":["top","bottom","left","right"]},"align":{"type":"enum","description":"Alignment along the side","default":"center","values":["start","center","end"]},"sideOffset":{"type":"number","description":"Distance from trigger in pixels","default":"6"},"delay":{"type":"number","description":"Delay before showing (ms)","default":"400"},"arrow":{"type":"boolean","description":"Show arrow pointing to trigger","default":"true"},"disabled":{"type":"boolean","description":"Disable the tooltip","default":"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>"}]}},"recipes":{"Card Grid":{"filePath":"src/recipes/CardGrid.recipe.ts","name":"Card Grid","description":"Responsive grid of cards that reflows based on available space","category":"layout","components":["Grid","Card"],"code":"<Grid columns=\"auto\" minChildWidth=\"16rem\" gap=\"md\">\n  {items.map(item => (\n    <Card key={item.id} title={item.title} description={item.description}>\n      {item.content}\n    </Card>\n  ))}\n</Grid>","tags":["grid","cards","responsive","dashboard","tiles"]},"Confirm Dialog":{"filePath":"src/recipes/ConfirmDialog.recipe.ts","name":"Confirm Dialog","description":"Confirmation dialog with destructive action warning","category":"overlays","components":["Dialog","Button"],"code":"<Dialog open={isOpen} onClose={onClose}>\n  <Dialog.Title>{title}</Dialog.Title>\n  <Dialog.Description>{description}</Dialog.Description>\n  <Dialog.Actions>\n    <Button variant=\"secondary\" onClick={onClose}>Cancel</Button>\n    <Button variant=\"danger\" onClick={onConfirm}>Confirm</Button>\n  </Dialog.Actions>\n</Dialog>","tags":["confirm","dialog","modal","destructive"]},"Dashboard Layout":{"filePath":"src/recipes/DashboardLayout.recipe.ts","name":"Dashboard Layout","description":"Dashboard grid with a featured full-width card and smaller metric cards below","category":"layout","components":["Grid","Card","Badge","Separator"],"code":"<Grid columns={4} gap=\"lg\">\n  <Grid.Item colSpan=\"full\">\n    <Card title=\"Overview\" description=\"Key metrics for this period\">\n      {summaryContent}\n    </Card>\n  </Grid.Item>\n  <Card title=\"Users\" variant=\"outlined\">\n    <Badge variant=\"success\">{stats.users}</Badge>\n  </Card>\n  <Card title=\"Revenue\" variant=\"outlined\">\n    <Badge variant=\"info\">{stats.revenue}</Badge>\n  </Card>\n  <Card title=\"Orders\" variant=\"outlined\">\n    <Badge variant=\"warning\">{stats.orders}</Badge>\n  </Card>\n  <Card title=\"Errors\" variant=\"outlined\">\n    <Badge variant=\"danger\">{stats.errors}</Badge>\n  </Card>\n  <Grid.Item colSpan=\"full\">\n    <Separator spacing=\"md\" />\n  </Grid.Item>\n  <Grid.Item colSpan={2}>\n    <Card title=\"Recent Activity\">{activityList}</Card>\n  </Grid.Item>\n  <Grid.Item colSpan={2}>\n    <Card title=\"Notifications\">{notificationList}</Card>\n  </Grid.Item>\n</Grid>","tags":["dashboard","layout","metrics","widgets","overview"]},"Form Layout":{"filePath":"src/recipes/FormLayout.recipe.ts","name":"Form Layout","description":"Two-column form with full-width fields where needed, using Grid for alignment","category":"forms","components":["Grid","Input","Textarea","Select","Button"],"code":"<Grid columns={2} gap=\"md\">\n  <Input label=\"First Name\" placeholder=\"Jane\" />\n  <Input label=\"Last Name\" placeholder=\"Doe\" />\n  <Grid.Item colSpan=\"full\">\n    <Input label=\"Email\" type=\"email\" placeholder=\"jane@example.com\" />\n  </Grid.Item>\n  <Grid.Item colSpan=\"full\">\n    <Select label=\"Role\">\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>\n  </Grid.Item>\n  <Grid.Item colSpan=\"full\">\n    <Textarea label=\"Bio\" placeholder=\"Tell us about yourself\" />\n  </Grid.Item>\n  <Grid.Item colSpan=\"full\">\n    <Button type=\"submit\" variant=\"primary\">Save</Button>\n  </Grid.Item>\n</Grid>","tags":["form","layout","grid","inputs","settings"]},"Login Form":{"filePath":"src/recipes/LoginForm.recipe.ts","name":"Login Form","description":"Email/password authentication form with validation states","category":"forms","components":["FormField","Input","Button","Alert"],"code":"<FormField label=\"Email\" error={errors.email}>\n  <Input type=\"email\" placeholder=\"you@example.com\" />\n</FormField>\n<FormField label=\"Password\" error={errors.password}>\n  <Input type=\"password\" />\n</FormField>\n<Button type=\"submit\" variant=\"primary\">Sign in</Button>\n{error && <Alert variant=\"danger\">{error}</Alert>}","tags":["auth","login","form"]},"Settings Page":{"filePath":"src/recipes/SettingsPage.recipe.ts","name":"Settings Page","description":"Settings page with labeled sections using cards, toggles, and a save action","category":"forms","components":["Grid","Card","Toggle","Input","Select","Separator","Button"],"code":"<Grid columns={1} gap=\"lg\">\n  <Card title=\"Profile\" description=\"Your public profile information\">\n    <Grid columns={2} gap=\"md\">\n      <Input label=\"Display Name\" defaultValue={user.name} />\n      <Input label=\"Email\" type=\"email\" defaultValue={user.email} />\n      <Grid.Item colSpan=\"full\">\n        <Input label=\"Website\" type=\"url\" defaultValue={user.website} />\n      </Grid.Item>\n    </Grid>\n  </Card>\n\n  <Card title=\"Notifications\" description=\"Choose what you get notified about\">\n    <Grid columns={1} gap=\"sm\">\n      <Toggle label=\"Email notifications\" checked={prefs.emailNotifs} onChange={onToggle('emailNotifs')} />\n      <Toggle label=\"Push notifications\" checked={prefs.pushNotifs} onChange={onToggle('pushNotifs')} />\n      <Toggle label=\"Weekly digest\" checked={prefs.digest} onChange={onToggle('digest')} />\n    </Grid>\n  </Card>\n\n  <Card title=\"Appearance\">\n    <Select label=\"Theme\" value={prefs.theme} onChange={onThemeChange}>\n      <Select.Item value=\"light\">Light</Select.Item>\n      <Select.Item value=\"dark\">Dark</Select.Item>\n      <Select.Item value=\"system\">System</Select.Item>\n    </Select>\n  </Card>\n\n  <Separator />\n  <Button variant=\"primary\" type=\"submit\">Save Changes</Button>\n</Grid>","tags":["settings","preferences","form","toggle","layout"]}}}