@usevyre/ai-context 0.1.1 → 0.2.0

package/dist/schema.json

@@ -0,0 +1,1278 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "version": "0.2.0",
+  "generatedAt": "2026-05-08",
+  "package": "@usevyre/react",
+  "packageVersion": "0.1.1",
+  "validFor": [
+    "@usevyre/react@0.1.1+",
+    "@usevyre/vue@0.1.1+"
+  ],
+  "changelog": {
+    "0.2.0": {
+      "date": "2026-05-08",
+      "breaking": false,
+      "summary": "Added structured schema, anti-patterns JSON, per-tool format generation"
+    },
+    "0.1.1": {
+      "date": "2026-05-06",
+      "breaking": false,
+      "summary": "Initial AI context with full-context.md, cursor/claude/windsurf/copilot formats"
+    }
+  },
+  "components": {
+    "Accordion": {
+      "description": "Vertically stacked collapsible sections. Compose with AccordionItem, AccordionTrigger, AccordionContent.",
+      "import": "import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from \"@usevyre/react\"",
+      "subcomponents": [
+        "AccordionItem",
+        "AccordionTrigger",
+        "AccordionContent"
+      ],
+      "props": {},
+      "antiPatterns": [
+        {
+          "pattern": "Accordion without AccordionItem",
+          "reason": "Accordion requires AccordionItem as direct child",
+          "fix": "Always compose: Accordion > AccordionItem > AccordionTrigger + AccordionContent"
+        }
+      ],
+      "examples": [
+        {
+          "description": "Basic accordion",
+          "code": "<Accordion>\n  <AccordionItem value=\"item-1\">\n    <AccordionTrigger>Section Title</AccordionTrigger>\n    <AccordionContent>Content goes here.</AccordionContent>\n  </AccordionItem>\n</Accordion>"
+        }
+      ]
+    },
+    "Alert": {
+      "description": "Inline feedback message for info, success, warning, or danger states.",
+      "import": "import { Alert } from \"@usevyre/react\"",
+      "props": {
+        "variant": {
+          "type": "enum",
+          "values": [
+            "info",
+            "success",
+            "warning",
+            "danger"
+          ],
+          "default": "info",
+          "description": "Visual severity style"
+        },
+        "title": {
+          "type": "string",
+          "description": "Bold heading text inside the alert"
+        },
+        "onClose": {
+          "type": "function",
+          "description": "If provided, renders a close (×) button"
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "variant=\"error\"",
+          "reason": "No 'error' variant exists",
+          "fix": "Use variant=\"danger\""
+        },
+        {
+          "pattern": "variant=\"primary\"",
+          "reason": "Alert uses severity variants, not brand variants",
+          "fix": "Use variant=\"info\" | \"success\" | \"warning\" | \"danger\""
+        }
+      ],
+      "examples": [
+        {
+          "description": "Warning with close button",
+          "code": "<Alert variant=\"warning\" title=\"Heads up\" onClose={() => setOpen(false)}>\n  This action cannot be undone.\n</Alert>"
+        },
+        {
+          "description": "Success state",
+          "code": "<Alert variant=\"success\" title=\"Saved!\">Your changes have been saved.</Alert>"
+        }
+      ]
+    },
+    "Avatar": {
+      "description": "User profile image with fallback initials or icon.",
+      "import": "import { Avatar } from \"@usevyre/react\"",
+      "props": {
+        "src": {
+          "type": "string",
+          "description": "Image URL. Falls back to `fallback` if not provided or fails to load."
+        },
+        "alt": {
+          "type": "string",
+          "default": "\"\"",
+          "description": "Alt text for the image"
+        },
+        "fallback": {
+          "type": "string",
+          "description": "Text or initials shown when image is absent"
+        },
+        "size": {
+          "type": "enum",
+          "values": [
+            "sm",
+            "md",
+            "lg",
+            "xl"
+          ],
+          "default": "md",
+          "description": "Avatar diameter"
+        },
+        "status": {
+          "type": "enum",
+          "values": [
+            "online",
+            "offline",
+            "busy",
+            "away"
+          ],
+          "description": "Optional status indicator dot"
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "size=\"xs\"",
+          "reason": "Minimum size is 'sm'",
+          "fix": "Use size=\"sm\""
+        },
+        {
+          "pattern": "size=\"2xl\"",
+          "reason": "Maximum size is 'xl'",
+          "fix": "Use size=\"xl\""
+        }
+      ],
+      "examples": [
+        {
+          "description": "Avatar with image and online status",
+          "code": "<Avatar src=\"/user.png\" alt=\"Jane Doe\" size=\"lg\" status=\"online\" />"
+        },
+        {
+          "description": "Fallback initials",
+          "code": "<Avatar fallback=\"JD\" size=\"md\" />"
+        }
+      ]
+    },
+    "Badge": {
+      "description": "Small label for status, category, or count. Use dot prop for live status indicator.",
+      "import": "import { Badge } from \"@usevyre/react\"",
+      "props": {
+        "variant": {
+          "type": "enum",
+          "values": [
+            "default",
+            "accent",
+            "teal",
+            "success",
+            "warning",
+            "danger"
+          ],
+          "default": "default",
+          "description": "Color style of the badge"
+        },
+        "dot": {
+          "type": "boolean",
+          "default": false,
+          "description": "Shows a pulsing status indicator dot"
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "variant=\"primary\"",
+          "reason": "Badge has no 'primary' variant",
+          "fix": "Use variant=\"accent\" for brand color"
+        },
+        {
+          "pattern": "variant=\"error\"",
+          "reason": "No 'error' variant exists",
+          "fix": "Use variant=\"danger\""
+        },
+        {
+          "pattern": "variant=\"info\"",
+          "reason": "No 'info' variant on Badge (use Alert for info messages)",
+          "fix": "Use variant=\"teal\" for info-like styling"
+        }
+      ],
+      "examples": [
+        {
+          "description": "Live status with dot",
+          "code": "<Badge variant=\"success\" dot>Online</Badge>"
+        },
+        {
+          "description": "Warning badge",
+          "code": "<Badge variant=\"warning\">Beta</Badge>"
+        },
+        {
+          "description": "Danger badge",
+          "code": "<Badge variant=\"danger\">Error</Badge>"
+        }
+      ]
+    },
+    "Breadcrumb": {
+      "description": "Navigation trail showing current page location in hierarchy.",
+      "import": "import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from \"@usevyre/react\"",
+      "subcomponents": [
+        "BreadcrumbItem",
+        "BreadcrumbLink",
+        "BreadcrumbSeparator"
+      ],
+      "props": {},
+      "antiPatterns": [
+        {
+          "pattern": "Using plain <a> tags inside Breadcrumb",
+          "reason": "Use BreadcrumbLink for correct styling and accessibility",
+          "fix": "Use BreadcrumbItem > BreadcrumbLink for each crumb"
+        }
+      ],
+      "examples": [
+        {
+          "description": "Basic breadcrumb",
+          "code": "<Breadcrumb>\n  <BreadcrumbItem><BreadcrumbLink href=\"/\">Home</BreadcrumbLink></BreadcrumbItem>\n  <BreadcrumbSeparator />\n  <BreadcrumbItem><BreadcrumbLink href=\"/docs\">Docs</BreadcrumbLink></BreadcrumbItem>\n  <BreadcrumbSeparator />\n  <BreadcrumbItem aria-current=\"page\">Button</BreadcrumbItem>\n</Breadcrumb>"
+        }
+      ]
+    },
+    "Button": {
+      "description": "Triggers actions and navigation. The most commonly used interactive element.",
+      "import": "import { Button } from \"@usevyre/react\"",
+      "props": {
+        "variant": {
+          "type": "enum",
+          "values": [
+            "primary",
+            "secondary",
+            "ghost",
+            "accent",
+            "teal",
+            "danger"
+          ],
+          "default": "secondary",
+          "description": "Visual style. primary=high contrast CTA, secondary=bordered, ghost=minimal, accent=amber brand, teal=secondary accent, danger=destructive"
+        },
+        "size": {
+          "type": "enum",
+          "values": [
+            "sm",
+            "md",
+            "lg",
+            "icon"
+          ],
+          "default": "md",
+          "description": "Size scale. Use 'icon' for square icon-only buttons"
+        },
+        "loading": {
+          "type": "boolean",
+          "default": false,
+          "description": "Shows spinner and disables interaction"
+        },
+        "disabled": {
+          "type": "boolean",
+          "default": false,
+          "description": "Disables the button"
+        },
+        "as": {
+          "type": "React.ElementType",
+          "default": "\"button\"",
+          "description": "Render as different element (e.g. 'a' for link buttons)"
+        },
+        "leftIcon": {
+          "type": "ReactNode",
+          "description": "Icon rendered before the label"
+        },
+        "rightIcon": {
+          "type": "ReactNode",
+          "description": "Icon rendered after the label"
+        }
+      },
+      "accessibility": {
+        "notes": [
+          "Always add aria-label when using size='icon' (no visible text)"
+        ]
+      },
+      "antiPatterns": [
+        {
+          "pattern": "variant=\"blue\"",
+          "reason": "No 'blue' variant exists",
+          "fix": "Use variant=\"accent\" for brand amber, or variant=\"teal\" for teal"
+        },
+        {
+          "pattern": "size=\"xl\"",
+          "reason": "Maximum size is 'lg'",
+          "fix": "Use size=\"lg\""
+        },
+        {
+          "pattern": "color=\"...\"",
+          "reason": "No color prop exists on Button",
+          "fix": "Use variant prop instead"
+        },
+        {
+          "pattern": "icon={...}",
+          "reason": "No 'icon' prop for inserting icons",
+          "fix": "Use leftIcon={...} or rightIcon={...}"
+        },
+        {
+          "pattern": "size=\"icon\" without aria-label",
+          "reason": "Icon-only buttons have no visible text — screen readers need aria-label",
+          "fix": "Add aria-label describing the action"
+        }
+      ],
+      "examples": [
+        {
+          "description": "Primary CTA",
+          "code": "<Button variant=\"primary\">Get Started</Button>"
+        },
+        {
+          "description": "Large accent button",
+          "code": "<Button variant=\"accent\" size=\"lg\">Launch App</Button>"
+        },
+        {
+          "description": "Loading state",
+          "code": "<Button variant=\"danger\" loading>Deleting...</Button>"
+        },
+        {
+          "description": "Link button",
+          "code": "<Button as=\"a\" href=\"/docs\" variant=\"secondary\">Read Docs</Button>"
+        },
+        {
+          "description": "Icon-only button",
+          "code": "<Button variant=\"ghost\" size=\"icon\" aria-label=\"Close\">\n  <X size={16} />\n</Button>"
+        }
+      ]
+    },
+    "Calendar": {
+      "description": "Date picker calendar widget for selecting single dates or ranges.",
+      "import": "import { Calendar } from \"@usevyre/react\"",
+      "props": {
+        "value": {
+          "type": "Date | null",
+          "description": "Currently selected date (controlled)"
+        },
+        "onChange": {
+          "type": "function",
+          "description": "Callback when a date is selected"
+        },
+        "disabled": {
+          "type": "boolean",
+          "default": false
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "Using Calendar for time selection",
+          "reason": "Calendar handles date only, not time",
+          "fix": "Combine with a separate time Input if time selection is needed"
+        }
+      ],
+      "examples": [
+        {
+          "description": "Controlled date picker",
+          "code": "const [date, setDate] = useState(null);\n<Calendar value={date} onChange={setDate} />"
+        }
+      ]
+    },
+    "Card": {
+      "description": "Content container with optional header, body, and footer sections.",
+      "import": "import { Card, CardHeader, CardBody, CardFooter } from \"@usevyre/react\"",
+      "subcomponents": [
+        "CardHeader",
+        "CardBody",
+        "CardFooter"
+      ],
+      "props": {
+        "variant": {
+          "type": "enum",
+          "values": [
+            "default",
+            "elevated",
+            "outlined",
+            "ghost",
+            "accent"
+          ],
+          "default": "default",
+          "description": "Visual style of the card"
+        },
+        "hoverable": {
+          "type": "boolean",
+          "default": false,
+          "description": "Adds hover lift effect"
+        },
+        "clickable": {
+          "type": "boolean",
+          "default": false,
+          "description": "Adds cursor pointer and active press feedback"
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "variant=\"primary\"",
+          "reason": "Card has no 'primary' variant",
+          "fix": "Use variant=\"elevated\" | \"outlined\" | \"ghost\" | \"accent\""
+        }
+      ],
+      "examples": [
+        {
+          "description": "Elevated card with sections",
+          "code": "<Card variant=\"elevated\">\n  <CardHeader><Badge variant=\"teal\">New</Badge></CardHeader>\n  <CardBody>\n    <h3>Card Title</h3>\n    <p>Description text.</p>\n  </CardBody>\n  <CardFooter>\n    <Button variant=\"ghost\" size=\"sm\">Learn more</Button>\n  </CardFooter>\n</Card>"
+        }
+      ]
+    },
+    "Checkbox": {
+      "description": "Binary toggle for boolean form values.",
+      "import": "import { Checkbox } from \"@usevyre/react\"",
+      "props": {
+        "size": {
+          "type": "enum",
+          "values": [
+            "sm",
+            "md"
+          ],
+          "default": "md"
+        },
+        "checked": {
+          "type": "boolean",
+          "description": "Controlled checked state"
+        },
+        "onChange": {
+          "type": "function",
+          "description": "Callback on change"
+        },
+        "disabled": {
+          "type": "boolean",
+          "default": false
+        },
+        "indeterminate": {
+          "type": "boolean",
+          "default": false,
+          "description": "Shows dash icon for partial selection state"
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "size=\"lg\"",
+          "reason": "Maximum size is 'md'",
+          "fix": "Use size=\"md\""
+        }
+      ],
+      "examples": [
+        {
+          "description": "Labeled checkbox",
+          "code": "<label style={{ display: 'flex', alignItems: 'center', gap: 'var(--vyre-spacing-2)' }}>\n  <Checkbox checked={agreed} onChange={e => setAgreed(e.target.checked)} />\n  I agree to the terms\n</label>"
+        }
+      ]
+    },
+    "Command": {
+      "description": "Command palette / search dialog. Use for search-first navigation or quick actions.",
+      "import": "import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandDialog } from \"@usevyre/react\"",
+      "subcomponents": [
+        "CommandInput",
+        "CommandList",
+        "CommandEmpty",
+        "CommandGroup",
+        "CommandItem",
+        "CommandDialog"
+      ],
+      "props": {},
+      "antiPatterns": [
+        {
+          "pattern": "Using Input type=\"search\" for search UI",
+          "reason": "Command component is the correct pattern for search-first UI",
+          "fix": "Use Command + CommandInput + CommandList + CommandItem"
+        }
+      ],
+      "examples": [
+        {
+          "description": "Basic command palette",
+          "code": "<Command>\n  <CommandInput placeholder=\"Search...\" />\n  <CommandList>\n    <CommandEmpty>No results found.</CommandEmpty>\n    <CommandGroup heading=\"Suggestions\">\n      <CommandItem onSelect={() => handleSelect('dashboard')}>Dashboard</CommandItem>\n      <CommandItem onSelect={() => handleSelect('settings')}>Settings</CommandItem>\n    </CommandGroup>\n  </CommandList>\n</Command>"
+        }
+      ]
+    },
+    "DropdownMenu": {
+      "description": "Contextual menu triggered by a button. Supports items, separators, checkbox items, radio groups, and sub-menus.",
+      "import": "import { DropdownMenu, DropdownItem, DropdownSeparator, DropdownCheckboxItem, DropdownRadioGroup, DropdownRadioItem, DropdownSub } from \"@usevyre/react\"",
+      "subcomponents": [
+        "DropdownItem",
+        "DropdownSeparator",
+        "DropdownCheckboxItem",
+        "DropdownRadioGroup",
+        "DropdownRadioItem",
+        "DropdownSub"
+      ],
+      "props": {
+        "trigger": {
+          "type": "ReactElement",
+          "description": "Element that opens the dropdown when clicked"
+        }
+      },
+      "itemProps": {
+        "variant": {
+          "type": "enum",
+          "values": [
+            "default",
+            "danger"
+          ],
+          "default": "default",
+          "description": "Use 'danger' for destructive actions"
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "DropdownItem variant=\"primary\"",
+          "reason": "DropdownItem only has 'default' and 'danger' variants",
+          "fix": "Use variant=\"danger\" for destructive items only"
+        }
+      ],
+      "examples": [
+        {
+          "description": "Dropdown with danger item",
+          "code": "<DropdownMenu trigger={<Button variant=\"secondary\">Options</Button>}>\n  <DropdownItem onSelect={() => handleEdit()}>Edit</DropdownItem>\n  <DropdownItem onSelect={() => handleDuplicate()}>Duplicate</DropdownItem>\n  <DropdownSeparator />\n  <DropdownItem variant=\"danger\" onSelect={() => handleDelete()}>Delete</DropdownItem>\n</DropdownMenu>"
+        }
+      ]
+    },
+    "Field": {
+      "description": "Form field wrapper providing label, hint text, and validation state for Input or Textarea.",
+      "import": "import { Field, Input, Textarea } from \"@usevyre/react\"",
+      "props": {
+        "label": {
+          "type": "string",
+          "description": "Visible field label"
+        },
+        "hint": {
+          "type": "string",
+          "description": "Helper or error text below the input"
+        },
+        "state": {
+          "type": "enum",
+          "values": [
+            "idle",
+            "error",
+            "success",
+            "warning"
+          ],
+          "default": "idle",
+          "description": "Validation state — affects border color and hint text color"
+        },
+        "required": {
+          "type": "boolean",
+          "default": false,
+          "description": "Shows required indicator"
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "Applying state prop directly to Input",
+          "reason": "state belongs on Field, not on the Input itself",
+          "fix": "Wrap Input in <Field state=\"error\"> to apply validation styling"
+        }
+      ],
+      "examples": [
+        {
+          "description": "Error state field",
+          "code": "<Field label=\"Email\" state=\"error\" hint=\"Invalid email format\">\n  <Input type=\"email\" placeholder=\"you@example.com\" />\n</Field>"
+        },
+        {
+          "description": "Search field with left icon",
+          "code": "<Field label=\"Search\">\n  <Input leftElement={<SearchIcon />} placeholder=\"Search...\" />\n</Field>"
+        }
+      ]
+    },
+    "Input": {
+      "description": "Text input field. Wrap in Field for labels and validation. Use leftElement/rightElement for icons.",
+      "import": "import { Input } from \"@usevyre/react\"",
+      "props": {
+        "size": {
+          "type": "enum",
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "md",
+          "description": "Height and text size scale. Note: 'icon' size is NOT valid for Input"
+        },
+        "leftElement": {
+          "type": "ReactNode",
+          "description": "Icon or element rendered inside the input on the left"
+        },
+        "rightElement": {
+          "type": "ReactNode",
+          "description": "Icon or element rendered inside the input on the right"
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "size=\"icon\"",
+          "reason": "'icon' size is only valid for Button, not Input",
+          "fix": "Use size=\"sm\" | \"md\" | \"lg\""
+        },
+        {
+          "pattern": "type=\"search\" for search UI",
+          "reason": "Use Command component for search-first interfaces",
+          "fix": "Import Command from @usevyre/react for search palettes"
+        }
+      ],
+      "examples": [
+        {
+          "description": "Password input with icon",
+          "code": "<Input type=\"password\" rightElement={<EyeIcon />} placeholder=\"Password\" />"
+        }
+      ]
+    },
+    "Label": {
+      "description": "Accessible form label. Associate with input via htmlFor.",
+      "import": "import { Label } from \"@usevyre/react\"",
+      "props": {
+        "htmlFor": {
+          "type": "string",
+          "description": "ID of the associated input element"
+        },
+        "required": {
+          "type": "boolean",
+          "default": false
+        }
+      },
+      "examples": [
+        {
+          "description": "Label with input",
+          "code": "<Label htmlFor=\"email\">Email address</Label>\n<Input id=\"email\" type=\"email\" />"
+        }
+      ]
+    },
+    "Modal": {
+      "description": "Dialog overlay for confirmations, forms, or focused content.",
+      "import": "import { Modal, ModalHeader, ModalBody, ModalFooter } from \"@usevyre/react\"",
+      "subcomponents": [
+        "ModalHeader",
+        "ModalBody",
+        "ModalFooter"
+      ],
+      "props": {
+        "open": {
+          "type": "boolean",
+          "description": "Controls visibility (controlled mode)"
+        },
+        "onClose": {
+          "type": "function",
+          "description": "Called when modal is dismissed"
+        },
+        "size": {
+          "type": "enum",
+          "values": [
+            "sm",
+            "md",
+            "lg",
+            "full"
+          ],
+          "default": "md",
+          "description": "Width of the modal dialog"
+        },
+        "title": {
+          "type": "string",
+          "description": "Accessible dialog title (also shown as heading)"
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "size=\"xl\"",
+          "reason": "Maximum size is 'full'",
+          "fix": "Use size=\"lg\" or size=\"full\""
+        }
+      ],
+      "examples": [
+        {
+          "description": "Confirmation modal",
+          "code": "<Modal open={isOpen} onClose={() => setIsOpen(false)} title=\"Confirm Delete\" size=\"sm\">\n  <ModalBody>Are you sure you want to delete this item?</ModalBody>\n  <ModalFooter>\n    <Button variant=\"ghost\" onClick={() => setIsOpen(false)}>Cancel</Button>\n    <Button variant=\"danger\" onClick={handleDelete}>Delete</Button>\n  </ModalFooter>\n</Modal>"
+        }
+      ]
+    },
+    "Pagination": {
+      "description": "Page navigation for paginated lists or tables.",
+      "import": "import { Pagination } from \"@usevyre/react\"",
+      "props": {
+        "page": {
+          "type": "number",
+          "description": "Current page (1-indexed)"
+        },
+        "total": {
+          "type": "number",
+          "description": "Total number of pages"
+        },
+        "onChange": {
+          "type": "function",
+          "description": "Called with new page number when user navigates"
+        }
+      },
+      "examples": [
+        {
+          "description": "Basic pagination",
+          "code": "<Pagination page={currentPage} total={totalPages} onChange={setCurrentPage} />"
+        }
+      ]
+    },
+    "Popover": {
+      "description": "Floating content panel anchored to a trigger element. For simple labels use Tooltip instead.",
+      "import": "import { Popover } from \"@usevyre/react\"",
+      "props": {
+        "trigger": {
+          "type": "ReactElement",
+          "description": "Element that opens the popover"
+        },
+        "placement": {
+          "type": "enum",
+          "values": [
+            "top",
+            "top-start",
+            "top-end",
+            "bottom",
+            "bottom-start",
+            "bottom-end",
+            "left",
+            "left-start",
+            "left-end",
+            "right",
+            "right-start",
+            "right-end"
+          ],
+          "default": "bottom",
+          "description": "Preferred placement relative to trigger"
+        },
+        "open": {
+          "type": "boolean",
+          "description": "Controlled open state"
+        },
+        "onOpenChange": {
+          "type": "function",
+          "description": "Callback when open state changes"
+        },
+        "closeOnOutside": {
+          "type": "boolean",
+          "default": true,
+          "description": "Close when clicking outside"
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "placement=\"top-center\"",
+          "reason": "No 'top-center' — center alignment is the default when no suffix is given",
+          "fix": "Use placement=\"top\" for centered placement"
+        }
+      ],
+      "examples": [
+        {
+          "description": "Popover with custom content",
+          "code": "<Popover trigger={<Button variant=\"secondary\">More info</Button>} placement=\"bottom-start\">\n  <div style={{ padding: 'var(--vyre-spacing-4)' }}>\n    <p>Detailed information here.</p>\n  </div>\n</Popover>"
+        }
+      ]
+    },
+    "Progress": {
+      "description": "Visual progress indicator for tasks, uploads, or completion status.",
+      "import": "import { Progress } from \"@usevyre/react\"",
+      "props": {
+        "value": {
+          "type": "number",
+          "description": "Progress value (0–100)"
+        },
+        "size": {
+          "type": "enum",
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "md",
+          "description": "Height of the progress bar"
+        },
+        "variant": {
+          "type": "enum",
+          "values": [
+            "default",
+            "accent",
+            "teal",
+            "success",
+            "danger"
+          ],
+          "default": "default",
+          "description": "Color variant"
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "value > 100",
+          "reason": "Value is clamped to 0–100",
+          "fix": "Normalize your value to 0–100 range before passing"
+        }
+      ],
+      "examples": [
+        {
+          "description": "Upload progress",
+          "code": "<Progress value={uploadPercent} variant=\"accent\" size=\"sm\" />"
+        }
+      ]
+    },
+    "Select": {
+      "description": "Dropdown for selecting one option from a list.",
+      "import": "import { Select } from \"@usevyre/react\"",
+      "props": {
+        "options": {
+          "type": "SelectOption[]",
+          "description": "Array of { value: string, label: string } objects"
+        },
+        "value": {
+          "type": "string",
+          "description": "Controlled selected value"
+        },
+        "onChange": {
+          "type": "function",
+          "description": "Called with new value string on selection"
+        },
+        "size": {
+          "type": "enum",
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "md"
+        },
+        "placeholder": {
+          "type": "string",
+          "description": "Placeholder text when no value is selected"
+        },
+        "disabled": {
+          "type": "boolean",
+          "default": false
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "Passing strings directly as children",
+          "reason": "Select uses options prop, not children",
+          "fix": "Pass options={[{ value: 'a', label: 'Option A' }]}"
+        }
+      ],
+      "examples": [
+        {
+          "description": "Controlled select",
+          "code": "<Select\n  options={[{ value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}\n  value={framework}\n  onChange={setFramework}\n  placeholder=\"Choose framework\"\n/>"
+        }
+      ]
+    },
+    "Separator": {
+      "description": "Horizontal or vertical divider line.",
+      "import": "import { Separator } from \"@usevyre/react\"",
+      "props": {
+        "orientation": {
+          "type": "enum",
+          "values": [
+            "horizontal",
+            "vertical"
+          ],
+          "default": "horizontal"
+        }
+      },
+      "examples": [
+        {
+          "description": "Horizontal separator",
+          "code": "<Separator />"
+        },
+        {
+          "description": "Vertical separator",
+          "code": "<Separator orientation=\"vertical\" />"
+        }
+      ]
+    },
+    "Sheet": {
+      "description": "Side panel (drawer) that slides in from the edge. For forms, detail views, or settings.",
+      "import": "import { Sheet, SheetHeader, SheetBody, SheetFooter } from \"@usevyre/react\"",
+      "subcomponents": [
+        "SheetHeader",
+        "SheetBody",
+        "SheetFooter"
+      ],
+      "props": {
+        "open": {
+          "type": "boolean",
+          "description": "Controls visibility"
+        },
+        "onClose": {
+          "type": "function",
+          "description": "Called when sheet is dismissed"
+        },
+        "size": {
+          "type": "enum",
+          "values": [
+            "sm",
+            "md",
+            "lg",
+            "full"
+          ],
+          "default": "md",
+          "description": "Width of the sheet panel"
+        },
+        "side": {
+          "type": "enum",
+          "values": [
+            "left",
+            "right"
+          ],
+          "default": "right",
+          "description": "Which edge the sheet slides from"
+        },
+        "title": {
+          "type": "string",
+          "description": "Accessible panel title"
+        }
+      },
+      "examples": [
+        {
+          "description": "Settings sheet from the right",
+          "code": "<Sheet open={isOpen} onClose={() => setIsOpen(false)} title=\"Settings\" side=\"right\">\n  <SheetBody>Settings content here.</SheetBody>\n  <SheetFooter>\n    <Button variant=\"accent\">Save</Button>\n  </SheetFooter>\n</Sheet>"
+        }
+      ]
+    },
+    "Sidebar": {
+      "description": "App navigation sidebar. Use AppLayout as the root layout wrapper.",
+      "import": "import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, SidebarItem, SidebarFooter } from \"@usevyre/react\"",
+      "subcomponents": [
+        "AppLayout",
+        "SidebarHeader",
+        "SidebarContent",
+        "SidebarSection",
+        "SidebarItem",
+        "SidebarFooter"
+      ],
+      "props": {
+        "variant": {
+          "type": "enum",
+          "values": [
+            "default",
+            "floating"
+          ],
+          "default": "default"
+        }
+      },
+      "examples": [
+        {
+          "description": "App layout with sidebar",
+          "code": "<AppLayout>\n  <Sidebar>\n    <SidebarHeader>Logo</SidebarHeader>\n    <SidebarContent>\n      <SidebarSection heading=\"Main\">\n        <SidebarItem href=\"/\" active>Dashboard</SidebarItem>\n        <SidebarItem href=\"/settings\">Settings</SidebarItem>\n      </SidebarSection>\n    </SidebarContent>\n    <SidebarFooter><Avatar fallback=\"JD\" size=\"sm\" /></SidebarFooter>\n  </Sidebar>\n  <main>Page content</main>\n</AppLayout>"
+        }
+      ]
+    },
+    "Skeleton": {
+      "description": "Loading placeholder that mimics the shape of content while data loads.",
+      "import": "import { Skeleton } from \"@usevyre/react\"",
+      "props": {
+        "variant": {
+          "type": "enum",
+          "values": [
+            "rect",
+            "circle",
+            "text"
+          ],
+          "default": "rect",
+          "description": "Shape of the skeleton. 'circle' for avatars, 'text' for text lines, 'rect' for blocks"
+        },
+        "width": {
+          "type": "string | number",
+          "description": "Width (e.g. '200px' or '100%')"
+        },
+        "height": {
+          "type": "string | number",
+          "description": "Height (e.g. '20px' or 40)"
+        }
+      },
+      "examples": [
+        {
+          "description": "Avatar skeleton",
+          "code": "<Skeleton variant=\"circle\" width={40} height={40} />"
+        },
+        {
+          "description": "Text line skeletons",
+          "code": "<Skeleton variant=\"text\" width=\"100%\" />\n<Skeleton variant=\"text\" width=\"60%\" />"
+        }
+      ]
+    },
+    "Slider": {
+      "description": "Range input for selecting a numeric value within a range.",
+      "import": "import { Slider } from \"@usevyre/react\"",
+      "props": {
+        "value": {
+          "type": "number",
+          "description": "Controlled value"
+        },
+        "onChange": {
+          "type": "function",
+          "description": "Called with new numeric value"
+        },
+        "min": {
+          "type": "number",
+          "default": 0
+        },
+        "max": {
+          "type": "number",
+          "default": 100
+        },
+        "step": {
+          "type": "number",
+          "default": 1
+        },
+        "size": {
+          "type": "enum",
+          "values": [
+            "sm",
+            "md"
+          ],
+          "default": "md"
+        },
+        "disabled": {
+          "type": "boolean",
+          "default": false
+        }
+      },
+      "examples": [
+        {
+          "description": "Volume slider",
+          "code": "<Slider value={volume} onChange={setVolume} min={0} max={100} step={5} />"
+        }
+      ]
+    },
+    "Switch": {
+      "description": "Toggle switch for boolean on/off settings.",
+      "import": "import { Switch } from \"@usevyre/react\"",
+      "props": {
+        "checked": {
+          "type": "boolean",
+          "description": "Controlled checked state"
+        },
+        "onChange": {
+          "type": "function",
+          "description": "Called with new boolean value"
+        },
+        "size": {
+          "type": "enum",
+          "values": [
+            "sm",
+            "md"
+          ],
+          "default": "md"
+        },
+        "disabled": {
+          "type": "boolean",
+          "default": false
+        }
+      },
+      "examples": [
+        {
+          "description": "Notifications toggle",
+          "code": "<label style={{ display: 'flex', alignItems: 'center', gap: 'var(--vyre-spacing-2)' }}>\n  <Switch checked={notifications} onChange={setNotifications} />\n  Enable notifications\n</label>"
+        }
+      ]
+    },
+    "Table": {
+      "description": "Data table with optional sorting. Compose with TableHeader, TableRow, TableCell.",
+      "import": "import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from \"@usevyre/react\"",
+      "subcomponents": [
+        "TableHead",
+        "TableBody",
+        "TableRow",
+        "TableHeader",
+        "TableCell"
+      ],
+      "props": {},
+      "examples": [
+        {
+          "description": "Basic data table",
+          "code": "<Table>\n  <TableHead>\n    <TableRow>\n      <TableHeader>Name</TableHeader>\n      <TableHeader>Status</TableHeader>\n    </TableRow>\n  </TableHead>\n  <TableBody>\n    <TableRow>\n      <TableCell>Alice</TableCell>\n      <TableCell><Badge variant=\"success\">Active</Badge></TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"
+        }
+      ]
+    },
+    "Tabs": {
+      "description": "Tabbed navigation for switching between content panels.",
+      "import": "import { Tabs, TabList, Tab, TabPanels, TabPanel } from \"@usevyre/react\"",
+      "subcomponents": [
+        "TabList",
+        "Tab",
+        "TabPanels",
+        "TabPanel"
+      ],
+      "props": {
+        "defaultIndex": {
+          "type": "number",
+          "default": 0,
+          "description": "Index of the initially active tab (uncontrolled)"
+        },
+        "index": {
+          "type": "number",
+          "description": "Controlled active tab index"
+        },
+        "onChange": {
+          "type": "function",
+          "description": "Called with new index when tab changes"
+        }
+      },
+      "examples": [
+        {
+          "description": "Basic tabs",
+          "code": "<Tabs defaultIndex={0}>\n  <TabList>\n    <Tab>Overview</Tab>\n    <Tab>Settings</Tab>\n  </TabList>\n  <TabPanels>\n    <TabPanel>Overview content</TabPanel>\n    <TabPanel>Settings content</TabPanel>\n  </TabPanels>\n</Tabs>"
+        }
+      ]
+    },
+    "Toast": {
+      "description": "Transient notification. Use the useToast hook to trigger toasts imperatively.",
+      "import": "import { useToast, ToastProvider } from \"@usevyre/react\"",
+      "props": {
+        "variant": {
+          "type": "enum",
+          "values": [
+            "default",
+            "success",
+            "warning",
+            "danger"
+          ],
+          "default": "default",
+          "description": "Color and icon of the toast"
+        },
+        "title": {
+          "type": "string",
+          "description": "Bold heading text"
+        },
+        "description": {
+          "type": "string",
+          "description": "Supporting detail text"
+        },
+        "duration": {
+          "type": "number",
+          "default": 4000,
+          "description": "Auto-dismiss time in milliseconds"
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "Rendering <Toast> directly in JSX",
+          "reason": "Toast is triggered via the useToast hook, not rendered directly",
+          "fix": "Use: const { toast } = useToast(); then toast({ title, variant })"
+        },
+        {
+          "pattern": "variant=\"error\"",
+          "reason": "No 'error' variant",
+          "fix": "Use variant=\"danger\""
+        },
+        {
+          "pattern": "variant=\"info\"",
+          "reason": "No 'info' variant on Toast",
+          "fix": "Use variant=\"default\""
+        }
+      ],
+      "examples": [
+        {
+          "description": "Trigger a success toast",
+          "code": "const { toast } = useToast();\n\n<Button onClick={() => toast({ title: 'Saved!', variant: 'success', duration: 3000 })}>\n  Save\n</Button>"
+        },
+        {
+          "description": "Setup: wrap app with ToastProvider",
+          "code": "<ToastProvider>\n  <App />\n</ToastProvider>"
+        }
+      ]
+    },
+    "Tooltip": {
+      "description": "Short label that appears on hover/focus. For rich content use Popover instead.",
+      "import": "import { Tooltip } from \"@usevyre/react\"",
+      "props": {
+        "content": {
+          "type": "string | ReactNode",
+          "description": "Text or element shown in the tooltip"
+        },
+        "placement": {
+          "type": "enum",
+          "values": [
+            "top",
+            "bottom",
+            "left",
+            "right"
+          ],
+          "default": "top"
+        },
+        "delay": {
+          "type": "number",
+          "default": 300,
+          "description": "Delay in ms before tooltip appears"
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "Using Tooltip for rich content (forms, buttons, etc.)",
+          "reason": "Tooltip is for short text labels only",
+          "fix": "Use Popover for rich interactive content"
+        }
+      ],
+      "examples": [
+        {
+          "description": "Tooltip on an icon button",
+          "code": "<Tooltip content=\"Close dialog\" placement=\"bottom\">\n  <Button variant=\"ghost\" size=\"icon\" aria-label=\"Close\">\n    <X size={16} />\n  </Button>\n</Tooltip>"
+        }
+      ]
+    },
+    "Typography": {
+      "description": "Text rendering components with semantic scale. Includes Text, Heading, Lead, Code, Blockquote.",
+      "import": "import { Text, Heading, Lead, Code, Blockquote } from \"@usevyre/react\"",
+      "subcomponents": [
+        "Text",
+        "Heading",
+        "Lead",
+        "Code",
+        "Blockquote"
+      ],
+      "textProps": {
+        "size": {
+          "type": "enum",
+          "values": [
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl"
+          ],
+          "default": "md"
+        }
+      },
+      "headingProps": {
+        "size": {
+          "type": "enum",
+          "values": [
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl",
+            "3xl"
+          ],
+          "default": "lg"
+        },
+        "as": {
+          "type": "enum",
+          "values": [
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6"
+          ],
+          "default": "h2"
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "Using raw <h1>, <p> tags instead of Typography components",
+          "reason": "Typography components apply the correct token-based styles",
+          "fix": "Use <Heading>, <Text>, <Lead> from @usevyre/react"
+        }
+      ],
+      "examples": [
+        {
+          "description": "Page heading and body text",
+          "code": "<Heading size=\"2xl\" as=\"h1\">Dashboard</Heading>\n<Lead>Welcome back. Here's what's happening today.</Lead>\n<Text size=\"sm\" style={{ color: 'var(--vyre-color-semantic-text-muted)' }}>Last updated 5 minutes ago.</Text>"
+        }
+      ]
+    }
+  }
+}