{ "families": [ { "name": "badge", "recipes": [ { "description": "Badge shell — shape, sizing, focus ring. No bg/text/border color so\n variants can supply their own tone without conflicts.", "expansion": [ "inline-flex", "items-center", "rounded-full", "border", "px-2.5", "py-0.5", "text-xs", "font-medium", "transition-colors", "focus:outline-none", "focus:ring-2", "focus:ring-ring", "focus:ring-offset-2" ], "name": "badge-base" }, { "description": "Default badge — tone-aware. Reads --tone-bg/--tone-fg (set via data-tone),\n falling back to the neutral muted tokens so it renders unchanged when no\n tone is set.", "expansion": [ "inline-flex", "items-center", "gap-1", "rounded-full", "px-2", "py-0.5", "text-xs", "font-medium", "bg-[var(--tone-bg,var(--muted))]", "text-[var(--tone-fg,var(--muted-foreground))]" ], "name": "badge" }, { "description": "Success tone badge.", "expansion": [ "inline-flex", "items-center", "gap-1", "rounded-full", "bg-green-100", "px-2", "py-0.5", "text-xs", "font-medium", "text-green-800", "dark:bg-green-900", "dark:text-green-200" ], "name": "badge-success" }, { "description": "Warning tone badge.", "expansion": [ "inline-flex", "items-center", "gap-1", "rounded-full", "bg-amber-100", "px-2", "py-0.5", "text-xs", "font-medium", "text-amber-800", "dark:bg-amber-900", "dark:text-amber-200" ], "name": "badge-warning" }, { "description": "Danger tone badge.", "expansion": [ "inline-flex", "items-center", "gap-1", "rounded-full", "bg-destructive/15", "px-2", "py-0.5", "text-xs", "font-medium", "text-destructive" ], "name": "badge-danger" }, { "description": "Info tone badge.", "expansion": [ "inline-flex", "items-center", "gap-1", "rounded-full", "bg-primary/15", "px-2", "py-0.5", "text-xs", "font-medium", "text-primary" ], "name": "badge-info" }, { "description": "Outline badge — no fill.", "expansion": [ "inline-flex", "items-center", "gap-1", "rounded-full", "border", "border-border", "px-2", "py-0.5", "text-xs", "font-medium", "text-foreground" ], "name": "badge-outline" } ], "sha": "07c6ab5a8deb77e3", "version": "0.0.2" }, { "name": "button", "recipes": [ { "description": "Shared button base — sizing, focus ring, disabled state.", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-2", "rounded-md", "px-4", "py-2", "text-sm", "font-medium", "transition-colors", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50" ], "name": "btn-base" }, { "description": "Primary call-to-action button.", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-2", "rounded-md", "px-4", "py-2", "text-sm", "font-medium", "transition-colors", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50", "bg-primary", "text-primary-foreground", "hover:bg-primary/90" ], "name": "btn-primary" }, { "description": "Small primary button.", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-2", "rounded-md", "px-4", "py-2", "text-sm", "font-medium", "transition-colors", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50", "bg-primary", "text-primary-foreground", "hover:bg-primary/90", "px-3", "py-1.5", "text-xs" ], "name": "btn-primary-sm" }, { "description": "Large primary button.", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-2", "rounded-md", "px-4", "py-2", "text-sm", "font-medium", "transition-colors", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50", "bg-primary", "text-primary-foreground", "hover:bg-primary/90", "px-6", "py-3", "text-base" ], "name": "btn-primary-lg" }, { "description": "Secondary button — bordered surface tone.", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-2", "rounded-md", "px-4", "py-2", "text-sm", "font-medium", "transition-colors", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50", "border", "border-border", "bg-secondary", "text-secondary-foreground", "hover:bg-secondary/80" ], "name": "btn-secondary" }, { "description": "Small secondary button.", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-2", "rounded-md", "px-4", "py-2", "text-sm", "font-medium", "transition-colors", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50", "border", "border-border", "bg-secondary", "text-secondary-foreground", "hover:bg-secondary/80", "px-3", "py-1.5", "text-xs" ], "name": "btn-secondary-sm" }, { "description": "Large secondary button.", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-2", "rounded-md", "px-4", "py-2", "text-sm", "font-medium", "transition-colors", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50", "border", "border-border", "bg-secondary", "text-secondary-foreground", "hover:bg-secondary/80", "px-6", "py-3", "text-base" ], "name": "btn-secondary-lg" }, { "description": "Ghost button — text only, no background.", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-2", "rounded-md", "px-4", "py-2", "text-sm", "font-medium", "transition-colors", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50", "text-foreground", "hover:bg-muted" ], "name": "btn-ghost" }, { "description": "Small ghost button.", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-2", "rounded-md", "px-4", "py-2", "text-sm", "font-medium", "transition-colors", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50", "text-foreground", "hover:bg-muted", "px-3", "py-1.5", "text-xs" ], "name": "btn-ghost-sm" }, { "description": "Large ghost button.", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-2", "rounded-md", "px-4", "py-2", "text-sm", "font-medium", "transition-colors", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50", "text-foreground", "hover:bg-muted", "px-6", "py-3", "text-base" ], "name": "btn-ghost-lg" }, { "description": "Destructive button.", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-2", "rounded-md", "px-4", "py-2", "text-sm", "font-medium", "transition-colors", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50", "bg-destructive", "text-destructive-foreground", "hover:bg-destructive/90" ], "name": "btn-danger" }, { "description": "Outline button — bordered without fill.", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-2", "rounded-md", "px-4", "py-2", "text-sm", "font-medium", "transition-colors", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50", "border", "border-primary", "text-primary", "hover:bg-primary/10" ], "name": "btn-outline" }, { "description": "Square icon-only button.", "expansion": [ "inline-flex", "h-9", "w-9", "items-center", "justify-center", "rounded-md", "text-foreground", "transition-colors", "hover:bg-muted", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50" ], "name": "btn-icon" }, { "description": "Shared button shell (alias of @btn-base).", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-2", "rounded-md", "px-4", "py-2", "text-sm", "font-medium", "transition-colors", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50" ], "name": "button-base" }, { "description": "Primary call-to-action button (alias of @btn-primary).", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-2", "rounded-md", "px-4", "py-2", "text-sm", "font-medium", "transition-colors", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50", "bg-primary", "text-primary-foreground", "hover:bg-primary/90" ], "name": "button-primary" }, { "description": "Small primary button (alias of @btn-primary-sm).", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-2", "rounded-md", "px-4", "py-2", "text-sm", "font-medium", "transition-colors", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50", "bg-primary", "text-primary-foreground", "hover:bg-primary/90", "px-3", "py-1.5", "text-xs" ], "name": "button-primary-sm" }, { "description": "Large primary button (alias of @btn-primary-lg).", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-2", "rounded-md", "px-4", "py-2", "text-sm", "font-medium", "transition-colors", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50", "bg-primary", "text-primary-foreground", "hover:bg-primary/90", "px-6", "py-3", "text-base" ], "name": "button-primary-lg" }, { "description": "Secondary button (alias of @btn-secondary).", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-2", "rounded-md", "px-4", "py-2", "text-sm", "font-medium", "transition-colors", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50", "border", "border-border", "bg-secondary", "text-secondary-foreground", "hover:bg-secondary/80" ], "name": "button-secondary" }, { "description": "Small secondary button (alias of @btn-secondary-sm).", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-2", "rounded-md", "px-4", "py-2", "text-sm", "font-medium", "transition-colors", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50", "border", "border-border", "bg-secondary", "text-secondary-foreground", "hover:bg-secondary/80", "px-3", "py-1.5", "text-xs" ], "name": "button-secondary-sm" }, { "description": "Large secondary button (alias of @btn-secondary-lg).", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-2", "rounded-md", "px-4", "py-2", "text-sm", "font-medium", "transition-colors", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50", "border", "border-border", "bg-secondary", "text-secondary-foreground", "hover:bg-secondary/80", "px-6", "py-3", "text-base" ], "name": "button-secondary-lg" }, { "description": "Ghost button (alias of @btn-ghost).", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-2", "rounded-md", "px-4", "py-2", "text-sm", "font-medium", "transition-colors", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50", "text-foreground", "hover:bg-muted" ], "name": "button-ghost" }, { "description": "Small ghost button (alias of @btn-ghost-sm).", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-2", "rounded-md", "px-4", "py-2", "text-sm", "font-medium", "transition-colors", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50", "text-foreground", "hover:bg-muted", "px-3", "py-1.5", "text-xs" ], "name": "button-ghost-sm" }, { "description": "Large ghost button (alias of @btn-ghost-lg).", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-2", "rounded-md", "px-4", "py-2", "text-sm", "font-medium", "transition-colors", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50", "text-foreground", "hover:bg-muted", "px-6", "py-3", "text-base" ], "name": "button-ghost-lg" }, { "description": "Destructive button (alias of @btn-danger).", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-2", "rounded-md", "px-4", "py-2", "text-sm", "font-medium", "transition-colors", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50", "bg-destructive", "text-destructive-foreground", "hover:bg-destructive/90" ], "name": "button-danger" }, { "description": "Outline button (alias of @btn-outline).", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-2", "rounded-md", "px-4", "py-2", "text-sm", "font-medium", "transition-colors", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50", "border", "border-primary", "text-primary", "hover:bg-primary/10" ], "name": "button-outline" }, { "description": "Square icon-only button (alias of @btn-icon).", "expansion": [ "inline-flex", "h-9", "w-9", "items-center", "justify-center", "rounded-md", "text-foreground", "transition-colors", "hover:bg-muted", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50" ], "name": "button-icon" } ], "sha": "b0b08652cd757b90", "version": "0.0.2" }, { "name": "card", "recipes": [ { "description": "Default content card with border, padding, and surface color.", "expansion": [ "rounded-lg", "border", "border-border", "bg-card", "text-card-foreground", "p-4" ], "name": "card" }, { "description": "Card with raised shadow for emphasis.", "expansion": [ "rounded-lg", "border", "border-border", "bg-card", "text-card-foreground", "p-4", "shadow-md" ], "name": "card-elevated" }, { "description": "Card without border, on a muted surface.", "expansion": [ "rounded-lg", "bg-muted", "text-foreground", "p-4" ], "name": "card-flat" }, { "description": "Clickable card with hover and focus-visible states.", "expansion": [ "rounded-lg", "border", "border-border", "bg-card", "text-card-foreground", "p-4", "cursor-pointer", "transition-shadow", "hover:shadow-md", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring" ], "name": "card-interactive" }, { "description": "Card header region with bottom divider.", "expansion": [ "mb-3", "border-b", "border-border", "pb-3" ], "name": "card-header" }, { "description": "Card body region.", "expansion": [ "py-1" ], "name": "card-body" }, { "description": "Card footer with top divider and right-aligned actions.", "expansion": [ "mt-3", "flex", "items-center", "justify-end", "gap-2", "border-t", "border-border", "pt-3" ], "name": "card-footer" } ], "sha": "4813cef10cd21824", "version": "0.0.1" }, { "name": "code", "recipes": [ { "description": "Inline code span.", "expansion": [ "rounded", "bg-muted", "px-1.5", "py-0.5", "font-mono", "text-[0.875em]", "text-foreground" ], "name": "code-inline" }, { "description": "Block of preformatted code.", "expansion": [ "overflow-x-auto", "rounded-md", "border", "border-border", "bg-muted", "p-4", "font-mono", "text-sm", "leading-6", "text-foreground" ], "name": "code-block" }, { "description": "Keyboard shortcut hint.", "expansion": [ "inline-flex", "items-center", "rounded", "border", "border-border", "bg-muted", "px-1.5", "py-0.5", "font-mono", "text-xs", "text-foreground", "shadow-sm" ], "name": "kbd" } ], "sha": "cc8d2b0bedb5b453", "version": "0.0.1" }, { "name": "dialog", "recipes": [ { "description": "Modal dialog wrapper — covers the viewport, centers content.", "expansion": [ "fixed", "inset-0", "z-50", "flex", "items-center", "justify-center", "p-4" ], "name": "dialog" }, { "description": "Dimmed overlay behind the dialog.", "expansion": [ "fixed", "inset-0", "z-40", "bg-black/50" ], "name": "dialog-overlay" }, { "description": "Dialog content panel.", "expansion": [ "relative", "z-50", "w-full", "max-w-md", "rounded-lg", "border", "border-border", "bg-popover", "text-popover-foreground", "p-6", "shadow-xl" ], "name": "dialog-content" }, { "description": "Dialog header region with title.", "expansion": [ "mb-4", "flex", "flex-col", "gap-1" ], "name": "dialog-header" }, { "description": "Dialog footer with right-aligned actions.", "expansion": [ "mt-6", "flex", "items-center", "justify-end", "gap-2" ], "name": "dialog-footer" } ], "sha": "b4dbf853e99fce75", "version": "0.0.1" }, { "name": "empty", "recipes": [ { "description": "Empty-state container.", "expansion": [ "flex", "flex-col", "items-center", "justify-center", "gap-3", "rounded-md", "border", "border-dashed", "border-border", "p-8", "text-center" ], "name": "empty" }, { "description": "Empty-state icon slot.", "expansion": [ "flex", "h-12", "w-12", "items-center", "justify-center", "rounded-full", "bg-muted", "text-muted-foreground" ], "name": "empty-icon" }, { "description": "Empty-state title text.", "expansion": [ "text-base", "font-semibold", "text-foreground" ], "name": "empty-title" }, { "description": "Empty-state supporting description.", "expansion": [ "max-w-sm", "text-sm", "text-muted-foreground" ], "name": "empty-description" } ], "sha": "003168e1b4a395c5", "version": "0.0.1" }, { "name": "feedback", "recipes": [ { "description": "Default informational alert.", "expansion": [ "flex", "items-start", "gap-3", "rounded-md", "border", "border-border", "bg-card", "p-4", "text-sm", "text-card-foreground" ], "name": "alert" }, { "description": "Success alert.", "expansion": [ "flex", "items-start", "gap-3", "rounded-md", "border", "border-green-200", "bg-green-50", "p-4", "text-sm", "text-green-900", "dark:border-green-900", "dark:bg-green-950", "dark:text-green-100" ], "name": "alert-success" }, { "description": "Warning alert.", "expansion": [ "flex", "items-start", "gap-3", "rounded-md", "border", "border-amber-200", "bg-amber-50", "p-4", "text-sm", "text-amber-900", "dark:border-amber-900", "dark:bg-amber-950", "dark:text-amber-100" ], "name": "alert-warning" }, { "description": "Danger alert.", "expansion": [ "flex", "items-start", "gap-3", "rounded-md", "border", "border-destructive/30", "bg-destructive/10", "p-4", "text-sm", "text-destructive" ], "name": "alert-danger" }, { "description": "Informational alert.", "expansion": [ "flex", "items-start", "gap-3", "rounded-md", "border", "border-primary/30", "bg-primary/10", "p-4", "text-sm", "text-primary" ], "name": "alert-info" }, { "description": "Inline callout — flush left edge accent.", "expansion": [ "border-l-4", "border-primary", "bg-primary/10", "p-4", "text-sm", "text-foreground" ], "name": "callout" }, { "description": "Floating toast notification.", "expansion": [ "pointer-events-auto", "flex", "items-start", "gap-3", "rounded-md", "border", "border-border", "bg-popover", "p-4", "text-sm", "text-popover-foreground", "shadow-lg" ], "name": "toast" }, { "description": "Full-width banner spanning the viewport.", "expansion": [ "w-full", "bg-primary", "px-4", "py-2", "text-center", "text-sm", "font-medium", "text-primary-foreground" ], "name": "banner" } ], "sha": "818868f6af179bcf", "version": "0.0.1" }, { "name": "form", "recipes": [ { "description": "Text input field.", "expansion": [ "block", "w-full", "rounded-md", "border", "border-input", "bg-background", "px-3", "py-2", "text-sm", "text-foreground", "placeholder:text-muted-foreground", "focus:border-ring", "focus:outline-2", "focus:outline-offset-2", "focus:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50" ], "name": "input" }, { "description": "Dinachi-style input shell — transparent background, h-9, file/\n placeholder/selection/aria-invalid/focus-visible states baked in.", "expansion": [ "flex", "h-9", "w-full", "min-w-0", "rounded-md", "border", "border-input", "bg-transparent", "px-3", "py-1", "text-base", "shadow-xs", "outline-none", "transition-[color,box-shadow]", "placeholder:text-muted-foreground", "selection:bg-primary", "selection:text-primary-foreground", "file:inline-flex", "file:h-7", "file:border-0", "file:bg-transparent", "file:text-sm", "file:font-medium", "file:text-foreground", "focus-visible:border-ring", "focus-visible:ring-ring/50", "focus-visible:ring-[3px]", "aria-invalid:border-destructive", "aria-invalid:ring-destructive/20", "disabled:pointer-events-none", "disabled:cursor-not-allowed", "disabled:opacity-50", "md:text-sm", "dark:bg-input/30", "dark:aria-invalid:ring-destructive/40" ], "name": "input-shell" }, { "description": "Input in error state.", "expansion": [ "block", "w-full", "rounded-md", "border", "border-input", "bg-background", "px-3", "py-2", "text-sm", "text-foreground", "placeholder:text-muted-foreground", "focus:border-ring", "focus:outline-2", "focus:outline-offset-2", "focus:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50", "border-destructive", "focus:border-destructive", "focus:outline-destructive" ], "name": "input-error" }, { "description": "Multi-line textarea.", "expansion": [ "block", "w-full", "rounded-md", "border", "border-input", "bg-background", "px-3", "py-2", "text-sm", "text-foreground", "placeholder:text-muted-foreground", "focus:border-ring", "focus:outline-2", "focus:outline-offset-2", "focus:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50" ], "name": "textarea" }, { "description": "Native select control.", "expansion": [ "block", "w-full", "rounded-md", "border", "border-input", "bg-background", "px-3", "py-2", "text-sm", "text-foreground", "focus:border-ring", "focus:outline-2", "focus:outline-offset-2", "focus:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50" ], "name": "select" }, { "description": "Checkbox input.", "expansion": [ "h-4", "w-4", "rounded", "border-input", "text-primary", "focus:outline-2", "focus:outline-offset-2", "focus:outline-ring" ], "name": "checkbox" }, { "description": "Radio input.", "expansion": [ "h-4", "w-4", "border-input", "text-primary", "focus:outline-2", "focus:outline-offset-2", "focus:outline-ring" ], "name": "radio" }, { "description": "Form field wrapper — label + input + help/error.", "expansion": [ "flex", "flex-col", "gap-1.5" ], "name": "field" }, { "description": "Form field in error state.", "expansion": [ "flex", "flex-col", "gap-1.5" ], "name": "field-error" }, { "description": "Grouped form section with optional legend.", "expansion": [ "flex", "flex-col", "gap-4", "rounded-md", "border", "border-border", "p-4" ], "name": "fieldset" }, { "description": "Field-level helper text.", "expansion": [ "text-xs", "text-muted-foreground" ], "name": "help" } ], "sha": "e78b50acd247f5af", "version": "0.0.2" }, { "name": "icon", "recipes": [ { "description": "Small icon — 16px.", "expansion": [ "h-4", "w-4", "shrink-0" ], "name": "icon-sm" }, { "description": "Default icon size — 20px.", "expansion": [ "h-5", "w-5", "shrink-0" ], "name": "icon-md" }, { "description": "Large icon — 24px.", "expansion": [ "h-6", "w-6", "shrink-0" ], "name": "icon-lg" }, { "description": "Icon with muted color.", "expansion": [ "text-muted-foreground" ], "name": "icon-muted" } ], "sha": "fab3b2d3a0c089fb", "version": "0.0.1" }, { "name": "layout", "recipes": [ { "description": "Bare stack — default gap, alias for @stack-md.", "expansion": [ "flex", "flex-col", "gap-4" ], "name": "stack" }, { "description": "Vertical stack with extra-small gap.", "expansion": [ "flex", "flex-col", "gap-1" ], "name": "stack-xs" }, { "description": "Vertical stack with small gap.", "expansion": [ "flex", "flex-col", "gap-2" ], "name": "stack-sm" }, { "description": "Vertical stack with medium gap.", "expansion": [ "flex", "flex-col", "gap-4" ], "name": "stack-md" }, { "description": "Vertical stack with large gap.", "expansion": [ "flex", "flex-col", "gap-8" ], "name": "stack-lg" }, { "description": "Horizontal row with default gap and centered items.", "expansion": [ "flex", "flex-row", "items-center", "gap-2" ], "name": "row" }, { "description": "Horizontal row with space between children.", "expansion": [ "flex", "flex-row", "items-center", "justify-between", "gap-2" ], "name": "row-between" }, { "description": "Horizontal row aligned to the end.", "expansion": [ "flex", "flex-row", "items-center", "justify-end", "gap-2" ], "name": "row-end" }, { "description": "Two-column responsive grid.", "expansion": [ "grid", "grid-cols-1", "gap-4", "sm:grid-cols-2" ], "name": "grid-2" }, { "description": "Three-column responsive grid.", "expansion": [ "grid", "grid-cols-1", "gap-4", "sm:grid-cols-2", "lg:grid-cols-3" ], "name": "grid-3" }, { "description": "Four-column responsive grid.", "expansion": [ "grid", "grid-cols-1", "gap-4", "sm:grid-cols-2", "lg:grid-cols-4" ], "name": "grid-4" }, { "description": "Center content horizontally and vertically.", "expansion": [ "flex", "items-center", "justify-center" ], "name": "center" }, { "description": "Fill the available width and height.", "expansion": [ "h-full", "w-full" ], "name": "full" } ], "sha": "48025daeec83041a", "version": "0.0.2" }, { "name": "list", "recipes": [ { "description": "Vertical list with default gap.", "expansion": [ "flex", "flex-col", "gap-1" ], "name": "list" }, { "description": "Single list item.", "expansion": [ "flex", "items-center", "gap-2", "rounded-md", "px-3", "py-2", "text-sm", "text-foreground" ], "name": "list-item" }, { "description": "List with dividing borders between items.", "expansion": [ "divide-y", "divide-border", "rounded-md", "border", "border-border" ], "name": "list-bordered" }, { "description": "Definition list container.", "expansion": [ "grid", "grid-cols-1", "gap-2", "sm:grid-cols-3", "sm:gap-4" ], "name": "dl" }, { "description": "Definition term.", "expansion": [ "text-sm", "font-medium", "text-muted-foreground" ], "name": "dt" }, { "description": "Definition description.", "expansion": [ "text-sm", "text-foreground", "sm:col-span-2" ], "name": "dd" }, { "description": "Definition list container (alias of @dl).", "expansion": [ "grid", "grid-cols-1", "gap-2", "sm:grid-cols-3", "sm:gap-4" ], "name": "description-list" }, { "description": "Definition term (alias of @dt).", "expansion": [ "text-sm", "font-medium", "text-muted-foreground" ], "name": "description-term" }, { "description": "Definition description (alias of @dd).", "expansion": [ "text-sm", "text-foreground", "sm:col-span-2" ], "name": "description-detail" } ], "sha": "6a7f93aa95067c44", "version": "0.0.2" }, { "name": "media", "recipes": [ { "description": "User/profile avatar.", "expansion": [ "inline-flex", "h-10", "w-10", "items-center", "justify-center", "overflow-hidden", "rounded-full", "bg-muted", "text-sm", "font-medium", "text-muted-foreground" ], "name": "avatar" }, { "description": "Small avatar.", "expansion": [ "inline-flex", "h-10", "w-10", "items-center", "justify-center", "overflow-hidden", "rounded-full", "bg-muted", "text-sm", "font-medium", "text-muted-foreground", "h-6", "w-6", "text-xs" ], "name": "avatar-sm" }, { "description": "Large avatar.", "expansion": [ "inline-flex", "h-10", "w-10", "items-center", "justify-center", "overflow-hidden", "rounded-full", "bg-muted", "text-sm", "font-medium", "text-muted-foreground", "h-14", "w-14", "text-base" ], "name": "avatar-lg" }, { "description": "Small image thumbnail.", "expansion": [ "h-16", "w-16", "rounded-md", "object-cover" ], "name": "thumb" }, { "description": "1:1 aspect-ratio wrapper.", "expansion": [ "aspect-square", "w-full", "overflow-hidden", "rounded-md" ], "name": "aspect-square" }, { "description": "16:9 aspect-ratio wrapper.", "expansion": [ "aspect-video", "w-full", "overflow-hidden", "rounded-md" ], "name": "aspect-video" } ], "sha": "dfc85633101b0637", "version": "0.0.1" }, { "name": "menu", "recipes": [ { "description": "Dropdown menu panel.", "expansion": [ "min-w-[8rem]", "overflow-hidden", "rounded-md", "border", "border-border", "bg-popover", "p-1", "text-popover-foreground", "shadow-md" ], "name": "menu" }, { "description": "A single menu row. Highlight with data-active, dim with data-disabled.", "expansion": [ "relative", "flex", "cursor-pointer", "items-center", "gap-2", "rounded-sm", "px-2", "py-1.5", "text-sm", "text-foreground", "outline-none", "transition-colors", "hover:bg-muted", "focus-visible:bg-muted", "data-[active]:bg-muted", "data-[disabled]:pointer-events-none", "data-[disabled]:opacity-50" ], "name": "menu-item" }, { "description": "The control that opens the menu.", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-1", "outline-none", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring" ], "name": "menu-trigger" }, { "description": "Divider between menu groups.", "expansion": [ "-mx-1", "my-1", "h-px", "bg-border" ], "name": "menu-separator" } ], "sha": "c95d3650d92a2fa6", "version": "0.0.1" }, { "name": "navigation", "recipes": [ { "description": "Top-level nav container.", "expansion": [ "flex", "items-center", "gap-1" ], "name": "nav" }, { "description": "Inactive nav link with hover/focus states.", "expansion": [ "inline-flex", "items-center", "gap-2", "rounded-md", "px-3", "py-1.5", "text-sm", "font-medium", "text-muted-foreground", "transition-colors", "hover:bg-muted", "hover:text-foreground", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring" ], "name": "nav-link" }, { "description": "Active nav link.", "expansion": [ "inline-flex", "items-center", "gap-2", "rounded-md", "bg-muted", "px-3", "py-1.5", "text-sm", "font-medium", "text-foreground", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring" ], "name": "nav-link-active" }, { "description": "Breadcrumb trail container.", "expansion": [ "flex", "items-center", "gap-1.5", "text-sm", "text-muted-foreground" ], "name": "breadcrumb" }, { "description": "Inactive tab control.", "expansion": [ "inline-flex", "items-center", "gap-2", "border-b-2", "border-transparent", "px-3", "py-2", "text-sm", "font-medium", "text-muted-foreground", "transition-colors", "hover:border-border", "hover:text-foreground", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring" ], "name": "tab" }, { "description": "Active tab control.", "expansion": [ "inline-flex", "items-center", "gap-2", "border-b-2", "border-primary", "px-3", "py-2", "text-sm", "font-medium", "text-primary", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring" ], "name": "tab-active" }, { "description": "Top-level nav container (alias of @nav).", "expansion": [ "flex", "items-center", "gap-1" ], "name": "navigation" }, { "description": "Inactive nav link (alias of @nav-link).", "expansion": [ "inline-flex", "items-center", "gap-2", "rounded-md", "px-3", "py-1.5", "text-sm", "font-medium", "text-muted-foreground", "transition-colors", "hover:bg-muted", "hover:text-foreground", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring" ], "name": "navigation-link" }, { "description": "Active nav link (alias of @nav-link-active).", "expansion": [ "inline-flex", "items-center", "gap-2", "rounded-md", "bg-muted", "px-3", "py-1.5", "text-sm", "font-medium", "text-foreground", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring" ], "name": "navigation-link-active" } ], "sha": "2bb73370d69e0f65", "version": "0.0.2" }, { "name": "progress", "recipes": [ { "description": "Progress bar track (background).", "expansion": [ "h-2", "w-full", "overflow-hidden", "rounded-full", "bg-muted" ], "name": "progress-track" }, { "description": "Progress bar fill.", "expansion": [ "h-full", "rounded-full", "bg-primary", "transition-all" ], "name": "progress-bar" }, { "description": "Indeterminate loading spinner.", "expansion": [ "inline-block", "h-4", "w-4", "animate-spin", "rounded-full", "border-2", "border-border", "border-t-primary" ], "name": "spinner" } ], "sha": "37210e32d2cd555f", "version": "0.0.1" }, { "name": "segmented", "recipes": [ { "description": "Segmented-control track.", "expansion": [ "inline-flex", "items-center", "gap-1", "rounded-md", "bg-muted", "p-1" ], "name": "segmented" }, { "description": "A segment. Mark the selected one with data-active.", "expansion": [ "inline-flex", "items-center", "justify-center", "gap-1.5", "rounded-sm", "px-3", "py-1", "text-sm", "font-medium", "text-muted-foreground", "transition-colors", "hover:text-foreground", "data-[active]:bg-background", "data-[active]:text-foreground", "data-[active]:shadow-sm", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring" ], "name": "segmented-item" } ], "sha": "60bb982c1fc271f0", "version": "0.0.1" }, { "name": "sheet", "recipes": [ { "description": "Dimmed backdrop behind the sheet.", "expansion": [ "fixed", "inset-0", "z-40", "bg-black/50" ], "name": "sheet-overlay" }, { "description": "Positioner — anchors the panel to a side via data-side.", "expansion": [ "fixed", "inset-0", "z-50", "flex", "data-[side=right]:justify-end", "data-[side=left]:justify-start" ], "name": "sheet" }, { "description": "The sliding panel.", "expansion": [ "flex", "h-full", "w-3/4", "max-w-sm", "flex-col", "gap-4", "border-border", "bg-popover", "p-6", "text-popover-foreground", "shadow-xl" ], "name": "sheet-content" }, { "description": "Sheet header region.", "expansion": [ "flex", "flex-col", "gap-1" ], "name": "sheet-header" }, { "description": "Sheet footer with bottom-pinned, right-aligned actions.", "expansion": [ "mt-auto", "flex", "items-center", "justify-end", "gap-2" ], "name": "sheet-footer" }, { "description": "Alias — @drawer reads as @sheet.", "expansion": [ "fixed", "inset-0", "z-50", "flex", "data-[side=right]:justify-end", "data-[side=left]:justify-start" ], "name": "drawer" } ], "sha": "2dd5109c9e3865fa", "version": "0.0.1" }, { "name": "skeleton", "recipes": [ { "description": "Default rectangular skeleton placeholder.", "expansion": [ "animate-pulse", "rounded-md", "bg-muted" ], "name": "skeleton" }, { "description": "Single-line text skeleton.", "expansion": [ "h-4", "w-full", "animate-pulse", "rounded", "bg-muted" ], "name": "skeleton-text" }, { "description": "Circular skeleton (avatar/icon).", "expansion": [ "h-10", "w-10", "animate-pulse", "rounded-full", "bg-muted" ], "name": "skeleton-circle" } ], "sha": "cd2db5c1c48b16d3", "version": "0.0.1" }, { "name": "stat", "recipes": [ { "description": "Metric tile container.", "expansion": [ "flex", "flex-col", "gap-1", "rounded-lg", "border", "border-border", "bg-card", "p-4", "text-card-foreground" ], "name": "stat" }, { "description": "Metric name.", "expansion": [ "text-sm", "font-medium", "text-muted-foreground" ], "name": "stat-label" }, { "description": "The metric's primary value.", "expansion": [ "text-2xl", "font-semibold", "tracking-tight", "text-foreground", "tabular-nums" ], "name": "stat-value" }, { "description": "Trend delta — tone-aware; set data-tone (success up / danger down).", "expansion": [ "inline-flex", "items-center", "gap-1", "text-xs", "font-medium", "text-[var(--tone-fg,var(--muted-foreground))]" ], "name": "stat-trend" } ], "sha": "445f1f7abfebc0b1", "version": "0.0.1" }, { "name": "surface", "recipes": [ { "description": "Default page/section surface.", "expansion": [ "bg-background", "text-foreground" ], "name": "surface" }, { "description": "Muted surface — secondary background.", "expansion": [ "bg-muted", "text-foreground" ], "name": "surface-muted" }, { "description": "Accent surface — soft brand background.", "expansion": [ "bg-accent", "text-accent-foreground" ], "name": "surface-accent" }, { "description": "Centered content wrapper with a max width.", "expansion": [ "mx-auto", "w-full", "max-w-6xl", "px-4", "sm:px-6", "lg:px-8" ], "name": "wrapper" }, { "description": "Narrow content wrapper for prose.", "expansion": [ "mx-auto", "w-full", "max-w-3xl", "px-4", "sm:px-6" ], "name": "wrapper-tight" }, { "description": "Horizontal divider line.", "expansion": [ "shrink-0", "h-px", "w-full", "bg-border" ], "name": "divider-h" }, { "description": "Vertical divider line.", "expansion": [ "shrink-0", "h-full", "w-px", "bg-border" ], "name": "divider-v" } ], "sha": "31716e4cbe81f93f", "version": "0.0.2" }, { "name": "switch", "recipes": [ { "description": "Toggle track. Add data-checked when on.", "expansion": [ "peer", "inline-flex", "h-5", "w-9", "shrink-0", "cursor-pointer", "items-center", "rounded-full", "border-2", "border-transparent", "bg-input", "transition-colors", "data-[checked]:bg-primary", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring", "disabled:cursor-not-allowed", "disabled:opacity-50" ], "name": "switch" }, { "description": "Sliding knob. Add data-checked to slide it on.", "expansion": [ "pointer-events-none", "block", "h-4", "w-4", "translate-x-0", "rounded-full", "bg-background", "shadow-sm", "transition-transform", "data-[checked]:translate-x-4" ], "name": "switch-thumb" } ], "sha": "54fa33bb72839799", "version": "0.0.1" }, { "name": "table", "recipes": [ { "description": "Scroll container for a wide table — keeps overflow horizontal.", "expansion": [ "w-full", "overflow-x-auto", "rounded-md", "border", "border-border" ], "name": "table-container" }, { "description": "Data table base.", "expansion": [ "w-full", "border-collapse", "text-left", "text-sm", "text-foreground" ], "name": "table" }, { "description": "Table header cell.", "expansion": [ "border-b", "border-border", "px-3", "py-2", "text-xs", "font-semibold", "uppercase", "tracking-wide", "text-muted-foreground" ], "name": "th" }, { "description": "Table body cell.", "expansion": [ "border-b", "border-border", "px-3", "py-2" ], "name": "td" }, { "description": "Row hover state.", "expansion": [ "transition-colors", "hover:bg-muted" ], "name": "tr-hover" }, { "description": "Table with zebra striping on alternating rows.", "expansion": [ "w-full", "border-collapse", "text-left", "text-sm", "text-foreground", "[&_tbody_tr:nth-child(odd)]:bg-muted" ], "name": "table-zebra" } ], "sha": "4f3295935b2a647c", "version": "0.0.1" }, { "name": "text", "recipes": [ { "description": "Top-level page heading.", "expansion": [ "text-4xl", "font-bold", "tracking-tight", "text-foreground" ], "name": "heading-xl" }, { "description": "Large section heading.", "expansion": [ "text-2xl", "font-semibold", "tracking-tight", "text-foreground" ], "name": "heading-lg" }, { "description": "Medium heading.", "expansion": [ "text-xl", "font-semibold", "text-foreground" ], "name": "heading-md" }, { "description": "Small heading.", "expansion": [ "text-base", "font-semibold", "text-foreground" ], "name": "heading-sm" }, { "description": "Default body text.", "expansion": [ "text-sm", "leading-6", "text-foreground" ], "name": "body" }, { "description": "Lead paragraph — larger body copy for hero/intro sections.", "expansion": [ "text-lg", "leading-relaxed", "text-muted-foreground" ], "name": "lead" }, { "description": "Muted secondary text.", "expansion": [ "text-sm", "text-muted-foreground" ], "name": "muted" }, { "description": "Form label text.", "expansion": [ "text-sm", "font-medium", "text-foreground" ], "name": "label" }, { "description": "Caption — small supporting text.", "expansion": [ "text-xs", "text-muted-foreground" ], "name": "caption" }, { "description": "Eyebrow — uppercase kicker above a heading.", "expansion": [ "font-mono", "text-xs", "font-medium", "uppercase", "tracking-[0.2em]", "text-muted-foreground" ], "name": "eyebrow" }, { "description": "Inline link with hover/focus states.", "expansion": [ "text-primary", "underline-offset-2", "hover:underline", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-ring" ], "name": "link" } ], "sha": "f39dc7b88afefc8f", "version": "0.0.2" }, { "name": "tooltip", "recipes": [ { "description": "Floating tooltip bubble.", "expansion": [ "pointer-events-none", "z-50", "rounded-md", "bg-foreground", "px-2", "py-1", "text-xs", "font-medium", "text-background", "shadow-md" ], "name": "tooltip" } ], "sha": "1be3af4165357dcd", "version": "0.0.1" } ] }