{"name":"OpenCosmos UI","version":"1.1.0","totalComponents":102,"package":"@opencosmos/ui","install":"pnpm add @opencosmos/ui","docs":"https://opencosmos.ai/studio/docs","llmsFullTxt":"https://opencosmos.ai/studio/llms-full.txt","mcp":"@opencosmos/mcp","themes":["studio","terra","volt"],"categories":[{"id":"actions","label":"Actions","description":"Interactive elements that trigger behaviors","count":5},{"id":"forms","label":"Forms","description":"Input controls for data collection","count":19},{"id":"navigation","label":"Navigation","description":"Moving through content and hierarchy","count":10},{"id":"overlays","label":"Overlays","description":"Contextual content that appears above the main UI","count":12},{"id":"feedback","label":"Feedback","description":"Communicating system state and user action results","count":10},{"id":"data-display","label":"Data Display","description":"Presenting information in structured formats","count":19},{"id":"layout","label":"Layout","description":"Spatial organization and structural elements","count":18},{"id":"backgrounds","label":"Backgrounds","description":"Animated background effects and decorative elements","count":4},{"id":"cursor","label":"Cursor","description":"Custom cursor effects and interactions","count":2},{"id":"motion","label":"Motion","description":"Animation components and motion effects","count":1},{"id":"blocks","label":"Blocks","description":"Composed page sections and layouts","count":2}],"components":[{"name":"Button","category":"actions","description":"Primary interaction element with multiple variants for different use cases","keywords":["button","click","action","submit","cta","interactive"],"useCases":["Form submission","Navigation triggers","Action confirmation","Call-to-action elements"],"dependencies":["@radix-ui/react-slot"],"radixPrimitive":"@radix-ui/react-slot","props":{"variant":{"type":"'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'","default":"'default'","description":"Visual style variant"},"size":{"type":"'sm' | 'default' | 'lg' | 'icon'","default":"'default'","description":"Size variant"},"disabled":{"type":"boolean","default":"false","description":"Disable interaction"},"asChild":{"type":"boolean","default":"false","description":"Render as child element via Radix Slot"}},"subComponents":null,"example":"<Button variant=\"outline\" size=\"sm\" onClick={handleClick}>Click Me</Button>"},{"name":"Toggle","category":"actions","description":"Binary state toggle with pressed/unpressed states","keywords":["toggle","switch","binary","on-off","state"],"useCases":["Toolbar buttons","Feature toggles","View mode switches","Filter activation"],"dependencies":["@radix-ui/react-toggle"],"radixPrimitive":"@radix-ui/react-toggle","props":{"pressed":{"type":"boolean","description":"Controlled pressed state"},"onPressedChange":{"type":"(pressed: boolean) => void","description":"Callback on press change"},"variant":{"type":"'default' | 'outline'","default":"'default'","description":"Visual variant"},"size":{"type":"'sm' | 'default' | 'lg'","default":"'default'","description":"Size variant"},"disabled":{"type":"boolean","default":"false","description":"Disable interaction"}},"subComponents":null,"example":"<Toggle pressed={isBold} onPressedChange={setIsBold}><Bold className=\"h-4 w-4\" /></Toggle>"},{"name":"ToggleGroup","category":"actions","description":"Multiple toggles with single or multi-select modes","keywords":["toggle","group","selection","multi-select","options"],"useCases":["Text formatting toolbars","View mode selection","Filter groups","Option selection"],"dependencies":["@radix-ui/react-toggle-group"],"radixPrimitive":"@radix-ui/react-toggle-group","props":{"type":{"type":"'single' | 'multiple'","description":"Selection mode","required":true},"value":{"type":"string | string[]","description":"Selected value(s)"},"onValueChange":{"type":"(value) => void","description":"Callback on value change"},"variant":{"type":"'default' | 'outline'","default":"'default'","description":"Visual variant"},"size":{"type":"'sm' | 'default' | 'lg'","default":"'default'","description":"Size variant"}},"subComponents":["ToggleGroupItem"],"example":"<ToggleGroup type=\"single\" value={align} onValueChange={setAlign}>\n  <ToggleGroupItem value=\"left\">Left</ToggleGroupItem>\n  <ToggleGroupItem value=\"center\">Center</ToggleGroupItem>\n</ToggleGroup>"},{"name":"Checkbox","category":"forms","description":"Boolean selection control for single or grouped choices","keywords":["checkbox","selection","boolean","multi-select","form"],"useCases":["Multi-select options","Terms acceptance","Feature preferences","Bulk actions"],"dependencies":["@radix-ui/react-checkbox"],"radixPrimitive":"@radix-ui/react-checkbox","props":{"checked":{"type":"boolean | 'indeterminate'","description":"Checked state"},"onCheckedChange":{"type":"(checked: boolean) => void","description":"Callback on check change"},"disabled":{"type":"boolean","default":"false","description":"Disable interaction"}},"subComponents":null,"example":"<div className=\"flex items-center gap-2\">\n  <Checkbox id=\"terms\" checked={accepted} onCheckedChange={setAccepted} />\n  <Label htmlFor=\"terms\">Accept terms</Label>\n</div>"},{"name":"Combobox","category":"forms","description":"Searchable select component with autocomplete functionality","keywords":["combobox","autocomplete","search","select","dropdown","filter"],"useCases":["Country/state selection","Tag selection","User mention","Large option lists"],"dependencies":["cmdk","@radix-ui/react-popover"],"radixPrimitive":"@radix-ui/react-popover","props":{"options":{"type":"{ value: string; label: string }[]","description":"List of options","required":true},"value":{"type":"string","description":"Selected value"},"onValueChange":{"type":"(value: string) => void","description":"Callback on selection"},"placeholder":{"type":"string","description":"Trigger placeholder text"},"searchPlaceholder":{"type":"string","description":"Search input placeholder"},"emptyText":{"type":"string","description":"Text when no results found"}},"subComponents":null,"example":"<Combobox\n  options={[{ value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}\n  value={framework}\n  onValueChange={setFramework}\n  placeholder=\"Select framework\"\n/>"},{"name":"Form","category":"forms","description":"Form wrapper with react-hook-form and zod validation integration","keywords":["form","validation","zod","react-hook-form","schema"],"useCases":["User registration","Settings forms","Data entry","Multi-step forms"],"dependencies":["react-hook-form","@hookform/resolvers","zod"],"radixPrimitive":null,"props":{"...form":{"type":"UseFormReturn","description":"Spread react-hook-form useForm() return value","required":true}},"subComponents":["FormControl","FormDescription","FormField","FormItem","FormLabel","FormMessage"],"example":"<Form {...form}>\n  <form onSubmit={form.handleSubmit(onSubmit)}>\n    <FormField control={form.control} name=\"email\" render={({ field }) => (\n      <FormItem>\n        <FormLabel>Email</FormLabel>\n        <FormControl><Input {...field} /></FormControl>\n        <FormMessage />\n      </FormItem>\n    )} />\n    <Button type=\"submit\">Submit</Button>\n  </form>\n</Form>"},{"name":"Input","category":"forms","description":"Text input field supporting various types (text, email, password, number)","keywords":["input","text","field","form","email","password"],"useCases":["Text entry","Email addresses","Passwords","Numeric input"],"dependencies":[],"radixPrimitive":null,"props":{"type":{"type":"string","default":"'text'","description":"HTML input type"},"placeholder":{"type":"string","description":"Placeholder text"},"disabled":{"type":"boolean","default":"false","description":"Disable interaction"}},"subComponents":null,"example":"<Input type=\"email\" placeholder=\"Enter email\" />"},{"name":"InputOTP","category":"forms","description":"One-time password input with individual character slots","keywords":["otp","verification","security","authentication","2fa","code"],"useCases":["Two-factor authentication","Email verification","Phone verification","Security codes"],"dependencies":["input-otp"],"radixPrimitive":null,"props":{"maxLength":{"type":"number","default":"6","description":"Maximum number of characters"},"value":{"type":"string","description":"Controlled input value"},"onChange":{"type":"(value: string) => void","description":"Callback on value change"}},"subComponents":["InputOTPGroup","InputOTPSlot","InputOTPSeparator"],"example":"<InputOTP maxLength={6}>\n  <InputOTPGroup>\n    <InputOTPSlot index={0} />\n    <InputOTPSlot index={1} />\n    <InputOTPSlot index={2} />\n  </InputOTPGroup>\n  <InputOTPSeparator />\n  <InputOTPGroup>\n    <InputOTPSlot index={3} />\n    <InputOTPSlot index={4} />\n    <InputOTPSlot index={5} />\n  </InputOTPGroup>\n</InputOTP>"},{"name":"Label","category":"forms","description":"Form field labels with proper accessibility associations","keywords":["label","form","accessibility","field-label"],"useCases":["Form field labels","Input descriptions","Accessible forms"],"dependencies":["@radix-ui/react-label"],"radixPrimitive":"@radix-ui/react-label","props":{"htmlFor":{"type":"string","description":"ID of the associated form control"}},"subComponents":null,"example":"<Label htmlFor=\"email\">Email Address</Label>\n<Input id=\"email\" type=\"email\" />"},{"name":"RadioGroup","category":"forms","description":"Exclusive selection control for choosing one option from multiple","keywords":["radio","selection","exclusive","single-select","options"],"useCases":["Single option selection","Survey questions","Payment methods","Shipping options"],"dependencies":["@radix-ui/react-radio-group"],"radixPrimitive":"@radix-ui/react-radio-group","props":{"value":{"type":"string","description":"Controlled selected value"},"onValueChange":{"type":"(value: string) => void","description":"Callback on selection"},"disabled":{"type":"boolean","default":"false","description":"Disable interaction"}},"subComponents":["RadioGroupItem"],"example":"<RadioGroup value={plan} onValueChange={setPlan}>\n  <div className=\"flex items-center gap-2\">\n    <RadioGroupItem value=\"free\" id=\"free\" />\n    <Label htmlFor=\"free\">Free</Label>\n  </div>\n</RadioGroup>"},{"name":"Select","category":"forms","description":"Dropdown selection component for choosing from a list of options","keywords":["select","dropdown","options","picker","choice"],"useCases":["Option selection","Category filtering","Settings choice","Data sorting"],"dependencies":["@radix-ui/react-select"],"radixPrimitive":"@radix-ui/react-select","props":{"value":{"type":"string","description":"Controlled selected value"},"onValueChange":{"type":"(value: string) => void","description":"Callback on selection"},"defaultValue":{"type":"string","description":"Default selected value"}},"subComponents":["SelectTrigger","SelectValue","SelectContent","SelectItem","SelectGroup","SelectLabel","SelectSeparator"],"example":"<Select value={theme} onValueChange={setTheme}>\n  <SelectTrigger className=\"w-[180px]\">\n    <SelectValue placeholder=\"Select theme\" />\n  </SelectTrigger>\n  <SelectContent>\n    <SelectItem value=\"light\">Light</SelectItem>\n    <SelectItem value=\"dark\">Dark</SelectItem>\n  </SelectContent>\n</Select>"},{"name":"Slider","category":"forms","description":"Numeric input control via dragging for range selection","keywords":["slider","range","numeric","volume","adjustment"],"useCases":["Volume control","Price ranges","Numeric settings","Zoom level"],"dependencies":["@radix-ui/react-slider"],"radixPrimitive":"@radix-ui/react-slider","props":{"value":{"type":"number[]","description":"Current value(s)"},"onValueChange":{"type":"(value: number[]) => void","description":"Callback on value change"},"min":{"type":"number","default":"0","description":"Minimum value"},"max":{"type":"number","default":"100","description":"Maximum value"},"step":{"type":"number","default":"1","description":"Step increment"},"disabled":{"type":"boolean","default":"false","description":"Disable interaction"}},"subComponents":null,"example":"<Slider value={[volume]} onValueChange={(v) => setVolume(v[0])} max={100} step={1} />"},{"name":"Switch","category":"forms","description":"Toggle switch for binary state changes in forms","keywords":["switch","toggle","boolean","on-off","settings"],"useCases":["Feature toggles","Notification settings","Privacy options","Mode switches"],"dependencies":["@radix-ui/react-switch"],"radixPrimitive":"@radix-ui/react-switch","props":{"checked":{"type":"boolean","description":"Controlled checked state"},"onCheckedChange":{"type":"(checked: boolean) => void","description":"Callback on toggle"},"size":{"type":"'sm' | 'md' | 'lg'","default":"'md'","description":"Size variant"},"disabled":{"type":"boolean","default":"false","description":"Disable interaction"},"label":{"type":"string","description":"Optional label text"}},"subComponents":null,"example":"<Switch checked={enabled} onCheckedChange={setEnabled} size=\"md\" />"},{"name":"Textarea","category":"forms","description":"Multi-line text input for longer content","keywords":["textarea","text","multiline","input","comment","description"],"useCases":["Comment fields","Message composition","Descriptions","Long-form text"],"dependencies":[],"radixPrimitive":null,"props":{"placeholder":{"type":"string","description":"Placeholder text"},"disabled":{"type":"boolean","default":"false","description":"Disable interaction"},"rows":{"type":"number","description":"Number of visible rows"}},"subComponents":null,"example":"<Textarea placeholder=\"Write your message...\" rows={4} />"},{"name":"Breadcrumb","category":"navigation","description":"Hierarchical location indicator showing navigation path","keywords":["breadcrumb","navigation","path","hierarchy","location"],"useCases":["Page hierarchy","Multi-level navigation","Location context","Back navigation"],"dependencies":[],"radixPrimitive":null,"props":null,"subComponents":["BreadcrumbList","BreadcrumbItem","BreadcrumbLink","BreadcrumbPage","BreadcrumbSeparator","BreadcrumbEllipsis"],"example":"<Breadcrumb>\n  <BreadcrumbList>\n    <BreadcrumbItem><BreadcrumbLink href=\"/\">Home</BreadcrumbLink></BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem><BreadcrumbLink href=\"/docs\">Docs</BreadcrumbLink></BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem><BreadcrumbPage>Current</BreadcrumbPage></BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>"},{"name":"Command","category":"navigation","description":"Command palette interface for searchable actions and navigation","keywords":["command","palette","search","shortcuts","keyboard","cmdk"],"useCases":["Quick navigation","Action search","Keyboard shortcuts","Power user features"],"dependencies":["cmdk"],"radixPrimitive":null,"props":null,"subComponents":["CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","CommandSeparator","CommandShortcut","CommandDialog"],"example":"<Command>\n  <CommandInput placeholder=\"Type a command...\" />\n  <CommandList>\n    <CommandEmpty>No results found.</CommandEmpty>\n    <CommandGroup heading=\"Actions\">\n      <CommandItem>Search</CommandItem>\n      <CommandItem>Settings</CommandItem>\n    </CommandGroup>\n  </CommandList>\n</Command>"},{"name":"Menubar","category":"navigation","description":"Desktop-style horizontal menu bar with dropdown menus","keywords":["menubar","menu","navigation","desktop","toolbar"],"useCases":["Application menus","Desktop-style navigation","Action menus","Editor toolbars"],"dependencies":["@radix-ui/react-menubar"],"radixPrimitive":"@radix-ui/react-menubar","props":null,"subComponents":["MenubarMenu","MenubarTrigger","MenubarContent","MenubarItem","MenubarSeparator","MenubarLabel","MenubarCheckboxItem","MenubarRadioGroup","MenubarRadioItem","MenubarSub","MenubarSubTrigger","MenubarSubContent","MenubarShortcut"],"example":"<Menubar>\n  <MenubarMenu>\n    <MenubarTrigger>File</MenubarTrigger>\n    <MenubarContent>\n      <MenubarItem>New <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>\n      <MenubarItem>Open <MenubarShortcut>⌘O</MenubarShortcut></MenubarItem>\n      <MenubarSeparator />\n      <MenubarItem>Exit</MenubarItem>\n    </MenubarContent>\n  </MenubarMenu>\n</Menubar>"},{"name":"NavigationMenu","category":"navigation","description":"Complex header navigation with nested dropdown menus","keywords":["navigation","menu","header","navbar","dropdown","mega-menu"],"useCases":["Site navigation","Header menus","Mega menus","Multi-level navigation"],"dependencies":["@radix-ui/react-navigation-menu"],"radixPrimitive":"@radix-ui/react-navigation-menu","props":null,"subComponents":["NavigationMenuList","NavigationMenuItem","NavigationMenuTrigger","NavigationMenuContent","NavigationMenuLink","NavigationMenuIndicator","NavigationMenuViewport"],"example":"<NavigationMenu>\n  <NavigationMenuList>\n    <NavigationMenuItem>\n      <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>\n      <NavigationMenuContent>\n        <NavigationMenuLink href=\"/docs\">Documentation</NavigationMenuLink>\n      </NavigationMenuContent>\n    </NavigationMenuItem>\n  </NavigationMenuList>\n</NavigationMenu>"},{"name":"Pagination","category":"navigation","description":"Multi-page navigation control for paginated content","keywords":["pagination","pages","navigation","paging","next","previous"],"useCases":["Table pagination","Search results","Content lists","Multi-page forms"],"dependencies":[],"radixPrimitive":null,"props":null,"subComponents":["PaginationContent","PaginationItem","PaginationLink","PaginationPrevious","PaginationNext","PaginationEllipsis"],"example":"<Pagination>\n  <PaginationContent>\n    <PaginationItem><PaginationPrevious href=\"#\" /></PaginationItem>\n    <PaginationItem><PaginationLink href=\"#\">1</PaginationLink></PaginationItem>\n    <PaginationItem><PaginationLink href=\"#\" isActive>2</PaginationLink></PaginationItem>\n    <PaginationItem><PaginationLink href=\"#\">3</PaginationLink></PaginationItem>\n    <PaginationItem><PaginationNext href=\"#\" /></PaginationItem>\n  </PaginationContent>\n</Pagination>"},{"name":"Tabs","category":"navigation","description":"Tabbed interface for organizing content into switchable panels. Supports pill (default) and line variants; the line variant animates an underline between active tabs and flows to the full width of its container.","keywords":["tabs","tabbed","navigation","panels","switching","line","underline"],"useCases":["Settings panels","Content organization","Multi-view interfaces","Dashboard sections","Sidebar-constrained navigation (line variant)"],"dependencies":["@radix-ui/react-tabs","framer-motion"],"radixPrimitive":"@radix-ui/react-tabs","props":{"defaultValue":{"type":"string","description":"Default active tab value"},"value":{"type":"string","description":"Controlled active tab value"},"onValueChange":{"type":"(value: string) => void","description":"Callback on tab change"}},"subComponents":["TabsList","TabsTrigger","TabsContent"],"example":"<Tabs defaultValue=\"overview\" className=\"w-full\">\n  <TabsList variant=\"line\">\n    <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n    <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n    <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"overview\">Summary lives here.</TabsContent>\n  <TabsContent value=\"analytics\">Charts and trends.</TabsContent>\n  <TabsContent value=\"reports\">Scheduled reports.</TabsContent>\n</Tabs>"},{"name":"AlertDialog","category":"overlays","description":"Modal dialog for critical confirmations with cancel/confirm actions","keywords":["alert","dialog","modal","confirmation","warning","destructive"],"useCases":["Delete confirmations","Destructive actions","Critical warnings","Irreversible operations"],"dependencies":["@radix-ui/react-alert-dialog"],"radixPrimitive":"@radix-ui/react-alert-dialog","props":{"open":{"type":"boolean","description":"Controlled open state"},"onOpenChange":{"type":"(open: boolean) => void","description":"Callback on open/close"}},"subComponents":["AlertDialogTrigger","AlertDialogContent","AlertDialogHeader","AlertDialogTitle","AlertDialogDescription","AlertDialogFooter","AlertDialogAction","AlertDialogCancel"],"example":"<AlertDialog>\n  <AlertDialogTrigger asChild><Button variant=\"destructive\">Delete</Button></AlertDialogTrigger>\n  <AlertDialogContent>\n    <AlertDialogHeader>\n      <AlertDialogTitle>Are you sure?</AlertDialogTitle>\n      <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>\n    </AlertDialogHeader>\n    <AlertDialogFooter>\n      <AlertDialogCancel>Cancel</AlertDialogCancel>\n      <AlertDialogAction>Delete</AlertDialogAction>\n    </AlertDialogFooter>\n  </AlertDialogContent>\n</AlertDialog>"},{"name":"ContextMenu","category":"overlays","description":"Right-click context menu for contextual actions","keywords":["context-menu","right-click","menu","actions","contextual"],"useCases":["Right-click actions","Contextual operations","File operations","Item actions"],"dependencies":["@radix-ui/react-context-menu"],"radixPrimitive":"@radix-ui/react-context-menu","props":null,"subComponents":["ContextMenuTrigger","ContextMenuContent","ContextMenuItem","ContextMenuCheckboxItem","ContextMenuRadioItem","ContextMenuLabel","ContextMenuSeparator","ContextMenuShortcut","ContextMenuSub","ContextMenuSubTrigger","ContextMenuSubContent","ContextMenuRadioGroup"],"example":"<ContextMenu>\n  <ContextMenuTrigger>Right click here</ContextMenuTrigger>\n  <ContextMenuContent>\n    <ContextMenuItem>Edit</ContextMenuItem>\n    <ContextMenuItem>Duplicate</ContextMenuItem>\n    <ContextMenuSeparator />\n    <ContextMenuItem>Delete</ContextMenuItem>\n  </ContextMenuContent>\n</ContextMenu>"},{"name":"Dialog","category":"overlays","description":"Modal dialog for focused interactions and forms","keywords":["dialog","modal","popup","overlay","form"],"useCases":["Form modals","Detail views","Focused tasks","User input"],"dependencies":["@radix-ui/react-dialog"],"radixPrimitive":"@radix-ui/react-dialog","props":{"open":{"type":"boolean","description":"Controlled open state"},"onOpenChange":{"type":"(open: boolean) => void","description":"Callback on open/close"}},"subComponents":["DialogTrigger","DialogContent","DialogHeader","DialogTitle","DialogDescription","DialogFooter","DialogClose"],"example":"<Dialog>\n  <DialogTrigger asChild><Button>Open</Button></DialogTrigger>\n  <DialogContent>\n    <DialogHeader>\n      <DialogTitle>Title</DialogTitle>\n      <DialogDescription>Description here.</DialogDescription>\n    </DialogHeader>\n    <DialogFooter>\n      <Button variant=\"outline\">Cancel</Button>\n      <Button>Confirm</Button>\n    </DialogFooter>\n  </DialogContent>\n</Dialog>"},{"name":"Drawer","category":"overlays","description":"Mobile-friendly bottom drawer that slides up from screen bottom","keywords":["drawer","bottom-sheet","mobile","slide-up","panel"],"useCases":["Mobile actions","Mobile forms","Bottom sheets","Mobile menus"],"dependencies":["vaul"],"radixPrimitive":null,"props":{"open":{"type":"boolean","description":"Controlled open state"},"onOpenChange":{"type":"(open: boolean) => void","description":"Callback on open/close"}},"subComponents":["DrawerTrigger","DrawerContent","DrawerHeader","DrawerTitle","DrawerDescription","DrawerFooter","DrawerClose"],"example":"<Drawer>\n  <DrawerTrigger asChild><Button>Open Drawer</Button></DrawerTrigger>\n  <DrawerContent>\n    <DrawerHeader>\n      <DrawerTitle>Settings</DrawerTitle>\n      <DrawerDescription>Adjust preferences.</DrawerDescription>\n    </DrawerHeader>\n    <div className=\"p-4\">Content here.</div>\n    <DrawerFooter>\n      <Button>Save</Button>\n      <DrawerClose asChild><Button variant=\"outline\">Cancel</Button></DrawerClose>\n    </DrawerFooter>\n  </DrawerContent>\n</Drawer>"},{"name":"DropdownMenu","category":"overlays","description":"Dropdown menu for actions and navigation options","keywords":["dropdown","menu","actions","options","popover"],"useCases":["Action menus","User menus","Item options","Overflow menus"],"dependencies":["@radix-ui/react-dropdown-menu"],"radixPrimitive":"@radix-ui/react-dropdown-menu","props":{"open":{"type":"boolean","description":"Controlled open state"},"onOpenChange":{"type":"(open: boolean) => void","description":"Callback on open/close"}},"subComponents":["DropdownMenuTrigger","DropdownMenuContent","DropdownMenuItem","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuCheckboxItem","DropdownMenuRadioGroup","DropdownMenuRadioItem","DropdownMenuSub","DropdownMenuSubTrigger","DropdownMenuSubContent"],"example":"<DropdownMenu>\n  <DropdownMenuTrigger asChild><Button variant=\"ghost\">Options</Button></DropdownMenuTrigger>\n  <DropdownMenuContent>\n    <DropdownMenuLabel>Actions</DropdownMenuLabel>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem>Edit</DropdownMenuItem>\n    <DropdownMenuItem>Delete</DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>"},{"name":"HoverCard","category":"overlays","description":"Rich preview card that appears on hover","keywords":["hover-card","preview","popover","tooltip","hover"],"useCases":["User previews","Link previews","Rich tooltips","Additional context"],"dependencies":["@radix-ui/react-hover-card"],"radixPrimitive":"@radix-ui/react-hover-card","props":{"openDelay":{"type":"number","default":"700","description":"Delay in ms before opening"},"closeDelay":{"type":"number","default":"300","description":"Delay in ms before closing"}},"subComponents":["HoverCardTrigger","HoverCardContent"],"example":"<HoverCard>\n  <HoverCardTrigger asChild><Link href=\"#\">@username</Link></HoverCardTrigger>\n  <HoverCardContent className=\"w-80\">\n    <div className=\"flex gap-4\">\n      <Avatar />\n      <div><p className=\"text-sm font-semibold\">Username</p><p className=\"text-sm text-muted-foreground\">Bio here.</p></div>\n    </div>\n  </HoverCardContent>\n</HoverCard>"},{"name":"Popover","category":"overlays","description":"Floating content panel anchored to a trigger element","keywords":["popover","floating","tooltip","overlay","panel"],"useCases":["Additional info","Form helpers","Contextual content","Inline editors"],"dependencies":["@radix-ui/react-popover"],"radixPrimitive":"@radix-ui/react-popover","props":{"open":{"type":"boolean","description":"Controlled open state"},"onOpenChange":{"type":"(open: boolean) => void","description":"Callback on open/close"}},"subComponents":["PopoverTrigger","PopoverContent","PopoverAnchor"],"example":"<Popover>\n  <PopoverTrigger asChild><Button variant=\"outline\">Open</Button></PopoverTrigger>\n  <PopoverContent className=\"w-80\">Content here.</PopoverContent>\n</Popover>"},{"name":"Sheet","category":"overlays","description":"Slide-in panel from screen edges for supplementary content","keywords":["sheet","sidebar","slide-in","panel","drawer"],"useCases":["Mobile navigation","Sidebar panels","Settings panels","Detail views"],"dependencies":["@radix-ui/react-dialog"],"radixPrimitive":"@radix-ui/react-dialog","props":{"open":{"type":"boolean","description":"Controlled open state"},"onOpenChange":{"type":"(open: boolean) => void","description":"Callback on open/close"}},"subComponents":["SheetTrigger","SheetContent","SheetHeader","SheetTitle","SheetDescription","SheetClose"],"example":"<Sheet>\n  <SheetTrigger asChild><Button>Open</Button></SheetTrigger>\n  <SheetContent side=\"right\">\n    <SheetHeader><SheetTitle>Settings</SheetTitle></SheetHeader>\n    <div className=\"p-4\">Content here.</div>\n  </SheetContent>\n</Sheet>"},{"name":"Tooltip","category":"overlays","description":"Contextual hints and additional information on hover","keywords":["tooltip","hint","help","hover","info"],"useCases":["Icon explanations","Additional context","Help text","Keyboard shortcuts"],"dependencies":["@radix-ui/react-tooltip"],"radixPrimitive":"@radix-ui/react-tooltip","props":null,"subComponents":["TooltipTrigger","TooltipContent","TooltipProvider"],"example":"<Tooltip>\n  <TooltipTrigger asChild><Button variant=\"ghost\" size=\"icon\"><Info /></Button></TooltipTrigger>\n  <TooltipContent><p>Helpful information</p></TooltipContent>\n</Tooltip>"},{"name":"Alert","category":"feedback","description":"Prominent message component for important information","keywords":["alert","message","notification","warning","info","error","success"],"useCases":["Status messages","Warnings","Errors","Success confirmations"],"dependencies":[],"radixPrimitive":null,"props":{"variant":{"type":"'default' | 'destructive'","default":"'default'","description":"Visual variant"}},"subComponents":["AlertTitle","AlertDescription"],"example":"<Alert variant=\"destructive\">\n  <AlertTitle>Error</AlertTitle>\n  <AlertDescription>Your session has expired.</AlertDescription>\n</Alert>"},{"name":"Progress","category":"feedback","description":"Visual indicator for progress and completion status","keywords":["progress","loading","bar","percentage","completion"],"useCases":["Upload progress","Task completion","Loading states","Multi-step forms"],"dependencies":["@radix-ui/react-progress"],"radixPrimitive":"@radix-ui/react-progress","props":{"value":{"type":"number","default":"0","description":"Progress value (0-100)"},"max":{"type":"number","default":"100","description":"Maximum value"}},"subComponents":null,"example":"<Progress value={60} />"},{"name":"Skeleton","category":"feedback","description":"Loading placeholder that mimics content structure","keywords":["skeleton","loading","placeholder","shimmer","spinner"],"useCases":["Content loading","Data fetching","Initial load","Lazy loading"],"dependencies":[],"radixPrimitive":null,"props":{"variant":{"type":"'default' | 'circular' | 'rectangular' | 'text'","default":"'default'","description":"Shape variant"},"width":{"type":"string","default":"'100%'","description":"Width (CSS value)"},"height":{"type":"string","default":"'20px'","description":"Height (CSS value)"}},"subComponents":null,"example":"<div className=\"space-y-2\">\n  <Skeleton className=\"h-12 w-12 rounded-full\" />\n  <Skeleton className=\"h-4 w-[250px]\" />\n  <Skeleton className=\"h-4 w-[200px]\" />\n</div>"},{"name":"Sonner","category":"feedback","description":"Toast notification system with queuing and positioning. Use Toaster component in layout, call toast() to trigger.","keywords":["toast","notification","sonner","message","alert"],"useCases":["Success messages","Error notifications","Action feedback","System messages"],"dependencies":["sonner"],"radixPrimitive":null,"props":null,"subComponents":["Toaster"],"example":"// In layout: <Toaster />\n// To trigger:\nimport { toast } from 'sonner'\ntoast.success('Saved successfully')\ntoast.error('Something went wrong')\ntoast('Default notification')"},{"name":"Toast","category":"feedback","description":"Temporary notification messages that appear briefly","keywords":["toast","notification","message","snackbar","alert"],"useCases":["Quick feedback","Status updates","Non-critical notifications","Confirmation messages"],"dependencies":["@radix-ui/react-toast"],"radixPrimitive":"@radix-ui/react-toast","props":null,"subComponents":["ToastAction","ToastClose","ToastDescription","ToastProvider","ToastTitle","ToastViewport"],"example":"// Prefer using Sonner (Toaster + toast()) for new projects.\n// This is the Radix-based alternative.\nimport { useToast } from '@opencosmos/ui'\nconst { toast } = useToast()\ntoast({ title: 'Success', description: 'Item saved.' })"},{"name":"Avatar","category":"data-display","description":"User profile image with fallback initials","keywords":["avatar","profile","image","user","picture"],"useCases":["User profiles","Comment authors","Team members","Chat participants"],"dependencies":["@radix-ui/react-avatar"],"radixPrimitive":"@radix-ui/react-avatar","props":null,"subComponents":["AvatarImage","AvatarFallback"],"example":"<Avatar>\n  <AvatarImage src=\"/avatar.jpg\" alt=\"User\" />\n  <AvatarFallback>JD</AvatarFallback>\n</Avatar>"},{"name":"Badge","category":"data-display","description":"Status indicators and labels for categorization","keywords":["badge","tag","label","status","chip","pill"],"useCases":["Status indicators","Tags","Categories","Notification counts"],"dependencies":[],"radixPrimitive":null,"props":{"variant":{"type":"'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'error' | 'info'","default":"'default'","description":"Visual variant"},"size":{"type":"'sm' | 'md' | 'lg'","default":"'md'","description":"Size variant"},"dot":{"type":"boolean","default":"false","description":"Show animated indicator dot"}},"subComponents":null,"example":"<Badge variant=\"success\" dot>Active</Badge>"},{"name":"Calendar","category":"data-display","description":"Date selection calendar with month/year navigation","keywords":["calendar","date","picker","month","day"],"useCases":["Date selection","Event scheduling","Booking systems","Date ranges"],"dependencies":["react-day-picker","date-fns"],"radixPrimitive":null,"props":{"mode":{"type":"'single' | 'multiple' | 'range'","default":"'single'","description":"Selection mode"},"selected":{"type":"Date | Date[] | DateRange","description":"Selected date(s)"},"onSelect":{"type":"(date) => void","description":"Callback on date selection"},"showOutsideDays":{"type":"boolean","default":"true","description":"Show days from adjacent months"},"disabled":{"type":"Matcher | Matcher[]","description":"Dates to disable"}},"subComponents":null,"example":"<Calendar mode=\"single\" selected={date} onSelect={setDate} />"},{"name":"Card","category":"data-display","description":"Container for grouping related content with optional header and footer","keywords":["card","container","box","panel","content"],"useCases":["Content grouping","Product cards","Information panels","Dashboard widgets"],"dependencies":[],"radixPrimitive":null,"props":{"variant":{"type":"'default' | 'glass' | 'outline'","default":"'default'","description":"Visual variant"},"hoverEffect":{"type":"boolean","default":"false","description":"Enable hover lift and shadow"}},"subComponents":["CardHeader","CardTitle","CardDescription","CardContent","CardFooter"],"example":"<Card>\n  <CardHeader>\n    <CardTitle>Notifications</CardTitle>\n    <CardDescription>You have 3 unread messages.</CardDescription>\n  </CardHeader>\n  <CardContent><p>Content here.</p></CardContent>\n  <CardFooter><Button>View All</Button></CardFooter>\n</Card>"},{"name":"DataTable","category":"data-display","description":"Enhanced table with sorting, filtering, and pagination","keywords":["table","data","grid","sorting","filtering","pagination","tanstack"],"useCases":["Data grids","Admin tables","Reports","List management"],"dependencies":["@tanstack/react-table"],"radixPrimitive":null,"props":{"columns":{"type":"ColumnDef<TData, TValue>[]","description":"Column definitions from @tanstack/react-table","required":true},"data":{"type":"TData[]","description":"Array of row data","required":true}},"subComponents":null,"example":"import { DataTable } from '@opencosmos/ui/tables'\nconst columns = [\n  { accessorKey: 'name', header: 'Name' },\n  { accessorKey: 'email', header: 'Email' },\n]\n<DataTable columns={columns} data={users} />"},{"name":"Table","category":"data-display","description":"Basic table component for tabular data display","keywords":["table","data","rows","columns","grid"],"useCases":["Simple tables","Data display","Comparison tables","Pricing tables"],"dependencies":[],"radixPrimitive":null,"props":null,"subComponents":["TableHeader","TableBody","TableFooter","TableRow","TableHead","TableCell","TableCaption"],"example":"<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Name</TableHead>\n      <TableHead>Status</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>John</TableCell>\n      <TableCell>Active</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>"},{"name":"Heading","category":"data-display","description":"Semantic heading with automatic token-based styling and responsive sizes","keywords":["heading","title","h1","h2","h3","h4","h5","h6","typography"],"useCases":["Page titles","Section headings","Content hierarchy","Semantic HTML structure"],"dependencies":[],"radixPrimitive":null,"props":{"level":{"type":"1 | 2 | 3 | 4 | 5 | 6","default":"2","description":"Heading level (renders h1-h6)"},"as":{"type":"'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'","description":"Override rendered HTML element"}},"subComponents":null,"example":"<Heading level={1}>Page Title</Heading>\n<Heading level={2}>Section Title</Heading>"},{"name":"Text","category":"data-display","description":"Semantic text component with variants for primary, secondary, and muted styles","keywords":["text","paragraph","body","typography","content","p","span"],"useCases":["Body text","Descriptions","Helper text","Labels and captions"],"dependencies":[],"radixPrimitive":null,"props":{"variant":{"type":"'default' | 'secondary' | 'muted' | 'lead'","default":"'default'","description":"Text style variant"},"as":{"type":"'p' | 'span' | 'div'","default":"'p'","description":"HTML element to render"},"size":{"type":"'sm' | 'base' | 'lg'","default":"'base'","description":"Font size"}},"subComponents":null,"example":"<Text variant=\"lead\">Important introductory text.</Text>\n<Text variant=\"muted\" size=\"sm\">Helper text below an input.</Text>"},{"name":"Code","category":"data-display","description":"Code display with syntax highlighting for inline and block code","keywords":["code","syntax","highlighting","programming","snippet","pre"],"useCases":["Code snippets","API documentation","Technical content","Inline code references"],"dependencies":[],"radixPrimitive":null,"props":{"inline":{"type":"boolean","default":"false","description":"Render as inline code (true) or block (false)"},"showCopy":{"type":"boolean","default":"true","description":"Show copy button for block code"}},"subComponents":null,"example":"// Inline\n<Code inline>npm install @opencosmos/ui</Code>\n\n// Block\n<Code>{`const x = 1;\nconst y = 2;`}</Code>"},{"name":"CollapsibleCodeBlock","category":"data-display","description":"Expandable code block with syntax highlighting, preview mode, and copy functionality","keywords":["code","collapsible","expandable","syntax","copy","preview"],"useCases":["Long code examples","Documentation code blocks","Tutorial code snippets","API examples"],"dependencies":["@opencosmos/tokens"],"radixPrimitive":null,"props":{"code":{"type":"string","description":"Source code string","required":true},"language":{"type":"'tsx' | 'typescript' | 'javascript' | 'jsx' | 'css' | 'html' | 'json' | 'bash'","default":"'tsx'","description":"Language for syntax highlighting"},"title":{"type":"string","description":"Optional title above the code block"},"maxLines":{"type":"number","default":"10","description":"Lines to show before collapsing"},"defaultExpanded":{"type":"boolean","default":"false","description":"Start in expanded state"}},"subComponents":null,"example":"<CollapsibleCodeBlock\n  code=\"const Button = () => <button>Click</button>\"\n  language=\"tsx\"\n  title=\"Button.tsx\"\n  maxLines={5}\n/>"},{"name":"DescriptionList","category":"data-display","description":"Key-value pair list for displaying labeled data in row or column layout","keywords":["description","list","key-value","definition","dl","dt","dd"],"useCases":["Product specifications","User profile details","Metadata display","Settings summaries"],"dependencies":[],"radixPrimitive":null,"props":{"items":{"type":"{ label: string; value: ReactNode }[]","description":"Array of label-value pairs","required":true},"layout":{"type":"'row' | 'column'","default":"'row'","description":"Layout direction for label/value pairs"}},"subComponents":null,"example":"<DescriptionList items={[\n  { label: 'Name', value: 'John Doe' },\n  { label: 'Email', value: 'john@example.com' },\n  { label: 'Role', value: <Badge>Admin</Badge> },\n]} />"},{"name":"Accordion","category":"layout","description":"Collapsible content sections with expand/collapse functionality","keywords":["accordion","collapsible","expandable","faq","sections"],"useCases":["FAQ sections","Content organization","Settings panels","Information disclosure"],"dependencies":["@radix-ui/react-accordion"],"radixPrimitive":"@radix-ui/react-accordion","props":{"type":{"type":"'single' | 'multiple'","description":"Allow single or multiple open items","required":true},"collapsible":{"type":"boolean","default":"false","description":"Allow closing all items (type=\"single\" only)"}},"subComponents":["AccordionItem","AccordionTrigger","AccordionContent"],"example":"<Accordion type=\"single\" collapsible>\n  <AccordionItem value=\"item-1\">\n    <AccordionTrigger>Is it accessible?</AccordionTrigger>\n    <AccordionContent>Yes. It follows WAI-ARIA patterns.</AccordionContent>\n  </AccordionItem>\n</Accordion>"},{"name":"AspectRatio","category":"layout","description":"Container that maintains specific width-to-height ratio","keywords":["aspect-ratio","ratio","responsive","media","image"],"useCases":["Responsive images","Video embeds","Media containers","Card images"],"dependencies":["@radix-ui/react-aspect-ratio"],"radixPrimitive":"@radix-ui/react-aspect-ratio","props":{"ratio":{"type":"number","default":"1","description":"Aspect ratio as a number (e.g. 16/9)"}},"subComponents":null,"example":"<AspectRatio ratio={16 / 9}>\n  <img src=\"/image.jpg\" alt=\"Photo\" className=\"rounded-md object-cover w-full h-full\" />\n</AspectRatio>"},{"name":"Carousel","category":"layout","description":"Scrollable content slider with navigation controls","keywords":["carousel","slider","slideshow","gallery","swipe"],"useCases":["Image galleries","Product showcases","Content sliders","Testimonials"],"dependencies":["embla-carousel-react"],"radixPrimitive":null,"props":{"orientation":{"type":"'horizontal' | 'vertical'","default":"'horizontal'","description":"Scroll direction"},"opts":{"type":"CarouselOptions","description":"Embla Carousel options (loop, align, etc.)"},"plugins":{"type":"CarouselPlugin","description":"Embla Carousel plugins (autoplay, etc.)"},"setApi":{"type":"(api: CarouselApi) => void","description":"Callback to get carousel API ref"}},"subComponents":["CarouselContent","CarouselItem","CarouselPrevious","CarouselNext"],"example":"<Carousel>\n  <CarouselContent>\n    <CarouselItem>Slide 1</CarouselItem>\n    <CarouselItem>Slide 2</CarouselItem>\n    <CarouselItem>Slide 3</CarouselItem>\n  </CarouselContent>\n  <CarouselPrevious />\n  <CarouselNext />\n</Carousel>"},{"name":"Collapsible","category":"layout","description":"Simple show/hide content container","keywords":["collapsible","expandable","toggle","show-hide","disclosure"],"useCases":["Sidebar sections","Content reveals","Advanced options","Details disclosure"],"dependencies":["@radix-ui/react-collapsible"],"radixPrimitive":"@radix-ui/react-collapsible","props":{"open":{"type":"boolean","description":"Controlled open state"},"onOpenChange":{"type":"(open: boolean) => void","description":"Callback on open/close"},"defaultOpen":{"type":"boolean","default":"false","description":"Default open state"}},"subComponents":["CollapsibleTrigger","CollapsibleContent"],"example":"<Collapsible>\n  <CollapsibleTrigger asChild><Button variant=\"ghost\">Toggle</Button></CollapsibleTrigger>\n  <CollapsibleContent>\n    <p>Hidden content revealed on click.</p>\n  </CollapsibleContent>\n</Collapsible>"},{"name":"DatePicker","category":"layout","description":"Calendar date picker combined with popover trigger","keywords":["date-picker","calendar","date","popover","input"],"useCases":["Date selection","Form dates","Scheduling","Filters"],"dependencies":["react-day-picker","date-fns","@radix-ui/react-popover"],"radixPrimitive":null,"props":{"date":{"type":"Date","description":"Selected date"},"onDateChange":{"type":"(date: Date | undefined) => void","description":"Callback on date change"},"placeholder":{"type":"string","default":"'Pick a date'","description":"Placeholder text"},"disabled":{"type":"boolean","default":"false","description":"Disable the date picker"}},"subComponents":null,"example":"<DatePicker date={date} onDateChange={setDate} placeholder=\"Select date\" />"},{"name":"GlassSurface","category":"layout","description":"Liquid glass surface with backdrop blur, five thickness tiers (ultrathin → ultrathick), 10-step tint scale, and automatic dark mode inversion. Inspired by macOS 26 glass materials.","keywords":["glass","frost","blur","backdrop","translucent","liquid","glassmorphism","surface","macos"],"useCases":["Frosted glass navigation bars","Floating toolbars and panels","Header/footer overlays on content","Card surfaces with depth"],"dependencies":[],"radixPrimitive":null,"props":{"active":{"type":"boolean","default":"true","description":"Whether the frosted glass effect is active (background + shadow)"},"position":{"type":"'top' | 'bottom'","default":"'top'","description":"Shadow direction: 'top' casts downward, 'bottom' casts upward"},"thickness":{"type":"'ultrathin' | 'thin' | 'medium' | 'thick' | 'ultrathick'","default":"'thin'","description":"Glass opacity tier (ultrathin 28% → thin 38% → medium 48% → thick 58% → ultrathick 68%)"},"tint":{"type":"0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9","default":"2","description":"Glass fill color for light mode: 0 = white, 9 = black"},"darkTint":{"type":"0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9","description":"Glass fill color for dark mode. Defaults to 9 - tint (auto-invert)"},"className":{"type":"string","description":"Additional CSS classes"},"style":{"type":"CSSProperties","description":"Inline style overrides"},"children":{"type":"ReactNode","description":"Content rendered inside the glass surface","required":true}},"subComponents":null,"example":"<GlassSurface thickness=\"medium\" tint={2}>\n  <nav className=\"p-4\">Navigation content</nav>\n</GlassSurface>"},{"name":"Resizable","category":"layout","description":"User-resizable panel containers with drag handles","keywords":["resizable","panels","split","drag","resize"],"useCases":["Split views","IDE panels","Dashboard layouts","Adjustable sidebars"],"dependencies":["react-resizable-panels"],"radixPrimitive":null,"props":{"direction":{"type":"'horizontal' | 'vertical'","default":"'horizontal'","description":"Panel layout direction"}},"subComponents":["ResizablePanelGroup","ResizablePanel","ResizableHandle"],"example":"<ResizablePanelGroup direction=\"horizontal\">\n  <ResizablePanel defaultSize={50}>Left panel</ResizablePanel>\n  <ResizableHandle />\n  <ResizablePanel defaultSize={50}>Right panel</ResizablePanel>\n</ResizablePanelGroup>"},{"name":"ScrollArea","category":"layout","description":"Custom scrollbar styling for overflow content","keywords":["scroll","scrollbar","overflow","custom-scroll"],"useCases":["Content overflow","Scrollable lists","Chat windows","Code displays"],"dependencies":["@radix-ui/react-scroll-area"],"radixPrimitive":"@radix-ui/react-scroll-area","props":null,"subComponents":["ScrollBar"],"example":"<ScrollArea className=\"h-[200px] w-full rounded-md border p-4\">\n  <div>Long scrollable content here...</div>\n</ScrollArea>"},{"name":"Separator","category":"layout","description":"Visual divider for separating content sections","keywords":["separator","divider","line","hr","border"],"useCases":["Content separation","Menu dividers","Section breaks","Visual hierarchy"],"dependencies":["@radix-ui/react-separator"],"radixPrimitive":"@radix-ui/react-separator","props":{"orientation":{"type":"'horizontal' | 'vertical'","default":"'horizontal'","description":"Orientation"}},"subComponents":null,"example":"<Separator orientation=\"horizontal\" />"},{"name":"Grid","category":"layout","description":"Responsive CSS grid with column and gap configuration","keywords":["grid","layout","columns","responsive","css-grid"],"useCases":["Card grids","Gallery layouts","Dashboard layouts","Responsive content grids"],"dependencies":[],"radixPrimitive":null,"props":{"columns":{"type":"number | { sm?: number; md?: number; lg?: number }","default":"3","description":"Number of grid columns (responsive object supported)"},"gap":{"type":"number | string","default":"4","description":"Gap between grid items (Tailwind spacing scale)"}},"subComponents":null,"example":"<Grid columns={{ sm: 1, md: 2, lg: 3 }} gap={4}>\n  <Card>Item 1</Card>\n  <Card>Item 2</Card>\n  <Card>Item 3</Card>\n</Grid>"},{"name":"Container","category":"layout","description":"Content wrapper with consistent max-width and padding variants","keywords":["container","wrapper","max-width","centered","layout"],"useCases":["Page content wrapper","Centered layouts","Responsive widths","Content alignment"],"dependencies":[],"radixPrimitive":null,"props":{"size":{"type":"'sm' | 'md' | 'lg' | 'xl' | 'full'","default":"'lg'","description":"Max-width variant"},"padding":{"type":"boolean","default":"true","description":"Apply horizontal padding"}},"subComponents":null,"example":"<Container size=\"lg\">\n  <Heading level={1}>Page Title</Heading>\n  <Text>Content within max-width container.</Text>\n</Container>"},{"name":"Stack","category":"layout","description":"Flexbox layout for vertical or horizontal stacking with gap control","keywords":["stack","flex","vertical","horizontal","spacing","layout"],"useCases":["Vertical layouts","Horizontal layouts","Form layouts","Button groups"],"dependencies":[],"radixPrimitive":null,"props":{"direction":{"type":"'vertical' | 'horizontal'","default":"'vertical'","description":"Stack direction"},"gap":{"type":"number | string","default":"4","description":"Gap between items (Tailwind spacing scale)"},"align":{"type":"'start' | 'center' | 'end' | 'stretch'","default":"'stretch'","description":"Cross-axis alignment"},"justify":{"type":"'start' | 'center' | 'end' | 'between'","description":"Main-axis alignment"}},"subComponents":null,"example":"<Stack direction=\"horizontal\" gap={2} align=\"center\">\n  <Button>Save</Button>\n  <Button variant=\"outline\">Cancel</Button>\n</Stack>"},{"name":"Sidebar","category":"layout","description":"Navigation sidebar with header, content, footer sections and mobile overlay","keywords":["sidebar","navigation","panel","drawer","menu"],"useCases":["App navigation","Dashboard sidebars","Settings panels","Mobile menus"],"dependencies":["@radix-ui/react-slot"],"radixPrimitive":"@radix-ui/react-slot","props":{"isOpen":{"type":"boolean","default":"true","description":"Whether sidebar is visible/expanded"}},"subComponents":["SidebarHeader","SidebarContent","SidebarFooter","SidebarItem"],"example":"<Sidebar>\n  <SidebarHeader><h2>My App</h2></SidebarHeader>\n  <SidebarContent>\n    <SidebarItem icon={<Home />} isActive>Dashboard</SidebarItem>\n    <SidebarItem icon={<Settings />}>Settings</SidebarItem>\n  </SidebarContent>\n  <SidebarFooter>\n    <SidebarItem icon={<LogOut />}>Logout</SidebarItem>\n  </SidebarFooter>\n</Sidebar>"},{"name":"Header","category":"layout","description":"Page header with sticky positioning, glass morphism, and mobile menu","keywords":["header","navbar","navigation","sticky","mobile-menu"],"useCases":["Site headers","App navigation bars","Sticky headers","Mobile-friendly navigation"],"dependencies":["lucide-react"],"radixPrimitive":null,"props":{"logo":{"type":"ReactNode","description":"Logo element for header"},"links":{"type":"{ label: string; href: string }[]","description":"Navigation links"},"sticky":{"type":"boolean","default":"true","description":"Stick to top on scroll"},"transparent":{"type":"boolean","default":"false","description":"Transparent background (for hero sections)"}},"subComponents":null,"example":"<Header\n  logo={<Brand />}\n  links={[\n    { label: 'Home', href: '/' },\n    { label: 'About', href: '/about' },\n  ]}\n/>"},{"name":"Footer","category":"layout","description":"Page footer with multi-column layout, social links, and copyright","keywords":["footer","navigation","links","copyright","social"],"useCases":["Site footers","Navigation sections","Contact information","Copyright notices"],"dependencies":[],"radixPrimitive":null,"props":{"columns":{"type":"{ title: string; links: { label: string; href: string }[] }[]","description":"Footer navigation columns"},"copyright":{"type":"string","description":"Copyright text"},"socialLinks":{"type":"{ icon: ReactNode; href: string }[]","description":"Social media links"}},"subComponents":null,"example":"<Footer\n  columns={[{ title: 'Product', links: [{ label: 'Docs', href: '/docs' }] }]}\n  copyright=\"© 2026 My Company\"\n/>"},{"name":"CustomizerPanel","category":"layout","description":"Floating panel for theme, mode, and motion customization. Reads from ThemeProvider context.","keywords":["customizer","theme","settings","preferences","dark-mode"],"useCases":["Theme selection","Dark mode toggle","Motion preferences","User experience customization"],"dependencies":["lucide-react","@opencosmos/tokens"],"radixPrimitive":null,"props":null,"subComponents":null,"example":"// Place in your layout. It reads theme state from ThemeProvider.\n<CustomizerPanel />"},{"name":"PageLayout","category":"layout","description":"Flexible page layout with header, nav stacks, breadcrumbs, and footer","keywords":["layout","page","template","structure","swiss-grid"],"useCases":["Page structure","Content layouts","Documentation pages","Dashboard layouts"],"dependencies":[],"radixPrimitive":null,"props":{"header":{"type":"ReactNode","description":"Header element"},"footer":{"type":"ReactNode","description":"Footer element"},"sidebar":{"type":"ReactNode","description":"Optional sidebar"},"breadcrumbs":{"type":"ReactNode","description":"Breadcrumb navigation"}},"subComponents":null,"example":"<PageLayout\n  header={<Header />}\n  footer={<Footer />}\n>\n  <main>Page content</main>\n</PageLayout>"},{"name":"PageTemplate","category":"layout","description":"Opinionated page template with Swiss Grid design and customizer","keywords":["template","page","swiss-grid","layout","documentation"],"useCases":["Blog pages","Documentation pages","Standard app pages","Content-focused layouts"],"dependencies":[],"radixPrimitive":null,"props":{"title":{"type":"string","description":"Page title"},"description":{"type":"string","description":"Page description"},"showCustomizer":{"type":"boolean","default":"true","description":"Show customizer panel"}},"subComponents":null,"example":"<PageTemplate title=\"Documentation\" description=\"Learn the design system.\">\n  <div>Content here.</div>\n</PageTemplate>"},{"name":"Link","category":"actions","description":"Styled anchor element with theme-aware colors and hover states","keywords":["link","anchor","href","navigation","a","url"],"useCases":["Text links","Navigation links","External references","Inline actions"],"dependencies":[],"radixPrimitive":null,"props":{"href":{"type":"string","description":"Link URL","required":true},"variant":{"type":"'default' | 'inline'","default":"'default'","description":"Default for standalone links, inline for text links"},"hoverEffect":{"type":"boolean","default":"true","description":"Enable hover effect"}},"subComponents":null,"example":"<Link href=\"/about\" variant=\"inline\">Learn More</Link>"},{"name":"Magnetic","category":"actions","description":"Magnetic hover effect that attracts elements toward cursor","keywords":["magnetic","hover","effect","cursor","animation","interactive"],"useCases":["Interactive buttons","Hover effects","Playful interactions","Cursor attraction"],"dependencies":["framer-motion"],"radixPrimitive":null,"props":{"children":{"type":"ReactNode","description":"Element to apply magnetic effect to","required":true},"strength":{"type":"number","default":"0.5","description":"Magnetic pull strength (0-1)"}},"subComponents":null,"example":"<Magnetic strength={0.5}>\n  <Button>Hover me</Button>\n</Magnetic>"},{"name":"SearchBar","category":"forms","description":"Search input with icon, clear button, and keyboard shortcuts","keywords":["search","input","find","query","filter","bar"],"useCases":["Site search","Content filtering","Command palette trigger","Data filtering"],"dependencies":["lucide-react"],"radixPrimitive":null,"props":{"value":{"type":"string","description":"Controlled search value"},"onChange":{"type":"(value: string) => void","description":"Callback on value change"},"placeholder":{"type":"string","default":"'Search...'","description":"Placeholder text"},"onClear":{"type":"() => void","description":"Callback on clear button click"}},"subComponents":null,"example":"<SearchBar value={query} onChange={setQuery} placeholder=\"Search components...\" />"},{"name":"FilterButton","category":"forms","description":"Button for filtering content with active/inactive states","keywords":["filter","button","toggle","category","selection"],"useCases":["Category filters","Tag selection","Content filtering","Quick filters"],"dependencies":[],"radixPrimitive":null,"props":{"active":{"type":"boolean","default":"false","description":"Whether filter is active"},"onClick":{"type":"() => void","description":"Click handler"},"children":{"type":"ReactNode","description":"Filter label","required":true}},"subComponents":null,"example":"<FilterButton active={category === 'all'} onClick={() => setCategory('all')}>All</FilterButton>"},{"name":"ThemeSwitcher","category":"forms","description":"Multi-theme selector for switching between Studio, Terra, and Volt. Reads/writes to ThemeProvider context.","keywords":["theme","switcher","selector","studio","terra","volt"],"useCases":["Theme selection","Brand customization","User preferences","Design switching"],"dependencies":[],"radixPrimitive":null,"props":null,"subComponents":null,"example":"// Reads from ThemeProvider context, no props needed.\n<ThemeSwitcher />"},{"name":"ThemeToggle","category":"forms","description":"Light/dark mode toggle with smooth transitions. Reads/writes to ThemeProvider context.","keywords":["theme","toggle","dark-mode","light-mode","mode"],"useCases":["Dark mode switch","Light mode switch","Theme mode control","Accessibility preference"],"dependencies":["lucide-react"],"radixPrimitive":null,"props":null,"subComponents":null,"example":"// Reads from ThemeProvider context, no props needed.\n<ThemeToggle />"},{"name":"ColorPicker","category":"forms","description":"Color selection input with preset swatches and custom color support","keywords":["color","picker","palette","swatch","hex","customization"],"useCases":["Brand color selection","Theme customization","Design tools","User preferences"],"dependencies":[],"radixPrimitive":null,"props":{"value":{"type":"string","description":"Selected color (hex string)"},"onChange":{"type":"(color: string) => void","description":"Callback on color change"},"presets":{"type":"string[]","description":"Preset color swatches (hex values)"}},"subComponents":null,"example":"<ColorPicker value={color} onChange={setColor} presets={['#ef4444', '#3b82f6', '#22c55e']} />"},{"name":"DragDrop","category":"forms","description":"Drag and drop file upload zone with preview support","keywords":["drag","drop","upload","file","dropzone","input"],"useCases":["File uploads","Image uploads","Document uploads","Bulk imports"],"dependencies":[],"radixPrimitive":null,"props":{"onDrop":{"type":"(files: File[]) => void","description":"Callback when files are dropped","required":true},"accept":{"type":"string","description":"Accepted file types (e.g. \"image/*\")"},"maxSize":{"type":"number","description":"Max file size in bytes"},"multiple":{"type":"boolean","default":"true","description":"Allow multiple files"}},"subComponents":null,"example":"<DragDrop onDrop={(files) => handleUpload(files)} accept=\"image/*\" maxSize={5242880} />"},{"name":"TextField","category":"forms","description":"Complete text input with label, helper text, and error states","keywords":["text","field","input","label","form","validation"],"useCases":["Form fields","Labeled inputs","Validated inputs","Complete form controls"],"dependencies":[],"radixPrimitive":null,"props":{"label":{"type":"string","description":"Field label text"},"helperText":{"type":"string","description":"Helper text below input"},"error":{"type":"string","description":"Error message (shows error state when set)"},"required":{"type":"boolean","default":"false","description":"Mark as required"}},"subComponents":null,"example":"<TextField label=\"Email\" helperText=\"We'll never share your email.\" error={errors.email} required />"},{"name":"NavLink","category":"navigation","description":"Navigation link with active state indicators and variants","keywords":["nav","link","navigation","active","menu","item"],"useCases":["Navigation menus","Sidebar links","Header navigation","Active page indicators"],"dependencies":[],"radixPrimitive":null,"props":{"href":{"type":"string","description":"Link URL","required":true},"isActive":{"type":"boolean","default":"false","description":"Active state indicator"},"variant":{"type":"'default' | 'subtle'","default":"'default'","description":"Visual variant"}},"subComponents":null,"example":"<NavLink href=\"/dashboard\" isActive>Dashboard</NavLink>"},{"name":"SecondaryNav","category":"navigation","description":"Horizontal secondary navigation bar for section switching","keywords":["secondary","navigation","tabs","sections","subnav"],"useCases":["Section navigation","Page subsections","Tab-like navigation","Category switching"],"dependencies":[],"radixPrimitive":null,"props":{"items":{"type":"{ label: string; href: string; isActive?: boolean }[]","description":"Navigation items","required":true}},"subComponents":null,"example":"<SecondaryNav items={[\n  { label: 'Overview', href: '/overview', isActive: true },\n  { label: 'Settings', href: '/settings' },\n]} />"},{"name":"TertiaryNav","category":"navigation","description":"Third-level navigation for deep content hierarchies","keywords":["tertiary","navigation","deep","hierarchy","subnav"],"useCases":["Deep navigation","Documentation sections","Multi-level content","Nested categories"],"dependencies":[],"radixPrimitive":null,"props":{"items":{"type":"{ label: string; href: string; isActive?: boolean }[]","description":"Navigation items","required":true}},"subComponents":null,"example":"<TertiaryNav items={[\n  { label: 'Props', href: '#props', isActive: true },\n  { label: 'Examples', href: '#examples' },\n]} />"},{"name":"Breadcrumbs","category":"navigation","description":"Breadcrumb navigation with home icon and variants","keywords":["breadcrumbs","navigation","path","trail","hierarchy"],"useCases":["Page location","Navigation trail","Hierarchical navigation","Back navigation"],"dependencies":["lucide-react"],"radixPrimitive":null,"props":{"items":{"type":"{ label: string; href?: string }[]","description":"Breadcrumb trail items (last item is current page)","required":true},"showHome":{"type":"boolean","default":"true","description":"Show home icon as first item"}},"subComponents":null,"example":"<Breadcrumbs items={[\n  { label: 'Home', href: '/' },\n  { label: 'Components', href: '/components' },\n  { label: 'Button' },\n]} />"},{"name":"Modal","category":"overlays","description":"Simple modal wrapper around Dialog with common patterns","keywords":["modal","dialog","popup","overlay","window"],"useCases":["Simple modals","Confirmation dialogs","Form modals","Content overlays"],"dependencies":["@radix-ui/react-dialog"],"radixPrimitive":"@radix-ui/react-dialog","props":{"open":{"type":"boolean","description":"Controlled open state"},"onOpenChange":{"type":"(open: boolean) => void","description":"Callback on open/close"},"title":{"type":"string","description":"Modal title"},"description":{"type":"string","description":"Modal description"}},"subComponents":null,"example":"<Modal open={isOpen} onOpenChange={setIsOpen} title=\"Confirm\" description=\"Are you sure?\">\n  <div className=\"flex gap-2 justify-end\">\n    <Button variant=\"outline\" onClick={() => setIsOpen(false)}>Cancel</Button>\n    <Button onClick={handleConfirm}>Confirm</Button>\n  </div>\n</Modal>"},{"name":"Dropdown","category":"overlays","description":"Simple dropdown wrapper for common dropdown patterns","keywords":["dropdown","menu","select","options","popover"],"useCases":["Action menus","User menus","Quick selections","Option lists"],"dependencies":["@radix-ui/react-dropdown-menu"],"radixPrimitive":"@radix-ui/react-dropdown-menu","props":{"open":{"type":"boolean","description":"Controlled open state"},"onOpenChange":{"type":"(open: boolean) => void","description":"Callback on open/close"}},"subComponents":null,"example":"// For most cases, use DropdownMenu directly. This is a simplified wrapper."},{"name":"Spinner","category":"feedback","description":"Animated loading spinner with size variants","keywords":["spinner","loading","loader","progress","waiting"],"useCases":["Loading states","Button loading","Data fetching","Async operations"],"dependencies":[],"radixPrimitive":null,"props":{"size":{"type":"'xs' | 'sm' | 'md' | 'lg' | 'xl'","default":"'md'","description":"Spinner size"},"variant":{"type":"'primary' | 'secondary' | 'inherit'","default":"'primary'","description":"Color variant"}},"subComponents":null,"example":"<Spinner size=\"md\" />\n<Button disabled><Spinner size=\"xs\" variant=\"inherit\" /> Loading...</Button>"},{"name":"ThinkingIndicator","category":"feedback","description":"Write-on / bloom text animation for AI thinking states and hero surfaces. Cycles a phrase pool with per-character stagger, a leading orbiting brand mark (xs InfinityAnim), and a trailing ellipsis.","keywords":["thinking","loading","ai","cosmo","chat","write-on","bloom","infinity","hero","landing"],"useCases":["AI / LLM thinking state in chat dialogs","Hero copy that writes itself in on landing pages","Loading states that need warmth and personality","Cycling through status messages during long-running operations"],"dependencies":["framer-motion"],"radixPrimitive":null,"props":{"pool":{"type":"'landing' | 'chat'","default":"'chat'","description":"Which built-in phrase pool to cycle through"},"phrases":{"type":"readonly string[]","description":"Custom rotating phrase array — overrides `pool`"},"introPhrases":{"type":"readonly string[]","description":"Phrases that play once in order before the rotating pool starts. `pool=\"landing\"` defaults to LANDING_INTRO."},"cycleMs":{"type":"number","default":"2800","description":"Milliseconds each phrase remains before transitioning"},"shuffle":{"type":"boolean","default":"false","description":"Shuffle the rotating pool on mount (intro is never shuffled)"},"mark":{"type":"boolean","default":"true","description":"Show the leading brand mark (xs InfinityAnim)"},"showEllipsis":{"type":"boolean","default":"true","description":"Append a trailing ellipsis (auto-suppressed when phrase ends with terminal punctuation)"},"size":{"type":"'sm' | 'md' | 'lg'","default":"'md'","description":"Visual size"},"label":{"type":"string","default":"'Thinking'","description":"Accessible label for screen readers"}},"subComponents":null,"example":"<ThinkingIndicator pool=\"chat\" />\n<ThinkingIndicator pool=\"landing\" shuffle />\n<ThinkingIndicator phrases={['Searching', 'Ranking', 'Almost there']} />"},{"name":"ProgressBar","category":"feedback","description":"Horizontal progress bar with percentage display","keywords":["progress","bar","loading","percentage","completion"],"useCases":["File uploads","Task progress","Loading indicators","Step completion"],"dependencies":[],"radixPrimitive":null,"props":{"value":{"type":"number","default":"0","description":"Progress value (0-100)"},"variant":{"type":"'primary' | 'success' | 'warning' | 'error' | 'info'","default":"'primary'","description":"Color variant"},"size":{"type":"'sm' | 'md' | 'lg'","default":"'md'","description":"Bar height"},"showLabel":{"type":"boolean","default":"false","description":"Show percentage label"}},"subComponents":null,"example":"<ProgressBar value={75} variant=\"success\" showLabel />"},{"name":"Brand","category":"data-display","description":"Theme-aware brand/logo component with size variants and link support","keywords":["brand","logo","identity","header","company"],"useCases":["Site logos","Header branding","Footer branding","App identity"],"dependencies":[],"radixPrimitive":null,"props":{"variant":{"type":"'default' | 'mark'","default":"'default'","description":"Full logo or mark only"},"size":{"type":"'sm' | 'md' | 'lg'","default":"'md'","description":"Logo size"},"href":{"type":"string","description":"Optional link URL (wraps in anchor)"}},"subComponents":null,"example":"<Brand size=\"md\" href=\"/\" />"},{"name":"AspectImage","category":"data-display","description":"Image with configurable aspect ratio, rounded corners, and captions","keywords":["image","aspect","ratio","figure","caption","media"],"useCases":["Gallery images","Article images","Product images","Thumbnails with captions"],"dependencies":[],"radixPrimitive":null,"props":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for accessibility","required":true},"ratio":{"type":"number","default":"16/9","description":"Aspect ratio"},"rounded":{"type":"'none' | 'sm' | 'md' | 'lg' | 'full'","default":"'md'","description":"Border radius"},"caption":{"type":"string","description":"Optional caption text below image"}},"subComponents":null,"example":"<AspectImage src=\"/photo.jpg\" alt=\"Team photo\" ratio={4/3} caption=\"Our team\" />"},{"name":"VariableWeightText","category":"data-display","description":"Animated text with breathing font-weight effect using variable fonts","keywords":["variable","font","weight","animation","breathing","motion"],"useCases":["Hero text","Emphasis text","Attention grabbing","Variable font showcase"],"dependencies":["framer-motion"],"radixPrimitive":null,"props":{"children":{"type":"string","description":"Text content","required":true},"speed":{"type":"number","default":"2","description":"Animation speed in seconds"},"minWeight":{"type":"number","default":"100","description":"Minimum font weight"},"maxWeight":{"type":"number","default":"900","description":"Maximum font weight"}},"subComponents":null,"example":"<VariableWeightText speed={2} minWeight={200} maxWeight={800}>Design</VariableWeightText>"},{"name":"Typewriter","category":"data-display","description":"Typewriter text animation with cursor and loop support","keywords":["typewriter","typing","animation","cursor","text","effect"],"useCases":["Hero taglines","Terminal effects","Dynamic headings","Attention text"],"dependencies":["framer-motion"],"radixPrimitive":null,"props":{"words":{"type":"string[]","description":"Words to cycle through","required":true},"speed":{"type":"number","default":"100","description":"Typing speed in ms per character"},"loop":{"type":"boolean","default":"true","description":"Loop through words continuously"},"cursor":{"type":"boolean","default":"true","description":"Show blinking cursor"}},"subComponents":null,"example":"<Typewriter words={['Developer', 'Designer', 'Creator']} speed={80} />"},{"name":"GitHubIcon","category":"data-display","description":"GitHub logo icon that inherits text color for theme support","keywords":["github","icon","social","logo","svg"],"useCases":["Social links","Footer icons","Repository links","Open source badges"],"dependencies":[],"radixPrimitive":null,"props":{"size":{"type":"number","default":"24","description":"Icon size in pixels"}},"subComponents":null,"example":"<a href=\"https://github.com/you\"><GitHubIcon size={20} /></a>"},{"name":"InfinityAnim","category":"backgrounds","description":"OpenCosmos brand mark — two streams sweeping a lemniscate (∞) path. Five pre-tuned size variants from inline glyph (xs, 16px) to hero moment (xl, 256px); two render techniques (stripes for rich detail at large sizes, dashes for elegance at every size). Exported as `InfinityAnim` to avoid shadowing the JS global `Infinity`.","keywords":["infinity","lemniscate","brand","mark","logo","cosmos","opencosmos","comet","thinking","loading","hero","animation"],"useCases":["Landing-page hero animation","AI thinking-state glyph (paired with ThinkingIndicator)","Loading state with brand presence","Section accent / decorative element","Brand presence across product surfaces at any scale"],"dependencies":[],"radixPrimitive":null,"props":{"size":{"type":"'xs' | 'sm' | 'md' | 'lg' | 'xl'","default":"'md'","description":"Pre-tuned size variant — each tier optimises stripe count, bloom, and halo for legibility and weight at that scale"},"technique":{"type":"'stripes' | 'dashes'","default":"'stripes'","description":"Render technique. dashes is more elegant at xs / sm; stripes has richer detail at md+"},"palette":{"type":"'pink-blue' | 'pink-pink' | 'blue-blue' | 'pink-white' | 'blue-white' | 'white-white'","default":"'pink-blue'","description":"Color combination for the dashes technique. Two stream colors at once."},"runWhile":{"type":"boolean","description":"Smart pause/resume for dashes. When false, the orbit eases to a stop (~600ms); when true, eases back up to full speed. When undefined, runs continuously."},"duration":{"type":"number","default":"3","description":"Animation duration in seconds"},"paused":{"type":"boolean","default":"false","description":"Pause the orbit and render a static still"},"label":{"type":"string","description":"Optional accessible label. Omit for decorative use."}},"subComponents":null,"example":"<InfinityAnim size=\"xl\" technique=\"dashes\" palette=\"white-white\" />\n<InfinityAnim size=\"xs\" runWhile={isTyping} /> {/* sympathetic motion with text */}\n<InfinityAnim size=\"lg\" paused />"},{"name":"WarpBackground","category":"backgrounds","description":"Animated warp speed star field background effect","keywords":["warp","stars","background","animation","space","effect"],"useCases":["Hero backgrounds","Landing pages","Loading screens","Sci-fi themes"],"dependencies":["framer-motion"],"radixPrimitive":null,"props":{"speed":{"type":"number","default":"1","description":"Warp speed multiplier"},"density":{"type":"number","default":"200","description":"Number of stars"},"color":{"type":"string","default":"'white'","description":"Star color"}},"subComponents":null,"example":"<WarpBackground speed={1.5} density={300}>\n  <div className=\"relative z-10\">Content over stars</div>\n</WarpBackground>"},{"name":"FaultyTerminal","category":"backgrounds","description":"Glitchy terminal background with flickering and scan lines","keywords":["terminal","glitch","background","retro","crt","effect"],"useCases":["Retro themes","Hacker aesthetics","Error pages","Terminal UIs"],"dependencies":[],"radixPrimitive":null,"props":{"children":{"type":"ReactNode","description":"Content to render inside terminal"}},"subComponents":null,"example":"<FaultyTerminal>\n  <p>$ system initializing...</p>\n</FaultyTerminal>"},{"name":"OrbBackground","category":"backgrounds","description":"Animated floating orb with gradient blur effect","keywords":["orb","gradient","background","animation","blur","ambient"],"useCases":["Landing pages","Hero sections","Ambient backgrounds","Modern aesthetics"],"dependencies":["framer-motion"],"radixPrimitive":null,"props":{"color":{"type":"string","description":"Primary orb color"},"size":{"type":"number","default":"400","description":"Orb diameter in pixels"}},"subComponents":null,"example":"<OrbBackground color=\"var(--color-primary)\" size={500}>\n  <div className=\"relative z-10\">Content</div>\n</OrbBackground>"},{"name":"SplashCursor","category":"cursor","description":"Custom cursor with splash/ripple effect on click. WebGL-based fluid simulation.","keywords":["cursor","splash","ripple","click","effect","interactive"],"useCases":["Interactive experiences","Creative portfolios","Playful interfaces","Click feedback"],"dependencies":[],"radixPrimitive":null,"props":null,"subComponents":null,"example":"// Place once in layout. Replaces default cursor globally.\n<SplashCursor />"},{"name":"TargetCursor","category":"cursor","description":"Custom cursor with target/crosshair appearance","keywords":["cursor","target","crosshair","pointer","custom"],"useCases":["Gaming interfaces","Precision tools","Interactive elements","Custom pointers"],"dependencies":[],"radixPrimitive":null,"props":null,"subComponents":null,"example":"// Place once in layout. Replaces default cursor globally.\n<TargetCursor />"},{"name":"AnimatedBeam","category":"motion","description":"Animated beam/line connecting two elements","keywords":["beam","animation","connection","line","flow","motion"],"useCases":["Connecting elements","Data flow visualization","Architecture diagrams","Interactive connections"],"dependencies":["framer-motion"],"radixPrimitive":null,"props":{"fromRef":{"type":"RefObject<HTMLElement>","description":"Ref to source element","required":true},"toRef":{"type":"RefObject<HTMLElement>","description":"Ref to target element","required":true},"duration":{"type":"number","default":"3","description":"Animation duration in seconds"}},"subComponents":null,"example":"const fromRef = useRef(null)\nconst toRef = useRef(null)\n<div ref={fromRef}>Source</div>\n<div ref={toRef}>Target</div>\n<AnimatedBeam fromRef={fromRef} toRef={toRef} />"},{"name":"Hero","category":"blocks","description":"Full-width hero section with title, subtitle, and CTA","keywords":["hero","banner","header","landing","cta","section"],"useCases":["Landing pages","Page headers","Marketing sections","Feature highlights"],"dependencies":[],"radixPrimitive":null,"props":{"title":{"type":"string","description":"Main heading text","required":true},"subtitle":{"type":"string","description":"Subtitle or tagline"},"cta":{"type":"ReactNode","description":"Call-to-action element (Button, etc.)"},"background":{"type":"ReactNode","description":"Optional background element (WarpBackground, OrbBackground, etc.)"}},"subComponents":null,"example":"<Hero\n  title=\"Build Something Beautiful\"\n  subtitle=\"A design system that brings joy.\"\n  cta={<Button size=\"lg\">Get Started</Button>}\n/>"},{"name":"OpenGraphCard","category":"blocks","description":"Social media preview card for Open Graph metadata. Use in opengraph-image.tsx.","keywords":["open-graph","social","preview","card","meta","share"],"useCases":["Social sharing previews","Link previews","Meta card generation","Marketing previews"],"dependencies":[],"radixPrimitive":null,"props":{"title":{"type":"string","default":"'OpenCosmos UI'","description":"Main title text"},"description":{"type":"string","description":"Subtitle text"},"variant":{"type":"'primary' | 'secondary' | 'accent' | 'sage' | 'emerald' | 'gradient'","default":"'sage'","description":"Visual style variant"},"icon":{"type":"ReactNode","description":"Custom logo or icon element"},"gradient":{"type":"{ type: string; angle: number; colors: string[] }","description":"Custom gradient config (variant=\"gradient\")"},"primaryColor":{"type":"string","description":"Override primary color (hex)"},"secondaryColor":{"type":"string","description":"Override secondary color (hex)"},"accentColor":{"type":"string","description":"Override accent color (hex)"}},"subComponents":null,"example":"// In opengraph-image.tsx:\nexport default function OGImage() {\n  return <OpenGraphCard title=\"My Page\" description=\"A great description\" variant=\"primary\" />\n}"},{"name":"StatCard","category":"data-display","description":"Displays key metrics and statistics with label, value, trend indicator, and optional icon. Ideal for dashboards, analytics views, and KPI displays.","keywords":["stat","metric","kpi","dashboard","analytics","number","trend","card"],"useCases":["Dashboard metric displays","KPI tracking panels","Analytics summary cards","Revenue/user count displays"],"dependencies":["class-variance-authority"],"radixPrimitive":null,"props":{"label":{"type":"string","description":"The metric label (e.g. \"Revenue\")","required":true},"value":{"type":"string | number","description":"The metric value (e.g. \"$45,231\")","required":true},"change":{"type":"number","description":"Percentage change (e.g. 5.2 or -3.1)"},"trend":{"type":"'up' | 'down' | 'flat'","description":"Direction of the trend"},"icon":{"type":"ReactNode","description":"Optional icon displayed in the top-right"},"description":{"type":"string","description":"Additional description text below the value"},"variant":{"type":"'default' | 'outline' | 'glass'","default":"'default'","description":"Visual style variant"},"size":{"type":"'sm' | 'default' | 'lg'","default":"'default'","description":"Size variant"}},"subComponents":["StatCardGroup"],"example":"<StatCard label=\"Total Revenue\" value=\"$45,231\" change={12.5} trend=\"up\" description=\"from last month\" />"},{"name":"EmptyState","category":"feedback","description":"Placeholder for empty content areas with icon, title, description, and call-to-action. Use when no data is available or a search returns no results.","keywords":["empty","placeholder","no-data","no-results","blank","zero-state"],"useCases":["Empty search results","Empty inbox/messages","No data available state","First-time user onboarding prompt"],"dependencies":["class-variance-authority"],"radixPrimitive":null,"props":{"icon":{"type":"ReactNode","description":"Icon displayed above the title"},"title":{"type":"string","description":"Primary message","required":true},"description":{"type":"string","description":"Secondary explanation text"},"action":{"type":"ReactNode","description":"Call-to-action element (e.g. Button)"},"size":{"type":"'sm' | 'default' | 'lg'","default":"'default'","description":"Size variant"}},"subComponents":null,"example":"<EmptyState\n  icon={<Inbox />}\n  title=\"No messages yet\"\n  description=\"When you receive messages, they will appear here.\"\n  action={<Button>Send a message</Button>}\n/>"},{"name":"Timeline","category":"data-display","description":"Chronological event display with connecting lines, icons, and status indicators.","keywords":["timeline","events","history","chronological","activity","log"],"useCases":["Activity feeds","Order tracking","Project milestones","Event history"],"dependencies":["class-variance-authority"],"radixPrimitive":null,"props":{"orientation":{"type":"'vertical' | 'horizontal'","default":"'vertical'","description":"Layout orientation"}},"subComponents":["TimelineItem"],"example":"<Timeline>\n  <TimelineItem title=\"Order placed\" timestamp=\"Jan 1\" status=\"completed\" />\n  <TimelineItem title=\"Shipped\" status=\"active\" />\n  <TimelineItem title=\"Delivered\" status=\"pending\" isLast />\n</Timeline>"},{"name":"Stepper","category":"feedback","description":"Multi-step progress indicator for wizards and multi-step forms.","keywords":["stepper","wizard","steps","progress","multi-step","workflow"],"useCases":["Multi-step forms","Checkout flows","Onboarding wizards","Setup processes"],"dependencies":["class-variance-authority"],"radixPrimitive":null,"props":{"currentStep":{"type":"number","description":"Zero-based index of the current step","required":true},"orientation":{"type":"'horizontal' | 'vertical'","default":"'horizontal'","description":"Layout orientation"},"size":{"type":"'sm' | 'default' | 'lg'","default":"'default'","description":"Size variant"},"clickable":{"type":"boolean","default":"false","description":"Allow clicking steps to navigate"}},"subComponents":["StepperStep"],"example":"<Stepper currentStep={1}>\n  <StepperStep label=\"Account\" />\n  <StepperStep label=\"Profile\" />\n  <StepperStep label=\"Complete\" />\n</Stepper>"},{"name":"FileUpload","category":"forms","description":"Drag-and-drop file upload zone with validation, file list, and remove functionality","keywords":["file","upload","drag","drop","dropzone","attachment","browse"],"useCases":["Document uploads","Image uploads","Form attachments","Bulk file import"],"dependencies":["react-dropzone","class-variance-authority"],"radixPrimitive":null,"props":{"accept":{"type":"Record<string, string[]>","description":"Accepted file types (MIME types)"},"maxSize":{"type":"number","description":"Max file size in bytes"},"maxFiles":{"type":"number","description":"Max number of files"},"multiple":{"type":"boolean","default":"false","description":"Allow multiple file selection"},"disabled":{"type":"boolean","default":"false","description":"Disabled state"},"onFilesSelected":{"type":"(files: File[]) => void","description":"Callback when valid files are selected"},"onFilesRejected":{"type":"(rejections: FileRejection[]) => void","description":"Callback when files are rejected"},"label":{"type":"string","description":"Label text"},"description":{"type":"string","description":"Description text shown in the drop zone"},"size":{"type":"'sm' | 'default' | 'lg'","default":"'default'","description":"Size variant"}},"subComponents":null,"example":"<FileUpload\n  label=\"Upload documents\"\n  accept={{ 'image/*': ['.png', '.jpg'] }}\n  maxSize={5 * 1024 * 1024}\n  onFilesSelected={(files) => handleUpload(files)}\n/>"},{"name":"TreeView","category":"data-display","description":"Hierarchical data display with expand/collapse, keyboard navigation, and selection","keywords":["tree","hierarchy","file browser","nested","expand","collapse","folder"],"useCases":["File browsers","Category hierarchies","Organizational charts","Navigation trees"],"dependencies":["class-variance-authority"],"radixPrimitive":null,"props":{"nodes":{"type":"TreeNode[]","description":"Array of tree nodes","required":true},"expanded":{"type":"string[]","description":"Controlled expanded node IDs"},"defaultExpanded":{"type":"string[]","description":"Initially expanded node IDs"},"onExpandChange":{"type":"(expanded: string[]) => void","description":"Callback on expand state change"},"selected":{"type":"string","description":"Currently selected node ID"},"onSelectChange":{"type":"(nodeId: string) => void","description":"Callback on selection change"}},"subComponents":null,"example":"<TreeView\n  nodes={[\n    { id: 'src', label: 'src', children: [\n      { id: 'index', label: 'index.ts' },\n    ]},\n  ]}\n  onSelectChange={(id) => console.log(id)}\n/>"},{"name":"NotificationCenter","category":"overlays","description":"Dropdown notification panel with grouped notifications, read/unread state, and actions","keywords":["notification","bell","alert","inbox","unread","badge","messages"],"useCases":["App notifications","Activity feeds","System alerts","Message center"],"dependencies":[],"radixPrimitive":null,"props":{"notifications":{"type":"NotificationItem[]","description":"Array of notification items","required":true},"onMarkRead":{"type":"(id: string) => void","description":"Callback when a notification is marked as read"},"onMarkAllRead":{"type":"() => void","description":"Callback to mark all notifications as read"},"onDismiss":{"type":"(id: string) => void","description":"Callback when a notification is dismissed"},"trigger":{"type":"ReactNode","description":"Custom trigger element"},"maxHeight":{"type":"number","default":"400","description":"Maximum height of the notification list"},"emptyMessage":{"type":"string","default":"'No notifications'","description":"Message shown when empty"}},"subComponents":null,"example":"<NotificationCenter\n  notifications={[\n    { id: '1', title: 'New message', timestamp: new Date(), read: false },\n  ]}\n  onMarkRead={(id) => markAsRead(id)}\n/>"}]}