{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "zeron-design", "homepage": "https://github.com/zeron-design/zeron-design", "items": [ { "name": "surfaces", "type": "registry:theme", "title": "Semantic Design Tokens", "description": "Complete semantic token system: color, typography, control sizes, border widths, motion durations, shadows, surfaces, and layers. Layout spacing and border radii use Tailwind's native scale. The historical surfaces slug is retained for compatibility.", "cssVars": { "theme": { "font-sans": "var(--font-family-sans)", "color-fg-default": "var(--fg-default)", "color-fg-muted": "var(--fg-muted)", "color-fg-subtle": "var(--fg-subtle)", "color-fg-brand": "var(--fg-brand)", "color-fg-danger": "var(--fg-danger)", "color-fg-warning": "var(--fg-warning)", "color-fg-success": "var(--fg-success)", "color-fg-info": "var(--fg-info)", "color-fg-neutral-status": "var(--fg-neutral-status)", "color-fg-on-primary-action": "var(--fg-on-primary-action)", "color-fg-on-neutral-action": "var(--fg-on-neutral-action)", "color-fg-on-destructive-action": "var(--fg-on-destructive-action)", "color-fg-on-brand": "var(--fg-on-brand)", "color-fg-on-danger": "var(--fg-on-danger)", "color-fg-on-inverse": "var(--fg-on-inverse)", "color-brand": "var(--brand)", "color-warning": "var(--warning)", "color-neutral": "var(--neutral)", "color-brand-hover": "var(--brand-hover)", "color-brand-active": "var(--brand-active)", "color-primary-action": "var(--primary-action)", "color-primary-action-hover": "var(--primary-action-hover)", "color-primary-action-active": "var(--primary-action-active)", "color-neutral-action": "var(--neutral-action)", "color-neutral-action-hover": "var(--neutral-action-hover)", "color-neutral-action-active": "var(--neutral-action-active)", "color-destructive-action": "var(--destructive-action)", "color-destructive-action-hover": "var(--destructive-action-hover)", "color-destructive-action-active": "var(--destructive-action-active)", "color-muted": "var(--muted)", "color-secondary-action": "var(--secondary-action)", "color-secondary-action-hover": "var(--secondary-action-hover)", "color-secondary-action-active": "var(--secondary-action-active)", "color-emphasis": "var(--emphasis)", "color-selection": "var(--selection)", "color-destructive": "var(--destructive)", "color-destructive-hover": "var(--destructive-hover)", "color-destructive-active": "var(--destructive-active)", "color-danger-surface-subtle": "var(--danger-surface-subtle)", "color-danger-surface": "var(--danger-surface)", "color-danger-surface-raised": "var(--danger-surface-raised)", "color-warning-surface-subtle": "var(--warning-surface-subtle)", "color-warning-surface": "var(--warning-surface)", "color-warning-surface-raised": "var(--warning-surface-raised)", "color-success-surface": "var(--success-surface)", "color-info-surface": "var(--info-surface)", "color-info-surface-raised": "var(--info-surface-raised)", "color-neutral-status-surface": "var(--neutral-status-surface)", "color-neutral-status-surface-raised": "var(--neutral-status-surface-raised)", "color-scrim": "var(--scrim)", "color-inverse-background": "var(--inverse-background)", "color-inverse-background-hover": "var(--inverse-background-hover)", "color-inverse-background-active": "var(--inverse-background-active)", "color-border": "var(--border)", "color-border-subtle": "var(--border-subtle)", "color-input": "var(--input)", "color-input-hover": "var(--input-hover)", "color-danger-border": "var(--danger-border)", "color-warning-border": "var(--warning-border)", "color-success-border": "var(--success-border)", "color-info-border": "var(--info-border)", "color-neutral-status-border": "var(--neutral-status-border)", "color-focus-ring": "var(--focus-ring)", "color-hover": "var(--hover)", "color-active": "var(--active)", "color-checker-a": "var(--checker-a)", "color-checker-b": "var(--checker-b)", "color-scrollbar-thumb": "var(--scrollbar-thumb)", "color-scrollbar-thumb-hover": "var(--scrollbar-thumb-hover)", "color-scrollbar-thumb-active": "var(--scrollbar-thumb-active)", "color-card": "var(--card-background)", "color-surface-base": "var(--surface-base)", "color-surface-raised": "var(--surface-raised)", "color-surface-floating": "var(--surface-floating)", "color-surface-overlay": "var(--surface-overlay)", "color-surface-top": "var(--surface-top)", "shadow-control": "var(--shadow-control)", "shadow-knob": "var(--shadow-knob)", "shadow-raised": "var(--shadow-raised)", "shadow-floating-drop": "var(--shadow-floating-drop)", "shadow-floating": "var(--shadow-floating)", "shadow-overlay": "var(--shadow-overlay)", "text-label": "var(--font-size-label)", "text-label--line-height": "var(--line-height-label)", "text-body": "var(--font-size-body)", "text-body--line-height": "var(--line-height-body)", "text-title": "var(--font-size-title)", "text-title--line-height": "var(--line-height-title)", "text-heading": "var(--font-size-heading)", "text-heading--line-height": "var(--line-height-heading)", "transition-duration-fast": "var(--motion-duration-fast)", "transition-duration-fast-exit": "var(--motion-duration-fast-exit)", "transition-duration-moderate": "var(--motion-duration-moderate)", "transition-duration-moderate-exit": "var(--motion-duration-moderate-exit)", "transition-duration-slow": "var(--motion-duration-slow)", "transition-duration-slow-exit": "var(--motion-duration-slow-exit)", "border-width-hairline": "0.5px", "spacing-control-xs": "var(--control-height-xs)", "spacing-control-sm": "var(--control-height-sm)", "spacing-control-md": "var(--control-height-md)", "spacing-control-lg": "var(--control-height-lg)", "spacing-control-xl": "var(--control-height-xl)", "spacing-badge-sm": "var(--badge-height-sm)", "spacing-badge-md": "var(--badge-height-md)", "spacing-badge-lg": "var(--badge-height-lg)" }, "light": { "font-family-sans": "\"Inter\", system-ui, sans-serif", "fg-default": "#00030A", "fg-muted": "#00030ABF", "fg-subtle": "#00030A99", "fg-brand": "#0060D2", "fg-danger": "#B0140C", "fg-warning": "#A74A00", "fg-success": "#176B3A", "fg-info": "#004DAF", "fg-neutral-status": "#555B61", "fg-on-primary-action": "#FFFFFF", "fg-on-neutral-action": "#FFFFFF", "fg-on-destructive-action": "#FFFFFF", "fg-on-brand": "#FFFFFF", "fg-on-danger": "#00040D", "fg-on-inverse": "#FFFFFF", "brand": "#0060D2", "warning": "#FA8801", "neutral": "#6B7075", "brand-hover": "#004DAF", "brand-active": "#003B8B", "primary-action": "#0060D2", "primary-action-hover": "#004DAF", "primary-action-active": "#003B8B", "neutral-action": "#00030A", "neutral-action-hover": "#001033", "neutral-action-active": "#001748", "destructive-action": "#DC2626", "destructive-action-hover": "#B91C1C", "destructive-action-active": "#991B1B", "muted": "#F6F8FB", "secondary-action": "#F6F8FB", "secondary-action-hover": "#F1F4F9", "secondary-action-active": "#EAEEF5", "emphasis": "#F1F4F9", "selection": "rgb(234 238 245 / 0.4)", "destructive": "#F73920", "destructive-hover": "#F9654B", "destructive-active": "#FA8F78", "danger-surface-subtle": "#FEF2F2", "danger-surface": "#FEE2E2", "danger-surface-raised": "#FECACA", "warning-surface-subtle": "#FFFBEB", "warning-surface": "#FEF3C7", "warning-surface-raised": "#FDE68A", "success-surface": "#EAF8EF", "info-surface": "#DBEAFE", "info-surface-raised": "#BFDBFE", "neutral-status-surface": "#F5F5F5", "neutral-status-surface-raised": "#E5E5E5", "scrim": "rgb(0 0 0 / 0.4)", "inverse-background": "#00030A", "inverse-background-hover": "#001033", "inverse-background-active": "#001748", "border": "rgb(52 57 71 / 0.12)", "border-subtle": "rgb(52 57 71 / 0.07)", "input": "#E5E5E5", "input-hover": "rgb(23 23 23 / 0.24)", "danger-border": "#B91C1C", "warning-border": "#D06700", "success-border": "#23864B", "info-border": "#0060D2", "neutral-status-border": "#6B7075", "focus-ring": "#6088E8", "hover": "rgb(220 227 239 / 0.25)", "active": "rgb(220 227 239 / 0.4)", "checker-a": "#BBBBBB", "checker-b": "#FFFFFF", "scrollbar-thumb": "rgb(0 0 0 / 0.08)", "scrollbar-thumb-hover": "rgb(0 0 0 / 0.12)", "scrollbar-thumb-active": "rgb(0 0 0 / 0.16)", "card-background": "#FFFFFF", "surface-base": "#F6F8FB", "surface-raised": "#F0F3F8", "surface-floating": "#FFFFFF", "surface-overlay": "#FFFFFF", "surface-top": "#FFFFFF", "shadow-color": "rgb(0 0 0 / 0.06)", "dm-hi-base": "rgba(255,255,255,0.01)", "dm-hi-mid": "rgba(255,255,255,0.02)", "dm-hi-high": "rgba(255,255,255,0.04)", "dm-ring-base": "rgba(255,255,255,0.02)", "dm-ring-mid": "rgba(255,255,255,0.04)", "dm-drop": "rgba(0,0,0,0.18)", "shadow-control": "0 1px 2px 0 rgb(0 0 0 / 0.05)", "shadow-knob": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)", "shadow-raised": "0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color)", "shadow-floating-drop": "0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color)", "shadow-floating": "0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color)", "shadow-overlay": "0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(--shadow-color), 0 12px 12px -6px var(--shadow-color)", "font-size-label": "0.75rem", "line-height-label": "1rem", "font-size-body": "0.875rem", "line-height-body": "1.25rem", "font-size-title": "1.125rem", "line-height-title": "1.625rem", "font-size-heading": "1.5rem", "line-height-heading": "2rem", "motion-duration-fast": "80ms", "motion-duration-fast-exit": "60ms", "motion-duration-moderate": "160ms", "motion-duration-moderate-exit": "120ms", "motion-duration-slow": "240ms", "motion-duration-slow-exit": "160ms", "border-width-hairline": "0.5px", "control-height-xs": "1.5rem", "control-height-sm": "1.75rem", "control-height-md": "2rem", "control-height-lg": "2.25rem", "control-height-xl": "2.5rem", "badge-height-sm": "1.25rem", "badge-height-md": "1.5rem", "badge-height-lg": "1.75rem", "layer-underlay": "-10", "layer-base": "0", "layer-decoration": "1", "layer-indicator": "2", "layer-control": "3", "layer-foreground": "4", "layer-content": "10", "layer-raised": "20", "layer-action": "30", "layer-overlay": "40", "layer-popover": "50", "layer-tooltip": "60" }, "dark": { "font-family-sans": "\"Inter\", system-ui, sans-serif", "fg-default": "#F9F9F9", "fg-muted": "#F9F9F9BF", "fg-subtle": "#B6BABC", "fg-brand": "#72B9FE", "fg-danger": "#FEBEAC", "fg-warning": "#FFDDA1", "fg-success": "#9DE7B4", "fg-info": "#A1D2FE", "fg-neutral-status": "#C7CBCE", "fg-on-primary-action": "#FFFFFF", "fg-on-neutral-action": "#FFFFFF", "fg-on-destructive-action": "#FFFFFF", "fg-on-brand": "#00040D", "fg-on-danger": "#00040D", "fg-on-inverse": "#00040D", "brand": "#1483FD", "warning": "#FF9314", "neutral": "#8B9095", "brand-hover": "#439FFD", "brand-active": "#72B9FE", "primary-action": "#0060D2", "primary-action-hover": "#004DAF", "primary-action-active": "#003B8B", "neutral-action": "#737373", "neutral-action-hover": "#525252", "neutral-action-active": "#404040", "destructive-action": "#DC2626", "destructive-action-hover": "#B91C1C", "destructive-action-active": "#991B1B", "muted": "#2F3136", "secondary-action": "#2F3136", "secondary-action-hover": "#42444A", "secondary-action-active": "#585B62", "emphasis": "#42444A", "selection": "rgb(88 91 98 / 0.16)", "destructive": "#FC4932", "destructive-hover": "#FD725B", "destructive-active": "#FD9983", "danger-surface-subtle": "#7F1D1D", "danger-surface": "#991B1B", "danger-surface-raised": "#B91C1C", "warning-surface-subtle": "#78350F", "warning-surface": "#92400E", "warning-surface-raised": "#B45309", "success-surface": "#123B25", "info-surface": "#1E40AF", "info-surface-raised": "#1D4ED8", "neutral-status-surface": "#262626", "neutral-status-surface-raised": "#404040", "scrim": "rgba(17, 17, 17, 0.60)", "inverse-background": "#DEE5EF", "inverse-background-hover": "#B6C6DF", "inverse-background-active": "#7994BF", "border": "rgb(255 255 255 / 0.08)", "border-subtle": "rgb(255 255 255 / 0.05)", "input": "#404040", "input-hover": "rgb(245 245 245 / 0.24)", "danger-border": "#FCA5A5", "warning-border": "#FF9314", "success-border": "#55C779", "info-border": "#60A5FA", "neutral-status-border": "#8B9095", "focus-ring": "#6088E8", "hover": "rgb(220 227 239 / 0.08)", "active": "rgb(220 227 239 / 0.18)", "checker-a": "#1F1F1F", "checker-b": "#2A2A2A", "scrollbar-thumb": "rgb(255 255 255 / 0.08)", "scrollbar-thumb-hover": "rgb(255 255 255 / 0.12)", "scrollbar-thumb-active": "rgb(255 255 255 / 0.16)", "card-background": "#292929", "surface-base": "#1B1B1B", "surface-raised": "#292929", "surface-floating": "#1F1F1F", "surface-overlay": "#292929", "surface-top": "#404040", "shadow-color": "rgb(0 0 0 / 0.06)", "dm-hi-base": "rgba(255,255,255,0.01)", "dm-hi-mid": "rgba(255,255,255,0.02)", "dm-hi-high": "rgba(255,255,255,0.04)", "dm-ring-base": "rgba(255,255,255,0.02)", "dm-ring-mid": "rgba(255,255,255,0.04)", "dm-drop": "rgba(0,0,0,0.18)", "shadow-control": "0 1px 2px 0 rgb(0 0 0 / 0.25)", "shadow-knob": "0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3)", "shadow-raised": "inset 0 1px 0 0 var(--dm-hi-base), inset 0 0 0 1px var(--dm-ring-base), 0 1px 1px -0.5px var(--dm-drop)", "shadow-floating-drop": "0 1px 1px -0.5px var(--dm-drop), 0 3px 3px -1.5px var(--dm-drop)", "shadow-floating": "inset 0 1px 0 0 var(--dm-hi-mid), inset 0 0 0 1px var(--dm-ring-base), 0 0 0 1px rgba(0,0,0,0.12), 0 1px 1px -0.5px var(--dm-drop), 0 3px 3px -1.5px var(--dm-drop)", "shadow-overlay": "inset 0 1px 0 0 var(--dm-hi-high), inset 0 0 0 1px var(--dm-ring-mid), 0 0 0 1px rgba(0,0,0,0.16), 0 1px 1px -0.5px var(--dm-drop), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), 0 12px 12px -6px var(--dm-drop)", "font-size-label": "0.75rem", "line-height-label": "1rem", "font-size-body": "0.875rem", "line-height-body": "1.25rem", "font-size-title": "1.125rem", "line-height-title": "1.625rem", "font-size-heading": "1.5rem", "line-height-heading": "2rem", "motion-duration-fast": "80ms", "motion-duration-fast-exit": "60ms", "motion-duration-moderate": "160ms", "motion-duration-moderate-exit": "120ms", "motion-duration-slow": "240ms", "motion-duration-slow-exit": "160ms", "border-width-hairline": "0.5px", "control-height-xs": "1.5rem", "control-height-sm": "1.75rem", "control-height-md": "2rem", "control-height-lg": "2.25rem", "control-height-xl": "2.5rem", "badge-height-sm": "1.25rem", "badge-height-md": "1.5rem", "badge-height-lg": "1.75rem", "layer-underlay": "-10", "layer-base": "0", "layer-decoration": "1", "layer-indicator": "2", "layer-control": "3", "layer-foreground": "4", "layer-content": "10", "layer-raised": "20", "layer-action": "30", "layer-overlay": "40", "layer-popover": "50", "layer-tooltip": "60" } }, "css": { ".z-underlay": { "z-index": "var(--layer-underlay)" }, ".z-base": { "z-index": "var(--layer-base)" }, ".z-decoration": { "z-index": "var(--layer-decoration)" }, ".z-indicator": { "z-index": "var(--layer-indicator)" }, ".z-control": { "z-index": "var(--layer-control)" }, ".z-foreground": { "z-index": "var(--layer-foreground)" }, ".z-content": { "z-index": "var(--layer-content)" }, ".z-raised": { "z-index": "var(--layer-raised)" }, ".z-action": { "z-index": "var(--layer-action)" }, ".z-overlay": { "z-index": "var(--layer-overlay)" }, ".z-popover": { "z-index": "var(--layer-popover)" }, ".z-tooltip": { "z-index": "var(--layer-tooltip)" } }, "dependencies": [ "tw-animate-css" ] }, { "name": "control-size", "type": "registry:lib", "title": "Control Size", "description": "Shared control-size types, height classes, and visual recipes for standard Zeron controls.", "files": [ { "path": "packages/ui/src/tokens/control-size.ts", "type": "registry:lib", "target": "lib/tokens/control-size.ts" } ] }, { "name": "tailwind-merge-tokens", "type": "registry:lib", "title": "Tailwind Merge Tokens", "description": "Generated semantic token names used by the Zeron class merger.", "files": [ { "path": "packages/ui/src/system/tailwind-merge-tokens.ts", "type": "registry:lib", "target": "lib/tailwind-merge-tokens.ts" } ] }, { "name": "utils", "type": "registry:lib", "title": "Utilities", "description": "Utility function for merging Tailwind CSS classes with clsx and tailwind-merge.", "dependencies": [ "clsx", "tailwind-merge" ], "files": [ { "path": "packages/ui/src/system/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" } ], "registryDependencies": [ "tailwind-merge-tokens" ] }, { "name": "springs", "type": "registry:lib", "title": "Spring Animations", "description": "Spring animation token presets for Framer Motion (fast, moderate, slow).", "files": [ { "path": "packages/ui/src/system/springs.ts", "type": "registry:lib", "target": "lib/springs.ts" } ] }, { "name": "surface-context", "type": "registry:lib", "title": "Surface Context", "description": "React context that carries the current semantic substrate role through nested and portaled content.", "registryDependencies": [ "surface-classes" ], "files": [ { "path": "packages/ui/src/system/surface-context.tsx", "type": "registry:lib", "target": "lib/surface-context.tsx" } ] }, { "name": "portal-container-context", "type": "registry:lib", "title": "Portal Container Context", "description": "Ambient portal mount point for floating UI rendered inside native fullscreen or bounded regions.", "files": [ { "path": "packages/ui/src/system/portal-container-context.tsx", "type": "registry:lib", "target": "lib/portal-container-context.tsx" } ] }, { "name": "surface-classes", "type": "registry:lib", "title": "Surface Class Lookup", "description": "Typed semantic Surface and Shadow class maps with role-based nesting resolution.", "files": [ { "path": "packages/ui/src/system/surface-classes.ts", "type": "registry:lib", "target": "lib/surface-classes.ts" } ] }, { "name": "elevated", "type": "registry:lib", "title": "Elevated", "description": "Semantic elevation primitive that resolves a Surface role, applies an independent Shadow role, and re-provides the substrate to descendants.", "registryDependencies": [ "surfaces", "utils", "surface-context", "surface-classes" ], "files": [ { "path": "packages/ui/src/system/elevated.tsx", "type": "registry:lib", "target": "lib/elevated.tsx" } ] }, { "name": "icon-context", "type": "registry:lib", "title": "Icon Context", "description": "Named icon slots with a HugeIcons default set; swap any icon via IconProvider.", "dependencies": [ "@hugeicons/core-free-icons", "@hugeicons/react" ], "registryDependencies": [], "files": [ { "path": "packages/ui/src/system/icon-context.tsx", "type": "registry:lib", "target": "lib/icon-context.tsx" }, { "path": "packages/ui/src/system/huge-icon.tsx", "type": "registry:lib", "target": "lib/huge-icon.tsx" }, { "path": "packages/ui/src/system/icon-catalog.ts", "type": "registry:lib", "target": "lib/icon-catalog.ts" }, { "path": "packages/ui/src/system/hugeicons.d.ts", "type": "registry:lib", "target": "lib/hugeicons.d.ts" } ] }, { "name": "pro-icon-provider", "type": "registry:lib", "title": "HugeIcons Pro Variants", "description": "Optional HugeIcons Pro provider with Stroke Standard, Bulk Rounded, and Duotone Rounded variants. Requires a HugeIcons Pro license and private npm registry access.", "dependencies": [ "@hugeicons-pro/core-stroke-standard", "@hugeicons-pro/core-bulk-rounded", "@hugeicons-pro/core-duotone-rounded" ], "registryDependencies": [ "icon-context" ], "files": [ { "path": "packages/ui/src/system/pro-icon-provider.tsx", "type": "registry:lib", "target": "lib/pro-icon-provider.tsx" }, { "path": "packages/ui/src/system/icon-variants/stroke-standard.tsx", "type": "registry:lib", "target": "lib/icon-variants/stroke-standard.tsx" }, { "path": "packages/ui/src/system/icon-variants/bulk-rounded.tsx", "type": "registry:lib", "target": "lib/icon-variants/bulk-rounded.tsx" }, { "path": "packages/ui/src/system/icon-variants/duotone-rounded.tsx", "type": "registry:lib", "target": "lib/icon-variants/duotone-rounded.tsx" } ] }, { "name": "use-proximity-hover", "type": "registry:hook", "title": "useProximityHover", "description": "React hook for proximity-based hover detection. Tracks the closest item to the mouse cursor within a container, enabling smooth animated background indicators.", "files": [ { "path": "packages/ui/src/hooks/use-proximity-hover.ts", "type": "registry:hook", "target": "hooks/use-proximity-hover.ts" } ] }, { "name": "use-touch-primary", "type": "registry:hook", "title": "useTouchPrimary", "description": "Detects touch-primary devices (coarse pointer + touch points), updating live on pointer-mode and media-query changes. Adapted from Lina (https://lina.sameer.sh).", "files": [ { "path": "packages/ui/src/hooks/use-touch-primary.tsx", "type": "registry:hook", "target": "hooks/use-touch-primary.tsx" } ] }, { "name": "use-merge-split", "type": "registry:hook", "title": "useMergeSplitBlocks", "description": "React hook + renderer for the selected-background merge/split animation. When one row bridges or splits two contiguous selected runs, their inner edges glide together (or apart) and swap to a single block, instead of one block spring-growing over the union.", "dependencies": [ "framer-motion" ], "registryDependencies": [ "springs", "use-proximity-hover" ], "files": [ { "path": "packages/ui/src/hooks/use-merge-split.tsx", "type": "registry:hook", "target": "hooks/use-merge-split.tsx" } ] }, { "name": "compose-refs", "type": "registry:lib", "title": "Compose Refs", "description": "Small ref-composition helper shared by installable interactive components.", "files": [ { "path": "packages/ui/src/system/compose-refs.ts", "type": "registry:lib", "target": "lib/compose-refs.ts" } ] }, { "name": "accordion", "type": "registry:ui", "title": "Accordion (Base UI)", "description": "Collapsible accordion with animated height transitions, spring-animated chevron, and proximity hover in grouped mode. Base UI flavor.", "dependencies": [ "framer-motion", "@base-ui/react", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "springs", "icon-context", "use-proximity-hover" ], "files": [ { "path": "packages/ui/src/components/accordion.tsx", "type": "registry:ui", "target": "components/ui/accordion.tsx" } ] }, { "name": "alert", "type": "registry:ui", "title": "Alert", "description": "Composable in-context callout with default, neutral, info, warning, and danger statuses; optional icon, supporting description, and action.", "dependencies": [ "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils" ], "files": [ { "path": "packages/ui/src/components/alert.tsx", "type": "registry:ui", "target": "components/ui/alert.tsx" } ] }, { "name": "inline-notice", "type": "registry:ui", "title": "Inline Notice", "description": "Quiet inline emphasis container that composes with Badge by default, with an optional semantic emphasized variant and opt-in live-region semantics.", "registryDependencies": [ "surfaces", "utils", "badge" ], "files": [ { "path": "packages/ui/src/components/inline-notice.tsx", "type": "registry:ui", "target": "components/ui/inline-notice.tsx" } ], "dependencies": [ "tw-animate-css" ] }, { "name": "empty", "type": "registry:ui", "title": "Empty", "description": "Composable empty and zero-data states with page, section, and inline scopes; opt-in live-region semantics; custom media; and six theme-aware illustrations.", "registryDependencies": [ "surfaces", "utils" ], "files": [ { "path": "packages/ui/src/components/empty.tsx", "type": "registry:ui", "target": "components/ui/empty.tsx" } ], "dependencies": [ "tw-animate-css" ] }, { "name": "ask-user-questions", "type": "registry:ui", "title": "Ask User Questions", "description": "Stepped question flow with numbered options, keyboard shortcuts (1–9), single or multi-select, inline 'other' text input, optional skip, proximity-based hover, and multi-question navigation. Auto-advances on selection in single-select.", "dependencies": [ "framer-motion", "@base-ui/react", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "springs", "icon-context", "use-proximity-hover", "use-merge-split", "button" ], "files": [ { "path": "packages/ui/src/components/ask-user-questions.tsx", "type": "registry:ui", "target": "components/ui/ask-user-questions.tsx" } ] }, { "name": "avatar", "type": "registry:ui", "title": "Avatar", "description": "Circle and rounded image or fallback primitives for people, agents, and accounts, with status badges, three sizes, overlapping groups, and compact user details.", "dependencies": [ "@base-ui/react", "class-variance-authority", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils" ], "files": [ { "path": "packages/ui/src/components/avatar.tsx", "type": "registry:ui", "target": "components/ui/avatar.tsx" } ] }, { "name": "badge", "type": "registry:ui", "title": "Badge", "description": "Compact label with semantic statuses, strong fills, and named or custom categorical colors.", "dependencies": [ "class-variance-authority", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils" ], "files": [ { "path": "packages/ui/src/components/badge.tsx", "type": "registry:ui", "target": "components/ui/badge.tsx" }, { "path": "packages/ui/src/components/badge-colors.ts", "type": "registry:ui", "target": "components/ui/badge-colors.ts" } ] }, { "name": "badge-overflow", "type": "registry:ui", "title": "Badge Overflow", "description": "Responsive badge list that measures available space, wraps to a configurable line count, and replaces hidden items with an overflow count.", "dependencies": [ "@base-ui/react", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "popover", "select", "compose-refs" ], "files": [ { "path": "packages/ui/src/components/badge-overflow.tsx", "type": "registry:ui", "target": "components/ui/badge-overflow.tsx" } ] }, { "name": "breadcrumb", "type": "registry:ui", "title": "Breadcrumb", "description": "Composable breadcrumb navigation with links, current-page state, custom separators, ellipsis, responsive wrapping, and polymorphic link rendering.", "dependencies": [ "@base-ui/react", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "icon-context", "dropdown" ], "files": [ { "path": "packages/ui/src/components/breadcrumb.tsx", "type": "registry:ui", "target": "components/ui/breadcrumb.tsx" } ] }, { "name": "button", "type": "registry:ui", "title": "Button (Base UI)", "description": "Animated button with variants (primary, neutral, destructive, secondary, tertiary, ghost), icon support, and loading spinner. Base UI flavor.", "dependencies": [ "@base-ui/react", "class-variance-authority", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "icon-context", "control-size" ], "files": [ { "path": "packages/ui/src/components/button.tsx", "type": "registry:ui", "target": "components/ui/button.tsx" } ], "css": { "@keyframes spinner-move": { "to": { "stroke-dashoffset": "-100" } }, "@keyframes spinner-dash": { "0%, 100%": { "stroke-dasharray": "15 85" }, "50%": { "stroke-dasharray": "40 60" } } } }, { "name": "button-group", "type": "registry:ui", "title": "Button Group", "description": "Composable horizontal and vertical groups for connected actions, split buttons, icon toolbars, and contextual addons.", "dependencies": [ "class-variance-authority", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "button" ], "files": [ { "path": "packages/ui/src/components/button-group.tsx", "type": "registry:ui", "target": "components/ui/button-group.tsx" } ] }, { "name": "data-table", "type": "registry:ui", "title": "Data Table", "description": "Feature-rich TanStack data table with sorting, filters, pagination, selection, pinning, and accessible Skeleton loading and empty states.", "dependencies": [ "@tanstack/react-table", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "icon-context", "badge", "button", "checkbox", "checkbox-group", "dropdown", "empty", "input", "popover", "select", "sortable-collection", "table" ], "files": [ { "path": "packages/ui/src/components/data-table.tsx", "type": "registry:ui", "target": "components/ui/data-table.tsx" } ] }, { "name": "data-grid", "type": "registry:ui", "title": "Data Grid", "description": "Virtualized spreadsheet-style data grid with inline editors, range selection, copy and paste, search, sorting, resizing, and pinned columns.", "dependencies": [ "@base-ui/react", "@tanstack/react-table", "@tanstack/react-virtual", "cmdk", "react-day-picker", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "surface-context", "surface-classes", "portal-container-context", "badge", "button", "checkbox", "dialog", "dropdown", "input", "kbd", "separator", "skeleton", "select", "toast", "command", "compose-refs" ], "files": [ { "path": "packages/ui/src/components/data-grid/index.ts", "type": "registry:ui", "target": "components/ui/data-grid/index.ts" }, { "path": "packages/ui/src/components/data-grid/data-grid.tsx", "type": "registry:ui", "target": "components/ui/data-grid/data-grid.tsx" }, { "path": "packages/ui/src/components/data-grid/data-grid-row.tsx", "type": "registry:ui", "target": "components/ui/data-grid/data-grid-row.tsx" }, { "path": "packages/ui/src/components/data-grid/data-grid-cell.tsx", "type": "registry:ui", "target": "components/ui/data-grid/data-grid-cell.tsx" }, { "path": "packages/ui/src/components/data-grid/data-grid-cell-wrapper.tsx", "type": "registry:ui", "target": "components/ui/data-grid/data-grid-cell-wrapper.tsx" }, { "path": "packages/ui/src/components/data-grid/data-grid-cell-variants.tsx", "type": "registry:ui", "target": "components/ui/data-grid/data-grid-cell-variants.tsx" }, { "path": "packages/ui/src/components/data-grid/data-grid-column-header.tsx", "type": "registry:ui", "target": "components/ui/data-grid/data-grid-column-header.tsx" }, { "path": "packages/ui/src/components/data-grid/data-grid-context-menu.tsx", "type": "registry:ui", "target": "components/ui/data-grid/data-grid-context-menu.tsx" }, { "path": "packages/ui/src/components/data-grid/data-grid-keyboard-shortcuts.tsx", "type": "registry:ui", "target": "components/ui/data-grid/data-grid-keyboard-shortcuts.tsx" }, { "path": "packages/ui/src/components/data-grid/data-grid-paste-dialog.tsx", "type": "registry:ui", "target": "components/ui/data-grid/data-grid-paste-dialog.tsx" }, { "path": "packages/ui/src/components/data-grid/data-grid-search.tsx", "type": "registry:ui", "target": "components/ui/data-grid/data-grid-search.tsx" }, { "path": "packages/ui/src/components/data-grid/data-grid-calendar.tsx", "type": "registry:ui", "target": "components/ui/data-grid/data-grid-calendar.tsx" }, { "path": "packages/ui/src/components/data-grid/data-grid-tooltip.tsx", "type": "registry:ui", "target": "components/ui/data-grid/data-grid-tooltip.tsx" }, { "path": "packages/ui/src/components/data-grid/data-grid-popover.tsx", "type": "registry:ui", "target": "components/ui/data-grid/data-grid-popover.tsx" }, { "path": "packages/ui/src/components/data-grid/data-grid-primitives.tsx", "type": "registry:ui", "target": "components/ui/data-grid/data-grid-primitives.tsx" }, { "path": "packages/ui/src/hooks/use-data-grid.ts", "type": "registry:hook", "target": "hooks/use-data-grid.ts" }, { "path": "packages/ui/src/hooks/use-as-ref.ts", "type": "registry:hook", "target": "hooks/use-as-ref.ts" }, { "path": "packages/ui/src/hooks/use-badge-overflow.ts", "type": "registry:hook", "target": "hooks/use-badge-overflow.ts" }, { "path": "packages/ui/src/hooks/use-debounced-callback.ts", "type": "registry:hook", "target": "hooks/use-debounced-callback.ts" }, { "path": "packages/ui/src/hooks/use-callback-ref.ts", "type": "registry:hook", "target": "hooks/use-callback-ref.ts" }, { "path": "packages/ui/src/hooks/use-isomorphic-layout-effect.ts", "type": "registry:hook", "target": "hooks/use-isomorphic-layout-effect.ts" }, { "path": "packages/ui/src/hooks/use-lazy-ref.ts", "type": "registry:hook", "target": "hooks/use-lazy-ref.ts" }, { "path": "packages/ui/src/system/data-grid.ts", "type": "registry:lib", "target": "lib/data-grid.ts" }, { "path": "packages/ui/src/system/data-grid-types.ts", "type": "registry:lib", "target": "lib/data-grid-types.ts" }, { "path": "packages/ui/src/system/filter-types.ts", "type": "registry:lib", "target": "lib/filter-types.ts" } ] }, { "name": "calendar", "type": "registry:ui", "title": "Calendar", "description": "Theme-aware calendar primitive with single and range selection support.", "dependencies": [ "react-day-picker", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "icon-context", "button" ], "files": [ { "path": "packages/ui/src/components/calendar.tsx", "type": "registry:ui", "target": "components/ui/calendar.tsx" }, { "path": "packages/ui/src/components/data-grid/data-grid-calendar.tsx", "type": "registry:ui", "target": "components/ui/data-grid/data-grid-calendar.tsx" } ] }, { "name": "command", "type": "registry:ui", "title": "Command", "description": "cmdk-based command primitives with a replaceable input slot for searchable menus and structured query controls.", "dependencies": [ "cmdk", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "icon-context", "dialog" ], "files": [ { "path": "packages/ui/src/components/command.tsx", "type": "registry:ui", "target": "components/ui/command.tsx" } ] }, { "name": "filter-core", "type": "registry:lib", "title": "Filter Core", "description": "Headless, JSON-safe filter vocabulary shared by visual and text-query filter controls.", "dependencies": [ "date-fns" ], "registryDependencies": [ "icon-context" ], "files": [ { "path": "packages/ui/src/system/filter-types.ts", "type": "registry:lib", "target": "lib/filter-types.ts" }, { "path": "packages/ui/src/system/filter-core.ts", "type": "registry:lib", "target": "lib/filter-core.ts" } ] }, { "name": "filter-builder", "type": "registry:ui", "title": "FilterBuilder", "description": "Composable typed filters for complex data views, with text, number, option, boolean, date, async, and custom editors.", "dependencies": [ "@tanstack/react-virtual", "date-fns", "react-day-picker", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "icon-context", "button", "button-group", "calendar", "input", "popover", "filter-core", "temporal-picker" ], "files": [ { "path": "packages/ui/src/components/filter-builder/index.ts", "type": "registry:ui", "target": "components/ui/filter-builder/index.ts" }, { "path": "packages/ui/src/components/filter-builder/filter-builder.tsx", "type": "registry:ui", "target": "components/ui/filter-builder/filter-builder.tsx" }, { "path": "packages/ui/src/components/filter-builder/filter-clause.tsx", "type": "registry:ui", "target": "components/ui/filter-builder/filter-clause.tsx" }, { "path": "packages/ui/src/components/filter-builder/filter-field-menu.tsx", "type": "registry:ui", "target": "components/ui/filter-builder/filter-field-menu.tsx" }, { "path": "packages/ui/src/components/filter-builder/filter-operator-menu.tsx", "type": "registry:ui", "target": "components/ui/filter-builder/filter-operator-menu.tsx" }, { "path": "packages/ui/src/components/filter-builder/filter-option-list.tsx", "type": "registry:ui", "target": "components/ui/filter-builder/filter-option-list.tsx" }, { "path": "packages/ui/src/components/filter-builder/filter-types.ts", "type": "registry:ui", "target": "components/ui/filter-builder/filter-types.ts" }, { "path": "packages/ui/src/components/filter-builder/filter-utils.ts", "type": "registry:ui", "target": "components/ui/filter-builder/filter-utils.ts" }, { "path": "packages/ui/src/components/filter-builder/filter-value-editor.tsx", "type": "registry:ui", "target": "components/ui/filter-builder/filter-value-editor.tsx" }, { "path": "packages/ui/src/system/filter-types.ts", "type": "registry:lib", "target": "lib/filter-types.ts" } ] }, { "name": "filter-query-core", "type": "registry:ui", "title": "Filter Query Core", "description": "Headless parser, serializer, reconciliation logic, and state hook for reusable structured filter text inputs.", "registryDependencies": [ "surfaces", "filter-core" ], "files": [ { "path": "packages/ui/src/components/filter-query-core/index.ts", "type": "registry:ui", "target": "components/ui/filter-query-core/index.ts" }, { "path": "packages/ui/src/components/filter-query-core/filter-query-types.ts", "type": "registry:ui", "target": "components/ui/filter-query-core/filter-query-types.ts" }, { "path": "packages/ui/src/components/filter-query-core/filter-query-codec.ts", "type": "registry:ui", "target": "components/ui/filter-query-core/filter-query-codec.ts" }, { "path": "packages/ui/src/components/filter-query-core/filter-query-parser.ts", "type": "registry:ui", "target": "components/ui/filter-query-core/filter-query-parser.ts" }, { "path": "packages/ui/src/components/filter-query-core/filter-query-reconcile.ts", "type": "registry:ui", "target": "components/ui/filter-query-core/filter-query-reconcile.ts" }, { "path": "packages/ui/src/components/filter-query-core/use-filter-query-input.ts", "type": "registry:ui", "target": "components/ui/filter-query-core/use-filter-query-input.ts" } ], "dependencies": [ "tw-animate-css" ] }, { "name": "filter-query-input", "type": "registry:ui", "title": "Filter Query Input", "description": "cmdk-powered structured filter input with replaceable fields, aliases, free-text mapping, history, and controllable commit behavior.", "registryDependencies": [ "surfaces", "filter-query-core", "command", "input-group", "kbd", "popover", "control-size", "utils", "icon-context" ], "files": [ { "path": "packages/ui/src/components/filter-query-input/index.ts", "type": "registry:ui", "target": "components/ui/filter-query-input/index.ts" }, { "path": "packages/ui/src/components/filter-query-input/filter-query-input.tsx", "type": "registry:ui", "target": "components/ui/filter-query-input/filter-query-input.tsx" }, { "path": "packages/ui/src/components/filter-query-input/filter-query-history.ts", "type": "registry:ui", "target": "components/ui/filter-query-input/filter-query-history.ts" }, { "path": "packages/ui/src/components/filter-query-input/filter-query-slots.tsx", "type": "registry:ui", "target": "components/ui/filter-query-input/filter-query-slots.tsx" } ], "dependencies": [ "tw-animate-css" ] }, { "name": "menu-item", "type": "registry:ui", "title": "MenuItem", "description": "Accessible menu row primitive with icon, selection, and keyboard-menu integration.", "dependencies": [ "framer-motion", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "springs", "icon-context", "tooltip" ], "files": [ { "path": "packages/ui/src/components/menu-item.tsx", "type": "registry:ui", "target": "components/ui/menu-item.tsx" } ] }, { "name": "dropdown", "type": "registry:ui", "title": "Dropdown", "description": "Dropdown menu with proximity hover, animated selection indicator, inline panel or triggered popup with collision-aware positioning, typeahead, and close-on-select. Includes MenuItem. Base UI flavor.", "dependencies": [ "@base-ui/react", "framer-motion", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "springs", "surface-context", "surface-classes", "icon-context", "use-proximity-hover", "elevated", "portal-container-context" ], "files": [ { "path": "packages/ui/src/components/dropdown.tsx", "type": "registry:ui", "target": "components/ui/dropdown.tsx" }, { "path": "packages/ui/src/components/menu-item.tsx", "type": "registry:ui", "target": "components/ui/menu-item.tsx" } ] }, { "name": "checkbox", "type": "registry:ui", "title": "Checkbox (Base UI)", "description": "Compact animated checkbox with checked, indeterminate, disabled, validation, and form states. Base UI flavor.", "dependencies": [ "@base-ui/react", "framer-motion", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils" ], "files": [ { "path": "packages/ui/src/components/checkbox.tsx", "type": "registry:ui", "target": "components/ui/checkbox.tsx" } ] }, { "name": "checkbox-group", "type": "registry:ui", "title": "Checkbox Group (Base UI)", "description": "Animated checkbox group with proximity hover, contiguous selection merging, and spring-animated check marks. Base UI flavor.", "dependencies": [ "framer-motion", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "springs", "icon-context", "checkbox", "use-proximity-hover", "use-merge-split" ], "files": [ { "path": "packages/ui/src/components/checkbox-group.tsx", "type": "registry:ui", "target": "components/ui/checkbox-group.tsx" } ] }, { "name": "popover", "type": "registry:ui", "title": "Popover (Base UI)", "description": "Accessible collision-aware popover with click or hover triggers, semantic floating surfaces, and an optional liquid anchor-to-panel transition.", "dependencies": [ "@base-ui/react", "framer-motion", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "springs", "surface-context", "surface-classes", "portal-container-context" ], "files": [ { "path": "packages/ui/src/components/popover.tsx", "type": "registry:ui", "target": "components/ui/popover.tsx" } ] }, { "name": "radio-group", "type": "registry:ui", "title": "Radio Group (Base UI)", "description": "Composable radio group with an atomic RadioGroupItem, form support, and enhanced proximity-hover RadioItem rows. Base UI flavor.", "dependencies": [ "framer-motion", "@base-ui/react", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "springs", "use-proximity-hover" ], "files": [ { "path": "packages/ui/src/components/radio-group.tsx", "type": "registry:ui", "target": "components/ui/radio-group.tsx" } ] }, { "name": "dialog", "type": "registry:ui", "title": "Dialog (Base UI)", "description": "Animated modal dialog with spring-based scale and opacity transitions. Base UI flavor.", "dependencies": [ "framer-motion", "@base-ui/react", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "springs", "surface-context", "surface-classes", "icon-context", "button", "portal-container-context" ], "files": [ { "path": "packages/ui/src/components/dialog.tsx", "type": "registry:ui", "target": "components/ui/dialog.tsx" } ] }, { "name": "mobile-drawer", "type": "registry:ui", "title": "Mobile Drawer", "description": "Slide-in navigation drawer with scrim, focus trap, and scroll lock. Base UI flavor.", "dependencies": [ "@base-ui/react", "framer-motion", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "springs", "surface-context", "surface-classes", "portal-container-context" ], "files": [ { "path": "packages/ui/src/components/mobile-drawer.tsx", "type": "registry:ui", "target": "components/ui/mobile-drawer.tsx" } ] }, { "name": "field", "type": "registry:ui", "title": "Field", "description": "Accessible field and fieldset composition for labels, descriptions, errors, controls, and grouped options.", "dependencies": [ "@base-ui/react", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils" ], "files": [ { "path": "packages/ui/src/components/field.tsx", "type": "registry:ui", "target": "components/ui/field.tsx" } ] }, { "name": "input", "type": "registry:ui", "title": "Input", "description": "Text input with outline, secondary, and ghost variants, five sizes, and accessible focus, validation, disabled, and file states.", "dependencies": [ "@base-ui/react", "class-variance-authority", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "control-size" ], "files": [ { "path": "packages/ui/src/components/input.tsx", "type": "registry:ui", "target": "components/ui/input.tsx" } ] }, { "name": "textarea", "type": "registry:ui", "title": "Textarea", "description": "Field-aware multiline text input with semantic variants, accessible validation, and resizable sizing.", "dependencies": [ "@base-ui/react", "class-variance-authority", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils" ], "files": [ { "path": "packages/ui/src/components/textarea.tsx", "type": "registry:ui", "target": "components/ui/textarea.tsx" } ] }, { "name": "kbd", "type": "registry:ui", "title": "Kbd", "description": "Compact keycaps and shortcut groups for keyboard commands and interaction hints.", "registryDependencies": [ "surfaces", "utils" ], "files": [ { "path": "packages/ui/src/components/kbd.tsx", "type": "registry:ui", "target": "components/ui/kbd.tsx" } ], "dependencies": [ "tw-animate-css" ] }, { "name": "input-copy", "type": "registry:ui", "title": "Input Copy", "description": "Read-only input with a copy-to-clipboard button and animated check feedback. Supports optional label and shape context.", "dependencies": [ "framer-motion", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "springs", "icon-context", "tooltip" ], "files": [ { "path": "packages/ui/src/components/input-copy.tsx", "type": "registry:ui", "target": "components/ui/input-copy.tsx" } ] }, { "name": "input-group", "type": "registry:ui", "title": "Input Group", "description": "Composable input surface with inline or stacked addons, compact actions, text inputs, textareas, and validation states. Includes the legacy InputFieldGroup for multi-field forms.", "dependencies": [ "@base-ui/react", "class-variance-authority", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "icon-context", "use-proximity-hover", "button", "input", "control-size" ], "files": [ { "path": "packages/ui/src/components/input-group.tsx", "type": "registry:ui", "target": "components/ui/input-group.tsx" } ] }, { "name": "info-item", "type": "registry:ui", "title": "Info Item", "description": "Composable information row with an icon, title, supporting description, and a flexible trailing value, status, control, or compact detail.", "registryDependencies": [ "surfaces", "utils", "springs" ], "files": [ { "path": "packages/ui/src/components/info-item.tsx", "type": "registry:ui", "target": "components/ui/info-item.tsx" } ], "dependencies": [ "tw-animate-css" ] }, { "name": "detail-list", "type": "registry:ui", "title": "Detail List", "description": "A framed, composable label-value list with grouped sections and separators for compact resource and entity details.", "registryDependencies": [ "surfaces", "utils" ], "files": [ { "path": "packages/ui/src/components/detail-list.tsx", "type": "registry:ui", "target": "components/ui/detail-list.tsx" } ], "dependencies": [ "tw-animate-css" ] }, { "name": "metric-card", "type": "registry:ui", "title": "Metric Card", "description": "Self-sizing single-metric card with optional breakdown, accessible trend visualization, data states, and whole-card interaction.", "registryDependencies": [ "surfaces", "skeleton", "utils" ], "files": [ { "path": "packages/ui/src/components/metric-card.tsx", "type": "registry:ui", "target": "components/ui/metric-card.tsx" } ], "dependencies": [ "tw-animate-css" ] }, { "name": "status-overview", "type": "registry:ui", "title": "Status Overview", "description": "Inspectable timeline and node-status rail with semantic states, a shared tooltip, and keyboard navigation.", "registryDependencies": [ "surfaces", "skeleton", "tooltip", "utils" ], "files": [ { "path": "packages/ui/src/components/status-overview.tsx", "type": "registry:ui", "target": "components/ui/status-overview.tsx" } ], "dependencies": [ "tw-animate-css" ] }, { "name": "input-message", "type": "registry:ui", "title": "Input Message", "description": "Chat-style message composer with auto-resizing textarea, drag-and-drop file attachments (PNG / JPEG / PDF), flexible left/right action slots, and a built-in send button on a Surface-2 substrate.", "dependencies": [ "framer-motion", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "springs", "icon-context", "surface-context", "surface-classes", "file-thumbnail", "button", "tooltip", "container" ], "files": [ { "path": "packages/ui/src/components/input-message.tsx", "type": "registry:ui", "target": "components/ui/input-message.tsx" } ] }, { "name": "file-thumbnail", "type": "registry:ui", "title": "File Thumbnail", "description": "Read-only square preview of a File. Images render via object-cover; PDFs render their first page via pdfjs; a spinner shows while either resolves. Adapts its corner radius to the global shape setting.", "dependencies": [ "pdfjs-dist", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "springs" ], "files": [ { "path": "packages/ui/src/components/file-thumbnail.tsx", "type": "registry:ui", "target": "components/ui/file-thumbnail.tsx" } ] }, { "name": "chat-message", "type": "registry:ui", "title": "Chat Message", "description": "A single chat transcript entry with baked-in entrance and layout motion. Right-aligned accent bubble for the user, left-aligned muted bubble for the assistant, with optional file attachments. Adapts to the global shape setting.", "dependencies": [ "framer-motion", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "springs", "use-touch-primary", "file-thumbnail" ], "files": [ { "path": "packages/ui/src/components/chat-message.tsx", "type": "registry:ui", "target": "components/ui/chat-message.tsx" } ] }, { "name": "tabs-subtle", "type": "registry:ui", "title": "TabsSubtle (legacy)", "description": "Compatibility adapter for Tabs' segment variant. New integrations should use Tabs with variant=\"segment\".", "dependencies": [ "@base-ui/react", "framer-motion", "tw-animate-css" ], "registryDependencies": [ "surfaces", "tabs", "utils", "springs", "icon-context", "use-proximity-hover" ], "files": [ { "path": "packages/ui/src/components/tabs-subtle.tsx", "type": "registry:ui", "target": "components/ui/tabs-subtle.tsx" } ] }, { "name": "switch", "type": "registry:ui", "title": "Switch (Base UI)", "description": "Animated toggle switch with spring-based thumb animation. Base UI flavor.", "dependencies": [ "framer-motion", "@base-ui/react", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "springs" ], "files": [ { "path": "packages/ui/src/components/switch.tsx", "type": "registry:ui", "target": "components/ui/switch.tsx" } ] }, { "name": "table", "type": "registry:ui", "title": "Table", "description": "Animated semantic table primitives with proximity row hover and a composable Skeleton loading body.", "dependencies": [ "framer-motion", "tw-animate-css" ], "registryDependencies": [ "surfaces", "skeleton", "utils", "springs", "use-proximity-hover" ], "files": [ { "path": "packages/ui/src/components/table.tsx", "type": "registry:ui", "target": "components/ui/table.tsx" } ] }, { "name": "card", "type": "registry:ui", "title": "Card", "description": "shadcn's compositional card (Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter) with the Zeron Design layer: transparent substrate, weight-animated title, media/logo/feature/image slots, and a CardGroup that owns stacked, inline, and grid layouts plus 2-D proximity-hover highlighting.", "dependencies": [ "framer-motion", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "springs", "icon-context", "use-proximity-hover" ], "files": [ { "path": "packages/ui/src/components/card.tsx", "type": "registry:ui", "target": "components/ui/card.tsx" } ] }, { "name": "slider", "type": "registry:ui", "title": "Slider (Base UI)", "description": "Animated slider with spring-snapped thumb, step dots, range mode, and click-to-edit value display. Base UI flavor.", "dependencies": [ "framer-motion", "@base-ui/react", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "springs" ], "files": [ { "path": "packages/ui/src/components/slider.tsx", "type": "registry:ui", "target": "components/ui/slider.tsx" } ] }, { "name": "sortable-collection", "type": "registry:ui", "title": "SortableCollection", "description": "Controlled reorderable list with drag preview, keyboard sorting, optional inline editing, removal, and catalog-based adding.", "dependencies": [ "@hugeicons/core-free-icons", "@hugeicons/react", "framer-motion", "tw-animate-css" ], "registryDependencies": [ "surfaces", "button", "input", "popover", "utils" ], "files": [ { "path": "packages/ui/src/components/sortable-collection.tsx", "type": "registry:ui", "target": "components/ui/sortable-collection.tsx" } ] }, { "name": "stepper", "type": "registry:ui", "title": "Stepper (Base UI)", "description": "Accessible multi-step navigation with controlled and uncontrolled state, horizontal and vertical layouts, keyboard navigation, async validation, completion states, and previous/next controls.", "dependencies": [ "@base-ui/react", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "icon-context" ], "files": [ { "path": "packages/ui/src/components/stepper.tsx", "type": "registry:ui", "target": "components/ui/stepper.tsx" }, { "path": "packages/ui/src/hooks/use-as-ref.ts", "type": "registry:hook", "target": "hooks/use-as-ref.ts" }, { "path": "packages/ui/src/hooks/use-isomorphic-layout-effect.ts", "type": "registry:hook", "target": "hooks/use-isomorphic-layout-effect.ts" }, { "path": "packages/ui/src/hooks/use-lazy-ref.ts", "type": "registry:hook", "target": "hooks/use-lazy-ref.ts" }, { "path": "packages/ui/src/system/compose-refs.ts", "type": "registry:lib", "target": "lib/compose-refs.ts" } ] }, { "name": "tabs", "type": "registry:ui", "title": "Tabs (Base UI)", "description": "Pill, segment, and underline tab navigation with animated selection indicators, proximity hover, and spring animations. Base UI flavor.", "dependencies": [ "framer-motion", "@base-ui/react", "tw-animate-css" ], "registryDependencies": [ "surfaces", "badge", "utils", "springs", "icon-context", "use-proximity-hover" ], "files": [ { "path": "packages/ui/src/components/tabs.tsx", "type": "registry:ui", "target": "components/ui/tabs.tsx" } ] }, { "name": "thinking-indicator", "type": "registry:ui", "title": "Thinking Indicator", "description": "Animated loading indicator with morphing SVG path (circle to infinity loop) and shimmer text rotation. Cycles through customizable status words.", "dependencies": [ "framer-motion", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "springs" ], "files": [ { "path": "packages/ui/src/components/thinking-indicator.tsx", "type": "registry:ui", "target": "components/ui/thinking-indicator.tsx" } ], "css": { "@keyframes shimmer": { "0%": { "background-position": "0% 0" }, "100%": { "background-position": "100% 0" } }, ".shimmer-text": { "color": "transparent", "background": "linear-gradient(90deg, #a3a3a3 0%, #a3a3a3 35%, #525252 50%, #a3a3a3 65%, #a3a3a3 100%)", "background-size": "300% 100%", "background-clip": "text", "-webkit-background-clip": "text", "animation": "shimmer 1.5s ease-in-out infinite" } } }, { "name": "scroll-area", "type": "registry:ui", "title": "Scroll Area (Base UI)", "description": "Scroll container with a restyled overlay scrollbar that stays discoverable on hover and follows the shape system. Falls back to native overflow scrolling on touch-primary devices. Base UI flavor; adapted from Lina (https://lina.sameer.sh).", "dependencies": [ "@base-ui/react", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "use-touch-primary" ], "files": [ { "path": "packages/ui/src/components/scroll-area.tsx", "target": "components/ui/scroll-area.tsx", "type": "registry:ui" } ] }, { "name": "resizable", "type": "registry:ui", "title": "Resizable", "description": "Accessible, keyboard-operable resizable panels powered by react-resizable-panels.", "dependencies": [ "react-resizable-panels", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils" ], "files": [ { "path": "packages/ui/src/components/resizable.tsx", "target": "components/ui/resizable.tsx", "type": "registry:ui" } ] }, { "name": "separator", "type": "registry:ui", "title": "Separator (Base UI)", "description": "Accessible horizontal or vertical separator with an 8px layout gutter and semantic border color. Base UI flavor.", "dependencies": [ "@base-ui/react", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils" ], "files": [ { "path": "packages/ui/src/components/separator.tsx", "target": "components/ui/separator.tsx", "type": "registry:ui" } ] }, { "name": "skeleton", "type": "registry:ui", "title": "Skeleton", "description": "Token-native decorative loading placeholder with composable dimensions, semantic color, and reduced-motion support.", "dependencies": [ "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils" ], "files": [ { "path": "packages/ui/src/components/skeleton.tsx", "target": "components/ui/skeleton.tsx", "type": "registry:ui" } ] }, { "name": "combobox", "type": "registry:ui", "title": "Combobox", "description": "Filterable single- or multi-select with object values, grouped collections, chips, custom triggers, form support, and collision-aware positioning. Base UI flavor.", "dependencies": [ "@base-ui/react", "class-variance-authority", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "button", "input-group", "elevated", "icon-context", "portal-container-context", "control-size" ], "files": [ { "path": "packages/ui/src/components/combobox.tsx", "type": "registry:ui", "target": "components/ui/combobox.tsx" } ] }, { "name": "select", "type": "registry:ui", "title": "Select", "description": "Animated select menu with collision-aware positioning, typeahead, proximity hover, spring-animated popover, and animated checkmark. Base UI flavor.", "dependencies": [ "@base-ui/react", "framer-motion", "class-variance-authority", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "springs", "surface-context", "surface-classes", "icon-context", "use-proximity-hover", "elevated", "portal-container-context", "control-size" ], "files": [ { "path": "packages/ui/src/components/select.tsx", "type": "registry:ui", "target": "components/ui/select.tsx" } ] }, { "name": "toast", "type": "registry:ui", "title": "Toast", "description": "Animated notification stack with semantic statuses, automatic dismissal, actions, drag-to-dismiss gestures, and an imperative toast API.", "dependencies": [ "framer-motion", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "springs", "icon-context", "surface-context", "surface-classes", "portal-container-context", "button" ], "files": [ { "path": "packages/ui/src/components/toast.tsx", "target": "components/ui/toast.tsx", "type": "registry:ui" } ] }, { "name": "tooltip", "type": "registry:ui", "title": "Tooltip (Base UI)", "description": "Floating tooltip with spring-based animations, configurable placement, and rich content support. Base UI flavor.", "dependencies": [ "framer-motion", "@base-ui/react", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "springs", "portal-container-context" ], "files": [ { "path": "packages/ui/src/components/tooltip.tsx", "target": "components/ui/tooltip.tsx", "type": "registry:ui" } ] }, { "name": "thinking-steps", "type": "registry:ui", "title": "Thinking Steps", "description": "Collapsible AI reasoning steps with animated expand/collapse, per-step icons, sources, and nested details. Base UI flavor.", "dependencies": [ "@base-ui/react", "framer-motion", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "springs", "icon-context", "badge" ], "files": [ { "path": "packages/ui/src/components/thinking-steps.tsx", "type": "registry:ui", "target": "components/ui/thinking-steps.tsx" } ], "css": { "@keyframes shimmer": { "0%": { "background-position": "0% 0" }, "100%": { "background-position": "100% 0" } }, ".shimmer-text": { "color": "transparent", "background": "linear-gradient(90deg, #a3a3a3 0%, #a3a3a3 35%, #525252 50%, #a3a3a3 65%, #a3a3a3 100%)", "background-size": "300% 100%", "background-clip": "text", "-webkit-background-clip": "text", "animation": "shimmer 1.5s ease-in-out infinite" } } }, { "name": "color-picker", "type": "registry:ui", "title": "Color Picker", "description": "Color picker with HEX, RGB, HSL, and OKLCH formats, alpha channel, optional swatches, and a popover trigger. Built on Base UI's Popover, Menu, and NumberField primitives with native EyeDropper support.", "dependencies": [ "@base-ui/react", "framer-motion", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "springs", "surface-context", "surface-classes", "icon-context", "use-proximity-hover", "elevated", "slider", "portal-container-context", "tooltip" ], "files": [ { "path": "packages/ui/src/components/color-picker.tsx", "type": "registry:ui", "target": "components/ui/color-picker.tsx" } ] }, { "name": "app-shell", "type": "registry:ui", "title": "App Shell", "description": "Composable application frame for sidebar, header, and main content.", "registryDependencies": [ "surfaces", "utils" ], "files": [ { "path": "packages/ui/src/components/app-shell.tsx", "type": "registry:ui", "target": "components/ui/app-shell.tsx" } ], "dependencies": [ "tw-animate-css" ] }, { "name": "auth-layout", "type": "registry:ui", "title": "Auth Layout", "description": "Composable full-height layout for centered authentication flows.", "dependencies": [ "class-variance-authority", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils" ], "files": [ { "path": "packages/ui/src/components/auth-layout.tsx", "type": "registry:ui", "target": "components/ui/auth-layout.tsx" } ] }, { "name": "page-layout", "type": "registry:ui", "title": "Page Layout", "description": "Responsive page header, body, action, and primary-with-aside composition.", "dependencies": [ "class-variance-authority", "tw-animate-css" ], "registryDependencies": [ "surfaces", "nav-item", "nav-menu", "utils", "icon-context", "button" ], "files": [ { "path": "packages/ui/src/components/page-layout.tsx", "type": "registry:ui", "target": "components/ui/page-layout.tsx" } ] }, { "name": "resource-detail-layout", "type": "registry:ui", "title": "Resource Detail Layout", "description": "Full-width resource detail preset with record navigation, summary actions, tabs, and a responsive primary-with-aside body.", "registryDependencies": [ "surfaces", "page-layout" ], "files": [ { "path": "packages/ui/src/components/resource-detail-layout.tsx", "type": "registry:ui", "target": "components/ui/resource-detail-layout.tsx" } ], "dependencies": [ "tw-animate-css" ] }, { "name": "container", "type": "registry:ui", "title": "Container", "description": "Composable raised container with optional header and footer around a floating content body.", "dependencies": [ "tw-animate-css" ], "registryDependencies": [ "surfaces", "surface-context", "utils" ], "files": [ { "path": "packages/ui/src/components/container.tsx", "type": "registry:ui", "target": "components/ui/container.tsx" } ] }, { "name": "nav-menu", "type": "registry:ui", "title": "Nav Menu", "description": "Router-agnostic navigation menu with active, hover, focus, and keyboard behavior.", "dependencies": [ "framer-motion", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "springs", "use-proximity-hover" ], "files": [ { "path": "packages/ui/src/components/nav-menu.tsx", "type": "registry:ui", "target": "components/ui/nav-menu.tsx" } ] }, { "name": "nav-item", "type": "registry:ui", "title": "Nav Item", "description": "Composable navigation item that supports router links, labels, badges, actions, and sub-navigation.", "dependencies": [ "@base-ui/react", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "tooltip", "nav-menu", "icon-context", "button" ], "files": [ { "path": "packages/ui/src/components/nav-item.tsx", "type": "registry:ui", "target": "components/ui/nav-item.tsx" } ] }, { "name": "sidebar", "type": "registry:ui", "title": "Sidebar", "description": "Responsive sidebar with desktop collapse modes, persistence, shortcut support, and mobile drawer behavior.", "dependencies": [ "@base-ui/react", "framer-motion", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "springs", "surface-context", "surface-classes", "icon-context", "button", "scroll-area", "mobile-drawer", "popover" ], "files": [ { "path": "packages/ui/src/components/sidebar.tsx", "type": "registry:ui", "target": "components/ui/sidebar.tsx" } ] }, { "name": "sidebar-account-menu", "type": "registry:ui", "title": "Sidebar Account Menu", "description": "Account switcher and action menu for the sidebar footer.", "dependencies": [ "@base-ui/react", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "elevated", "icon-context", "dropdown", "sidebar-identity-row" ], "files": [ { "path": "packages/ui/src/components/sidebar-account-menu.tsx", "type": "registry:ui", "target": "components/ui/sidebar-account-menu.tsx" } ] }, { "name": "sidebar-identity-row", "type": "registry:ui", "title": "Sidebar Identity Row", "description": "Composable sidebar identity row with avatar, primary and secondary text, and trailing content.", "registryDependencies": [ "surfaces", "utils", "button" ], "files": [ { "path": "packages/ui/src/components/sidebar-identity-row.tsx", "type": "registry:ui", "target": "components/ui/sidebar-identity-row.tsx" } ], "dependencies": [ "tw-animate-css" ] }, { "name": "chart", "type": "registry:ui", "title": "Chart", "description": "Composable Recharts container, tooltip, and color configuration following the shadcn chart API.", "dependencies": [ "recharts", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils" ], "files": [ { "path": "packages/ui/src/components/chart.tsx", "type": "registry:ui", "target": "components/ui/chart.tsx" } ] }, { "name": "time-range-histogram", "type": "registry:ui", "title": "Time Range Histogram", "description": "Controlled stacked histogram with pointer and keyboard time-range selection over ordered buckets.", "dependencies": [ "recharts", "tw-animate-css" ], "registryDependencies": [ "surfaces", "chart", "utils" ], "files": [ { "path": "packages/ui/src/components/time-range-histogram.tsx", "type": "registry:ui", "target": "components/ui/time-range-histogram.tsx" } ] }, { "name": "temporal-picker", "type": "registry:ui", "title": "Temporal Picker", "description": "Typed date, time, and date-time pickers with draft Apply flows, relative presets, IANA time zones, and DST-safe instant conversion.", "dependencies": [ "@base-ui/react", "date-fns", "framer-motion", "react-day-picker", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "button", "calendar", "input-group", "popover", "mobile-drawer", "icon-context", "use-touch-primary", "compose-refs", "scroll-area" ], "files": [ { "path": "packages/ui/src/components/temporal-picker/index.ts", "type": "registry:ui", "target": "components/ui/temporal-picker/index.ts" }, { "path": "packages/ui/src/components/temporal-picker/temporal-types.ts", "type": "registry:ui", "target": "components/ui/temporal-picker/temporal-types.ts" }, { "path": "packages/ui/src/components/temporal-picker/temporal-utils.ts", "type": "registry:ui", "target": "components/ui/temporal-picker/temporal-utils.ts" }, { "path": "packages/ui/src/components/temporal-picker/temporal-presets.ts", "type": "registry:ui", "target": "components/ui/temporal-picker/temporal-presets.ts" }, { "path": "packages/ui/src/components/temporal-picker/use-temporal-picker-state.ts", "type": "registry:ui", "target": "components/ui/temporal-picker/use-temporal-picker-state.ts" }, { "path": "packages/ui/src/components/temporal-picker/temporal-picker-shell.tsx", "type": "registry:ui", "target": "components/ui/temporal-picker/temporal-picker-shell.tsx" }, { "path": "packages/ui/src/components/temporal-picker/time-field.tsx", "type": "registry:ui", "target": "components/ui/temporal-picker/time-field.tsx" }, { "path": "packages/ui/src/components/temporal-picker/date-and-time-pickers.tsx", "type": "registry:ui", "target": "components/ui/temporal-picker/date-and-time-pickers.tsx" }, { "path": "packages/ui/src/components/temporal-picker/date-time-pickers.tsx", "type": "registry:ui", "target": "components/ui/temporal-picker/date-time-pickers.tsx" } ] }, { "name": "tree", "type": "registry:ui", "title": "Tree", "description": "Accessible hierarchical display with controlled expansion, single or multiple selection, cascade checkboxes, search filtering, and keyboard navigation.", "dependencies": [ "tw-animate-css", "framer-motion" ], "registryDependencies": [ "surfaces", "button", "utils", "icon-context", "springs" ], "files": [ { "path": "packages/ui/src/components/tree/index.ts", "type": "registry:ui", "target": "components/ui/tree/index.ts" }, { "path": "packages/ui/src/components/tree/tree.tsx", "type": "registry:ui", "target": "components/ui/tree/tree.tsx" }, { "path": "packages/ui/src/components/tree/tree-types.ts", "type": "registry:ui", "target": "components/ui/tree/tree-types.ts" }, { "path": "packages/ui/src/components/tree/tree-model.ts", "type": "registry:ui", "target": "components/ui/tree/tree-model.ts" }, { "path": "packages/ui/src/components/tree/tree-selection.ts", "type": "registry:ui", "target": "components/ui/tree/tree-selection.ts" } ] }, { "name": "member-tree", "type": "registry:ui", "title": "Member Tree", "description": "Organization-focused Tree with department and member rendering, typed selection, and member-only cascade selection.", "registryDependencies": [ "surfaces", "tree", "icon-context" ], "files": [ { "path": "packages/ui/src/components/member-tree.tsx", "type": "registry:ui", "target": "components/ui/member-tree.tsx" } ], "dependencies": [ "tw-animate-css" ] }, { "name": "file-tree", "type": "registry:ui", "title": "File Tree", "description": "File and folder Tree with file-type icons, file-extension restrictions, and file-only cascade selection.", "registryDependencies": [ "surfaces", "tree", "icon-context" ], "files": [ { "path": "packages/ui/src/components/file-tree.tsx", "type": "registry:ui", "target": "components/ui/file-tree.tsx" } ], "dependencies": [ "tw-animate-css" ] }, { "name": "top-nav", "type": "registry:ui", "title": "Top Nav", "description": "Composable top navigation surface for brand, primary links, and actions.", "dependencies": [ "class-variance-authority", "tw-animate-css" ], "registryDependencies": [ "surfaces", "utils", "icon-context", "nav-item", "popover", "surface-context", "surface-classes" ], "files": [ { "path": "packages/ui/src/components/top-nav.tsx", "type": "registry:ui", "target": "components/ui/top-nav.tsx" } ] } ] }