{ "version": "2.5.10", "generatedAt": "2026-08-18T05:34:57.089Z", "categories": { "Forms & Inputs": [ "Button", "ButtonGroup", "Checkbox", "RadioGroup", "Switch", "Input", "Label", "SmartInput", "Textarea", "Select", "Combobox", "Slider", "FileUpload", "DatePicker", "Prompt" ], "Navigation": [ "Layout", "Sidebar", "Tabs", "Breadcrumb", "Stepper", "Card", "Accordion", "AccordionNestedList", "NestedList", "Header", "Separator", "DynamicLayout" ], "Feedback & Overlay": [ "Alert", "AlertDialog", "Dialog", "Sheet", "Drawer", "Toast", "Toaster", "Tooltip", "Popover", "HoverCard", "DropdownMenu", "Loader", "Skeleton", "ProgressBar", "CommandPalette" ], "Data Display": [ "Avatar", "Badge", "Tag", "TagGroup", "Chips", "Calendar", "Chart", "EmptyContainer", "NotificationPanel", "DataTable", "AG Grid" ], "Flows & Wizards": [ "Wizard" ] }, "components": [ { "id": "accordion", "name": "Accordion", "category": "primitives", "description": "Collapsible accordion.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/accordion", "barrelExport": false, "exports": [ { "name": "Accordion", "kind": "component" }, { "name": "AccordionContent", "kind": "subcomponent" }, { "name": "AccordionItem", "kind": "subcomponent" }, { "name": "AccordionTrigger", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [ "AccordionItem", "AccordionTrigger", "AccordionContent" ], "capabilities": { "asChild": false, "formControl": false, "compound": true, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": true, "controlled": false, "uncontrolled": false, "i18n": true, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [ "accordion", "expandable section", "FAQ", "collapsible panel" ], "avoidWhen": [], "visualHints": "Expand/collapse sections.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only" ], "props": { "root": {}, "parts": { "AccordionTrigger": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "badge": { "type": "React.ReactNode", "required": false }, "rightActions": { "type": "React.ReactNode", "required": false }, "headingLevel": { "type": "AccordionHeadingLevel", "required": false, "description": "Heading level for the accordion section title. Defaults to `2` so panels\nfollow a single page `h1` without skipping levels." }, "variant": { "type": "\"default\" | \"plain\"", "required": false, "description": "`default` — leading chevron tile + i18n tooltip (standard panels).\n`plain` — trigger only; use for list rows (e.g. SKU) where children include layout + chevron." }, "renderChevronTooltip": { "type": "InfoTooltipRender", "required": false, "description": "App-layer tooltip for chevron (see defaultAccordionTooltipRender)." } }, "AccordionContent": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "surfaceClassName": { "type": "string", "required": false }, "onOpenAutoFocus": { "type": "EventHandler", "required": false, "description": "Focus event when dialog opens." }, "onCloseAutoFocus": { "type": "EventHandler", "required": false, "description": "Focus event when dialog closes." } } } }, "storybook": { "title": "Navigation/Accordion", "file": "src/components/primitives/accordion/accordion.stories.tsx" }, "sourceFile": "src/components/primitives/accordion/accordion.tsx", "adrPath": "src/components/primitives/accordion/accordion.decisions.md" }, { "id": "accordion-nested-list", "name": "AccordionNestedList", "category": "primitives", "description": "AccordionNestedList component.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/accordion-nested-list", "barrelExport": false, "exports": [ { "name": "AccordionNestedList", "kind": "component" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": true, "uncontrolled": false, "i18n": true, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [], "avoidWhen": [], "visualHints": "", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": { "sections": { "type": "AccordionNestedListSection[]", "required": true }, "onChange": { "type": "(sectionId: string, items: NestedListItem[]) => void", "required": false }, "onSubmit": { "type": "(allSections: Record) => void", "required": false }, "onCancel": { "type": "() => void", "required": false }, "enableApplyDiscard": { "type": "boolean", "required": false }, "validateApply": { "type": "(allSections: Record) => boolean", "required": false }, "submitButtonLabel": { "type": "string", "required": false }, "cancelButtonLabel": { "type": "string", "required": false }, "className": { "type": "string", "required": false }, "enableSearch": { "type": "boolean", "required": false }, "enableDragDrop": { "type": "boolean", "required": false }, "enableSelectAll": { "type": "boolean", "required": false }, "selectionMode": { "type": "SelectionMode", "required": false }, "searchPlaceholder": { "type": "string", "required": false }, "value": { "type": "string | string[]", "required": false }, "onValueChange": { "type": "(value: string | string[]) => void", "required": false }, "isMultiExpanded": { "type": "boolean", "required": false }, "defaultCollapseAll": { "type": "boolean", "required": false } } }, "storybook": { "title": "Navigation/Accordion Nested List", "file": "src/components/flows/accordion-nested-list/accordion-nested-list.stories.tsx" }, "sourceFile": "src/components/flows/accordion-nested-list/accordion-nested-list.tsx", "adrPath": null }, { "id": "ag-grid-react", "name": "AG Grid", "category": "data", "description": "Low-level AG Grid Enterprise wrapper (AgGridWrapper). Application feature code should use DataTable from impact-nova/data-table instead. This component passes through all AgGridReact props plus Impact Nova headers, cell renderers, and theme.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/ag-grid-react", "barrelExport": false, "exports": [ { "name": "AgGridWrapper", "kind": "component" }, { "name": "useAgGridTruncationTooltip", "kind": "hook" }, { "name": "subscribeGridApiEvent", "kind": "utility" }, { "name": "subscribeGridApiEvents", "kind": "utility" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": false, "portal": false, "focusTrap": true, "focusManagement": true, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": false, "clientOnly": true, "animation": false, "ssr": false }, "compositionGuidance": [ "**Custom cell renderers** — use `useAgGridTruncationTooltip(setTooltip, text, elementRef, overflowMode, location)` with AG Grid's native `setTooltip` callback. Do NOT use OverflowTooltip inside grid cells.", "Application tables — prefer **DataTable** from `impact-nova/data-table` over AgGridWrapper." ], "ssrSupport": "partial", "rscCompatibility": "client-only", "runtimeGuidance": "Heavy or browser-heavy component — use in Client Components; prefer next/dynamic with ssr:false for optional UI (grids, charts).", "bundleTier": "core", "useWhen": [ "custom grid engineering", "cell renderer development", "grid behavior prototyping" ], "avoidWhen": [ "simple HTML tables", "feature code without DataTable composition" ], "visualHints": "", "knownLimitations": [ "Prefer DataTable from impact-nova/data-table in application code", "Low-level grid API — collaborate with ag-mcp when installed" ], "props": { "root": { "children": { "type": "ReactNode", "required": false, "description": "Content rendered inside the grid container — rarely needed; use for overlays or custom chrome." }, "defaultColDef": { "type": "ColDef", "required": false, "description": "Default settings applied to every column unless overridden in `columnDefs`.\nCommon keys: `sortable`, `filter`, `resizable`, `flex`, `minWidth`.\nMerged with Impact Nova wrapper defaults (custom header, theme, formatters)." }, "defaultColGroupDef": { "type": "ColGroupDef", "required": false, "description": "Default settings for column groups (nested header rows).\nMerged with wrapper defaults when using grouped column headers." }, "ensureDomOrder": { "type": "boolean", "required": false, "description": "When true (default), DOM order matches visual column order for screen readers.\nSet false on very large planning grids (10k+ columns) for better virtualization performance." }, "valueFormatters": { "type": "Record string>", "required": false, "description": "Map of formatter name → function. Lets backend column defs reference formatters by string key.\nExample: `{ currency: (p) => '$' + p.value }` then column def uses `valueFormatter: 'currency'`." }, "themeOverride": { "type": "Theme", "required": false, "description": "Theme Builder preview only — resolves AG Grid params from a scoped DOM node.\nApplication code must rely on document CSS variables and the default theme." } }, "columnDefs": "ColDef[] — column definitions", "defaultColDef": "ColDef — default column definition", "onGridReady": "(params: GridReadyEvent) => void", "rowData": "TData[] — row data (when not using server-side model)" }, "sourceFile": "src/components/data/ag-grid-react/index.tsx", "adrPath": null, "storybook": { "title": "Data Display/AgGrid", "file": "src/components/data/ag-grid-react/ag-grid.stories.tsx" } }, { "id": "alert", "name": "Alert", "category": "feedback", "description": "Alert component with variant support.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/alert", "barrelExport": false, "exports": [ { "name": "Alert", "kind": "component" }, { "name": "AlertDescription", "kind": "subcomponent" }, { "name": "AlertIcon", "kind": "subcomponent" }, { "name": "AlertTitle", "kind": "subcomponent" } ], "variants": [ { "axis": "variant", "values": [ "default", "info", "warning", "error", "success" ], "default": "default" }, { "axis": "emphasis", "values": [ "elevated", "flat" ], "default": "elevated" } ], "sizes": [], "subcomponents": [], "capabilities": { "asChild": true, "formControl": false, "compound": true, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": true, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Lightweight presentational primitive — still requires a Client Component boundary in App Router when interactive. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [ "alert", "banner message", "info/warning/error message", "inline message" ], "avoidWhen": [], "visualHints": "Banner or box with icon and message; success/warning/error styles.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only" ], "props": { "root": { "asChild": { "type": "boolean", "required": false }, "removable": { "type": "boolean", "required": false }, "onClose": { "type": "() => void", "required": false }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "variant": { "type": "\"default\" | \"info\" | \"warning\" | \"error\" | \"success\"", "required": false, "default": "default", "description": "CVA variant axis. Default: \"default\"." }, "emphasis": { "type": "\"elevated\" | \"flat\"", "required": false, "default": "elevated", "description": "CVA emphasis axis. Default: \"elevated\"." } }, "parts": { "AlertIcon": { "variant": { "type": "\"default\" | \"info\" | \"success\" | \"warning\" | \"error\"", "required": false }, "className": { "type": "string", "required": false } } } }, "storybook": { "title": "Feedback & Overlay/Alert", "file": "src/components/feedback/alert/alert.stories.tsx" }, "sourceFile": "src/components/feedback/alert/alert.tsx", "adrPath": "src/components/feedback/alert/alert.decisions.md" }, { "id": "alert-dialog", "name": "AlertDialog", "category": "primitives", "description": "Confirmation or destructive action dialog.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/alert-dialog", "barrelExport": false, "exports": [ { "name": "AlertDialog", "kind": "component" }, { "name": "AlertDialogAction", "kind": "subcomponent" }, { "name": "AlertDialogCancel", "kind": "subcomponent" }, { "name": "AlertDialogContent", "kind": "subcomponent" }, { "name": "AlertDialogDescription", "kind": "subcomponent" }, { "name": "AlertDialogFooter", "kind": "subcomponent" }, { "name": "AlertDialogHeader", "kind": "subcomponent" }, { "name": "AlertDialogOverlay", "kind": "subcomponent" }, { "name": "AlertDialogPortal", "kind": "subcomponent" }, { "name": "AlertDialogTitle", "kind": "subcomponent" }, { "name": "AlertDialogTrigger", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": true, "portal": true, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": true, "uncontrolled": true, "i18n": false, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [ "confirm delete", "confirm action", "yes/no dialog", "warning dialog" ], "avoidWhen": [], "visualHints": "Modal with warning/confirm style; typically two buttons (Cancel / Confirm).", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only" ], "props": { "root": { "open": { "type": "boolean", "required": false, "description": "Controlled open state." }, "defaultOpen": { "type": "boolean", "required": false, "description": "Uncontrolled initial open state." }, "onOpenChange": { "type": "(open: boolean) => void", "required": false, "description": "Called when open state changes." }, "modal": { "type": "boolean", "required": false, "description": "Whether the dialog is modal." }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "parts": { "AlertDialogTrigger": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "AlertDialogPortal": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "AlertDialogOverlay": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "AlertDialogContent": { "onOpenAutoFocus": { "type": "EventHandler", "required": false, "description": "Focus event when dialog opens." }, "onCloseAutoFocus": { "type": "EventHandler", "required": false, "description": "Focus event when dialog closes." }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "AlertDialogHeader": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "AlertDialogFooter": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "AlertDialogTitle": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "AlertDialogDescription": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "AlertDialogAction": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "AlertDialogCancel": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } } } }, "storybook": { "title": "Feedback & Overlay/Alert Dialog", "file": "src/components/feedback/alert-dialog/alert-dialog.stories.tsx" }, "sourceFile": "src/components/feedback/alert-dialog/alert-dialog.tsx", "adrPath": null }, { "id": "avatar", "name": "Avatar", "category": "data-display", "description": "User avatar.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/avatar", "barrelExport": false, "exports": [ { "name": "Avatar", "kind": "component" }, { "name": "AvatarFallback", "kind": "subcomponent" }, { "name": "AvatarImage", "kind": "subcomponent" } ], "variants": [ { "axis": "shape", "values": [ "circle", "square" ], "default": "square" } ], "sizes": [ "sm", "md", "lg" ], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": true, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": true, "uncontrolled": true, "i18n": false, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [ "avatar", "user icon", "profile picture" ], "avoidWhen": [], "visualHints": "Circle with initials or image.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only" ], "props": { "root": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "open": { "type": "boolean", "required": false, "description": "Controlled open state." }, "defaultOpen": { "type": "boolean", "required": false, "description": "Uncontrolled initial open state." }, "onOpenChange": { "type": "(open: boolean) => void", "required": false, "description": "Called when open state changes." }, "modal": { "type": "boolean", "required": false, "description": "Whether the dialog is modal." }, "size": { "type": "\"sm\" | \"md\" | \"lg\"", "required": false, "default": "md", "description": "CVA size axis. Default: \"md\"." }, "shape": { "type": "\"circle\" | \"square\"", "required": false, "default": "square", "description": "CVA shape axis. Default: \"square\"." } }, "parts": { "AvatarImage": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "AvatarFallback": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } } } }, "storybook": { "title": "Data Display/Avatar", "file": "src/components/data-display/avatar/avatar.stories.tsx" }, "sourceFile": "src/components/data-display/avatar/avatar.tsx", "adrPath": null }, { "id": "badge", "name": "Badge", "category": "data-display", "description": "Status badge with variant/color/size/shape axes (cva).", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/badge", "barrelExport": false, "exports": [ { "name": "Badge", "kind": "component" } ], "variants": [ { "axis": "variant", "values": [ "solid", "outline", "subtle" ], "default": "solid" }, { "axis": "color", "values": [ "primary", "success", "warning", "destructive", "neutral" ], "default": "primary" }, { "axis": "shape", "values": [ "circle", "square" ], "default": "circle" }, { "axis": "layout", "values": [ "default", "iconOnly" ], "default": "default" } ], "sizes": [ "md", "sm" ], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": false, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Lightweight presentational primitive — still requires a Client Component boundary in App Router when interactive.", "bundleTier": "core", "useWhen": [ "badge", "count", "label", "status pill" ], "avoidWhen": [], "visualHints": "Small pill or dot with number/label.", "knownLimitations": [ "Decorative only — not a live region; do not use for dynamic status announcements" ], "props": { "root": { "icon": { "type": "React.ReactNode", "required": false, "description": "Optional leading icon (16px). Omit `children` for icon-only badge (`data-layout=\"iconOnly\"`)." }, "disabled": { "type": "boolean", "required": false, "description": "Inactive visual — `pointer-events-none` and disabled token colors." }, "variant": { "type": "\"solid\" | \"outline\" | \"subtle\"", "required": false, "default": "solid", "description": "CVA variant axis. Default: \"solid\"." }, "color": { "type": "\"primary\" | \"success\" | \"warning\" | \"destructive\" | \"neutral\"", "required": false, "default": "primary", "description": "CVA color axis. Default: \"primary\"." }, "size": { "type": "\"md\" | \"sm\"", "required": false, "default": "md", "description": "CVA size axis. Default: \"md\"." }, "shape": { "type": "\"circle\" | \"square\"", "required": false, "default": "circle", "description": "CVA shape axis. Default: \"circle\"." }, "layout": { "type": "\"default\" | \"iconOnly\"", "required": false, "default": "default", "description": "CVA layout axis. Default: \"default\"." } } }, "storybook": { "title": "Data Display/Badge", "file": "src/components/data-display/badge/badge.stories.tsx" }, "sourceFile": "src/components/data-display/badge/badge.tsx", "adrPath": "src/components/data-display/badge/badge.decisions.md" }, { "id": "breadcrumb", "name": "Breadcrumb", "category": "layout", "description": "Breadcrumb navigation with BreadcrumbHeader wrapper for page context bar.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/breadcrumb", "barrelExport": false, "exports": [ { "name": "Breadcrumb", "kind": "component" }, { "name": "BreadcrumbArrowSeparator", "kind": "subcomponent" }, { "name": "BreadcrumbEllipsis", "kind": "subcomponent" }, { "name": "BreadcrumbHeader", "kind": "subcomponent" }, { "name": "BreadcrumbHomeLink", "kind": "subcomponent" }, { "name": "BreadcrumbItem", "kind": "subcomponent" }, { "name": "BreadcrumbLink", "kind": "subcomponent" }, { "name": "BreadcrumbList", "kind": "subcomponent" }, { "name": "BreadcrumbPage", "kind": "subcomponent" }, { "name": "BreadcrumbSeparator", "kind": "subcomponent" }, { "name": "HomeIcon", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [ "BreadcrumbList", "BreadcrumbItem", "BreadcrumbLink", "BreadcrumbHomeLink", "BreadcrumbSeparator", "BreadcrumbPage", "BreadcrumbHeader", "HomeIcon" ], "capabilities": { "asChild": true, "formControl": false, "compound": true, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": true, "uncontrolled": true, "i18n": true, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [ "breadcrumb", "path navigation", "hierarchy trail", "page context bar" ], "avoidWhen": [], "visualHints": "Home > Section > Page style links in a sticky bar.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only" ], "props": { "root": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "separator": { "type": "React.ReactNode", "required": false }, "open": { "type": "boolean", "required": false, "description": "Controlled open state." }, "defaultOpen": { "type": "boolean", "required": false, "description": "Uncontrolled initial open state." }, "onOpenChange": { "type": "(open: boolean) => void", "required": false, "description": "Called when open state changes." }, "modal": { "type": "boolean", "required": false, "description": "Whether the dialog is modal." } }, "parts": { "BreadcrumbList": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "maxWords": { "type": "number", "required": false } }, "BreadcrumbLink": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "asChild": { "type": "boolean", "required": false }, "maxWords": { "type": "number", "required": false } }, "BreadcrumbPage": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "maxWords": { "type": "number", "required": false } } } }, "storybook": { "title": "Navigation/Breadcrumb", "file": "src/components/layout/breadcrumb/breadcrumb.stories.tsx" }, "sourceFile": "src/components/layout/breadcrumb/breadcrumb.tsx", "adrPath": null }, { "id": "button", "name": "Button", "category": "primitives", "description": "Primary actions; use variant/size props, avoid extra classNames for styling.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/button", "barrelExport": false, "exports": [ { "name": "Button", "kind": "component" } ], "variants": [ { "axis": "variant", "values": [ "default", "destructive", "destructive-outline", "outline", "secondary", "tertiary", "ghost", "link" ], "default": "default" } ], "sizes": [ "default", "sm", "md", "lg", "icon" ], "subcomponents": [], "capabilities": { "asChild": true, "formControl": false, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": false, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [ "primary action", "submit", "cancel", "CTA", "icon button", "link-style button" ], "avoidWhen": [], "visualHints": "Rounded buttons, filled or outline; icon-only when size=icon.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": { "asChild": { "type": "boolean", "required": false, "description": "Renders the button as a child element using Radix's Slot pattern." }, "tooltipSide": { "type": "\"top\" | \"bottom\" | \"left\" | \"right\"", "required": false, "description": "Side of the tooltip for icon-only buttons." }, "tooltipKeybinding": { "type": "KeyBinding", "required": false, "description": "Optional keyboard shortcut keybinding in the tooltip Kbd badge." }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "variant": { "type": "\"default\" | \"destructive\" | \"destructive-outline\" | \"outline\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"link\"", "required": false, "default": "default", "description": "CVA variant axis. Default: \"default\"." }, "size": { "type": "\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"iconMd\" | \"iconSm\"", "required": false, "default": "default", "description": "CVA size axis. Default: \"default\"." } } }, "storybook": { "title": "Forms & Inputs/Button", "file": "src/components/primitives/button/button.stories.tsx" }, "sourceFile": "src/components/primitives/button/button.tsx", "adrPath": "src/components/primitives/button/button.decisions.md" }, { "id": "button-group", "name": "ButtonGroup", "category": "primitives", "description": "Group of buttons together.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/button-group", "barrelExport": false, "exports": [ { "name": "ButtonGroup", "kind": "component" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": true, "uncontrolled": false, "i18n": false, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [ "multiple actions in a row", "button group", "segmented control" ], "avoidWhen": [], "visualHints": "Two or more buttons attached horizontally.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": { "value": { "type": "string", "required": false }, "onValueChange": { "type": "(value: string) => void", "required": false }, "disabled": { "type": "boolean", "required": false, "description": "Canonical disabled flag (charter). Prefer over `isDisabled`." }, "isDisabled": { "type": "boolean", "required": false, "deprecated": true }, "label": { "type": "string", "required": false }, "helperText": { "type": "React.ReactNode", "required": false }, "helperTextPosition": { "type": "HelperTextPosition", "required": false }, "error": { "type": "boolean", "required": false, "description": "Canonical error flag (charter). Prefer over `isError`." }, "isError": { "type": "boolean", "required": false, "deprecated": true }, "required": { "type": "boolean", "required": false }, "\"aria-label\"": { "type": "string", "required": false, "description": "Accessible name when no visible `label` is passed" }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } } }, "deprecations": [ { "prop": "isDisabled", "canonical": "disabled" }, { "prop": "isDisabled", "canonical": "disabled" }, { "prop": "isError", "canonical": "error" } ], "storybook": { "title": "Forms & Inputs/Button Group", "file": "src/components/primitives/button-group/button-group.stories.tsx" }, "sourceFile": "src/components/primitives/button-group/button-group.tsx", "adrPath": null }, { "id": "calendar", "name": "Calendar", "category": "data-display", "description": "Grid calendar (react-day-picker). Prefer DatePicker subpaths in apps.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/calendar", "barrelExport": false, "exports": [ { "name": "Calendar", "kind": "component" }, { "name": "CalendarCaptionHeader", "kind": "subcomponent" }, { "name": "CalendarDayButton", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": true, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": false, "clientOnly": false, "animation": false, "ssr": true }, "compositionGuidance": [ "Apps: `WeekPicker` / `WeekRangePicker` / `MultiWeekPicker` from `impact-nova/date-picker`. Import `Calendar` only for custom chrome.", "`pickerType=\"week\"` + `weekMode`: `single` (one week pill), `multiple` (independent week pills), `range` (one connected day block + one Wk track).", "Week **range** across dual months: only the Wk gutter is square at the pane join. Day cells keep `rounded-lg` brand start/end caps — do not flatten dates 1 and 30.", "Gutter selection is pane-local (in-month days only). A clipped Gregorian week ending 31 Aug does not paint September W01.", "Do not add custom `rounded-*` / accent fills on day cells or week numbers. Tokens: `bg-brand` caps, `bg-accent` track.", "Fiscal: `calendarKind=\"fiscal\"` on the same Calendar / DatePicker — no `` component." ], "ssrSupport": "partial", "rscCompatibility": "client-only", "runtimeGuidance": "Heavy or browser-heavy component — use in Client Components; prefer next/dynamic with ssr:false for optional UI (grids, charts).", "bundleTier": "core", "useWhen": [ "calendar", "date calendar", "month view", "week picker", "week range" ], "avoidWhen": [ "simple date input without calendar UI", "custom week-grid or restyled range caps" ], "visualHints": "Month grid with selectable dates; week pickers show a Wk gutter and rounded-lg range caps.", "knownLimitations": [ "Rarely imported directly — use WeekPicker / WeekRangePicker / DatePicker from impact-nova/date-picker", "Do not restyle selected day caps or Wk gutter radii — selection language is built into Calendar" ], "props": { "root": { "buttonVariant": { "type": "React.ComponentProps[\"variant\"]", "required": false }, "showFooter": { "type": "boolean", "required": false }, "footerFlashKey": { "type": "number", "required": false }, "footerFlashTarget": { "type": "import(\"./calendar-footer-emphasis\").FooterFlashTarget", "required": false }, "disableApply": { "type": "boolean", "required": false }, "onApply": { "type": "(value: CalendarApplyValue) => void", "required": false }, "onCancel": { "type": "() => void", "required": false }, "onClear": { "type": "() => void", "required": false }, "startMonth": { "type": "Date", "required": false }, "endMonth": { "type": "Date", "required": false }, "mode": { "type": "\"single\" | \"multiple\" | \"range\" | \"multi-range\"", "required": false }, "selected": { "type": "Date | Date[] | DateRange | DateRange[]", "required": false }, "onSelect": { "type": "(date: Date | Date[] | DateRange | undefined) => void", "required": false }, "pickerType": { "type": "\"date\" | \"week\" | \"month\" | \"quarter\" | \"year\"", "required": false }, "granularity": { "type": "Granularity", "required": false }, "weekMode": { "type": "\"single\" | \"multiple\" | \"range\" | \"multi-range\"", "required": false }, "selectedWeeks": { "type": "WeekSelection | WeekSelection[] | WeekRange", "required": false }, "onWeekSelect": { "type": "(weeks: WeekSelection | WeekSelection[] | WeekRange | undefined) => void", "required": false }, "calendarKind": { "type": "CalendarKind", "required": false, "description": "Calendar system. `\"fiscal\"` overlays FY/period chrome on the same Calendar." }, "fiscalMode": { "type": "FiscalMode", "required": false }, "fiscalMonthPattern": { "type": "FiscalMonthPattern", "required": false }, "fiscalYearStartMonth": { "type": "number", "required": false }, "fiscalConfig": { "type": "FiscalCalendarConfig", "required": false }, "weekStartsOn": { "type": "0 | 1 | 2 | 3 | 4 | 5 | 6", "required": false }, "monthMode": { "type": "\"single\" | \"multiple\" | \"range\" | \"multi-range\"", "required": false }, "selectedMonths": { "type": "MonthSelection | MonthSelection[] | MonthRange", "required": false }, "onMonthSelect": { "type": "(months: MonthSelection | MonthSelection[] | MonthRange | undefined) => void", "required": false }, "selectedQuarters": { "type": "QuarterSelection | QuarterSelection[] | QuarterRange", "required": false }, "onQuarterSelect": { "type": "( quarters: QuarterSelection | QuarterSelection[] | QuarterRange | undefined, ) => void", "required": false }, "selectedYear": { "type": "YearSelection | YearSelection[] | YearRange", "required": false }, "onYearSelect": { "type": "( year: YearSelection | YearSelection[] | YearRange | undefined, ) => void", "required": false }, "yearMode": { "type": "\"single\" | \"multiple\" | \"range\" | \"multi-range\"", "required": false }, "showIntervalCaption": { "type": "boolean", "required": false, "description": "Show civil/FY start–end under year cells. Default false." }, "showPeriodBoundaries": { "type": "boolean", "required": false, "description": "Draw `(` / `)` on fiscal period start/end days. Default false — periods are already labeled in the caption." }, "onSelectionChange": { "type": "(selection: CalendarSelection) => void", "required": false }, "showPresets": { "type": "boolean", "required": false }, "comparison": { "type": "\"prior-fy\"", "required": false }, "onComparisonChange": { "type": "(value: YoYComparison | undefined) => void", "required": false }, "onRangesChange": { "type": "(ranges: DateRange[] | undefined) => void", "required": false }, "fixedWeeks": { "type": "boolean", "required": false, "description": "Always render 6 week rows to prevent layout shift when navigating months. Default true. Padding weeks (all days outside the month) are visually hidden via the Week component." } } }, "storybook": { "title": "Data Display/Calendar", "file": "src/components/data-display/calendar/calendar.stories.tsx" }, "sourceFile": "src/components/data-display/calendar/calendar.tsx", "adrPath": "src/components/data-display/calendar/calendar.decisions.md" }, { "id": "card", "name": "Card", "category": "primitives", "description": "Container with CardHeader, CardTitle, CardDescription, CardContent, CardFooter.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/card", "barrelExport": false, "exports": [ { "name": "Card", "kind": "component" }, { "name": "CardContent", "kind": "subcomponent" }, { "name": "CardDescription", "kind": "subcomponent" }, { "name": "CardFooter", "kind": "subcomponent" }, { "name": "CardHeader", "kind": "subcomponent" }, { "name": "CardTitle", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [ "CardHeader", "CardTitle", "CardDescription", "CardContent", "CardFooter" ], "capabilities": { "asChild": false, "formControl": false, "compound": true, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": false, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [ "content block", "panel", "dashboard tile", "form container", "settings section", "rounded container with shadow" ], "avoidWhen": [], "visualHints": "Rounded rectangle with optional header/title and footer; shadow.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only" ], "props": { "root": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "parts": { "CardHeader": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "CardTitle": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "CardDescription": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "CardContent": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "CardFooter": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } } } }, "storybook": { "title": "Navigation/Card", "file": "src/components/data-display/card/card.stories.tsx" }, "sourceFile": "src/components/data-display/card/card.tsx", "adrPath": "src/components/data-display/card/card.decisions.md" }, { "id": "chart", "name": "Chart", "category": "data-display", "description": "Charts (Highcharts wrapper).", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/chart", "barrelExport": false, "exports": [ { "name": "Chart", "kind": "component" }, { "name": "ChartActions", "kind": "subcomponent" }, { "name": "ChartContainer", "kind": "subcomponent" }, { "name": "ChartContent", "kind": "subcomponent" }, { "name": "ChartFullScreen", "kind": "subcomponent" }, { "name": "ChartHeader", "kind": "subcomponent" }, { "name": "ChartTitle", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": true, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": true, "clientOnly": true, "animation": true, "ssr": false }, "ssrSupport": "partial", "rscCompatibility": "client-only", "runtimeGuidance": "Heavy or browser-heavy component — use in Client Components; prefer next/dynamic with ssr:false for optional UI (grids, charts). Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "heavy", "useWhen": [ "chart", "graph", "line/bar/pie chart", "dashboard chart" ], "avoidWhen": [], "visualHints": "Line, bar, pie, or area charts.", "knownLimitations": [ "Heavy bundle tier — never import from impact-nova barrel", "Compound component — use documented subcomponents only", "Uses browser globals — not SSR-safe without dynamic import" ], "props": { "root": { "type": { "type": "ChartType", "required": false }, "series": { "type": "ChartSeriesOptions[]", "required": false }, "title": { "type": "string", "required": false }, "subtitle": { "type": "string", "required": false }, "xAxisCategories": { "type": "string[]", "required": false }, "xAxisTitle": { "type": "string", "required": false }, "yAxisTitle": { "type": "string", "required": false }, "stacked": { "type": "boolean", "required": false }, "is3D": { "type": "boolean", "required": false }, "showLegend": { "type": "boolean", "required": false }, "showTooltip": { "type": "boolean", "required": false }, "options": { "type": "Highcharts.Options", "required": false }, "height": { "type": "number | string", "required": false }, "width": { "type": "number | string", "required": false }, "className": { "type": "string", "required": false }, "isLoading": { "type": "boolean", "required": false }, "loader": { "type": "React.ReactNode", "required": false }, "children": { "type": "React.ReactNode", "required": false }, "noWrapper": { "type": "boolean", "required": false } } }, "storybook": { "title": "Data Display/Chart", "file": "src/components/data-display/chart/chart.stories.tsx" }, "sourceFile": "src/components/data-display/chart/chart.tsx", "adrPath": null }, { "id": "checkbox", "name": "Checkbox", "category": "forms", "description": "Checkbox control.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/checkbox", "barrelExport": false, "exports": [ { "name": "Checkbox", "kind": "component" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": true, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": true, "controlled": true, "uncontrolled": true, "i18n": true, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [ "checkbox", "toggle option", "multi-select option" ], "avoidWhen": [], "visualHints": "Square checkable box.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "id": { "type": "string", "required": false }, "label": { "type": "React.ReactNode", "required": false, "description": "Text shown above the control so users know what to enter." }, "helperText": { "type": "React.ReactNode", "required": false, "description": "Optional hint or validation message shown below the control. Alias: `description` on Field." }, "helperTextPosition": { "type": "HelperTextPosition", "required": false, "description": "Where helper text appears: `absolute` floats below without pushing layout; `flow` takes page space." }, "labelOrientation": { "type": "LabelOrientation", "required": false, "description": "Label placement: `top` stacks label above control; `left` places label beside control." }, "error": { "type": "boolean | React.ReactNode", "required": false, "description": "When true, shows red error styling. Pass a ReactNode to also render an error message." }, "required": { "type": "boolean", "required": false, "description": "When true, shows a required indicator (asterisk) next to the label." }, "disabled": { "type": "boolean", "required": false, "description": "When true, the control is greyed out and cannot be clicked, typed into, or focused." }, "size": { "type": "ControlSize", "required": false, "description": "Controls height and padding: `sm`, `md`, `lg`, or `default`." }, "isError": { "type": "boolean", "required": false, "deprecated": true }, "open": { "type": "boolean", "required": false, "description": "Controlled open state." }, "defaultOpen": { "type": "boolean", "required": false, "description": "Uncontrolled initial open state." }, "onOpenChange": { "type": "(open: boolean) => void", "required": false, "description": "Called when open state changes." }, "modal": { "type": "boolean", "required": false, "description": "Whether the dialog is modal." } } }, "deprecations": [ { "prop": "isError", "canonical": "error" } ], "storybook": { "title": "Forms & Inputs/Checkbox", "file": "src/components/forms/checkbox/checkbox.stories.tsx" }, "sourceFile": "src/components/forms/checkbox/checkbox.tsx", "adrPath": "src/components/forms/checkbox/checkbox.decisions.md" }, { "id": "chips", "name": "Chips", "category": "primitives", "description": "Selectable chip group. Chip variant primary is a chip style — Button Primary maps to variant=default.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/chips", "barrelExport": false, "exports": [ { "name": "Chip", "kind": "subcomponent" } ], "variants": [ { "axis": "variant", "values": [ "default", "neutral", "outline", "brand", "secondary", "tertiary", "destructive" ], "default": "default" }, { "axis": "shape", "values": [ "rounded", "pill" ], "default": "rounded" }, { "axis": "selected", "values": [ "true", "false" ], "default": "true" } ], "sizes": [ "sm", "md", "lg" ], "subcomponents": [], "capabilities": { "asChild": true, "formControl": false, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": true, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [ "chips", "tag group", "selected items" ], "avoidWhen": [], "visualHints": "Multiple tags/chips in a row.", "knownLimitations": [ "Chip variant=\"primary\" is valid for Chip only; Button uses variant=\"default\"" ], "props": { "root": { "variant": { "type": "\"default\" | \"neutral\" | \"outline\" | \"brand\" | \"secondary\" | \"tertiary\" | \"destructive\"", "required": false, "default": "default", "description": "CVA variant axis. Default: \"default\"." }, "shape": { "type": "\"rounded\" | \"pill\"", "required": false, "default": "rounded", "description": "CVA shape axis. Default: \"rounded\"." }, "size": { "type": "\"sm\" | \"md\" | \"lg\"", "required": false, "default": "md", "description": "CVA size axis. Default: \"md\"." }, "selected": { "type": "\"true\" | \"false\"", "required": false, "default": "true", "description": "CVA selected axis. Default: \"true\"." } }, "parts": { "Chip": { "variant": { "type": "VariantProps[\"variant\"] | \"primary\"", "required": false, "deprecated": true }, "onRemove": { "type": "() => void", "required": false }, "removable": { "type": "boolean", "required": false }, "asChild": { "type": "boolean", "required": false }, "selectionMode": { "type": "ChipSelectionMode", "required": false, "description": "Single- vs multi-select affordance (Figma columns)." }, "selected": { "type": "boolean", "required": false, "description": "Selected / pressed state (border + label #4259EE)." }, "trailing": { "type": "React.ReactNode", "required": false, "description": "e.g. count for “Multi select + Number”" }, "disabled": { "type": "boolean", "required": false } } } }, "deprecations": [ { "prop": "variant", "canonical": "brand" } ], "storybook": { "title": "Data Display/Chips", "file": "src/components/primitives/chips/chips.stories.tsx" }, "sourceFile": "src/components/primitives/chips/chips.tsx", "adrPath": null }, { "id": "choice-card", "name": "ChoiceCard", "category": "forms", "description": "Single or multiple selection cards with useChoiceCardGroup.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/choice-card", "barrelExport": false, "exports": [ { "name": "ChoiceCard", "kind": "component" }, { "name": "ChoiceCardContent", "kind": "subcomponent" }, { "name": "ChoiceCardDescription", "kind": "subcomponent" }, { "name": "ChoiceCardGroup", "kind": "subcomponent" }, { "name": "ChoiceCardHeader", "kind": "subcomponent" }, { "name": "ChoiceCardIndicator", "kind": "subcomponent" }, { "name": "ChoiceCardMedia", "kind": "subcomponent" }, { "name": "ChoiceCardTitle", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [ "ChoiceCard", "ChoiceCardGroup", "useChoiceCardGroup" ], "capabilities": { "asChild": false, "formControl": true, "compound": true, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": true, "uncontrolled": true, "i18n": false, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [ "card selection", "radio cards", "multi-select cards" ], "avoidWhen": [], "visualHints": "", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only" ], "props": { "root": { "value": { "type": "string", "required": true }, "disabled": { "type": "boolean", "required": false }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "open": { "type": "boolean", "required": false, "description": "Controlled open state." }, "defaultOpen": { "type": "boolean", "required": false, "description": "Uncontrolled initial open state." }, "onOpenChange": { "type": "(open: boolean) => void", "required": false, "description": "Called when open state changes." }, "modal": { "type": "boolean", "required": false, "description": "Whether the dialog is modal." } }, "parts": { "ChoiceCardGroupBase": { "disabled": { "type": "boolean", "required": false }, "orientation": { "type": "\"horizontal\" | \"vertical\"", "required": false }, "wrap": { "type": "boolean", "required": false, "description": "Wrap cards to the next row (grid-like layout). Uses scoped CSS — safe in consumer apps." }, "className": { "type": "string", "required": false }, "children": { "type": "React.ReactNode", "required": false } }, "ChoiceCardGroupSingle": { "type": { "type": "\"single\"", "required": false }, "value": { "type": "string", "required": false }, "defaultValue": { "type": "string", "required": false }, "onValueChange": { "type": "(value: string) => void", "required": false } }, "ChoiceCardGroupMultiple": { "type": { "type": "\"multiple\"", "required": true }, "value": { "type": "string[]", "required": false }, "defaultValue": { "type": "string[]", "required": false }, "onValueChange": { "type": "(value: string[]) => void", "required": false } }, "ChoiceCardContent": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "ChoiceCardHeader": { "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." } } } }, "sourceFile": "src/components/forms/choice-card/choice-card.tsx", "adrPath": null, "storybook": { "title": "UI/ChoiceCard", "file": "src/components/forms/choice-card/choice-card.stories.tsx" } }, { "id": "combobox", "name": "Combobox", "category": "forms", "description": "String autocomplete with filtered dropdown. Controlled via value/onChange or uncontrolled via defaultValue. Supports size axis (sm, md, default, lg) and inline label/error via FieldControlProps.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/combobox", "barrelExport": false, "exports": [ { "name": "Combobox", "kind": "component" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": true, "compound": false, "portal": true, "focusTrap": false, "focusManagement": true, "keyboardNavigation": true, "controlled": true, "uncontrolled": true, "i18n": true, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [ "combobox", "searchable select", "autocomplete", "typeahead" ], "avoidWhen": [ "object options — use Select", "Radix Combobox compound pattern" ], "visualHints": "Input with dropdown; filter as you type.", "knownLimitations": [ "Options are string[] or numeric range — not { label, value } objects", "No public asChild prop", "Large option lists render inline (no virtualization yet)" ], "props": { "root": { "options": { "type": "string[]", "required": false, "description": "Static list of allowed string values" }, "min": { "type": "number", "required": false, "description": "Numeric range start (used with max + step to generate options)" }, "max": { "type": "number", "required": false, "description": "Numeric range end" }, "step": { "type": "number", "required": false, "description": "Numeric range increment" }, "defaultValue": { "type": "string", "required": false, "description": "Initial value (uncontrolled mode)" }, "value": { "type": "string", "required": false, "description": "Current value (controlled mode — overrides internal state when provided)" }, "onChange": { "type": "(value: string) => void", "required": false, "description": "Fires when a value is committed (selection or free-text)" }, "onBlur": { "type": "(event: React.FocusEvent) => void", "required": false, "description": "Fires on input blur" }, "placeholder": { "type": "string", "required": false, "description": "Input placeholder" }, "isError": { "type": "boolean", "required": false, "deprecated": true }, "isNumeric": { "type": "boolean", "required": false, "description": "Right-align input and dropdown values (for numeric data)" }, "className": { "type": "string", "required": false, "description": "Additional class on the root wrapper" }, "emptyMessage": { "type": "string", "required": false, "description": "Message shown when no options match the filter (default: \"No options found\")" }, "allowFreeText": { "type": "boolean", "required": false, "description": "If true, typed text is committed even when it doesn't match any option" }, "clearable": { "type": "boolean", "required": false, "description": "When true, shows a clear button to reset the committed value" }, "id": { "type": "string", "required": false }, "label": { "type": "React.ReactNode", "required": false, "description": "Text shown above the control so users know what to enter." }, "helperText": { "type": "React.ReactNode", "required": false, "description": "Optional hint or validation message shown below the control. Alias: `description` on Field." }, "helperTextPosition": { "type": "HelperTextPosition", "required": false, "description": "Where helper text appears: `absolute` floats below without pushing layout; `flow` takes page space." }, "labelOrientation": { "type": "LabelOrientation", "required": false, "description": "Label placement: `top` stacks label above control; `left` places label beside control." }, "error": { "type": "boolean | React.ReactNode", "required": false, "description": "When true, shows red error styling. Pass a ReactNode to also render an error message." }, "required": { "type": "boolean", "required": false, "description": "When true, shows a required indicator (asterisk) next to the label." }, "disabled": { "type": "boolean", "required": false, "description": "When true, the control is greyed out and cannot be clicked, typed into, or focused." }, "size": { "type": "ControlSize", "required": false, "description": "Controls height and padding: `sm`, `md`, `lg`, or `default`." } } }, "deprecations": [ { "prop": "isError", "canonical": "error" } ], "storybook": { "title": "Forms & Inputs/Combobox", "file": "src/components/forms/combobox/combobox.stories.tsx" }, "sourceFile": "src/components/forms/combobox/combobox.tsx", "adrPath": "src/components/forms/combobox/combobox.decisions.md" }, { "id": "command-palette", "name": "CommandPalette", "category": "flows", "description": "⌘K palette + global shortcut system. Requires CommandPaletteProvider at app root.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/command-palette", "barrelExport": false, "exports": [ { "name": "BROWSER_SHORTCUTS", "kind": "subcomponent" }, { "name": "COMMAND_SOURCE_LABELS", "kind": "subcomponent" }, { "name": "CommandPalette", "kind": "component" }, { "name": "CommandPaletteEmpty", "kind": "subcomponent" }, { "name": "CommandPaletteFooter", "kind": "subcomponent" }, { "name": "CommandPaletteGroup", "kind": "subcomponent" }, { "name": "CommandPaletteInput", "kind": "subcomponent" }, { "name": "CommandPaletteItem", "kind": "subcomponent" }, { "name": "CommandPaletteList", "kind": "subcomponent" }, { "name": "CommandPaletteProvider", "kind": "component" }, { "name": "CommandPaletteSeparator", "kind": "subcomponent" }, { "name": "CommandPaletteShortcut", "kind": "subcomponent" }, { "name": "Kbd", "kind": "subcomponent" }, { "name": "LocalStorageAdapter", "kind": "subcomponent" }, { "name": "ShortcutOverlay", "kind": "subcomponent" }, { "name": "ShortcutOverlayProvider", "kind": "component" }, { "name": "ShortcutRegistry", "kind": "subcomponent" }, { "name": "ShortcutScopeProvider", "kind": "component" } ], "variants": [], "sizes": [], "subcomponents": [ "CommandPaletteProvider", "CommandPalette", "ShortcutSettings", "ShortcutScopeProvider", "Kbd" ], "capabilities": { "asChild": false, "formControl": false, "compound": true, "portal": true, "focusTrap": true, "focusManagement": true, "keyboardNavigation": true, "controlled": true, "uncontrolled": false, "i18n": false, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "partial", "rscCompatibility": "client-only", "runtimeGuidance": "Heavy or browser-heavy component — use in Client Components; prefer next/dynamic with ssr:false for optional UI (grids, charts).", "bundleTier": "core", "useWhen": [ "command palette", "keyboard shortcuts", "⌘K", "quick actions", "shortcut settings" ], "avoidWhen": [], "visualHints": "Overlay opened by ⌘K; fuzzy search; shortcut settings grid.", "knownLimitations": [ "Client-only; wrap app in CommandPaletteProvider", "See impact-nova://command-palette for full integration" ], "providerRequired": "CommandPaletteProvider", "props": { "root": { "className": { "type": "string", "required": false }, "children": { "type": "React.ReactNode", "required": true }, "commands": { "type": "CommandDefinition[]", "required": false, "description": "Custom list of commands (overrides automatic registry commands)" }, "onCommandExecute": { "type": "(command: CommandDefinition) => void", "required": false, "description": "Called when a command is executed" }, "onOpenChange": { "type": "(open: boolean) => void", "required": false, "description": "Called when the palette opens/closes" }, "openKeybinding": { "type": "KeyBinding", "required": false, "description": "Custom keybinding to open the palette (defaults to ⌘K / Ctrl+K)" }, "storage": { "type": "ShortcutStorageAdapter", "required": false, "description": "Custom storage adapter for shortcuts and recent commands" } }, "parts": { "CommandPaletteInput": { "onValueChange": { "type": "(value: string) => void", "required": false } }, "CommandPaletteGroup": { "heading": { "type": "string", "required": false }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "CommandPaletteItem": { "command": { "type": "CommandDefinition", "required": true }, "isSelected": { "type": "boolean", "required": false }, "onSelect": { "type": "() => void", "required": false }, "keybinding": { "type": "KeyBinding", "required": false } }, "CommandPaletteShortcut": { "keybinding": { "type": "KeyBinding", "required": true }, "isSelected": { "type": "boolean", "required": false }, "external": { "type": "boolean", "required": false }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } } } }, "storybook": { "title": "Feedback & Overlay/Command Palette", "file": "src/components/flows/command-palette/command-palette.stories.tsx" }, "sourceFile": "src/components/flows/command-palette/command-palette.tsx", "adrPath": null }, { "id": "data-table", "name": "DataTable", "category": "data", "description": "Enterprise data table composing AG Grid. Use DataTable + DataTableContent in feature code. Settings sheets use DataTableSheetBody / DataTableSheetTabs / DataTableSheetTabPanel for scroll-safe column + format panels.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/data-table", "barrelExport": false, "exports": [ { "name": "DataTable", "kind": "component" }, { "name": "DataTableContent", "kind": "subcomponent" }, { "name": "DataTableToolbar", "kind": "subcomponent" }, { "name": "DataTableSheet", "kind": "subcomponent" }, { "name": "DataTableSheetContent", "kind": "subcomponent" }, { "name": "DataTableSheetHeader", "kind": "subcomponent" }, { "name": "DataTableSheetBody", "kind": "subcomponent" }, { "name": "DataTableSheetSection", "kind": "subcomponent" }, { "name": "DataTableSheetTabs", "kind": "subcomponent" }, { "name": "DataTableSheetTabsList", "kind": "subcomponent" }, { "name": "DataTableSheetTabPanel", "kind": "subcomponent" }, { "name": "DataTableColumnList", "kind": "subcomponent" }, { "name": "DataTableFormatOptions", "kind": "subcomponent" }, { "name": "DataTableSavedViews", "kind": "subcomponent" }, { "name": "DataTableViewMenuTrigger", "kind": "subcomponent" }, { "name": "DataTableViewMenuContent", "kind": "subcomponent" }, { "name": "DataTableViewMenuSettingsItem", "kind": "subcomponent" }, { "name": "DataTableViewMenuDensity", "kind": "subcomponent" }, { "name": "DataTableViewMenuViewportExpand", "kind": "subcomponent" }, { "name": "useDataTable", "kind": "hook" }, { "name": "useDataTableSheet", "kind": "hook" }, { "name": "useDataTableSheetApi", "kind": "hook" }, { "name": "PinSwitch", "kind": "subcomponent" }, { "name": "ColumnIndicator", "kind": "subcomponent" }, { "name": "IndicatorLegend", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [ "DataTableContent", "DataTableToolbar", "DataTableSheet", "DataTableSheetContent", "DataTableSheetHeader", "DataTableSheetBody", "DataTableSheetSection", "DataTableSheetTabs", "DataTableSheetTabsList", "DataTableSheetTabPanel", "DataTableColumnList", "DataTableFormatOptions", "DataTableSavedViews", "DataTableViewMenuTrigger", "DataTableViewMenuContent", "DataTableViewMenuSettingsItem" ], "capabilities": { "asChild": false, "formControl": false, "compound": true, "portal": true, "focusTrap": false, "focusManagement": false, "keyboardNavigation": true, "controlled": true, "uncontrolled": false, "i18n": false, "clientOnly": true, "animation": false, "ssr": false }, "compositionGuidance": [ "**Settings sheet (mandatory for tabbed panels):** `DataTableSheetContent` → `DataTableSheetHeader` → `DataTableSheetBody` → optional `DataTableSheetSection` (saved views) → `DataTableSheetTabs` → `DataTableSheetTabsList` + `DataTableSheetTabPanel`.", "**`layout=\"list\"`** — `DataTableColumnList`, `NestedList`, accordion nested lists. List scrolls internally; search stays fixed. One scroll owner.", "**`layout=\"scroll\"`** — `DataTableFormatOptions`, filter forms, long static forms. Tab panel body scrolls.", "**Never** stack `overflow-y-auto` on both tab panel and nested list — pick one scroll owner per visible tab.", "Storybook: Data Display/DataTable/Sheet layout → CanonicalComposition. Resource: impact-nova://data-table-sheet-layout." ], "ssrSupport": "partial", "rscCompatibility": "client-only", "runtimeGuidance": "Heavy or browser-heavy component — use in Client Components; prefer next/dynamic with ssr:false for optional UI (grids, charts).", "bundleTier": "heavy", "useWhen": [ "data table", "grid", "table", "list with columns", "sortable table", "table settings sheet" ], "avoidWhen": [ "simple HTML tables", "raw ag-grid-react in features", "raw Tabs + manual overflow-y-auto inside DataTableSheetContent" ], "visualHints": "Rows and columns; sortable/filterable; side settings panel with columns + format tabs.", "knownLimitations": [ "Heavy bundle — import from impact-nova/data-table only", "Requires client boundary in RSC apps" ], "props": { "root": { "children": { "type": "ReactNode", "required": true, "description": "Compose DataTableToolbar, DataTableContent, etc." }, "className": { "type": "string", "required": false, "description": "Layout class on root container." } }, "parts": { "DataTableSheetBody": { "children": { "type": "React.ReactNode", "required": true, "description": "Flex body below DataTableSheetHeader — establishes sheet scroll height chain." }, "className": { "type": "string", "required": false } }, "DataTableSheetSection": { "children": { "type": "React.ReactNode", "required": true, "description": "Non-scrolling chrome (saved views, summary row)." }, "className": { "type": "string", "required": false } }, "DataTableSheetTabs": { "value": { "type": "string", "required": false, "description": "Active tab value (controlled)." }, "onValueChange": { "type": "(value: string) => void", "required": false }, "variant": { "type": "string", "required": false, "description": "Tabs variant — typically \"line\" for settings panels." }, "className": { "type": "string", "required": false, "description": "Often `px-4` for horizontal padding." } }, "DataTableSheetTabPanel": { "layout": { "type": "\"list\" | \"scroll\"", "required": false, "default": "scroll", "description": "`list` — NestedList / column tree scrolls; search sticky. `scroll` — panel scrolls (format, filters)." }, "value": { "type": "string", "required": true, "description": "Tab value matching TabsTrigger." }, "className": { "type": "string", "required": false, "description": "Padding overrides — e.g. `p-0 pt-2` for columns, `p-4 pt-1` for format." }, "children": { "type": "React.ReactNode", "required": true } } } }, "storybook": { "title": "Data Display/DataTable", "file": "src/components/data/data-table/stories/data-table-split-cell.stories.tsx" }, "sourceFile": "src/components/data/data-table/data-table.tsx", "adrPath": "src/components/data/data-table/data-table.decisions.md" }, { "id": "date-picker", "name": "DatePicker", "category": "forms", "description": "Date, range, month/period, week, quarter, and year pickers. Fiscal overlay via calendarKind and fiscalConfig.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/date-picker", "barrelExport": false, "exports": [ { "name": "DatePicker", "kind": "component" }, { "name": "DateRangePicker", "kind": "subcomponent" }, { "name": "MonthPicker", "kind": "subcomponent" }, { "name": "MonthRangePicker", "kind": "subcomponent" }, { "name": "MultiDatePicker", "kind": "subcomponent" }, { "name": "MultiMonthPicker", "kind": "subcomponent" }, { "name": "MultiQuarterPicker", "kind": "subcomponent" }, { "name": "MultiWeekPicker", "kind": "subcomponent" }, { "name": "MultiYearPicker", "kind": "subcomponent" }, { "name": "QuarterPicker", "kind": "subcomponent" }, { "name": "QuarterRangePicker", "kind": "subcomponent" }, { "name": "WeekPicker", "kind": "subcomponent" }, { "name": "WeekRangePicker", "kind": "subcomponent" }, { "name": "YearPicker", "kind": "subcomponent" }, { "name": "YearRangePicker", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": true, "compound": true, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": true, "controlled": true, "uncontrolled": true, "i18n": true, "clientOnly": false, "animation": false, "ssr": true }, "compositionGuidance": [ "Week UI: `WeekPicker`, `WeekRangePicker`, `MultiWeekPicker` from `impact-nova/date-picker` — they share Calendar selection language (rounded-lg start/end caps, accent track, Wk gutter).", "Week **range** + `numberOfMonths={2}`: Wk gutter is square where the range crosses months; do not custom-style day cells or week numbers.", "Do not wrap or restyle the popover calendar grid. Pass `calendarKind` / `fiscalConfig` for fiscal weeks." ], "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [ "date picker", "calendar picker", "date range", "month picker", "period picker", "quarter picker", "year picker", "fiscal calendar" ], "avoidWhen": [], "visualHints": "Input that opens calendar or date dropdown.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only" ], "props": { "root": { "value": { "type": "Date", "required": false }, "onChange": { "type": "(date: Date | undefined) => void", "required": false }, "format": { "type": "string", "required": false }, "placeholder": { "type": "string", "required": false }, "minDate": { "type": "Date", "required": false }, "maxDate": { "type": "Date", "required": false }, "startMonth": { "type": "Date", "required": false }, "endMonth": { "type": "Date", "required": false }, "showFooter": { "type": "boolean", "required": false }, "weekStartsOn": { "type": "0 | 1 | 2 | 3 | 4 | 5 | 6", "required": false, "description": "Which day the week starts on. 0 = Sunday, 1 = Monday, etc." } }, "parts": { "FiscalPicker": { "calendarKind": { "type": "\"gregorian\" | \"fiscal\"", "required": false }, "fiscalMode": { "type": "\"basic\" | \"advanced\" | \"custom\"", "required": false }, "granularity": { "type": "Granularity", "required": false }, "fiscalMonthPattern": { "type": "number[]", "required": false }, "fiscalYearStartMonth": { "type": "number", "required": false }, "fiscalConfig": { "type": "FiscalCalendarConfig", "required": false }, "weekStartsOn": { "type": "0 | 1 | 2 | 3 | 4 | 5 | 6", "required": false }, "showPresets": { "type": "boolean", "required": false }, "showPeriodBoundaries": { "type": "boolean", "required": false, "description": "Draw `(` / `)` on fiscal period start/end days. Default false." }, "comparison": { "type": "\"prior-fy\"", "required": false }, "onComparisonChange": { "type": "(value: YoYComparison | undefined) => void", "required": false } }, "DateRangePicker": { "value": { "type": "DateRange", "required": false }, "onChange": { "type": "(range: DateRange | undefined) => void", "required": false }, "format": { "type": "string", "required": false }, "startPlaceholder": { "type": "string", "required": false }, "endPlaceholder": { "type": "string", "required": false }, "minDate": { "type": "Date", "required": false }, "maxDate": { "type": "Date", "required": false }, "startMonth": { "type": "Date", "required": false }, "endMonth": { "type": "Date", "required": false }, "showFooter": { "type": "boolean", "required": false }, "mode": { "type": "\"range\" | \"multi-range\"", "required": false, "description": "Date selection mode. Default: \"range\"." }, "onRangesChange": { "type": "(ranges: DateRange[] | undefined) => void", "required": false }, "weekStartsOn": { "type": "0 | 1 | 2 | 3 | 4 | 5 | 6", "required": false, "description": "Which day the week starts on. 0 = Sunday, 1 = Monday, etc." } }, "MonthPicker": { "value": { "type": "MonthSelection", "required": false }, "onChange": { "type": "(month: MonthSelection | undefined) => void", "required": false }, "placeholder": { "type": "string", "required": false }, "minDate": { "type": "Date", "required": false }, "maxDate": { "type": "Date", "required": false }, "startMonth": { "type": "Date", "required": false }, "endMonth": { "type": "Date", "required": false }, "showFooter": { "type": "boolean", "required": false } }, "MonthRangePicker": { "value": { "type": "MonthRange", "required": false }, "onChange": { "type": "(range: MonthRange | undefined) => void", "required": false }, "placeholder": { "type": "string", "required": false }, "minDate": { "type": "Date", "required": false }, "maxDate": { "type": "Date", "required": false }, "startMonth": { "type": "Date", "required": false }, "endMonth": { "type": "Date", "required": false }, "showFooter": { "type": "boolean", "required": false }, "displayFormat": { "type": "\"MM/YYYY\" | \"YYYY/MM\"", "required": false } }, "WeekPicker": { "value": { "type": "WeekSelection", "required": false }, "onChange": { "type": "(week: WeekSelection | undefined) => void", "required": false }, "format": { "type": "string", "required": false }, "placeholder": { "type": "string", "required": false }, "minDate": { "type": "Date", "required": false }, "maxDate": { "type": "Date", "required": false }, "startMonth": { "type": "Date", "required": false }, "endMonth": { "type": "Date", "required": false }, "showFooter": { "type": "boolean", "required": false } }, "WeekRangePicker": { "value": { "type": "WeekRange", "required": false }, "onChange": { "type": "(range: WeekRange | undefined) => void", "required": false }, "format": { "type": "string", "required": false }, "placeholder": { "type": "string", "required": false }, "minDate": { "type": "Date", "required": false }, "maxDate": { "type": "Date", "required": false }, "startMonth": { "type": "Date", "required": false }, "endMonth": { "type": "Date", "required": false }, "showFooter": { "type": "boolean", "required": false } }, "MultiDatePicker": { "value": { "type": "Date[]", "required": false }, "onChange": { "type": "(dates: Date[] | undefined) => void", "required": false }, "format": { "type": "string", "required": false }, "placeholder": { "type": "string", "required": false }, "minDate": { "type": "Date", "required": false }, "maxDate": { "type": "Date", "required": false }, "startMonth": { "type": "Date", "required": false }, "endMonth": { "type": "Date", "required": false }, "showFooter": { "type": "boolean", "required": false } }, "MultiMonthPicker": { "value": { "type": "MonthSelection[]", "required": false }, "onChange": { "type": "(months: MonthSelection[] | undefined) => void", "required": false }, "placeholder": { "type": "string", "required": false }, "minDate": { "type": "Date", "required": false }, "maxDate": { "type": "Date", "required": false }, "startMonth": { "type": "Date", "required": false }, "endMonth": { "type": "Date", "required": false }, "showFooter": { "type": "boolean", "required": false } }, "MultiWeekPicker": { "value": { "type": "WeekSelection[]", "required": false }, "onChange": { "type": "(weeks: WeekSelection[] | undefined) => void", "required": false }, "format": { "type": "string", "required": false }, "placeholder": { "type": "string", "required": false }, "minDate": { "type": "Date", "required": false }, "maxDate": { "type": "Date", "required": false }, "startMonth": { "type": "Date", "required": false }, "endMonth": { "type": "Date", "required": false }, "showFooter": { "type": "boolean", "required": false } }, "QuarterPicker": { "value": { "type": "QuarterSelection", "required": false }, "onChange": { "type": "(quarter: QuarterSelection | undefined) => void", "required": false }, "placeholder": { "type": "string", "required": false }, "minDate": { "type": "Date", "required": false }, "maxDate": { "type": "Date", "required": false }, "startMonth": { "type": "Date", "required": false }, "endMonth": { "type": "Date", "required": false }, "showFooter": { "type": "boolean", "required": false } }, "QuarterRangePicker": { "value": { "type": "QuarterRange", "required": false }, "onChange": { "type": "(range: QuarterRange | undefined) => void", "required": false }, "placeholder": { "type": "string", "required": false }, "minDate": { "type": "Date", "required": false }, "maxDate": { "type": "Date", "required": false }, "startMonth": { "type": "Date", "required": false }, "endMonth": { "type": "Date", "required": false }, "showFooter": { "type": "boolean", "required": false } }, "YearPicker": { "value": { "type": "YearSelection", "required": false }, "onChange": { "type": "(year: YearSelection | undefined) => void", "required": false }, "placeholder": { "type": "string", "required": false }, "minDate": { "type": "Date", "required": false }, "maxDate": { "type": "Date", "required": false }, "startMonth": { "type": "Date", "required": false }, "endMonth": { "type": "Date", "required": false }, "showFooter": { "type": "boolean", "required": false }, "showIntervalCaption": { "type": "boolean", "required": false, "description": "Show civil/FY start–end under year cells. Default false." } }, "YearRangePicker": { "value": { "type": "YearRange", "required": false }, "onChange": { "type": "(range: YearRange | undefined) => void", "required": false }, "placeholder": { "type": "string", "required": false }, "minDate": { "type": "Date", "required": false }, "maxDate": { "type": "Date", "required": false }, "startMonth": { "type": "Date", "required": false }, "endMonth": { "type": "Date", "required": false }, "showFooter": { "type": "boolean", "required": false }, "showIntervalCaption": { "type": "boolean", "required": false } }, "MultiQuarterPicker": { "value": { "type": "QuarterSelection[]", "required": false }, "onChange": { "type": "(quarters: QuarterSelection[] | undefined) => void", "required": false }, "placeholder": { "type": "string", "required": false }, "minDate": { "type": "Date", "required": false }, "maxDate": { "type": "Date", "required": false }, "startMonth": { "type": "Date", "required": false }, "endMonth": { "type": "Date", "required": false }, "showFooter": { "type": "boolean", "required": false } }, "MultiYearPicker": { "value": { "type": "YearSelection[]", "required": false }, "onChange": { "type": "(years: YearSelection[] | undefined) => void", "required": false }, "placeholder": { "type": "string", "required": false }, "minDate": { "type": "Date", "required": false }, "maxDate": { "type": "Date", "required": false }, "startMonth": { "type": "Date", "required": false }, "endMonth": { "type": "Date", "required": false }, "showFooter": { "type": "boolean", "required": false }, "showIntervalCaption": { "type": "boolean", "required": false } } } }, "storybook": { "title": "Forms & Inputs/Date Picker", "file": "src/components/forms/date-picker/date-picker.stories.tsx" }, "sourceFile": "src/components/forms/date-picker/date-picker.tsx", "adrPath": "src/components/forms/date-picker/date-picker.decisions.md" }, { "id": "dialog", "name": "Dialog", "category": "feedback", "description": "Modal dialog; use DialogTrigger, DialogContent, DialogHeader, DialogFooter.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/guidance/adapters/dialog", "barrelExport": false, "exports": [ { "name": "Dialog", "kind": "component" }, { "name": "DialogBody", "kind": "subcomponent" }, { "name": "DialogClose", "kind": "subcomponent" }, { "name": "DialogContent", "kind": "subcomponent" }, { "name": "DialogDescription", "kind": "subcomponent" }, { "name": "DialogFooter", "kind": "subcomponent" }, { "name": "DialogHeader", "kind": "subcomponent" }, { "name": "DialogOverlay", "kind": "subcomponent" }, { "name": "DialogPortal", "kind": "subcomponent" }, { "name": "DialogTitle", "kind": "subcomponent" }, { "name": "DialogTrigger", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [ "DialogTrigger", "DialogPortal", "DialogOverlay", "DialogContent", "DialogHeader", "DialogFooter", "DialogTitle", "DialogDescription", "DialogClose" ], "capabilities": { "asChild": false, "formControl": false, "compound": true, "portal": true, "focusTrap": true, "focusManagement": true, "keyboardNavigation": false, "controlled": true, "uncontrolled": true, "i18n": true, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [ "modal", "popup", "confirm dialog", "form in overlay", "alert dialog" ], "avoidWhen": [], "visualHints": "Centered overlay with dimmed background; close button; title and body.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only" ], "props": { "root": { "open": { "type": "boolean", "required": false, "description": "Controlled open state." }, "defaultOpen": { "type": "boolean", "required": false, "description": "Uncontrolled initial open state." }, "onOpenChange": { "type": "(open: boolean) => void", "required": false, "description": "Called when open state changes." }, "modal": { "type": "boolean", "required": false, "description": "Whether the dialog is modal." }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "parts": { "DialogTrigger": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "DialogPortal": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "DialogClose": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "DialogOverlay": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "DialogContent": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "hideClose": { "type": "boolean", "required": false }, "onOpenAutoFocus": { "type": "EventHandler", "required": false, "description": "Focus event when dialog opens." }, "onCloseAutoFocus": { "type": "EventHandler", "required": false, "description": "Focus event when dialog closes." } }, "DialogHeader": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "DialogBody": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "DialogFooter": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "DialogTitle": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "DialogDescription": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } } } }, "storybook": { "title": "Feedback & Overlay/Dialog", "file": "src/components/feedback/dialog/dialog.stories.tsx" }, "sourceFile": "src/components/feedback/dialog/dialog.tsx", "adrPath": "src/components/feedback/dialog/dialog.decisions.md" }, { "id": "drawer", "name": "Drawer", "category": "feedback", "description": "Bottom or side drawer.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/drawer", "barrelExport": false, "exports": [ { "name": "Drawer", "kind": "component" }, { "name": "DrawerClose", "kind": "subcomponent" }, { "name": "DrawerContent", "kind": "subcomponent" }, { "name": "DrawerDescription", "kind": "subcomponent" }, { "name": "DrawerFooter", "kind": "subcomponent" }, { "name": "DrawerHeader", "kind": "subcomponent" }, { "name": "DrawerOverlay", "kind": "subcomponent" }, { "name": "DrawerPortal", "kind": "subcomponent" }, { "name": "DrawerTitle", "kind": "subcomponent" }, { "name": "DrawerTrigger", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": true, "portal": true, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": true, "uncontrolled": true, "i18n": true, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [ "bottom sheet", "drawer", "slide-up panel" ], "avoidWhen": [], "visualHints": "Panel from bottom or side; often mobile-style.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only" ], "props": { "root": { "open": { "type": "boolean", "required": false, "description": "Controlled open state." }, "defaultOpen": { "type": "boolean", "required": false, "description": "Uncontrolled initial open state." }, "onOpenChange": { "type": "(open: boolean) => void", "required": false, "description": "Called when open state changes." }, "modal": { "type": "boolean", "required": false, "description": "Whether the dialog is modal." } }, "parts": { "DrawerTrigger": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "DrawerContent": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "hideClose": { "type": "boolean", "required": false }, "onOpenAutoFocus": { "type": "EventHandler", "required": false, "description": "Focus event when dialog opens." }, "onCloseAutoFocus": { "type": "EventHandler", "required": false, "description": "Focus event when dialog closes." } }, "DrawerHeader": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "DrawerFooter": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "DrawerTitle": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "DrawerDescription": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } } } }, "storybook": { "title": "Feedback & Overlay/Drawer", "file": "src/components/feedback/drawer/drawer.stories.tsx" }, "sourceFile": "src/components/feedback/drawer/drawer.tsx", "adrPath": null }, { "id": "dropdown-menu", "name": "DropdownMenu", "category": "feedback", "description": "Dropdown menu with items.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/dropdown-menu", "barrelExport": false, "exports": [ { "name": "DropdownMenu", "kind": "component" }, { "name": "DropdownMenuCheckboxItem", "kind": "subcomponent" }, { "name": "DropdownMenuContent", "kind": "subcomponent" }, { "name": "DropdownMenuFooter", "kind": "subcomponent" }, { "name": "DropdownMenuGroup", "kind": "subcomponent" }, { "name": "DropdownMenuItem", "kind": "subcomponent" }, { "name": "DropdownMenuLabel", "kind": "subcomponent" }, { "name": "DropdownMenuPortal", "kind": "subcomponent" }, { "name": "DropdownMenuRadioGroup", "kind": "subcomponent" }, { "name": "DropdownMenuRadioItem", "kind": "subcomponent" }, { "name": "DropdownMenuSeparator", "kind": "subcomponent" }, { "name": "DropdownMenuShortcut", "kind": "subcomponent" }, { "name": "DropdownMenuSub", "kind": "subcomponent" }, { "name": "DropdownMenuSubContent", "kind": "subcomponent" }, { "name": "DropdownMenuSubTrigger", "kind": "subcomponent" }, { "name": "DropdownMenuTrigger", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": true, "portal": true, "focusTrap": false, "focusManagement": true, "keyboardNavigation": true, "controlled": true, "uncontrolled": true, "i18n": false, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [ "dropdown menu", "context menu", "actions menu", "kebab menu" ], "avoidWhen": [], "visualHints": "Click opens list of actions/links.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only" ], "props": { "root": { "open": { "type": "boolean", "required": false, "description": "Controlled open state." }, "defaultOpen": { "type": "boolean", "required": false, "description": "Uncontrolled initial open state." }, "onOpenChange": { "type": "(open: boolean) => void", "required": false, "description": "Called when open state changes." }, "modal": { "type": "boolean", "required": false, "description": "Whether the dialog is modal." }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "parts": { "DropdownMenuTrigger": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "DropdownMenuGroup": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "DropdownMenuPortal": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "DropdownMenuSub": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "DropdownMenuRadioGroup": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "DropdownMenuSubTrigger": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "inset": { "type": "boolean", "required": false }, "icon": { "type": "React.ReactNode", "required": false } }, "DropdownMenuSubContent": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "DropdownMenuContent": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "portalled": { "type": "boolean", "required": false }, "onOpenAutoFocus": { "type": "EventHandler", "required": false, "description": "Focus event when dialog opens." }, "onCloseAutoFocus": { "type": "EventHandler", "required": false, "description": "Focus event when dialog closes." } }, "DropdownMenuItem": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "inset": { "type": "boolean", "required": false }, "description": { "type": "string", "required": false }, "icon": { "type": "React.ReactNode", "required": false } }, "DropdownMenuCheckboxItem": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "DropdownMenuRadioItem": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "description": { "type": "string", "required": false }, "icon": { "type": "React.ReactNode", "required": false } }, "DropdownMenuLabel": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "inset": { "type": "boolean", "required": false } }, "DropdownMenuSeparator": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "DropdownMenuFooter": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "DropdownMenuShortcut": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } } } }, "storybook": { "title": "Feedback & Overlay/Dropdown Menu", "file": "src/components/feedback/dropdown-menu/dropdown-menu.stories.tsx" }, "sourceFile": "src/components/feedback/dropdown-menu/dropdown-menu.tsx", "adrPath": "src/components/feedback/dropdown-menu/dropdown-menu.decisions.md" }, { "id": "dynamic-layout", "name": "DynamicLayout", "category": "layout", "description": "Grid/flex/stack layout utility — NOT the app dashboard shell. Use Layout for sidebar+header+main.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/dynamic-layout", "barrelExport": false, "exports": [ { "name": "DynamicLayout", "kind": "component" }, { "name": "GridLayout", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": false, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [ "grid layout", "flex layout", "stack layout", "content columns" ], "avoidWhen": [], "visualHints": "CSS grid or flex container for arranging child blocks.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": { "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." } } }, "storybook": { "title": "Navigation/Dynamic Layout", "file": "src/components/layout/dynamic-layout/dynamic-layout.stories.tsx" }, "sourceFile": "src/components/layout/dynamic-layout/dynamic-layout.tsx", "adrPath": null }, { "id": "empty-container", "name": "EmptyContainer", "category": "primitives", "description": "Empty state placeholder. EmptyContainerImage lazy-loads one illustration via dynamic import when no custom children provided.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/empty-container", "barrelExport": false, "exports": [ { "name": "EmptyContainer", "kind": "component" }, { "name": "EmptyContainerAction", "kind": "subcomponent" }, { "name": "EmptyContainerDescription", "kind": "subcomponent" }, { "name": "EmptyContainerImage", "kind": "subcomponent" }, { "name": "EmptyContainerTitle", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [ "EmptyContainerImage", "EmptyContainerTitle", "EmptyContainerDescription", "EmptyContainerAction" ], "capabilities": { "asChild": true, "formControl": false, "compound": true, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": false, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [ "empty state", "no data", "placeholder when empty" ], "avoidWhen": [], "visualHints": "Centered message and optional illustration when no data.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only" ], "props": { "root": { "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "asChild": { "type": "boolean", "required": false }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." } }, "parts": { "EmptyContainerImage": { "src": { "type": "string", "required": false, "description": "Fixed illustration URL. Omit with no `children` to lazy-load a random built-in illustration." }, "alt": { "type": "string", "required": false }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "width": { "type": "number | string", "required": false }, "height": { "type": "number | string", "required": false }, "asChild": { "type": "boolean", "required": false }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." } }, "EmptyContainerTitle": { "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "asChild": { "type": "boolean", "required": false }, "headingLevel": { "type": "2 | 3 | 4 | 5 | 6", "required": false, "description": "Semantic heading level. Default `2`." }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." } }, "EmptyContainerDescription": { "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "asChild": { "type": "boolean", "required": false }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." } }, "EmptyContainerAction": { "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "asChild": { "type": "boolean", "required": false }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." } } } }, "storybook": { "title": "Data Display/Empty Container", "file": "src/components/primitives/empty-container/empty-container.stories.tsx" }, "sourceFile": "src/components/primitives/empty-container/empty-container.tsx", "adrPath": null }, { "id": "expandable-list-item", "name": "ExpandableListItem", "category": "data", "description": "Expandable selectable list row — **three ways to integrate**: (1) **Preset API** with `title`, `description`, `sections`; (2) **Compound parts** (`ExpandableListItemRoot`, `Row`, `Checkbox`, `Trigger`, `Content`, `Metrics`, `Attributes`); (3) **Custom row** inside `impact-nova/virtualized` lists (optional — not required by virtualized).", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/expandable-list-item", "barrelExport": false, "exports": [ { "name": "ExpandableListItem", "kind": "component" }, { "name": "ExpandableListItemRoot", "kind": "subcomponent" }, { "name": "ExpandableListItemRow", "kind": "subcomponent" }, { "name": "ExpandableListItemCheckbox", "kind": "subcomponent" }, { "name": "ExpandableListItemTrigger", "kind": "subcomponent" }, { "name": "ExpandableListItemTitle", "kind": "subcomponent" }, { "name": "ExpandableListItemDescription", "kind": "subcomponent" }, { "name": "ExpandableListItemMedia", "kind": "subcomponent" }, { "name": "ExpandableListItemHeader", "kind": "subcomponent" }, { "name": "ExpandableListItemContent", "kind": "subcomponent" }, { "name": "ExpandableListItemMetrics", "kind": "subcomponent" }, { "name": "ExpandableListItemAttributes", "kind": "subcomponent" }, { "name": "ExpandableListItemFooter", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [ "ExpandableListItemRoot", "ExpandableListItemRow", "ExpandableListItemCheckbox", "ExpandableListItemTrigger", "ExpandableListItemTitle", "ExpandableListItemDescription", "ExpandableListItemMedia", "ExpandableListItemHeader", "ExpandableListItemContent", "ExpandableListItemMetrics", "ExpandableListItemAttributes", "ExpandableListItemFooter" ], "capabilities": { "asChild": false, "formControl": false, "compound": true, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": true, "controlled": true, "uncontrolled": true, "i18n": false, "clientOnly": false, "animation": false, "ssr": true }, "compositionGuidance": [ "**Preset (fastest):** `` — use `title`/`description` (not legacy `sku`/`subtitle`).", "**Compound (flexible):** `ExpandableListItemRoot` → `ExpandableListItemRow` → `Checkbox` + `Trigger` (`Title`, `Description`, `Media`) → `Content` (`Metrics`, `Attributes`, `Footer`).", "**With virtualized lists:** Render inside `VirtualizedListItem` or manual hook markup — pair with `impact-nova/virtualized`; call `resetRowSize` when collapsing expandable rows.", "**Sections:** `metrics` | `attributes` | `custom` via `ExpandableListItemSection[]`. Storybook: Expandable List Item → Composition." ], "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [ "list row", "selectable list item", "expandable row", "preset data-driven sections", "compound custom row layout" ], "avoidWhen": [], "visualHints": "", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Standalone row UI — not coupled to impact-nova/virtualized", "Legacy impact-nova/expandable-sku removed — see impact-nova://removed-imports" ], "props": { "root": {}, "parts": { "ExternalCopyFunction": { "e": { "type": "React.MouseEvent", "required": true }, "val": { "type": "string | number", "required": true }, "index": { "type": "number", "required": true } } } }, "sourceFile": "src/components/data/expandable-list-item/expandable-list-item.tsx", "adrPath": null, "storybook": { "title": "Attributes", "file": "src/components/data/expandable-list-item/expandable-list-item.stories.tsx" } }, { "id": "file-upload", "name": "FileUpload", "category": "forms", "description": "FileUpload component.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/file-upload", "barrelExport": false, "exports": [ { "name": "FileUpload", "kind": "component" }, { "name": "FileUploadClose", "kind": "subcomponent" }, { "name": "FileUploadContent", "kind": "subcomponent" }, { "name": "FileUploadDescription", "kind": "subcomponent" }, { "name": "FileUploadDropZone", "kind": "subcomponent" }, { "name": "FileUploadFooter", "kind": "subcomponent" }, { "name": "FileUploadHeader", "kind": "subcomponent" }, { "name": "FileUploadItem", "kind": "subcomponent" }, { "name": "FileUploadList", "kind": "subcomponent" }, { "name": "FileUploadTitle", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": true, "compound": true, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": true, "uncontrolled": true, "i18n": true, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [], "avoidWhen": [], "visualHints": "", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only" ], "props": { "root": { "onFilesChange": { "type": "(files: File[]) => void", "required": false }, "maxFiles": { "type": "number", "required": false }, "accept": { "type": "string[]", "required": false }, "disabled": { "type": "boolean", "required": false }, "value": { "type": "File[]", "required": false }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "parts": { "FileUploadDropZone": { "label": { "type": "string", "required": false }, "subLabel": { "type": "string", "required": false }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "FileUploadItem": { "file": { "type": "File", "required": true }, "onRemove": { "type": "() => void", "required": false }, "onClick": { "type": "React.MouseEventHandler", "required": false }, "loadingProgress": { "type": "FileUploadItemLoadingProgress", "required": false, "description": "When set, renders upload progress UI for this item." }, "errorMessage": { "type": "string", "required": false, "description": "Error text shown for a failed upload." }, "onReset": { "type": "() => void", "required": false, "description": "Retry a failed upload." }, "onDownload": { "type": "() => void", "required": false, "description": "Download the uploaded/processed file." } } } }, "storybook": { "title": "Forms & Inputs/File Upload", "file": "src/components/forms/file-upload/file-upload.stories.tsx" }, "sourceFile": "src/components/forms/file-upload/file-upload.tsx", "adrPath": null }, { "id": "filter-panel", "name": "FilterPanel", "category": "flows", "description": "Filter panel for grids/tables.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/filter-panel", "barrelExport": false, "exports": [ { "name": "FilterPanel", "kind": "component" }, { "name": "FilterPanelBody", "kind": "subcomponent" }, { "name": "FilterPanelFooter", "kind": "subcomponent" }, { "name": "FilterPanelHeader", "kind": "subcomponent" }, { "name": "FilterPanelSidebar", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [ "FilterPanelSidebar", "FilterPanelBody", "FilterPanelFooter" ], "capabilities": { "asChild": false, "formControl": false, "compound": true, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": true, "uncontrolled": false, "i18n": true, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [ "filters", "filter panel", "search and filters", "table filters" ], "avoidWhen": [], "visualHints": "Panel with filter controls (dropdowns, date range, search). Types: FilterSidebarItem.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only" ], "props": { "root": { "open": { "type": "boolean", "required": true }, "onOpenChange": { "type": "(open: boolean) => void", "required": true }, "title": { "type": "React.ReactNode", "required": false }, "children": { "type": "React.ReactNode", "required": true }, "header": { "type": "React.ReactNode", "required": false }, "sidebar": { "type": "React.ReactNode", "required": false }, "className": { "type": "string", "required": false }, "preventClose": { "type": "boolean", "required": false } }, "parts": { "FilterPanelHeader": { "title": { "type": "React.ReactNode", "required": false }, "children": { "type": "React.ReactNode", "required": false }, "className": { "type": "string", "required": false } }, "FilterPanelSidebar": { "items": { "type": "FilterSidebarItem[]", "required": true }, "activeTab": { "type": "string", "required": true }, "onTabChange": { "type": "(tabId: string) => void", "required": true }, "className": { "type": "string", "required": false } }, "FilterPanelBody": { "children": { "type": "React.ReactNode", "required": true }, "className": { "type": "string", "required": false } }, "FilterPanelFooter": { "children": { "type": "React.ReactNode", "required": true }, "className": { "type": "string", "required": false }, "leftAction": { "type": "React.ReactNode", "required": false } } } }, "storybook": { "title": "Extended/Filter Panel", "file": "src/components/flows/filter-panel/filter-panel.stories.tsx" }, "sourceFile": "src/components/flows/filter-panel/filter-panel.tsx", "adrPath": null }, { "id": "filter-shell", "name": "FilterShell", "category": "primitives", "description": "FilterShell component.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/filter-shell", "barrelExport": false, "exports": [ { "name": "FilterShell", "kind": "component" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": false, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [], "avoidWhen": [], "visualHints": "", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": {} }, "storybook": null, "sourceFile": "src/filter-shell/index.ts", "adrPath": null }, { "id": "filter-strip", "name": "FilterStrip", "category": "flows", "description": "Horizontal filter strip.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/filter-strip", "barrelExport": false, "exports": [ { "name": "FilterStrip", "kind": "component" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": true, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [ "filter chips", "active filters strip", "horizontal filters" ], "avoidWhen": [], "visualHints": "Row of filter tags or dropdowns. Types: FilterItem, SavedFilterItem.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": { "filters": { "type": "FilterItem[]", "required": true }, "onFilterRemove": { "type": "(id: string, value?: string | number) => void", "required": true }, "onOverflowClick": { "type": "(id: string) => void", "required": false }, "onClearAll": { "type": "() => void", "required": false }, "onAllFiltersClick": { "type": "() => void", "required": false }, "selectedFilter": { "type": "string", "required": false }, "onSelectedFilterChange": { "type": "(label: string) => void", "required": false }, "savedFilters": { "type": "SavedFilterItem[]", "required": false }, "recentFilters": { "type": "FilterItem[][]", "required": false }, "onApplySavedFilter": { "type": "(filter: SavedFilterItem) => void", "required": false }, "onSavedFilterSearch": { "type": "(query: string, type?: SavedFilterType) => void", "required": false }, "onSavedFiltersScroll": { "type": "(event: React.UIEvent) => void", "required": false }, "onViewAll": { "type": "() => void", "required": false }, "onDropdownOpenChange": { "type": "(isOpen: boolean) => void", "required": false }, "isLoadingFilterPreferencesList": { "type": "boolean", "required": false }, "isLoading": { "type": "boolean", "required": false }, "onEditSavedFilter": { "type": "(filter: SavedFilterItem) => void", "required": false }, "onDeleteSavedFilter": { "type": "(filter: SavedFilterItem) => void", "required": false }, "onSetDefaultSavedFilter": { "type": "(filter: SavedFilterItem) => void", "required": false }, "className": { "type": "string", "required": false }, "allFiltersKeybinding": { "type": "import(\"../filter-panel/filter-panel.types\").FilterSidebarItem[\"tooltipKeybinding\"]", "required": false }, "allFiltersShortcutId": { "type": "string", "required": false }, "showAllFiltersButton": { "type": "boolean", "required": false }, "showSavedFilters": { "type": "boolean", "required": false } } }, "storybook": { "title": "Extended/Filter Strip", "file": "src/components/flows/filter-strip/filter-strip.stories.tsx" }, "sourceFile": "src/components/flows/filter-strip/filter-strip.tsx", "adrPath": null }, { "id": "fiscal-calendar", "name": "FiscalCalendar", "category": "data", "description": "Headless fiscal year engine (4-4-5 / shifted-year / custom table). No UI component — pair with Calendar and DatePicker via calendarKind and fiscalConfig. Import from impact-nova/fiscal-calendar.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/fiscal-calendar", "barrelExport": false, "exports": [ { "name": "buildFiscalYear", "kind": "function" }, { "name": "getCellMeta", "kind": "function" }, { "name": "getFiscalYearForDate", "kind": "function" }, { "name": "getFiscalPresets", "kind": "function" }, { "name": "toFiscalCalendarConfig", "kind": "function" }, { "name": "resolveWeekSelection", "kind": "function" }, { "name": "civilFromLocalDate", "kind": "function" }, { "name": "localDateFromCivil", "kind": "function" }, { "name": "FiscalCalendarConfig", "kind": "type" }, { "name": "FiscalYearModel", "kind": "type" }, { "name": "DateCellMeta", "kind": "type" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": false, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [ "fiscal year math", "4-4-5 retail calendar", "period lookup", "FY week numbers", "server-side civil date keys" ], "avoidWhen": [ "rendering a FiscalCalendar component — it does not exist", "Gregorian-only date math" ], "visualHints": "", "knownLimitations": [ "Headless only — do not import a FiscalCalendar React component", "Use civil dates, never Date#toISOString, for FY keys", "UI lives on impact-nova/calendar and impact-nova/date-picker" ], "props": { "root": {} }, "sourceFile": "src/lib/fiscal-calendar/index.ts", "adrPath": null, "storybook": null }, { "id": "form-engine", "name": "FormEngine", "category": "primitives", "description": "FormEngine component.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/form-engine", "barrelExport": false, "exports": [ { "name": "FormEngine", "kind": "component" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": false, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [], "avoidWhen": [], "visualHints": "", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": {} }, "storybook": null, "sourceFile": "src/form-engine/index.ts", "adrPath": null }, { "id": "form-field", "name": "FormField", "category": "forms", "description": "Composable label, description, error wrapper for form controls.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/form", "barrelExport": false, "exports": [ { "name": "Field", "kind": "subcomponent" }, { "name": "FormField", "kind": "component" }, { "name": "ImpactNovaProviders", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": true, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": false, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [ "form field", "label and error", "accessible form layout" ], "avoidWhen": [], "visualHints": "", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only" ], "props": { "root": { "FieldProps": { "type": "@/lib/primitives/field.FieldProps", "required": false, "description": "Re-exported from Radix; inherits Radix element props." }, "FormFieldProps": { "type": "@/lib/primitives/field.FormFieldProps", "required": false, "description": "Re-exported from Radix; inherits Radix element props." }, "FieldChromeProps": { "type": "@/lib/primitives/field.types.FieldChromeProps", "required": false, "description": "Re-exported from Radix; inherits Radix element props." }, "FieldControlProps": { "type": "@/lib/primitives/field.types.FieldControlProps", "required": false, "description": "Re-exported from Radix; inherits Radix element props." } } }, "sourceFile": "src/form/form-field.tsx", "adrPath": "src/form/form-field.decisions.md", "storybook": { "title": "Forms & Inputs/Field", "file": "src/form/form-field.stories.tsx" } }, { "id": "form-react", "name": "FormReact", "category": "primitives", "description": "FormReact component.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/form-react", "barrelExport": false, "exports": [ { "name": "ArrayFieldRenderer", "kind": "subcomponent" }, { "name": "FieldRenderer", "kind": "subcomponent" }, { "name": "FormFieldRow", "kind": "subcomponent" }, { "name": "FormFileUploadWrapper", "kind": "subcomponent" }, { "name": "ObjectFieldRenderer", "kind": "subcomponent" }, { "name": "ReactHooksForm", "kind": "subcomponent" }, { "name": "SetToEmptyWrapper", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": true, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": false, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [], "avoidWhen": [], "visualHints": "", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only" ], "props": { "root": { "FieldRendererProps": { "type": "./components/FieldRenderer.FieldRendererProps", "required": false, "description": "Re-exported from Radix; inherits Radix element props." }, "FilterFieldComponentProps": { "type": "./components/FieldRenderer.FilterFieldComponentProps", "required": false, "description": "Re-exported from Radix; inherits Radix element props." }, "FormFieldProps": { "type": "./types/reactHookForm.types.FormFieldProps", "required": false, "description": "Re-exported from Radix; inherits Radix element props." }, "ReactHooksFormProps": { "type": "./types/reactHookForm.types.ReactHooksFormProps", "required": false, "description": "Re-exported from Radix; inherits Radix element props." }, "UseSelectOptionsProps": { "type": "./types/reactHookForm.types.UseSelectOptionsProps", "required": false, "description": "Re-exported from Radix; inherits Radix element props." } } }, "storybook": null, "sourceFile": "src/form-react/index.ts", "adrPath": null }, { "id": "guidance", "name": "Guidance", "category": "primitives", "description": "Guidance component.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/guidance", "barrelExport": false, "exports": [ { "name": "GuidanceContext", "kind": "subcomponent" }, { "name": "GuidanceDebugPanel", "kind": "subcomponent" }, { "name": "GuidanceErrorBoundary", "kind": "subcomponent" }, { "name": "GuidanceLayer", "kind": "subcomponent" }, { "name": "GuidanceProvider", "kind": "component" }, { "name": "GuidanceTarget", "kind": "subcomponent" }, { "name": "GuideCatalog", "kind": "subcomponent" }, { "name": "HELP_CENTER_ALL_CATEGORY_VALUE", "kind": "subcomponent" }, { "name": "HelpCenter", "kind": "subcomponent" }, { "name": "HelpCenterBody", "kind": "subcomponent" }, { "name": "HelpCenterCategoryTabs", "kind": "subcomponent" }, { "name": "HelpCenterContent", "kind": "subcomponent" }, { "name": "HelpCenterFooter", "kind": "subcomponent" }, { "name": "HelpCenterHeader", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": true, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": false, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [], "avoidWhen": [], "visualHints": "", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only" ], "props": { "root": { "children": { "type": "React.ReactNode", "required": true }, "storage": { "type": "GuidanceStorageAdapter", "required": true }, "analytics": { "type": "GuidanceAnalyticsAdapter", "required": false }, "plugins": { "type": "GuidancePlugin[]", "required": false }, "locale": { "type": "string", "required": false }, "tenantId": { "type": "string", "required": false }, "appVersion": { "type": "string", "required": false }, "consentRequired": { "type": "boolean", "required": false }, "maxGuidesPerSession": { "type": "number", "required": false }, "cooldownBetweenGuides": { "type": "number", "required": false }, "debug": { "type": "boolean", "required": false }, "errorReporter": { "type": "GuidanceErrorReporter", "required": false }, "mfeBridge": { "type": "boolean", "required": false } } }, "storybook": { "title": "Open the filter panel", "file": "src/components/flows/guidance/guidance.stories.tsx" }, "sourceFile": "src/components/flows/guidance/guidance-provider.tsx", "adrPath": null }, { "id": "header", "name": "Header", "category": "layout", "description": "App header bar with logo, title, actions.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/header", "barrelExport": false, "exports": [ { "name": "Header", "kind": "component" }, { "name": "HeaderBadge", "kind": "subcomponent" }, { "name": "HeaderBotButton", "kind": "subcomponent" }, { "name": "HeaderLeft", "kind": "subcomponent" }, { "name": "HeaderLogo", "kind": "subcomponent" }, { "name": "HeaderRight", "kind": "subcomponent" }, { "name": "HeaderSeparator", "kind": "subcomponent" }, { "name": "HeaderTitle", "kind": "subcomponent" }, { "name": "NotificationIconButton", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [ "HeaderLeft", "HeaderRight", "HeaderLogo", "HeaderSeparator", "HeaderTitle", "HeaderBadge", "HeaderBotButton", "NotificationIconButton" ], "capabilities": { "asChild": false, "formControl": false, "compound": true, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": true, "uncontrolled": true, "i18n": true, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [ "header", "top bar", "app bar", "page title bar" ], "avoidWhen": [], "visualHints": "Horizontal bar at top; logo, title, notification, avatar.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only" ], "props": { "root": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "open": { "type": "boolean", "required": false, "description": "Controlled open state." }, "defaultOpen": { "type": "boolean", "required": false, "description": "Uncontrolled initial open state." }, "onOpenChange": { "type": "(open: boolean) => void", "required": false, "description": "Called when open state changes." }, "modal": { "type": "boolean", "required": false, "description": "Whether the dialog is modal." } }, "parts": { "HeaderLeft": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "HeaderRight": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "HeaderLogo": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "HeaderSeparator": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "HeaderTitle": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "HeaderBotButton": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "NotificationIconButton": { "showIndicator": { "type": "boolean", "required": false }, "indicatorVariant": { "type": "NotificationIndicatorVariant", "required": false, "description": "`unread` — live count (destructive). `stale` — offline / unverified count (muted)." }, "tooltipSide": { "type": "\"top\" | \"bottom\" | \"left\" | \"right\"", "required": false, "description": "Passed through to the underlying icon `Button` tooltip." }, "tooltipKeybinding": { "type": "KeyBinding", "required": false, "description": "Keyboard shortcut shown in the tooltip next to the label (requires `aria-label`)." } }, "HeaderIconButton": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } } } }, "storybook": { "title": "Navigation/Header", "file": "src/components/layout/header/header.stories.tsx" }, "sourceFile": "src/components/layout/header/header.tsx", "adrPath": null }, { "id": "horizontal-scroller", "name": "HorizontalScroller", "category": "layout", "description": "Horizontal scroll container for chips, tabs, or metric rails. Use ScrollOverflowAffordance for fade edges and optional chevron buttons on arbitrary overflow content.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/horizontal-scroller", "barrelExport": false, "exports": [ { "name": "HorizontalScroller", "kind": "component" }, { "name": "ScrollOverflowAffordance", "kind": "subcomponent" }, { "name": "useHorizontalScrollOverflow", "kind": "hook" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": true, "clientOnly": false, "animation": false, "ssr": true }, "compositionGuidance": [ "**HorizontalScroller** — virtualized item rail when you have `items[]` + `renderItem`.", "**ScrollOverflowAffordance** — wraps any horizontal overflow children with edge fade masks and optional chevron buttons.", "**useHorizontalScrollOverflow** — headless hook for custom scroll chrome; returns `viewportRef`, `canScrollLeft`, `canScrollRight`, `scrollByStep`." ], "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [ "horizontal scroll", "overflow row", "chip rail", "KPI metric strip", "fade edge scroll affordance" ], "avoidWhen": [], "visualHints": "", "knownLimitations": [ "ScrollOverflowAffordance hides native scrollbar by default (`hideScrollbar`)" ], "props": { "root": { "items": { "type": "T[]", "required": true }, "renderItem": { "type": "(item: T, index: number) => React.ReactNode", "required": true }, "scrollStep": { "type": "number", "required": false }, "hideScrollbar": { "type": "boolean", "required": false }, "controlsPosition": { "type": "\"left\" | \"right\" | \"split\"", "required": false }, "renderPrevious": { "type": "(props: { onClick: () => void disabled: boolean }) => React.ReactNode", "required": false }, "renderNext": { "type": "(props: { onClick: () => void disabled: boolean }) => React.ReactNode", "required": false }, "maxWidth": { "type": "string | number", "required": false }, "estimateSize": { "type": "number | ((index: number) => number)", "required": false }, "overscan": { "type": "number", "required": false } } }, "sourceFile": "src/components/layout/horizontal-scroller/horizontal-scroller.tsx", "adrPath": null, "storybook": { "title": "Extended/Horizontal Scroller", "file": "src/components/layout/horizontal-scroller/horizontal-scroller.stories.tsx" } }, { "id": "hover-card", "name": "HoverCard", "category": "primitives", "description": "HoverCard component.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/hover-card", "barrelExport": false, "exports": [ { "name": "HoverCard", "kind": "component" }, { "name": "HoverCardContent", "kind": "subcomponent" }, { "name": "HoverCardTrigger", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": true, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": false, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [], "avoidWhen": [], "visualHints": "", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only" ], "props": { "root": { "HoverCardProps": { "type": "@radix-ui/react-hover-card.HoverCardProps", "required": false, "description": "Re-exported from Radix; inherits Radix element props." }, "HoverCardTriggerProps": { "type": "@radix-ui/react-hover-card.HoverCardTriggerProps", "required": false, "description": "Re-exported from Radix; inherits Radix element props." }, "HoverCardContentProps": { "type": "@radix-ui/react-hover-card.HoverCardContentProps", "required": false, "description": "Re-exported from Radix; inherits Radix element props." } } }, "storybook": { "title": "Feedback & Overlay/Hover Card", "file": "src/components/feedback/hover-card/hover-card.stories.tsx" }, "sourceFile": "src/components/feedback/hover-card/hover-card.tsx", "adrPath": null }, { "id": "impact-nova-i18n-provider", "name": "ImpactNovaI18nProvider", "category": "primitives", "description": "Wrap app for i18n; pass locale and messages.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/i18n", "barrelExport": false, "exports": [ { "name": "ImpactNovaI18nProvider", "kind": "component" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": true, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [ "app root", "i18n setup" ], "avoidWhen": [], "visualHints": "No visual; wrap at root.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": { "children": { "type": "React.ReactNode", "required": true }, "locale": { "type": "string", "required": false }, "messages": { "type": "Partial", "required": false } } }, "storybook": null, "sourceFile": "src/i18n/impact-nova-i18n-context.tsx", "adrPath": null }, { "id": "input", "name": "Input", "category": "forms", "description": "Text input; pre-styled, use className only for layout.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/input", "barrelExport": false, "exports": [ { "name": "Input", "kind": "component" } ], "variants": [ { "axis": "error", "values": [ "true", "false" ], "default": "true" }, { "axis": "disabled", "values": [ "true", "false" ], "default": "true" } ], "sizes": [ "default", "sm", "md", "lg" ], "subcomponents": [], "capabilities": { "asChild": false, "formControl": true, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": true, "uncontrolled": true, "i18n": false, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [ "text field", "search box", "single-line input", "form field" ], "avoidWhen": [], "visualHints": "Single-line bordered input; optional placeholder.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": { "isError": { "type": "boolean", "required": false, "deprecated": true }, "prefix": { "type": "React.ReactNode", "required": false }, "suffix": { "type": "React.ReactNode", "required": false }, "prefixClick": { "type": "React.MouseEventHandler", "required": false }, "suffixClick": { "type": "React.MouseEventHandler", "required": false }, "error": { "type": "\"true\" | \"false\"", "required": false, "default": "true", "description": "CVA error axis. Default: \"true\"." }, "size": { "type": "\"default\" | \"sm\" | \"md\" | \"lg\"", "required": false, "default": "default", "description": "CVA size axis. Default: \"default\"." }, "disabled": { "type": "\"true\" | \"false\"", "required": false, "default": "true", "description": "CVA disabled axis. Default: \"true\"." } } }, "deprecations": [ { "prop": "isError", "canonical": "error" } ], "storybook": { "title": "Forms & Inputs/Input", "file": "src/components/forms/input/input.stories.tsx" }, "sourceFile": "src/components/forms/input/input.tsx", "adrPath": "src/components/forms/input/input.decisions.md" }, { "id": "kbd", "name": "Kbd", "category": "primitives", "description": "Kbd component.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/kbd", "barrelExport": false, "exports": [ { "name": "Kbd", "kind": "component" } ], "variants": [ { "axis": "variant", "values": [ "default", "muted", "dark" ], "default": "default" } ], "sizes": [ "sm", "default", "lg" ], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": false, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [], "avoidWhen": [], "visualHints": "", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": { "keys": { "type": "string[]", "required": false }, "keybinding": { "type": "KeyBinding", "required": false }, "size": { "type": "\"sm\" | \"default\" | \"lg\"", "required": false, "default": "default", "description": "CVA size axis. Default: \"default\"." }, "variant": { "type": "\"default\" | \"muted\" | \"dark\"", "required": false, "default": "default", "description": "CVA variant axis. Default: \"default\"." } } }, "storybook": null, "sourceFile": "src/components/primitives/kbd/kbd.tsx", "adrPath": null }, { "id": "label", "name": "Label", "category": "forms", "description": "Accessible form label; associate with controls via htmlFor and id.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/label", "barrelExport": false, "exports": [ { "name": "Label", "kind": "component" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": false, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [ "form label", "field label", "accessible label" ], "avoidWhen": [], "visualHints": "Text label above or beside a form control.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } } }, "storybook": null, "sourceFile": "src/components/forms/label/label.tsx", "adrPath": null }, { "id": "layout", "name": "Layout", "category": "layout", "description": "App shell: Sidebar | (Header + scrollable main). Breadcrumb and filters go in children at page level.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/layout", "barrelExport": false, "exports": [ { "name": "Layout", "kind": "component" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": true, "i18n": false, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [ "app layout", "dashboard layout", "sidebar header main", "global layout", "admin shell" ], "avoidWhen": [], "visualHints": "Left nav rail + top header + scrollable content area.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": { "LayoutProps": { "type": "./layout.types.LayoutProps", "required": false, "description": "Re-exported from Radix; inherits Radix element props." } } }, "storybook": { "title": "Layout/App Shell", "file": "src/components/layout/layout.stories.tsx" }, "sourceFile": "src/components/layout/layout.tsx", "adrPath": null }, { "id": "loader", "name": "Loader", "category": "primitives", "description": "Loading indicator.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/loader", "barrelExport": false, "exports": [ { "name": "Loader", "kind": "component" } ], "variants": [], "sizes": [ "sm", "md", "lg", "xl" ], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": true, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Lightweight presentational primitive — still requires a Client Component boundary in App Router when interactive. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [ "loading", "spinner", "loading state" ], "avoidWhen": [], "visualHints": "Spinner or skeleton.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": { "progress": { "type": "string | number", "required": false }, "text": { "type": "string", "required": false }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "size": { "type": "\"sm\" | \"md\" | \"lg\" | \"xl\"", "required": false, "default": "md", "description": "CVA size axis. Default: \"md\"." } } }, "storybook": { "title": "Feedback & Overlay/Loader", "file": "src/components/primitives/loader/loader.stories.tsx" }, "sourceFile": "src/components/primitives/loader/loader.tsx", "adrPath": null }, { "id": "nested-list", "name": "NestedList", "category": "primitives", "description": "NestedList component.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/nested-list", "barrelExport": false, "exports": [ { "name": "NestedList", "kind": "component" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": true, "controlled": true, "uncontrolled": false, "i18n": true, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [], "avoidWhen": [], "visualHints": "", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": { "items": { "type": "NestedListItem[]", "required": true }, "onChange": { "type": "(items: NestedListItem[]) => void", "required": true }, "onSubmit": { "type": "(items: NestedListItem[]) => void", "required": false }, "onCancel": { "type": "() => void", "required": false }, "onItemToggle": { "type": "( changes: Array<{ itemId: string; checked: boolean; category?: string }> ) => void", "required": false }, "onDragEnd": { "type": "(activeId: string, overId: string | null) => void", "required": false }, "renderLabelExtras": { "type": "( item: NestedListItem, context: { isLeaf: boolean; level: number }, ) => React.ReactNode", "required": false }, "renderActions": { "type": "( item: NestedListItem, context: { isLeaf: boolean; level: number }, ) => React.ReactNode", "required": false }, "enableSearch": { "type": "boolean", "required": false }, "enableDragDrop": { "type": "boolean", "required": false }, "enableSelectAll": { "type": "boolean", "required": false }, "enableGroupBy": { "type": "boolean", "required": false }, "enableApplyDiscard": { "type": "boolean", "required": false }, "enableCollapse": { "type": "boolean", "required": false }, "enableGlobalCollapse": { "type": "boolean", "required": false }, "selectionMode": { "type": "SelectionMode", "required": false }, "getCategory": { "type": "(item: NestedListItem) => string | undefined", "required": false }, "initialCollapsedItems": { "type": "Record", "required": false }, "onCollapseChange": { "type": "(collapsedItems: Record) => void", "required": false }, "canDrag": { "type": "(item: NestedListItem, level: number) => boolean", "required": false }, "searchPlaceholder": { "type": "string", "required": false }, "className": { "type": "string", "required": false }, "groupLabel": { "type": "string", "required": false }, "submitButtonLabel": { "type": "string", "required": false }, "cancelButtonLabel": { "type": "string", "required": false } } }, "storybook": { "title": "Navigation/Nested List", "file": "src/components/data/nested-list/nested-list.stories.tsx" }, "sourceFile": "src/components/data/nested-list/nested-list.tsx", "adrPath": null }, { "id": "notification-panel", "name": "NotificationPanel", "category": "primitives", "description": "NotificationPanel component.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/notification-panel", "barrelExport": false, "exports": [ { "name": "NotificationPanel", "kind": "component" }, { "name": "NotificationPanelBody", "kind": "subcomponent" }, { "name": "NotificationPanelContent", "kind": "subcomponent" }, { "name": "NotificationPanelFooter", "kind": "subcomponent" }, { "name": "NotificationPanelHeader", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": true, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": true, "uncontrolled": false, "i18n": true, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [], "avoidWhen": [], "visualHints": "", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only" ], "props": { "root": { "open": { "type": "boolean", "required": true, "description": "Controlled open state — pair with `onOpenChange`." }, "onOpenChange": { "type": "(open: boolean) => void", "required": true }, "children": { "type": "React.ReactNode", "required": true, "description": "Panel subtree — `NotificationPanelContent` → Header / Body / Footer." }, "className": { "type": "string", "required": false }, "preventClose": { "type": "boolean", "required": false, "description": "When `true`, blocks outside click and Escape from closing (e.g. bulk edit in progress)." } }, "parts": { "NotificationPanelHeader": { "className": { "type": "string", "required": false }, "children": { "type": "React.ReactNode", "required": false }, "title": { "type": "React.ReactNode", "required": false } }, "NotificationPanelContent": { "children": { "type": "React.ReactNode", "required": true }, "className": { "type": "string", "required": false } }, "NotificationPanelBody": { "children": { "type": "React.ReactNode", "required": true }, "className": { "type": "string", "required": false } }, "NotificationPanelFooter": { "children": { "type": "React.ReactNode", "required": false }, "className": { "type": "string", "required": false }, "leftAction": { "type": "React.ReactNode", "required": false } }, "NotificationList": { "children": { "type": "React.ReactNode", "required": false }, "className": { "type": "string", "required": false }, "onLoadMore": { "type": "() => void", "required": false }, "isLoading": { "type": "boolean", "required": false }, "hasMore": { "type": "boolean", "required": false }, "loader": { "type": "React.ReactNode", "required": false } }, "NotificationEmpty": { "title": { "type": "string", "required": false }, "description": { "type": "string", "required": false }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "NotificationGroup": { "label": { "type": "string", "required": true }, "children": { "type": "React.ReactNode", "required": true }, "className": { "type": "string", "required": false } }, "NotificationItem": { "children": { "type": "React.ReactNode", "required": true }, "className": { "type": "string", "required": false }, "read": { "type": "boolean", "required": false }, "selected": { "type": "boolean", "required": false }, "onSelect": { "type": "(selected: boolean) => void", "required": false }, "selectable": { "type": "boolean", "required": false } } } }, "storybook": { "title": "Data Display/Notification Panel", "file": "src/components/flows/notification-panel/notification-panel.stories.tsx" }, "sourceFile": "src/components/flows/notification-panel/notification-panel.tsx", "adrPath": null }, { "id": "popover", "name": "Popover", "category": "feedback", "description": "Popover container.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/popover", "barrelExport": false, "exports": [ { "name": "Popover", "kind": "component" }, { "name": "PopoverAnchor", "kind": "subcomponent" }, { "name": "PopoverBody", "kind": "subcomponent" }, { "name": "PopoverClose", "kind": "subcomponent" }, { "name": "PopoverContent", "kind": "subcomponent" }, { "name": "PopoverFooter", "kind": "subcomponent" }, { "name": "PopoverHeader", "kind": "subcomponent" }, { "name": "PopoverPortal", "kind": "subcomponent" }, { "name": "PopoverTitle", "kind": "subcomponent" }, { "name": "PopoverTrigger", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": true, "portal": true, "focusTrap": false, "focusManagement": true, "keyboardNavigation": false, "controlled": true, "uncontrolled": false, "i18n": true, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [ "popover", "floating panel", "picker popover" ], "avoidWhen": [], "visualHints": "Floating panel anchored to trigger.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only" ], "props": { "root": { "PopoverProps": { "type": "@radix-ui/react-popover.PopoverProps", "required": false, "description": "Re-exported from Radix; inherits Radix element props." }, "PopoverTriggerProps": { "type": "@radix-ui/react-popover.PopoverTriggerProps", "required": false, "description": "Re-exported from Radix; inherits Radix element props." }, "PopoverContentProps": { "type": "@radix-ui/react-popover.PopoverContentProps", "required": false, "description": "Re-exported from Radix; inherits Radix element props." } } }, "storybook": { "title": "Feedback & Overlay/Popover", "file": "src/components/feedback/popover/popover.stories.tsx" }, "sourceFile": "src/components/feedback/popover/popover.tsx", "adrPath": null }, { "id": "portal", "name": "Portal", "category": "primitives", "description": "Portal utility for rendering outside DOM hierarchy.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/portal", "barrelExport": false, "exports": [ { "name": "Portal", "kind": "component" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": false, "portal": true, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": false, "clientOnly": true, "animation": false, "ssr": false }, "ssrSupport": "partial", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Uses browser APIs during render/effects — Client Component only; avoid rendering in Server Components.", "bundleTier": "core", "useWhen": [ "portal", "overlay container" ], "avoidWhen": [], "visualHints": "", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Uses browser globals — not SSR-safe without dynamic import" ], "props": { "root": { "children": { "type": "React.ReactNode", "required": true }, "container": { "type": "HTMLElement | null", "required": false } } }, "sourceFile": "src/components/primitives/portal/portal.tsx", "adrPath": null, "storybook": null }, { "id": "progress", "name": "Progress", "category": "primitives", "description": "Progress indicator (alias). Prefer `impact-nova/progress-bar` and `ProgressBar` export.", "status": "stable", "canonicalAlternative": "progress-bar", "since": "2.5.10", "importPath": "impact-nova/progress", "barrelExport": false, "exports": [ { "name": "Progress", "kind": "component" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": false, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Lightweight presentational primitive — still requires a Client Component boundary in App Router when interactive.", "bundleTier": "core", "useWhen": [], "avoidWhen": [], "visualHints": "", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": { "variant": { "type": "\"default\" | \"success\" | \"destructive\"", "required": false }, "label": { "type": "React.ReactNode | boolean", "required": false }, "time": { "type": "number | string", "required": false }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } } }, "storybook": { "title": "Feedback & Overlay/Progress Bar", "file": "src/components/primitives/progress/progress-bar.stories.tsx" }, "sourceFile": "src/components/primitives/progress/progress.tsx", "adrPath": null }, { "id": "progress-bar", "name": "ProgressBar", "category": "primitives", "description": "Progress indicator with optional label and variant styling.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/progress-bar", "barrelExport": false, "exports": [ { "name": "ProgressBar", "kind": "component" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": false, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Lightweight presentational primitive — still requires a Client Component boundary in App Router when interactive.", "bundleTier": "core", "useWhen": [ "progress", "loading bar", "completion indicator" ], "avoidWhen": [], "visualHints": "", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": {}, "parts": { "Progress": { "variant": { "type": "\"default\" | \"success\" | \"destructive\"", "required": false }, "label": { "type": "React.ReactNode | boolean", "required": false }, "time": { "type": "number | string", "required": false }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } } } }, "sourceFile": "src/components/primitives/progress/progress.tsx", "adrPath": null, "storybook": null }, { "id": "prompt", "name": "Prompt", "category": "forms", "description": "Confirmation prompt dialog.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/prompt", "barrelExport": false, "exports": [ { "name": "Prompt", "kind": "component" }, { "name": "PromptClose", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": true, "compound": false, "portal": false, "focusTrap": true, "focusManagement": true, "keyboardNavigation": false, "controlled": true, "uncontrolled": true, "i18n": true, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [ "confirm", "prompt dialog" ], "avoidWhen": [], "visualHints": "", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": { "open": { "type": "boolean", "required": false }, "onOpenChange": { "type": "(open: boolean) => void", "required": false }, "title": { "type": "string", "required": true }, "description": { "type": "string", "required": false }, "confirmLabel": { "type": "React.ReactNode", "required": false }, "cancelLabel": { "type": "React.ReactNode", "required": false }, "onConfirm": { "type": "() => void", "required": false }, "onCancel": { "type": "() => void", "required": false }, "confirmVariant": { "type": "ButtonProps[\"variant\"]", "required": false }, "cancelVariant": { "type": "ButtonProps[\"variant\"]", "required": false }, "showClose": { "type": "boolean", "required": false }, "preventOutsideClick": { "type": "boolean", "required": false }, "footer": { "type": "React.ReactNode", "required": false }, "children": { "type": "React.ReactNode", "required": false }, "className": { "type": "string", "required": false } } }, "sourceFile": "src/components/forms/prompt/prompt.tsx", "adrPath": null, "storybook": { "title": "Forms & Inputs/Prompt", "file": "src/components/forms/prompt/prompt.stories.tsx" } }, { "id": "radio-group", "name": "RadioGroup", "category": "forms", "description": "Radio button group.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/radio-group", "barrelExport": false, "exports": [ { "name": "RadioGroup", "kind": "component" }, { "name": "RadioGroupItem", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": true, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": true, "uncontrolled": true, "i18n": false, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [ "radio buttons", "single choice from list", "option group" ], "avoidWhen": [], "visualHints": "Circular options, one selected.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": { "isError": { "type": "boolean", "required": false, "deprecated": true }, "orientation": { "type": "\"horizontal\" | \"vertical\"", "required": false }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "id": { "type": "string", "required": false }, "label": { "type": "React.ReactNode", "required": false, "description": "Text shown above the control so users know what to enter." }, "helperText": { "type": "React.ReactNode", "required": false, "description": "Optional hint or validation message shown below the control. Alias: `description` on Field." }, "helperTextPosition": { "type": "HelperTextPosition", "required": false, "description": "Where helper text appears: `absolute` floats below without pushing layout; `flow` takes page space." }, "labelOrientation": { "type": "LabelOrientation", "required": false, "description": "Label placement: `top` stacks label above control; `left` places label beside control." }, "error": { "type": "boolean | React.ReactNode", "required": false, "description": "When true, shows red error styling. Pass a ReactNode to also render an error message." }, "required": { "type": "boolean", "required": false, "description": "When true, shows a required indicator (asterisk) next to the label." }, "disabled": { "type": "boolean", "required": false, "description": "When true, the control is greyed out and cannot be clicked, typed into, or focused." }, "size": { "type": "ControlSize", "required": false, "description": "Controls height and padding: `sm`, `md`, `lg`, or `default`." } } }, "deprecations": [ { "prop": "isError", "canonical": "error" } ], "storybook": { "title": "Forms & Inputs/Radio Group", "file": "src/components/forms/radio-group/radio-group.stories.tsx" }, "sourceFile": "src/components/forms/radio-group/radio-group.tsx", "adrPath": null }, { "id": "select", "name": "Select", "category": "forms", "description": "Enterprise dropdown select. API: value/defaultValue, onChange, options, multiple (canonical; isMulti deprecated), error, disabled (canonical; isDisabled deprecated). Not Radix SelectTrigger/Content.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/select", "barrelExport": false, "exports": [ { "name": "Select", "kind": "component" } ], "variants": [ { "axis": "error", "values": [ "true", "false" ], "default": "true" }, { "axis": "disabled", "values": [ "true", "false" ], "default": "true" }, { "axis": "readOnly", "values": [ "true", "false" ], "default": "true" }, { "axis": "open", "values": [ "true", "false" ], "default": "true" } ], "sizes": [ "default", "sm", "md", "lg" ], "subcomponents": [], "capabilities": { "asChild": false, "formControl": true, "compound": false, "portal": false, "focusTrap": false, "focusManagement": true, "keyboardNavigation": true, "controlled": true, "uncontrolled": true, "i18n": true, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [ "dropdown", "select one", "multi select", "picker" ], "avoidWhen": [ "simple native select", "Radix SelectTrigger pattern" ], "visualHints": "Click opens dropdown list; options array API.", "knownLimitations": [ "No SelectTrigger/SelectContent/SelectItem public exports — use options array API", "Internal modules (SelectTrigger, SelectMenuPanel, etc.) are not importable from impact-nova/select" ], "props": { "root": { "menuWidth": { "type": "string", "required": false, "description": "Dropdown menu width (CSS length)." }, "options": { "type": "OptionsOrGroups", "required": true, "description": "Options or grouped options — each leaf needs `value` and `label`." }, "value": { "type": "PropsValue", "required": false, "description": "Controlled value." }, "defaultValue": { "type": "PropsValue", "required": false, "description": "Uncontrolled initial value." }, "onChange": { "type": "( newValue: OnChangeValue, actionMeta: ActionMeta, ) => void", "required": false, "description": "Fired on each selection change.\nOmit to batch commits through `onMenuClose` when the menu closes." }, "isMulti": { "type": "IsMulti", "required": false, "deprecated": true }, "multiple": { "type": "IsMulti", "required": false, "description": "Enable multi-select." }, "isDisabled": { "type": "boolean", "required": false, "deprecated": true }, "isLoading": { "type": "boolean", "required": false, "description": "Show loading indicator in the menu." }, "isClearable": { "type": "boolean", "required": false, "description": "Show clear control when a value is set." }, "isSearchable": { "type": "boolean", "required": false, "description": "Enable typeahead search." }, "onInputChange": { "type": "(value: string) => void", "required": false, "description": "Search input change (controlled search string)." }, "placeholder": { "type": "string", "required": false, "description": "Placeholder when empty." }, "menuPortalTarget": { "type": "HTMLElement | null", "required": false, "deprecated": true }, "autoFocus": { "type": "boolean", "required": false, "description": "Focus trigger on mount." }, "closeMenuOnSelect": { "type": "boolean", "required": false, "description": "Close menu after a selection." }, "defaultMenuIsOpen": { "type": "boolean", "required": false, "description": "Open menu on mount (e.g. cell editors)." }, "onFocus": { "type": "(event: React.FocusEvent) => void", "required": false }, "onBlur": { "type": "(event: React.FocusEvent) => void", "required": false }, "scrollToSelectedOnOpen": { "type": "boolean", "required": false, "description": "Scroll to selected option when the menu opens." }, "components": { "type": "SelectComponentsConfig", "required": false, "deprecated": true }, "name": { "type": "string", "required": false, "description": "Form field name." }, "className": { "type": "string", "required": false, "description": "Classes on the trigger." }, "parentClassName": { "type": "string", "required": false, "description": "Classes on the outer field wrapper." }, "classNamePrefix": { "type": "string", "required": false, "description": "BEM-style prefix for internal class names." }, "maxSelectableOptions": { "type": "number", "required": false, "description": "Max selectable options in multi mode.\nDisables inverted selection when set." }, "showSequence": { "type": "boolean", "required": false, "description": "Show sequence numbers for multi selections." }, "selectionOrder": { "type": "string[]", "required": false, "description": "Custom selection order (value strings)." }, "isRequired": { "type": "boolean", "required": false, "deprecated": true }, "onMenuScrollToBottom": { "type": "() => void", "required": false, "description": "Infinite scroll / async pagination callback." }, "estimateRowSize": { "type": "number | ((index: number) => number)", "required": false, "description": "Estimated option row height (px) for virtualization, used until rows are\nmeasured. Pass a number, or a per-index function when row heights vary.\nStrongly recommended whenever `renderOption` renders rows taller than the\ndefault single-line height." }, "totalCount": { "type": "number", "required": false, "description": "Total options in the remote dataset (async pagination).\nUsed for \"Selected (N)\" when `enableInvertedSelection` is on." }, "isSelectAllEnabled": { "type": "boolean", "required": false, "description": "Show \"Select all\" in multi mode." }, "isReadOnly": { "type": "boolean", "required": false, "description": "Read-only — no edits." }, "searchPosition": { "type": "\"trigger\" | \"menu\"", "required": false, "description": "Where search renders." }, "footerContent": { "type": "ReactNode", "required": false, "description": "Sticky menu footer slot." }, "leftContent": { "type": "ReactNode", "required": false, "description": "Content left of the trigger label." }, "getOptionLabel": { "type": "(option: OptionType) => string | ReactNode", "required": false, "description": "Override option label resolution." }, "renderOption": { "type": "( props: { onClick: () => void; className: string; selected: boolean; disabled: boolean; }, option: OptionType, ) => ReactNode", "required": false, "description": "Fully custom option row." }, "onMenuOpen": { "type": "() => void", "required": false }, "onMenuClose": { "type": "( finalValue?: OnChangeValue, finalSelectionOrder?: string[], ) => void", "required": false, "description": "Menu close — use for batched value commits." }, "onClearAll": { "type": "() => void", "required": false }, "ignoreCase": { "type": "boolean", "required": false, "description": "Case-insensitive search." }, "ignoreAccents": { "type": "boolean", "required": false, "description": "Accent-insensitive search." }, "matchFrom": { "type": "\"any\" | \"start\"", "required": false, "description": "Match position for search." }, "stringify": { "type": "(option: OptionType) => string", "required": false, "description": "Stringify option for search." }, "trim": { "type": "boolean", "required": false, "description": "Trim search input." }, "filterOption": { "type": "(option: OptionType, inputValue: string) => boolean", "required": false, "description": "Custom filter — disables Web Worker optimization." }, "enableSubMenus": { "type": "boolean", "required": false, "description": "Hierarchical options (children)." }, "enableGroups": { "type": "boolean", "required": false, "description": "Grouped options." }, "enableInvertedSelection": { "type": "boolean", "required": false, "description": "\"Select all\" returns `InvertedSelection` instead of all options." }, "fetchError": { "type": "Error | null", "required": false, "description": "Async options error — shows retry UI instead of empty state." }, "onRefetch": { "type": "(options?: { throwOnError?: boolean; cancelRefetch?: boolean; }) => Promise", "required": false, "description": "Refetch callback when `fetchError` is set." }, "id": { "type": "string", "required": false }, "label": { "type": "React.ReactNode", "required": false, "description": "Text shown above the control so users know what to enter." }, "helperText": { "type": "React.ReactNode", "required": false, "description": "Optional hint or validation message shown below the control. Alias: `description` on Field." }, "helperTextPosition": { "type": "HelperTextPosition", "required": false, "description": "Where helper text appears: `absolute` floats below without pushing layout; `flow` takes page space." }, "labelOrientation": { "type": "LabelOrientation", "required": false, "description": "Label placement: `top` stacks label above control; `left` places label beside control." }, "error": { "type": "\"true\" | \"false\"", "required": false, "default": "true", "description": "CVA error axis. Default: \"true\"." }, "required": { "type": "boolean", "required": false, "description": "When true, shows a required indicator (asterisk) next to the label." }, "disabled": { "type": "\"true\" | \"false\"", "required": false, "default": "true", "description": "CVA disabled axis. Default: \"true\"." }, "size": { "type": "\"default\" | \"sm\" | \"md\" | \"lg\"", "required": false, "default": "default", "description": "CVA size axis. Default: \"default\"." }, "readOnly": { "type": "\"true\" | \"false\"", "required": false, "default": "true", "description": "CVA readOnly axis. Default: \"true\"." }, "open": { "type": "\"true\" | \"false\"", "required": false, "default": "true", "description": "CVA open axis. Default: \"true\"." } } }, "deprecations": [ { "prop": "isMulti", "canonical": "multiple" }, { "prop": "isDisabled", "canonical": "disabled" }, { "prop": "menuPortalTarget" }, { "prop": "components", "canonical": "renderOption" }, { "prop": "isRequired", "canonical": "required" } ], "storybook": { "title": "Forms & Inputs/Select", "file": "src/components/forms/select/select.stories.tsx" }, "sourceFile": "src/components/forms/select/select.tsx", "adrPath": "src/components/forms/select/select.decisions.md" }, { "id": "separator", "name": "Separator", "category": "layout", "description": "Visual separator.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/separator", "barrelExport": false, "exports": [ { "name": "Separator", "kind": "component" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": true, "uncontrolled": true, "i18n": false, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Lightweight presentational primitive — still requires a Client Component boundary in App Router when interactive.", "bundleTier": "core", "useWhen": [ "divider", "separator", "horizontal rule" ], "avoidWhen": [], "visualHints": "Horizontal or vertical line.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": { "open": { "type": "boolean", "required": false, "description": "Controlled open state." }, "defaultOpen": { "type": "boolean", "required": false, "description": "Uncontrolled initial open state." }, "onOpenChange": { "type": "(open: boolean) => void", "required": false, "description": "Called when open state changes." }, "modal": { "type": "boolean", "required": false, "description": "Whether the dialog is modal." }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } } }, "storybook": { "title": "Navigation/Separator", "file": "src/components/data-display/separator/separator.stories.tsx" }, "sourceFile": "src/components/data-display/separator/separator.tsx", "adrPath": null }, { "id": "sheet", "name": "Sheet", "category": "feedback", "description": "Slide-out panel from edge.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/sheet", "barrelExport": false, "exports": [ { "name": "Sheet", "kind": "component" }, { "name": "SheetBody", "kind": "subcomponent" }, { "name": "SheetClose", "kind": "subcomponent" }, { "name": "SheetContent", "kind": "subcomponent" }, { "name": "SheetDescription", "kind": "subcomponent" }, { "name": "SheetFooter", "kind": "subcomponent" }, { "name": "SheetHeader", "kind": "subcomponent" }, { "name": "SheetOverlay", "kind": "subcomponent" }, { "name": "SheetPortal", "kind": "subcomponent" }, { "name": "SheetTitle", "kind": "subcomponent" }, { "name": "SheetTrigger", "kind": "subcomponent" } ], "variants": [ { "axis": "side", "values": [ "top", "bottom", "left", "right" ], "default": "right" } ], "sizes": [], "subcomponents": [ "SheetContent", "SheetHeader", "SheetTitle", "SheetBody", "SheetFooter" ], "capabilities": { "asChild": false, "formControl": false, "compound": true, "portal": true, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": true, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [ "drawer from side", "slide-out panel", "side panel" ], "avoidWhen": [], "visualHints": "Panel that slides in from left/right.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only" ], "props": { "root": { "side": { "type": "\"top\" | \"bottom\" | \"left\" | \"right\"", "required": false, "default": "right", "description": "CVA side axis. Default: \"right\"." } }, "parts": { "SheetContent": { "expandable": { "type": "boolean", "required": false }, "defaultExpanded": { "type": "boolean", "required": false }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "SheetHeader": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "SheetBody": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "SheetFooter": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } } } }, "storybook": { "title": "Feedback & Overlay/Sheet", "file": "src/components/feedback/sheet/sheet.stories.tsx" }, "sourceFile": "src/components/feedback/sheet/sheet.tsx", "adrPath": "src/components/feedback/sheet/sheet.decisions.md" }, { "id": "show", "name": "Show", "category": "primitives", "description": "Show component.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/show", "barrelExport": false, "exports": [ { "name": "Show", "kind": "component" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": false, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [], "avoidWhen": [], "visualHints": "", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": { "when": { "type": "boolean", "required": true }, "children": { "type": "React.ReactNode", "required": true } } }, "storybook": { "title": "Extended/Show", "file": "src/components/ui/show.stories.tsx" }, "sourceFile": "src/components/ui/show.tsx", "adrPath": null }, { "id": "sidebar", "name": "Sidebar", "category": "layout", "description": "App sidebar navigation (Navy theme). Wrap app with SidebarProvider at root.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/sidebar", "barrelExport": false, "exports": [ { "name": "Sidebar", "kind": "component" }, { "name": "SidebarProvider", "kind": "component" }, { "name": "useSidebar", "kind": "hook" } ], "variants": [ { "axis": "variant", "values": [ "default", "outline" ], "default": "default" } ], "sizes": [ "default", "sm", "lg" ], "subcomponents": [ "SidebarProvider", "SidebarHeader", "SidebarContent", "SidebarTrigger", "SidebarFooter", "SidebarMenu", "SidebarMenuButton", "SidebarLogout" ], "capabilities": { "asChild": true, "formControl": false, "compound": true, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": true, "uncontrolled": true, "i18n": true, "clientOnly": true, "animation": true, "ssr": false }, "ssrSupport": "partial", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Uses browser APIs during render/effects — Client Component only; avoid rendering in Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [ "sidebar", "nav rail", "left menu", "app navigation", "collapsible sidebar" ], "avoidWhen": [], "visualHints": "Vertical strip (often dark); icons and labels; can collapse.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only", "Uses browser globals — not SSR-safe without dynamic import" ], "providerRequired": "SidebarProvider", "props": { "root": { "side": { "type": "\"left\" | \"right\"", "required": false, "description": "Viewport edge the rail attaches to." }, "variant": { "type": "\"default\" | \"outline\"", "required": false, "default": "default", "description": "CVA variant axis. Default: \"default\"." }, "collapsible": { "type": "\"offcanvas\" | \"icon\" | \"none\"", "required": false, "description": "Collapse behaviour." }, "defaultOpen": { "type": "boolean", "required": false, "description": "Uncontrolled initial expand state. Persisted in a cookie." }, "open": { "type": "boolean", "required": false, "description": "Controlled expand state — pair with `onOpenChange`." }, "onOpenChange": { "type": "(open: boolean) => void", "required": false, "description": "Called when the sidebar expands or collapses." }, "autoHideAfter": { "type": "number", "required": false, "description": "Max `SidebarMenu` items before showing a “View more” expander." }, "size": { "type": "\"default\" | \"sm\" | \"lg\"", "required": false, "default": "default", "description": "CVA size axis. Default: \"default\"." } }, "parts": { "SidebarSeparator": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "SidebarContent": { "routes": { "type": "SidebarRoute[]", "required": false, "description": "Declarative nav — auto-renders `SidebarMenu` when set." }, "activeValue": { "type": "string", "required": false, "description": "Active route `value` for highlight state." }, "onNavigate": { "type": "(value: string) => void", "required": false, "description": "Called when user selects a leaf route (button mode)." }, "asLinks": { "type": "boolean", "required": false, "description": "Render routes as `` instead of buttons." } }, "SidebarGroupLabel": { "asChild": { "type": "boolean", "required": false } }, "SidebarGroupAction": { "asChild": { "type": "boolean", "required": false } }, "SidebarMenuItem": { "isActive": { "type": "boolean", "required": false, "description": "Sets `data-active` on the menu row." } }, "SidebarMenuCollapsible": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "isActive": { "type": "boolean", "required": false, "description": "Auto-opens when sidebar expands and section is active." }, "open": { "type": "boolean", "required": false, "description": "Controlled open state." }, "defaultOpen": { "type": "boolean", "required": false, "description": "Uncontrolled initial open state." }, "onOpenChange": { "type": "(open: boolean) => void", "required": false, "description": "Called when open state changes." }, "modal": { "type": "boolean", "required": false, "description": "Whether the dialog is modal." } }, "SidebarMenuButton": { "asChild": { "type": "boolean", "required": false, "description": "Merge props into child (e.g. router ``)." }, "isActive": { "type": "boolean", "required": false, "description": "Highlights row with green bar + `data-active=\"true\"`." }, "tooltip": { "type": "string | React.ComponentProps", "required": false, "description": "Tooltip when sidebar is collapsed to icons." } }, "SidebarMenuAction": { "asChild": { "type": "boolean", "required": false }, "showOnHover": { "type": "boolean", "required": false } }, "SidebarMenuSkeleton": { "showIcon": { "type": "boolean", "required": false } }, "SidebarMenuSubItem": { "isActive": { "type": "boolean", "required": false } }, "SidebarMenuSubButton": { "asChild": { "type": "boolean", "required": false }, "size": { "type": "\"sm\" | \"md\"", "required": false }, "isActive": { "type": "boolean", "required": false } } } }, "storybook": { "title": "Navigation/Sidebar", "file": "src/components/layout/sidebar/sidebar.stories.tsx" }, "sourceFile": "src/components/layout/sidebar/sidebar.tsx", "adrPath": "src/components/layout/sidebar/sidebar.decisions.md" }, { "id": "skeleton", "name": "Skeleton", "category": "primitives", "description": "Skeleton loading placeholder.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/skeleton", "barrelExport": false, "exports": [ { "name": "Skeleton", "kind": "component" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": false, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Lightweight presentational primitive — still requires a Client Component boundary in App Router when interactive.", "bundleTier": "core", "useWhen": [ "skeleton", "loading placeholder", "content placeholder" ], "avoidWhen": [], "visualHints": "Gray animated placeholders.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } } }, "storybook": { "title": "Feedback & Overlay/Skeleton", "file": "src/components/data-display/skeleton/skeleton.stories.tsx" }, "sourceFile": "src/components/data-display/skeleton/skeleton.tsx", "adrPath": null }, { "id": "slider", "name": "Slider", "category": "forms", "description": "Slider component.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/slider", "barrelExport": false, "exports": [ { "name": "Slider", "kind": "component" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": true, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": true, "uncontrolled": true, "i18n": true, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [], "avoidWhen": [], "visualHints": "", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": { "SliderProps": { "type": "@radix-ui/react-slider.SliderProps", "required": false, "description": "Re-exported from Radix; inherits Radix element props." } } }, "storybook": { "title": "Forms & Inputs/Slider", "file": "src/components/forms/slider/slider.stories.tsx" }, "sourceFile": "src/components/forms/slider/slider.tsx", "adrPath": null }, { "id": "smart-input", "name": "SmartInput", "category": "forms", "description": "Input with smart formatting or validation.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/smart-input", "barrelExport": false, "exports": [ { "name": "SmartInput", "kind": "component" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": true, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": true, "controlled": true, "uncontrolled": true, "i18n": false, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [ "formatted input", "masked input", "smart field" ], "avoidWhen": [], "visualHints": "Like Input with formatting (e.g. phone, number).", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": { "value": { "type": "string | number", "required": false }, "onChange": { "type": "( value: string, syntheticEvent?: React.ChangeEvent, ) => void", "required": false }, "onBlur": { "type": "(event: React.FocusEvent) => void", "required": false }, "onFocus": { "type": "(event: React.FocusEvent) => void", "required": false }, "type": { "type": "HTMLInputTypeAttribute", "required": false }, "allowNegative": { "type": "boolean", "required": false }, "min": { "type": "number", "required": false }, "max": { "type": "number", "required": false }, "minOperator": { "type": "ComparisonOperator", "required": false }, "maxOperator": { "type": "ComparisonOperator", "required": false }, "min_operator": { "type": "ComparisonOperator", "required": false, "deprecated": true }, "max_operator": { "type": "ComparisonOperator", "required": false, "deprecated": true }, "maxIntegerDigits": { "type": "number", "required": false }, "decimalPlaces": { "type": "number", "required": false }, "enforceDecimal": { "type": "boolean", "required": false }, "allowDecimal": { "type": "boolean", "required": false }, "allowSpecialCharacters": { "type": "boolean", "required": false, "description": "When false (default), only letters, numbers, and spaces are kept.\n`email` / `password` / `url` / `tel` default to true." }, "maxLength": { "type": "number", "required": false }, "trimLeadingSpaces": { "type": "boolean", "required": false }, "customValidator": { "type": "(value: string) => boolean", "required": false }, "onValidationError": { "type": "(error: string) => void", "required": false } } }, "deprecations": [ { "prop": "min_operator", "canonical": "minOperator" }, { "prop": "max_operator", "canonical": "maxOperator" } ], "storybook": { "title": "Forms & Inputs/Smart Input", "file": "src/components/forms/smart-input/smart-input.stories.tsx" }, "sourceFile": "src/components/forms/smart-input/smart-input.tsx", "adrPath": null }, { "id": "statistics-card", "name": "StatisticsCard", "category": "data-display", "description": "KPI / statistics display card.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/statistics-card", "barrelExport": false, "exports": [ { "name": "StatisticsCardChart", "kind": "subcomponent" }, { "name": "StatisticsCardHeader", "kind": "subcomponent" }, { "name": "StatisticsCardLegend", "kind": "subcomponent" }, { "name": "StatisticsCardLegendItem", "kind": "subcomponent" }, { "name": "StatisticsCardRoot", "kind": "subcomponent" }, { "name": "StatisticsCardSummary", "kind": "subcomponent" }, { "name": "StatisticsCardSummaryItem", "kind": "subcomponent" }, { "name": "StatisticsCardTitle", "kind": "subcomponent" }, { "name": "StatisticsCardTitleIcon", "kind": "subcomponent" }, { "name": "StatisticsCardTitleText", "kind": "subcomponent" }, { "name": "StatisticsCardTitleTooltip", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": true, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": true, "uncontrolled": false, "i18n": false, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [ "KPI", "metric card", "dashboard stat" ], "avoidWhen": [], "visualHints": "", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only" ], "props": { "root": { "items": { "type": "T[]", "required": true }, "onItemToggle": { "type": "(index: number, checked: boolean) => void", "required": false }, "chartSize": { "type": "number", "required": false }, "config": { "type": "StatisticsCardConfig", "required": false }, "mapItem": { "type": "(item: T, index: number) => StatisticsCardItem", "required": false }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "parts": { "StatisticsCardTitleIcon": { "icon": { "type": "React.ReactNode", "required": true }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "StatisticsCardTitleTooltip": { "content": { "type": "string", "required": true }, "icon": { "type": "React.ReactNode", "required": false }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "StatisticsCardChart": { "centerLabel": { "type": "string", "required": false }, "chartConfig": { "type": "StatisticsCardChartConfig", "required": false }, "chartSize": { "type": "number", "required": false }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "StatisticsCardLegendItem": { "index": { "type": "number", "required": false }, "item": { "type": "StatisticsCardItem", "required": false }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } }, "StatisticsCardSummaryItem": { "label": { "type": "string", "required": true }, "count": { "type": "number | string | React.ReactNode", "required": true }, "color": { "type": "string", "required": false }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } } } }, "sourceFile": "src/components/data-display/statistics-card/statistics-card.tsx", "adrPath": null, "storybook": { "title": "Data Display/Statistics Card", "file": "src/components/data-display/statistics-card/statistics-card.stories.tsx" } }, { "id": "stepper", "name": "Stepper", "category": "primitives", "description": "Step indicator.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/stepper", "barrelExport": false, "exports": [ { "name": "Stepper", "kind": "component" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": true, "controlled": false, "uncontrolled": false, "i18n": true, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [ "stepper", "wizard", "steps", "progress steps" ], "avoidWhen": [], "visualHints": "Numbered or connected steps (1-2-3).", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": { "currentStep": { "type": "number", "required": true }, "steps": { "type": "(string | StepItem)[]", "required": true }, "onStepClick": { "type": "(index: number) => void", "required": false }, "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." } } }, "storybook": { "title": "Navigation/Stepper", "file": "src/components/primitives/stepper/stepper.stories.tsx" }, "sourceFile": "src/components/primitives/stepper/stepper.tsx", "adrPath": null }, { "id": "switch", "name": "Switch", "category": "forms", "description": "Toggle switch with optional inline label, helperText, and error via FieldControlProps.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/switch", "barrelExport": false, "exports": [ { "name": "Switch", "kind": "component" }, { "name": "SwitchRoot", "kind": "subcomponent" } ], "variants": [], "sizes": [ "default", "sm", "md", "lg" ], "subcomponents": [], "capabilities": { "asChild": false, "formControl": true, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": true, "uncontrolled": true, "i18n": false, "clientOnly": false, "animation": false, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [ "toggle", "on/off", "switch", "enable/disable" ], "avoidWhen": [], "visualHints": "Horizontal toggle pill.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "id": { "type": "string", "required": false }, "label": { "type": "React.ReactNode", "required": false, "description": "Text shown above the control so users know what to enter." }, "helperText": { "type": "React.ReactNode", "required": false, "description": "Optional hint or validation message shown below the control. Alias: `description` on Field." }, "helperTextPosition": { "type": "HelperTextPosition", "required": false, "description": "Where helper text appears: `absolute` floats below without pushing layout; `flow` takes page space." }, "labelOrientation": { "type": "LabelOrientation", "required": false, "description": "Label placement: `top` stacks label above control; `left` places label beside control." }, "error": { "type": "boolean | React.ReactNode", "required": false, "description": "When true, shows red error styling. Pass a ReactNode to also render an error message." }, "required": { "type": "boolean", "required": false, "description": "When true, shows a required indicator (asterisk) next to the label." }, "disabled": { "type": "boolean", "required": false, "description": "When true, the control is greyed out and cannot be clicked, typed into, or focused." }, "size": { "type": "\"default\" | \"sm\" | \"md\" | \"lg\"", "required": false, "default": "default", "description": "CVA size axis. Default: \"default\"." }, "isDisabled": { "type": "boolean", "required": false, "deprecated": true }, "isError": { "type": "boolean", "required": false, "deprecated": true }, "open": { "type": "boolean", "required": false, "description": "Controlled open state." }, "defaultOpen": { "type": "boolean", "required": false, "description": "Uncontrolled initial open state." }, "onOpenChange": { "type": "(open: boolean) => void", "required": false, "description": "Called when open state changes." }, "modal": { "type": "boolean", "required": false, "description": "Whether the dialog is modal." } } }, "deprecations": [ { "prop": "isDisabled", "canonical": "disabled" }, { "prop": "isError", "canonical": "error" } ], "storybook": { "title": "Forms & Inputs/Switch", "file": "src/components/forms/switch/switch.stories.tsx" }, "sourceFile": "src/components/forms/switch/switch.tsx", "adrPath": null }, { "id": "tabs", "name": "Tabs", "category": "primitives", "description": "TabsList, TabsTrigger, TabsContent.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/tabs", "barrelExport": false, "exports": [ { "name": "Tabs", "kind": "component" }, { "name": "TabsContent", "kind": "subcomponent" }, { "name": "TabsImage", "kind": "subcomponent" }, { "name": "TabsList", "kind": "subcomponent" }, { "name": "TabsTrigger", "kind": "subcomponent" } ], "variants": [], "sizes": [], "subcomponents": [], "capabilities": { "asChild": false, "formControl": false, "compound": true, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": true, "controlled": true, "uncontrolled": true, "i18n": false, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components.", "bundleTier": "core", "useWhen": [ "tabs", "tabbed interface", "tab navigation", "sections in tabs" ], "avoidWhen": [], "visualHints": "Horizontal tab bar with content panels.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router", "Compound component — use documented subcomponents only" ], "props": { "root": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "variant": { "type": "TabsVariant", "required": false }, "size": { "type": "TabsSize", "required": false }, "hideInactiveLabel": { "type": "boolean", "required": false }, "tooltipClassName": { "type": "string", "required": false }, "maxWords": { "type": "number", "required": false }, "renderTabTooltip": { "type": "InfoTooltipRender", "required": false, "description": "Inject tooltip at app layer (see defaultTabTooltipRender in feedback/tooltip)." }, "open": { "type": "boolean", "required": false, "description": "Controlled open state." }, "defaultOpen": { "type": "boolean", "required": false, "description": "Uncontrolled initial open state." }, "onOpenChange": { "type": "(open: boolean) => void", "required": false, "description": "Called when open state changes." }, "modal": { "type": "boolean", "required": false, "description": "Whether the dialog is modal." } }, "parts": { "TabsTrigger": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "icon": { "type": "React.ReactNode", "required": false }, "maxWords": { "type": "number", "required": false }, "activeColor": { "type": "ActiveColorConfig", "required": false } }, "TabsImage": { "className": { "type": "string", "required": false, "description": "Merged via cn() — layout only." }, "children": { "type": "ReactNode", "required": false, "description": "Child content." }, "activeImage": { "type": "React.ReactNode", "required": true }, "inactiveImage": { "type": "React.ReactNode", "required": true } } } }, "storybook": { "title": "Navigation/Tabs", "file": "src/components/primitives/tabs/tabs.stories.tsx" }, "sourceFile": "src/components/primitives/tabs/tabs.tsx", "adrPath": "src/components/primitives/tabs/tabs.decisions.md" }, { "id": "tag", "name": "Tag", "category": "primitives", "description": "Tag or chip.", "status": "stable", "since": "2.5.10", "importPath": "impact-nova/tag", "barrelExport": false, "exports": [ { "name": "Tag", "kind": "component" } ], "variants": [ { "axis": "variant", "values": [ "default", "secondary", "outline", "tertiary", "ghost", "destructive", "success", "warning", "info", "choice" ], "default": "default" }, { "axis": "shape", "values": [ "pill", "rounded" ], "default": "pill" } ], "sizes": [ "sm", "md", "lg" ], "subcomponents": [], "capabilities": { "asChild": true, "formControl": false, "compound": false, "portal": false, "focusTrap": false, "focusManagement": false, "keyboardNavigation": false, "controlled": false, "uncontrolled": false, "i18n": true, "clientOnly": false, "animation": true, "ssr": true }, "ssrSupport": "full", "rscCompatibility": "client-boundary-required", "runtimeGuidance": "Mark the consuming file with \"use client\". Pass serializable props from Server Components. Wrap with ImpactNovaProviders (impact-nova/form) for user-facing strings.", "bundleTier": "core", "useWhen": [ "tag", "chip", "label", "removable tag" ], "avoidWhen": [], "visualHints": "Small pill with optional close.", "knownLimitations": [ "Mark consuming file with \"use client\" in App Router" ], "props": { "root": { "shape": { "type": "\"pill\" | \"rounded\"", "required": false, "default": "pill", "description": "CVA shape axis. Default: \"pill\"." }, "leftIcon": { "type": "React.ReactNode", "required": false }, "rightIcon": { "type": "React.ReactNode", "required": false }, "removable": { "type": "boolean", "required": false }, "onRemove": { "type": "() => void", "required": false }, "asChild": { "type": "boolean", "required": false }, "asButton": { "type": "boolean", "required": false, "description": "Render a native `