npm - @hilum/ui - Versions diffs - 3.2.14 → 3.3.1 - Mend

@hilum/ui 3.2.14 → 3.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md +15 -11
package/dist/index.d.ts +2 -1
package/dist/index.js +38 -3
package/dist/index.js.map +1 -1
package/llms.txt +128 -1491
package/package.json +1 -1
package/src/components/chart.tsx +40 -3
package/src/components/sidebar.tsx +6 -1

package/llms.txt CHANGED Viewed

@@ -1,12 +1,25 @@
-# @hilum/ui — Design System
+# Hilum UI
-> Production-ready React design system with 74 components, OKLCH-based per-product theming, and CSS-variable-backed design tokens. Works in client-rendered and prerendered React apps, plus Electron. Tailwind v4 + Radix UI primitives.
+> Hilum UI is a React design system and component catalog published at https://ui.hilum.dev. The docs site ships prerendered HTML and machine-readable indexes for AI systems and developers.
+## Key Facts
+- Package name: `@hilum/ui`
+- Package version: 3.3.0
+- Component modules: 85
+- Atom components: 63
+- Molecule components: 22
+- Docs site: https://ui.hilum.dev
+- GitHub repository: https://github.com/hilum-labs/hilum-ui
+- Machine-readable docs index: https://ui.hilum.dev/catalog.json
+- Machine-readable marketing blocks registry: https://ui.hilum.dev/registry.json
+- Stack: React 19, Tailwind CSS v4, Radix UI primitives, TanStack Start, TanStack Router
 ## Installation
 ```bash
 pnpm add @hilum/ui
-# or: npm install @hilum/ui  |  yarn add @hilum/ui
+# or: npm install @hilum/ui
 ```
 Peer dependencies: `react@^19`, `react-dom@^19`, `tailwindcss@^4`
@@ -14,24 +27,18 @@ Peer dependencies: `react@^19`, `react-dom@^19`, `tailwindcss@^4`
 ## Setup
 ```css
-/* globals.css */
 @import "tailwindcss";
 @import "@hilum/ui/tokens.css";
 @import "@hilum/ui/fonts.css";
 ```
-The token import registers all design tokens as CSS custom properties and Tailwind v4 utilities (`bg-brand-primary`, `text-ground-900`, `shadow-natural`, etc.). The font import loads Hilum's self-hosted Inter and Gabarito font files.
----
 ## Theming
-Every product gets its own primary and secondary brand colors. Pass two hex values — `createTheme` generates a full 11-shade OKLCH palette and returns a CSS override string.
+Hilum UI supports per-product theming with generated OKLCH palettes.
 ```tsx
 import { ThemeProvider } from "@hilum/ui/create-theme"
-// Wrap your app root — re-applies automatically when props change
 export function App() {
   return (
     <ThemeProvider primary="#0066FF" secondary="#FF9900">
@@ -41,1484 +48,114 @@ export function App() {
 }
 ```
