@lando-labs/lando-ds-mcp 4.0.0

package/build/data/ds-meta.verbose.json

@@ -0,0 +1 @@
+{"$schemaVersion":"1.3","package":{"name":"@lando-labs/design-system","version":"0.56.0","homepage":"https://github.com/lando-labs/lando-labs-design-system#readme"},"components":{"Accordion":{"kind":"component","category":"Overlay & Interactive","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Accordion","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"children":{"type":"ReactNode","required":true,"default":null,"description":"Children (AccordionItem components)"},"className":{"type":"string","required":false,"default":null,"description":"Container className"},"defaultValue":{"type":"string | string[]","required":false,"default":null,"description":"Default expanded value(s) for uncontrolled mode"},"onChange":{"type":"((value: string | string[]) => void)","required":false,"default":null,"description":"Callback when expansion changes"},"type":{"type":"\"single\" | \"multiple\"","required":false,"default":"'single'","description":"Expansion mode: single = only one open at a time, multiple = many can be open"},"value":{"type":"string | string[]","required":false,"default":null,"description":"Controlled expanded value(s)"}},"description":"A container component that manages a group of accordion items. Supports single or multiple expansion modes with smooth animations. @example <Accordion type=\"single\" defaultValue=\"item-1\">   <AccordionItem value=\"item-1\" title=\"Section 1\">Content 1</AccordionItem>   <AccordionItem value=\"item-2\" title=\"Section 2\">Content 2</AccordionItem> </Accordion>","examples":[],"composes":{"children":{"accepts":"AccordionItem","as":"ReactNode"}},"appliesClassNames":null},"AccordionItem":{"kind":"component","category":"Overlay & Interactive","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Accordion","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"children":{"type":"ReactNode","required":true,"default":null,"description":"Content to display when expanded"},"className":{"type":"string","required":false,"default":null,"description":"Container className"},"disabled":{"type":"boolean","required":false,"default":"false","description":"Disable this accordion item"},"icon":{"type":"ReactNode","required":false,"default":null,"description":"Optional icon displayed before title"},"title":{"type":"ReactNode","required":true,"default":null,"description":"Title displayed in the header"},"value":{"type":"string","required":true,"default":null,"description":"Unique identifier for this item"}},"description":"An individual accordion item that can be expanded/collapsed. Must be used within an Accordion component. @example <AccordionItem value=\"item-1\" title=\"Title\">Content here</AccordionItem> <AccordionItem value=\"item-2\" title=\"Custom\" icon={<Icon />}>More content</AccordionItem>","examples":[],"composes":null,"appliesClassNames":null},"Alert":{"kind":"component","category":"Feedback & Status","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Alert","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"children":{"type":"ReactNode","required":true,"default":null,"description":"Alert content"},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class"},"closable":{"type":"boolean","required":false,"default":"false","description":"Show close button"},"icon":{"type":"ReactNode","required":false,"default":null,"description":"Custom icon (default icons provided per variant)"},"inline":{"type":"boolean","required":false,"default":"false","description":"Render the slim, no-card \"inline\" shape used for in-page guidance /\nteaching banners. Composes with all semantic variants. Distinct from\nthe v0.11.0 `<Banner>` component, which is for viewport-fixed notices."},"onClose":{"type":"(() => void)","required":false,"default":null,"description":"Callback when close button is clicked"},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline style overrides merged onto the root element."},"title":{"type":"string","required":false,"default":null,"description":"Optional title displayed prominently"},"variant":{"type":"\"info\" | \"success\" | \"warning\" | \"error\"","required":false,"default":"'info'","description":"Visual style variant matching semantic meaning"}},"description":"Display important messages, notifications, or contextual feedback. Supports semantic variants with optional close functionality and custom icons. Two visual shapes: - **block** (default): full alert \"card\" with elevated surface tint and   generous padding — for form-level errors and prominent inline notices. - **inline** (`inline` prop): slim, no-card variant for in-page guidance /   teaching banners (e.g. ProjectDetailView teaching banners). Composes with   the same semantic variants. Distinct from the v0.11.0 `<Banner>`   component, which is a viewport-fixed persistent notice. @example <Aler","examples":[],"composes":null,"appliesClassNames":null},"AlertDialog":{"kind":"component","category":"Feedback & Status","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDialogElement","subpath":"./components/AlertDialog","extends":["HTMLAttributes<HTMLDialogElement>","RefAttributes<HTMLDialogElement>"],"deprecated":null,"props":{"cancelLabel":{"type":"string","required":false,"default":"'Cancel'","description":"Cancel button label. Defaults to `\"Cancel\"`."},"children":{"type":"ReactNode","required":false,"default":null,"description":"Optional richer content rendered in place of `description`. If both\nare provided, `children` wins and `description` is ignored."},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class on the `<dialog>` root (the visually styled element\nthat carries `role=\"alertdialog\"`). Merged after the component's own\nclasses via the `[styles.dialog, className]` join."},"confirmLabel":{"type":"string","required":false,"default":"'Confirm'","description":"Confirm button label. Defaults to `\"Confirm\"`."},"description":{"type":"string","required":false,"default":null,"description":"Optional description rendered below the title. Wired via\n`aria-describedby`. For richer content (links, formatted markup),\npass `children` instead."},"destructive":{"type":"boolean","required":false,"default":"false","description":"Mark the confirmation as destructive. Renders Confirm with the danger\nvariant. Default `false`.\n\nDestructive confirms keep focus on Cancel by default (no `initialFocus`\noverride) so an accidental Enter doesn't trigger the dangerous action."},"initialFocus":{"type":"\"confirm\" | \"cancel\"","required":false,"default":"'cancel'","description":"Which button to focus when the dialog opens.\n- `\"cancel\"` (default): safer for destructive flows; an accidental\n  Enter / Space activates Cancel, not the dangerous action.\n- `\"confirm\"`: appropriate for benign confirmations (e.g. \"Save\n  changes before exiting?\") where the affirmative path is the\n  expected default.\n\nNote: explicitly passing `initialFocus=\"confirm\"` on a `destructive`\ndialog is honored but inadvisable. The component does not silently\noverride the consumer's choice."},"onCancel":{"type":"(() => void)","required":false,"default":null,"description":"Optional cancel handler. Fired by the Cancel button and by Escape.\nIf omitted, Cancel / Escape will call `onOpenChange(false)` directly."},"onConfirm":{"type":"() => void","required":true,"default":null,"description":"Required confirm handler. Called when the user activates Confirm.\nThe dialog does NOT close itself afterward — call `onOpenChange(false)`\nin your handler once the confirmed action has been kicked off (or\nawaited, if you want the dialog to remain open during an in-flight\nmutation). This mirrors how Radix's AlertDialog hands the close to\nthe consumer so the dialog can act as a loading surface."},"onOpenChange":{"type":"((open: boolean) => void)","required":false,"default":null,"description":"Callback when the dialog's open state should change. Fired after\nCancel, Confirm (post-`onConfirm`), or Escape. Use this to mirror the\ndialog's open state in the consumer.\n\nIf `onCancel` is provided, Cancel and Escape route through it and do\nNOT automatically call `onOpenChange(false)` — your cancel handler\nis expected to flip the controlled state itself. (This mirrors how\nRadix's AlertDialog hands the close decision to the consumer for\ndestructive flows that need to e.g. clear pending state first.)"},"open":{"type":"boolean","required":true,"default":null,"description":"Whether the alert dialog is open. AlertDialog is always controlled —\nthe explicit decision (confirm / cancel) belongs to the consumer's\nstate, not internal component state."},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline styles merged onto the `<dialog>` root. The component sets no\ninline style on the dialog itself today, so consumer keys apply directly.\n(Inherited type from `DialogHTMLAttributes`; restated here for docs.)"},"title":{"type":"string","required":true,"default":null,"description":"Required title. AlertDialog needs an accessible name, so unlike Modal\nthis prop is not optional. Wired to the dialog via `aria-labelledby`."}},"description":"AlertDialog Component (#314) Role-aware destructive-confirm primitive. Mechanically a `<Modal>` cousin — native `<dialog>` + `showModal()` + `@starting-style` for animation + the `pointer-events:none on closed; auto on [open]` inert-when-closed pattern (#387) — but with stricter semantics:   - `role=\"alertdialog\"` (NOT `dialog`). Screen readers treat alertdialog     as a higher-priority interruption and announce the title + description     immediately, which is the right cue for \"are you sure you want to     delete this?\" style confirmations.   - Required `title` (alertdialog needs an accessib","examples":[],"composes":null,"appliesClassNames":null},"AppShell":{"kind":"component","category":"Navigation & Chrome","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/AppShell","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"children":{"type":"ReactNode","required":true,"default":null,"description":"Main content — rendered inside the <main> element."},"className":{"type":"string","required":false,"default":null,"description":"Extra class on the outer shell element."},"contentMaxWidth":{"type":"AppShellMaxWidth","required":false,"default":"'none'","description":"Max width applied to the main content area. `'none'` preserves the\noriginal full-width behavior. Semantic tokens map to breakpoint-aligned\nwidths:\n\n- `'sm'` → 640px\n- `'md'` → 768px\n- `'lg'` → 1024px\n- `'xl'` → 1280px\n- `'2xl'` → 1440px\n\nAny other string is used as a raw CSS length (e.g. `\"800px\"`, `\"75ch\"`).\nCan also be overridden at runtime via `--app-shell-content-max-width`.\n\nWhen set (not `'none'`), the main content centers horizontally\ninside the body row."},"contentPadding":{"type":"AppShellSpacingToken","required":false,"default":"(CSS fallback: `var(--spacing-md)`)","description":"Padding applied to the main content area. Accepts a semantic spacing\ntoken or `'none'`. Can also be overridden at runtime via the\n`--app-shell-content-padding` CSS variable on the shell element.\n\nLeave unset to use the CSS default (`var(--spacing-md)`) — this is\nthe behavior we want most consumers to inherit so they can delete\ntheir own `.app-content { padding: … }` blocks."},"defaultSidebarCollapsed":{"type":"boolean","required":false,"default":"false","description":"Default collapsed state for uncontrolled usage. Default: false"},"footer":{"type":"ReactNode","required":false,"default":null,"description":"Content for the bottom footer row (typically <Footer>)."},"header":{"type":"ReactNode","required":false,"default":null,"description":"Content for the top header row (typically <Header>)."},"mainAriaLabel":{"type":"string","required":false,"default":"Main content","description":"Accessible label for the main landmark. Default: \"Main content\"."},"mainProps":{"type":"HTMLAttributes<HTMLElement>","required":false,"default":null,"description":"Additional props passed to the <main> element (e.g. id, data-*)."},"mobileSidebarOpen":{"type":"boolean","required":false,"default":null,"description":"Controlled mobile drawer open state."},"onMobileSidebarOpenChange":{"type":"((open: boolean) => void)","required":false,"default":null,"description":"Callback fired when mobile drawer state changes."},"onSidebarCollapsedChange":{"type":"((collapsed: boolean) => void)","required":false,"default":null,"description":"Callback fired when sidebar collapsed state changes."},"sidebar":{"type":"ReactNode","required":false,"default":null,"description":"Sidebar content. Accepts either:\n - A <Sidebar> element (AppShell will clone it and wire collapse props), OR\n - Any other node (rendered inside a default Sidebar with collapse wiring)"},"sidebarCollapsed":{"type":"boolean","required":false,"default":null,"description":"Controlled sidebar collapsed state. Forwarded to Sidebar.\nIf omitted, AppShell uses its own internal state (starting uncollapsed)."},"sidebarPersistKey":{"type":"string","required":false,"default":null,"description":"Persist collapsed state to localStorage under this key (uncontrolled only)."},"sidebarShortcut":{"type":"string | false","required":false,"default":"'meta+b'","description":"Keyboard shortcut for toggling sidebar. Format: \"meta+b\" / \"ctrl+b\" / etc.\nSet to `false` to disable. Default: \"meta+b\" (also binds Ctrl+B for non-Mac)."},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline styles merged onto the outer shell `<div>`. Merged AFTER the\ncomponent's own `--app-shell-content-padding` / `--app-shell-content-max-width`\ncustom properties, so a consumer can override those vars inline if needed.\n(Inherited type from `HTMLAttributes`; restated here for docs.)"}},"description":"Composable application shell: header + optional sidebar + main + optional footer. Layout contract: - CSS grid, 3 rows (header / body / footer) and 2 columns (sidebar / main) - Header is sticky to the top of the body row - Footer sits at the bottom of the shell - Sidebar is a column that reflows when collapsed (width change is smooth) - On mobile (<768px) the sidebar upgrades to an overlay drawer Consumers can override layout CSS via these custom properties on the outer element:   --app-shell-header-height   --app-shell-footer-height   --app-shell-max-width   --app-shell-gap   --app-shell-conte","examples":[],"composes":null,"appliesClassNames":null},"ApprovalCard":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":true,"ref":"HTMLDivElement","subpath":"./components/ApprovalCard","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"approveLabel":{"type":"string","required":false,"default":"'Approve'","description":"Custom approve button label"},"asChild":{"type":"boolean","required":false,"default":"false","description":"Render through the single child element (Radix-style `asChild`),\nmerging ApprovalCard's root class + forwarded props onto it instead of\nemitting the default `<div>` (#424). The ApprovalCard's structured\ncontent (header / metadata / actions) renders INSIDE the provided child\nelement, letting consumers pick the root element (e.g. `<article>`,\n`<li>`) while keeping the card content and styling."},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class"},"description":{"type":"string","required":false,"default":null,"description":"Optional description"},"disabled":{"type":"boolean","required":false,"default":"false","description":"Disable all interactions"},"metadata":{"type":"ApprovalMetadata[]","required":false,"default":"'[]'","description":"Array of metadata items"},"onApprove":{"type":"(() => void)","required":false,"default":null,"description":"Approve button callback (binary mode)."},"onReject":{"type":"(() => void)","required":false,"default":null,"description":"Reject button callback (binary mode)."},"priority":{"type":"\"low\" | \"medium\" | \"high\"","required":false,"default":null,"description":"Priority level"},"rejectLabel":{"type":"string","required":false,"default":"'Reject'","description":"Custom reject button label"},"status":{"type":"\"pending\" | \"approved\" | \"rejected\"","required":false,"default":"'pending'","description":"Approval status"},"title":{"type":"string","required":true,"default":null,"description":"Card title"},"workflow":{"type":"WorkflowConfig","required":false,"default":null,"description":"Workflow mode — when provided, replaces the binary approve/reject\nbuttons with a \"Take action ▼\" dropdown menu of N transitions.\nMutually exclusive with `onApprove` / `onReject` (workflow wins)."}},"description":"Rich card for approval workflows with status indicators and action buttons. Combines Card, Badge, and Button components for approval interfaces. Deliberate standalone component (distinct markup/CSS; composes `Card`), not a `Card` recipe — the recipe-vs-component boundary is a recorded decision (#515), with recipe-ification tracked for the future Recipes layer (#415). Two action modes: 1. **Binary mode** (default) — Pass `onApprove` / `onReject` to render    side-by-side primary/outline buttons. Used for simple yes/no approvals    (default `status: 'pending' | 'approved' | 'rejected'`). 2. **Wo","examples":[],"composes":null,"appliesClassNames":null},"AreaChart":{"kind":"component","category":"Data Visualization","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":null,"subpath":"./components/AreaChart","extends":["HTMLAttributes"],"deprecated":null,"props":{"animationDuration":{"type":"number","required":false,"default":"300"},"aspectRatio":{"type":"number","required":false,"default":null},"colorScheme":{"type":"ColorScheme","required":false,"default":"'brand'"},"colors":{"type":"string[]","required":false,"default":null},"curveType":{"type":"\"step\" | \"linear\" | \"monotone\" | \"stepBefore\" | \"stepAfter\"","required":false,"default":"'monotone'","description":"Area curve type"},"data":{"type":"ChartDataPoint[]","required":true,"default":null},"dataKeys":{"type":"string[]","required":true,"default":null,"description":"Data keys to plot"},"description":{"type":"string","required":false,"default":null},"empty":{"type":"boolean","required":false,"default":null},"error":{"type":"string","required":false,"default":null},"fillOpacity":{"type":"number","required":false,"default":"0.6","description":"Area fill opacity"},"height":{"type":"string | number","required":false,"default":null},"interactive":{"type":"boolean","required":false,"default":null},"legendPosition":{"type":"LegendPosition","required":false,"default":null},"loading":{"type":"boolean","required":false,"default":null},"onDataPointClick":{"type":"((data: ChartDataPoint) => void)","required":false,"default":null,"description":"Click handler for individual data points. The payload shape is\nRecharts-defined and varies by chart type; consumers should narrow at\ntheir use site."},"onLegendClick":{"type":"((dataKey: string) => void)","required":false,"default":null},"showGrid":{"type":"boolean","required":false,"default":"true"},"showLegend":{"type":"boolean","required":false,"default":"true"},"showTooltip":{"type":"boolean","required":false,"default":"true"},"stacked":{"type":"boolean","required":false,"default":"false","description":"Stack areas instead of overlaying"},"title":{"type":"string","required":false,"default":null,"description":"Visible / data-table caption text. Note this also satisfies the native\n`title` attribute from `HTMLAttributes<HTMLDivElement>` (both are `string`)."},"valueFormat":{"type":"\"number\" | \"currency\" | \"percent\" | \"compact\"","required":false,"default":"'number'","description":"Value formatting (currency, percent, compact, number)"},"variant":{"type":"\"default\" | \"brand\" | \"gradient\"","required":false,"default":null},"width":{"type":"string | number","required":false,"default":null,"description":"Intended outer width. Forwarded by sub-charts to their Recharts layout;\nthe base `Chart` wrapper itself always renders a 100%-width responsive\ncontainer and does not read this."},"xAxisKey":{"type":"string","required":true,"default":null,"description":"Key for x-axis"}},"description":"Area chart for visualizing volume trends with brand gradient fills. Supports stacked areas and customizable opacity. @example <AreaChart   data={trafficData}   dataKeys={['desktop', 'mobile']}   xAxisKey=\"month\"   colorScheme=\"teal\"   stacked   height={300} />","examples":[],"composes":null,"appliesClassNames":null},"ArticleCard":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":"HTMLElement","subpath":"./components/ArticleCard","extends":["HTMLAttributes<HTMLElement>","RefAttributes<HTMLElement>"],"deprecated":null,"props":{"asChild":{"type":"boolean","required":false,"default":"false","description":"Render through the single child element (Radix-style `asChild`),\nmerging ArticleCard's root class + forwarded props onto it instead of\nemitting the default `<article>` (#424). The `.article` root class and\n`scale-*` variant always land on the rendered element either way.\n\nNote: when combined with `href`, the internal whole-card `<a>` still\nrenders inside the (now delegated) root — keep the child element a\nnon-interactive container to avoid nested-anchor issues."},"byline":{"type":"string","required":false,"default":null,"description":"Optional author name. Renders a Byline above the headline when set."},"children":{"type":"ReactNode","required":false,"default":null,"description":"Article body content — rendered after the lede / pull-quote block."},"date":{"type":"string","required":false,"default":null,"description":"Optional publication date. Pairs with byline."},"headline":{"type":"string","required":true,"default":null,"description":"Headline text — rendered as a heading element."},"headlineAs":{"type":"ArticleCardHeadingLevel","required":false,"default":"'h2'","description":"Heading level for the headline."},"hero":{"type":"ReactNode","required":false,"default":null,"description":"Optional hero image element. Sits above the headline with stable\naspect-ratio framing (object-fit: cover)."},"href":{"type":"string","required":false,"default":null,"description":"Optional URL — when provided, the entire card surface becomes a\nsingle clickable anchor. (Note: nesting links inside `children` will\nbe flagged by browsers — keep article body link-free when using href,\nor omit href and let consumers wrap manually.)"},"lede":{"type":"ReactNode","required":false,"default":null,"description":"Optional lede paragraph. When set, renders before children using the\nLede primitive. Pass plain string or richer React content."},"pullQuote":{"type":"ReactNode","required":false,"default":null,"description":"Optional pull-quote rendered between the lede and body content."},"scale":{"type":"ArticleCardScale","required":false,"default":"'supporting'","description":"Scale variant controlling headline size.\n- `lead`: front-page lead story (2.5rem)\n- `supporting`: standard story (1.5rem) — default\n- `brief`: sidebar brief (1.125rem)"}},"description":"Newspaper-style editorial surface — a sibling of <Card>, NOT a Card variant. Built for newsroom layouts (lead story, supporting story, sidebar brief) that deliberately diverge from the DS sans-serif aesthetic in favor of serif typography. Renders as a semantic <article> element. All typography uses the editorial token set (--font-family-editorial, --color-editorial-ink-*, --font-size-editorial-*) so dark mode and consumer themes propagate without forking. Three scales control headline size:   - `lead`        → 2.5rem (front-page lead story)   - `supporting`  → 1.5rem (secondary story below the","examples":[],"composes":null,"appliesClassNames":null},"AspectRatio":{"kind":"component","category":"Layout Primitives","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/AspectRatio","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"children":{"type":"ReactNode","required":false,"default":null,"description":"Child element constrained to the ratio."},"ratio":{"type":"string | number","required":false,"default":"16 / 9","description":"Width-to-height ratio. Accepts a number (`16 / 9`) or a CSS-valid string\n(`\"16 / 9\"`, `\"1.618\"`). Defaults to `16 / 9`."}},"description":"Constrains its child to a fixed width/height ratio using the native CSS `aspect-ratio` property. The component itself is a plain `<div>` wrapper — the child fills it completely so any element (image, video, iframe, map) inherits the ratio without bespoke padding-bottom hacks. @example <AspectRatio ratio={16 / 9}>   <img src=\"/hero.jpg\" alt=\"Hero\" /> </AspectRatio> <AspectRatio ratio=\"4 / 3\" />","examples":[],"composes":null,"appliesClassNames":null},"Avatar":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":true,"ref":"HTMLDivElement","subpath":"./components/Avatar","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"alt":{"type":"string","required":false,"default":null,"description":"Alt text for the image"},"asChild":{"type":"boolean","required":false,"default":"false","description":"Render as the single child element, merging Avatar styling onto it\n(Layer-7 composition, #424). Use to make an avatar clickable without\nnesting interactive elements — e.g. `<Avatar asChild initials=\"JD\"><a href=\"/profile\" /></Avatar>`\nrenders `<a class=\"…avatar\">`. The avatar's inner content (image /\ninitials / fallback / status) is composed INTO the child."},"gradient":{"type":"boolean","required":false,"default":null,"description":"Use a brand-themed gradient for the initials background.\n\nSprint 10 (#59) — defaults to `true` whenever `initials` is provided\nand no `src` is set. The specific gradient is picked deterministically\nfrom the initials string so a contact list renders as a richly-colored\nset (not 20 identical blue circles). Pass `gradient={false}` to opt\nout and keep the flat neutral-300 look."},"initials":{"type":"string","required":false,"default":null,"description":"Initials to display when no image is provided"},"loading":{"type":"boolean","required":false,"default":"false","description":"Show loading state"},"size":{"type":"\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"","required":false,"default":"'md'","description":"Size of the avatar"},"src":{"type":"string","required":false,"default":null,"description":"Image source URL"},"status":{"type":"\"online\" | \"offline\" | \"busy\" | \"away\"","required":false,"default":null,"description":"Status indicator"}},"description":"A versatile avatar component for displaying user profile images, initials, or icons. Supports status indicators and multiple sizes. @example <Avatar src=\"/user.jpg\" alt=\"John Doe\" /> <Avatar initials=\"JD\" /> <Avatar initials=\"AB\" status=\"online\" />","examples":[],"composes":null,"appliesClassNames":null},"AvatarGroup":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/AvatarGroup","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"children":{"type":"ReactNode","required":true,"default":null,"description":"Avatar children to stack."},"max":{"type":"number","required":false,"default":null,"description":"Truncate after this many avatars; surplus rolls into a \"+N\" badge."},"size":{"type":"AvatarGroupSize","required":false,"default":"'md'","description":"Inherited size token passed down via a `data-size` attribute so\ndescendants can opt-in to matched dimensions. The Avatar component\nstill owns its own `size` prop — this is a hint, not enforcement."}},"description":"Renders multiple `<Avatar>` children with a slight horizontal overlap to compactly represent a team or contributor list. When the child count exceeds `max`, the overflow is collapsed into a \"+N\" affordance. @example <AvatarGroup max={3}>   <Avatar initials=\"JD\" />   <Avatar initials=\"AB\" />   <Avatar initials=\"CD\" />   <Avatar initials=\"EF\" /> </AvatarGroup>","examples":[],"composes":{"children":{"accepts":"Avatar","as":"ReactNode"}},"appliesClassNames":null},"Badge":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":"HTMLSpanElement","subpath":"./components/Badge","extends":["HTMLAttributes<HTMLSpanElement>","RefAttributes<HTMLSpanElement>"],"deprecated":null,"props":{"asChild":{"type":"boolean","required":false,"default":"false","description":"Render as the single child element, merging Badge styling onto it\n(Layer-7 composition, #424). Use to make a badge clickable without\nnesting interactive elements — e.g. `<Badge asChild><a href=\"…\">Tag</a></Badge>`\nrenders `<a class=\"…badge\">`. The badge's inner structure (icon +\n`.content`, optional remove button) is composed INTO the child, mirroring\nthe non-`asChild` layout."},"colorScheme":{"type":"BadgeColorScheme","required":false,"default":null,"description":"Identity palette (orthogonal to `variant`). When supplied, the badge\npaints from the named palette regardless of `variant`'s color\nmapping. Use for identities that aren't states — e.g. source-type\ntags (\"RSS\" → orange, \"PubMed\" → purple).\n\nBoth can co-exist: `colorScheme` wins for color, `variant` retains\nits semantics for non-color behaviors."},"dot":{"type":"boolean","required":false,"default":"false","description":"Show only a dot indicator without text"},"icon":{"type":"ReactNode","required":false,"default":null,"description":"Icon to display before the badge text - pass a lucide-react element"},"onRemove":{"type":"(() => void)","required":false,"default":null,"description":"Callback when the remove button is clicked. Renders a `<button>` inside the\nbadge.\n\nCaveat (#509): with `asChild` + an **interactive** child (e.g. `<a href>`),\nthe remove `<button>` composes *inside* that child, which is invalid\ninteractive-in-interactive nesting. For a removable clickable tag, keep the\nbadge non-`asChild` and place the link inside, or render the remove control\nas a sibling outside the Badge."},"pill":{"type":"boolean","required":false,"default":"false","description":"Use pill shape (fully rounded)"},"size":{"type":"\"sm\" | \"md\" | \"lg\"","required":false,"default":"'md'","description":"Size of the badge"},"variant":{"type":"\"info\" | \"success\" | \"warning\" | \"default\" | \"danger\" | \"primary\"","required":false,"default":"'default'","description":"Visual style variant"}},"description":"A small label component for displaying status, counts, or tags. Supports multiple variants and can be removable. @example import { Star } from 'lucide-react' <Badge variant=\"primary\">New</Badge> <Badge variant=\"success\" size=\"sm\">Active</Badge> <Badge variant=\"warning\" icon={<Star />} onRemove={() => {}}>Pending</Badge> // colorScheme is orthogonal to variant — use it for *identity* // (a \"RSS\" badge is always orange regardless of state): <Badge colorScheme=\"orange\">RSS</Badge> <Badge colorScheme=\"blue\">NewsAPI</Badge>","examples":[],"composes":null,"appliesClassNames":null},"Banner":{"kind":"component","category":"Feedback & Status","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Banner","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"actions":{"type":"ReactNode","required":false,"default":null,"description":"Optional actions slot rendered to the right of the message, before the\ndismiss button. Typically holds one or two `<Button>` elements\n(\"Accept\" / \"Learn more\")."},"children":{"type":"ReactNode","required":true,"default":null,"description":"Banner content (the primary message)."},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class appended to the root element."},"onDismiss":{"type":"(() => void)","required":false,"default":null,"description":"Optional dismiss callback. When provided, a close (×) button renders\non the trailing edge and calls `onDismiss` on click. Omit to render\na non-dismissible banner (e.g. critical system notices)."},"placement":{"type":"\"top\" | \"bottom\"","required":false,"default":"'bottom'","description":"Which edge of the viewport the banner pins to."},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline style overrides merged onto the root element."},"variant":{"type":"\"info\" | \"success\" | \"warning\" | \"error\"","required":false,"default":"'info'","description":"Visual variant — colors align with `Alert`'s semantic palette."}},"description":"Slim viewport-fixed (`position: fixed`) persistent notification bar pinned to the top or bottom edge of the viewport. Distinct from sibling primitives: - `Toast` — auto-dismisses; transient. - `StickyBar` — `position: sticky` inside its scroll container, not viewport. - `Alert` — inline content; lives in normal document flow. - `Banner` — viewport-fixed, persistent until accepted/dismissed. Primary use cases:  1. GDPR `ConsentBanner` (pinned to viewport bottom, persistent until     accepted/dismissed).  2. System-level notices (offline indicator, session expiring, scheduled     maintenance win","examples":[],"composes":null,"appliesClassNames":null},"BarChart":{"kind":"component","category":"Data Visualization","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":null,"subpath":"./components/BarChart","extends":["HTMLAttributes"],"deprecated":null,"props":{"animationDuration":{"type":"number","required":false,"default":"300"},"aspectRatio":{"type":"number","required":false,"default":null},"barGap":{"type":"number","required":false,"default":"4","description":"Gap between bars"},"barRadius":{"type":"number | [number, number, number, number]","required":false,"default":"6","description":"Bar corner radius (number or [topLeft, topRight, bottomRight, bottomLeft])"},"barSize":{"type":"number","required":false,"default":null,"description":"Size of each bar"},"colorScheme":{"type":"ColorScheme","required":false,"default":"'brand'"},"colors":{"type":"string[]","required":false,"default":null},"data":{"type":"ChartDataPoint[]","required":true,"default":null},"dataKeys":{"type":"string[]","required":true,"default":null,"description":"Data keys to plot"},"description":{"type":"string","required":false,"default":null},"empty":{"type":"boolean","required":false,"default":null},"error":{"type":"string","required":false,"default":null},"height":{"type":"string | number","required":false,"default":null},"interactive":{"type":"boolean","required":false,"default":null},"layout":{"type":"\"horizontal\" | \"vertical\"","required":false,"default":"'horizontal'","description":"Layout orientation"},"legendPosition":{"type":"LegendPosition","required":false,"default":null},"loading":{"type":"boolean","required":false,"default":null},"onDataPointClick":{"type":"((data: ChartDataPoint) => void)","required":false,"default":null,"description":"Click handler for individual data points. The payload shape is\nRecharts-defined and varies by chart type; consumers should narrow at\ntheir use site."},"onLegendClick":{"type":"((dataKey: string) => void)","required":false,"default":null},"showGrid":{"type":"boolean","required":false,"default":"true"},"showLegend":{"type":"boolean","required":false,"default":"true"},"showTooltip":{"type":"boolean","required":false,"default":"true"},"showValueLabels":{"type":"boolean","required":false,"default":"false","description":"Show value labels on bars"},"stacked":{"type":"boolean","required":false,"default":"false","description":"Stack bars instead of grouping"},"title":{"type":"string","required":false,"default":null,"description":"Visible / data-table caption text. Note this also satisfies the native\n`title` attribute from `HTMLAttributes<HTMLDivElement>` (both are `string`)."},"valueFormat":{"type":"\"number\" | \"currency\" | \"percent\" | \"compact\"","required":false,"default":"'number'","description":"Value formatting (currency, percent, compact, number)"},"variant":{"type":"\"default\" | \"brand\" | \"gradient\"","required":false,"default":null},"width":{"type":"string | number","required":false,"default":null,"description":"Intended outer width. Forwarded by sub-charts to their Recharts layout;\nthe base `Chart` wrapper itself always renders a 100%-width responsive\ncontainer and does not read this."},"xAxisKey":{"type":"string","required":true,"default":null,"description":"Key for x-axis (category axis)"}},"description":"Bar chart for comparing categories with brand-themed styling. Supports vertical/horizontal layouts, stacked bars, and rounded corners. @example <BarChart   data={salesData}   dataKeys={['sales']}   xAxisKey=\"product\"   colorScheme=\"teal\"   barRadius={6}   height={300} />","examples":[],"composes":null,"appliesClassNames":null},"BottomNav":{"kind":"component","category":"Navigation & Chrome","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":"HTMLElement","subpath":"./components/BottomNav","extends":["HTMLAttributes<HTMLElement>","RefAttributes<HTMLElement>"],"deprecated":null,"props":{"ariaLabel":{"type":"string","required":false,"default":"'Primary'","description":"Accessible label for the navigation landmark. Defaults to \"Primary\"."},"children":{"type":"ReactNode","required":true,"default":null,"description":"Tab items — usually `<BottomNavItem>` children."},"className":{"type":"string","required":false,"default":null,"description":"Additional className merged with internal styles."}},"description":"Mobile-only fixed-bottom tab bar (e.g. Discover / Steeped / Serve / Account). Hidden at `>= 768px` (breakpoints.px.md) — desktop layouts use the Sidebar pattern instead. Sprint 17 (#82) — absorbs Steepen's hand-rolled `MobileNav.tsx`. ## Composition   <BottomNav>     <BottomNavItem href=\"/discover\" icon={<Compass />} label=\"Discover\" active />     <BottomNavItem href=\"/steeped\"  icon={<Leaf />}   label=\"Steeped\" badge={3} />     <BottomNavItem href=\"/serve\"    icon={<Coffee />} label=\"Serve\" />     <BottomNavItem href=\"/account\"  icon={<User />}   label=\"Account\" />   </BottomNav> ## Layout -","examples":[],"composes":{"children":{"accepts":"BottomNavItem","as":"ReactNode"}},"appliesClassNames":null},"BottomNavItem":{"kind":"component","category":"Navigation & Chrome","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":"HTMLElement","subpath":"./components/BottomNav","extends":["HTMLAttributes<HTMLElement>","RefAttributes<HTMLElement>"],"deprecated":null,"props":{"active":{"type":"boolean","required":false,"default":"false","description":"Mark this tab as the current route. Adds `aria-current=\"page\"`."},"ariaLabel":{"type":"string","required":false,"default":null,"description":"Override the accessible name. Defaults to the rendered `label`. Useful when\n`label` is a complex ReactNode and you want a plain-text aria-label."},"asChild":{"type":"boolean","required":false,"default":"false","description":"Render the provided child element as the tab root via Slot.\nIntended for routing-library integration (e.g. `next/link`):\n\n  <BottomNavItem icon={<X />} label=\"Y\" asChild>\n    <Link href=\"/y\" />\n  </BottomNavItem>\n\nWhen true, `href` is ignored — the child owns its routing.\nThe slotted child's own children are ignored; `icon` + `label` from this\ncomponent's props are rendered inside the slot for consistent visual\nstructure."},"badge":{"type":"ReactNode","required":false,"default":null,"description":"Optional badge content — number, ReactNode, null, or undefined.\n- `null` / `undefined` / `0`: no badge rendered.\n- number > 0: rendered as text inside a small pill.\n- any other ReactNode: rendered as-is inside the badge container."},"children":{"type":"ReactNode","required":false,"default":null,"description":"When asChild is true, the single React element child to slot into."},"className":{"type":"string","required":false,"default":null,"description":"Additional className merged onto the tab root."},"href":{"type":"string","required":false,"default":null,"description":"URL to navigate to. Renders as `<a href=\"...\">` when provided and\n`asChild` is false. Omit when using `asChild` (the child owns href)."},"icon":{"type":"ReactNode","required":true,"default":null,"description":"Leading icon — typically a lucide-react icon or DS `<Icon>`."},"label":{"type":"ReactNode","required":true,"default":null,"description":"Short text label rendered below the icon (10–12px)."},"onClick":{"type":"MouseEventHandler<HTMLElement>","required":false,"default":null,"description":"Click handler (fires alongside navigation)."}},"description":"A single tab inside `<BottomNav>`. Stacks an icon on top of a small label, with an optional badge (unread count) in the upper-right corner. ## asChild pattern (Slot) When `asChild` is true, the consumer's element (e.g. `<Link>`) receives the className, ref, onClick, and aria-current props via the Slot pattern. The icon, label, and badge children are passed through and stay in BottomNavItem's control.   <BottomNavItem icon={<Compass />} label=\"Discover\" asChild>     <Link href=\"/discover\" />   </BottomNavItem> Note: when using `asChild`, the slotted child's children (if any) are IGNORED — `icon","examples":[],"composes":null,"appliesClassNames":null},"Box":{"kind":"component","category":"Layout Primitives","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":"HTMLDivElement","subpath":"./components/Box","extends":["HTMLAttributes<HTMLElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"align":{"type":"BoxFlexAlign","required":false,"default":null,"description":"Cross-axis alignment. Only applies when `display` is `'flex'`\nor `'grid'`."},"as":{"type":"ElementType<any, keyof IntrinsicElements>","required":false,"default":"'div'","description":"HTML element to render as"},"aspectRatio":{"type":"string","required":false,"default":null,"description":"Intrinsic sizing (#137). Each prop accepts any CSS length string —\n`clamp(...)`, viewport units (`vw`/`vh`/`svh`/`dvh`), `ch`, `em`,\n`%`, `min-content`/`max-content`/`fit-content`, plain pixels, etc.\nPassed through verbatim as an inline style; no token resolution.\n@example <Box width=\"clamp(16rem, 40vw, 32rem)\" aspectRatio=\"16/9\" />"},"background":{"type":"string","required":false,"default":null,"description":"Background color (CSS color value or design token variable)\n@example 'var(--color-bg-subtle)' or '#f0f0f0'"},"border":{"type":"boolean","required":false,"default":"false","description":"Add default border"},"borderRadius":{"type":"\"none\" | \"sm\" | \"md\" | \"lg\" | \"full\"","required":false,"default":null,"description":"Border radius using design token scale"},"children":{"type":"ReactNode","required":false,"default":null,"description":"Child elements to render inside box"},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class names"},"direction":{"type":"BoxFlexDirection","required":false,"default":"'row' (inherited from flex default)","description":"Flex direction. Only applies when `display=\"flex\"`."},"display":{"type":"\"none\" | \"grid\" | \"inline\" | \"block\" | \"inline-block\" | \"flex\"","required":false,"default":"'block'","description":"Display mode"},"gap":{"type":"BoxSpacingToken","required":false,"default":null,"description":"Gap between children. Only applies when `display` is `'flex'`\nor `'grid'`. Maps to a semantic spacing token\n(`gap=\"sm\"` → `var(--spacing-sm)`)."},"grow":{"type":"number | boolean","required":false,"default":null,"description":"Grow to fill remaining space along the parent flex/grid main axis (#374).\n\n- `true` → `flex: 1 1 auto` (the conventional \"fill the gap\" preset)\n- `<number>` → `flex: <n> 1 auto` (proportional growth between siblings)\n- `false` / omitted → no flex declaration emitted\n\nOnly takes effect when the Box is itself a child of a `display: flex`\n(or `display: grid` with `grid-auto-flow: row`) parent. Without that\nparent context the property is harmless — the browser ignores `flex`\non a non-flex-item — but you probably wanted `width: 100%`."},"height":{"type":"string","required":false,"default":null},"justify":{"type":"BoxFlexJustify","required":false,"default":null,"description":"Main-axis alignment. Only applies when `display` is `'flex'`\nor `'grid'`."},"margin":{"type":"BoxSpacingToken","required":false,"default":null,"description":"Margin around box using design token scale"},"marginBottom":{"type":"BoxSpacingToken","required":false,"default":null},"marginLeft":{"type":"BoxSpacingToken","required":false,"default":null},"marginRight":{"type":"BoxSpacingToken","required":false,"default":null},"marginTop":{"type":"BoxSpacingToken","required":false,"default":null,"description":"Margin for specific sides using design token scale"},"maxHeight":{"type":"string","required":false,"default":null},"maxWidth":{"type":"string","required":false,"default":null},"minHeight":{"type":"string","required":false,"default":null},"minWidth":{"type":"string","required":false,"default":null},"padding":{"type":"BoxSpacingToken","required":false,"default":null,"description":"Padding around content using design token scale"},"paddingBottom":{"type":"BoxSpacingToken","required":false,"default":null},"paddingLeft":{"type":"BoxSpacingToken","required":false,"default":null},"paddingRight":{"type":"BoxSpacingToken","required":false,"default":null},"paddingTop":{"type":"BoxSpacingToken","required":false,"default":null,"description":"Padding for specific sides using design token scale"},"style":{"type":"CSSProperties","required":false,"default":"'{}'","description":"Inline styles (merged with component styles)"},"width":{"type":"string","required":false,"default":null}},"description":"Generic container primitive with common styling props and optional flex/grid layout shortcuts (`direction`, `gap`, `align`, `justify`). Layout shortcuts only take effect when `display` is `'flex'` or `'grid'`. When `display` is anything else (the default `'block'`, `'inline'`, etc.), the layout props are silently ignored — matching CSS semantics and avoiding any implicit flex behavior.","examples":[],"composes":null,"appliesClassNames":null},"Breadcrumb":{"kind":"component","category":"Navigation & Chrome","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLElement","subpath":"./components/Breadcrumb","extends":["HTMLAttributes<HTMLElement>","RefAttributes<HTMLElement>"],"deprecated":null,"props":{"children":{"type":"ReactNode","required":true,"default":null,"description":"Breadcrumb items"},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class merged onto the `<nav>` root."},"separator":{"type":"ReactNode","required":false,"default":"'/'","description":"Custom separator between items"},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline styles merged onto the `<nav>` root.\n(Inherited type from `HTMLAttributes`; restated here for docs.)"}},"description":"Navigation component showing the current page's location within a hierarchy. Uses context to manage separator and item states. @example <Breadcrumb>   <BreadcrumbItem href=\"/\">Home</BreadcrumbItem>   <BreadcrumbItem href=\"/products\">Products</BreadcrumbItem>   <BreadcrumbItem active>Current Page</BreadcrumbItem> </Breadcrumb>","examples":[],"composes":{"children":{"accepts":"BreadcrumbItem","as":"ReactNode"}},"appliesClassNames":null},"BreadcrumbItem":{"kind":"component","category":"Navigation & Chrome","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":true,"ref":"HTMLLIElement","subpath":"./components/Breadcrumb","extends":["HTMLAttributes<HTMLLIElement>","RefAttributes<HTMLLIElement>"],"deprecated":null,"props":{"active":{"type":"boolean","required":false,"default":"false","description":"Indicates current page (not a link)"},"asChild":{"type":"boolean","required":false,"default":"false","description":"Render as the single child element, merging link styling onto it.\nEnables routing libraries (next/link, react-router Link) to work\nwithout wrapping. When true, `href` and `onClick` on the item are\nignored — put them on the child instead."},"children":{"type":"ReactNode","required":true,"default":null,"description":"Item content"},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class"},"href":{"type":"string","required":false,"default":null,"description":"URL for a plain-<a> breadcrumb item.\nFor routed links (next/link etc.), use `asChild` instead."},"onClick":{"type":"((e: MouseEvent<HTMLAnchorElement, MouseEvent>) => void)","required":false,"default":null,"description":"Click handler for custom navigation (ignored when `asChild`)"}},"description":"Individual item within a Breadcrumb navigation. Can be a link (plain `<a>` via `href`, or routed via `asChild`), or plain text (when active). @example // Plain <a> link <BreadcrumbItem href=\"/home\">Home</BreadcrumbItem> // Active (current page, not a link) <BreadcrumbItem active>Current</BreadcrumbItem> @example // next/link integration via asChild import Link from 'next/link' <BreadcrumbItem asChild>   <Link href=\"/team\">Team</Link> </BreadcrumbItem>","examples":[],"composes":null,"appliesClassNames":null},"Button":{"kind":"component","category":"Core & Form","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":true,"ref":"HTMLButtonElement","subpath":"./components/Button","extends":["HTMLAttributes<HTMLButtonElement>","RefAttributes<HTMLButtonElement>"],"deprecated":null,"props":{"asChild":{"type":"boolean","required":false,"default":"false","description":"Render as the single child element, merging button props onto it.\nUseful for integrating with routing libraries like next/link.\n\n`leftIcon` / `rightIcon` ARE supported when `asChild=true` (#380):\nthe Button composes them with the child's own content so a\nlink-button like `<Button asChild leftIcon={<Arrow />}><Link>Go</Link></Button>`\nrenders `<a class=\"…btn\"><Arrow />Go</a>`.\n\n`loading` is still ignored under `asChild` — a routing element has\nno sensible \"loading\" semantic; if you need the spinner, render the\nreal `<Button>` (no `asChild`) and handle navigation in `onClick`."},"fullWidth":{"type":"boolean","required":false,"default":"false","description":"Make button take full width of container"},"leftIcon":{"type":"ReactNode","required":false,"default":null,"description":"Icon to display before the button text"},"loading":{"type":"boolean","required":false,"default":"false","description":"Show loading spinner and disable interactions"},"rightIcon":{"type":"ReactNode","required":false,"default":null,"description":"Icon to display after the button text"},"size":{"type":"\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"","required":false,"default":"'md'","description":"Size of the button"},"variant":{"type":"\"link\" | \"danger\" | \"primary\" | \"secondary\" | \"outline\" | \"ghost\"","required":false,"default":"'primary'","description":"Visual style variant"}},"description":"A versatile button component with multiple variants, sizes, and states. Features subtle ripple effects and smooth animations. When `asChild` is true, the button delegates rendering to a single React element child (e.g. `<Link>`), merging button styling onto it. This enables `next/link` and other routing libs to integrate without invalid `<a><button>` nesting. @example <Button variant=\"primary\" size=\"md\">Click me</Button> <Button variant=\"outline\" leftIcon={<Search />}>With Icon</Button> <Button loading>Loading...</Button> @example // With next/link import Link from 'next/link' <Button asChild","examples":[{"name":"Primary action","code":"<Button variant=\"primary\">Save</Button>"},{"name":"Loading state","code":"<Button variant=\"primary\" loading>Saving…</Button>"}],"composes":{"leftIcon":{"accepts":"Icon","as":"ReactNode"},"rightIcon":{"accepts":"Icon","as":"ReactNode"}},"appliesClassNames":null},"Byline":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":"HTMLParagraphElement","subpath":"./components/ArticleCard","extends":["HTMLAttributes<HTMLParagraphElement>","RefAttributes<HTMLParagraphElement>"],"deprecated":null,"props":{"date":{"type":"string","required":false,"default":null,"description":"Publication or update date. Optional."},"name":{"type":"string","required":true,"default":null,"description":"Author name(s). Required — every byline credits a writer."},"separator":{"type":"string","required":false,"default":"'·'","description":"Override the connector glyph between name and date. Default `·`."}},"description":"Editorial byline primitive — \"By {name} · {date}\" in serif typography. Standalone export: usable inside any layout (article footer, hero credit, etc.) and also composed internally by ArticleCard. @example <Byline name=\"Claude Opus 4.7\" date=\"April 26, 2026\" />","examples":[],"composes":null,"appliesClassNames":null},"Calendar":{"kind":"component","category":"Core & Form","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":null,"subpath":"./components/DatePicker","extends":["HTMLAttributes<HTMLDivElement>"],"deprecated":null,"props":{"className":{"type":"string","required":false,"default":null,"description":"Extra class on the root (the visual root — the `role=\"application\"` div)."},"defaultValue":{"type":"DateValue","required":false,"default":null,"description":"Initial selected date (uncontrolled)."},"disabled":{"type":"boolean","required":false,"default":"false","description":"Whole-component disabled. No interaction; all cells non-clickable."},"label":{"type":"string","required":false,"default":"Choose a date","description":"Accessible label for the application surface."},"max":{"type":"DateValue","required":false,"default":null,"description":"Disable dates after this."},"min":{"type":"DateValue","required":false,"default":null,"description":"Disable dates before this."},"onChange":{"type":"((date: Date) => void)","required":false,"default":null,"description":"Selection callback. Fires with a Date at midnight local time."},"value":{"type":"DateValue","required":false,"default":null,"description":"Selected date (controlled)."}},"description":"Calendar — standalone month-grid date picker (#312). Sprint 56 — third commit of the DatePicker family. Builds on the shipped foundation:   - `DateDisplay` (v0.34.0) for read-only formatted dates   - `dateUtils` (Sprint 55) for the local-timezone date math, the     Monday-first-day rule, and `buildMonthGrid` returning the     42-cell 6×7 grid that keeps the calendar's vertical size stable     across months What it is ---------- The bare inline calendar — no input, no popover. A consumer who needs a calendar surface (booking widget, range picker bottom-half, inline date filter) gets the grid +","examples":[],"composes":null,"appliesClassNames":null},"Callout":{"kind":"component","category":"Feedback & Status","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":null,"subpath":"./components/Callout","extends":["HTMLAttributes"],"deprecated":null,"props":{"accent":{"type":"CalloutAccent","required":false,"default":"'primary'","description":"Accent color. Drives left-border, background tint, and label/icon ink\nvia the per-accent token mapping in `Callout.module.css`."},"as":{"type":"CalloutElement","required":false,"default":null,"description":"HTML element to render as. Defaults to `div`.\n\nThe `blockquote` use case is critical — Steepen's editorial pull-quotes\nneed it. `aside` is also natural for sidebar annotations."},"children":{"type":"ReactNode","required":true,"default":null,"description":"Callout body content."},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class name(s) appended to the root element."},"icon":{"type":"ReactNode","required":false,"default":null,"description":"Optional leading icon. Renders inline at the start of the callout,\nvertically aligned with the label or first line of content."},"label":{"type":"ReactNode","required":false,"default":null,"description":"Optional uppercase label rendered above the body content (e.g.\n`MY TAKE`, `HEADS UP`). Visually styled with letter-spacing 0.05em,\nfont-weight 600, and font-size 0.6875rem (~11px)."},"ref":{"type":"RefObject<HTMLDivElement | null> | ((instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly)) | ... 7 more ...","required":false,"default":null},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline style overrides (merged with computed styles)."}},"description":"Left-border accent block with optional uppercase label and leading icon. The most-repeated custom layout in the v0.10.0 Steepen audit — three surfaces hand-roll the same pattern (annotation blocks on `SavedItemCard` and `WildLeafCard`, plus pull-quote `<blockquote>` on `LeadStoryCard`). `Divider` (orientation only) and `Alert` (transient + dismiss baggage) don't fit this need, so `Callout` slots in as a pure container primitive. When to use which (#514 — the three are kept distinct by design): - `Callout` — static, in-flow doc/editorial emphasis (this component). - `Alert`   — contextual statu","examples":[],"composes":null,"appliesClassNames":null},"Card":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":"CardRef","subpath":"./components/Card","extends":["HTMLAttributes<HTMLDivElement>"],"deprecated":null,"props":{"actions":{"type":"ReactNode","required":false,"default":null,"description":"Optional actions slot rendered right-aligned in the auto-header."},"asChild":{"type":"boolean","required":false,"default":null,"description":"Render through the single child element (Radix-style `asChild`),\nmerging Card's props + its `.card` root class / variant classes onto\nit instead of emitting the default `<div>` (#424). Use to turn a whole\ncard into a semantic `<article>`, an `<a>`, a `next/link`, etc.\n\nWhen `asChild` is set, Card delegates its entire surface to the single\nchild: the auto-header (`title` / `subtitle` / `actions`) and the\n`loading` skeleton are NOT rendered — the consumer owns the element's\ncontent. Compose those yourself inside the child if needed. `clickable`\nis likewise a no-op under `asChild` (the child element defines its own\ninteraction semantics — use an `<a>` or `<button>` child)."},"clickable":{"type":"true","required":true,"default":null,"description":"Make the card clickable with hover effects"},"fullWidth":{"type":"boolean","required":false,"default":null,"description":"Stretch the card to fill the available cross-axis width.\n\nWhen true the root element gets `width: 100%`, matching the React\nNative `Card` primitive's `fullWidth` semantic (RN uses\n`alignSelf: 'stretch'` + `width: '100%'`). Backported from the RN\npackage for cross-platform prop parity (Refs: #240 remediation).\n\nNote: clickable cards already render as a 100%-wide `<button>` via\nthe `.clickable` CSS class, so `fullWidth` is a no-op there but is\nstill accepted for consistent prop API."},"gradient":{"type":"boolean","required":false,"default":null,"description":"Add a brand-tinted gradient background"},"loading":{"type":"boolean","required":false,"default":null,"description":"Show loading skeleton state"},"padding":{"type":"\"none\" | \"sm\" | \"md\" | \"lg\"","required":false,"default":null,"description":"Padding size for the card"},"subtitle":{"type":"string","required":false,"default":null,"description":"Optional subtitle rendered below the title in muted caption style."},"title":{"type":"string","required":false,"default":null,"description":"Optional card title. When set, Card auto-renders an internal\nCardHeader with this title. Use this OR a manual `<CardHeader>`\ninside children — not both."},"titleAs":{"type":"4 | 1 | 2 | 3 | 5 | 6","required":false,"default":null,"description":"Heading level for the auto-rendered title. Default 3 (h3)."},"variant":{"type":"\"flat\" | \"default\" | \"outlined\" | \"elevated\"","required":false,"default":null,"description":"Visual style variant.\n\n- `default` (default): subtle tinted shadow + hairline border.\n  Gives every card a faint brand depth. New in Sprint 10 (#59).\n- `outlined`: 2px border for stronger separation, no shadow. Border\n  color can be overridden per-instance via the `--card-outline-color`\n  CSS custom property (defaults to `var(--color-border-default)`),\n  enabling semantic-colored outlined cards without a typed prop.\n- `flat`: no shadow, no border. Explicit opt-out when you want the\n  pre-Sprint-10 flat look (e.g. inside a card-on-card composition).\n- `elevated`: strong shadow, raised off the surface."}},"description":"A versatile container component with optional header, body, and footer sections. Supports various visual styles and interactive states. @example <Card variant=\"elevated\">   <CardHeader>Title</CardHeader>   <CardBody>Content goes here</CardBody>   <CardFooter>Footer content</CardFooter> </Card> // Auto-header shortcut for widget cards: <Card title=\"Tasks\" subtitle=\"3 open\" actions={<Button size=\"sm\">New</Button>}>   <CardBody>...</CardBody> </Card>","examples":[{"name":"Composed card","code":"<Card variant=\"elevated\"><CardHeader>Title</CardHeader><CardBody>Body</CardBody></Card>"}],"composes":{"children":{"accepts":"CardHeader | CardBody | CardFooter","as":"ReactNode"}},"appliesClassNames":null},"CardBody":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Card","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"align":{"type":"CardBodyAlign","required":false,"default":null,"description":"Cross-axis alignment. Applied only when `stack` or `inline`\nis true."},"gap":{"type":"CardBodySpacingToken","required":false,"default":null,"description":"Gap between children. Only takes effect when `stack` or `inline`\nis true (or when the consumer manually sets `display: flex`/\n`grid` via `style`/`className`). Maps to a CSS variable —\n`gap=\"sm\"` becomes `var(--spacing-sm)`.\n\nFor custom pixel gaps, pass `style={{ gap: '42px' }}` instead."},"inline":{"type":"boolean","required":false,"default":"false","description":"Render the body as a horizontal flex row. Mutually exclusive\nwith `stack`."},"justify":{"type":"CardBodyJustify","required":false,"default":null,"description":"Main-axis alignment. Applied only when `stack` or `inline`\nis true."},"stack":{"type":"boolean","required":false,"default":"false","description":"Render the body as a vertical flex column. Mutually exclusive\nwith `inline`; if both are set, `stack` wins."}},"description":"Main content section for Card component. Accepts optional layout shortcut props (`stack`, `inline`, `gap`, `align`, `justify`) so consumers can express basic card-body layout without reaching for inline flex CSS or nesting a Stack/ Inline inside the card. When neither `stack` nor `inline` is set, CardBody renders as a plain block — identical to its pre-v0.6.0 behavior. `gap` alone (without `stack` or `inline`) has no visual effect and is intentionally a no-op: we don't implicitly enable flex to avoid surprising consumers. @example <CardBody>   <p>Card content goes here</p> </CardBody> @example","examples":[],"composes":null,"appliesClassNames":null},"CardFooter":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Card","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{},"description":"Footer section for Card component, typically containing actions or metadata. @example <CardFooter>   <Button>Action</Button> </CardFooter>","examples":[],"composes":null,"appliesClassNames":null},"CardHeader":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Card","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"actions":{"type":"ReactNode","required":false,"default":null,"description":"Additional content or actions (e.g., buttons, icons)"}},"description":"Header section for Card component, typically containing a title and optional actions. @example <CardHeader>   <h3>Card Title</h3> </CardHeader>","examples":[],"composes":{"children":{"accepts":"Text | Heading | Inline","as":"ReactNode"}},"appliesClassNames":null},"CardMedia":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Card","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"aspectRatio":{"type":"string","required":false,"default":null,"description":"CSS `aspect-ratio` value for the media container, e.g. `\"16/9\"`,\n`\"1/1\"`, `\"4/3\"`. Forwarded directly to the `aspect-ratio` CSS\nproperty. When omitted, the container takes its intrinsic size from\nits child media (or the consumer's own width/height styles)."},"fallback":{"type":"ReactNode","required":false,"default":null,"description":"Slot rendered when the first media child errors out (`onError`).\nUseful for graceful image-load failure messaging without coupling\nthe consumer to a custom error boundary."},"placeholder":{"type":"ReactNode","required":false,"default":null,"description":"Slot rendered when `children` is `null`/`undefined`. Use this for\nskeleton or shimmer states while the media URL is being resolved.\nFor img-loading state, prefer wrapping `children` in a Suspense\nboundary or relying on `next/image`'s built-in loading behavior —\nCardMedia intentionally does not detect img onLoad timing."},"position":{"type":"CardMediaPosition","required":false,"default":"'top'","description":"Where the media sits inside the Card.\n\n- `top` (default): full-width strip above CardBody. Card stays\n  column-flex.\n- `left` / `right`: fixed-width column beside CardBody. The parent\n  Card flips to row-flex via a `:has()` selector. Pair with `width`\n  to control the media column size."},"width":{"type":"string | number","required":false,"default":null,"description":"Pixel width for the media column. Only meaningful for\n`position=\"left\" | \"right\"`. Defaults to the natural size of the\nmedia child when unset. Numeric values are emitted as `${width}px`."}},"description":"Image / video media slot for Card composition. Eliminates the `position: relative; overflow: hidden; border-radius;` + `<img>` + `object-fit: cover` boilerplate that previously lived inside FeedItemCard, feed/BaseCard, NewsItemCard, and newsroom/LeadStoryCard. Inherits Card's `border-radius` and clips children automatically. When `position=\"left\"` or `position=\"right\"`, the parent Card flips to row layout via a `:has()` rule in CardMedia.module.css so consumers don't have to override Card's flex direction themselves. Sprint 17 (#86 / v0.11.0). @example // Top-positioned media (default) — spans","examples":[],"composes":null,"appliesClassNames":null},"CardTitle":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":"HTMLHeadingElement","subpath":"./components/Card","extends":["HTMLAttributes<HTMLHeadingElement>","RefAttributes<HTMLHeadingElement>"],"deprecated":null,"props":{"as":{"type":"4 | 1 | 2 | 3 | 5 | 6","required":false,"default":"3","description":"Heading semantic level — h1..h6. Default h3."},"children":{"type":"ReactNode","required":false,"default":null,"description":"Heading content"},"className":{"type":"string","required":false,"default":null,"description":"Optional extra class name"},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Optional inline style override"}},"description":"A small semantic heading sized for card widget titles (16px / weight 600). Wraps the design system `Heading` so it remains an accessible h-element while matching the standard widget-title visual rhythm. @example <CardTitle>Tasks</CardTitle> <CardTitle as={2}>Dashboard</CardTitle>","examples":[],"composes":null,"appliesClassNames":null},"Center":{"kind":"component","category":"Layout Primitives","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":"HTMLElement","subpath":"./components/Center","extends":["HTMLAttributes<HTMLElement>","RefAttributes<HTMLElement>"],"deprecated":null,"props":{"as":{"type":"CenterElement","required":false,"default":"'div'","description":"HTML element to render as. Defaults to `'div'`."},"children":{"type":"ReactNode","required":false,"default":null,"description":"Centered content."},"inline":{"type":"boolean","required":false,"default":"false","description":"Render with `inline-flex` instead of `flex` (inline-block context)."}},"description":"Layout primitive that centers its children both horizontally and vertically. A trivial flex container; mostly here for declarative readability so `<Center>` reads at a glance. @example <Center inline>   <Spinner /> </Center> <Center as=\"section\">   <EmptyState title=\"No items\" /> </Center>","examples":[],"composes":null,"appliesClassNames":null},"Chart":{"kind":"component","category":"Data Visualization","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":null,"subpath":"./components/Chart","extends":["HTMLAttributes"],"deprecated":null,"props":{"aspectRatio":{"type":"number","required":false,"default":null},"data":{"type":"ChartDataPoint[]","required":true,"default":null},"description":{"type":"string","required":false,"default":null},"empty":{"type":"boolean","required":false,"default":"false"},"error":{"type":"string","required":false,"default":null},"height":{"type":"string | number","required":false,"default":"300"},"loading":{"type":"boolean","required":false,"default":"false"},"title":{"type":"string","required":false,"default":null,"description":"Visible / data-table caption text. Note this also satisfies the native\n`title` attribute from `HTMLAttributes<HTMLDivElement>` (both are `string`)."}},"description":"Base wrapper component for all charts providing common functionality: - Loading, empty, and error states - Brand-themed styling - Responsive container - Accessibility support with hidden data table @example <Chart data={data} title=\"Sales Data\" loading={isLoading}>   <RechartsLineChart>...</RechartsLineChart> </Chart> @remarks *SSR / Hydration Note** The hidden accessibility data-table renders the raw `data` rows as text. If your `data` prop is derived from a non-deterministic source (e.g. `Math.random()`, `Date.now()`, `new Date()`), the server and client will generate different values and Re","examples":[],"composes":null,"appliesClassNames":null},"Chat":{"kind":"component","category":"Communication","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Chat","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class"},"isLoading":{"type":"boolean","required":false,"default":"false","description":"Show loading state"},"loadingState":{"type":"\"thinking\" | \"researching\" | \"writing\"","required":false,"default":"'thinking'","description":"Type of loading state to display"},"messages":{"type":"Message[]","required":true,"default":null,"description":"Array of messages to display"},"onSendMessage":{"type":"(content: string) => void","required":true,"default":null,"description":"Callback when user sends a message"},"placeholder":{"type":"string","required":false,"default":"Type a message...","description":"Placeholder text for input"},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline style overrides merged onto the root element."},"title":{"type":"string","required":false,"default":"'Chat'","description":"Chat title shown in header"},"toolingSlot":{"type":"ReactNode","required":false,"default":null,"description":"Optional slot for app-specific controls (mode toggles, settings, etc.)"}},"description":"","examples":[],"composes":{"children":{"accepts":"ChatMessage | ChatThinkingIndicator | ChatInput","as":"ReactNode"}},"appliesClassNames":null},"ChatInput":{"kind":"component","category":"Communication","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Chat","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class"},"isLoading":{"type":"boolean","required":false,"default":"false","description":"Disable input when loading"},"maxHeight":{"type":"string","required":false,"default":"'200px'","description":"Maximum height for textarea"},"onSend":{"type":"(message: string) => void","required":true,"default":null,"description":"Callback when message is sent"},"placeholder":{"type":"string","required":false,"default":"Type a message...","description":"Placeholder text"}},"description":"","examples":[],"composes":null,"appliesClassNames":null},"ChatMessage":{"kind":"component","category":"Communication","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Chat","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class"},"message":{"type":"Message","required":true,"default":null,"description":"Message data"}},"description":"","examples":[],"composes":null,"appliesClassNames":null},"ChatThinkingIndicator":{"kind":"component","category":"Communication","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Chat","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class"},"state":{"type":"\"thinking\" | \"researching\" | \"writing\"","required":true,"default":null,"description":"Current AI processing state"}},"description":"","examples":[],"composes":null,"appliesClassNames":null},"Checkbox":{"kind":"component","category":"Core & Form","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLInputElement","subpath":"./components/Checkbox","extends":["HTMLAttributes<HTMLInputElement>","RefAttributes<HTMLInputElement>"],"deprecated":null,"props":{"checked":{"type":"boolean","required":false,"default":null,"description":"Controlled checked state"},"containerClassName":{"type":"string","required":false,"default":null,"description":"Container className for styling wrapper"},"defaultChecked":{"type":"boolean","required":false,"default":null,"description":"Default checked state for uncontrolled mode"},"error":{"type":"string","required":false,"default":null,"description":"Error message - when provided, checkbox enters error state"},"indeterminate":{"type":"boolean","required":false,"default":"false","description":"Indeterminate state (for partial selection in groups)"},"label":{"type":"string","required":false,"default":null,"description":"Label text displayed next to checkbox"},"onChange":{"type":"((checked: boolean) => void)","required":false,"default":null,"description":"Callback when checkbox state changes"}},"description":"A flexible checkbox component with label, error states, and indeterminate support. Features a brand-themed checkmark animation and full keyboard accessibility. @example <Checkbox label=\"Accept terms\" /> <Checkbox checked={checked} onChange={setChecked} /> <Checkbox indeterminate label=\"Select all\" />","examples":[],"composes":null,"appliesClassNames":null},"Chip":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":"HTMLButtonElement","subpath":"./components/Chip","extends":["HTMLAttributes<HTMLButtonElement>","RefAttributes<HTMLButtonElement>"],"deprecated":null,"props":{"asChild":{"type":"boolean","required":false,"default":"false","description":"Render as the single child element, merging Chip styling onto it\n(Layer-7 composition, #424). Use to render a chip as an `<a>` (e.g. a\nfilter that navigates) without nesting interactive elements. The chip's\ninner structure (icons, label, count) is composed INTO the child, and\n`aria-pressed` still reflects `selected`."},"count":{"type":"number","required":false,"default":null,"description":"Optional count rendered after the label as a parenthesized number,\ne.g. `Failed (42)`. Useful for filter chips that surface result\ncounts without requiring a second component."},"leftIcon":{"type":"ReactNode","required":false,"default":null,"description":"Optional leading icon rendered before the label. Pass a\nlucide-react element (or any ReactNode). Sized to 14px (sm) or\n16px (md) automatically."},"rightIcon":{"type":"ReactNode","required":false,"default":null,"description":"Optional trailing icon rendered after the label and count. Pass a\nlucide-react element (or any ReactNode). Sized to 14px (sm) or\n16px (md) automatically.\n\nPassive slot — symmetric with `leftIcon`. There is intentionally no\n`onRightIconClick` callback; the chip's `onClick` covers the whole\nsurface. If a consumer needs an actionable right-icon (e.g. a\ndismiss button that fires independently of the toggle), compose a\nseparate interactive element next to the chip rather than nesting\nan interactive child inside the button. See #112."},"selected":{"type":"boolean","required":false,"default":"false","description":"Whether the chip is currently selected (toggled \"on\"). Drives the\ntinted-background visual treatment and `aria-pressed` value."},"size":{"type":"\"sm\" | \"md\"","required":false,"default":"'md'","description":"Visual size of the chip.\n- `sm`: 24px min-height, 12px font, 14px icon\n- `md` (default): 32px min-height, 14px font, 16px icon"}},"description":"Interactive, multi-select toggle chip for filter panels and pill-style filtering surfaces. Distinct from neighboring primitives: - **`SegmentedControl`** is single-select (one option at a time).   `Chip` is multi-select — each chip carries its own `selected` state. - **`Badge`** is non-interactive (renders as `<span>`). `Chip` renders   as a real `<button type=\"button\">` with `aria-pressed` toggle   semantics and native keyboard support. - **`Button`** is too heavy visually for a filter pill. Surfaced in the CAMI DS recomposition audit (lando-labs/cami-app#565). Two surfaces hand-rolled this p","examples":[],"composes":null,"appliesClassNames":null},"Code":{"kind":"component","category":"Typography","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":"HTMLElement","subpath":"./components/Code","extends":["HTMLAttributes<HTMLElement>","RefAttributes<HTMLElement>"],"deprecated":null,"props":{"asChild":{"type":"boolean","required":false,"default":"false","description":"Render as the single child element, merging Code styling onto it\n(Layer-7 composition, #424). The mono/tint `styles.code` class lands\non the rendered child."},"children":{"type":"ReactNode","required":true,"default":null,"description":"Inline code content."}},"description":"Code Component (inline variant) Renders an inline `<code>` element styled with the design system's mono font and a subtle background tint. For multi-line / syntax-highlighted blocks, use `<CodeBlock>` instead. @example <Text>Run <Code>npm install</Code> to get started.</Text> @example // Layer-7 composition (#424): render as your own element, keeping the // Code styling. Useful when the child carries its own semantics. <Code asChild><a href=\"/api\">GET /api</a></Code>","examples":[],"composes":null,"appliesClassNames":null},"CodeBlock":{"kind":"component","category":"Content Display","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/CodeBlock","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class merged onto the outermost `.sizer` wrapper (the\nelement that also receives the forwarded `ref`)."},"code":{"type":"string","required":true,"default":null,"description":"The code content to display"},"highlightLines":{"type":"number[]","required":false,"default":"'[]'","description":"Array of line numbers to highlight (1-indexed)"},"language":{"type":"string","required":false,"default":"'typescript'","description":"Programming language for syntax highlighting"},"maxHeight":{"type":"string","required":false,"default":null,"description":"Maximum height with scroll overflow"},"showLineNumbers":{"type":"boolean","required":false,"default":"false","description":"Show line numbers on the left"},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline styles applied to the outermost `.sizer` wrapper. The component\nsets no inline style on that element (the `maxHeight` prop styles an\ninner scroll region, not the wrapper), so consumer keys apply directly.\n(Inherited type from `HTMLAttributes`; restated here for docs.)"},"title":{"type":"string","required":false,"default":null,"description":"Optional filename or title to display"}},"description":"Display syntax-highlighted code with copy functionality and optional line numbers. Features brand-themed styling and smooth interactions. @example <CodeBlock code={sourceCode} language=\"typescript\" showLineNumbers /> <CodeBlock code={snippet} title=\"Example.tsx\" highlightLines={[2, 5]} />","examples":[],"composes":null,"appliesClassNames":null},"Collapsible":{"kind":"component","category":"Overlay & Interactive","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Collapsible","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"children":{"type":"ReactNode","required":true,"default":null,"description":"Content shown/hidden by the collapsible."},"className":{"type":"string","required":false,"default":null,"description":"Container className."},"defaultOpen":{"type":"boolean","required":false,"default":"false","description":"Uncontrolled initial open state. Ignored when `open` is provided."},"onOpenChange":{"type":"((open: boolean) => void)","required":false,"default":null,"description":"Notified whenever the open state changes."},"open":{"type":"boolean","required":false,"default":null,"description":"Controlled open state."}},"description":"Standalone animated show/hide for a region of content. Distinct from `<Accordion>`, which manages a group of sibling items in a single shared expansion state — use Collapsible for one-off \"click to expand\" surfaces (filter panels, settings sub-sections, advanced options). Animation mirrors `AccordionItem`: a measured height transition that the user's `prefers-reduced-motion` setting suppresses to an instant toggle. Supports controlled (`open` + `onOpenChange`) and uncontrolled (`defaultOpen`) usage. @example <Collapsible defaultOpen>   <p>Body content shown initially.</p> </Collapsible> <Colla","examples":[],"composes":null,"appliesClassNames":null},"ColorSwatch":{"kind":"component","category":"Core & Form","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/ColorSwatch","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"aria-label":{"type":"string","required":false,"default":null,"description":"Accessible label for the swatch chip itself. Defaults to\n`\"Color preview: <color>\"` so the swatch is announced sensibly\nto assistive tech without forcing the consumer to think about\na11y on every usage. Pass an empty string to suppress."},"color":{"type":"string","required":true,"default":null,"description":"The color to preview. Any CSS color value: hex (`#1B7FA8`),\nrgb/rgba, hsl, oklch, or a CSS custom property\n(`var(--color-primary)`). Pass `'transparent'` for an \"unset\"\nplaceholder."},"label":{"type":"ReactNode","required":false,"default":null,"description":"Optional caption rendered below the swatch (small caption-style\ntext). Useful for swatch grids that label each chip. When set,\nthe rendered element becomes a column-flex stack of swatch + label."},"shape":{"type":"ColorSwatchShape","required":false,"default":"'square'","description":"Shape: `square` (default, with subtle radius) or `circle`."},"size":{"type":"ColorSwatchSize","required":false,"default":"'md'","description":"Swatch size. Named sizes map to design-token pixel values:\n  - `sm` → 16px\n  - `md` → 24px (default)\n  - `lg` → 40px\nA number is treated as a literal pixel size for one-off cases\n(theme-lab uses 60px swatches in its scale grid)."}},"description":"ColorSwatch Component (#379) Small accessible color-preview block. Used to render brand/theme/semantic colors with an optional caption — replaces the hand-rolled swatch divs scattered through landolabs-lab's theme-lab pages (theme-lab.tsx:184, 196). The swatch itself is decorative; the `aria-label` (\"color preview\") carries the semantic. `label` is rendered visibly below the swatch (caption-style) and is NOT an alternate label — it complements the aria-label rather than replacing it. Color values are passed through verbatim to `background-color`. The component does NOT resolve token paths (`pr","examples":[],"composes":null,"appliesClassNames":null},"Combobox":{"kind":"component","category":"Core & Form","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLInputElement","subpath":"./components/Combobox","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLInputElement>"],"deprecated":null,"props":{"className":{"type":"string","required":false,"default":null,"description":"Extra class on the outer container."},"defaultValue":{"type":"string","required":false,"default":null,"description":"Initial uncontrolled selection. Ignored when `value` is set."},"disabled":{"type":"boolean","required":false,"default":"false","description":"Disable all interaction."},"emptyMessage":{"type":"string","required":false,"default":"No results","description":"Message rendered when the filtered list is empty. Defaults to \"No results\"."},"id":{"type":"string","required":false,"default":null,"description":"Stable id for the input — auto-generated if omitted."},"label":{"type":"string","required":false,"default":null,"description":"Label rendered above the input."},"loading":{"type":"boolean","required":false,"default":"false","description":"Show a spinner in the listbox area. Wire this to the consumer's async\nfetch state in async (`onSearch`) mode."},"name":{"type":"string","required":false,"default":null,"description":"HTML form field name. When provided, a hidden `<input>` is rendered so\n`FormData` / Server Actions receive the selected value. Mirrors\n`Select`'s contract."},"onChange":{"type":"((value: string) => void)","required":false,"default":null,"description":"Notified when the user picks an option, or `undefined` when the selection\nis cleared (user erases the input text). Distinct from \"selected an\noption whose value happens to be empty string.\""},"onSearch":{"type":"((query: string) => void)","required":false,"default":null,"description":"Async filter callback. When provided, we fire on every keystroke and\ndelegate filtering to the consumer — they manage debounce + fetch and\nre-render `options` with the result. When absent, we sync-filter the\n`options` prop by case-insensitive substring match on `label`."},"options":{"type":"ComboboxOption[]","required":true,"default":null,"description":"Available options. In async mode, this is the consumer-filtered subset."},"placeholder":{"type":"string","required":false,"default":"'Search...'","description":"Placeholder shown when nothing is selected and the input is empty."},"size":{"type":"ComboboxSize","required":false,"default":"'md'","description":"Visual size scale. Default: \"md\"."},"value":{"type":"string","required":false,"default":null,"description":"Controlled selection. Pass `undefined` for \"nothing selected.\""}},"description":"Combobox — searchable single-select with type-to-filter + ARIA combobox pattern (#310). Why this exists --------------- The existing `<Select>` is a *button-driven* picker — clicking the trigger opens a listbox, an optional `searchable` mode renders a secondary text input INSIDE the dropdown. That's fine for short lists, but every modern app has lists > 20 items where the type-to-filter affordance needs to live on the trigger itself, not behind a click. shadcn, Mantine, Chakra, MUI all ship this as a distinct primitive; Lando did not — until now. Architectural choice — Portal + `usePortalPosit","examples":[],"composes":null,"appliesClassNames":null},"CommandPalette":{"kind":"component","category":"Overlay & Interactive","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":null,"subpath":"./components/CommandPalette","extends":["HTMLAttributes<HTMLDivElement>"],"deprecated":null,"props":{"aria-label":{"type":"string","required":false,"default":"'Commands'","description":"Accessible label for the listbox. Default: \"Commands\"."},"children":{"type":"ReactNode","required":true,"default":null,"description":"`<CommandPaletteGroup>` and/or `<CommandPaletteItem>` children."},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class merged onto the palette's `.root` container."},"emptyState":{"type":"ReactNode","required":false,"default":null,"description":"Node rendered when the filter matches zero items. Default: a muted\n\"No results\" line. Pass `null` to render nothing."},"onOpenChange":{"type":"(open: boolean) => void","required":true,"default":null,"description":"Notified when the palette wants to open or close (Esc, backdrop click)."},"onValueChange":{"type":"((value: string) => void)","required":false,"default":null,"description":"Notified on every keystroke into the search input."},"open":{"type":"boolean","required":true,"default":null,"description":"Whether the palette is open."},"placeholder":{"type":"string","required":false,"default":"Type a command or search…","description":"Placeholder for the search input. Default: \"Type a command or search…\"."},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline styles applied to the palette's `.root` container. The component\nsets no inline style there, so consumer keys apply directly.\n(Inherited type from `HTMLAttributes`; restated here for docs.)"},"value":{"type":"string","required":false,"default":null,"description":"Controlled filter value. If omitted, the palette manages an internal\nempty-string-initial value. Useful when the consumer wants async / fuzzy\nmatching — in that mode they render only the items they want shown."}},"description":"CommandPalette — first-class ⌘K palette primitive (#378). Background ---------- landolabs-lab hand-rolled a command palette on top of DS `Modal` + `Input`, but everything else (listbox shell, grouped categories, item layout, keyboard navigation, ARIA wiring) was custom — and the items were marked `role=\"option\"` with no `role=\"listbox\"` ancestor. That is **invalid ARIA**: an option without a listbox/menu owner has no defined semantics, so screen readers either drop the role or announce the items as plain content. Several other consumer apps were on track to copy the same shape. This primitive","examples":[],"composes":{"children":{"accepts":"CommandPaletteGroup | CommandPaletteItem","as":"ReactNode"}},"appliesClassNames":null},"CommandPaletteGroup":{"kind":"component","category":"Overlay & Interactive","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":null,"subpath":"./components/CommandPalette","extends":["HTMLAttributes<HTMLDivElement>"],"deprecated":null,"props":{"children":{"type":"ReactNode","required":true,"default":null,"description":"`<CommandPaletteItem>` children."},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class merged onto the `role=\"group\"` wrapper."},"heading":{"type":"string","required":true,"default":null,"description":"Heading rendered above the group; also wires `aria-labelledby`."},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline styles applied to the `role=\"group\"` wrapper. The component sets\nno inline style there, so consumer keys apply directly.\n(Inherited type from `HTMLAttributes`; restated here for docs.)"}},"description":"CommandPalette — first-class ⌘K palette primitive (#378). Background ---------- landolabs-lab hand-rolled a command palette on top of DS `Modal` + `Input`, but everything else (listbox shell, grouped categories, item layout, keyboard navigation, ARIA wiring) was custom — and the items were marked `role=\"option\"` with no `role=\"listbox\"` ancestor. That is **invalid ARIA**: an option without a listbox/menu owner has no defined semantics, so screen readers either drop the role or announce the items as plain content. Several other consumer apps were on track to copy the same shape. This primitive","examples":[],"composes":null,"appliesClassNames":null},"CommandPaletteItem":{"kind":"component","category":"Overlay & Interactive","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":null,"subpath":"./components/CommandPalette","extends":["HTMLAttributes<HTMLDivElement>"],"deprecated":null,"props":{"children":{"type":"ReactNode","required":true,"default":null,"description":"Primary label text."},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class merged onto the `role=\"option\"` element, after the\ncomponent's own item / active / disabled classes."},"description":{"type":"ReactNode","required":false,"default":null,"description":"Secondary description, rendered under the label."},"disabled":{"type":"boolean","required":false,"default":"false","description":"Disable selection. The item still renders but is not keyboard-reachable."},"icon":{"type":"ReactNode","required":false,"default":null,"description":"Leading icon."},"id":{"type":"string","required":false,"default":null,"description":"Stable id for `aria-activedescendant`. Auto-generated if omitted."},"onSelect":{"type":"() => void","required":true,"default":null,"description":"Action invoked on Enter / click."},"searchValue":{"type":"string","required":false,"default":null,"description":"Filter key. If provided, the built-in filter matches against THIS string;\notherwise it matches against the item's text children (best-effort,\nextracted via `String(children)`). Provide this when the label is non-text\n(e.g. wrapped in a Heading) or when you want to match against synonyms."},"shortcut":{"type":"ReactNode","required":false,"default":null,"description":"Right-aligned shortcut hint. Typically a `<Kbd shortcut=\"…\" />`, but any\nnode is accepted (a Badge, plain text, etc)."},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline styles applied to the `role=\"option\"` element. The component sets\nno inline style there, so consumer keys apply directly.\n(Inherited type from `HTMLAttributes`; restated here for docs.)"}},"description":"CommandPalette — first-class ⌘K palette primitive (#378). Background ---------- landolabs-lab hand-rolled a command palette on top of DS `Modal` + `Input`, but everything else (listbox shell, grouped categories, item layout, keyboard navigation, ARIA wiring) was custom — and the items were marked `role=\"option\"` with no `role=\"listbox\"` ancestor. That is **invalid ARIA**: an option without a listbox/menu owner has no defined semantics, so screen readers either drop the role or announce the items as plain content. Several other consumer apps were on track to copy the same shape. This primitive","examples":[],"composes":null,"appliesClassNames":null},"Container":{"kind":"component","category":"Layout Primitives","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":null,"subpath":"./components/Container","extends":["HTMLAttributes"],"deprecated":null,"props":{"as":{"type":"ContainerElement","required":false,"default":null,"description":"HTML element to render as"},"centered":{"type":"boolean","required":false,"default":null,"description":"Center the container horizontally"},"children":{"type":"ReactNode","required":true,"default":null,"description":"Content to render"},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class"},"padding":{"type":"boolean","required":false,"default":null,"description":"Add responsive padding"},"ref":{"type":"RefObject<HTMLDivElement | null> | ((instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | null","required":false,"default":null},"size":{"type":"\"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\"","required":false,"default":null,"description":"Maximum width of container"},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline styles"}},"description":"Responsive container with max-width and padding control. Centers content and provides consistent spacing. @example <Container size=\"lg\">   <h1>Welcome</h1>   <p>Content goes here</p> </Container> <Container size=\"full\" padding={false} as=\"section\">   Full-width content without padding </Container>","examples":[],"composes":null,"appliesClassNames":null},"DataTable":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":null,"subpath":"./components/DataTable","extends":["HTMLAttributes<HTMLDivElement>"],"deprecated":null,"props":{"className":{"type":"string","required":false,"default":null,"description":"Extra class on the outer wrapper."},"columns":{"type":"DataTableColumn<T>[]","required":true,"default":null,"description":"Column definitions."},"data":{"type":"T[]","required":true,"default":null,"description":"Array of rows."},"defaultPage":{"type":"number","required":false,"default":"1","description":"Uncontrolled initial page (1-indexed)."},"defaultSelectedRows":{"type":"T[]","required":false,"default":null,"description":"Uncontrolled initial selection."},"defaultSort":{"type":"DataTableSort | null","required":false,"default":"'null'","description":"Uncontrolled initial sort."},"emptyMessage":{"type":"ReactNode","required":false,"default":"No data","description":"Message shown when `data` is empty. Defaults to \"No data\"."},"getRowId":{"type":"((row: T) => string | number)","required":false,"default":null,"description":"Optional row-id accessor. Used to dedupe selection across re-renders and to\nderive checkbox `aria-label`s. If omitted, selection is tracked by row\nobject identity (`===`) — fine for stable data, but selection clears when\n`data` is reconstructed each render."},"onPageChange":{"type":"((page: number) => void)","required":false,"default":null,"description":"Called when the user navigates to a different page."},"onSelectionChange":{"type":"((rows: T[]) => void)","required":false,"default":null,"description":"Called when the selection set changes."},"onSortChange":{"type":"((sort: DataTableSort | null) => void)","required":false,"default":null,"description":"Called when the sort cycles. Receives `null` when sort is cleared."},"page":{"type":"number","required":false,"default":null,"description":"Controlled current page (1-indexed)."},"pageSize":{"type":"number","required":false,"default":null,"description":"Page size. Omit to disable pagination (renders all rows)."},"selectable":{"type":"boolean","required":false,"default":"false","description":"Enable per-row checkboxes + a header select-all."},"selectedRows":{"type":"T[]","required":false,"default":null,"description":"Controlled selected rows. Identity comparison via `getRowId` (or `===` if omitted)."},"size":{"type":"\"sm\" | \"md\" | \"lg\"","required":false,"default":"'md'","description":"Compact/comfortable/spacious cell padding. Defaults to `'md'`."},"sort":{"type":"DataTableSort | null","required":false,"default":null,"description":"Controlled sort. When set, `defaultSort` is ignored and `onSortChange` is required to mutate."},"stickyHeader":{"type":"boolean","required":false,"default":"false","description":"Pin the header row to the top of the scroll viewport."}},"description":"A higher-level data table that adds sort + pagination + row selection on top of the lower-level `<Table>` primitive. Composes — does NOT duplicate — the existing chrome. Sprint 55 (#311) — Lane A of v0.34.0. Scope is deliberately MINIMAL VIABLE for v1. The following are NOT built and are tracked as follow-ups (see `DataTable/README` or the issue):   - Virtualization   - Column resize / reorder   - Multi-column sort   - Expandable rows   - Column groups / nested headers   - Cell editing   - Server-side data (consumer can simulate by passing fresh `data`) For zero-JS read-only rendering on the s","examples":[],"composes":null,"appliesClassNames":null},"DataTableStatic":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":null,"subpath":"./components/DataTable","extends":["HTMLAttributes<HTMLDivElement>"],"deprecated":null,"props":{"className":{"type":"string","required":false,"default":null,"description":"Extra class on the outer wrapper."},"columns":{"type":"DataTableColumn<T>[]","required":true,"default":null,"description":"Column definitions (shared shape with `DataTable`)."},"data":{"type":"T[]","required":true,"default":null,"description":"Array of rows."},"emptyMessage":{"type":"ReactNode","required":false,"default":"No data","description":"Message shown when `data` is empty. Defaults to \"No data\"."},"size":{"type":"\"sm\" | \"md\" | \"lg\"","required":false,"default":"'md'","description":"Compact / comfortable / spacious cell padding. Defaults to `'md'`."}},"description":"DataTable.Static Component Read-only, SSR-safe variant of {@link DataTable}. NO interactivity — no sort, no pagination, no selection. Just renders rows. Ships zero client JS, so it's the right choice for dashboards that have N read-only tables plus a single interactive `<DataTable>`. Shares the same visual surface and the same `DataTableColumn<T>` shape as `<DataTable>`, so consumers can swap between them with no API churn. Sprint 55 (#311) — Lane A of v0.34.0. @example   <DataTable.Static     data={rows}     columns={[       { key: 'name', header: 'Name' },       { key: 'role', header: 'Role'","examples":[],"composes":null,"appliesClassNames":null},"DateDisplay":{"kind":"component","category":"Core & Form","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":"HTMLElement","subpath":"./components/DatePicker","extends":["HTMLAttributes<HTMLElement>","RefAttributes<HTMLElement>"],"deprecated":null,"props":{"as":{"type":"\"time\" | \"span\"","required":false,"default":"'time'","description":"Semantic element. `time` is the right default for actual dates; `span` is\nan escape hatch for editorial uses where `<time>` is too strong a claim\n(e.g. when the date is fictional or part of prose)."},"className":{"type":"string","required":false,"default":null,"description":"Extra class on the rendered element (the visual root)."},"format":{"type":"((date: Date) => string)","required":false,"default":null,"description":"Visible-text formatter. Receives the parsed Date and returns the text to\nrender. Defaults to `(d) => d.toLocaleDateString()`."},"value":{"type":"DateValue","required":true,"default":null,"description":"The date to render. String form must be ISO `yyyy-mm-dd`."}},"description":"DateDisplay — read-only formatted date. Server-safe leaf. Renders a date as text inside a semantic `<time>` element (or `<span>` when the consumer opts in) with a machine-readable `dateTime` attribute in ISO `yyyy-mm-dd` form. Zero client JS, zero hooks, zero browser globals — passes the `'use client'` boundary guard and the RSC smoke test naturally. Sprint 55 (#312) — Lane B of v0.34.0. Format defaults --------------- Without a `format` prop we call `date.toLocaleDateString()` — same as the platform default for `<time>` text. Consumers who want a specific format pass a function (e.g. `(d) =>","examples":[],"composes":null,"appliesClassNames":null},"DatePicker":{"kind":"component","category":"Core & Form","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLInputElement","subpath":"./components/DatePicker","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLInputElement>"],"deprecated":null,"props":{"className":{"type":"string","required":false,"default":null,"description":"Extra class on the visual root (the trigger `.container` — the\nInput-shaped surface carrying the border and focus ring).\n\n#422 — `className` now lands on the trigger container (the visual root),\nnot the outer field `.wrapper`. To style the outer field wrapper (the\nlabel + trigger + footer column) use {@link DatePickerProps.wrapperClassName}."},"clearable":{"type":"boolean","required":false,"default":"true","description":"Allow clear button (×) inside the input when a value is present.\nDefault `true`."},"defaultOpen":{"type":"boolean","required":false,"default":"false","description":"Initial open state (uncontrolled). Default false."},"defaultValue":{"type":"DateValue","required":false,"default":null,"description":"Initial selected date (uncontrolled)."},"disabled":{"type":"boolean","required":false,"default":"false","description":"Whole-component disabled — no popover, no clear."},"error":{"type":"string","required":false,"default":null,"description":"Error text for invalid state. Renders below the input + flips aria-invalid."},"format":{"type":"((date: Date) => string)","required":false,"default":null,"description":"Visible-text formatter for the input. Default `(d) => d.toLocaleDateString()`."},"helperText":{"type":"string","required":false,"default":null,"description":"Helper text under the input (hidden when `error` is set)."},"id":{"type":"string","required":false,"default":null,"description":"Stable id for the input — auto-generated if omitted."},"label":{"type":"string","required":false,"default":null,"description":"Visible label above the input."},"max":{"type":"DateValue","required":false,"default":null,"description":"Disable dates after this. Passes through to the underlying Calendar."},"min":{"type":"DateValue","required":false,"default":null,"description":"Disable dates before this. Passes through to the underlying Calendar."},"name":{"type":"string","required":false,"default":null,"description":"HTML form field name. When provided, a hidden `<input>` is rendered so\n`FormData` / Server Actions receive the selected date in ISO yyyy-mm-dd\nform. Mirrors Combobox / Select."},"onChange":{"type":"((date: Date) => void)","required":false,"default":null,"description":"Selection callback. Fires with the new Date when the user picks a day,\nor `undefined` when the field is cleared via the clear button."},"onOpenChange":{"type":"((open: boolean) => void)","required":false,"default":null,"description":"Open/close callback. Fires for trigger click, day select, Escape, outside click."},"open":{"type":"boolean","required":false,"default":null,"description":"Open state of the calendar popover (controlled)."},"placeholder":{"type":"string","required":false,"default":"Select date","description":"Placeholder when empty. Default \"Select date\"."},"size":{"type":"DatePickerSize","required":false,"default":"'md'","description":"Size — mirrors Input / Combobox. Default \"md\"."},"value":{"type":"DateValue","required":false,"default":null,"description":"Selected date (controlled)."},"wrapperClassName":{"type":"string","required":false,"default":null,"description":"Escape hatch: extra class on the OUTER field `.wrapper` (the flex column\nthat stacks the label, trigger, and helper/error footer). Target it for\nfield-level layout overrides (width, margin, grid placement) that\npreviously rode on `className`."},"wrapperStyle":{"type":"CSSProperties","required":false,"default":null,"description":"Escape hatch: inline style on the outer field `.wrapper`."}},"description":"DatePicker — input + Calendar-anchored popover (#312). Sprint 56 — fourth commit of the DatePicker family. Wraps the shipped `<Calendar>` in an Input-shaped trigger + Portal-rendered dialog panel so consumers get a single-date picker without rolling the popover wiring themselves. What it is ---------- The mainstream date-selection surface — a text input that displays the selected date, click/focus opens a popover-anchored Calendar, picking a day commits the selection and closes the popover. Mirrors the shape every dashboard form needs. What it is NOT (v1 deferrals) ----------------------------","examples":[],"composes":null,"appliesClassNames":null},"DateRangePicker":{"kind":"component","category":"Core & Form","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":null,"subpath":"./components/DatePicker","extends":["HTMLAttributes<HTMLDivElement>"],"deprecated":null,"props":{"className":{"type":"string","required":false,"default":null,"description":"Extra class on the visual root.\n\n#422 — DateRangePicker's top-level render is a Fragment (the trigger row,\na Portal-rendered dialog, and an off-screen live region). The trigger row\nis the inline visual anchor, so `className` / `style` / `...rest` land on\nit. The Portal dialog + live region are detached and unaffected."},"clearable":{"type":"boolean","required":false,"default":"false","description":"Show a clear button when a range is selected."},"defaultOpen":{"type":"boolean","required":false,"default":"false","description":"Initial open state (uncontrolled)."},"defaultValue":{"type":"[Date, Date]","required":false,"default":null,"description":"Initial range (uncontrolled)."},"disabled":{"type":"boolean","required":false,"default":"false","description":"Disable the whole control."},"error":{"type":"string","required":false,"default":null,"description":"Error message (input enters error state)."},"format":{"type":"((range: [Date, Date]) => string)","required":false,"default":null,"description":"Custom formatter for the visible range text. Default `MM/DD/YYYY – MM/DD/YYYY`."},"helperText":{"type":"string","required":false,"default":null,"description":"Helper text under the input."},"label":{"type":"string","required":false,"default":null,"description":"Label rendered above the trigger input."},"max":{"type":"DateValue","required":false,"default":null,"description":"Max selectable date."},"min":{"type":"DateValue","required":false,"default":null,"description":"Min selectable date."},"onChange":{"type":"((range: [Date, Date]) => void)","required":false,"default":null,"description":"Selection callback; `undefined` when cleared."},"onOpenChange":{"type":"((open: boolean) => void)","required":false,"default":null,"description":"Open-state callback."},"open":{"type":"boolean","required":false,"default":null,"description":"Open state of the calendar dialog (controlled)."},"placeholder":{"type":"string","required":false,"default":"Select date range","description":"Placeholder when no range is selected."},"size":{"type":"\"sm\" | \"md\" | \"lg\"","required":false,"default":"'md'","description":"Trigger size — passes through to Input."},"value":{"type":"[Date, Date]","required":false,"default":null,"description":"Selected range (controlled)."}},"description":"DateRangePicker — Portal-anchored two-end calendar (#312). Lane C of Sprint 56 (v0.35.0). Composes the existing pieces:   - `Input` for the formatted-range trigger   - `Portal` + `usePortalPosition` for the floating dialog surface   - `Calendar` (Lane A) for the month grid Architectural choice — Portal + `usePortalPosition`, NOT `<Popover>` -------------------------------------------------------------------- Mirrors the rationale already shipped by Lane B's `<DatePicker>`. Three reasons we lift out of `<Popover>`:  1. Popover clones its `trigger` element and grafts handlers (`onClick`     call","examples":[],"composes":null,"appliesClassNames":null},"DetailCard":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":true,"ref":"HTMLDivElement","subpath":"./components/DetailCard","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"actions":{"type":"ReactNode","required":false,"default":null,"description":"Action buttons in footer"},"asChild":{"type":"boolean","required":false,"default":"false","description":"Render through the single child element (Radix-style `asChild`),\nmerging DetailCard's root class + forwarded props onto it instead of\nemitting the default `<div>` (#424). The DetailCard's structured\ncontent (header / fields / date / footer) renders INSIDE the provided\nchild element, letting consumers pick the root element (e.g.\n`<article>`, `<li>`) while keeping the card content and styling."},"badges":{"type":"ReactNode[]","required":false,"default":"'[]'","description":"Optional badges in header"},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class"},"clickable":{"type":"boolean","required":false,"default":"false","description":"Show clickable state"},"date":{"type":"DetailDate","required":false,"default":null,"description":"Prominent date field"},"description":{"type":"string","required":false,"default":null,"description":"Optional description paragraph"},"fields":{"type":"DetailField[]","required":false,"default":"'[]'","description":"Array of structured fields (label/value pairs)"},"footer":{"type":"ReactNode","required":false,"default":null,"description":"Custom footer content (overrides actions)"},"icon":{"type":"ReactNode","required":false,"default":null,"description":"Optional icon in header"},"onClick":{"type":"(() => void)","required":false,"default":null,"description":"Make the entire card clickable"},"size":{"type":"\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"","required":false,"default":"'md'","description":"Card size - scales all internal spacing, fonts, and margins"},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline styles"},"subtitle":{"type":"string","required":false,"default":null,"description":"Optional subtitle below title"},"title":{"type":"string","required":true,"default":null,"description":"Card title"},"variant":{"type":"\"default\" | \"outlined\" | \"elevated\"","required":false,"default":"'elevated'","description":"Card variant"}},"description":"Generic detailed information card with structured fields. More flexible than TaskCard or ApprovalCard - can represent any detailed entity. Deliberate standalone component (distinct markup/CSS; composes `Card`), not a `Card` recipe — the recipe-vs-component boundary is a recorded decision (#515), with recipe-ification tracked for the future Recipes layer (#415). @example <DetailCard   title=\"Project Milestone\"   subtitle=\"Q4 2024 Release\"   icon={<ProjectIcon />}   badges={[<Badge variant=\"success\">Active</Badge>]}   description=\"Complete feature development and testing phase\"   fields={[     {","examples":[],"composes":null,"appliesClassNames":null},"Divider":{"kind":"component","category":"Layout Primitives","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":"HTMLElement","subpath":"./components/Divider","extends":["HTMLAttributes<HTMLElement>","RefAttributes<HTMLElement>"],"deprecated":null,"props":{"asChild":{"type":"boolean","required":false,"default":"false","description":"Render as the single child element, merging Divider styling onto it\n(Layer-7 composition, #424). Pass a single element as `children`; the\n`styles.divider` classes and the `role`/`aria-orientation` land on it.\nOnly supported for the unlabeled divider (vertical or plain horizontal);\nthe labeled section-break owns a fixed multi-node internal structure."},"children":{"type":"ReactNode","required":false,"default":null,"description":"Child element to render when `asChild` is true. Ignored otherwise — a\nplain Divider renders no children (or its own label structure)."},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class"},"label":{"type":"ReactNode","required":false,"default":null,"description":"Optional label rendered inline with the divider to produce the\nclassic \"line — label — line\" section-break pattern (issue #22).\n\nHorizontal only. When `orientation=\"vertical\"` the label is ignored."},"labelPosition":{"type":"DividerLabelPosition","required":false,"default":"'center'","description":"Position of the label along the divider.\n\nPrefer `start` / `center` / `end`. `left` / `right` are accepted as\naliases for backward compatibility."},"orientation":{"type":"\"horizontal\" | \"vertical\"","required":false,"default":"'horizontal'","description":"Orientation of the divider"},"spacing":{"type":"\"sm\" | \"md\" | \"lg\"","required":false,"default":"'md'","description":"Spacing around the divider"},"variant":{"type":"\"dashed\" | \"dotted\" | \"solid\"","required":false,"default":"'solid'","description":"Visual style variant"}},"description":"Visual separator with optional label and brand-themed styling. Supports horizontal and vertical orientations with various styles. @example <Divider /> <Divider variant=\"dashed\" spacing=\"lg\" /> // Labeled section-break (issue #22) <Divider label=\"Or Continue With\" /> <Divider label=\"Agents\" labelPosition=\"start\" /> <Divider orientation=\"vertical\" /> // Layer-7 composition (#424) + full attribute passthrough (#423) <Divider asChild><hr data-testid=\"rule\" /></Divider> <Divider style={{ borderColor: 'var(--color-primary)' }} data-testid=\"rule\" />","examples":[],"composes":null,"appliesClassNames":null},"DonutChart":{"kind":"component","category":"Data Visualization","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":null,"subpath":"./components/DonutChart","extends":["HTMLAttributes"],"deprecated":null,"props":{"activeIndex":{"type":"number","required":false,"default":null,"description":"Active segment index"},"animationDuration":{"type":"number","required":false,"default":"300"},"aspectRatio":{"type":"number","required":false,"default":null},"centerContent":{"type":"ReactNode","required":false,"default":null,"description":"Content to display in the center of the donut"},"colorScheme":{"type":"ColorScheme","required":false,"default":"'brand'"},"colors":{"type":"string[]","required":false,"default":null},"data":{"type":"ChartDataPoint[]","required":true,"default":null},"dataKey":{"type":"string","required":true,"default":null,"description":"Key for the value data"},"description":{"type":"string","required":false,"default":null},"empty":{"type":"boolean","required":false,"default":null},"error":{"type":"string","required":false,"default":null},"height":{"type":"string | number","required":false,"default":null},"innerRadius":{"type":"number","required":false,"default":"60","description":"Inner radius (donut hole size)"},"interactive":{"type":"boolean","required":false,"default":null},"legendPosition":{"type":"LegendPosition","required":false,"default":null},"loading":{"type":"boolean","required":false,"default":null},"nameKey":{"type":"string","required":true,"default":null,"description":"Key for the label/name data"},"onDataPointClick":{"type":"((data: ChartDataPoint) => void)","required":false,"default":null,"description":"Click handler for individual data points. The payload shape is\nRecharts-defined and varies by chart type; consumers should narrow at\ntheir use site."},"onLegendClick":{"type":"((dataKey: string) => void)","required":false,"default":null},"onSliceClick":{"type":"((data: PieSliceClickData, index: number) => void)","required":false,"default":null,"description":"Callback when slice is clicked"},"outerRadius":{"type":"number","required":false,"default":"80","description":"Outer radius"},"paddingAngle":{"type":"number","required":false,"default":"2","description":"Padding angle between segments"},"showLabels":{"type":"boolean","required":false,"default":"false","description":"Show labels on segments"},"showLegend":{"type":"boolean","required":false,"default":"true"},"showTooltip":{"type":"boolean","required":false,"default":"true"},"title":{"type":"string","required":false,"default":null,"description":"Visible / data-table caption text. Note this also satisfies the native\n`title` attribute from `HTMLAttributes<HTMLDivElement>` (both are `string`)."},"variant":{"type":"\"default\" | \"brand\" | \"gradient\"","required":false,"default":null},"width":{"type":"string | number","required":false,"default":null,"description":"Intended outer width. Forwarded by sub-charts to their Recharts layout;\nthe base `Chart` wrapper itself always renders a 100%-width responsive\ncontainer and does not read this."}},"description":"Donut chart with customizable center content for displaying metrics. Perfect for showing totals, percentages, or key values. @example <DonutChart   data={userData}   dataKey=\"value\"   nameKey=\"name\"   colorScheme=\"teal\"   centerContent={     <div>       <div style={{ fontSize: '2rem', fontWeight: 'bold' }}>900</div>       <div style={{ fontSize: '0.875rem' }}>Total Users</div>     </div>   } />","examples":[],"composes":null,"appliesClassNames":null},"Drawer":{"kind":"component","category":"Overlay & Interactive","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Drawer","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"children":{"type":"ReactNode","required":true,"default":null,"description":"Drawer content"},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class on the drawer root"},"closeOnBackdropClick":{"type":"boolean","required":false,"default":"true","description":"Close drawer when clicking the backdrop (default true)"},"closeOnEscape":{"type":"boolean","required":false,"default":"true","description":"Close drawer when pressing Escape (default true)"},"isOpen":{"type":"boolean","required":true,"default":null,"description":"Whether the drawer is open"},"onClose":{"type":"() => void","required":true,"default":null,"description":"Callback when the drawer should close"},"placement":{"type":"DrawerPlacement","required":false,"default":"'right'","description":"Edge the drawer slides in from.\n- `right` (default): full-height panel pinned to the right edge\n- `left`: full-height panel pinned to the left edge\n- `bottom`: full-width panel pinned to the bottom edge (size controls\n  height, not width)"},"showCloseButton":{"type":"boolean","required":false,"default":"true","description":"Show close button in the header (default true)"},"size":{"type":"DrawerSize","required":false,"default":"'md'","description":"Drawer size. For `right`/`left` placement this is the panel WIDTH; for\n`bottom` placement it is the panel HEIGHT.\n- `sm`: 320px (clamps to 80% of viewport on mobile)\n- `md` (default): 480px (clamps to 90% on mobile)\n- `lg`: 640px (clamps to 95% on mobile)\n- `number`: explicit pixel value"},"title":{"type":"string","required":false,"default":null,"description":"Optional drawer title rendered in the sticky header"}},"description":"Drawer / SlideOver Component A panel that slides in from the right, left, or bottom edge of the viewport. Distinct from Modal (centered), Sidebar (nav-only), and Popover (tooltip-scale). Reuses Modal's overlay infrastructure:   - `<Portal>` mount target   - `useFocusTrap` for keyboard containment (Tab / Shift+Tab cycle)   - `useKeyPress('Escape')` for keyboard dismiss   - `useClickOutside` for backdrop dismissal   - body scroll-lock on open Distinct from Modal:   - Slides from a viewport edge (right / left / bottom) instead of centering   - Full-height for `right` / `left`, fixed-height for `b","examples":[],"composes":null,"appliesClassNames":null},"Dropdown":{"kind":"component","category":"Overlay & Interactive","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Dropdown","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"align":{"type":"\"right\" | \"left\" | \"center\"","required":false,"default":"'left'","description":"Alignment of dropdown relative to trigger"},"children":{"type":"ReactNode","required":true,"default":null,"description":"Dropdown menu items"},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class"},"trigger":{"type":"ReactNode","required":true,"default":null,"description":"Element that triggers the dropdown"}},"description":"A flexible dropdown menu with portal rendering, keyboard navigation, and smart positioning that adapts to viewport constraints. Platform-native enhancement (#273 step 2): the menu opts in to the Popover API (`popover` attribute + `showPopover()`/`hidePopover()`) when the browser supports it, which promotes the menu into the top layer. The existing controlled-state model (`isOpen` + click-outside + Escape) remains the source of truth so the migration is invisible in unsupported browsers (and jsdom). The benefit in supported browsers is structural correctness: the menu paints above any future to","examples":[],"composes":{"children":{"accepts":"DropdownItem","as":"ReactNode"},"trigger":{"accepts":"Button | IconButton","as":"ReactNode"}},"appliesClassNames":null},"DropdownItem":{"kind":"component","category":"Overlay & Interactive","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLButtonElement","subpath":"./components/Dropdown","extends":["HTMLAttributes<HTMLButtonElement>","RefAttributes<HTMLButtonElement>"],"deprecated":null,"props":{"children":{"type":"ReactNode","required":false,"default":null,"description":"Item content"},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class"},"destructive":{"type":"boolean","required":false,"default":"false","description":"Destructive action (red text)"},"disabled":{"type":"boolean","required":false,"default":"false","description":"Disable interaction"},"divider":{"type":"boolean","required":false,"default":"false","description":"Render as divider instead of item"},"icon":{"type":"ReactNode","required":false,"default":null,"description":"Icon to display before content"},"onClick":{"type":"(() => void)","required":false,"default":null,"description":"Click handler"},"onSelect":{"type":"(() => void)","required":false,"default":null,"description":"Internal: callback from Dropdown for closing"}},"description":"Individual menu item in a Dropdown with optional icon, destructive styling, and divider support. @example <DropdownItem icon={<SaveIcon />} onClick={() => save()}>   Save </DropdownItem> <DropdownItem divider /> <DropdownItem destructive onClick={() => deleteItem()}>   Delete </DropdownItem>","examples":[],"composes":null,"appliesClassNames":null},"EmptyState":{"kind":"component","category":"Feedback & Status","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":"HTMLDivElement","subpath":"./components/EmptyState","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"action":{"type":"{ label: string; onClick: () => void; }","required":false,"default":null,"description":"Primary action button"},"asChild":{"type":"boolean","required":false,"default":"false","description":"Render through the single child element (Radix-style `asChild`),\nmerging EmptyState's root class + forwarded props onto it instead of\nemitting the default outer `<div>` (#424). The child becomes the\ncontainer-query host (`.sizer`); the inner `.emptyState` stays a\ndescendant so the `@container` rules still match."},"description":{"type":"string","required":false,"default":null,"description":"Optional description text"},"icon":{"type":"ReactNode","required":false,"default":null,"description":"Custom icon to display"},"secondaryAction":{"type":"{ label: string; onClick: () => void; }","required":false,"default":null,"description":"Secondary action button"},"title":{"type":"string","required":true,"default":null,"description":"Main title text"},"variant":{"type":"\"search\" | \"error\" | \"no-data\" | \"create\"","required":false,"default":"'no-data'","description":"Variant determines default icon and styling"}},"description":"A centered empty state display with icon, title, description, and actions. Provides visual feedback when content is unavailable or actions are needed. @example <EmptyState   variant=\"no-data\"   title=\"No tasks found\"   description=\"Create your first task to get started\"   action={{ label: \"Create Task\", onClick: () => {} }} />","examples":[],"composes":null,"appliesClassNames":null},"Field":{"kind":"component","category":"Core & Form","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":null,"subpath":"./components/Field","extends":["HTMLAttributes<HTMLDivElement>"],"deprecated":null,"props":{"bare":{"type":"boolean","required":false,"default":null,"description":"Tell Field that the child does NOT have its own label/error chrome\n(e.g. raw `<input>` or `<select>`). When true, Field renders its\nown `<label>` and error/helper text wrapper. Default detection\nchecks for the presence of a `label` prop on the child — if the\nchild already declares `label`, we trust it has a label slot."},"children":{"type":"ReactElement<FieldChildProps, string | JSXElementConstructor<any>>","required":true,"default":null,"description":"The input affordance. Must be a single React element (one Input,\none Select, etc.). Fragments and multiple children are rejected."},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class for Field's rendered root.\n\n- **Bare path** (raw `<input>`/`<select>`, or `bare`): merged onto the\n  `.container` wrapper `<div>` Field renders.\n- **Delegated path** (label-aware child like `<Input>`): Field renders no\n  wrapper of its own, so the class is merged onto the cloned child's own\n  `className` (the child's rendered root). Nothing is silently dropped."},"error":{"type":"string","required":false,"default":null,"description":"Explicit error message. Overrides any error from the parent <Form>\ncontext. Useful when using <Field> standalone (without <Form>) or\nfor one-off error states."},"helperText":{"type":"string","required":false,"default":null,"description":"Helper text below the input. Forwarded to the child if it accepts a\n`helperText` prop; otherwise rendered as a standalone hint below the\ninput. Suppressed when an error is present (error wins)."},"label":{"type":"string","required":true,"default":null,"description":"Visible label text. Forwarded to the child if the child accepts a\n`label` prop (the Lando inputs do); otherwise rendered as a\nstandalone <label> element above the child."},"name":{"type":"string","required":true,"default":null,"description":"Form field name. Used as the key in the form values object and to\nlook up errors from the parent <Form> context."},"required":{"type":"boolean","required":false,"default":null,"description":"Whether the field is required. Forwarded to the child."},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline styles for Field's rendered root. Follows the same target rules as\n{@link FieldProps.className} — the `.container` wrapper on the bare path,\nor the cloned child (merged with any `style` the child already has) on the\ndelegated path. (Inherited type from `HTMLAttributes`; restated for docs.)"}},"description":"Field Component (#313 — Sprint 55 Lane C) Wraps a single input affordance with label + error + helper-text wiring. Designed to compose with the existing Lando inputs (Input, NumberInput, Textarea, Select, Combobox, Slider, etc.) WITHOUT duplicating their label/error UI — Field forwards the label/error/helperText props onto the child via cloneElement, so the input's own (already-tested) label/error chrome is what the user sees. This keeps the a11y wiring in one place per input and means Field has no opinions about styling. For bare children that don't have a label slot (e.g. a raw `<input>`), F","examples":[],"composes":null,"appliesClassNames":null},"FileInput":{"kind":"component","category":"Core & Form","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/FileInput","extends":["RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"accept":{"type":"string","required":false,"default":null,"description":"accept attribute — mime types or extensions, e.g. \"image/*,.pdf\"."},"ariaLabel":{"type":"string","required":false,"default":null,"description":"ARIA label for the dropzone region. Defaults to \"Browse files or drop here\"."},"className":{"type":"string","required":false,"default":null,"description":"Extra class on the outer container."},"defaultFiles":{"type":"File[]","required":false,"default":null,"description":"Initial files (uncontrolled). Ignored when `files` is provided."},"disabled":{"type":"boolean","required":false,"default":"false","description":"Disabled state — no click, no drop, no paste."},"error":{"type":"string","required":false,"default":null,"description":"Error message — overrides internal validation error display."},"files":{"type":"File[]","required":false,"default":null,"description":"Selected files (controlled). When provided, the component is fully controlled."},"helperText":{"type":"string","required":false,"default":null,"description":"Helper text below the dropzone. Suppressed when `error` is shown."},"id":{"type":"string","required":false,"default":null,"description":"Stable id for the dropzone wrapper."},"label":{"type":"string","required":false,"default":null,"description":"Label rendered above the dropzone."},"maxFiles":{"type":"number","required":false,"default":null,"description":"Max number of files total. Excess files on add are rejected."},"maxSize":{"type":"number","required":false,"default":null,"description":"Max bytes per file. Rejected on add."},"multiple":{"type":"boolean","required":false,"default":"false","description":"Allow multiple file selection. When false, a new file replaces the prior selection."},"onChange":{"type":"((files: File[]) => void)","required":false,"default":null,"description":"Called whenever the selection changes (add, remove)."},"onReject":{"type":"((rejections: FileRejection[]) => void)","required":false,"default":null,"description":"Called when one or more files are rejected by validation\n(accept / maxSize / maxFiles). Receives the full list of\nrejections from a single add operation."},"placeholder":{"type":"string","required":false,"default":null,"description":"Custom prompt text inside the dropzone."},"renderFile":{"type":"((file: File, remove: () => void) => ReactNode)","required":false,"default":null,"description":"Render a custom file preview slot per file. Falls back to a\nfilename + remove button row when omitted."}},"description":"Drag-and-drop file picker with click-to-browse, paste support, and per-file validation. Manages file SELECTION state only — uploading, progress, and networking are the consumer's responsibility (see issue #316: \"What this DOES NOT do — Upload logic / progress / network\"). Sprint 55 (#316) — Lane E of v0.34.0. Supports three input methods:   1. Click the dropzone (or its \"Browse files\" button) → native file picker   2. Drag files onto the dropzone → drop handler   3. Paste files from clipboard while the dropzone is focused Validation runs on every add (drop, picker, paste) — `accept` is re-vali","examples":[],"composes":null,"appliesClassNames":null},"Footer":{"kind":"component","category":"Navigation & Chrome","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":"HTMLElement","subpath":"./components/Footer","extends":["HTMLAttributes<HTMLElement>","RefAttributes<HTMLElement>"],"deprecated":null,"props":{"accent":{"type":"boolean","required":false,"default":"true","description":"Show the 2px brand → teal gradient ribbon on the footer's top edge.\nDefault: `true`. Sprint 10 (#59) — the ribbon is a brand signature\nelement called out in brand-foundation.md. Pass `accent={false}` to\nsuppress it entirely (useful for footers nested inside branded\nchrome where the ribbon would double up)."},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class merged onto the `<footer>` root."},"columns":{"type":"FooterColumn[]","required":false,"default":"'[]'","description":"Footer columns with links (rich variant)"},"copyright":{"type":"string","required":false,"default":null,"description":"Copyright text"},"logo":{"type":"ReactNode","required":false,"default":null,"description":"Logo element"},"social":{"type":"FooterSocial[]","required":false,"default":"'[]'","description":"Social media links"},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline styles merged onto the `<footer>` root.\n(Inherited type from `HTMLAttributes`; restated here for docs.)"},"variant":{"type":"\"simple\" | \"rich\"","required":false,"default":"'simple'","description":"Footer variant"}},"description":"A flexible footer with simple and rich variants. Rich variant supports multi-column links, social media icons, and logo. @example // Simple footer <Footer copyright=\"© 2024 Lando Labs\" variant=\"simple\" /> // Rich footer <Footer   logo={<Logo />}   columns={[     {       title: 'Product',       links: [         { label: 'Features', href: '/features' },         { label: 'Pricing', href: '/pricing' }       ]     }   ]}   social={[     { icon: <TwitterIcon />, href: 'https://twitter.com', label: 'Twitter' }   ]}   copyright=\"© 2024 Lando Labs\"   variant=\"rich\" />","examples":[],"composes":null,"appliesClassNames":null},"Form":{"kind":"component","category":"Core & Form","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLFormElement","subpath":"./components/Form","extends":["HTMLAttributes<HTMLFormElement>","RefAttributes<HTMLFormElement>"],"deprecated":null,"props":{},"description":"Form Component (#313 — Sprint 55 Lane C) A wrapper around the native `<form>` element that owns validation context for nested `<Field>` children. Schema-agnostic by design — accepts either:   - a `validate` function (sync only in v1) that maps form values to a     `{ [fieldName]: string }` error map, or   - nothing, in which case native HTML5 validity (required, type, pattern,     etc.) is the source of truth and runs via `form.checkValidity()`. Conform integration was deferred (see ARCHITECTURE NOTE below); the prop surface and FormContext are shaped so a future Conform-backed adapter can lay","examples":[],"composes":{"children":{"accepts":"Field","as":"ReactNode"}},"appliesClassNames":null},"FunnelChart":{"kind":"component","category":"Data Visualization","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/FunnelChart","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"animationDuration":{"type":"number","required":false,"default":"300"},"colorScheme":{"type":"ColorScheme","required":false,"default":"'brand'"},"colors":{"type":"string[]","required":false,"default":null},"data":{"type":"FunnelStage[]","required":true,"default":null,"description":"Funnel stages, ordered widest → narrowest."},"description":{"type":"string","required":false,"default":null},"empty":{"type":"boolean","required":false,"default":"false"},"error":{"type":"string","required":false,"default":null},"height":{"type":"string | number","required":false,"default":"300"},"interactive":{"type":"boolean","required":false,"default":null},"loading":{"type":"boolean","required":false,"default":"false"},"orientation":{"type":"\"horizontal\" | \"vertical\"","required":false,"default":"'vertical'","description":"Stack stages vertically (default) or sequence them horizontally."},"showAbsoluteCounts":{"type":"boolean","required":false,"default":"true","description":"Show absolute count labels on each stage (default: `true`)."},"showPercentages":{"type":"boolean","required":false,"default":"true","description":"Show percentage labels on each stage (default: `true`)."},"title":{"type":"string","required":false,"default":null,"description":"Visible / data-table caption text. Note this also satisfies the native\n`title` attribute from `HTMLAttributes<HTMLDivElement>` (both are `string`)."},"variant":{"type":"\"default\" | \"brand\" | \"gradient\"","required":false,"default":"'default'"},"width":{"type":"string | number","required":false,"default":null,"description":"Intended outer width. Forwarded by sub-charts to their Recharts layout;\nthe base `Chart` wrapper itself always renders a 100%-width responsive\ncontainer and does not read this."}},"description":"Sequential drop-off visualization (signup → verified → activated → paid). Recharts has no native funnel primitive, so this renders a custom SVG trapezoid stack. Each stage is a `<polygon>` whose width is proportional to its `count` (or `percentage`). Labels are placed inside the trapezoid for vertical orientation and beside it for horizontal. *Reuse of the Chart base pattern** The shared `Chart` wrapper is built around Recharts' `ResponsiveContainer` which expects Recharts children. Passing a hand-rolled SVG through it is possible at runtime but pulls a `ResizeObserver` dependency into tests f","examples":[],"composes":null,"appliesClassNames":null},"Grid":{"kind":"component","category":"Layout Primitives","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Grid","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"align":{"type":"\"start\" | \"center\" | \"end\" | \"stretch\"","required":false,"default":null,"description":"Align items on block axis"},"autoFill":{"type":"boolean","required":false,"default":"false","description":"Switch to `grid-template-columns: repeat(auto-fill, minmax(<minColumnWidth>, 1fr))`.\nWhen true, the `columns` prop is ignored (responsive column classes are\nalso skipped). Use `minColumnWidth` to control the minimum track size."},"autoFlow":{"type":"\"row\" | \"column\" | \"dense\"","required":false,"default":null,"description":"Grid auto flow direction"},"autoRows":{"type":"string","required":false,"default":null,"description":"Auto rows template (e.g., 'minmax(200px, auto)')"},"children":{"type":"ReactNode","required":true,"default":null,"description":"Content to render"},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class"},"columnGap":{"type":"string | number","required":false,"default":null,"description":"Gap between columns. Ignored when `gap` is an object."},"columns":{"type":"number | { sm?: number; md?: number; lg?: number | undefined; } | undefined","required":false,"default":"1","description":"Number of columns or responsive column object"},"gap":{"type":"string | number | GridGapAxes","required":false,"default":null,"description":"Gap between grid items.\n\n- `number` → emitted as `<n>px`\n- `string` → emitted verbatim (`'1rem'`, `'var(--spacing-md)'`)\n- `{ row, column }` → split into `row-gap` + `column-gap` (#374)\n\nWhen the object form is used, `rowGap` / `columnGap` props are ignored."},"justify":{"type":"\"start\" | \"center\" | \"end\" | \"stretch\"","required":false,"default":null,"description":"Justify items on inline axis"},"minColumnWidth":{"type":"string","required":false,"default":"'280px'","description":"Minimum column width when `autoFill` is true. Accepts any CSS length\n(e.g. `'340px'`, `'20rem'`). Ignored when `autoFill` is false."},"rowGap":{"type":"string | number","required":false,"default":null,"description":"Gap between rows. Ignored when `gap` is an object."},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline styles merged with Grid's computed grid-template/gap/etc.\nThe computed Grid styles win on conflict so prop-driven layout is\nnever silently overridden — use this for positioning the Grid\nitself (e.g. `gridRow: 'span 3'` on a subgridded child)."},"subgrid":{"type":"\"both\" | \"columns\" | \"rows\"","required":false,"default":null,"description":"Opt into CSS `subgrid` on the named axis. The Grid takes its tracks\nfrom the nearest grid ancestor instead of defining its own. Use this\nto align nested grid children to the parent's track grid (e.g. a\n`<Card>` aligning its internals to the page rhythm).\n\n- `'columns'` — `grid-template-columns: subgrid` (overrides the\n  `columns` / `autoFill` props on the columns axis)\n- `'rows'` — `grid-template-rows: subgrid` (overrides the `autoRows`\n  prop)\n- `'both'` — apply subgrid on both axes\n\nRequires the parent element to be `display: grid`. Browser baseline:\nChrome 117 (Sep 2023), Firefox 71 (Dec 2019), Safari 16 (Sep 2022).\nNo fallback emitted — verify your support matrix before shipping."}},"description":"Declarative CSS Grid wrapper with responsive column support. Provides simple API for common grid layouts. @example // Fixed 3 columns <Grid columns={3} gap=\"16px\">   <Card>Item 1</Card>   <Card>Item 2</Card>   <Card>Item 3</Card> </Grid> // Responsive columns <Grid columns={{ sm: 1, md: 2, lg: 3 }} gap={24}>   <Card>Item 1</Card>   <Card>Item 2</Card> </Grid> // Separate row/column gap (#374) — accept an object so authors don't have // to remember which side is row vs column in a positional tuple. <Grid columns={3} gap={{ row: 8, column: 24 }}>   <Card>Item 1</Card>   <Card>Item 2</Card> </Gri","examples":[],"composes":null,"appliesClassNames":null},"GridItem":{"kind":"component","category":"Layout Primitives","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":"HTMLDivElement","subpath":"./components/GridItem","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"as":{"type":"ElementType<any, keyof IntrinsicElements>","required":false,"default":"'div'","description":"HTML element to render as."},"children":{"type":"ReactNode","required":false,"default":null,"description":"Content to render inside the grid item."},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class merged onto the element."},"columnEnd":{"type":"number","required":false,"default":null,"description":"Explicit end column (1-indexed, or negative for from-end like `-1`).\nPairs with `columnStart` for a `grid-column: <start> / <end>` placement."},"columnStart":{"type":"number","required":false,"default":null,"description":"Explicit start column (1-indexed). Use when you need exact placement\ninstead of `span`. Mutually overlapping with `span`; if both are\nprovided, `columnStart` wins and `span` is ignored."},"rowEnd":{"type":"number","required":false,"default":null,"description":"Explicit end row. See `columnEnd` semantics."},"rowSpan":{"type":"GridItemSpan","required":false,"default":null,"description":"Number of rows to span (`grid-row: span <n>`), OR `'full'` for a\nfull-column span (`grid-row: 1 / -1`). Omit to use the grid's\nimplicit row sizing."},"rowStart":{"type":"number","required":false,"default":null,"description":"Explicit start row (1-indexed). See `columnStart` semantics."},"span":{"type":"GridItemSpan","required":false,"default":null,"description":"Number of columns to span (`grid-column: span <n>`), OR `'full'` for\na full-row span (`grid-column: 1 / -1`). Omit to take a single column\n(CSS default — `grid-column: auto`)."},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline styles. The GridItem-computed grid-column/grid-row values are\napplied AFTER user style, so prop-driven placement always wins on\nconflict (mirrors the Grid component's policy)."}},"description":"GridItem Component (#374) Item-level sizing helper for `<Grid>`. Before this lived in the DS, consumers reached into `style={{ gridColumn: 'span 2' }}` (or the raw `1 / -1` form for full-row spans) inline — perfectly valid CSS but the readability cost piled up in dashboards with many spans. `<GridItem span={n}>` → `grid-column: span n;` `<GridItem span=\"full\">` → `grid-column: 1 / -1;` (full-row span) `<GridItem rowSpan={n}>` → `grid-row: span n;` `<GridItem rowSpan=\"full\">` → `grid-row: 1 / -1;` Composes with `<Grid>` as a child wrapper: ```tsx <Grid columns={4} gap=\"md\">   <GridItem span={2}","examples":[],"composes":null,"appliesClassNames":null},"Header":{"kind":"component","category":"Navigation & Chrome","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLElement","subpath":"./components/Header","extends":["HTMLAttributes<HTMLElement>","RefAttributes<HTMLElement>"],"deprecated":null,"props":{"actions":{"type":"ReactNode","required":false,"default":null,"description":"Action elements (right side - search, notifications, user menu)"},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class merged onto the outer `<header>` root."},"logo":{"type":"ReactNode","required":false,"default":null,"description":"Logo element (left side)"},"maxWidth":{"type":"string | number","required":false,"default":null,"description":"Maximum width of the inner content area.\n\n- Omitted (default): 1280px centered band — best for marketing sites.\n- Number: applied as pixels (e.g. `1440` → `1440px`).\n- String: applied as-is. Pass `\"none\"` or `\"100%\"` to make the\n  Header full-bleed (best for in-app shells wider than 1280px).\n\nThe outer `<header>` (sticky background) always spans the full viewport;\nonly the inner content container respects this value."},"navigation":{"type":"ReactNode","required":false,"default":null,"description":"Navigation elements (center)"},"skipLinkHref":{"type":"string","required":false,"default":null,"description":"Skip-link target (WCAG 2.4.1 \"Bypass Blocks\"). When provided, a visually\nhidden \"Skip to content\" link is rendered as the first focusable element\nin the header. Keyboard users pressing Tab land on it first and can jump\npast the header/nav to the main content.\n\nPass a fragment selector like `\"#main\"` pointing at your main landmark.\nOmit to disable the skip link entirely.\n\nTrust boundary (#325): sanitized at render via `safeHref` — a `javascript:` /\n`data:` value collapses to `#`. The intended shape is a `#fragment`.\n@example <Header skipLinkHref=\"#main\" logo={<Logo />} />\n<main id=\"main\" tabIndex={-1}>...</main>"},"skipLinkLabel":{"type":"string","required":false,"default":"Skip to content","description":"Visible text for the skip link. Default: \"Skip to content\""},"sticky":{"type":"boolean","required":false,"default":"false","description":"Sticky header that stays at top on scroll"},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline styles applied to the outer `<header>` root. The component sets no\ninline style on `<header>` (the `maxWidth` prop styles the inner content\ncontainer, not the root), so consumer keys apply directly.\n(Inherited type from `HTMLAttributes`; restated here for docs.)"},"transparent":{"type":"boolean","required":false,"default":"false","description":"Transparent background (for hero sections)"},"variant":{"type":"\"flat\" | \"default\"","required":false,"default":"'default'","description":"Visual variant.\n\n- `default`: subtle brand-foam → surface gradient on the left edge\n  (new in Sprint 10 — gives the Header a faint Lando Labs warmth).\n- `flat`: pure surface background, no gradient. Use this when you\n  want the pre-Sprint-10 flat Header look or when the gradient\n  conflicts with custom branding in the logo slot.\n\nThe strong \"hero\" brand gradient is still available via the internal\n`gradient` class (not exposed as a variant here — it's meant for\nmarketing layouts and applied through the className escape hatch)."}},"description":"A responsive header with logo, navigation, and actions area. Supports sticky positioning, transparent background, and mobile hamburger menu. @example <Header   logo={<Logo />}   navigation={<Nav />}   actions={<UserMenu />}   sticky /> @example // Full-bleed, in-app shell (removes the centered 1280px band) <Header maxWidth=\"none\" actions={<UserMenu />} /> @example // Custom content width inside full-bleed background <Header maxWidth={1440} logo={<Logo />} actions={<UserMenu />} />","examples":[],"composes":null,"appliesClassNames":null},"Heading":{"kind":"component","category":"Typography","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":"HTMLHeadingElement","subpath":"./components/Heading","extends":["HTMLAttributes<HTMLHeadingElement>","RefAttributes<HTMLHeadingElement>"],"deprecated":null,"props":{"asChild":{"type":"boolean","required":false,"default":"false","description":"Render as the single child element, merging the Heading's visual\nstyling onto it (Layer-7 composition, #424). `asChild` is additive and\nindependent of `level`: the child element replaces the `h{level}` tag,\nso choose an element with the semantics you want. The `styles.heading`\n+ size/weight classes and merged `style` land on the rendered child."},"children":{"type":"ReactNode","required":true,"default":null,"description":"Heading content"},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class name"},"color":{"type":"string","required":false,"default":null,"description":"Text color (CSS custom property or color value)"},"level":{"type":"4 | 1 | 2 | 3 | 5 | 6","required":false,"default":"2","description":"Semantic heading level (h1-h6) for accessibility and document structure"},"size":{"type":"\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"","required":false,"default":null,"description":"Visual size, independent of the semantic level.\nIgnored when `variant=\"section\"` (the section variant is\nintentionally a fixed small size)."},"variant":{"type":"\"default\" | \"section\"","required":false,"default":"'default'","description":"Visual treatment, independent of the semantic level.\n- `default` — standard display heading sized by `size`.\n- `section` — small, uppercase, letter-spaced \"section header\"\n  label. Use instead of hand-rolling `textTransform: 'uppercase'`\n  on a Heading. `size` is ignored when `variant=\"section\"`."},"weight":{"type":"\"medium\" | \"normal\" | \"bold\" | \"semibold\"","required":false,"default":"'semibold'","description":"Font weight"}},"description":"Semantic heading component with independent control over semantic level and visual size. Ensures accessibility through proper HTML heading hierarchy while allowing design flexibility. *Page title sizing (DS-MOD-1)**: For app-chrome contexts (dashboards, settings, detail pages), use `size=\"lg\"` (31px) or `size=\"xl\"` (39px). Reserve `size=\"2xl\"` (49px) for marketing hero blocks on landing pages — it will feel oversized against a Header/Sidebar layout. See `reference/typography-components.md` → \"Page Title Sizing Guidance\" for the full decision tree. @example // App page title <Heading level={1}","examples":[],"composes":null,"appliesClassNames":null},"IconButton":{"kind":"component","category":"Core & Form","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":"HTMLButtonElement","subpath":"./components/IconButton","extends":["HTMLAttributes<HTMLButtonElement>","RefAttributes<HTMLButtonElement>"],"deprecated":null,"props":{"aria-label":{"type":"string","required":true,"default":null,"description":"Accessible label for screen readers. REQUIRED — an icon-only button\nhas no visible text, so without this prop the control is unusable to\nassistive technology. TypeScript will reject calls that omit it."},"children":{"type":"ReactNode","required":true,"default":null,"description":"The icon to render inside the button."},"loading":{"type":"boolean","required":false,"default":"false","description":"Show loading spinner and disable interactions. When `true`:\n- The icon child is replaced by a centered `<Spinner>` sized to match\n  the IconButton size (xs→xs, sm→sm, md→md).\n- The native `disabled` attribute is set, blocking click and keyboard\n  activation at the browser level.\n- `aria-label` is preserved so screen readers still announce the\n  action being performed.\n- `aria-busy=\"true\"` is set so AT can communicate the in-flight state.\n\nMirrors the `loading` prop on `<Button>`."},"size":{"type":"\"xs\" | \"sm\" | \"md\"","required":false,"default":"'sm'","description":"Visible icon size.\n- `xs` → 24×24px visible\n- `sm` (default) → 32×32px visible\n- `md` → 40×40px visible\n\nNote: every size guarantees a minimum 44×44px hit area regardless of\nvisible size, so touch targets meet iOS/Android guidance even when\nthe visible chrome is smaller."},"variant":{"type":"\"solid\" | \"outline\" | \"ghost\"","required":false,"default":"'ghost'","description":"Visual style variant.\n- `ghost` (default): transparent background, subtle hover tint. Best\n  for incidental affordances inside cards, list rows, popovers.\n- `solid`: filled primary background. Use for primary icon-only\n  actions (e.g. a floating \"compose\" button).\n- `outline`: 1px border, transparent background. Use when you need\n  a visible affordance against busy backgrounds."}},"description":"Icon-only button primitive. Replaces hand-rolled icon-only ghost buttons (`.menuTrigger`, `.dismissBtn`, `.commentDeleteBtn`, `.userViewDeleteBtn`, `.orderBtn`, etc.) that recur across consuming apps. Surfaced in the CAMI DS recomposition audit (lando-labs/cami-app#565). Why this exists as its own component (and not just `<Button variant=\"ghost\">`): - **`aria-label` is REQUIRED** at the type level. An icon-only button with   no accessible name is invisible to screen-reader users; making the prop   non-optional turns a recurring a11y regression into a TypeScript error. - 1:1 (square) hit area w","examples":[],"composes":{"icon":{"accepts":"Icon","as":"ReactNode"}},"appliesClassNames":null},"Inline":{"kind":"component","category":"Layout Primitives","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":"HTMLDivElement","subpath":"./components/Inline","extends":["HTMLAttributes<HTMLElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"align":{"type":"\"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\"","required":false,"default":"'center'","description":"Vertical alignment of children"},"as":{"type":"\"div\" | \"nav\" | \"section\" | \"span\"","required":false,"default":"'div'","description":"HTML element to render as"},"children":{"type":"ReactNode","required":true,"default":null,"description":"Child elements to render in horizontal layout"},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class names"},"gap":{"type":"number | (string & {}) | InlineGapKeyword","required":false,"default":"'md'","description":"Spacing between children. Accepts EITHER a token keyword (preferred,\nstays on the design-token rhythm) or a raw CSS-length value:\n\n- `'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'` → token class\n- `number` → emitted verbatim as `<n>px` inline style\n- `string` (e.g. `'0.5rem'`, `'var(--spacing-3)'`) → emitted verbatim\n\nNumeric/string escape hatch added in #374 — see StackProps.gap."},"grow":{"type":"number | boolean","required":false,"default":null,"description":"Grow to fill remaining space when this Inline is itself a flex item of\na parent flex container (#374).\n\n- `true` → `flex: 1 1 auto`\n- `<number>` → `flex: <n> 1 auto`"},"justify":{"type":"\"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"evenly\"","required":false,"default":"'start'","description":"Horizontal alignment/distribution of children"},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline styles"},"wrap":{"type":"boolean","required":false,"default":"false","description":"Allow children to wrap to next line"}},"description":"Horizontal flex layout primitive with consistent spacing. Provides clean, declarative horizontal layouts using design tokens.","examples":[{"name":"Distributed row","code":"<Inline gap=\"sm\" justify=\"between\" align=\"center\">{children}</Inline>"}],"composes":null,"appliesClassNames":null},"Input":{"kind":"component","category":"Core & Form","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLInputElement","subpath":"./components/Input","extends":["HTMLAttributes<HTMLInputElement>","RefAttributes<HTMLInputElement>"],"deprecated":null,"props":{"containerClassName":{"type":"string","required":false,"default":null,"description":"Container className for styling wrapper"},"error":{"type":"string","required":false,"default":null,"description":"Error message - when provided, input enters error state"},"helperText":{"type":"string","required":false,"default":null,"description":"Helper text displayed below the input"},"label":{"type":"string","required":false,"default":null,"description":"Label text displayed above the input"},"leftIcon":{"type":"ReactNode","required":false,"default":null,"description":"Icon or element displayed on the left side of input"},"onClear":{"type":"(() => void)","required":false,"default":null,"description":"Callback when clear button is clicked"},"rightIcon":{"type":"ReactNode","required":false,"default":null,"description":"Icon or element displayed on the right side of input"},"showCharCount":{"type":"boolean","required":false,"default":"false","description":"Show character count (requires maxLength to be set).\n\nWeb-native shorthand. Cross-platform consumers should prefer\n`showCharacterCount`, which is the canonical name used by the\nReact Native `Input` (Refs: #240 remediation). Both props are\naccepted; if either is true the counter renders."},"showCharacterCount":{"type":"boolean","required":false,"default":"false","description":"Show character count (requires maxLength to be set).\n\nCanonical cross-platform alias for `showCharCount`. Use this when\nwriting code that targets both the web and React Native packages\nso the prop name doesn't have to fork per platform (Refs: #240\nremediation). If both `showCharCount` and `showCharacterCount`\nare provided, the counter renders if either is true."}},"description":"A flexible input component with label, helper text, error states, and icon support. Built with accessibility in mind (semantic HTML, label association, ARIA on error/helper text); a systematic WCAG AA audit is tracked in #13 — do not assume full AA conformance. @example <Input label=\"Email\" type=\"email\" placeholder=\"Enter your email\" /> <Input label=\"Password\" type=\"password\" error=\"Password is required\" /> <Input leftIcon={<SearchIcon />} placeholder=\"Search...\" />","examples":[{"name":"With label + error","code":"<Input label=\"Email\" type=\"email\" error=\"Required\" required />"}],"composes":null,"appliesClassNames":null},"Kbd":{"kind":"component","category":"Typography","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":true,"ref":"HTMLElement","subpath":"./components/Kbd","extends":["HTMLAttributes<HTMLElement>","RefAttributes<HTMLElement>"],"deprecated":null,"props":{"asChild":{"type":"boolean","required":false,"default":"false","description":"Render as the single child element, merging Kbd styling onto it\n(Layer-7 composition, #424). Pass a single element as `children`; the\n`styles.kbd` class lands on it. `shortcut` is not auto-rendered under\n`asChild` — supply the display content yourself."},"children":{"type":"ReactNode","required":false,"default":null,"description":"Raw display content (escape hatch — takes precedence over `shortcut`)."},"shortcut":{"type":"string","required":false,"default":null,"description":"Semantic shortcut like \"meta+k\" — auto-rendered with platform-aware glyphs."},"size":{"type":"\"xs\" | \"sm\" | \"md\"","required":false,"default":"'sm'","description":"Visual size. Default 'sm'."}},"description":"A platform-aware keyboard-shortcut pill. Accepts either raw children (escape hatch) or a semantic `shortcut` prop (\"meta+k\") that is rendered as ⌘K on macOS or Ctrl+K elsewhere. SSR-safe: renders the non-Mac version on the server, upgrades to the detected platform after mount. @example <Kbd>⌘K</Kbd> <Kbd shortcut=\"meta+k\" /> <Kbd shortcut=\"shift+alt+f\" size=\"md\" />","examples":[],"composes":null,"appliesClassNames":null},"Lede":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":"HTMLParagraphElement","subpath":"./components/ArticleCard","extends":["HTMLAttributes<HTMLParagraphElement>","RefAttributes<HTMLParagraphElement>"],"deprecated":null,"props":{"children":{"type":"ReactNode","required":true,"default":null,"description":"Lede paragraph content."}},"description":"The first paragraph of an editorial piece — slightly larger serif typography with tighter line-height to set the article's tone. Standalone export: drop into any prose layout where you want a \"lede\" treatment (long-form posts, marketing hero copy, etc.). Also composed internally by ArticleCard when the consumer passes a `lede` prop. @example <Lede>The first paragraph in larger serif type sets the tone.</Lede>","examples":[],"composes":null,"appliesClassNames":null},"LineChart":{"kind":"component","category":"Data Visualization","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":null,"subpath":"./components/LineChart","extends":["HTMLAttributes"],"deprecated":null,"props":{"animationDuration":{"type":"number","required":false,"default":"300"},"areaOpacity":{"type":"number","required":false,"default":"0.3","description":"Area fill opacity"},"aspectRatio":{"type":"number","required":false,"default":null},"colorScheme":{"type":"ColorScheme","required":false,"default":"'brand'"},"colors":{"type":"string[]","required":false,"default":null},"data":{"type":"ChartDataPoint[]","required":true,"default":null},"dataKeys":{"type":"string[]","required":true,"default":null,"description":"Data keys to plot (e.g., ['revenue', 'profit'])"},"description":{"type":"string","required":false,"default":null},"dotSize":{"type":"number","required":false,"default":"4","description":"Dot size"},"empty":{"type":"boolean","required":false,"default":null},"error":{"type":"string","required":false,"default":null},"fillArea":{"type":"boolean","required":false,"default":"false","description":"Fill area under line"},"height":{"type":"string | number","required":false,"default":null},"interactive":{"type":"boolean","required":false,"default":null},"legendPosition":{"type":"LegendPosition","required":false,"default":null},"lineType":{"type":"\"step\" | \"linear\" | \"monotone\" | \"stepBefore\" | \"stepAfter\"","required":false,"default":"'monotone'","description":"Line curve type"},"loading":{"type":"boolean","required":false,"default":null},"onDataPointClick":{"type":"((data: ChartDataPoint) => void)","required":false,"default":null,"description":"Click handler for individual data points. The payload shape is\nRecharts-defined and varies by chart type; consumers should narrow at\ntheir use site."},"onLegendClick":{"type":"((dataKey: string) => void)","required":false,"default":null},"showDots":{"type":"boolean","required":false,"default":"true","description":"Show dots on data points"},"showGrid":{"type":"boolean","required":false,"default":"true"},"showLegend":{"type":"boolean","required":false,"default":"true"},"showTooltip":{"type":"boolean","required":false,"default":"true"},"strokeWidth":{"type":"number","required":false,"default":"2","description":"Line stroke width"},"title":{"type":"string","required":false,"default":null,"description":"Visible / data-table caption text. Note this also satisfies the native\n`title` attribute from `HTMLAttributes<HTMLDivElement>` (both are `string`)."},"valueFormat":{"type":"\"number\" | \"currency\" | \"percent\" | \"compact\"","required":false,"default":"'number'","description":"Value formatting (currency, percent, compact, number)"},"variant":{"type":"\"default\" | \"brand\" | \"gradient\"","required":false,"default":null},"width":{"type":"string | number","required":false,"default":null,"description":"Intended outer width. Forwarded by sub-charts to their Recharts layout;\nthe base `Chart` wrapper itself always renders a 100%-width responsive\ncontainer and does not read this."},"xAxisKey":{"type":"string","required":true,"default":null,"description":"Key for x-axis (e.g., 'month')"}},"description":"Line chart for visualizing trends over time with brand theming. Supports multi-series, area fills, and smooth curve interpolation. @example <LineChart   data={salesData}   dataKeys={['revenue', 'profit']}   xAxisKey=\"month\"   colorScheme=\"teal\"   fillArea   height={300} />","examples":[],"composes":null,"appliesClassNames":null},"List":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":"HTMLOListElement","subpath":"./components/List","extends":["HTMLAttributes<HTMLOListElement>","RefAttributes<HTMLOListElement>"],"deprecated":null,"props":{"asChild":{"type":"boolean","required":false,"default":"false","description":"Render as the single child element, merging List styling onto it\n(Layer-7 composition, #424). The element type is normally derived from\n`variant` (`<ol>` for ordered, else `<ul>`); `asChild` lets you supply\nyour own root element (e.g. a `<nav>`-wrapped list) while keeping the\n`styles.list` classes."},"children":{"type":"ReactNode","required":false,"default":null,"description":"List content (ListItem children)"},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class"},"divider":{"type":"boolean","required":false,"default":"false","description":"Show dividers between items"},"spacing":{"type":"\"sm\" | \"md\" | \"lg\"","required":false,"default":"'md'","description":"Spacing between items"},"variant":{"type":"ListVariant","required":false,"default":"'unordered'","description":"List style variant"}},"description":"A flexible list container supporting ordered, unordered, and plain variants. Works with ListItem components for consistent spacing and styling. @example <List variant=\"unordered\" divider>   <ListItem>First item</ListItem>   <ListItem>Second item</ListItem> </List>","examples":[],"composes":{"children":{"accepts":"ListItem","as":"ReactNode"}},"appliesClassNames":null},"ListItem":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLLIElement","subpath":"./components/List","extends":["HTMLAttributes<HTMLLIElement>","RefAttributes<HTMLLIElement>"],"deprecated":null,"props":{"actions":{"type":"ReactNode","required":false,"default":null,"description":"Actions to display after content"},"active":{"type":"boolean","required":false,"default":"false","description":"Highlight as active/selected"},"disabled":{"type":"boolean","required":false,"default":"false","description":"Disable interaction"},"icon":{"type":"ReactNode","required":false,"default":null,"description":"Icon to display before content"},"onClick":{"type":"(() => void)","required":false,"default":null,"description":"Make the item clickable"}},"description":"Individual item in a List with optional icon, actions, and interactive states. Can be clickable, active, or disabled. @example <ListItem icon={<UserIcon />} onClick={() => {}}>   Click me </ListItem>","examples":[],"composes":null,"appliesClassNames":null},"Mark":{"kind":"component","category":"Typography","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":"HTMLElement","subpath":"./components/Mark","extends":["HTMLAttributes<HTMLElement>","RefAttributes<HTMLElement>"],"deprecated":null,"props":{"asChild":{"type":"boolean","required":false,"default":"false","description":"Render as the single child element, merging Mark styling onto it\n(Layer-7 composition, #424). The tinted `styles.mark` class lands on\nthe rendered child."},"children":{"type":"ReactNode","required":true,"default":null,"description":"Highlighted content."}},"description":"Semantic `<mark>` wrapper with a brand-tinted background — the design system's replacement for the browser's default fluorescent yellow. Ideal for search-result highlighting, inline annotations, and call-outs. @example <Text>The keyword <Mark>tokens</Mark> appears here.</Text> @example // Layer-7 composition (#424): keep the highlight styling on your own element. <Mark asChild><span role=\"note\">flagged</span></Mark>","examples":[],"composes":null,"appliesClassNames":null},"Markdown":{"kind":"component","category":"Content Display","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Markdown","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class"},"content":{"type":"string","required":true,"default":null,"description":"Markdown content to render"},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline style overrides merged onto the wrapper element."}},"description":"Renders markdown content with GitHub-Flavored Markdown (GFM) support and built-in XSS sanitization. Internals are powered by `react-markdown` + `remark-gfm` + `rehype-sanitize` (default GitHub-style schema). Public API (preserved from the v0.8.x hand-rolled parser):   - `content: string` — raw markdown source   - `className?: string` — extra class on the wrapper `<div>` Notes for consumers: - All HTML output is sanitized. `<script>` tags, inline event handler   attributes (`onerror`, `onclick`, `onload`, ...), and unsafe URL   protocols (`javascript:`, `data:`) are stripped before render. - Fe","examples":[],"composes":null,"appliesClassNames":null},"Modal":{"kind":"component","category":"Overlay & Interactive","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDialogElement","subpath":"./components/Modal","extends":["HTMLAttributes<HTMLDialogElement>","RefAttributes<HTMLDialogElement>"],"deprecated":null,"props":{"accent":{"type":"boolean","required":false,"default":"true","description":"Render the 3px brand-medium top-accent line at the top of the modal\n(Sprint 10 #59). Default: `true`. A visible-but-not-dominant brand\nsignature that caps the modal's rounded top edge. Pass\n`accent={false}` to suppress it — useful inside branded app shells\nwhere the accent would read as visual clutter. Ignored for\n`size=\"fullscreen\"` (the accent line is hidden there by CSS)."},"children":{"type":"ReactNode","required":true,"default":null,"description":"Modal content"},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class"},"closeOnEscape":{"type":"boolean","required":false,"default":"true","description":"Close modal when pressing Escape"},"closeOnOverlayClick":{"type":"boolean","required":false,"default":"true","description":"Close the modal when clicking the overlay. Default `true`.\n\nTrust boundary (#325): fine for dismissible / confirmation modals, but for a\nDESTRUCTIVE-confirm dialog set this `false` (and consider `closeOnEscape={false}`)\nso a mis-aimed or clickjacked overlay click can't dismiss the dialog into its\ndefault (often destructive) path."},"footer":{"type":"ReactNode","required":false,"default":null,"description":"Footer content (e.g., action buttons)"},"isOpen":{"type":"boolean","required":true,"default":null,"description":"Whether the modal is open"},"onClose":{"type":"() => void","required":true,"default":null,"description":"Callback when modal should close"},"showCloseButton":{"type":"boolean","required":false,"default":"true","description":"Show close button in header"},"size":{"type":"\"sm\" | \"md\" | \"lg\" | \"xl\" | \"fullscreen\"","required":false,"default":"'md'","description":"Size of the modal"},"title":{"type":"string","required":false,"default":null,"description":"Modal title"}},"description":"Modal/Dialog Component A flexible modal dialog backed by the native `<dialog>` element with `showModal()` — the browser owns top-layer promotion, the `::backdrop` pseudo-element, the focus trap, the `inert` background, and the Escape dismissal. Our remaining responsibilities are:   - bridging the controlled `isOpen` prop ↔ native `close` / `cancel` events   - manual body scroll-lock (the platform doesn't lock page scroll on its own)   - manual backdrop-click detection (the platform does NOT auto-dismiss on     backdrop click; we use the trick that a click whose target IS the dialog     element","examples":[],"composes":null,"appliesClassNames":null},"MultiSelect":{"kind":"component","category":"Core & Form","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLInputElement","subpath":"./components/Combobox","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLInputElement>"],"deprecated":null,"props":{"className":{"type":"string","required":false,"default":null,"description":"Extra class on the outer container."},"defaultValue":{"type":"string[]","required":false,"default":null,"description":"Initial uncontrolled selection. Ignored when `value` is set."},"disabled":{"type":"boolean","required":false,"default":"false","description":"Disable all interaction."},"emptyMessage":{"type":"string","required":false,"default":"No results","description":"Message rendered when the filtered list is empty."},"id":{"type":"string","required":false,"default":null,"description":"Stable id for the input — auto-generated if omitted."},"label":{"type":"string","required":false,"default":null,"description":"Label rendered above the input."},"loading":{"type":"boolean","required":false,"default":"false","description":"Show a spinner in the listbox area. Wire to async fetch state."},"maxSelectable":{"type":"number","required":false,"default":null,"description":"Hard upper bound on selection count."},"name":{"type":"string","required":false,"default":null,"description":"HTML form field name. When provided, one hidden `<input>` is rendered\nper selected value so `FormData.getAll(name)` returns the array —\nmatching `Select` multi-select and `TagInput`."},"onChange":{"type":"((value: string[]) => void)","required":false,"default":null,"description":"Notified with the new selection array on every change."},"onSearch":{"type":"((query: string) => void)","required":false,"default":null,"description":"Async filter callback. When provided, we fire on every keystroke and\ndelegate filtering to the consumer (same contract as `Combobox.onSearch`)."},"options":{"type":"ComboboxOption[]","required":true,"default":null,"description":"Available options. In async mode, this is the consumer-filtered subset."},"placeholder":{"type":"string","required":false,"default":null,"description":"Placeholder shown when nothing is selected and the input is empty."},"size":{"type":"ComboboxSize","required":false,"default":"'md'","description":"Visual size scale. Default: \"md\"."},"value":{"type":"string[]","required":false,"default":null,"description":"Controlled selection — array of option values."}},"description":"MultiSelect — searchable multi-select with chip display (#310). Variant of {@link Combobox} that holds an array of selected values and renders them as removable chips INSIDE the combobox affordance. Selecting an already-selected option toggles it off; Backspace at an empty input removes the last chip (matching the convention shadcn / Mantine / `react-select` all use). Why a separate component (not a `multiple` prop on Combobox) ------------------------------------------------------------ The UX shape diverges enough that branching on a `multiple` prop produces a worse API than two focused comp","examples":[],"composes":null,"appliesClassNames":null},"NavTabs":{"kind":"component","category":"Navigation & Chrome","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":"HTMLElement","subpath":"./components/NavTabs","extends":["HTMLAttributes<HTMLElement>","RefAttributes<HTMLElement>"],"deprecated":null,"props":{"aria-label":{"type":"string","required":false,"default":"'Primary'","description":"Accessible label for the navigation landmark. Defaults to `\"Primary\"`."},"children":{"type":"ReactNode","required":true,"default":null,"description":"`<NavTabs.Item>` elements."},"className":{"type":"string","required":false,"default":null,"description":"Additional className merged onto the `<nav>` root."},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline styles merged onto the `<nav>` root.\n(Inherited type from `HTMLAttributes`; restated here for docs.)"}},"description":"NavTabs Component (#377) Horizontal area-switcher for app top-bars and section navigation. Absorbs the `.topbar-area-link` pattern that consumers (e.g. landolabs-lab ClientShell) were hand-rolling from raw `<Link>` + a 2px brand underline. ## NavTabs vs. Tabs — important distinction `<NavTabs>` is the NAVIGATION pattern: a row of links that route the user between pages / app areas. Each item is a real anchor (or a routed child via `asChild`), and the active state is **consumer-driven** (you pass `active` because you know the current route). `<Tabs>` (existing) is the PANEL-SWITCHING pattern: t","examples":[],"composes":{"children":{"accepts":"NavTabsItem","as":"ReactNode"}},"appliesClassNames":null},"NavTabsItem":{"kind":"component","category":"Navigation & Chrome","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":"HTMLElement","subpath":"./components/NavTabs","extends":["RefAttributes<HTMLElement>"],"deprecated":null,"props":{},"description":"NavTabs.Item (#377) A single navigation item within `<NavTabs>`. Renders a real anchor (or a routed child via `asChild`) with optional icon + badge slots and a consumer-driven `active` state (2px underline + `aria-current=\"page\"`). Lives in its own file (matching BottomNavItem/SidebarNavItem/BreadcrumbItem) so its `asChild` polymorphism is attributed to `NavTabsItem` alone and does not leak onto the `<NavTabs>` container in `meta.json` (#509). See `NavTabs.tsx` for usage examples.","examples":[],"composes":null,"appliesClassNames":null},"NumberInput":{"kind":"component","category":"Core & Form","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLInputElement","subpath":"./components/NumberInput","extends":["HTMLAttributes<HTMLInputElement>","RefAttributes<HTMLInputElement>"],"deprecated":null,"props":{"allowNegative":{"type":"boolean","required":false,"default":"true","description":"When false, the `-` key is rejected and pasted negatives clamp to min/0."},"containerClassName":{"type":"string","required":false,"default":null,"description":"ClassName applied to the outer container."},"defaultValue":{"type":"number","required":false,"default":null,"description":"Uncontrolled initial value."},"disabled":{"type":"boolean","required":false,"default":"false","description":"Disabled state (also sets aria-disabled)."},"error":{"type":"string","required":false,"default":null,"description":"Error message — when set, the input goes into the invalid state."},"helperText":{"type":"string","required":false,"default":null,"description":"Helper text below the input. Suppressed when `error` is set."},"label":{"type":"string","required":false,"default":null,"description":"Label rendered above the input."},"max":{"type":"number","required":false,"default":null,"description":"Maximum allowed value. Clamped on blur and stepping."},"min":{"type":"number","required":false,"default":null,"description":"Minimum allowed value. Clamped on blur and stepping."},"onChange":{"type":"((value: number) => void)","required":false,"default":null,"description":"Called when the value changes. Receives `undefined` when the field is\ncleared — distinct from `0` — following the #328 Select convention."},"placeholder":{"type":"string","required":false,"default":null,"description":"Placeholder text."},"precision":{"type":"number","required":false,"default":"0","description":"Decimal places to enforce on blur. Defaults to 0 (integer)."},"readOnly":{"type":"boolean","required":false,"default":"false","description":"Read-only state."},"showSteppers":{"type":"boolean","required":false,"default":"true","description":"Show the +/- stepper buttons on the right. Defaults to true."},"size":{"type":"NumberInputSize","required":false,"default":"'md'","description":"Size of the input + steppers."},"step":{"type":"number","required":false,"default":"1","description":"Step amount for steppers, arrow keys, and PageUp/Down. Defaults to 1."},"value":{"type":"number","required":false,"default":null,"description":"Controlled numeric value. Pass `undefined` for empty."}},"description":"A numeric input with stepper buttons, min/max clamping, configurable precision, and ARIA spinbutton semantics. Distinct from <Input type=\"number\"> which has well-known a11y/styling issues (mobile keyboard quirks, accidental scroll-wheel mutation, UA stepper styling battles, locale parsing). Sprint 54 (#309) — Lane B of v0.33.0. @example // Controlled <NumberInput   label=\"Quantity\"   value={qty}   onChange={(n) => setQty(n)}   min={0}   max={99} /> @example // Decimal with precision <NumberInput   label=\"Price\"   defaultValue={9.99}   step={0.01}   precision={2}   min={0} />","examples":[],"composes":null,"appliesClassNames":null},"PageHeader":{"kind":"component","category":"Navigation & Chrome","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":"HTMLElement","subpath":"./components/PageHeader","extends":["HTMLAttributes<HTMLElement>","RefAttributes<HTMLElement>"],"deprecated":null,"props":{"actions":{"type":"ReactNode","required":false,"default":null,"description":"Optional actions slot rendered to the right of the title (drops below on mobile)."},"breadcrumbs":{"type":"ReactNode","required":false,"default":null,"description":"Optional breadcrumbs slot rendered above the title."},"children":{"type":"ReactNode","required":false,"default":null,"description":"Escape hatch: when `children` is provided, the `title` /\n`subtitle` / `breadcrumbs` / `actions` props are ignored and\n`children` render inside the layout wrapper instead."},"subtitle":{"type":"ReactNode","required":false,"default":null,"description":"Optional subtitle rendered below the title. Accepts a string or ReactNode."},"title":{"type":"ReactNode","required":false,"default":null,"description":"Main page title. Renders as `<h1>` by default (override with `titleAs`).\nAccepts a string or a ReactNode — pass `<Inline>`/`<Badge>` etc. when\nthe title row needs inline adornments while keeping the structured\nbreadcrumbs/subtitle/actions slots intact (#255)."},"titleAs":{"type":"4 | 1 | 2 | 3 | 5 | 6","required":false,"default":"1","description":"Semantic heading level for the title. Default `1`."},"titleSize":{"type":"\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"","required":false,"default":"'2xl'","description":"Visual size for the title heading. Default `'2xl'` — the app\npage-title scale per #43 DS-MOD-1. Matches the `Heading`\ncomponent's `size` prop."}},"description":"A page-level header primitive that absorbs the title + optional subtitle + optional breadcrumbs + optional actions pattern that consumer apps rebuild on every route. Renders a semantic `<header>` element and composes the existing `Heading` + `Text` primitives. Default title size is `'2xl'` per #43 DS-MOD-1 — that's the app page-title scale (~25px), NOT the marketing hero scale. Layout: two-column row — title column (left, flex-grow) with breadcrumbs above and subtitle below the title, and an actions slot on the right. Actions drop below the title on narrow viewports (<640px). @example <PageHea","examples":[],"composes":null,"appliesClassNames":null},"Pagination":{"kind":"component","category":"Navigation & Chrome","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLElement","subpath":"./components/Pagination","extends":["HTMLAttributes<HTMLElement>","RefAttributes<HTMLElement>"],"deprecated":null,"props":{"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class merged onto the `<nav>` root."},"currentPage":{"type":"number","required":true,"default":null,"description":"Current active page (1-indexed)"},"disabled":{"type":"boolean","required":false,"default":"false","description":"Disable all interactions"},"onPageChange":{"type":"(page: number) => void","required":true,"default":null,"description":"Callback when page changes"},"renderItem":{"type":"((page: number, ctx: { isActive: boolean; disabled: boolean; }) => ReactNode)","required":false,"default":null,"description":"Custom renderer for page number items. When provided, replaces the\ndefault `<button onClick>` with whatever the consumer returns. Enables\nURL-driven pagination (e.g., `<Link href={...}>`) with next/link or\nreact-router. The renderer receives the page number + a label + helpers\nand should apply its result WITHIN the provided `<li>` wrapper (or\nreturn the inner content and let Pagination wrap it).\n@example import Link from 'next/link'\n<Pagination\n  currentPage={page}\n  totalPages={10}\n  onPageChange={() => {}}\n  renderItem={(page, { isActive }) => (\n    <Link href={`?page=${page}`} aria-current={isActive ? 'page' : undefined}>\n      {page}\n    </Link>\n  )}\n/>"},"showFirstLast":{"type":"boolean","required":false,"default":"true","description":"Show first and last page buttons"},"showPrevNext":{"type":"boolean","required":false,"default":"true","description":"Show previous and next buttons"},"siblingCount":{"type":"number","required":false,"default":"1","description":"Number of pages to show around current page"},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline styles merged onto the `<nav>` root.\n(Inherited type from `HTMLAttributes`; restated here for docs.)"},"totalPages":{"type":"number","required":true,"default":null,"description":"Total number of pages"}},"description":"Navigation for paginated content with smart page range calculation. Shows ellipsis for skipped pages and keyboard navigation support. @example <Pagination   currentPage={5}   totalPages={10}   onPageChange={(page) => console.log(page)} />","examples":[],"composes":null,"appliesClassNames":null},"PieChart":{"kind":"component","category":"Data Visualization","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":null,"subpath":"./components/PieChart","extends":["HTMLAttributes"],"deprecated":null,"props":{"activeIndex":{"type":"number","required":false,"default":null,"description":"Active segment index"},"animationDuration":{"type":"number","required":false,"default":"300"},"aspectRatio":{"type":"number","required":false,"default":null},"colorScheme":{"type":"ColorScheme","required":false,"default":"'brand'"},"colors":{"type":"string[]","required":false,"default":null},"data":{"type":"ChartDataPoint[]","required":true,"default":null},"dataKey":{"type":"string","required":true,"default":null,"description":"Key for the value data"},"description":{"type":"string","required":false,"default":null},"empty":{"type":"boolean","required":false,"default":null},"error":{"type":"string","required":false,"default":null},"height":{"type":"string | number","required":false,"default":null},"innerRadius":{"type":"number","required":false,"default":"0","description":"Inner radius (0 for full pie)"},"interactive":{"type":"boolean","required":false,"default":null},"labelType":{"type":"\"value\" | \"percent\" | \"name\"","required":false,"default":"'percent'","description":"Label type (percent, value, name)"},"legendPosition":{"type":"LegendPosition","required":false,"default":null},"loading":{"type":"boolean","required":false,"default":null},"nameKey":{"type":"string","required":true,"default":null,"description":"Key for the label/name data"},"onDataPointClick":{"type":"((data: ChartDataPoint) => void)","required":false,"default":null,"description":"Click handler for individual data points. The payload shape is\nRecharts-defined and varies by chart type; consumers should narrow at\ntheir use site."},"onLegendClick":{"type":"((dataKey: string) => void)","required":false,"default":null},"onSliceClick":{"type":"((data: PieSliceClickData, index: number) => void)","required":false,"default":null,"description":"Callback when slice is clicked"},"outerRadius":{"type":"number","required":false,"default":"80","description":"Outer radius"},"paddingAngle":{"type":"number","required":false,"default":"2","description":"Padding angle between segments"},"showLabels":{"type":"boolean","required":false,"default":"true","description":"Show labels on segments"},"showLegend":{"type":"boolean","required":false,"default":"true"},"showTooltip":{"type":"boolean","required":false,"default":"true"},"title":{"type":"string","required":false,"default":null,"description":"Visible / data-table caption text. Note this also satisfies the native\n`title` attribute from `HTMLAttributes<HTMLDivElement>` (both are `string`)."},"variant":{"type":"\"default\" | \"brand\" | \"gradient\"","required":false,"default":null},"width":{"type":"string | number","required":false,"default":null,"description":"Intended outer width. Forwarded by sub-charts to their Recharts layout;\nthe base `Chart` wrapper itself always renders a 100%-width responsive\ncontainer and does not read this."}},"description":"Pie chart for visualizing proportions and percentages with brand colors. Supports custom labels and interactive segments. @example <PieChart   data={distributionData}   dataKey=\"value\"   nameKey=\"name\"   colorScheme=\"teal\"   showLabels   height={300} />","examples":[],"composes":null,"appliesClassNames":null},"Popover":{"kind":"component","category":"Overlay & Interactive","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Popover","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class"},"content":{"type":"ReactNode","required":true,"default":null,"description":"Popover content"},"defaultOpen":{"type":"boolean","required":false,"default":"false","description":"Initial open state for uncontrolled mode (#329). Ignored when\n`open` is set."},"offset":{"type":"number","required":false,"default":"8","description":"Distance from trigger in pixels"},"onOpenChange":{"type":"((open: boolean) => void)","required":false,"default":null,"description":"Open/close callback (#329). Fires for both controlled and\nuncontrolled mode whenever the popover would change visibility\n(trigger click, hover enter/leave, Escape, outside click)."},"open":{"type":"boolean","required":false,"default":null,"description":"Controlled-open state (#329). When provided, Popover becomes a\ncontrolled component — `open` drives visibility and the consumer\nis responsible for flipping it via `onOpenChange`. Pair with\n`onOpenChange` so internal triggers (click/hover/Escape) can\nreport state back."},"placement":{"type":"\"top\" | \"right\" | \"bottom\" | \"left\"","required":false,"default":"'top'","description":"Preferred placement"},"showArrow":{"type":"boolean","required":false,"default":"true","description":"Show arrow pointer"},"trigger":{"type":"ReactNode","required":true,"default":null,"description":"Element that triggers the popover"},"triggerOn":{"type":"\"hover\" | \"click\"","required":false,"default":"'hover'","description":"Trigger mode"}},"description":"A flexible popover that displays rich content on hover or click. Features smart positioning, arrow pointer, and portal rendering. ## Positioning contract Popover honors the consumer's `placement` prop (top / bottom / left / right) with viewport-aware flip-to-opposite fallback, using the shared `calculatePosition` utility. The measurement timing mirrors the shared `usePortalPosition` hook used by Dropdown / Select / Tooltip — a `useLayoutEffect` + `requestAnimationFrame` retry loop that keeps trying until both trigger and overlay refs are attached to the DOM. - **No flash at (0, 0)**: overlay s","examples":[],"composes":null,"appliesClassNames":null},"Portal":{"kind":"component","category":"Overlay & Interactive","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":null,"subpath":"./components/Portal","extends":null,"deprecated":null,"props":{"children":{"type":"ReactNode","required":true,"default":null,"description":"Content to render in the portal"},"container":{"type":"Element | null","required":false,"default":null,"description":"Container element to render into (defaults to document.body)"}},"description":"Renders children into a DOM node that exists outside the parent component's DOM hierarchy. Essential for modals, toasts, dropdowns, and tooltips to avoid z-index and overflow issues. @example <Portal>   <Modal>Content</Modal> </Portal> <Portal container={customElement}>   <Tooltip>Tooltip content</Tooltip> </Portal>","examples":[],"composes":null,"appliesClassNames":null},"Progress":{"kind":"component","category":"Feedback & Status","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Progress","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"className":{"type":"string","required":false,"default":null,"description":"Container className"},"color":{"type":"\"success\" | \"warning\" | \"error\" | \"primary\"","required":false,"default":"'primary'","description":"Color theme"},"indeterminate":{"type":"boolean","required":false,"default":"false","description":"Indeterminate state (for unknown progress)"},"label":{"type":"string","required":false,"default":null,"description":"Label text displayed above progress"},"showValue":{"type":"boolean","required":false,"default":"false","description":"Show percentage value"},"size":{"type":"\"sm\" | \"md\" | \"lg\"","required":false,"default":"'md'","description":"Size of the progress indicator"},"value":{"type":"number","required":false,"default":"0","description":"Progress value (0-100) - optional when indeterminate is true"},"variant":{"type":"\"circle\" | \"bar\" | \"dots\"","required":false,"default":"'bar'","description":"Visual variant"}},"description":"A versatile progress indicator with multiple variants (bar, circle, dots). Features brand-themed gradient fills and smooth animations. @example <Progress value={65} /> <Progress value={80} variant=\"circle\" size=\"lg\" /> <Progress indeterminate variant=\"dots\" /> <Progress value={45} color=\"success\" showValue label=\"Upload progress\" />","examples":[],"composes":null,"appliesClassNames":null},"PullQuote":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":"HTMLQuoteElement","subpath":"./components/ArticleCard","extends":["HTMLAttributes<HTMLQuoteElement>","RefAttributes<HTMLQuoteElement>"],"deprecated":null,"props":{"attribution":{"type":"ReactNode","required":false,"default":null,"description":"Optional attribution rendered below the quote in muted byline style."},"children":{"type":"ReactNode","required":true,"default":null,"description":"Quote text."}},"description":"Editorial pull-quote — a `<blockquote>` rendered with italic serif type, indentation, and a left-border accent rule (using --color-editorial-rule which inherits from --color-border-subtle so dark mode propagates). Standalone export: drop into any prose layout to highlight a quote. Also composed internally by ArticleCard when the consumer passes a `pullQuote` prop. @example <PullQuote>\"The most striking thing was how predictable it all became.\"</PullQuote> @example // With attribution: <PullQuote cite=\"A. Lovelace\">   \"The Analytical Engine has no pretensions whatever to originate anything.\" </","examples":[],"composes":null,"appliesClassNames":null},"Radio":{"kind":"component","category":"Core & Form","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLInputElement","subpath":"./components/Radio","extends":["HTMLAttributes<HTMLInputElement>","RefAttributes<HTMLInputElement>"],"deprecated":null,"props":{"children":{"type":"ReactNode","required":false,"default":null,"description":"Label content displayed next to the radio.\nPreferred over `label` — matches React ecosystem convention and\nsupports rich content (formatted text, icons, etc.).\nWhen both `children` and `label` are provided, `children` wins."},"containerClassName":{"type":"string","required":false,"default":null,"description":"Container className for styling wrapper"},"label":{"type":"ReactNode","required":false,"default":null,"description":"Label text displayed next to radio.\nRetained for backward compatibility; new code should use `children`."},"value":{"type":"string","required":true,"default":null,"description":"Value for this radio option"}},"description":"A radio button component that must be used within a RadioGroup. Features a subtle selection animation and full keyboard accessibility. Accepts either `children` (recommended — matches React ecosystem convention) or `label` (kept for backward compatibility) to render the radio label. When both are provided, `children` takes precedence. @example // Recommended: children pattern (matches Radix, shadcn/ui, MUI) <RadioGroup name=\"size\" value={value} onChange={setValue}>   <Radio value=\"sm\">Small</Radio>   <Radio value=\"md\">Medium</Radio>   <Radio value=\"lg\"><strong>Large</strong> (most popular)</Ra","examples":[],"composes":null,"appliesClassNames":null},"RadioGroup":{"kind":"component","category":"Core & Form","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Radio","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"children":{"type":"ReactNode","required":true,"default":null,"description":"Children (Radio components)"},"className":{"type":"string","required":false,"default":null,"description":"Container className"},"defaultValue":{"type":"string","required":false,"default":null,"description":"Default value for uncontrolled mode"},"disabled":{"type":"boolean","required":false,"default":"false","description":"Disable all radio buttons in the group"},"error":{"type":"string","required":false,"default":null,"description":"Error message - when provided, group enters error state"},"name":{"type":"string","required":true,"default":null,"description":"Name attribute for all radio buttons in this group"},"onChange":{"type":"((value: string) => void)","required":false,"default":null,"description":"Callback when value changes"},"orientation":{"type":"\"horizontal\" | \"vertical\"","required":false,"default":"'vertical'","description":"Layout orientation"},"value":{"type":"string","required":false,"default":null,"description":"Controlled value"}},"description":"A container component that manages a group of radio buttons with keyboard navigation. Provides context for child Radio components. @example <RadioGroup name=\"size\" value={value} onChange={setValue}>   <Radio value=\"sm\" label=\"Small\" />   <Radio value=\"md\" label=\"Medium\" />   <Radio value=\"lg\" label=\"Large\" /> </RadioGroup>","examples":[],"composes":{"children":{"accepts":"Radio","as":"ReactNode"}},"appliesClassNames":null},"ScrollArea":{"kind":"component","category":"Layout Primitives","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/ScrollArea","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"children":{"type":"ReactNode","required":true,"default":null,"description":"Content to render inside the scroller."},"maxHeight":{"type":"string | number","required":false,"default":null,"description":"Maximum height of the scroller. **Required for vertical scrolling to\nengage** — without a cap, the wrapper grows with its content and there is\nnothing to scroll. Accepts a number (px) or any CSS length string\n(`'50vh'`, `'320px'`, `'clamp(20rem, 50vh, 40rem)'`)."},"orientation":{"type":"ScrollAreaOrientation","required":false,"default":"'vertical'","description":"Which axes scroll.\n\n- `'vertical'` (default) — overflow on the Y axis, hidden on X.\n- `'horizontal'` — overflow on X, hidden on Y.\n- `'both'` — overflow on both axes."},"scrollbarMode":{"type":"ScrollAreaMode","required":false,"default":"'overlay'","description":"Scrollbar layout behaviour.\n\n- `'overlay'` (default) — scrollbar floats on top of content (macOS-style).\n  No layout shift; content can briefly sit under the bar.\n- `'inset'` — scrollbar takes its own layout space (classic Windows).\n  Content never sits under the bar; introduces a fixed scrollbar gutter.\n- `'auto'` — `'overlay'` on touch / coarse-pointer devices, `'inset'`\n  otherwise. Useful when content density makes overlap unacceptable on\n  desktop but you still want clean mobile behaviour."},"scrollbarVisibility":{"type":"ScrollAreaVisibility","required":false,"default":"'hover'","description":"When the scrollbar is visible.\n\n- `'hover'` (default) — fades in on container hover/focus.\n- `'always'` — visible whenever the content overflows.\n- `'scroll'` — visible while actively scrolling (browser default behaviour\n  on macOS).\n\nNOTE: `'scroll'` defers to the browser's native auto-hide heuristics —\nwe don't try to JS-detect \"is the user scrolling right now\". Behaviour is\ntherefore browser-driven and may differ across OSes."}},"description":"Wraps content in a scroller with a brand-consistent custom scrollbar. Built on **native** `overflow: auto` + styled `::-webkit-scrollbar-*` and Firefox `scrollbar-width`/`scrollbar-color` — no JS overrides — so:   - Momentum + touch scrolling stay native (critical on iOS/Android)   - Screen-reader and keyboard scrolling work without intervention   - Zero bundle/runtime cost beyond the wrapping `<div>` The trade-off: cross-browser scrollbars are not pixel-identical. We use the DS color tokens for thumb/track so the *brand* reads through consistently (light/dark aware via the `[data-theme='dark'","examples":[],"composes":null,"appliesClassNames":null},"SegmentedControl":{"kind":"component","category":"Core & Form","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/SegmentedControl","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class on the visual root (the `role=\"tablist\"` control).\n\n#422 — `className` now lands on the tablist control element (the visual\nroot carrying the border, padding, and size styles), not the outer\n`.sizer` container-query wrapper. To style the outer wrapper (margin,\ngrid placement, positioning) use {@link SegmentedControlProps.wrapperClassName}."},"defaultValue":{"type":"string","required":false,"default":null,"description":"Initial selected value for uncontrolled usage. Ignored when `value` is\nprovided. Omit both to start with no selection."},"disabled":{"type":"boolean","required":false,"default":null,"description":"Disable all options"},"fullWidth":{"type":"boolean","required":false,"default":null,"description":"Make control take full width"},"onChange":{"type":"((value: string) => void)","required":false,"default":null,"description":"Callback when selection changes. Fires in both controlled and uncontrolled\nmodes (in uncontrolled mode it is an optional observer)."},"options":{"type":"SegmentedControlOption[]","required":true,"default":null,"description":"Array of options to display"},"size":{"type":"\"sm\" | \"md\" | \"lg\"","required":false,"default":null,"description":"Size variant"},"value":{"type":"string","required":false,"default":null,"description":"Currently selected value (controlled). When provided, the component is\ncontrolled and the consumer owns the selection via {@link SegmentedControlProps.onChange}."},"wrapperClassName":{"type":"string","required":false,"default":null,"description":"Escape hatch: extra class on the OUTER `.sizer` wrapper (#270). The\nwrapper is a full-width (`width: 100%`), unstyled container-query host that\nfills the parent's inline size (#463); target it for layout overrides\n(margin, positioning, grid placement)\nthat previously rode on `className`."},"wrapperStyle":{"type":"CSSProperties","required":false,"default":null,"description":"Escape hatch: inline style on the outer `.sizer` wrapper."}},"description":"A button group for switching between modes/views with subtle animations. Features smooth transitions and keyboard navigation. @example <SegmentedControl   options={[     { value: 'list', label: 'List', icon: <ListIcon /> },     { value: 'grid', label: 'Grid', icon: <GridIcon /> }   ]}   value={view}   onChange={setView} />","examples":[],"composes":null,"appliesClassNames":null},"Select":{"kind":"component","category":"Core & Form","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":null,"subpath":"./components/Select","extends":["HTMLAttributes<HTMLDivElement>"],"deprecated":null,"props":{"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class"},"clearable":{"type":"boolean","required":false,"default":null,"description":"Enable clear button"},"defaultValue":{"type":"T | T[]","required":false,"default":null,"description":"Initial value(s) for uncontrolled usage. Ignored when `value` is provided.\nOmit both for an uncontrolled Select that starts empty."},"disabled":{"type":"boolean","required":false,"default":null,"description":"Disabled state"},"error":{"type":"string","required":false,"default":null,"description":"Error message"},"label":{"type":"string","required":false,"default":null,"description":"Label"},"loading":{"type":"boolean","required":false,"default":null,"description":"Loading state"},"maxHeight":{"type":"number","required":false,"default":null,"description":"Maximum dropdown height"},"multiple":{"type":"boolean","required":false,"default":null,"description":"Multiple selection"},"name":{"type":"string","required":false,"default":null,"description":"HTML form field name. When provided, a hidden `<input>` is rendered so\n`FormData` / Server Actions receive the value.\n\nSingle-select: one hidden input with the string-coerced value.\nMulti-select:  one hidden input **per selected value** so that\n`FormData.getAll(name)` returns a standard array — matching native\n`<select multiple>` behaviour."},"onChange":{"type":"((value: T | T[]) => void)","required":false,"default":null,"description":"Change handler. Fires in both controlled and uncontrolled modes.\n\nEmits `undefined` (single-select) or `[]` (multi-select) when the user\nclears via the clear button — distinct from \"user selected an option\nwhose value happens to be empty string.\" (#328)"},"options":{"type":"SelectOption<T>[]","required":true,"default":null,"description":"Available options"},"placeholder":{"type":"string","required":false,"default":null,"description":"Placeholder text"},"renderOption":{"type":"((option: SelectOption<T>) => ReactNode)","required":false,"default":null,"description":"Custom option renderer"},"searchable":{"type":"boolean","required":false,"default":null,"description":"Enable search/filter"},"value":{"type":"T | T[]","required":false,"default":null,"description":"Current value(s) — controlled. When provided, the consumer owns the\nselection via {@link SelectProps.onChange}.\n\nNote: a clearable single-select uses `undefined` as its \"cleared\" value\n(#328). Because `undefined` also signals \"uncontrolled,\" do **not** pass\nboth `value` and `defaultValue` — pick one mode (controlled *or*\nuncontrolled), matching React's own controlled/uncontrolled rule."}},"description":"A flexible dropdown select with search, keyboard navigation, and multi-select support. @example <Select   options={[     { label: 'Apple', value: 'apple' },     { label: 'Banana', value: 'banana' }   ]}   value=\"apple\"   onChange={(value) => console.log(value)}   searchable />","examples":[],"composes":null,"appliesClassNames":null},"Sidebar":{"kind":"component","category":"Navigation & Chrome","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLElement","subpath":"./components/Sidebar","extends":["HTMLAttributes<HTMLElement>","RefAttributes<HTMLElement>"],"deprecated":null,"props":{"aria-label":{"type":"string","required":false,"default":"Sidebar navigation","description":"Accessible label for the navigation landmark. Uses the native\n`aria-label` attribute (inherited from `HTMLAttributes`) — matches the\nReact-Aria / Radix convention. Default: \"Sidebar navigation\"."},"children":{"type":"ReactNode","required":true,"default":null,"description":"Sidebar content (primary navigation, etc.)."},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class on the outer `<aside>`."},"collapsed":{"type":"boolean","required":false,"default":null,"description":"Controlled collapsed state. Provide with `onCollapsedChange`."},"collapsedContent":{"type":"ReactNode","required":false,"default":null,"description":"Content rendered when the sidebar is collapsed (icon rail, compact nav, etc.).\nIf omitted, the sidebar collapses its width but keeps rendering `children`\n(consumers can use CSS to hide labels, etc.)."},"collapsedWidth":{"type":"string | number","required":false,"default":"'3.5rem'","description":"Width when collapsed (CSS length or number in px). Default: 3.5rem (56px)"},"collapsible":{"type":"boolean","required":false,"default":"true","description":"Enable the built-in collapse toggle button. Default: true"},"defaultCollapsed":{"type":"boolean","required":false,"default":null,"description":"Initial collapsed state for uncontrolled usage. Default: false"},"id":{"type":"string","required":false,"default":null,"description":"Explicit id (for aria-controls wiring). Auto-generated if omitted."},"mobileOpen":{"type":"boolean","required":false,"default":null,"description":"Controlled mobile-drawer open state (for <768px viewports)."},"onCollapsedChange":{"type":"((collapsed: boolean) => void)","required":false,"default":null,"description":"Callback fired when collapsed state changes."},"onMobileOpenChange":{"type":"((open: boolean) => void)","required":false,"default":null,"description":"Callback fired when mobile open state changes."},"overlay":{"type":"boolean","required":false,"default":"true","description":"Show a scrim/backdrop behind the mobile drawer. Default: true"},"persistKey":{"type":"string","required":false,"default":null,"description":"When provided, the collapsed state is persisted to localStorage under this key.\nOnly applies to uncontrolled usage (ignored if `collapsed` is provided)."},"position":{"type":"\"right\" | \"left\"","required":false,"default":"'left'","description":"Position of the sidebar"},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline styles merged onto the outer `<aside>`. The component sets\n`width` and the `--sidebar-width` custom property on that element to\ndrive the collapse animation; those two keys win over the consumer's\n`style` so the width contract stays intact. Every other style key\n(background, position, border, etc.) passes straight through.\n(Inherited type from `HTMLAttributes`; restated here for docs.)"},"variant":{"type":"\"flat\" | \"default\"","required":false,"default":"'default'","description":"Visual variant (#372 — API parity with Header).\n\n- `default`: subtle brand-foam gradient tint on the base surface (the\n  Sprint 10 brand-by-default behavior — gives every Sidebar a faint\n  themed warmth).\n- `flat`: pure surface background, no gradient. Use this when a custom\n  product theme makes the brand-tinted default read as a mismatched\n  patch, or when you want the pre-Sprint-10 plain look.\n\nThe strong \"branded rail\" gradient is still available via the\ninternal `gradient` class (not exposed as a variant — applied through\nthe `className` escape hatch for marketing layouts)."},"width":{"type":"string | number","required":false,"default":"'16rem'","description":"Width when expanded (CSS length or number in px). Default: 16rem"}},"description":"A responsive sidebar navigation with robust collapse behavior, a collapsed rail slot, and mobile overlay drawer. Designed to compose with <AppShell> but fully usable standalone. API surface: - Controlled: pass `collapsed` + `onCollapsedChange` - Uncontrolled: pass `defaultCollapsed` (component owns the state) - Persisted: pass `persistKey` to sync collapsed state to localStorage - Collapsed rail: pass `collapsedContent` to show a narrower icon-only view - Mobile overlay: automatically activated under 768px viewport with focus trap @example Controlled usage const [collapsed, setCollapsed] = use","examples":[],"composes":{"children":{"accepts":"SidebarNavItem","as":"ReactNode"}},"appliesClassNames":null},"SidebarNavItem":{"kind":"component","category":"Navigation & Chrome","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":true,"ref":"HTMLElement","subpath":"./components/Sidebar","extends":["HTMLAttributes<HTMLElement>","RefAttributes<HTMLElement>"],"deprecated":null,"props":{"active":{"type":"boolean","required":false,"default":"false","description":"Mark this item as the current page/active route.\nRenders with `aria-current=\"page\"` and active styling."},"asChild":{"type":"boolean","required":false,"default":"false","description":"Render the provided child element as the label node, merging\nclassName / onClick / aria-current / ref onto it via the Slot pattern.\nIntended for next/link integration:\n  `<SidebarNavItem asChild><Link href=\"/x\">Label</Link></SidebarNavItem>`\n\nWhen `asChild` is true, `href` is ignored — the child owns its routing.\nThe `icon` and `badge` props continue to work normally (they render\noutside the Slot, in the wrapping div)."},"badge":{"type":"ReactNode","required":false,"default":null,"description":"Optional trailing badge/chip (e.g. unread count `<Badge>3</Badge>`)."},"children":{"type":"ReactNode","required":true,"default":null,"description":"Label text — also used as Tooltip content in collapsed-rail mode."},"className":{"type":"string","required":false,"default":null,"description":"Additional className merged with internal styles on the OUTER wrapper\n`<div>` (the full item row — padding, hover/active background).\n\nNote: `style` and any other pass-through attributes (`data-*`, `aria-*`,\n`title`, …) land on the INNER label element instead — the `<a>` /\n`<button>` / slotted child — because that is the interactive node and the\ndocumented `asChild` Slot target. This split mirrors the existing runtime\nbehavior: className styles the row box; other attributes ride the link."},"collapsed":{"type":"boolean","required":false,"default":null,"description":"Collapsed-rail mode. Hides the label and badge; wraps the item in a\nTooltip (placement right) showing `children` as the label.\n\nWhen omitted, the value is inherited from the parent <Sidebar> via\ncontext (#391) — so a child renders in rail mode automatically whenever\nthe Sidebar is collapsed, with no consumer wiring. Pass an explicit\nboolean to override the inherited value (e.g. force rail mode in a\nstandalone usage outside a Sidebar parent)."},"href":{"type":"string","required":false,"default":null,"description":"URL to navigate to. Renders as `<a>` when provided and `asChild` is false.\nOmit when using `asChild` (the child element owns its own href)."},"icon":{"type":"ReactNode","required":false,"default":null,"description":"Optional leading icon — accepts any ReactNode so consumers can pass raw\nlucide-react components or DS `<Icon>` wrappers."},"onClick":{"type":"MouseEventHandler<HTMLElement>","required":false,"default":null,"description":"Click handler (fires alongside navigation)."}},"description":"A reusable navigation item primitive for sidebar navigation. Absorbs the repeated `.nav-item` CSS pattern that every consumer was rebuilding from scratch (e.g. landolabs-lab/globals.css). ## asChild pattern (Option B — recommended) When `asChild` is true, the inner **label portion** is slotted via the Slot component — the consumer's element (e.g. `<Link>`) receives the className, ref, onClick, and aria-current attributes, while the outer wrapper and the icon / badge slots remain in SidebarNavItem's control.   <SidebarNavItem icon={<Users />} badge={<Badge>3</Badge>} asChild>     <Link href=\"/c","examples":[],"composes":null,"appliesClassNames":null},"Skeleton":{"kind":"component","category":"Feedback & Status","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":"HTMLSpanElement","subpath":"./components/Skeleton","extends":["HTMLAttributes<HTMLSpanElement>","RefAttributes<HTMLSpanElement>"],"deprecated":null,"props":{"animation":{"type":"\"none\" | \"pulse\" | \"wave\"","required":false,"default":"'wave'","description":"Animation type"},"height":{"type":"string | number","required":false,"default":null,"description":"Height of the skeleton"},"variant":{"type":"\"text\" | \"circular\" | \"rectangular\"","required":false,"default":"'text'","description":"Shape variant of the skeleton"},"width":{"type":"string | number","required":false,"default":null,"description":"Width of the skeleton"}},"description":"Loading placeholder with a subtle wave animation. Provides visual feedback during content loading states. @example <Skeleton variant=\"text\" width=\"80%\" /> <Skeleton variant=\"circular\" width={40} height={40} /> <Skeleton variant=\"rectangular\" height={200} animation=\"wave\" />","examples":[],"composes":null,"appliesClassNames":null},"Slider":{"kind":"component","category":"Core & Form","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Slider","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"defaultValue":{"type":"SliderValue","required":false,"default":null,"description":"Uncontrolled initial value. Pass a tuple for range mode."},"disabled":{"type":"boolean","required":false,"default":"false","description":"Disable all interaction."},"formatValue":{"type":"((value: number) => string)","required":false,"default":null,"description":"Format the displayed value (used for tooltip + aria-valuetext)."},"label":{"type":"string","required":false,"default":null,"description":"Accessible label (also rendered visually above the track)."},"max":{"type":"number","required":false,"default":"100","description":"Inclusive upper bound. Default: 100."},"min":{"type":"number","required":false,"default":"0","description":"Inclusive lower bound. Default: 0."},"onChange":{"type":"((value: SliderValue) => void)","required":false,"default":null,"description":"Fires on every committed value change. Signature matches the mode."},"showValue":{"type":"boolean","required":false,"default":"false","description":"Render the current value as a tooltip on the active thumb."},"size":{"type":"\"sm\" | \"md\" | \"lg\"","required":false,"default":"'md'","description":"Size variant."},"step":{"type":"number","required":false,"default":"1","description":"Step increment. Default: 1."},"value":{"type":"SliderValue","required":false,"default":null,"description":"Controlled value. Pass a `[min, max]` tuple to render range mode."}},"description":"A range input slider with single-value or dual-thumb (range) mode. Built on a custom thumb with role=\"slider\" (not native <input type=\"range\">) so we can support range mode and consistent token-driven styling across browsers. Modes are inferred from the value shape:   - `value` / `defaultValue` is a number → single-thumb mode   - `value` / `defaultValue` is `[min, max]` tuple → range (two-thumb) mode @example Single <Slider defaultValue={50} min={0} max={100} step={1} label=\"Volume\" /> @example Range <Slider defaultValue={[20, 80]} label=\"Price range\" showValue /> @example Controlled <Slider v","examples":[],"composes":null,"appliesClassNames":null},"Slot":{"kind":"component","category":"Overlay & Interactive","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLElement","subpath":"./components/Slot","extends":["HTMLAttributes<HTMLElement>","RefAttributes<HTMLElement>"],"deprecated":null,"props":{},"description":"Minimal slot implementation for composable component APIs. Enables `asChild` patterns — merges a component's props onto its single React element child, rather than rendering a new DOM node. Compatible with the Radix UI Slot API surface but hand-rolled to avoid the extra dependency. @example // Inside a component: const Comp = asChild ? Slot : 'button' return <Comp className={styles.button} {...props}>{children}</Comp> // Consumer: <Button asChild>   <Link href=\"/foo\">Go</Link> </Button> // Renders <a href=\"/foo\" class=\"{...button styles}\">Go</a>","examples":[],"composes":null,"appliesClassNames":null},"Spacer":{"kind":"component","category":"Layout Primitives","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":"HTMLSpanElement","subpath":"./components/Spacer","extends":["HTMLAttributes<HTMLSpanElement>","RefAttributes<HTMLSpanElement>"],"deprecated":null,"props":{"asChild":{"type":"boolean","required":false,"default":"false","description":"Render as the single child element, merging Spacer styling onto it\n(Layer-7 composition, #424). Pass a single element as `children`; the\n`styles.spacer` class and `aria-hidden` land on it."},"axis":{"type":"\"horizontal\" | \"vertical\"","required":false,"default":"'horizontal'","description":"Visual orientation hint — sets the corresponding minimum dimension so\nthe spacer renders even when the parent isn't flex. In a flex parent\nthe `flex: 1 1 auto` rule does the work; the prop is purely a no-op\noutside flex contexts. Defaults to `'horizontal'`."},"children":{"type":"ReactNode","required":false,"default":null,"description":"Child element to render when `asChild` is true. Ignored otherwise\n(a plain Spacer renders no children)."}},"description":"A flexible spacer that fills available space along the parent flex axis. Drop one between siblings to push them apart without per-sibling `margin-left: auto`. @example <Inline>   <Avatar />   <Text>Jane Doe</Text>   <Spacer />   <Badge>Admin</Badge> </Inline>","examples":[],"composes":null,"appliesClassNames":null},"Sparkline":{"kind":"component","category":"Data Visualization","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":true,"ref":"HTMLSpanElement","subpath":"./components/Sparkline","extends":["HTMLAttributes<HTMLSpanElement>","RefAttributes<HTMLSpanElement>"],"deprecated":null,"props":{"aria-label":{"type":"string","required":false,"default":null,"description":"Accessible label for the SVG / em-dash span. Uses the native `aria-label`\nattribute (inherited from `HTMLAttributes`) — matches the React-Aria /\nRadix convention. If omitted, a trend summary is auto-generated from the\ndata (e.g. \"Trend: ascending, min 12, max 45\")."},"asChild":{"type":"boolean","required":false,"default":"false","description":"Render as the single child element, merging the Sparkline's wrapper\nstyling and resolved color onto it (Layer-7 composition, #424). Pass a\nsingle element as `children`; the `styles.sparkline` class, wrapper\n`style` (resolved color), and `role=\"img\"`/`aria-label` land on it, and\nthe SVG (or empty fallback) is composed inside."},"children":{"type":"ReactNode","required":false,"default":null,"description":"Child element to render when `asChild` is true. Ignored otherwise — a\nplain Sparkline renders its own SVG / fallback content."},"color":{"type":"SparklineColor","required":false,"default":null,"description":"Color for the line/bars. Accepts:\n- A semantic variant key: `'primary' | 'success' | 'warning' | 'danger' | 'neutral' | 'info'`\n  (resolved to the matching `--color-*-base` design token)\n- Any raw CSS color string (`'#1b7fa8'`, `'rgb(…)'`, `'var(--color-teal-base)'`)\n\nDefault: `var(--color-primary)` (back-compat with v0.8)."},"data":{"type":"number[] | SparklineDataPoint[]","required":true,"default":null,"description":"Time-series data, most recent last. Empty array → renders emptyFallback.\n\nAccepts either explicit `{ t, count }` buckets OR a plain `number[]`.\nPlain numbers are normalized internally with the array index as the\nsynthetic `t` (so the line/bar shape is identical, but you skip the\nboilerplate when you don't have real timestamps to attach)."},"emptyFallback":{"type":"ReactNode","required":false,"default":"'—'","description":"Rendered when data is empty or all values are zero. Default: em-dash '—'."},"fill":{"type":"boolean","required":false,"default":"false","description":"When truthy and `variant=\"line\"`, render a gradient fill below the line\n(full color at top → ~5% opacity at baseline). Ignored for `bars`.\nDefault: false."},"height":{"type":"number","required":false,"default":null,"description":"Convenience override for height (alias for `size.h`). Default: 20."},"showDot":{"type":"boolean","required":false,"default":"false","description":"When truthy, render a small `<circle>` at the last data point. Color\nmatches the resolved `color` prop. Default: false."},"size":{"type":"{ w?: number; h?: number; } | undefined","required":false,"default":null,"description":"Size in pixels. Defaults to 80×20."},"variant":{"type":"\"line\" | \"bars\"","required":false,"default":"'bars'","description":"Bar chart or line chart. Default 'bars'."},"width":{"type":"number","required":false,"default":null,"description":"Convenience override for width (alias for `size.w`). Default: 80."}},"description":"Lightweight inline data visualization (default 80×20px) rendered as hand-rolled SVG. Intentionally does NOT import recharts — keeps the payload minimal and avoids the recharts runtime cost for what is typically an at-a-glance trend indicator in a table cell or list row. Variants: - `bars` — one `<rect>` per non-zero bucket - `line` — a single `<polyline>` across normalized points Data API (two overloads, normalized internally): - `SparklineDataPoint[]` — explicit `{ t, count }` buckets (original API) - `number[]` — convenience form; index becomes the synthetic `t` Style props (line variant): -","examples":[],"composes":null,"appliesClassNames":null},"Spinner":{"kind":"component","category":"Feedback & Status","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Spinner","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class on the visual root (the `.spinnerContainer` div).\n\n#422 — `className` now lands on the OUTER status container (the visual\nroot that carries `role=\"status\"`), not the inner `<svg>`. To target the\nanimated `<svg>` specifically, use {@link SpinnerProps.svgClassName}."},"color":{"type":"\"success\" | \"warning\" | \"error\" | \"primary\" | \"secondary\"","required":false,"default":"'primary'","description":"Color variant"},"label":{"type":"string","required":false,"default":null,"description":"Optional loading label for accessibility"},"size":{"type":"\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"","required":false,"default":"'md'","description":"Size of the spinner"},"svgClassName":{"type":"string","required":false,"default":null,"description":"Escape hatch: extra class applied to the inner animated `<svg>` element.\nThe `size` / `color` variant classes still apply; this is appended after\nthem."}},"description":"Circular loading indicator with a brand-themed gradient animation. Used for loading states and async operations. @example <Spinner size=\"md\" /> <Spinner size=\"lg\" color=\"primary\" label=\"Loading...\" /> <Spinner size=\"sm\" color=\"success\" />","examples":[],"composes":null,"appliesClassNames":null},"Stack":{"kind":"component","category":"Layout Primitives","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":"HTMLDivElement","subpath":"./components/Stack","extends":["HTMLAttributes<HTMLElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"align":{"type":"\"start\" | \"center\" | \"end\" | \"stretch\"","required":false,"default":"'stretch'","description":"Horizontal alignment of children"},"as":{"type":"\"article\" | \"aside\" | \"div\" | \"nav\" | \"section\"","required":false,"default":"'div'","description":"HTML element to render as"},"children":{"type":"ReactNode","required":true,"default":null,"description":"Child elements to render in vertical stack"},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class names"},"fullWidth":{"type":"boolean","required":false,"default":"false","description":"Expand to full width of parent container"},"gap":{"type":"number | (string & {}) | StackGapKeyword","required":false,"default":"'md'","description":"Spacing between children. Accepts EITHER a token keyword (preferred,\nstays on the design-token rhythm) or a raw CSS-length value:\n\n- `'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'` → token class\n- `number` → emitted verbatim as `<n>px` inline style\n- `string` (e.g. `'0.5rem'`, `'var(--spacing-3)'`) → emitted verbatim\n\nNumeric/string escape hatch added in #374 so consumers can size flex\ngaps off the design-token grid (e.g. for label/control rhythm) without\nlosing the keyword shortcuts."},"grow":{"type":"number | boolean","required":false,"default":null,"description":"Grow to fill remaining space when this Stack is itself a flex item of\na parent flex container (#374).\n\n- `true` → `flex: 1 1 auto`\n- `<number>` → `flex: <n> 1 auto`"},"justify":{"type":"\"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"evenly\"","required":false,"default":"'start'","description":"Vertical alignment/distribution of children"},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline styles"},"wrap":{"type":"boolean","required":false,"default":"false","description":"Allow children to wrap to next line"}},"description":"Vertical flex layout primitive with consistent spacing. Provides clean, declarative vertical layouts using design tokens.","examples":[{"name":"Vertical layout","code":"<Stack gap=\"md\">{children}</Stack>"}],"composes":null,"appliesClassNames":null},"StatCard":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":"HTMLDivElement","subpath":"./components/StatCard","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"asChild":{"type":"boolean","required":false,"default":"false","description":"Render through the single child element (Radix-style `asChild`),\nmerging StatCard's root class + forwarded props onto it instead of\nemitting the default `<div>` (#424). Use to make the whole stat card\na semantic `<article>`, an `<a>`, etc. The `.statCard` root class and\n`color-*` variant always land on the rendered element either way.\n\nNot honored while `loading` — the skeleton owns the DOM in that state."},"color":{"type":"\"success\" | \"warning\" | \"error\" | \"primary\" | \"neutral\"","required":false,"default":"'primary'","description":"Color variant for theming"},"icon":{"type":"ReactNode","required":false,"default":null,"description":"Icon to display with the statistic"},"label":{"type":"string","required":true,"default":null,"description":"Label describing the statistic"},"loading":{"type":"boolean","required":false,"default":"false","description":"Show loading skeleton state"},"subtitle":{"type":"ReactNode","required":false,"default":null,"description":"Short contextual subtitle rendered beneath the primary value\n(above the trend line when both are present). Use for edge-case\nexplanations — e.g. why a zero value is not a bug.\n\nTypography is intentionally lighter than `label` (DS caption-like)\nso the primary value stays dominant. See issue #32."},"trend":{"type":"{ value: number; direction: \"neutral\" | \"up\" | \"down\"; sentiment?: \"neutral\" | \"positive\" | \"negative\"; }","required":false,"default":null,"description":"Trend data with percentage change.\n\n`direction` drives ONLY the arrow glyph (the literal movement of the\nmetric). `sentiment` drives the pill COLOR and its good/bad meaning,\nDECOUPLED from the arrow (#467) so an *inverted* metric can be expressed —\ne.g. Refund Rate, where a rising number (up-arrow) is BAD and must read in\nthe error color."},"trendLabel":{"type":"string","required":false,"default":null,"description":"Label for the trend (e.g., \"vs last month\")"},"value":{"type":"string | number","required":true,"default":null,"description":"The main value to display"}},"description":"A specialized card for displaying statistics with trend indicators. Features large value display, optional trend data, and color variants. Deliberate standalone component (distinct markup/CSS), not a `Card` recipe — the recipe-vs-component boundary is a recorded decision (#515), with recipe-ification tracked for the future Recipes layer (#415). @example <StatCard   label=\"Total Users\"   value=\"1,234\"   trend={{ value: 12.5, direction: 'up' }}   trendLabel=\"vs last month\"   icon={<UsersIcon />}   color=\"success\" /> @example // Contextual subtitle explaining a surprising zero (#32) <StatCard   l","examples":[],"composes":null,"appliesClassNames":null},"StatusDot":{"kind":"component","category":"Feedback & Status","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":"HTMLSpanElement","subpath":"./components/StatusDot","extends":["HTMLAttributes<HTMLSpanElement>","RefAttributes<HTMLSpanElement>"],"deprecated":null,"props":{"aria-label":{"type":"string","required":false,"default":null,"description":"Accessible label. When provided (and `label` is not), the dot is\nexposed to assistive tech with `role=\"img\"` and the given label.\nWhen omitted, the dot is treated as purely decorative\n(`aria-hidden=\"true\"`) — the surrounding text must carry the\nmeaning."},"label":{"type":"string","required":false,"default":null,"description":"Optional adjacent text label. When provided, renders the canonical\ndot-plus-text pattern (`<StatusDot/> <Text/>`) as a single inline\ngroup. The dot is automatically marked `aria-hidden=\"true\"` because\nthe label text carries the meaning natively. Use this instead of\nhand-rolling the `<Inline><StatusDot/><Text/></Inline>` wrapper."},"role":{"type":"\"img\" | \"status\"","required":false,"default":null,"description":"Optional override for `role` when `aria-label` is provided.\nDefaults to `\"img\"`. Pass `\"status\"` for live-region announcements\nwhen the dot's color/state changes dynamically."},"size":{"type":"StatusDotSize","required":false,"default":"'sm'","description":"Visual size of the dot.\n- `sm` (default) → 8px\n- `md`           → 10px"},"variant":{"type":"StatusDotVariant","required":false,"default":"'neutral'","description":"Semantic color of the dot"}},"description":"A small (~8–10px) semantic-colored circle for indicating status — drift, session lifecycle, agent health, presence, etc. Decorative by default; pass `aria-label` to expose the meaning to assistive tech. Surfaced in the CAMI DS recomposition audit (lando-labs/cami-app#565). Recurring pattern previously hand-rolled as `.statusDot` in `cami-app/src/components/agents/AgentDeployedTo.module.css` and reproduced ad-hoc in session lifecycle markers. *Why not `<Badge size=\"dot\">`?** Badge is text-bearing and its API contract is built around that. A textless dot-only variant would complicate Badge for t","examples":[],"composes":null,"appliesClassNames":null},"StepProgress":{"kind":"component","category":"Feedback & Status","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":"HTMLOListElement","subpath":"./components/StepProgress","extends":["HTMLAttributes<HTMLOListElement>","RefAttributes<HTMLOListElement>"],"deprecated":null,"props":{"aria-label":{"type":"string","required":false,"default":null,"description":"Accessible label for the underlying list. Defaults to `'Progress'`.\nPass via `aria-label` to override.\n\nInherited from `React.HTMLAttributes` — declared here only to document\nthe default. Consumers may also pass any other native `<ol>` attribute\n(`id`, `data-*`, `style`, event handlers, …) and it lands on the root."},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class on the root"},"currentStep":{"type":"number","required":false,"default":null},"orientation":{"type":"StepProgressOrientation","required":false,"default":null,"description":"Layout direction"},"steps":{"type":"string[] | StepProgressStep[]","required":true,"default":null},"variant":{"type":"StepProgressVariant","required":false,"default":null,"description":"Visual variant"}},"description":"Stepped/discrete progress tracker — distinct from `<Progress>`'s indeterminate loading patterns. Renders a list of named steps with per-step status (completed | active | upcoming | error), connecting lines between adjacent steps, and animated transitions when the active index advances. Two API shapes via discriminated union:   1. Explicit per-step status objects:      <StepProgress steps={[{ label, status }, ...]} />   2. Plain string labels + currentStep index (computed statuses):      <StepProgress steps={['One', 'Two']} currentStep={1} /> Indices below `currentStep` resolve to `completed`;","examples":[],"composes":null,"appliesClassNames":null},"StickyBar":{"kind":"component","category":"Navigation & Chrome","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/StickyBar","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"aria-label":{"type":"string","required":false,"default":null,"description":"Accessible label for the region landmark. Screen readers will\nannounce this when the user navigates into the bar."},"children":{"type":"ReactNode","required":true,"default":null,"description":"Contents of the sticky bar."},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class applied to the bar."},"elevation":{"type":"\"none\" | \"shadow\" | \"shadow-on-scroll\"","required":false,"default":"'none'","description":"Elevation / shadow treatment.\n- `none` — no shadow (default)\n- `shadow` — always-on shadow\n- `shadow-on-scroll` — shadow appears only once the bar becomes\n  pinned (i.e. the user has scrolled past its natural position)"},"offset":{"type":"string | number","required":false,"default":"0","description":"Distance from the pinned edge. Numbers are treated as pixels;\nstrings are passed through as-is so consumers can use `calc()`\nor design-token expressions.\n@example offset={64} // 64px from the top\n@example offset=\"calc(var(--header-height) + 8px)\""},"position":{"type":"\"top\" | \"bottom\"","required":false,"default":"'top'","description":"Which edge of the scroll container the bar pins to."},"role":{"type":"AriaRole","required":false,"default":"'region'","description":"Override the ARIA role. Defaults to `\"region\"` which matches the\n\"landmark region\" pattern screen readers expose to users. Set to\n`\"toolbar\"` if the bar contains only a set of controls."},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline styles merged onto the bar. Useful for one-off tweaks\n(but prefer `variant`/`elevation`/`offset` props when possible)."},"variant":{"type":"\"transparent\" | \"surface\" | \"blur\"","required":false,"default":"'surface'","description":"Background treatment for the bar.\n- `surface` — opaque, matches the surface token (default)\n- `blur` — translucent with backdrop-filter blur\n- `transparent` — no background, for custom chrome strips"},"zIndex":{"type":"number","required":false,"default":null,"description":"Override the default z-index. By default uses the `--z-index-sticky`\ntoken (100) — below modals (1000) and dropdowns (1100)."}},"description":"A primitive for horizontal strips that pin to the top or bottom of their nearest scroll container. Wraps children in a `position: sticky` element with a configurable offset, background variant, and optional shadow-on-scroll affordance. ## Why `position: sticky` (not `fixed`) Sticky respects the scroll context it lives in — pinning inside a scrollable `<main>` (like AppShell's content area) rather than the viewport. Consumers can drop a StickyBar in any overflow-auto wrapper and it will Just Work. ## Shadow-on-scroll When `elevation=\"shadow-on-scroll\"`, the bar uses an invisible zero-height sen","examples":[],"composes":null,"appliesClassNames":null},"Switch":{"kind":"component","category":"Core & Form","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLInputElement","subpath":"./components/Switch","extends":["HTMLAttributes<HTMLInputElement>","RefAttributes<HTMLInputElement>"],"deprecated":null,"props":{"checked":{"type":"boolean","required":false,"default":null,"description":"Controlled checked state"},"containerClassName":{"type":"string","required":false,"default":null,"description":"Container className for styling wrapper"},"defaultChecked":{"type":"boolean","required":false,"default":null,"description":"Default checked state for uncontrolled mode"},"label":{"type":"string","required":false,"default":null,"description":"Label text displayed next to switch"},"onChange":{"type":"((checked: boolean) => void)","required":false,"default":null,"description":"Callback when switch state changes"},"size":{"type":"\"sm\" | \"md\" | \"lg\"","required":false,"default":"'md'","description":"Size variant"}},"description":"A toggle switch component with a smooth wave transition animation. Available in three sizes with full keyboard accessibility. @example <Switch label=\"Enable notifications\" /> <Switch checked={enabled} onChange={setEnabled} size=\"lg\" /> <Switch label=\"Dark mode\" disabled />","examples":[],"composes":null,"appliesClassNames":null},"Tab":{"kind":"component","category":"Overlay & Interactive","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLButtonElement","subpath":"./components/Tabs","extends":["HTMLAttributes<HTMLButtonElement>","RefAttributes<HTMLButtonElement>"],"deprecated":null,"props":{"badge":{"type":"ReactNode","required":false,"default":null,"description":"Optional badge (e.g., notification count)"},"children":{"type":"ReactNode","required":true,"default":null,"description":"Tab label"},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class"},"disabled":{"type":"boolean","required":false,"default":"false","description":"Disable the tab"},"icon":{"type":"ReactNode","required":false,"default":null,"description":"Optional icon"},"value":{"type":"string","required":true,"default":null,"description":"Unique value for the tab"}},"description":"Individual tab button with keyboard navigation support.","examples":[],"composes":null,"appliesClassNames":null},"TabList":{"kind":"component","category":"Overlay & Interactive","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Tabs","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"children":{"type":"ReactNode","required":true,"default":null,"description":"Tab buttons"},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class"}},"description":"Container for Tab buttons with animated indicator.","examples":[],"composes":{"children":{"accepts":"Tab","as":"ReactNode"}},"appliesClassNames":null},"TabPanel":{"kind":"component","category":"Overlay & Interactive","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Tabs","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"children":{"type":"ReactNode","required":true,"default":null,"description":"Panel content"},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class"},"value":{"type":"string","required":true,"default":null,"description":"Value matching the Tab's value"}},"description":"Content container for each tab.","examples":[],"composes":null,"appliesClassNames":null},"Table":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":null,"subpath":"./components/Table","extends":["HTMLAttributes<HTMLDivElement>"],"deprecated":null,"props":{"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class"},"columns":{"type":"Column<T>[]","required":true,"default":null,"description":"Column definitions"},"data":{"type":"T[]","required":true,"default":null,"description":"Array of data objects to display"},"emptyState":{"type":"ReactNode","required":false,"default":null,"description":"Content to show when data is empty"},"getRowAriaLabel":{"type":"((row: T, index: number) => string)","required":false,"default":null,"description":"Optional per-row ARIA label for better screen reader announcements\nwhen rows are clickable (#30).\n\nOnly applied when `onRowClick` is set. If not provided, the row's\ncell content is announced as usual.\n@example getRowAriaLabel={(row) => `Open ${row.name}`}"},"isRowInteractive":{"type":"((row: T, index: number) => boolean)","required":false,"default":null,"description":"Optional predicate to opt a specific row out of click/keyboard\nactivation, even when `onRowClick` is set (#30).\n\nReturning `false` leaves the row non-interactive (no tabIndex,\nno role=button, no cursor). Returning `true` (or omitting the\nprop) keeps the default behavior — every row is interactive."},"loading":{"type":"boolean","required":false,"default":"false","description":"Show loading skeleton state"},"onRowClick":{"type":"((row: T, index: number, event: SyntheticEvent<Element, Event>) => void)","required":false,"default":null,"description":"Callback fired when a row is clicked or activated via keyboard\n(Enter / Space) (#30).\n\nWhen provided, each row becomes a focusable, button-role element\nwith pointer cursor, hover state, and visible focus ring.\nClicks on interactive descendants (`<button>`, `<a>`, `<input>`,\n`<select>`, `<textarea>`, or any element marked with\n`data-no-row-click`) will NOT fire this handler."},"onSelectionChange":{"type":"((selectedRows: T[]) => void)","required":false,"default":null,"description":"Callback when selection changes"},"onSort":{"type":"((key: string, direction: \"desc\" | \"asc\") => void)","required":false,"default":null,"description":"Callback when sort changes"},"selectable":{"type":"boolean","required":false,"default":"false","description":"Enable row selection with checkboxes"},"sortable":{"type":"boolean","required":false,"default":"false","description":"Enable sorting functionality"},"striped":{"type":"boolean","required":false,"default":"false","description":"Enable striped rows"}},"description":"A flexible data table with sorting, selection, and responsive behavior. Supports generic data types with customizable column rendering. @example const columns = [   { key: 'name', label: 'Name', sortable: true },   { key: 'email', label: 'Email' },   { key: 'status', label: 'Status', render: (row) => <Badge>{row.status}</Badge> } ] <Table data={users} columns={columns} sortable selectable /> @example Clickable rows (#30) <Table   data={users}   columns={columns}   onRowClick={(row) => openDrawer(row)}   getRowAriaLabel={(row) => `Open ${row.name}`} />","examples":[],"composes":null,"appliesClassNames":null},"Tabs":{"kind":"component","category":"Overlay & Interactive","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Tabs","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"children":{"type":"ReactNode","required":true,"default":null,"description":"Children components"},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class"},"defaultValue":{"type":"string","required":false,"default":null,"description":"Default active tab (uncontrolled)"},"onChange":{"type":"((value: string) => void)","required":false,"default":null,"description":"Callback when active tab changes"},"orientation":{"type":"\"horizontal\" | \"vertical\"","required":false,"default":"'horizontal'","description":"Layout orientation"},"value":{"type":"string","required":false,"default":null,"description":"Controlled active tab value"},"variant":{"type":"\"line\" | \"enclosed\"","required":false,"default":"'line'","description":"Visual variant"}},"description":"A flexible tabbed interface with keyboard navigation and animated indicator. Supports controlled and uncontrolled modes. @example <Tabs defaultValue=\"profile\">   <TabList>     <Tab value=\"profile\">Profile</Tab>     <Tab value=\"settings\">Settings</Tab>   </TabList>   <TabPanel value=\"profile\">Profile content</TabPanel>   <TabPanel value=\"settings\">Settings content</TabPanel> </Tabs>","examples":[],"composes":{"children":{"accepts":"TabList | TabPanel","as":"ReactNode"}},"appliesClassNames":null},"TagInput":{"kind":"component","category":"Core & Form","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLInputElement","subpath":"./components/TagInput","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLInputElement>"],"deprecated":null,"props":{"allowCustom":{"type":"boolean","required":false,"default":null,"description":"If false, only values present in `suggestions` may be added — typing\na value not in the list will not commit. Defaults to `true`."},"className":{"type":"string","required":false,"default":null,"description":"Extra class on the visual root (the `role=\"combobox\"` element).\n\n#422 — `className` now lands on the combobox element (the input-shaped\nsurface that carries the border, focus ring, and chip row), not the outer\nfield `.container`. To style the outer field wrapper (the label + field +\nfooter column) use {@link TagInputProps.wrapperClassName}."},"defaultValue":{"type":"string[]","required":false,"default":null,"description":"Initial tags for uncontrolled usage. Ignored when `value` is provided.\nDefaults to an empty list."},"delimiter":{"type":"string","required":false,"default":null,"description":"Character that, when typed inside the input, commits the preceding\ntext as a chip. Defaults to `\",\"`. Enter always commits regardless."},"disabled":{"type":"boolean","required":false,"default":null,"description":"Disable all interaction."},"error":{"type":"string","required":false,"default":null,"description":"Error message — when set, surfaces as role=\"alert\" + error border."},"helperText":{"type":"string","required":false,"default":null,"description":"Helper text shown below. Suppressed when `error` is set."},"id":{"type":"string","required":false,"default":null,"description":"Stable id for the combobox wrapper (the `role=\"combobox\"` element)."},"label":{"type":"string","required":false,"default":null,"description":"Optional label shown above the combobox."},"maxTags":{"type":"number","required":false,"default":null,"description":"Hard upper bound on tag count. Input is disabled once reached."},"name":{"type":"string","required":false,"default":null,"description":"HTML form field name. When provided, one hidden `<input>` is rendered\nper tag so `FormData.getAll(name)` returns the array — matching the\nSelect v0.4.1 multi-select contract."},"onChange":{"type":"((tags: string[]) => void)","required":false,"default":null,"description":"Called with the new tag list whenever it changes. Fires in both controlled\nand uncontrolled modes (an optional observer when uncontrolled)."},"placeholder":{"type":"string","required":false,"default":null,"description":"Placeholder for the inner input."},"required":{"type":"boolean","required":false,"default":null,"description":"Mark the field as required. Cosmetic + ARIA only."},"suggestions":{"type":"string[]","required":false,"default":null,"description":"Optional autocomplete suggestions. Filtered case-insensitively."},"validateTag":{"type":"((tag: string) => boolean)","required":false,"default":null,"description":"Predicate. Tags returning false are rejected (no commit)."},"value":{"type":"string[]","required":false,"default":null,"description":"Current tags (controlled). When provided, the consumer owns the tag list\nvia {@link TagInputProps.onChange}."},"wrapperClassName":{"type":"string","required":false,"default":null,"description":"Escape hatch: extra class on the OUTER field `.container` (the flex column\nthat stacks label, combobox, and helper/error footer). Target it for\nfield-level layout overrides (width, margin, grid placement) that\npreviously rode on `className`."},"wrapperStyle":{"type":"CSSProperties","required":false,"default":null,"description":"Escape hatch: inline style on the outer field `.container`."}},"description":"Free-text combobox where users type, press Enter (or a delimiter char), and the text is committed as a chip. Optional `suggestions` enable autocomplete; `allowCustom={false}` rejects values not in the suggestion list (predefined-options \"pill select\" pattern). Replaces the 4 hand-rolled chip-input modals identified in the Steepen audit. Sized to drop into forms next to <Input> with matching height. @example <TagInput   value={tags}   onChange={setTags}   suggestions={['react', 'typescript', 'nextjs']}   placeholder=\"Add tags...\" />","examples":[],"composes":null,"appliesClassNames":null},"TaskCard":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":true,"ref":"HTMLDivElement","subpath":"./components/TaskCard","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"actions":{"type":"ReactNode","required":false,"default":null,"description":"Action buttons or menu"},"asChild":{"type":"boolean","required":false,"default":"false","description":"Render through the single child element (Radix-style `asChild`),\nmerging TaskCard's root class + forwarded props onto it instead of\nemitting the default `<div>` (#424). Use to make the whole task card\na semantic `<article>`, an `<a>`, etc. The `.taskCard` root class and\n`status-*` variant always land on the rendered element either way."},"assignee":{"type":"{ name: string; avatar?: string; initials?: string; } | undefined","required":false,"default":null,"description":"Assignee information"},"description":{"type":"string","required":false,"default":null,"description":"Task description"},"dueDate":{"type":"string | Date","required":false,"default":null,"description":"Due date (string or Date object)"},"onClick":{"type":"(() => void)","required":false,"default":null,"description":"Make the card clickable"},"priority":{"type":"\"low\" | \"medium\" | \"high\" | \"urgent\"","required":false,"default":"'medium'","description":"Task priority level"},"status":{"type":"\"done\" | \"todo\" | \"in-progress\" | \"blocked\"","required":false,"default":"'todo'","description":"Task status"},"tags":{"type":"string[]","required":false,"default":"'[]'","description":"Array of tag labels"},"title":{"type":"string","required":true,"default":null,"description":"Task title"}},"description":"A specialized card for displaying tasks with status, priority, assignee, and tags. Features clickable interactions and visual status indicators. Deliberate standalone component (distinct markup/CSS), not a `Card` recipe — the recipe-vs-component boundary is a recorded decision (#515), with recipe-ification tracked for the future Recipes layer (#415). @example <TaskCard   title=\"Implement user authentication\"   description=\"Add JWT-based authentication with refresh tokens\"   status=\"in-progress\"   priority=\"high\"   assignee={{ name: \"John Doe\", initials: \"JD\" }}   dueDate=\"2025-11-01\"   tags={[","examples":[],"composes":null,"appliesClassNames":null},"Text":{"kind":"component","category":"Typography","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":null,"subpath":"./components/Text","extends":["HTMLAttributes"],"deprecated":null,"props":{"as":{"type":"TextElement","required":false,"default":null,"description":"HTML element to render as"},"children":{"type":"ReactNode","required":true,"default":null,"description":"Text content"},"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class name"},"color":{"type":"string","required":false,"default":null,"description":"Text color (CSS custom property or color value)"},"ref":{"type":"RefObject<HTMLDivElement | null> | ((instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly)) | ... 11 more ...","required":false,"default":null},"size":{"type":"\"sm\" | \"md\" | \"lg\"","required":false,"default":null,"description":"Text size"},"variant":{"type":"\"link\" | \"body\" | \"caption\" | \"small\" | \"overline\" | \"mono\"","required":false,"default":null,"description":"Text variant style.\n- `body` / `caption` / `small` / `overline` — typographic styles.\n- `link` — tappable/clickable text affordance (link color,\n  underline-on-hover, focus ring). Pair with `as=\"a\"` + `href`\n  for navigation, or `as=\"button\"` + `onClick` for an action.\n- `mono` — monospace family for code/identifiers/debug values\n  inline in body copy (#379). Uses `--font-family-mono`\n  (JetBrains Mono) with the body line-height so it composes\n  into running text without visually disrupting the baseline."},"weight":{"type":"\"medium\" | \"normal\" | \"bold\" | \"semibold\"","required":false,"default":null,"description":"Font weight"}},"description":"Polymorphic text component for body copy, captions, and supporting text. Provides consistent typography across the application with flexible rendering. For a tappable/clickable text affordance use `variant=\"link\"`. Render it as an `<a>` (`as=\"a\"`) when it navigates to an `href`, or as a `<button>` (`as=\"button\"`) when it triggers an in-page action via `onClick`. The variant supplies the link color, underline-on-hover, and a visible `:focus-visible` ring; the element you pick supplies the semantics. @example <Text variant=\"body\">This is body text</Text> <Text variant=\"caption\" size=\"sm\">Small c","examples":[],"composes":null,"appliesClassNames":null},"Textarea":{"kind":"component","category":"Core & Form","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLTextAreaElement","subpath":"./components/Textarea","extends":["HTMLAttributes<HTMLTextAreaElement>","RefAttributes<HTMLTextAreaElement>"],"deprecated":null,"props":{"containerClassName":{"type":"string","required":false,"default":null,"description":"Container className for styling wrapper"},"defaultValue":{"type":"string","required":false,"default":null,"description":"Default value for uncontrolled mode"},"error":{"type":"string","required":false,"default":null,"description":"Error message - when provided, textarea enters error state"},"helperText":{"type":"string","required":false,"default":null,"description":"Helper text displayed below textarea"},"label":{"type":"string","required":false,"default":null,"description":"Label text displayed above textarea"},"maxLength":{"type":"number","required":false,"default":null,"description":"Maximum character length"},"onChange":{"type":"((value: string) => void)","required":false,"default":null,"description":"Callback when textarea value changes"},"resize":{"type":"\"none\" | \"both\" | \"horizontal\" | \"vertical\"","required":false,"default":"'vertical'","description":"Resize behavior"},"rows":{"type":"number","required":false,"default":"4","description":"Number of visible text rows"},"showCharacterCount":{"type":"boolean","required":false,"default":"false","description":"Show character count (requires maxLength).\n\nCanonical cross-platform alias matching the React Native package.\nUse this when writing code that targets both web and React Native\nso the prop name doesn't have to fork per platform (Refs: #240\nremediation). If both `showCount` and `showCharacterCount` are\nprovided, the counter renders if either is true."},"showCount":{"type":"boolean","required":false,"default":"false","description":"Show character count (requires maxLength).\n\nWeb-native shorthand kept for backwards compatibility. Cross-platform\nconsumers should prefer `showCharacterCount`, which is the canonical\nname used by the React Native `Textarea`/`Input` primitives (Refs:\n#240 remediation). Both props are accepted; if either is true the\ncounter renders."},"value":{"type":"string","required":false,"default":null,"description":"Controlled value"}},"description":"A flexible textarea component with label, helper text, error states, and character counter. Supports auto-resize and controlled/uncontrolled modes. @example <Textarea label=\"Description\" placeholder=\"Enter description...\" /> <Textarea label=\"Bio\" maxLength={500} showCount /> <Textarea label=\"Message\" error=\"Message is required\" />","examples":[],"composes":null,"appliesClassNames":null},"ThemeBuilder":{"kind":"component","category":"Theming","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/ThemeBuilder","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"className":{"type":"string","required":false,"default":null,"description":"Additional CSS class merged onto the outer `.themeBuilder` wrapper."},"style":{"type":"CSSProperties","required":false,"default":null,"description":"Inline styles applied to the outer `.themeBuilder` wrapper. The component\nsets no inline style on that element, so consumer keys apply directly.\n(Inherited type from `HTMLAttributes`; restated here for docs.)"}},"description":"Demonstrates the multi-brand architecture of the Lando Labs Design System. Allows users to preview different product themes, see color palettes, and view CSS variables. Features: - Predefined themes (Forest, Sunset, Midnight, and the default brand theme) - Real-time theme preview with key components - Color palette display with hex values - CSS variable code display - Smooth theme transitions @example <ThemeBuilder />","examples":[],"composes":null,"appliesClassNames":null},"ThemeScope":{"kind":"component","category":"Theming","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/ThemeScope","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"children":{"type":"ReactNode","required":true,"default":null,"description":"Children rendered inside the scoped wrapper."},"mode":{"type":"ResolvedTheme","required":false,"default":null,"description":"Override the resolved mode for this subtree (e.g. a \"dark island\" inside\na light page). When omitted, the scope inherits the mode from the\nsurrounding `ThemeProvider`. When no `ThemeProvider` is mounted, defaults\nto `'light'`."},"preset":{"type":"string","required":false,"default":null,"description":"Override the theme preset for this subtree. Same string ids as\n`setThemePreset` (`'forest'`, `'midnight'`, …). When omitted, no preset\nattribute is set on the wrapper."},"theme":{"type":"ProductTheme","required":false,"default":null,"description":"Product theme to apply within this subtree only. Same shape as\n`ThemeProvider`'s `defaultProductTheme`. Mode-aware `{ light, dark }`\nvalues resolve against this scope's `mode` (which may differ from the\nsurrounding ThemeProvider's resolved theme)."}},"description":"ThemeScope (#395) Apply a DS theme to a SUB-TREE only — without stomping `:root`. The default `ThemeProvider` is a global singleton: every `setProductTheme` write lands on `document.documentElement.style`. That's correct for the vast majority of apps, but it makes per-section theme previews (\"hover the hue slider to re-theme just THIS hero\") and multi-brand pages impossible — every change re-themes the whole document. `<ThemeScope>` solves that by writing the same tokens / attributes that `ThemeProvider` writes, but to a WRAPPER ELEMENT instead of `:root`. CSS custom properties inherit through","examples":[],"composes":null,"appliesClassNames":null},"Timeline":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLOListElement","subpath":"./components/Timeline","extends":["HTMLAttributes<HTMLOListElement>","RefAttributes<HTMLOListElement>"],"deprecated":null,"props":{"children":{"type":"ReactNode","required":false,"default":null,"description":"Timeline.Item children (and optionally nested Timeline.Group inside)."},"emptyState":{"type":"ReactNode","required":false,"default":null,"description":"Content shown when no children are provided."},"loading":{"type":"boolean","required":false,"default":null,"description":"Render 3 skeleton rows while data is being fetched."}},"description":"Vertical event timeline supporting two complementary usage modes: 1. **Distributed-tracing / log mode** (original v0.8.0 API)    Use `timestamp` (string/ReactNode), `status`, `expandable`, and    nested `<Timeline.Group>` for hierarchical span visualization. 2. **Activity-feed mode** (added in v0.9.0)    Use `icon` (rendered inside the dot bezel), `title` (bold lead    line), `actor` (muted byline), `variant` (color), and a    `Date | string` timestamp — auto-formatted via    `Intl.RelativeTimeFormat` (recent) or `Intl.DateTimeFormat`    (older), with a `formatTimestamp` escape hatch. Both mod","examples":[],"composes":{"children":{"accepts":"TimelineItem | TimelineGroup","as":"ReactNode"}},"appliesClassNames":null},"TimelineGroup":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLOListElement","subpath":"./components/Timeline","extends":["HTMLAttributes<HTMLOListElement>","RefAttributes<HTMLOListElement>"],"deprecated":null,"props":{"children":{"type":"ReactNode","required":false,"default":null,"description":"Timeline.Item children rendered with smaller second-tier visuals."}},"description":"Vertical event timeline supporting two complementary usage modes: 1. **Distributed-tracing / log mode** (original v0.8.0 API)    Use `timestamp` (string/ReactNode), `status`, `expandable`, and    nested `<Timeline.Group>` for hierarchical span visualization. 2. **Activity-feed mode** (added in v0.9.0)    Use `icon` (rendered inside the dot bezel), `title` (bold lead    line), `actor` (muted byline), `variant` (color), and a    `Date | string` timestamp — auto-formatted via    `Intl.RelativeTimeFormat` (recent) or `Intl.DateTimeFormat`    (older), with a `formatTimestamp` escape hatch. Both mod","examples":[],"composes":null,"appliesClassNames":null},"TimelineItem":{"kind":"component","category":"Data Display","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLLIElement","subpath":"./components/Timeline","extends":["HTMLAttributes<HTMLLIElement>","RefAttributes<HTMLLIElement>"],"deprecated":null,"props":{"actor":{"type":"string","required":false,"default":null,"description":"Muted \"by {actor}\" line rendered under `title` (activity-feed mode)."},"children":{"type":"ReactNode","required":false,"default":null,"description":"Item body — text, markup, and optionally a nested <Timeline.Group>."},"defaultExpanded":{"type":"boolean","required":false,"default":"false","description":"Uncontrolled initial expanded state."},"expandable":{"type":"boolean","required":false,"default":"false","description":"Enable expand/collapse toggle UI with chevron."},"expanded":{"type":"boolean","required":false,"default":null,"description":"Controlled expanded state. If omitted, state is managed internally."},"formatTimestamp":{"type":"((date: Date) => string)","required":false,"default":null,"description":"Custom formatter for `Date` timestamps. Ignored when `timestamp`\nis a string/ReactNode."},"icon":{"type":"ReactNode","required":false,"default":null,"description":"Icon rendered inside the dot bezel (activity-feed mode).\nSized at ~14px to fit the bezel circle. When provided, the\ndot expands to a 24px bezel."},"onExpandedChange":{"type":"((expanded: boolean) => void)","required":false,"default":null,"description":"Fires when expanded state changes."},"status":{"type":"TimelineStatus","required":false,"default":"'default'","description":"Status-based dot coloring. Use for tracing/log semantics.\n(`variant` is the activity-feed counterpart — both apply the\nsame color tokens; `variant` takes precedence if both are set.)"},"timestamp":{"type":"ReactNode | Date","required":false,"default":null,"description":"Leading timestamp slot.\n\n- `string` / `ReactNode`: rendered as-is (tracing mode — e.g. `\"09:42:01\"`).\n- `Date`: formatted with `formatTimestamp` if provided, otherwise\n  smart-formatted (relative for < 7 days, absolute for older)."},"title":{"type":"ReactNode","required":false,"default":null,"description":"Bold lead line rendered above `children` body (activity-feed mode)."},"variant":{"type":"TimelineVariant","required":false,"default":null,"description":"Activity-feed color variant. Same color machinery as `status`,\nbut with `neutral` instead of `default` for naming clarity in\nactivity-feed contexts. Wins over `status` when both are set."}},"description":"Vertical event timeline supporting two complementary usage modes: 1. **Distributed-tracing / log mode** (original v0.8.0 API)    Use `timestamp` (string/ReactNode), `status`, `expandable`, and    nested `<Timeline.Group>` for hierarchical span visualization. 2. **Activity-feed mode** (added in v0.9.0)    Use `icon` (rendered inside the dot bezel), `title` (bold lead    line), `actor` (muted byline), `variant` (color), and a    `Date | string` timestamp — auto-formatted via    `Intl.RelativeTimeFormat` (recent) or `Intl.DateTimeFormat`    (older), with a `formatTimestamp` escape hatch. Both mod","examples":[],"composes":null,"appliesClassNames":null},"Toast":{"kind":"component","category":"Overlay & Interactive","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Toast","extends":["RefAttributes<HTMLDivElement>"],"deprecated":{"since":"0.36.0","replacedBy":"useToast() (from ToastProvider)","removeAt":"1.0.0"},"props":{"action":{"type":"{ label: string; onClick: () => void; }","required":false,"default":null,"description":"Optional action button"},"description":{"type":"string","required":false,"default":null,"description":"Secondary descriptive text (the toast body). Canonical body field as of\n#332 — mirrors `ToastConfig.description` on the provider."},"duration":{"type":"number","required":false,"default":"5000","description":"Duration in milliseconds (0 for no auto-dismiss)"},"id":{"type":"string","required":true,"default":null,"description":"Unique identifier for the toast"},"message":{"type":"string","required":false,"default":null,"description":"@deprecated Use {@link ToastProps.description } instead. Retained as a\nnon-breaking alias so existing `message`-only call sites keep working;\nwhen both are set, `description` wins. Slated for removal in the next\nmajor alongside the rest of this presentational component."},"onDismiss":{"type":"(id: string) => void","required":true,"default":null,"description":"Callback when toast is dismissed"},"title":{"type":"string","required":false,"default":null,"description":"Optional title"},"variant":{"type":"\"info\" | \"success\" | \"warning\" | \"error\"","required":false,"default":"'info'","description":"Visual variant"}},"description":"@deprecated Since v0.40.0 (removal planned for the next major). Prefer the canonical global pattern — wrap your app in `<ToastProvider>` and call `useToast().showToast({ variant, title, description })`. The provider owns stacking, positioning, pause-on-hover, and dismissal; this presentational `<Toast>` requires you to wire all of that by hand. Migration: replace `<Toast message=\"…\" />` with `showToast({ description: '…' })`. Nothing is removed yet — existing usage keeps working. Individual toast notification with auto-dismiss and progress bar. Field naming (#332): `description` is the canonic","examples":[],"composes":null,"appliesClassNames":null},"ToastContainer":{"kind":"component","category":"Overlay & Interactive","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Toast","extends":["RefAttributes<HTMLDivElement>"],"deprecated":{"since":"0.36.0","replacedBy":"ToastProvider","removeAt":"1.0.0"},"props":{"maxToasts":{"type":"number","required":false,"default":"5","description":"Maximum number of visible toasts"},"position":{"type":"ToastPosition","required":false,"default":"'top-right'","description":"Position of the toast container"},"toasts":{"type":"ToastProps[]","required":false,"default":"'[]'","description":"Array of active toasts"}},"description":"Toast Container Component @deprecated Since v0.40.0 (removal planned for the next major). Prefer the canonical global pattern — wrap your app in `<ToastProvider>` and drive it with `useToast()`. `<ToastProvider>` renders and positions its own stack via Portal, so this manual container (which requires you to own the `toasts` array and each toast's `onDismiss`) is no longer needed. Migration: replace `<ToastContainer toasts={…} />` with a single `<ToastProvider>` around your app shell and call `showToast()` from `useToast()`. Nothing is removed yet — existing usage keeps working. Manages the dis","examples":[],"composes":null,"appliesClassNames":null},"ToastProvider":{"kind":"component","category":"Overlay & Interactive","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":null,"subpath":"./components/Toast","extends":null,"deprecated":null,"props":{"children":{"type":"ReactNode","required":true,"default":null,"description":"Children that should have access to `useToast()`"},"defaultDuration":{"type":"number","required":false,"default":"5000","description":"Default duration applied when a `showToast()` call omits `duration`"},"maxToasts":{"type":"number","required":false,"default":"5","description":"Maximum number of toasts visible simultaneously. When the cap is hit,\nthe oldest toast is dropped to make room for the newest. Default: 5."},"position":{"type":"ToastProviderPosition","required":false,"default":"'bottom-right'","description":"Where to anchor the toast stack (default: `'bottom-right'`)"}},"description":"ToastProvider + useToast hook Canonical global toast pattern for the Lando Labs Design System. Provides a single global container (rendered via Portal at `var(--z-toast)`) and an imperative `useToast()` hook for showing / dismissing toasts from anywhere in the tree. @example // Wrap your app shell: <ToastProvider position=\"bottom-right\" maxToasts={3}>   <App /> </ToastProvider> @example // From anywhere inside the provider: const { showToast, dismissToast } = useToast() const id = showToast({   variant: 'success',   title: 'Item saved',   description: 'Find it in your Steeped pots.',   duratio","examples":[],"composes":null,"appliesClassNames":null},"Tooltip":{"kind":"component","category":"Overlay & Interactive","platforms":["web"],"serverSafe":false,"useClient":true,"polymorphic":false,"ref":"HTMLDivElement","subpath":"./components/Tooltip","extends":["HTMLAttributes<HTMLDivElement>","RefAttributes<HTMLDivElement>"],"deprecated":null,"props":{"anchorRef":{"type":"RefObject<Element | null>","required":false,"default":null,"description":"Optional external anchor. When provided, `Tooltip` positions against this\nref's element and does not clone event handlers onto `children`. The\nconsumer is responsible for wiring up show/hide triggers (e.g. via\n`onMouseEnter` on the anchored element, and calling nothing — see the\n`open` prop for controlled visibility in the future). This is the\nrecommended path for SVG trigger elements.\n\nWidened to `Element` to accept both `HTMLElement` and `SVGElement` refs."},"children":{"type":"ReactElement<unknown, string | JSXElementConstructor<any>>","required":true,"default":null,"description":"Child element to attach tooltip to. When `anchorRef` is provided this is\nstill rendered (so consumers can pass their SVG/HTML node as children and\nreference it via the ref) but `Tooltip` does **not** attach its own ref or\nevent handlers via `cloneElement`. Pass `<></>` if you're anchoring fully\nexternally."},"content":{"type":"ReactNode","required":true,"default":null,"description":"Tooltip content, rendered as-is in a portal.\n\nTrust boundary (#325): pass plain strings or DS components. If the content is\nUNTRUSTED (AI / CMS / user-supplied), route it through `<Markdown>` (which\nsanitizes) rather than passing raw HTML or arbitrary nodes."},"dark":{"type":"boolean","required":false,"default":"false","description":"Dark variant with inverted colors"},"delay":{"type":"number","required":false,"default":"300","description":"Delay in ms before showing tooltip"},"disabled":{"type":"boolean","required":false,"default":"false","description":"Disable the tooltip"},"maxWidth":{"type":"number","required":false,"default":"280","description":"Maximum width in pixels"},"position":{"type":"Position","required":false,"default":"'top'","description":"Preferred position (auto adjusts if doesn't fit)"}},"description":"A lightweight tooltip with smart positioning and customizable appearance. Automatically adjusts position to stay within viewport boundaries. ## Positioning & overflow contract - Rendered via `<Portal>` into `document.body`, so Tooltips **escape ancestor   `overflow: hidden` / `overflow: auto` containers and transformed stacking   contexts**. Tooltipping a cell inside a scrollable `Card` is not clipped. - Stacks at `--z-index-tooltip` (1250), above all overlays except the toast   layer. See the Z-index Layering Contract for the full scale. - Uses the shared `usePortalPosition` hook for `top` /","examples":[],"composes":null,"appliesClassNames":null},"VisuallyHidden":{"kind":"component","category":"Content Display","platforms":["web"],"serverSafe":true,"useClient":false,"polymorphic":true,"ref":"HTMLElement","subpath":"./components/VisuallyHidden","extends":["HTMLAttributes<HTMLElement>","RefAttributes<HTMLElement>"],"deprecated":null,"props":{"as":{"type":"VisuallyHiddenElement","required":false,"default":"'span'","description":"HTML element to render as. Defaults to `'span'`."},"children":{"type":"ReactNode","required":true,"default":null,"description":"Content visually hidden but read by AT."}},"description":"Renders content that is visually hidden but remains accessible to screen readers — the canonical \"sr-only\" pattern (WCAG 1.3.1, 4.1.2 helper). Use for off-screen labels, supplementary descriptions, and icon-button names that should never appear visually. @example <button>   <Icon name=\"trash\" />   <VisuallyHidden>Delete item</VisuallyHidden> </button>","examples":[],"composes":null,"appliesClassNames":null}},"hooks":{"useDisclosure":{"kind":"hook","category":"state","serverSafe":false,"useClient":true,"subpath":"@lando-labs/design-system/hooks","description":"Disclosure Hook The canonical open/close/toggle primitive behind every disclosure surface in the library — Modal, Drawer, Dropdown, Popover, Accordion, Collapsible. Owns a single boolean and hands back the four operations that act on it, so a consumer never has to hand-roll `const [isOpen, setIsOpen] = useState(false)` plus three inline arrow functions. Every handler is referentially STABLE — `open`, `close`, `toggle` and `set` keep the same identity for the lifetime of the component, as does the object holding them. They can be passed straight to a memoized child or an effect's dependency arr","signature":"useDisclosure(initial?: boolean): [boolean, UseDisclosureHandlers]","returns":"[boolean, UseDisclosureHandlers]"},"useToggle":{"kind":"hook","category":"state","serverSafe":false,"useClient":true,"subpath":"@lando-labs/design-system/hooks","description":"Toggle Hook Cycles a value through a fixed list. With no arguments it is a plain boolean toggle (`[false, true]`); given a list, it advances through it and wraps at the end — which is what most \"cycle the theme\", \"cycle the sort direction\" or \"step through a status\" controls actually want, without the modular arithmetic at the call site. The returned setter is referentially STABLE and doubles as both operations: called with no argument it advances to the next value in the cycle; called with an explicit value it jumps straight to it. It stays stable even when the caller passes a fresh inline ar","signature":"useToggle<T = boolean>(values?: readonly T[]): [T, (value?: T) => void]","returns":"[T, (value?: T) => void]"},"useDebouncedValue":{"kind":"hook","category":"state","serverSafe":false,"useClient":true,"subpath":"@lando-labs/design-system/hooks","description":"Debounced Value Hook Returns `value` only once it has stopped changing for `delay` milliseconds — the standard way to keep an expensive reaction (a search request, a filter pass over a large table, a validation round-trip) off the keystroke path while the input itself stays fully responsive. This debounces the VALUE, not a callback: the input stays controlled and re-renders on every keystroke, while the returned value lags behind and only settles when typing pauses. The pending timer is cleared whenever `value` (or `delay`) changes and on unmount, so a fast typist never queues a backlog of tim","signature":"useDebouncedValue<T>(value: T, delay: number): T","returns":"T"},"useLocalStorage":{"kind":"hook","category":"state","serverSafe":false,"useClient":true,"subpath":"@lando-labs/design-system/hooks","description":"Local Storage Hook A `useState`-like API backed by `localStorage`, returning `[value, setValue, remove]`. SSR-safe: renders `defaultValue` on the server and on the first client render, reading the persisted value only after mount so hydration never mismatches. Values are JSON serialized/deserialized; corrupt or unparseable data falls back to `defaultValue`. Reads and writes tolerate `localStorage` throwing (Safari private mode, quota exceeded) without crashing, and changes are synchronized across tabs via the `storage` event.","signature":"useLocalStorage<T>(key: string, defaultValue: T): [T, (value: T | ((prev: T) => T)) => void, () => void]","returns":"[T, (value: T | ((prev: T) => T)) => void, () => void]"},"useInterval":{"kind":"hook","category":"timing","serverSafe":false,"useClient":true,"subpath":"@lando-labs/design-system/hooks","description":"Interval Hook Runs `callback` every `delay` milliseconds, and cleans up after itself. Pass `delay: null` to PAUSE the interval — the timer is cleared, and re-supplying a number restarts it. That makes the pause/resume of a polling loop, a carousel or a countdown a matter of flipping one prop, with no imperative timer handles at the call site. The declarative version of `setInterval` (Dan Abramov's pattern): the callback is held in a ref that is refreshed on every render, so each tick invokes the LATEST closure — it always sees current props and state — while the timer itself only depends on `d","signature":"useInterval(callback: () => void, delay: number | null): void","returns":"void"},"useTimeout":{"kind":"hook","category":"timing","serverSafe":false,"useClient":true,"subpath":"@lando-labs/design-system/hooks","description":"Timeout Hook Runs `callback` once, `delay` milliseconds after the timer starts, and cleans up after itself. Pass `delay: null` to CANCEL a pending timeout — nothing fires, and supplying a number again arms a fresh one. The auto-dismiss of a Toast, a delayed empty state, a \"still loading…\" hint: all of them become one prop rather than a `setTimeout` plus a cleanup plus a ref to the handle. The declarative counterpart to `useInterval`, and it shares its guarantee: the callback lives in a ref refreshed on every render, so it fires with the LATEST closure (current props and state, never a stale ca","signature":"useTimeout(callback: () => void, delay: number | null): void","returns":"void"},"useEventListener":{"kind":"hook","category":"dom","serverSafe":false,"useClient":true,"subpath":"@lando-labs/design-system/hooks","description":"Event Listener Hook Subscribes to a DOM event on `window` (the default target), `document`, a raw element, or a React ref — and keeps that subscription honest. The handler is held in a ref, so an inline arrow function is fine: consumers never need `useCallback`, and passing a fresh handler on every render does NOT detach and re-attach the listener. The listener is re-attached only when the event `type`, the `target`, or the VALUES of `options` change, and is always removed on unmount. The target is resolved inside an effect, so nothing touches `window` during render and the hook is safe to run","signature":"useEventListener<K extends keyof WindowEventMap>(type: K, handler: (event: WindowEventMap[K]) => void, target?: Window | Document | HTMLElement | React.RefObject<HTMLElement | null> | null, options?: AddEventListenerOptions): void","returns":"void"},"useClickOutside":{"kind":"hook","category":"dom","serverSafe":false,"useClient":true,"subpath":"@lando-labs/design-system/hooks","description":"Click Outside Hook Detects clicks outside a referenced element and triggers a callback. Useful for closing modals, dropdowns, tooltips, etc.","signature":"useClickOutside(ref: React.RefObject<HTMLElement | null>, callback: (event: MouseEvent | TouchEvent) => void, isActive?: boolean): void","returns":"void"},"useHover":{"kind":"hook","category":"dom","serverSafe":false,"useClient":true,"subpath":"@lando-labs/design-system/hooks","description":"Hover Hook Tracks whether the pointer is over an element, via `mouseenter`/`mouseleave`. Returns a ref to attach to the element and the current hovered state — useful for hover-revealed affordances (row actions, card overlays, copy buttons) where a CSS `:hover` rule cannot express the change, because it has to drive React state rather than styling. The listeners are attached in an effect (never during render, so the hook is server-safe) and removed on unmount. `mouseenter`/`mouseleave` do not bubble, so nested children never flip the state — unlike `mouseover`/`mouseout`.","signature":"useHover<T extends HTMLElement = HTMLElement>(): [ React.RefObject<T | null>, boolean ]","returns":"[ React.RefObject<T | null>, boolean ]"},"useIntersection":{"kind":"hook","category":"dom","serverSafe":false,"useClient":true,"subpath":"@lando-labs/design-system/hooks","description":"Intersection Observer Hook Tracks when a referenced element enters or leaves the viewport (or a custom `root`), exposing the latest `IntersectionObserverEntry` — so `isIntersecting`, `intersectionRatio` and the measured rects are all in reach. Lazy-loaded media, infinite scroll, scroll-spy navigation and reveal-on-scroll animations all build on this. The entry is `null` until the observer first reports. The observer is created inside an effect (never during render, so the hook is server-safe) and is disconnected on unmount. Options are keyed by VALUE rather than identity: an inline `{ threshol","signature":"useIntersection<T extends Element = Element>(options?: IntersectionObserverInit): [React.RefObject<T | null>, IntersectionObserverEntry | null]","returns":"[React.RefObject<T | null>, IntersectionObserverEntry | null]"},"useResizeObserver":{"kind":"hook","category":"dom","serverSafe":false,"useClient":true,"subpath":"@lando-labs/design-system/hooks","description":"Resize Observer Hook Measures a referenced element and keeps its content-box `width`/`height` in state as it resizes — for any reason, not just a viewport change: a sibling growing, a font loading, a panel collapsing. This is what container-query-style logic, responsive charts and auto-sizing virtualized lists are built on. The size starts at `{ width: 0, height: 0 }` — the value the server renders and the client hydrates with — and is filled in once the observer first reports. The observer is created inside an effect (never during render, so the hook is server-safe) and disconnected on unmoun","signature":"useResizeObserver<T extends Element = Element>(): [ React.RefObject<T | null>, { width: number; height: number; } ]","returns":"[ React.RefObject<T | null>, { width: number; height: number; } ]"},"useWindowScroll":{"kind":"hook","category":"dom","serverSafe":false,"useClient":true,"subpath":"@lando-labs/design-system/hooks","description":"Window Scroll Hook Tracks the window's scroll offset as `{ x, y }` — the input for a header that condenses, a reading-progress bar, a back-to-top button, or parallax. Scroll fires far faster than React can usefully re-render, so updates are coalesced with `requestAnimationFrame`: a burst of scroll events inside one frame produces exactly one state update, and an offset that has not actually moved returns the SAME object, so it cannot trigger a re-render. Any pending frame is cancelled and the listener removed on unmount. Server-safe: the offset starts at `{ x: 0, y: 0 }` — the value the server","signature":"useWindowScroll(): { x: number; y: number; }","returns":"{ x: number; y: number; }"},"useMediaQuery":{"kind":"hook","category":"browser","serverSafe":false,"useClient":true,"subpath":"@lando-labs/design-system/hooks","description":"Media Query Hook Subscribes to a CSS media query and reports whether it currently matches. SSR-safe: returns `defaultValue` (default `false`) on the server and on the first client render, then switches to the real `matchMedia` result after mount — so the first client render always agrees with the server markup and hydration never mismatches. Re-subscribes when `query` changes and removes its `change` listener on unmount.","signature":"useMediaQuery(query: string, defaultValue?: boolean): boolean","returns":"boolean"},"useViewportSize":{"kind":"hook","category":"browser","serverSafe":false,"useClient":true,"subpath":"@lando-labs/design-system/hooks","description":"Viewport Size Hook Tracks the browser viewport dimensions, updating on `resize` and `orientationchange`. SSR-safe: returns `{ width: 0, height: 0 }` on the server and on the first client render, then the real `window.innerWidth` / `innerHeight` after mount. A burst of resize events is coalesced with `requestAnimationFrame` so state updates at most once per frame. Listeners and any pending frame are cleaned up on unmount.","signature":"useViewportSize(): { width: number; height: number; }","returns":"{ width: number; height: number; }"},"useClipboard":{"kind":"hook","category":"browser","serverSafe":false,"useClient":true,"subpath":"@lando-labs/design-system/hooks","description":"Clipboard Hook Copies text to the system clipboard and tracks the outcome. `copied` flips to `true` on success and auto-resets to `false` after `timeout` ms (default 2000). Failures — an unavailable Clipboard API (SSR, insecure context) or a denied permission — populate `error` instead of throwing, so `copy` never rejects and a consumer never needs a try/catch. `reset` clears both flags, and the pending auto-reset timer is cleared on unmount.","signature":"useClipboard(timeout?: number): { copy: (text: string) => Promise<void>; copied: boolean; error: Error | null; reset: () => void; }","returns":"{ copy: (text: string) => Promise<void>; copied: boolean; error: Error | null; reset: () => void; }"},"useMounted":{"kind":"hook","category":"lifecycle","serverSafe":false,"useClient":true,"subpath":"@lando-labs/design-system/hooks","description":"Mounted Hook Returns `false` on the server and during the first client render, then `true` after the component has mounted. This is the canonical Next.js hydration guard: gate client-only UI (portals, or any value that differs between server and client) behind it so the first client render matches the server markup and hydration never mismatches.","signature":"useMounted(): boolean","returns":"boolean"},"useFocusTrap":{"kind":"hook","category":"a11y","serverSafe":false,"useClient":true,"subpath":"@lando-labs/design-system/hooks","description":"Focus Trap Hook Traps focus within a container element for modals, dropdowns, etc. Handles Tab and Shift+Tab navigation and returns focus to trigger on cleanup.","signature":"useFocusTrap(ref: React.RefObject<HTMLElement | null>, isActive?: boolean): void","returns":"void"},"useKeyPress":{"kind":"hook","category":"keyboard","serverSafe":false,"useClient":true,"subpath":"@lando-labs/design-system/hooks","description":"Key Press Hook Detects when specific keyboard keys are pressed and triggers callbacks. Supports multiple keys and modifier keys.","signature":"useKeyPress(targetKeys: string | string[], callback: (key: string, event: KeyboardEvent) => void, isActive?: boolean): void","returns":"void"},"usePortalPosition":{"kind":"hook","category":"layout","serverSafe":false,"useClient":true,"subpath":"@lando-labs/design-system/hooks","description":"usePortalPosition Hook Shared positioning logic for portal-rendered overlays (Dropdown, Select, TagInput, etc). Handles the common pain points when positioning a portaled element relative to a trigger: - **No flash-at-(0,0)**: Returns off-screen coordinates (-9999) until the element has   been measured. Consumers should apply `visibility: hidden` (or respect `isReady`)   while `isReady === false`. - **Reliable mount measurement**: Uses `useLayoutEffect` + a `requestAnimationFrame`   retry loop so positioning is calculated synchronously before paint, even when the   Portal has not yet attached","signature":"usePortalPosition(triggerRef: React.RefObject<HTMLElement | null>, isOpen: boolean, options: UsePortalPositionOptions): PortalPosition","returns":"PortalPosition"}},"tokens":{"colors":{"semantic":{"success":{"lightest":"#D1FAE5","light":"#6EE7B7","base":"#10B981","dark":"#047857","darkest":"#064E3B"},"warning":{"lightest":"#FEF3E2","light":"#FCD980","base":"#F59E0B","dark":"#D97706","darkest":"#92400E"},"error":{"lightest":"#FEE2E2","light":"#FCA5A5","base":"#EF4444","dark":"#DC2626","darkest":"#7F1D1D"},"info":{"lightest":"#DBEAFE","light":"#93C5FD","base":"#3B82F6","dark":"#1D4ED8","darkest":"#1E3A8A"}},"brand":{"ocean":{"lightest":"#E6F4F7","lighter":"#B3DDE8","light":"#66C2D9","base":"#2BA3D4","medium":"#1B7FA8","dark":"#136080","darker":"#0D4358","darkest":"#082A38"},"teal":{"lightest":"#E6F7F7","lighter":"#B3EBEB","light":"#66D9D9","base":"#2DBFBF","medium":"#1A9999","dark":"#127373","darker":"#0C4D4D","darkest":"#062929"},"neutral":{"50":"#F8FAFB","100":"#F1F5F7","200":"#E1E8ED","300":"#C7D3DB","400":"#B0BEC5","500":"#90A4AE","600":"#607D8B","700":"#455A64","800":"#37474F","900":"#263238","white":"#FFFFFF","black":"#000000"}}},"spacing":{"px":{"0":0,"1":1,"2":2,"4":4,"8":8,"12":12,"16":16,"20":20,"24":24,"32":32,"40":40,"48":48,"56":56,"64":64,"80":80,"96":96,"128":128,"160":160,"192":192,"224":224,"256":256},"none":0,"2xs":4,"2xs-dense":6,"xs":8,"sm":12,"md":16,"lg":24,"xl":32,"2xl":48,"3xl":64,"4xl":96,"5xl":128,"6xl":192,"7xl":256},"typography":{"fontFamily":{"base":"\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif","mono":"\"JetBrains Mono\", \"Fira Code\", \"Roboto Mono\", \"Courier New\", monospace","display":"\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"},"fontSize":{"2xs":10,"xs":13,"sm":14,"base":16,"lg":18,"xl":20,"2xl":25,"3xl":31,"4xl":39,"5xl":49,"6xl":61,"7xl":76},"fontWeight":{"normal":400,"medium":500,"semibold":600,"bold":700,"extrabold":800},"lineHeight":{"none":1,"tight":1.25,"snug":1.375,"normal":1.5,"relaxed":1.625,"loose":2},"letterSpacing":{"tighter":-0.05,"tight":-0.025,"normal":0,"wide":0.025,"wider":0.05,"widest":0.1}},"radius":{"none":0,"xs":2,"sm":4,"md":6,"lg":8,"xl":12,"2xl":16,"3xl":24,"4xl":32,"full":9999},"shadows":{"light":{"none":"none","xs":[{"x":0,"y":1,"blur":2,"spread":0,"color":"rgba(15, 23, 42, 0.05)"}],"sm":[{"x":0,"y":1,"blur":3,"spread":0,"color":"rgba(15, 23, 42, 0.1)"},{"x":0,"y":1,"blur":2,"spread":-1,"color":"rgba(15, 23, 42, 0.1)"}],"md":[{"x":0,"y":4,"blur":6,"spread":-1,"color":"rgba(15, 23, 42, 0.1)"},{"x":0,"y":2,"blur":4,"spread":-2,"color":"rgba(15, 23, 42, 0.1)"}],"lg":[{"x":0,"y":10,"blur":15,"spread":-3,"color":"rgba(15, 23, 42, 0.1)"},{"x":0,"y":4,"blur":6,"spread":-4,"color":"rgba(15, 23, 42, 0.1)"}],"xl":[{"x":0,"y":20,"blur":25,"spread":-5,"color":"rgba(15, 23, 42, 0.1)"},{"x":0,"y":8,"blur":10,"spread":-6,"color":"rgba(15, 23, 42, 0.1)"}],"2xl":[{"x":0,"y":25,"blur":50,"spread":-12,"color":"rgba(15, 23, 42, 0.25)"}],"inner":[{"x":0,"y":2,"blur":4,"spread":0,"color":"rgba(15, 23, 42, 0.05)","inset":true}],"outline":[{"x":0,"y":0,"blur":0,"spread":3,"color":"rgba(100, 116, 139, 0.5)"}]},"dark":{"none":"none","xs":[{"x":0,"y":1,"blur":2,"spread":0,"color":"rgba(0, 0, 0, 0.3)"}],"sm":[{"x":0,"y":1,"blur":3,"spread":0,"color":"rgba(0, 0, 0, 0.4)"},{"x":0,"y":1,"blur":2,"spread":-1,"color":"rgba(0, 0, 0, 0.4)"}],"md":[{"x":0,"y":4,"blur":6,"spread":-1,"color":"rgba(0, 0, 0, 0.4)"},{"x":0,"y":2,"blur":4,"spread":-2,"color":"rgba(0, 0, 0, 0.4)"}],"lg":[{"x":0,"y":10,"blur":15,"spread":-3,"color":"rgba(0, 0, 0, 0.4)"},{"x":0,"y":4,"blur":6,"spread":-4,"color":"rgba(0, 0, 0, 0.4)"}],"xl":[{"x":0,"y":20,"blur":25,"spread":-5,"color":"rgba(0, 0, 0, 0.5)"},{"x":0,"y":8,"blur":10,"spread":-6,"color":"rgba(0, 0, 0, 0.5)"}],"2xl":[{"x":0,"y":25,"blur":50,"spread":-12,"color":"rgba(0, 0, 0, 0.6)"}],"inner":[{"x":0,"y":2,"blur":4,"spread":0,"color":"rgba(0, 0, 0, 0.3)","inset":true}],"outline":[{"x":0,"y":0,"blur":0,"spread":3,"color":"rgba(100, 116, 139, 0.4)"}]},"colored":{"primary":[{"x":0,"y":4,"blur":14,"spread":0,"color":"rgba(126, 134, 142, 0.39)"}],"success":[{"x":0,"y":4,"blur":14,"spread":0,"color":"rgba(16, 185, 129, 0.39)"}],"warning":[{"x":0,"y":4,"blur":14,"spread":0,"color":"rgba(245, 158, 11, 0.39)"}],"error":[{"x":0,"y":4,"blur":14,"spread":0,"color":"rgba(239, 68, 68, 0.39)"}]}},"motion":{"animation":{"duration":{"instant":0,"fastest":50,"faster":100,"fast":150,"normal":200,"slow":300,"slower":500,"slowest":700},"easing":{"linear":"linear","easeIn":[0.4,0,1,1],"easeOut":[0,0,0.2,1],"easeInOut":[0.4,0,0.2,1],"wave":[0,0,0.2,1],"surge":[0.34,1.56,0.64,1],"ripple":[0.25,0.46,0.45,0.94],"tide":[0.65,0,0.35,1],"bounce":[0.68,-0.55,0.265,1.55],"elastic":[0.175,0.885,0.32,1.275]},"delay":{"none":0,"shortest":50,"short":100,"medium":150,"long":200,"longest":300}},"transitions":{"default":"all 150ms cubic-bezier(0, 0, 0.2, 1)","fast":"all 100ms cubic-bezier(0, 0, 0.2, 1)","slow":"all 300ms cubic-bezier(0, 0, 0.2, 1)","color":"color 150ms cubic-bezier(0, 0, 0.2, 1)","background":"background-color 150ms cubic-bezier(0, 0, 0.2, 1)","border":"border-color 150ms cubic-bezier(0, 0, 0.2, 1)","opacity":"opacity 200ms cubic-bezier(0, 0, 0.2, 1)","transform":"transform 200ms cubic-bezier(0, 0, 0.2, 1)","shadow":"box-shadow 200ms cubic-bezier(0, 0, 0.2, 1)","button":"background-color 150ms cubic-bezier(0, 0, 0.2, 1), transform 50ms cubic-bezier(0, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0, 0, 0.2, 1)","link":"color 50ms cubic-bezier(0, 0, 0.2, 1)","modal":"opacity 200ms cubic-bezier(0, 0, 0.2, 1), transform 200ms cubic-bezier(0, 0, 0.2, 1)","dropdown":"opacity 150ms cubic-bezier(0, 0, 0.2, 1), transform 150ms cubic-bezier(0, 0, 0.2, 1)","tooltip":"opacity 100ms cubic-bezier(0, 0, 0.2, 1)"},"animationPresets":{"spinner":"spin 500ms linear infinite","pulse":"pulse 700ms cubic-bezier(0.4, 0, 0.2, 1) infinite","fadeIn":"fadeIn 200ms cubic-bezier(0, 0, 0.2, 1)","slideInUp":"slideInUp 200ms cubic-bezier(0, 0, 0.2, 1)","slideInDown":"slideInDown 200ms cubic-bezier(0, 0, 0.2, 1)","scaleIn":"scaleIn 150ms cubic-bezier(0, 0, 0.2, 1)","fadeOut":"fadeOut 150ms cubic-bezier(0.4, 0, 1, 1)","scaleOut":"scaleOut 150ms cubic-bezier(0.4, 0, 1, 1)","wave":"wave 500ms cubic-bezier(0, 0, 0.2, 1) infinite","ripple":"ripple 500ms cubic-bezier(0, 0, 0.2, 1)"}},"zIndex":{"base":0,"below":-1,"content":1,"sticky":100,"fixed":200,"overlay":900,"modal":1000,"drawer":1000,"dropdown":1100,"popover":1200,"tooltip":1300,"toast":1400,"notification":1400}},"icons":{"totalCount":70,"registry":{"menu":{"name":"menu","lucideName":"Menu","category":"navigation-and-ui"},"x":{"name":"x","lucideName":"X","category":"navigation-and-ui"},"close":{"name":"close","lucideName":"X","category":"navigation-and-ui"},"chevron-down":{"name":"chevron-down","lucideName":"ChevronDown","category":"navigation-and-ui"},"chevron-up":{"name":"chevron-up","lucideName":"ChevronUp","category":"navigation-and-ui"},"chevron-left":{"name":"chevron-left","lucideName":"ChevronLeft","category":"navigation-and-ui"},"chevron-right":{"name":"chevron-right","lucideName":"ChevronRight","category":"navigation-and-ui"},"arrow-left":{"name":"arrow-left","lucideName":"ArrowLeft","category":"navigation-and-ui"},"arrow-right":{"name":"arrow-right","lucideName":"ArrowRight","category":"navigation-and-ui"},"arrow-up":{"name":"arrow-up","lucideName":"ArrowUp","category":"navigation-and-ui"},"arrow-down":{"name":"arrow-down","lucideName":"ArrowDown","category":"navigation-and-ui"},"external-link":{"name":"external-link","lucideName":"ExternalLink","category":"navigation-and-ui"},"search":{"name":"search","lucideName":"Search","category":"actions"},"plus":{"name":"plus","lucideName":"Plus","category":"actions"},"minus":{"name":"minus","lucideName":"Minus","category":"actions"},"edit":{"name":"edit","lucideName":"Edit","category":"actions"},"trash":{"name":"trash","lucideName":"Trash2","category":"actions"},"copy":{"name":"copy","lucideName":"Copy","category":"actions"},"download":{"name":"download","lucideName":"Download","category":"actions"},"upload":{"name":"upload","lucideName":"Upload","category":"actions"},"refresh":{"name":"refresh","lucideName":"RefreshCw","category":"actions"},"send":{"name":"send","lucideName":"Send","category":"actions"},"filter":{"name":"filter","lucideName":"Filter","category":"actions"},"save":{"name":"save","lucideName":"Save","category":"actions"},"more-horizontal":{"name":"more-horizontal","lucideName":"MoreHorizontal","category":"actions"},"more-vertical":{"name":"more-vertical","lucideName":"MoreVertical","category":"actions"},"check":{"name":"check","lucideName":"Check","category":"status-and-feedback"},"check-circle":{"name":"check-circle","lucideName":"CheckCircle","category":"status-and-feedback"},"alert-circle":{"name":"alert-circle","lucideName":"AlertCircle","category":"status-and-feedback"},"alert-triangle":{"name":"alert-triangle","lucideName":"AlertTriangle","category":"status-and-feedback"},"info":{"name":"info","lucideName":"Info","category":"status-and-feedback"},"x-circle":{"name":"x-circle","lucideName":"XCircle","category":"status-and-feedback"},"loader":{"name":"loader","lucideName":"Loader2","category":"status-and-feedback"},"star":{"name":"star","lucideName":"Star","category":"content-and-media"},"heart":{"name":"heart","lucideName":"Heart","category":"content-and-media"},"bookmark":{"name":"bookmark","lucideName":"Bookmark","category":"content-and-media"},"link":{"name":"link","lucideName":"Link","category":"content-and-media"},"message":{"name":"message","lucideName":"MessageSquare","category":"content-and-media"},"message-square":{"name":"message-square","lucideName":"MessageSquare","category":"content-and-media"},"quote":{"name":"quote","lucideName":"Quote","category":"content-and-media"},"user":{"name":"user","lucideName":"User","category":"people-and-identity"},"users":{"name":"users","lucideName":"Users","category":"people-and-identity"},"settings":{"name":"settings","lucideName":"Settings","category":"system"},"calendar":{"name":"calendar","lucideName":"Calendar","category":"system"},"clock":{"name":"clock","lucideName":"Clock","category":"system"},"bell":{"name":"bell","lucideName":"Bell","category":"system"},"eye":{"name":"eye","lucideName":"Eye","category":"system"},"eye-off":{"name":"eye-off","lucideName":"EyeOff","category":"system"},"lock":{"name":"lock","lucideName":"Lock","category":"system"},"unlock":{"name":"unlock","lucideName":"Unlock","category":"system"},"logout":{"name":"logout","lucideName":"LogOut","category":"system"},"sun":{"name":"sun","lucideName":"Sun","category":"system"},"moon":{"name":"moon","lucideName":"Moon","category":"system"},"monitor":{"name":"monitor","lucideName":"Monitor","category":"system"},"file":{"name":"file","lucideName":"File","category":"system"},"folder":{"name":"folder","lucideName":"Folder","category":"system"},"image":{"name":"image","lucideName":"Image","category":"system"},"home":{"name":"home","lucideName":"Folder","category":"system"},"compass":{"name":"compass","lucideName":"Compass","category":"exploration--lifestyle"},"coffee":{"name":"coffee","lucideName":"Coffee","category":"exploration--lifestyle"},"dashboard":{"name":"dashboard","lucideName":"LayoutDashboard","category":"app-shell-affordances"},"layout-dashboard":{"name":"layout-dashboard","lucideName":"LayoutDashboard","category":"app-shell-affordances"},"bar-chart":{"name":"bar-chart","lucideName":"BarChart3","category":"app-shell-affordances"},"bar-chart-3":{"name":"bar-chart-3","lucideName":"BarChart3","category":"app-shell-affordances"},"book-open":{"name":"book-open","lucideName":"BookOpen","category":"app-shell-affordances"},"git-branch":{"name":"git-branch","lucideName":"GitBranch","category":"app-shell-affordances"},"sparkles":{"name":"sparkles","lucideName":"Sparkles","category":"app-shell-affordances"},"wrench":{"name":"wrench","lucideName":"Wrench","category":"app-shell-affordances"},"puzzle":{"name":"puzzle","lucideName":"Puzzle","category":"app-shell-affordances"},"check-square":{"name":"check-square","lucideName":"CheckSquare","category":"app-shell-affordances"}}},"exports":{"main":"./dist/index.js","subpaths":["./tokens","./components","./components/*","./hooks","./markdown-editor","./icons","./meta","./meta-verbose","./meta-schema","./styles","./styles.unlayered.css","./layer-order.css","./theme-init.js","./dist/design-system.css","./fonts.css","./llms.txt"]},"capabilities":{"rscSafe":["ArticleCard","AspectRatio","AvatarGroup","Badge","BottomNav","BottomNavItem","Box","Byline","Callout","Card","CardBody","CardFooter","CardHeader","CardTitle","Center","Chart","ChatMessage","ChatThinkingIndicator","Chip","Code","ColorSwatch","Container","DataTableStatic","DateDisplay","Divider","EmptyState","Footer","Grid","GridItem","Heading","IconButton","Inline","Lede","List","Mark","Markdown","NavTabs","NavTabsItem","PageHeader","PullQuote","ScrollArea","Skeleton","Spacer","Spinner","Stack","StatCard","StatusDot","StepProgress","Text","ToastContainer","VisuallyHidden"],"clientOnly":["Accordion","AccordionItem","Alert","AlertDialog","AppShell","ApprovalCard","AreaChart","Avatar","Banner","BarChart","Breadcrumb","BreadcrumbItem","Button","Calendar","CardMedia","Chat","ChatInput","Checkbox","CodeBlock","Collapsible","Combobox","CommandPalette","CommandPaletteGroup","CommandPaletteItem","DataTable","DatePicker","DateRangePicker","DetailCard","DonutChart","Drawer","Dropdown","DropdownItem","Field","FileInput","Form","FunnelChart","Header","Input","Kbd","LineChart","ListItem","Modal","MultiSelect","NumberInput","Pagination","PieChart","Popover","Portal","Progress","Radio","RadioGroup","SegmentedControl","Select","Sidebar","SidebarNavItem","Slider","Slot","Sparkline","StickyBar","Switch","Tab","TabList","TabPanel","Table","Tabs","TagInput","TaskCard","Textarea","ThemeBuilder","ThemeScope","Timeline","TimelineGroup","TimelineItem","Toast","ToastProvider","Tooltip"],"polymorphic":["ApprovalCard","ArticleCard","Avatar","Badge","BottomNavItem","Box","BreadcrumbItem","Button","Callout","Card","CardTitle","Center","Chip","Code","Container","DateDisplay","DetailCard","Divider","EmptyState","GridItem","Heading","Inline","Kbd","List","Mark","NavTabsItem","SidebarNavItem","Spacer","Sparkline","Stack","StatCard","TaskCard","Text","VisuallyHidden"],"withRef":["Accordion","AccordionItem","Alert","AlertDialog","AppShell","ApprovalCard","ArticleCard","AspectRatio","Avatar","AvatarGroup","Badge","Banner","BottomNav","BottomNavItem","Box","Breadcrumb","BreadcrumbItem","Button","Byline","Card","CardBody","CardFooter","CardHeader","CardMedia","CardTitle","Center","Chat","ChatInput","ChatMessage","ChatThinkingIndicator","Checkbox","Chip","Code","CodeBlock","Collapsible","ColorSwatch","Combobox","DateDisplay","DatePicker","DetailCard","Divider","Drawer","Dropdown","DropdownItem","EmptyState","FileInput","Footer","Form","FunnelChart","Grid","GridItem","Header","Heading","IconButton","Inline","Input","Kbd","Lede","List","ListItem","Mark","Markdown","Modal","MultiSelect","NavTabs","NavTabsItem","NumberInput","PageHeader","Pagination","Popover","Progress","PullQuote","Radio","RadioGroup","ScrollArea","SegmentedControl","Sidebar","SidebarNavItem","Skeleton","Slider","Slot","Spacer","Sparkline","Spinner","Stack","StatCard","StatusDot","StepProgress","StickyBar","Switch","Tab","TabList","TabPanel","Tabs","TagInput","TaskCard","Textarea","ThemeBuilder","ThemeScope","Timeline","TimelineGroup","TimelineItem","Toast","ToastContainer","Tooltip","VisuallyHidden"]},"themePresets":{"default":"brand-neutral","presets":{"brand-neutral":{"id":"brand-neutral","isDefault":true,"description":"Brand-neutral default palette (no preset applied).","tokenOverrides":{}},"forest":{"id":"forest","isDefault":false,"description":"Rich greens and emeralds for natural, calming interfaces","tokenOverrides":{"primary":"#10B981","accent":"#14B8A6","accentLight":"#5EEAD4","accentDark":"#0D9488","success":"#10B981"}},"lando":{"id":"lando","isDefault":false,"description":"Historical Lando ocean+teal palette (pre-v0.36.0 default)","tokenOverrides":{"primary":"#1B7FA8","secondary":"#2DBFBF","accent":"#2BA3D4","accentLight":"#66C2D9","accentDark":"#0D4358","success":"#2DBFBF","info":"#2BA3D4"}},"midnight":{"id":"midnight","isDefault":false,"description":"Deep purples and indigos for sophisticated interfaces","tokenOverrides":{"primary":"#6366F1","accent":"#8B5CF6","accentLight":"#A78BFA","accentDark":"#7C3AED","info":"#6366F1"}},"rose":{"id":"rose","isDefault":false,"description":"Soft pinks and magentas for elegant, welcoming interfaces","tokenOverrides":{"primary":"#EC4899","accent":"#F43F5E","accentLight":"#FB7185","accentDark":"#E11D48","info":"#EC4899"}},"slate":{"id":"slate","isDefault":false,"description":"Cool grays and subtle blues for professional, minimal feel","tokenOverrides":{"primary":"#64748B","accent":"#0EA5E9","accentLight":"#38BDF8","accentDark":"#0284C7","info":"#0EA5E9"}},"sunset":{"id":"sunset","isDefault":false,"description":"Warm corals and oranges for vibrant, energetic feel","tokenOverrides":{"primary":"#F97316","accent":"#F59E0B","accentLight":"#FCD34D","accentDark":"#D97706","warning":"#FBBF24"}}}}}