@nim-ui/components 0.0.0

package/src/registry/index.json

@@ -0,0 +1,1061 @@
+{
+  "version": "0.0.0",
+  "components": [
+    {
+      "name": "Button",
+      "category": "primitives",
+      "description": "A versatile button component with multiple variants and sizes for different use cases",
+      "keywords": ["button", "click", "action", "cta", "interactive"],
+      "file": "components/button.tsx",
+      "variants": [
+        {
+          "name": "variant",
+          "values": ["default", "secondary", "outline", "ghost", "destructive"]
+        },
+        {
+          "name": "size",
+          "values": ["sm", "md", "lg", "xl"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Default Button",
+          "code": "<Button>Click me</Button>"
+        },
+        {
+          "title": "Button with Variant and Size",
+          "code": "<Button variant=\"outline\" size=\"lg\">Large Outline</Button>"
+        }
+      ]
+    },
+    {
+      "name": "Input",
+      "category": "primitives",
+      "description": "A flexible input field component with validation states and multiple sizes",
+      "keywords": ["input", "text", "field", "form", "textbox"],
+      "file": "components/input.tsx",
+      "variants": [
+        {
+          "name": "variant",
+          "values": ["default", "error", "success"]
+        },
+        {
+          "name": "size",
+          "values": ["sm", "md", "lg"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Basic Input",
+          "code": "<Input placeholder=\"Enter text...\" />"
+        },
+        {
+          "title": "Input with Error State",
+          "code": "<Input variant=\"error\" placeholder=\"Invalid email\" />"
+        }
+      ]
+    },
+    {
+      "name": "Badge",
+      "category": "primitives",
+      "description": "A small badge component for displaying status, counts, or labels",
+      "keywords": ["badge", "label", "tag", "status", "pill"],
+      "file": "components/badge.tsx",
+      "variants": [
+        {
+          "name": "variant",
+          "values": ["default", "secondary", "outline", "destructive"]
+        },
+        {
+          "name": "size",
+          "values": ["sm", "md", "lg"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Simple Badge",
+          "code": "<Badge>New</Badge>"
+        },
+        {
+          "title": "Destructive Badge",
+          "code": "<Badge variant=\"destructive\" size=\"lg\">Error</Badge>"
+        }
+      ]
+    },
+    {
+      "name": "Avatar",
+      "category": "primitives",
+      "description": "A user avatar component with image fallback and initials support, built with Radix UI",
+      "keywords": ["avatar", "profile", "image", "user", "picture"],
+      "file": "components/avatar.tsx",
+      "variants": [
+        {
+          "name": "size",
+          "values": ["sm", "md", "lg", "xl"]
+        }
+      ],
+      "hasRadixPrimitive": true,
+      "examples": [
+        {
+          "title": "Avatar with Image",
+          "code": "<Avatar src=\"/user.jpg\" alt=\"John Doe\" />"
+        },
+        {
+          "title": "Avatar with Fallback",
+          "code": "<Avatar fallback=\"JD\" size=\"lg\" />"
+        }
+      ]
+    },
+    {
+      "name": "Card",
+      "category": "layout",
+      "description": "A container component for grouping related content with header, body, and footer sections",
+      "keywords": ["card", "container", "panel", "box", "section"],
+      "file": "components/card.tsx",
+      "variants": [
+        {
+          "name": "variant",
+          "values": ["default", "outline"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Basic Card",
+          "code": "<Card><CardHeader><CardTitle>Title</CardTitle></CardHeader><CardContent>Content here</CardContent></Card>"
+        },
+        {
+          "title": "Card with Footer",
+          "code": "<Card variant=\"outline\"><CardHeader><CardTitle>Title</CardTitle></CardHeader><CardContent>Content</CardContent><CardFooter>Footer</CardFooter></Card>"
+        }
+      ]
+    },
+    {
+      "name": "Modal",
+      "category": "layout",
+      "description": "A dialog/modal component for displaying content in an overlay, built with Radix UI",
+      "keywords": ["modal", "dialog", "overlay", "popup", "lightbox"],
+      "file": "components/modal.tsx",
+      "variants": [
+        {
+          "name": "variant",
+          "values": ["default", "center", "fullscreen"]
+        }
+      ],
+      "hasRadixPrimitive": true,
+      "examples": [
+        {
+          "title": "Basic Modal",
+          "code": "<Modal><ModalTrigger><Button>Open</Button></ModalTrigger><ModalContent><ModalHeader><ModalTitle>Title</ModalTitle></ModalHeader>Content here</ModalContent></Modal>"
+        },
+        {
+          "title": "Centered Modal",
+          "code": "<Modal><ModalTrigger><Button>Open</Button></ModalTrigger><ModalContent variant=\"center\"><ModalHeader><ModalTitle>Centered</ModalTitle></ModalHeader>Centered content</ModalContent></Modal>"
+        }
+      ]
+    },
+    {
+      "name": "Drawer",
+      "category": "layout",
+      "description": "A slide-out panel component for side navigation or additional content, built with Radix UI",
+      "keywords": ["drawer", "sidebar", "panel", "sheet", "slide"],
+      "file": "components/drawer.tsx",
+      "variants": [
+        {
+          "name": "side",
+          "values": ["left", "right"]
+        }
+      ],
+      "hasRadixPrimitive": true,
+      "examples": [
+        {
+          "title": "Left Drawer",
+          "code": "<Drawer><DrawerTrigger><Button>Open</Button></DrawerTrigger><DrawerContent side=\"left\"><DrawerHeader><DrawerTitle>Menu</DrawerTitle></DrawerHeader>Content</DrawerContent></Drawer>"
+        },
+        {
+          "title": "Right Drawer",
+          "code": "<Drawer><DrawerTrigger><Button>Settings</Button></DrawerTrigger><DrawerContent side=\"right\">Settings panel</DrawerContent></Drawer>"
+        }
+      ]
+    },
+    {
+      "name": "Tabs",
+      "category": "layout",
+      "description": "A tabbed interface component for organizing content into separate views, built with Radix UI",
+      "keywords": ["tabs", "tablist", "navigation", "switcher", "panels"],
+      "file": "components/tabs.tsx",
+      "variants": [
+        {
+          "name": "variant",
+          "values": ["default", "pills"]
+        }
+      ],
+      "hasRadixPrimitive": true,
+      "examples": [
+        {
+          "title": "Basic Tabs",
+          "code": "<Tabs defaultValue=\"tab1\"><TabsList><TabsTrigger value=\"tab1\">Tab 1</TabsTrigger><TabsTrigger value=\"tab2\">Tab 2</TabsTrigger></TabsList><TabsContent value=\"tab1\">Content 1</TabsContent><TabsContent value=\"tab2\">Content 2</TabsContent></Tabs>"
+        },
+        {
+          "title": "Pills Variant",
+          "code": "<Tabs defaultValue=\"tab1\" variant=\"pills\"><TabsList><TabsTrigger value=\"tab1\">Tab 1</TabsTrigger><TabsTrigger value=\"tab2\">Tab 2</TabsTrigger></TabsList><TabsContent value=\"tab1\">Content 1</TabsContent></Tabs>"
+        }
+      ]
+    },
+    {
+      "name": "DataCard",
+      "category": "data-display",
+      "description": "A specialized card for displaying data with labels, values, and optional trends",
+      "keywords": ["data", "card", "metric", "display", "information"],
+      "file": "components/data-card.tsx",
+      "variants": [
+        {
+          "name": "variant",
+          "values": ["default", "outline"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Data Card with Label",
+          "code": "<DataCard><DataCardLabel>Total Revenue</DataCardLabel><DataCardValue>$12,345</DataCardValue></DataCard>"
+        },
+        {
+          "title": "Data Card with Description",
+          "code": "<DataCard variant=\"outline\"><DataCardLabel>Users</DataCardLabel><DataCardValue>1,234</DataCardValue><DataCardDescription>Active this month</DataCardDescription></DataCard>"
+        }
+      ]
+    },
+    {
+      "name": "DataTable",
+      "category": "data-display",
+      "description": "A table component for displaying structured data with sorting and styling options",
+      "keywords": ["table", "data", "grid", "list", "rows"],
+      "file": "components/data-table.tsx",
+      "variants": [
+        {
+          "name": "variant",
+          "values": ["default", "striped"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Basic Table",
+          "code": "<DataTable><DataTableHeader><DataTableRow><DataTableHead>Name</DataTableHead><DataTableHead>Email</DataTableHead></DataTableRow></DataTableHeader><DataTableBody><DataTableRow><DataTableCell>John</DataTableCell><DataTableCell>john@example.com</DataTableCell></DataTableRow></DataTableBody></DataTable>"
+        },
+        {
+          "title": "Striped Table",
+          "code": "<DataTable variant=\"striped\"><DataTableHeader><DataTableRow><DataTableHead>Product</DataTableHead><DataTableHead>Price</DataTableHead></DataTableRow></DataTableHeader><DataTableBody><DataTableRow><DataTableCell>Item 1</DataTableCell><DataTableCell>$10</DataTableCell></DataTableRow></DataTableBody></DataTable>"
+        }
+      ]
+    },
+    {
+      "name": "Stat",
+      "category": "data-display",
+      "description": "A component for displaying statistics with labels, values, and optional trend indicators",
+      "keywords": ["stat", "statistic", "metric", "number", "kpi"],
+      "file": "components/stat.tsx",
+      "variants": [
+        {
+          "name": "variant",
+          "values": ["default", "card"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Simple Stat",
+          "code": "<Stat><StatLabel>Total Sales</StatLabel><StatValue>$45,231</StatValue></Stat>"
+        },
+        {
+          "title": "Stat with Helper Text",
+          "code": "<Stat variant=\"card\"><StatLabel>Growth</StatLabel><StatValue>23.5%</StatValue><StatHelper>+2.5% from last month</StatHelper></Stat>"
+        }
+      ]
+    },
+    {
+      "name": "ProductCard",
+      "category": "commerce",
+      "description": "A card component optimized for displaying product information including images, titles, and prices",
+      "keywords": ["product", "card", "ecommerce", "shop", "item"],
+      "file": "components/product-card.tsx",
+      "variants": [
+        {
+          "name": "variant",
+          "values": ["default", "compact"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Product Card",
+          "code": "<ProductCard><ProductCardImage src=\"/product.jpg\" alt=\"Product\" /><ProductCardTitle>Product Name</ProductCardTitle><ProductCardPrice>$99.99</ProductCardPrice></ProductCard>"
+        },
+        {
+          "title": "Compact Product Card",
+          "code": "<ProductCard variant=\"compact\"><ProductCardImage src=\"/product.jpg\" alt=\"Product\" /><ProductCardTitle>Product</ProductCardTitle><ProductCardPrice>$49.99</ProductCardPrice><ProductCardButton>Add to Cart</ProductCardButton></ProductCard>"
+        }
+      ]
+    },
+    {
+      "name": "CartItem",
+      "category": "commerce",
+      "description": "A component for displaying shopping cart items with quantity controls and removal options",
+      "keywords": ["cart", "item", "shopping", "checkout", "product"],
+      "file": "components/cart-item.tsx",
+      "variants": [
+        {
+          "name": "variant",
+          "values": ["default", "compact"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Cart Item",
+          "code": "<CartItem><CartItemImage src=\"/product.jpg\" alt=\"Product\" /><CartItemDetails><CartItemTitle>Product Name</CartItemTitle><CartItemPrice>$99.99</CartItemPrice></CartItemDetails><CartItemQuantity quantity={2} /><CartItemRemove /></CartItem>"
+        },
+        {
+          "title": "Compact Cart Item",
+          "code": "<CartItem variant=\"compact\"><CartItemImage src=\"/product.jpg\" alt=\"Product\" /><CartItemDetails><CartItemTitle>Product</CartItemTitle><CartItemPrice>$49.99</CartItemPrice></CartItemDetails></CartItem>"
+        }
+      ]
+    },
+    {
+      "name": "PriceTag",
+      "category": "commerce",
+      "description": "A component for displaying prices with optional original price and discount information",
+      "keywords": ["price", "tag", "cost", "discount", "sale"],
+      "file": "components/price-tag.tsx",
+      "variants": [
+        {
+          "name": "variant",
+          "values": ["default", "large"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Simple Price",
+          "code": "<PriceTag price={99.99} />"
+        },
+        {
+          "title": "Price with Discount",
+          "code": "<PriceTag price={79.99} originalPrice={99.99} variant=\"large\" />"
+        }
+      ]
+    },
+    {
+      "name": "QuantitySelector",
+      "category": "commerce",
+      "description": "A component for selecting quantities with increment and decrement buttons",
+      "keywords": ["quantity", "selector", "counter", "stepper", "amount"],
+      "file": "components/quantity-selector.tsx",
+      "variants": [
+        {
+          "name": "size",
+          "values": ["sm", "md", "lg"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Basic Quantity Selector",
+          "code": "<QuantitySelector value={1} onChange={(val) => console.log(val)} />"
+        },
+        {
+          "title": "Quantity Selector with Limits",
+          "code": "<QuantitySelector value={5} min={1} max={10} size=\"lg\" onChange={(val) => console.log(val)} />"
+        }
+      ]
+    },
+    {
+      "name": "Hero",
+      "category": "landing",
+      "description": "A hero section component for landing pages with headline, description, and call-to-action",
+      "keywords": ["hero", "banner", "header", "landing", "section"],
+      "file": "components/hero.tsx",
+      "variants": [
+        {
+          "name": "alignment",
+          "values": ["left", "center"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Centered Hero",
+          "code": "<Hero alignment=\"center\"><HeroHeadline>Welcome to Our Product</HeroHeadline><HeroDescription>The best solution for your needs</HeroDescription><HeroActions><Button>Get Started</Button></HeroActions></Hero>"
+        },
+        {
+          "title": "Left-Aligned Hero",
+          "code": "<Hero alignment=\"left\"><HeroHeadline>Build Faster</HeroHeadline><HeroDescription>Ship products quickly</HeroDescription><HeroActions><Button>Learn More</Button></HeroActions></Hero>"
+        }
+      ]
+    },
+    {
+      "name": "FeatureGrid",
+      "category": "landing",
+      "description": "A grid layout component for displaying features with icons, titles, and descriptions",
+      "keywords": ["features", "grid", "layout", "benefits", "highlights"],
+      "file": "components/feature-grid.tsx",
+      "variants": [
+        {
+          "name": "columns",
+          "values": ["2", "3", "4"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Three Column Feature Grid",
+          "code": "<FeatureGrid columns=\"3\"><FeatureGridItem><FeatureGridIcon>⚡</FeatureGridIcon><FeatureGridTitle>Fast</FeatureGridTitle><FeatureGridDescription>Lightning quick performance</FeatureGridDescription></FeatureGridItem></FeatureGrid>"
+        },
+        {
+          "title": "Two Column Feature Grid",
+          "code": "<FeatureGrid columns=\"2\"><FeatureGridItem><FeatureGridTitle>Secure</FeatureGridTitle><FeatureGridDescription>Enterprise-grade security</FeatureGridDescription></FeatureGridItem></FeatureGrid>"
+        }
+      ]
+    },
+    {
+      "name": "CTA",
+      "category": "landing",
+      "description": "A call-to-action component for encouraging user actions with headlines and buttons",
+      "keywords": ["cta", "call-to-action", "banner", "conversion", "action"],
+      "file": "components/cta.tsx",
+      "variants": [
+        {
+          "name": "variant",
+          "values": ["default", "card"]
+        },
+        {
+          "name": "alignment",
+          "values": ["left", "center"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Centered CTA",
+          "code": "<CTA alignment=\"center\"><CTAHeadline>Ready to get started?</CTAHeadline><CTADescription>Join thousands of satisfied customers</CTADescription><CTAActions><Button>Sign Up Now</Button></CTAActions></CTA>"
+        },
+        {
+          "title": "Card Style CTA",
+          "code": "<CTA variant=\"card\" alignment=\"left\"><CTAHeadline>Boost Your Productivity</CTAHeadline><CTADescription>Try it free for 14 days</CTADescription><CTAActions><Button>Start Free Trial</Button></CTAActions></CTA>"
+        }
+      ]
+    },
+    {
+      "name": "Testimonial",
+      "category": "landing",
+      "description": "A component for displaying customer testimonials with quotes, names, and avatars",
+      "keywords": ["testimonial", "review", "quote", "feedback", "social-proof"],
+      "file": "components/testimonial.tsx",
+      "variants": [
+        {
+          "name": "variant",
+          "values": ["default", "card"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Simple Testimonial",
+          "code": "<Testimonial><TestimonialQuote>This product changed our business!</TestimonialQuote><TestimonialAuthor name=\"John Doe\" role=\"CEO\" /></Testimonial>"
+        },
+        {
+          "title": "Card Testimonial with Avatar",
+          "code": "<Testimonial variant=\"card\"><TestimonialQuote>Amazing experience from start to finish</TestimonialQuote><TestimonialAuthor name=\"Jane Smith\" role=\"Designer\" avatar=\"/avatar.jpg\" /></Testimonial>"
+        }
+      ]
+    },
+    {
+      "name": "Form",
+      "category": "forms",
+      "description": "A form wrapper component with built-in validation and submission handling",
+      "keywords": ["form", "submit", "validation", "input", "fields"],
+      "file": "components/form.tsx",
+      "variants": [],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Basic Form",
+          "code": "<Form onSubmit={(data) => console.log(data)}><FormField name=\"email\" label=\"Email\" /><Button type=\"submit\">Submit</Button></Form>"
+        },
+        {
+          "title": "Form with Multiple Fields",
+          "code": "<Form onSubmit={(data) => console.log(data)}><FormField name=\"name\" label=\"Name\" /><FormField name=\"email\" label=\"Email\" type=\"email\" /><Button type=\"submit\">Register</Button></Form>"
+        }
+      ]
+    },
+    {
+      "name": "FormField",
+      "category": "forms",
+      "description": "A form field component with label, input, error message, and helper text support",
+      "keywords": ["form-field", "input", "label", "validation", "error"],
+      "file": "components/form-field.tsx",
+      "variants": [
+        {
+          "name": "variant",
+          "values": ["default", "inline"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Form Field with Label",
+          "code": "<FormField name=\"email\" label=\"Email Address\" placeholder=\"Enter your email\" />"
+        },
+        {
+          "title": "Inline Form Field",
+          "code": "<FormField name=\"search\" label=\"Search\" variant=\"inline\" placeholder=\"Search...\" />"
+        }
+      ]
+    },
+    {
+      "name": "Select",
+      "category": "forms",
+      "description": "A dropdown select component with search and multi-select capabilities, built with Radix UI",
+      "keywords": ["select", "dropdown", "picker", "menu", "options"],
+      "file": "components/select.tsx",
+      "variants": [
+        {
+          "name": "size",
+          "values": ["sm", "md", "lg"]
+        }
+      ],
+      "hasRadixPrimitive": true,
+      "examples": [
+        {
+          "title": "Basic Select",
+          "code": "<Select><SelectTrigger><SelectValue placeholder=\"Select option\" /></SelectTrigger><SelectContent><SelectItem value=\"1\">Option 1</SelectItem><SelectItem value=\"2\">Option 2</SelectItem></SelectContent></Select>"
+        },
+        {
+          "title": "Large Select",
+          "code": "<Select size=\"lg\"><SelectTrigger><SelectValue placeholder=\"Choose\" /></SelectTrigger><SelectContent><SelectItem value=\"a\">Choice A</SelectItem><SelectItem value=\"b\">Choice B</SelectItem></SelectContent></Select>"
+        }
+      ]
+    },
+    {
+      "name": "Checkbox",
+      "category": "forms",
+      "description": "A checkbox input component with label and indeterminate state support, built with Radix UI",
+      "keywords": ["checkbox", "check", "toggle", "input", "boolean"],
+      "file": "components/checkbox.tsx",
+      "variants": [
+        {
+          "name": "size",
+          "values": ["sm", "md", "lg"]
+        }
+      ],
+      "hasRadixPrimitive": true,
+      "examples": [
+        {
+          "title": "Simple Checkbox",
+          "code": "<Checkbox id=\"terms\" label=\"Accept terms and conditions\" />"
+        },
+        {
+          "title": "Large Checkbox",
+          "code": "<Checkbox id=\"newsletter\" label=\"Subscribe to newsletter\" size=\"lg\" />"
+        }
+      ]
+    },
+    {
+      "name": "Radio",
+      "category": "forms",
+      "description": "A radio button component for selecting a single option from a group, built with Radix UI",
+      "keywords": ["radio", "option", "choice", "select", "input"],
+      "file": "components/radio.tsx",
+      "variants": [
+        {
+          "name": "size",
+          "values": ["sm", "md", "lg"]
+        }
+      ],
+      "hasRadixPrimitive": true,
+      "examples": [
+        {
+          "title": "Radio Group",
+          "code": "<RadioGroup><Radio value=\"1\" label=\"Option 1\" /><Radio value=\"2\" label=\"Option 2\" /></RadioGroup>"
+        },
+        {
+          "title": "Large Radio Buttons",
+          "code": "<RadioGroup><Radio value=\"a\" label=\"Choice A\" size=\"lg\" /><Radio value=\"b\" label=\"Choice B\" size=\"lg\" /></RadioGroup>"
+        }
+      ]
+    },
+    {
+      "name": "Popover",
+      "category": "overlay",
+      "description": "Displays rich content in a floating panel triggered by a click, built with Radix UI",
+      "keywords": ["popover", "popup", "dropdown", "floating", "panel"],
+      "file": "components/popover.tsx",
+      "variants": [
+        {
+          "name": "variant",
+          "values": ["default", "outline"]
+        },
+        {
+          "name": "side",
+          "values": ["top", "bottom", "left", "right"]
+        }
+      ],
+      "hasRadixPrimitive": true,
+      "examples": [
+        {
+          "title": "Basic Popover",
+          "code": "<Popover><PopoverTrigger>Click me</PopoverTrigger><PopoverContent>Popover content</PopoverContent></Popover>"
+        },
+        {
+          "title": "Popover with Close and Arrow",
+          "code": "<Popover><PopoverTrigger>Click me</PopoverTrigger><PopoverContent variant=\"outline\" showArrow><p>Content</p><PopoverClose>Close</PopoverClose></PopoverContent></Popover>"
+        }
+      ]
+    },
+    {
+      "name": "Tooltip",
+      "category": "overlay",
+      "description": "Displays informational text when hovering or focusing on an element, built with Radix UI",
+      "keywords": ["tooltip", "hover", "popover", "hint", "info"],
+      "file": "components/tooltip.tsx",
+      "variants": [
+        {
+          "name": "variant",
+          "values": ["default", "light"]
+        },
+        {
+          "name": "side",
+          "values": ["top", "bottom", "left", "right"]
+        }
+      ],
+      "hasRadixPrimitive": true,
+      "examples": [
+        {
+          "title": "Basic Tooltip",
+          "code": "<TooltipProvider><Tooltip><TooltipTrigger>Hover me</TooltipTrigger><TooltipContent>Tooltip text</TooltipContent></Tooltip></TooltipProvider>"
+        },
+        {
+          "title": "Light Tooltip with Arrow",
+          "code": "<TooltipProvider><Tooltip><TooltipTrigger>Hover me</TooltipTrigger><TooltipContent variant=\"light\" showArrow>Light tooltip</TooltipContent></Tooltip></TooltipProvider>"
+        }
+      ]
+    },
+    {
+      "name": "Textarea",
+      "category": "primitives",
+      "description": "A textarea component with validation states and sizes for multi-line text input",
+      "keywords": ["textarea", "text", "multiline", "input", "form"],
+      "file": "components/textarea.tsx",
+      "variants": [
+        {
+          "name": "variant",
+          "values": ["default", "error", "success"]
+        },
+        {
+          "name": "size",
+          "values": ["sm", "md", "lg"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Basic Textarea",
+          "code": "<Textarea placeholder=\"Enter your message...\" />"
+        },
+        {
+          "title": "Textarea with Error State",
+          "code": "<Textarea variant=\"error\" placeholder=\"Invalid input\" />"
+        }
+      ]
+    },
+    {
+      "name": "Switch",
+      "category": "primitives",
+      "description": "A toggle switch component for boolean on/off states, built with Radix UI",
+      "keywords": ["switch", "toggle", "on", "off", "boolean"],
+      "file": "components/switch.tsx",
+      "variants": [
+        {
+          "name": "size",
+          "values": ["sm", "md", "lg"]
+        }
+      ],
+      "hasRadixPrimitive": true,
+      "examples": [
+        {
+          "title": "Basic Switch",
+          "code": "<Switch id=\"airplane-mode\" />"
+        },
+        {
+          "title": "Switch with Label",
+          "code": "<div className=\"flex items-center space-x-2\"><Switch id=\"notifications\" /><label htmlFor=\"notifications\">Enable notifications</label></div>"
+        }
+      ]
+    },
+    {
+      "name": "Container",
+      "category": "layout",
+      "description": "A responsive container component with max-width constraints and optional padding",
+      "keywords": ["container", "wrapper", "layout", "responsive", "max-width"],
+      "file": "components/container.tsx",
+      "variants": [
+        {
+          "name": "maxWidth",
+          "values": ["sm", "md", "lg", "xl", "2xl", "full"]
+        },
+        {
+          "name": "padding",
+          "values": ["true", "false"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Default Container",
+          "code": "<Container>Content here</Container>"
+        },
+        {
+          "title": "Small Container",
+          "code": "<Container maxWidth=\"sm\">Narrow content</Container>"
+        }
+      ]
+    },
+    {
+      "name": "Grid",
+      "category": "layout",
+      "description": "A responsive CSS Grid layout component with configurable columns and gap",
+      "keywords": ["grid", "layout", "columns", "responsive", "css-grid"],
+      "file": "components/grid.tsx",
+      "variants": [
+        {
+          "name": "cols",
+          "values": ["1", "2", "3", "4", "5", "6", "12"]
+        },
+        {
+          "name": "gap",
+          "values": ["none", "sm", "md", "lg", "xl"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "3-Column Grid",
+          "code": "<Grid cols={3} gap=\"md\"><div>Item 1</div><div>Item 2</div><div>Item 3</div></Grid>"
+        },
+        {
+          "title": "4-Column Grid",
+          "code": "<Grid cols={4} gap=\"lg\"><div>A</div><div>B</div><div>C</div><div>D</div></Grid>"
+        }
+      ]
+    },
+    {
+      "name": "Stack",
+      "category": "layout",
+      "description": "A stack component for vertical or horizontal stacking with consistent spacing",
+      "keywords": ["stack", "layout", "vertical", "horizontal", "spacing"],
+      "file": "components/stack.tsx",
+      "variants": [
+        {
+          "name": "direction",
+          "values": ["vertical", "horizontal"]
+        },
+        {
+          "name": "spacing",
+          "values": ["none", "xs", "sm", "md", "lg", "xl"]
+        },
+        {
+          "name": "align",
+          "values": ["start", "center", "end", "stretch"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Vertical Stack",
+          "code": "<Stack spacing=\"md\"><div>Item 1</div><div>Item 2</div></Stack>"
+        },
+        {
+          "title": "Horizontal Stack",
+          "code": "<Stack direction=\"horizontal\" spacing=\"lg\" align=\"center\"><Button>Action 1</Button><Button>Action 2</Button></Stack>"
+        }
+      ]
+    },
+    {
+      "name": "Flex",
+      "category": "layout",
+      "description": "A flexible flexbox layout component for common alignment and distribution patterns",
+      "keywords": ["flex", "flexbox", "layout", "align", "justify"],
+      "file": "components/flex.tsx",
+      "variants": [
+        {
+          "name": "direction",
+          "values": ["row", "column", "row-reverse", "column-reverse"]
+        },
+        {
+          "name": "justify",
+          "values": ["start", "center", "end", "between", "around", "evenly"]
+        },
+        {
+          "name": "align",
+          "values": ["start", "center", "end", "stretch", "baseline"]
+        },
+        {
+          "name": "gap",
+          "values": ["none", "xs", "sm", "md", "lg", "xl"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Space Between",
+          "code": "<Flex justify=\"between\" align=\"center\"><span>Left</span><span>Right</span></Flex>"
+        },
+        {
+          "title": "Centered Column",
+          "code": "<Flex direction=\"column\" justify=\"center\" align=\"center\"><h1>Title</h1><p>Description</p></Flex>"
+        }
+      ]
+    },
+    {
+      "name": "Spacer",
+      "category": "layout",
+      "description": "A spacer component for adding fixed or flexible spacing between elements",
+      "keywords": ["spacer", "space", "gap", "divider", "layout"],
+      "file": "components/spacer.tsx",
+      "variants": [
+        {
+          "name": "size",
+          "values": ["xs", "sm", "md", "lg", "xl", "2xl"]
+        },
+        {
+          "name": "flex",
+          "values": ["true", "false"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Fixed Spacer",
+          "code": "<Spacer size=\"md\" />"
+        },
+        {
+          "title": "Flex Spacer",
+          "code": "<Flex><div>Left</div><Spacer flex /><div>Right</div></Flex>"
+        }
+      ]
+    },
+    {
+      "name": "DropdownMenu",
+      "category": "overlay",
+      "description": "A dropdown menu component for displaying actions or options triggered by a button click, built with Radix UI",
+      "keywords": ["dropdown", "menu", "context", "actions", "options", "navigation"],
+      "file": "components/dropdown-menu.tsx",
+      "variants": [
+        {
+          "name": "variant",
+          "values": ["default", "outline"]
+        }
+      ],
+      "hasRadixPrimitive": true,
+      "examples": [
+        {
+          "title": "Basic Dropdown Menu",
+          "code": "<DropdownMenu><DropdownMenuTrigger><Button>Open</Button></DropdownMenuTrigger><DropdownMenuContent><DropdownMenuItem>Profile</DropdownMenuItem><DropdownMenuItem>Settings</DropdownMenuItem></DropdownMenuContent></DropdownMenu>"
+        },
+        {
+          "title": "Dropdown with Checkbox Items",
+          "code": "<DropdownMenu><DropdownMenuTrigger><Button>View</Button></DropdownMenuTrigger><DropdownMenuContent><DropdownMenuCheckboxItem checked>Show Toolbar</DropdownMenuCheckboxItem><DropdownMenuCheckboxItem>Show Sidebar</DropdownMenuCheckboxItem></DropdownMenuContent></DropdownMenu>"
+        }
+      ]
+    },
+    {
+      "name": "AlertDialog",
+      "category": "overlay",
+      "description": "A modal dialog for confirming destructive or important actions that requires explicit user response, built with Radix UI",
+      "keywords": ["alert", "dialog", "confirm", "modal", "destructive", "warning"],
+      "file": "components/alert-dialog.tsx",
+      "variants": [
+        {
+          "name": "variant",
+          "values": ["default", "destructive"]
+        }
+      ],
+      "hasRadixPrimitive": true,
+      "examples": [
+        {
+          "title": "Basic Alert Dialog",
+          "code": "<AlertDialog><AlertDialogTrigger><Button>Delete</Button></AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Are you sure?</AlertDialogTitle><AlertDialogDescription>This action cannot be undone.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction>Continue</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>"
+        },
+        {
+          "title": "Destructive Alert Dialog",
+          "code": "<AlertDialog><AlertDialogTrigger><Button variant=\"destructive\">Delete Account</Button></AlertDialogTrigger><AlertDialogContent variant=\"destructive\"><AlertDialogHeader><AlertDialogTitle>Delete Account</AlertDialogTitle><AlertDialogDescription>This will permanently delete your account.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction>Delete</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>"
+        }
+      ]
+    },
+    {
+      "name": "Alert",
+      "category": "feedback",
+      "description": "An inline feedback message component for displaying contextual alerts with dismiss support",
+      "keywords": ["alert", "message", "notification", "feedback", "warning", "info"],
+      "file": "components/alert.tsx",
+      "variants": [
+        {
+          "name": "variant",
+          "values": ["info", "success", "warning", "destructive"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Info Alert",
+          "code": "<Alert variant=\"info\"><AlertTitle>Information</AlertTitle><AlertDescription>This is an informational message.</AlertDescription></Alert>"
+        },
+        {
+          "title": "Dismissible Alert",
+          "code": "<Alert variant=\"warning\" dismissible onDismiss={() => {}}><AlertTitle>Warning</AlertTitle><AlertDescription>Please review your input.</AlertDescription></Alert>"
+        }
+      ]
+    },
+    {
+      "name": "Progress",
+      "category": "feedback",
+      "description": "A progress bar component for displaying completion percentage with multiple variants",
+      "keywords": ["progress", "bar", "loading", "percentage", "completion"],
+      "file": "components/progress.tsx",
+      "variants": [
+        {
+          "name": "variant",
+          "values": ["default", "success", "warning", "danger", "info"]
+        },
+        {
+          "name": "size",
+          "values": ["sm", "md", "lg"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Basic Progress",
+          "code": "<Progress value={60} />"
+        },
+        {
+          "title": "Progress with Label",
+          "code": "<Progress value={75} variant=\"success\" size=\"lg\" showLabel />"
+        }
+      ]
+    },
+    {
+      "name": "Spinner",
+      "category": "feedback",
+      "description": "An animated loading spinner indicator with multiple sizes and color variants",
+      "keywords": ["spinner", "loading", "indicator", "busy", "wait"],
+      "file": "components/spinner.tsx",
+      "variants": [
+        {
+          "name": "variant",
+          "values": ["default", "secondary", "success", "destructive", "info"]
+        },
+        {
+          "name": "size",
+          "values": ["sm", "md", "lg", "xl"]
+        }
+      ],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Default Spinner",
+          "code": "<Spinner />"
+        },
+        {
+          "title": "Large Spinner with Label",
+          "code": "<Spinner size=\"xl\" label=\"Loading data...\" />"
+        }
+      ]
+    },
+    {
+      "name": "Skeleton",
+      "category": "feedback",
+      "description": "A placeholder loading component with pulse animation for content that is loading",
+      "keywords": ["skeleton", "loading", "placeholder", "shimmer", "pulse"],
+      "file": "components/skeleton.tsx",
+      "variants": [],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Text Skeleton",
+          "code": "<Skeleton className=\"h-4 w-48\" />"
+        },
+        {
+          "title": "Card Skeleton",
+          "code": "<div className=\"space-y-3\"><Skeleton className=\"h-40 w-full\" /><Skeleton className=\"h-4 w-3/4\" /><Skeleton className=\"h-4 w-1/2\" /></div>"
+        }
+      ]
+    },
+    {
+      "name": "Accordion",
+      "category": "layout",
+      "description": "A collapsible content component for organizing information into expandable sections, built with Radix UI",
+      "keywords": ["accordion", "collapse", "expand", "toggle", "faq", "sections"],
+      "file": "components/accordion.tsx",
+      "variants": [],
+      "hasRadixPrimitive": true,
+      "examples": [
+        {
+          "title": "Single Accordion",
+          "code": "<Accordion type=\"single\" collapsible><AccordionItem value=\"item-1\"><AccordionTrigger>Section 1</AccordionTrigger><AccordionContent>Content for section 1</AccordionContent></AccordionItem><AccordionItem value=\"item-2\"><AccordionTrigger>Section 2</AccordionTrigger><AccordionContent>Content for section 2</AccordionContent></AccordionItem></Accordion>"
+        },
+        {
+          "title": "Multiple Accordion",
+          "code": "<Accordion type=\"multiple\"><AccordionItem value=\"item-1\"><AccordionTrigger>First</AccordionTrigger><AccordionContent>First content</AccordionContent></AccordionItem></Accordion>"
+        }
+      ]
+    },
+    {
+      "name": "Separator",
+      "category": "layout",
+      "description": "A visual divider component for separating content sections, built with Radix UI",
+      "keywords": ["separator", "divider", "line", "hr", "border"],
+      "file": "components/separator.tsx",
+      "variants": [
+        {
+          "name": "orientation",
+          "values": ["horizontal", "vertical"]
+        }
+      ],
+      "hasRadixPrimitive": true,
+      "examples": [
+        {
+          "title": "Horizontal Separator",
+          "code": "<div><p>Above</p><Separator /><p>Below</p></div>"
+        },
+        {
+          "title": "Vertical Separator",
+          "code": "<div className=\"flex h-5 items-center space-x-4\"><span>Left</span><Separator orientation=\"vertical\" /><span>Right</span></div>"
+        }
+      ]
+    },
+    {
+      "name": "Breadcrumb",
+      "category": "navigation",
+      "description": "A navigation component for displaying the current page location within a hierarchical structure",
+      "keywords": ["breadcrumb", "navigation", "path", "trail", "hierarchy"],
+      "file": "components/breadcrumb.tsx",
+      "variants": [],
+      "hasRadixPrimitive": false,
+      "examples": [
+        {
+          "title": "Basic Breadcrumb",
+          "code": "<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href=\"/\">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbLink href=\"/products\">Products</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Details</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>"
+        },
+        {
+          "title": "Breadcrumb with Links",
+          "code": "<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href=\"/\">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Current Page</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>"
+        }
+      ]
+    }
+  ]
+}