-### Theming API
-| Export | Description |
-|---|---|
-| `createTheme({ primary, secondary })` | Pure function. Returns `{ css, palette }`. Works in Node (build scripts) and browser. |
-| `applyTheme({ primary, secondary })` | Injects `<style>` into `document.head`. Returns cleanup fn. Browser/Electron only. |
-| `<ThemeProvider primary secondary>` | React component. Calls `applyTheme` in `useEffect`. |
-### ThemeConfig
-| Prop | Type | Description |
-|---|---|---|
-| `primary` | `string` | Hex color. Anchored at palette-500; 11 shades generated. |
-| `secondary` | `string` | Hex color. Same structure. |
-### ThemeResult
-| Field | Type | Description |
-|---|---|---|
-| `css` | `string` | Complete CSS override. Inject via `<style>` or write to a file. |
-| `palette.primary` | `Record<string,string>` | `{ "50": "#f2f7ff", …, "950": "#000723" }` |
-| `palette.secondary` | `Record<string,string>` | Same for secondary. |
-### CSS variables overridden
-- `--color-brand-primary` / `--color-brand-secondary` — affects all `bg-brand-*` utilities
-- `--primary`, `--primary-foreground`
-- `--accent`, `--accent-foreground`
-- `--ring`
-- `--warning`, `--warning-foreground`
-- `--color-primary-{50…950}` / `--color-secondary-{50…950}` — palette vars for product CSS
----
-## Design Tokens
-### Colors
-**Brand:**
-- `bg-brand-primary` → `#C100F1` (vivid purple) — primary buttons, CTAs, focus rings
-- `bg-brand-secondary` → `#FFF5BF` (pale lemon) — warning surfaces, secondary CTAs
-**Purple scale** (`bg-purple-{50..950}`): built from `#C100F1` anchor at 500
-**Butter scale** (`bg-butter-{50..950}`): built from `#FFF5BF` anchor at 200
-**Ground scale** (`bg-ground-{50..950}`): neutral spine for text, borders, structure
-**Semantic CSS vars** (use in custom CSS, never raw hex):
-- `--background`, `--foreground` — page bg/text
-- `--primary`, `--primary-foreground` — primary interactive color + its text
-- `--secondary`, `--secondary-foreground` — secondary surfaces
-- `--muted`, `--muted-foreground` — subdued surfaces and text
-- `--accent`, `--accent-foreground` — hover tints
-- `--border`, `--input` — borders and input backgrounds
-- `--ring` — focus ring
-- `--destructive`, `--destructive-foreground` — errors
-- `--warning`, `--warning-foreground` — warnings
-### Typography
-Use as Tailwind utilities (e.g. `className="display"`):
-| Class | Font | Size | Weight | Usage |
-|---|---|---|---|---|
-| `display-xl` | Gabarito | 3rem | 400 | Hero H1 |
-| `display` | Gabarito | 2.25rem | 400 | Page H1 |
-| `heading-xl` | Gabarito | 1.875rem | 400 | Section headings |
-| `heading` | Gabarito | 1.5rem | 400 | Card titles |
-| `subheading` | Gabarito | 1.25rem | 400 | Subheadings |
-| `body-lg` | Inter | 1rem | 400 | Large body text |
-| `body` | Inter | 0.875rem | 400 | Default body |
-| `caption` | Inter | 0.75rem | 400 | Metadata, helper text |
-| `caption-xs` | Inter | 0.625rem | 400 | Tiny metadata |
-**Eyebrow family** — uppercase, tracked label above headlines / in badges / on section markers. All five names share the same CSS (12px Inter 600, uppercase, 0.1em tracking). Pick the one that reads best in your context; `eyebrow` is canonical.
-| Class | Size | Notes |
-|---|---|---|
-| `eyebrow` | 0.75rem | Canonical name |
-| `eyebrow-sm` | 0.625rem | Compact variant for badges and tiny status pills |
-| `overline` | 0.75rem | Alias of eyebrow (Material parlance) |
-| `kicker` | 0.75rem | Alias of eyebrow (editorial parlance) |
-| `label` | 0.75rem | Alias of eyebrow (kept for backwards compat) |
-### Shadows
-- `shadow-natural` — cards, default elevation
-- `shadow-elevated` — modals, floating panels
----
-## Components
-All components are imported from `@hilum/ui`.
----
-### Button
-Triggers actions. Supports variants, sizes, icons, and disabled/loading states.
-```tsx
-import { Button } from "@hilum/ui"
-// Variants
-<Button>Default</Button>
-<Button variant="brand">Brand</Button>
-<Button variant="outline">Outline</Button>
-<Button variant="ghost">Ghost</Button>
-<Button variant="secondary">Secondary</Button>
-<Button variant="destructive">Destructive</Button>
-<Button variant="link">Link</Button>
-// Sizes
-<Button size="xs">Extra Small</Button>
-<Button size="sm">Small</Button>
-<Button size="lg">Large</Button>
-<Button size="icon"><Plus /></Button>
-// Pill shape
-<Button className="rounded-full">Get started</Button>
-// Loading
-<Button><Loader2 className="animate-spin" size={15} /> Saving...</Button>
-// As child (polymorphic)
-<Button asChild><a href="/path">Link button</a></Button>
-```
-Props: `variant`, `size`, `asChild`, `disabled`, plus all `<button>` props.
----
-### Badge
-Compact labels for status, categories, and metadata.
-```tsx
-import { Badge } from "@hilum/ui"
-<Badge>Default</Badge>
-<Badge variant="secondary">Secondary</Badge>
-<Badge variant="outline">Outline</Badge>
-<Badge variant="brand">Brand</Badge>
-<Badge variant="success">Success</Badge>
-<Badge variant="warning">Warning</Badge>
-<Badge variant="destructive">Error</Badge>
-```
-Props: `variant`.
----
-### Input
-Text input field. Styled with the ground palette and brand focus ring.
-```tsx
-import { Input } from "@hilum/ui"
-<Input placeholder="Email address" />
-<Input type="password" />
-<Input disabled value="Read-only" />
-```
-Accepts all `<input>` props.
----
-### Textarea
-Multi-line text input.
-```tsx
-import { Textarea } from "@hilum/ui"
-<Textarea placeholder="Describe your issue..." rows={4} />
-```
-Accepts all `<textarea>` props.
----
-### Label
-Accessible label for form fields. Pairs with any input via `htmlFor`.
-```tsx
-import { Label } from "@hilum/ui"
-<Label htmlFor="email">Email address</Label>
-<Input id="email" type="email" />
-```
----
-### Field
-Composed form field: label + input + helper/error text.
-```tsx
-import { Field } from "@hilum/ui"
-<Field label="Email" hint="We'll never share your email.">
-  <Input placeholder="you@example.com" />
-</Field>
-<Field label="Username" error="Username is already taken">
-  <Input value="john" />
-</Field>
-```
-Props: `label`, `hint`, `error`, `required`, `children`.
----
-### Select
-Dropdown selection backed by Radix UI.
-```tsx
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@hilum/ui"
-<Select>
-  <SelectTrigger>
-    <SelectValue placeholder="Pick a fruit" />
-  </SelectTrigger>
-  <SelectContent>
-    <SelectItem value="apple">Apple</SelectItem>
-    <SelectItem value="banana">Banana</SelectItem>
-    <SelectItem value="mango">Mango</SelectItem>
-  </SelectContent>
-</Select>
-```
----
-### Combobox
-Searchable select with filterable options.
-```tsx
-import { Combobox } from "@hilum/ui"
-<Combobox
-  options={[
-    { value: "react", label: "React" },
-    { value: "vue", label: "Vue" },
-    { value: "svelte", label: "Svelte" },
-  ]}
-  placeholder="Select framework..."
-  value={value}
-  onValueChange={setValue}
-/>
-```
-Props: `options`, `value`, `onValueChange`, `placeholder`, `disabled`.
----
-### Dialog
-Modal overlay with header, content, and footer.
-```tsx
-import {
-  Dialog, DialogTrigger, DialogContent,
-  DialogHeader, DialogTitle, DialogDescription, DialogFooter,
-} from "@hilum/ui"
-<Dialog>
-  <DialogTrigger asChild>
-    <Button>Open dialog</Button>
-  </DialogTrigger>
-  <DialogContent>
-    <DialogHeader>
-      <DialogTitle>Confirm deletion</DialogTitle>
-      <DialogDescription>This action cannot be undone.</DialogDescription>
-    </DialogHeader>
-    <DialogFooter>
-      <Button variant="outline">Cancel</Button>
-      <Button variant="destructive">Delete</Button>
-    </DialogFooter>
-  </DialogContent>
-</Dialog>
-```
----
-### Sheet
-Slide-in panel from any edge of the screen.
-```tsx
-import {
-  Sheet, SheetTrigger, SheetContent,
-  SheetHeader, SheetTitle, SheetDescription,
-} from "@hilum/ui"
-<Sheet>
-  <SheetTrigger asChild><Button>Open sheet</Button></SheetTrigger>
-  <SheetContent side="right">   {/* side: "top" | "right" | "bottom" | "left" */}
-    <SheetHeader>
-      <SheetTitle>Edit profile</SheetTitle>
-      <SheetDescription>Make changes to your profile here.</SheetDescription>
-    </SheetHeader>
-    {/* content */}
-  </SheetContent>
-</Sheet>
-```
----
-### Drawer
-Bottom drawer for mobile-friendly overlays.
-```tsx
-import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle } from "@hilum/ui"
-<Drawer>
-  <DrawerTrigger asChild><Button>Open drawer</Button></DrawerTrigger>
-  <DrawerContent>
-    <DrawerHeader>
-      <DrawerTitle>Filters</DrawerTitle>
-    </DrawerHeader>
-    {/* content */}
-  </DrawerContent>
-</Drawer>
-```
----
-### Popover
-Floating content anchored to a trigger element.
-```tsx
-import { Popover, PopoverTrigger, PopoverContent } from "@hilum/ui"
-<Popover>
-  <PopoverTrigger asChild><Button variant="outline">Open</Button></PopoverTrigger>
-  <PopoverContent>
-    <p className="body">Popover content here.</p>
-  </PopoverContent>
-</Popover>
-```
----
-### Tooltip
-Short contextual hint on hover/focus.
-```tsx
-import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@hilum/ui"
-<TooltipProvider>
-  <Tooltip>
-    <TooltipTrigger asChild><Button size="icon"><Settings /></Button></TooltipTrigger>
-    <TooltipContent>Settings</TooltipContent>
-  </Tooltip>
-</TooltipProvider>
-```
-Wrap app root with `<TooltipProvider>` once.
----
-### Dropdown Menu
-Context menu for actions attached to a trigger button.
-```tsx
-import {
-  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
-  DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel,
-} from "@hilum/ui"
-<DropdownMenu>
-  <DropdownMenuTrigger asChild><Button variant="outline">Actions</Button></DropdownMenuTrigger>
-  <DropdownMenuContent>
-    <DropdownMenuLabel>My account</DropdownMenuLabel>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem>Profile</DropdownMenuItem>
-    <DropdownMenuItem>Settings</DropdownMenuItem>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem className="text-destructive">Sign out</DropdownMenuItem>
-  </DropdownMenuContent>
-</DropdownMenu>
-```
----
-### Context Menu
-Right-click / long-press menu.
-```tsx
-import {
-  ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem,
-} from "@hilum/ui"
-<ContextMenu>
-  <ContextMenuTrigger>Right-click me</ContextMenuTrigger>
-  <ContextMenuContent>
-    <ContextMenuItem>Copy</ContextMenuItem>
-    <ContextMenuItem>Paste</ContextMenuItem>
-    <ContextMenuItem className="text-destructive">Delete</ContextMenuItem>
-  </ContextMenuContent>
-</ContextMenu>
-```
----
-### Card
-Versatile surface container.
-```tsx
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@hilum/ui"
-<Card>
-  <CardHeader>
-    <CardTitle className="subheading">Card title</CardTitle>
-    <CardDescription className="body">Supporting text.</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p className="body text-ground-500">Content goes here.</p>
-  </CardContent>
-  <CardFooter>
-    <Button>Action</Button>
-  </CardFooter>
-</Card>
-```
-Variants: `default` (white with natural shadow), `muted` (ground-50).
----
-### Tabs
-Horizontal tab navigation with content panels.
-```tsx
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@hilum/ui"
-<Tabs defaultValue="overview">
-  <TabsList>
-    <TabsTrigger value="overview">Overview</TabsTrigger>
-    <TabsTrigger value="settings">Settings</TabsTrigger>
-    <TabsTrigger value="billing">Billing</TabsTrigger>
-  </TabsList>
-  <TabsContent value="overview">Overview content</TabsContent>
-  <TabsContent value="settings">Settings content</TabsContent>
-  <TabsContent value="billing">Billing content</TabsContent>
-</Tabs>
-```
----
-### Accordion
-Collapsible content sections.
-```tsx
-import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@hilum/ui"
-<Accordion type="single" collapsible>
-  <AccordionItem value="item-1">
-    <AccordionTrigger>Is it accessible?</AccordionTrigger>
-    <AccordionContent>Yes. It adheres to WAI-ARIA.</AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="item-2">
-    <AccordionTrigger>Is it styled?</AccordionTrigger>
-    <AccordionContent>Yes. Comes with default styles.</AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-`type`: `"single"` | `"multiple"`. `collapsible`: allow closing when single.
----
-### Avatar
-User profile image with fallback initials.
-```tsx
-import { Avatar, AvatarImage, AvatarFallback } from "@hilum/ui"
-<Avatar>
-  <AvatarImage src="https://example.com/photo.jpg" alt="Jane Doe" />
-  <AvatarFallback>JD</AvatarFallback>
-</Avatar>
-// Sizes: xs, sm, default, lg, xl
-<Avatar size="sm"><AvatarFallback>AB</AvatarFallback></Avatar>
-```
----
-### Avatar Stack
-Overlapping row of avatars with overflow count.
-```tsx
-import { AvatarStack, Avatar, AvatarFallback } from "@hilum/ui"
-<AvatarStack>
-  <Avatar><AvatarFallback>AB</AvatarFallback></Avatar>
-  <Avatar><AvatarFallback>CD</AvatarFallback></Avatar>
-  <Avatar><AvatarFallback>EF</AvatarFallback></Avatar>
-</AvatarStack>
-```
----
-### Checkbox
-Binary selection with accessible label.
-```tsx
-import { Checkbox } from "@hilum/ui"
-<div className="flex items-center gap-2">
-  <Checkbox id="terms" checked={checked} onCheckedChange={setChecked} />
-  <Label htmlFor="terms">Accept terms and conditions</Label>
-</div>
-```
----
-### Switch
-Toggle between two states.
-```tsx
-import { Switch } from "@hilum/ui"
-<Switch checked={enabled} onCheckedChange={setEnabled} />
-```
----
-### Slider
-Range input for selecting a numeric value.
-```tsx
-import { Slider } from "@hilum/ui"
-<Slider
-  min={0}
-  max={100}
-  step={1}
-  value={[volume]}
-  onValueChange={([v]) => setVolume(v)}
-/>
-```
----
-### Radio Group
-Single-selection from a group of options.
-```tsx
-import { RadioGroup, RadioGroupItem } from "@hilum/ui"
-<RadioGroup value={plan} onValueChange={setPlan}>
-  <div className="flex items-center gap-2">
-    <RadioGroupItem value="starter" id="starter" />
-    <Label htmlFor="starter">Starter</Label>
-  </div>
-  <div className="flex items-center gap-2">
-    <RadioGroupItem value="pro" id="pro" />
-    <Label htmlFor="pro">Pro</Label>
-  </div>
-</RadioGroup>
-```
----
-### Progress
-Linear progress indicator.
-```tsx
-import { Progress } from "@hilum/ui"
-<Progress value={72} />   // 0–100
-```
----
-### Skeleton
-Loading placeholder that matches content layout.
-```tsx
-import { Skeleton } from "@hilum/ui"
-<Skeleton className="h-4 w-48 rounded" />
-<Skeleton className="h-32 w-full rounded-xl" />
-```
----
-### Spinner
-Animated loading indicator.
-```tsx
-import { Spinner } from "@hilum/ui"
-<Spinner />
-<Spinner size="sm" />
-<Spinner size="lg" />
-```
----
-### Separator
-Horizontal or vertical divider line.
-```tsx
-import { Separator } from "@hilum/ui"
-<Separator />
-<Separator orientation="vertical" className="h-8" />
-```
----
-### Breadcrumb
-Navigation hierarchy indicator.
-```tsx
-import {
-  Breadcrumb, BreadcrumbList, BreadcrumbItem,
-  BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator,
-} from "@hilum/ui"
-<Breadcrumb>
-  <BreadcrumbList>
-    <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
-    <BreadcrumbSeparator />
-    <BreadcrumbItem><BreadcrumbLink href="/docs">Docs</BreadcrumbLink></BreadcrumbItem>
-    <BreadcrumbSeparator />
-    <BreadcrumbItem><BreadcrumbPage>Button</BreadcrumbPage></BreadcrumbItem>
-  </BreadcrumbList>
-</Breadcrumb>
-```
----
-### Pagination
-Page navigation for data lists.
-```tsx
-import {
-  Pagination, PaginationContent, PaginationItem,
-  PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis,
-} from "@hilum/ui"
-<Pagination>
-  <PaginationContent>
-    <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
-    <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
-    <PaginationItem><PaginationEllipsis /></PaginationItem>
-    <PaginationItem><PaginationLink href="#" isActive>5</PaginationLink></PaginationItem>
-    <PaginationItem><PaginationNext href="#" /></PaginationItem>
-  </PaginationContent>
-</Pagination>
-```
----
-### Table
-Data table with header, body, and footer.
-```tsx
-import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption } from "@hilum/ui"
-<Table>
-  <TableHeader>
-    <TableRow>
-      <TableHead>Name</TableHead>
-      <TableHead>Status</TableHead>
-      <TableHead className="text-right">Amount</TableHead>
-    </TableRow>
-  </TableHeader>
-  <TableBody>
-    <TableRow>
-      <TableCell className="font-medium">Alice</TableCell>
-      <TableCell><Badge variant="success">Active</Badge></TableCell>
-      <TableCell className="text-right">$250</TableCell>
-    </TableRow>
-  </TableBody>
-</Table>
-```
----
-### Data Table
-Full-featured table with sorting, filtering, pagination via `@tanstack/react-table`.
-```tsx
-import { DataTable } from "@hilum/ui"
-import { ColumnDef } from "@tanstack/react-table"
-const columns: ColumnDef<User>[] = [
-  { accessorKey: "name", header: "Name" },
-  { accessorKey: "email", header: "Email" },
-  { accessorKey: "role", header: "Role" },
-]
-<DataTable columns={columns} data={users} />
-```
----
-### Calendar
-Date picker calendar grid.
-```tsx
-import { Calendar } from "@hilum/ui"
-<Calendar
-  mode="single"
-  selected={date}
-  onSelect={setDate}
-/>
-```
-Modes: `"single"` | `"multiple"` | `"range"`. Powered by `react-day-picker`.
----
-### Date Picker
-Calendar in a popover triggered by a button.
-```tsx
-import { DatePicker } from "@hilum/ui"
-<DatePicker value={date} onChange={setDate} placeholder="Pick a date" />
-```
----
-### Command
-Command palette / search interface.
-```tsx
-import {
-  Command, CommandInput, CommandList,
-  CommandEmpty, CommandGroup, CommandItem, CommandSeparator,
-} from "@hilum/ui"
-<Command>
-  <CommandInput placeholder="Search..." />
-  <CommandList>
-    <CommandEmpty>No results found.</CommandEmpty>
-    <CommandGroup heading="Actions">
-      <CommandItem>New file</CommandItem>
-      <CommandItem>New folder</CommandItem>
-    </CommandGroup>
-    <CommandSeparator />
-    <CommandGroup heading="Navigation">
-      <CommandItem>Dashboard</CommandItem>
-    </CommandGroup>
-  </CommandList>
-</Command>
-```
----
-### Navigation Menu
-Horizontal nav with mega-menu dropdowns.
-```tsx
-import {
-  NavigationMenu, NavigationMenuList, NavigationMenuItem,
-  NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink,
-} from "@hilum/ui"
-<NavigationMenu>
-  <NavigationMenuList>
-    <NavigationMenuItem>
-      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
-      <NavigationMenuContent>
-        {/* Grid of links */}
-      </NavigationMenuContent>
-    </NavigationMenuItem>
-    <NavigationMenuItem>
-      <NavigationMenuLink href="/pricing">Pricing</NavigationMenuLink>
-    </NavigationMenuItem>
-  </NavigationMenuList>
-</NavigationMenu>
-```
----
-### Menubar
-Application-style horizontal menu bar.
-```tsx
-import {
-  Menubar, MenubarMenu, MenubarTrigger, MenubarContent,
-  MenubarItem, MenubarSeparator, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem,
-} from "@hilum/ui"
-<Menubar>
-  <MenubarMenu>
-    <MenubarTrigger>File</MenubarTrigger>
-    <MenubarContent>
-      <MenubarItem>New File <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
-      <MenubarSeparator />
-      <MenubarItem>Save <MenubarShortcut>⌘S</MenubarShortcut></MenubarItem>
-    </MenubarContent>
-  </MenubarMenu>
-</Menubar>
-```
----
-### Sidebar
-Full application sidebar with navigation groups, collapsible sections, and sticky header/footer.
-```tsx
-import {
-  SidebarProvider, Sidebar, SidebarHeader, SidebarContent,
-  SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuItem,
-  SidebarMenuButton, SidebarFooter,
-} from "@hilum/ui"
-<SidebarProvider>
-  <Sidebar>
-    <SidebarHeader>Logo / brand</SidebarHeader>
-    <SidebarContent>
-      <SidebarGroup>
-        <SidebarGroupLabel>Navigation</SidebarGroupLabel>
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton asChild>
-              <a href="/dashboard">Dashboard</a>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarGroup>
-    </SidebarContent>
-    <SidebarFooter>Footer content</SidebarFooter>
-  </Sidebar>
-  <main>{/* page content */}</main>
-</SidebarProvider>
-```
----
-### Chart
-Recharts-based data visualizations (line, bar, area, pie, radar, radial).
-```tsx
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@hilum/ui"
-import { LineChart, Line, XAxis, YAxis, CartesianGrid } from "recharts"
-const config = {
-  revenue: { label: "Revenue", color: "var(--color-brand-primary)" },
-}
-<ChartContainer config={config} className="h-64">
-  <LineChart data={data}>
-    <CartesianGrid strokeDasharray="3 3" stroke="var(--color-ground-100)" />
-    <XAxis dataKey="month" />
-    <YAxis />
-    <ChartTooltip content={<ChartTooltipContent />} />
-    <Line type="monotone" dataKey="revenue" stroke="var(--chart-1)" />
-  </LineChart>
-</ChartContainer>
-```
----
-### Carousel
-Horizontal scrolling carousel.
-```tsx
-import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "@hilum/ui"
-<Carousel>
-  <CarouselContent>
-    <CarouselItem><Card>Slide 1</Card></CarouselItem>
-    <CarouselItem><Card>Slide 2</Card></CarouselItem>
-    <CarouselItem><Card>Slide 3</Card></CarouselItem>
-  </CarouselContent>
-  <CarouselPrevious />
-  <CarouselNext />
-</Carousel>
-```
----
-### Hover Card
-Rich preview card that appears on hover.
-```tsx
-import { HoverCard, HoverCardTrigger, HoverCardContent } from "@hilum/ui"
-<HoverCard>
-  <HoverCardTrigger asChild>
-    <a href="#">@hilum_labs</a>
-  </HoverCardTrigger>
-  <HoverCardContent>
-    <p className="body font-medium">Hilum Labs</p>
-    <p className="caption text-ground-400">Building the future of education.</p>
-  </HoverCardContent>
-</HoverCard>
-```
----
-### Collapsible
-Show/hide any content section.
-```tsx
-import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@hilum/ui"
-<Collapsible open={open} onOpenChange={setOpen}>
-  <CollapsibleTrigger asChild>
-    <Button variant="ghost">Advanced options <ChevronDown size={14} /></Button>
-  </CollapsibleTrigger>
-  <CollapsibleContent>
-    {/* hidden content */}
-  </CollapsibleContent>
-</Collapsible>
-```
----
-### Resizable
-Draggable panels for split layouts.
-```tsx
-import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@hilum/ui"
-<ResizablePanelGroup direction="horizontal" className="h-64 rounded-xl border">
-  <ResizablePanel defaultSize={30}>Left</ResizablePanel>
-  <ResizableHandle />
-  <ResizablePanel>Right</ResizablePanel>
-</ResizablePanelGroup>
-```
----
-### Scroll Area
-Custom scrollbar for overflow containers.
-```tsx
-import { ScrollArea } from "@hilum/ui"
-<ScrollArea className="h-48 w-full">
-  {/* long content */}
-</ScrollArea>
-```
----
-### Kbd
-Keyboard shortcut display.
-```tsx
-import { Kbd } from "@hilum/ui"
-<p className="body">Press <Kbd>⌘</Kbd> + <Kbd>K</Kbd> to open the command palette.</p>
-```
----
-### Alert
-Contextual feedback for user actions or system states.
-```tsx
-import { Alert, AlertTitle, AlertDescription } from "@hilum/ui"
-import { Terminal } from "lucide-react"
-<Alert>
-  <Terminal size={16} />
-  <AlertTitle>Heads up!</AlertTitle>
-  <AlertDescription>You can add components and dependencies to your app.</AlertDescription>
-</Alert>
-<Alert variant="destructive">
-  <AlertTitle>Error</AlertTitle>
-  <AlertDescription>Something went wrong. Please try again.</AlertDescription>
-</Alert>
-```
----
-### Alert Dialog
-Modal that requires user confirmation before a destructive action.
-```tsx
-import {
-  AlertDialog, AlertDialogTrigger, AlertDialogContent,
-  AlertDialogHeader, AlertDialogTitle, AlertDialogDescription,
-  AlertDialogFooter, AlertDialogCancel, AlertDialogAction,
-} from "@hilum/ui"
-<AlertDialog>
-  <AlertDialogTrigger asChild><Button variant="destructive">Delete</Button></AlertDialogTrigger>
-  <AlertDialogContent>
-    <AlertDialogHeader>
-      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-      <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
-    </AlertDialogHeader>
-    <AlertDialogFooter>
-      <AlertDialogCancel>Cancel</AlertDialogCancel>
-      <AlertDialogAction>Continue</AlertDialogAction>
-    </AlertDialogFooter>
-  </AlertDialogContent>
-</AlertDialog>
-```
----
-### Sonner (Toast)
-Non-blocking notification toasts. Requires `<Toaster />` in app root.
-```tsx
-// App.tsx
-import { Toaster } from "@hilum/ui"
-<Toaster />
-// Anywhere in the app
-import { toast } from "sonner"
-toast("Event has been created")
-toast.success("Profile saved successfully")
-toast.error("Something went wrong")
-toast.loading("Uploading...")
-toast.promise(uploadFn(), {
-  loading: "Uploading...",
-  success: "Done!",
-  error: "Upload failed",
-})
-```
----
-### Input OTP
-One-time password / PIN code input.
-```tsx
-import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "@hilum/ui"
-<InputOTP maxLength={6} value={otp} onChange={setOtp}>
-  <InputOTPGroup>
-    <InputOTPSlot index={0} />
-    <InputOTPSlot index={1} />
-    <InputOTPSlot index={2} />
-  </InputOTPGroup>
-  <InputOTPSeparator />
-  <InputOTPGroup>
-    <InputOTPSlot index={3} />
-    <InputOTPSlot index={4} />
-    <InputOTPSlot index={5} />
-  </InputOTPGroup>
-</InputOTP>
-```
----
-### Steps
-Step indicator for multi-step flows.
-```tsx
-import { Steps, Step } from "@hilum/ui"
-<Steps current={1}>
-  <Step label="Account" />
-  <Step label="Profile" />
-  <Step label="Review" />
-</Steps>
-```
-Props: `current` (0-indexed), `orientation` (`"horizontal"` | `"vertical"`).
----
-### Toggle / Toggle Group
-Single or grouped toggle buttons.
-```tsx
-import { Toggle } from "@hilum/ui"
-import { Bold, Italic, Underline } from "lucide-react"
-<Toggle pressed={bold} onPressedChange={setBold}><Bold size={14} /></Toggle>
-// Group
-import { ToggleGroup, ToggleGroupItem } from "@hilum/ui"
-<ToggleGroup type="multiple" value={formatting} onValueChange={setFormatting}>
-  <ToggleGroupItem value="bold"><Bold size={14} /></ToggleGroupItem>
-  <ToggleGroupItem value="italic"><Italic size={14} /></ToggleGroupItem>
-  <ToggleGroupItem value="underline"><Underline size={14} /></ToggleGroupItem>
-</ToggleGroup>
-```
----
-### Aspect Ratio
-Maintains a fixed aspect ratio for any child.
-```tsx
-import { AspectRatio } from "@hilum/ui"
-<AspectRatio ratio={16 / 9} className="bg-ground-100 rounded-xl overflow-hidden">
-  <img src="..." className="w-full h-full object-cover" />
-</AspectRatio>
-```
----
-### Button Group
-Groups buttons into a connected row with shared borders.
-```tsx
-import { ButtonGroup } from "@hilum/ui"
-<ButtonGroup>
-  <Button variant="outline">Bold</Button>
-  <Button variant="outline">Italic</Button>
-  <Button variant="outline">Underline</Button>
-</ButtonGroup>
-```
----
-### Native Select
-Native `<select>` styled to match the design system.
-```tsx
-import { NativeSelect } from "@hilum/ui"
-<NativeSelect value={country} onChange={e => setCountry(e.target.value)}>
-  <option value="">Select country</option>
-  <option value="us">United States</option>
-  <option value="uk">United Kingdom</option>
-</NativeSelect>
-```
----
-## Molecules
-Composed patterns built from atoms.
----
-### Field
-Labeled form field with hint and error support. (See Atoms → Field above.)
----
-### Input Group
-Input with leading/trailing addons (icons, buttons, text).
-```tsx
-import { InputGroup, InputGroupAddon } from "@hilum/ui"
-<InputGroup>
-  <InputGroupAddon><Mail size={14} className="text-ground-400" /></InputGroupAddon>
-  <Input placeholder="Email address" />
-</InputGroup>
-<InputGroup>
-  <Input placeholder="0.00" />
-  <InputGroupAddon>USD</InputGroupAddon>
-</InputGroup>
-```
----
-### Stat Card
-Metric display with label, value, trend, and optional icon.
-```tsx
-import { StatCard } from "@hilum/ui"
-import { TrendingUp } from "lucide-react"
-<StatCard
-  label="Total revenue"
-  value="$45,231"
-  change="+20.1%"
-  trend="up"
-  icon={TrendingUp}
-/>
-```
-Props: `label`, `value`, `change`, `trend` (`"up"` | `"down"` | `"neutral"`), `icon`.
----
-### Empty State
-Zero-state UI for empty lists or no-results states.
-```tsx
-import { EmptyState } from "@hilum/ui"
-import { FileX } from "lucide-react"
-<EmptyState
-  icon={FileX}
-  title="No documents found"
-  description="Try adjusting your filters or create a new document."
-  action={<Button>New document</Button>}
-/>
-```
----
-### Section Heading
-Labeled section divider with optional action.
-```tsx
-import { SectionHeading } from "@hilum/ui"
-<SectionHeading title="Recent activity" />
-<SectionHeading title="Team members" action={<Button size="sm">Invite</Button>} />
-```
----
-### Page Heading
-Full-width page header with title, description, breadcrumb, and actions.
-```tsx
-import { PageHeading } from "@hilum/ui"
-<PageHeading
-  title="Projects"
-  description="Manage your team's active projects."
-  action={<Button>New project</Button>}
-/>
-```
----
-### Card Heading
-Section header inside a card — title, description, and optional right-side action.
-```tsx
-import { CardHeading } from "@hilum/ui"
-<CardHeading
-  title="Team members"
-  description="Invite and manage access."
-  action={<Button size="sm" variant="outline">Invite</Button>}
-/>
-```
----
-### Activity Feed
-Vertical timeline of events.
-```tsx
-import { ActivityFeed, ActivityFeedItem } from "@hilum/ui"
-import { GitCommit } from "lucide-react"
-<ActivityFeed>
-  <ActivityFeedItem
-    icon={GitCommit}
-    title="Merged pull request #42"
-    description="main ← feat/theming"
-    timestamp="2 hours ago"
-  />
-</ActivityFeed>
-```
----
-### Stacked List
-Vertical list of items with dividers.
-```tsx
-import { StackedList, StackedListItem } from "@hilum/ui"
-<StackedList>
-  <StackedListItem
-    primary="Alice Johnson"
-    secondary="alice@example.com"
-    meta="Admin"
-    avatar={<Avatar size="sm"><AvatarFallback>AJ</AvatarFallback></Avatar>}
-  />
-</StackedList>
-```
----
-### Grid List
-Responsive card grid.
-```tsx
-import { GridList, GridListItem } from "@hilum/ui"
-<GridList>
-  {items.map(item => (
-    <GridListItem key={item.id} title={item.name} description={item.desc} />
-  ))}
-</GridList>
-```
----
-### Description List
-Key–value pairs, typically for detail/profile views.
-```tsx
-import { DescriptionList, DescriptionListItem } from "@hilum/ui"
-<DescriptionList>
-  <DescriptionListItem label="Full name" value="Alice Johnson" />
-  <DescriptionListItem label="Email" value="alice@example.com" />
-  <DescriptionListItem label="Role" value="Administrator" />
-</DescriptionList>
-```
----
-### Notification
-Single notification item with icon, title, message, and timestamp.
-```tsx
-import { Notification } from "@hilum/ui"
-<Notification
-  title="New message"
-  description="Alice sent you a message in #general"
-  timestamp="5 minutes ago"
-  unread
-/>
-```
----
-### Media Object
-Horizontal layout: media (image/icon/avatar) + content body.
-```tsx
-import { MediaObject } from "@hilum/ui"
-<MediaObject
-  media={<Avatar><AvatarFallback>AB</AvatarFallback></Avatar>}
-  title="Alice Brown"
-  description="Sent you a project update for Q3 2025."
-  meta="2h ago"
-/>
-```
----
-### Radio Card
-Selectable card with radio button — used for plan/option selection.
-```tsx
-import { RadioCard, RadioCardGroup } from "@hilum/ui"
-<RadioCardGroup value={plan} onValueChange={setPlan}>
-  <RadioCard value="starter" title="Starter" description="Up to 5 users" price="$9/mo" />
-  <RadioCard value="pro" title="Pro" description="Up to 50 users" price="$49/mo" />
-</RadioCardGroup>
-```
----
-### Action Panel
-Bordered panel with a title, description, and a call-to-action.
-```tsx
-import { ActionPanel } from "@hilum/ui"
-<ActionPanel
-  title="Danger zone"
-  description="Deleting your account is permanent and cannot be undone."
-  action={<Button variant="destructive">Delete account</Button>}
-/>
-```
----
-### Command Palette
-Full-screen search overlay, usually opened by ⌘K.
-```tsx
-import { CommandPalette } from "@hilum/ui"
-// Open state controlled externally
-<CommandPalette
-  open={open}
-  onOpenChange={setOpen}
-  items={[
-    { id: "dashboard", label: "Go to Dashboard", href: "/dashboard" },
-    { id: "settings", label: "Open Settings", href: "/settings" },
-  ]}
-/>
-```
----
-## Utilities
-```tsx
-import { cn } from "@hilum/ui"
-// Tailwind class merge utility (clsx + tailwind-merge)
-<div className={cn("p-4 rounded-xl", isActive && "bg-brand-primary text-white")} />
-```
----
-## Icons
-Curated subset from lucide-react, re-exported for convenience:
-```tsx
-import { PlusIcon, SearchIcon, SettingsIcon } from "@hilum/ui/icons"
-```
----
-## Design decisions
-- **Framework-agnostic React** — works in client-rendered apps, TanStack Start prerendered docs, and Electron
-- **Tailwind v4** — CSS-variable-backed utilities, runtime-overridable via `createTheme`
-- **Radix UI primitives** — all interactive components are WAI-ARIA compliant
-- **Lockstep versioning** — all packages release together
-- **OKLCH color space** — all generated palettes use perceptually uniform interpolation
+Primary exports:
+- `createTheme({ primary, secondary })` returns `{ css, palette }`
+- `applyTheme({ primary, secondary })` injects theme CSS in the browser
+- `<ThemeProvider primary secondary>` applies theme CSS from React
+## Documentation
+- Overview: https://ui.hilum.dev/
+- Foundations: https://ui.hilum.dev/foundations
+- Theming: https://ui.hilum.dev/theming
+- Atoms: https://ui.hilum.dev/atoms
+- Molecules: https://ui.hilum.dev/molecules
+- Blocks: https://ui.hilum.dev/blocks
+- Marketing: https://ui.hilum.dev/marketing
+- Ecommerce: https://ui.hilum.dev/ecommerce
+- Application UI: https://ui.hilum.dev/application-ui
+- Designer: https://ui.hilum.dev/designer
+## Component Index
+- Account Menu (/molecules/account-menu/) — Structured account dropdown with profile header, sections, action rows, and separators. Composes: Dropdown Menu · Avatar.
+- Accordion (/atoms/accordion/) — Vertically stacked sections that expand and collapse.
+- Action Panel (/molecules/action-panel/) — Bordered panel that communicates one focused action. Composes: Button · Card.
+- Activity Feed (/molecules/activity-feed/) — Vertical timeline of events with icons, rich content, and timestamps. Composes: Icon.
+- Alert Dialog (/atoms/alert-dialog/) — Confirmation modal that requires explicit action before proceeding.
+- Alert (/atoms/alert/) — Inline message communicating status or feedback.
+- Aspect Ratio (/atoms/aspect-ratio/) — Constrains content to a specific width-to-height ratio.
+- Avatar Stack (/atoms/avatar-stack/) — Overlapping group of avatars with optional overflow badge.
+- Avatar (/atoms/avatar/) — User representations with image, fallback, and optional status indicator.
+- Badge (/atoms/badge/) — Compact labels for status, categories, and metadata.
+- Breadcrumb (/atoms/breadcrumb/) — Navigation trail showing the current page location.
+- Button Group (/atoms/button-group/) — Multiple related actions presented as a unified joined control.
+- Button (/atoms/button/) — Triggers actions. Supports multiple variants, sizes, loading states, and icon compositions.
+- Calendar (/atoms/calendar/) — Date selection calendar with single, range, and multi-select modes.
+- Callout (/atoms/callout/) — Prominent status or guidance panel with icon, actions, and semantic tone.
+- Card Heading (/molecules/card-heading/) — Header row for cards and panels with title, description, leading slot, and actions. Composes: Card · Avatar · Button · Dropdown Menu.
+- Card (/atoms/card/) — Contained surface for grouping related content, media, stats, and article layouts.
+- Carousel (/atoms/carousel/) — Horizontally scrollable item sequence with previous and next controls.
+- Chart (/atoms/chart/) — Recharts-based data visualization with design-system styling.
+- Checkbox (/atoms/checkbox/) — Binary selection control with checked, unchecked, and indeterminate states.
+- Collapsible (/atoms/collapsible/) — Toggleable content region, often used for navigation groups.
+- Color Input (/atoms/color-input/) — Compact color input combining swatch, hex field, and optional opacity control.
+- Color Picker (/atoms/color-picker/) — Popover color selector with native color wheel, hex input, and preset palette.
+- Combobox (/atoms/combobox/) — Searchable select field with autocomplete filtering.
+- Command Palette (/molecules/command-palette/) — Modal search dialog for navigating and executing grouped commands. Composes: Dialog · Input · Icon · Kbd.
+- Command (/atoms/command/) — Composable command menu with search, groups, keyboard navigation, and shortcuts.
+- Context Menu (/atoms/context-menu/) — Right-click menu with nested sub-menus and keyboard support.
+- Data Table (/atoms/data-table/) — Sortable, filterable table powered by TanStack Table.
+- Data Transfer Controls (/molecules/data-transfer-controls/) — Import and export control cluster with optional scope selector and compact menu mode. Composes: Select · Button Group · Dropdown Menu.
+- Date Picker (/atoms/date-picker/) — Date input pattern combining a trigger field with a calendar popover.
+- Description List (/molecules/description-list/) — Key-value pairs for structured details in profiles and settings panels. Composes: Badge · Button.
+- Dialog (/atoms/dialog/) — Modal overlay for focused tasks and confirmations.
+- Drawer (/atoms/drawer/) — Bottom sheet that slides up from the edge, optimized for mobile.
+- Dropdown Menu (/atoms/dropdown-menu/) — Contextual action menu revealed from a trigger.
+- Empty State (/molecules/empty-state/) — Placeholder for empty lists, zero-data views, and no-results scenarios. Composes: Button · Icon.
+- Field (/molecules/field/) — Labeled form control composition with hint and error text. Composes: Label · Input · Textarea.
+- File Dropzone (/atoms/file-dropzone/) — Accessible drag-and-drop file input with loading and selected-file states.
+- Grid List (/molecules/grid-list/) — Responsive grid of cards for simple content, accents, and contact layouts. Composes: Card · Badge · Avatar.
+- Help Tooltip (/atoms/help-tooltip/) — Inline help trigger with tooltip content and optional learn-more link.
+- Hover Card (/atoms/hover-card/) — Rich preview card that appears on hover over a link or element.
+- Input Group (/molecules/input-group/) — Input with leading or trailing text addons, icons, and inset actions. Composes: Input.
+- Input Number (/atoms/input-number/) — Numeric input with steppers, unit suffix, and arrow-key stepping.
+- Input OTP (/atoms/input-otp/) — One-time password input with individual character slots.
+- Input (/atoms/input/) — Single-line text field for user input.
+- Kbd (/atoms/kbd/) — Keyboard shortcut display using compact monospaced styling.
+- Label (/atoms/label/) — Accessible form label that associates text with its control.
+- Media Asset Card (/molecules/media-asset-card/) — Selectable media or file card with grid, list, and responsive orientations. Composes: Card · Icon · Image.
+- Media Object (/molecules/media-object/) — Layout primitive pairing fixed media with flexible text content. Composes: Avatar · Icon.
+- Menubar (/atoms/menubar/) — Horizontal application menu bar with nested dropdown panels.
+- Native Select (/atoms/native-select/) — Styled native HTML select with no JavaScript dropdown overhead.
+- Navigation Menu (/atoms/navigation-menu/) — Top-level navigation with accessible animated dropdown panels.
+- Notification (/molecules/notification/) — Toast-style notification panel with success, error, warning, and info variants. Composes: Icon · Button.
+- Page Heading (/molecules/page-heading/) — Full page header with breadcrumb navigation, title, metadata, and actions. Composes: Button · Badge · Breadcrumb.
+- Pagination (/atoms/pagination/) — Navigation control for multi-page content.
+- Popover (/atoms/popover/) — Floating panel anchored to a trigger for richer contextual content.
+- Progress (/atoms/progress/) — Visual indicator of completion or loading progress.
+- Property Row (/molecules/property-row/) — Horizontal label and control row for designer inspector panels. Composes: Input Number · Color Input · Slider.
+- Radio Cards (/molecules/radio-card/) — Card-style single selection where each option highlights when selected. Composes: Radio Group · Card.
+- Radio Group (/atoms/radio-group/) — Single selection from a set of mutually exclusive options.
+- Resizable (/atoms/resizable/) — Drag-to-resize panel groups for flexible layouts.
+- Rich Text Editor (/atoms/rich-text-editor/) — Toolbar-driven content editor for formatted HTML input.
+- Scroll Area (/atoms/scroll-area/) — Scrollable container with styled custom scrollbar.
+- Searchable Table (/atoms/searchable-table/) — Responsive table with search, filters, sorting, mobile cards, and pagination.
+- Section Heading (/molecules/section-heading/) — Section header with optional description and action buttons. Composes: Button.
+- Select (/atoms/select/) — Dropdown list for choosing a single option.
+- Separator (/atoms/separator/) — Visual divider between sections, horizontal or vertical.
+- Sheet (/atoms/sheet/) — Slide-in panel anchored to a screen edge.
+- Sidebar (/atoms/sidebar/) — Composable side navigation with collapsible, icon, and off-canvas modes.
+- Skeleton (/atoms/skeleton/) — Loading placeholder that mimics the shape of pending content.
+- Slider (/atoms/slider/) — Range input for selecting numeric values.
+- Toast (/atoms/sonner/) — Non-blocking notifications that appear briefly and dismiss automatically.
+- Spinner (/atoms/spinner/) — Animated loading indicator for async operations.
+- Stacked List (/molecules/stacked-list/) — Vertically stacked rows with consistent padding and optional hover behavior. Composes: Badge · Avatar.
+- Stat Card (/molecules/stat-card/) — Metric display card with label, value, optional trend, and optional icon. Composes: Card · Badge · Icon.
+- Status Badge (/atoms/status-badge/) — Semantic badge that maps status values to labels, variants, icons, and dots.
+- Steps (/atoms/steps/) — Multi-step progress indicator with circles, bullets, and progress variants.
+- Switch (/atoms/switch/) — Toggle between two states, on and off.
+- Table (/atoms/table/) — Structured data display with rows and columns.
+- Tabs (/atoms/tabs/) — Organizes content into switchable panels.
+- Textarea (/atoms/textarea/) — Multi-line text field for longer user input.
+- Titled Card (/molecules/titled-card/) — Responsive card wrapper with title, subtitle, actions, and mobile-flattened layout. Composes: Card · Card Heading.
+- Toggle Group (/atoms/toggle-group/) — Set of toggles with single or multiple selection.
+- Toggle (/atoms/toggle/) — Two-state press button for toolbars and filter controls.
+- Tooltip (/atoms/tooltip/) — Brief label that appears on hover or focus to clarify an element.
+- URL Redirect Prompt (/molecules/url-redirect-prompt/) — Redirect recommendation callout shown when an editable URL handle changes. Composes: Callout · Switch.
+## Structured Data
+- `catalog.json` indexes the full docs route map
+- `registry.json` exposes machine-readable marketing block source metadata
+- `llms.txt` is generated from the same component registry used by the catalog