@krizaka/ui 3.7.1 → 3.9.0

package/dist/blocks.css

@@ -432,10 +432,62 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-code-lang { padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kz-text-primary); background: var(--kz-surface-3); }
 .kz-code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font-family: var(--kz-font-mono); font-size: 12.5px; line-height: 1.7; color: var(--kz-text-primary); tab-size: 2; }
 .kz-code pre:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: -2px; }
-.kz-tk-comment { color: var(--kz-text-secondary); font-style: italic; }
-.kz-tk-string { color: var(--kz-success-text); }
-.kz-tk-annotation { color: var(--kz-warning-text); }
-.kz-tk-keyword, .kz-tk-tag { color: var(--kz-accent-text); font-weight: 600; }
+/* The code's colours: TanStack Highlight's `th-*` classes on the tokens' text roles (each ≥ 4.5:1 on the code surface,
+   both themes) — comments quiet, strings green, keywords in the accent, types and numbers in the info colour. */
+.kz-code .th-comment { color: var(--kz-text-secondary); font-style: italic; }
+.kz-code .th-string, .kz-code .th-inserted { color: var(--kz-success-text); }
+.kz-code .th-attr, .kz-code .th-meta { color: var(--kz-warning-text); }
+.kz-code .th-keyword, .kz-code .th-tag, .kz-code .th-selector, .kz-code .th-command { color: var(--kz-accent-text); font-weight: 600; }
+.kz-code .th-type, .kz-code .th-function, .kz-code .th-number, .kz-code .th-literal { color: var(--kz-info-text); }
+.kz-code .th-deleted { color: var(--kz-danger-text); }
+.kz-code .th-heading, .kz-code .th-link { color: var(--kz-accent-text); font-weight: 700; }
+/* Lines (numbered or set apart): a band the width of the sample, edge to edge. */
+.kz-code .th-line { display: inline-block; box-sizing: border-box; min-width: calc(100% + 36px); width: max-content; margin-inline: -18px; padding-inline: 18px; position: relative; }
+.kz-code .th-code--line-numbers .th-line::before { content: attr(data-line); display: inline-block; width: 2.5em; margin-right: 1em; text-align: right; color: var(--kz-text-secondary); user-select: none; }
+.kz-code .kz-line-highlight { background: var(--kz-surface-3); box-shadow: inset 2px 0 0 var(--kz-hue, var(--kz-accent)); }
+.kz-code .kz-line-added { background: color-mix(in srgb, var(--kz-success) 14%, transparent); }
+.kz-code .kz-line-removed { background: color-mix(in srgb, var(--kz-danger) 14%, transparent); }
+.kz-code .kz-line-error { background: color-mix(in srgb, var(--kz-danger) 14%, transparent); box-shadow: inset 2px 0 0 var(--kz-danger); }
+.kz-code .kz-line-warning { background: color-mix(in srgb, var(--kz-warning) 14%, transparent); box-shadow: inset 2px 0 0 var(--kz-warning); }
+.kz-code .kz-line-added::after, .kz-code .kz-line-removed::after { position: absolute; left: 6px; top: 0; font-weight: 700; }
+.kz-code .kz-line-added::after { content: "+"; color: var(--kz-success-text); }
+.kz-code .kz-line-removed::after { content: "\2212"; color: var(--kz-danger-text); }
+.kz-code .kz-line-added .th-token, .kz-code .kz-line-removed .th-token, .kz-code .kz-line-error .th-token, .kz-code .kz-line-warning .th-token { color: inherit; }
+/* Dimmed, not faded: the line keeps the quiet text role (≥ 4.5:1), its colours go. */
+.kz-code .kz-line-dim, .kz-code pre[data-focus] .th-line:not(.kz-line-focus) { color: var(--kz-text-secondary); }
+.kz-code .kz-line-dim .th-token, .kz-code pre[data-focus] .th-line:not(.kz-line-focus) .th-token { color: inherit; font-weight: inherit; }
+/* Markdown (TanStack Markdown's AST on the tokens): reading text, nothing decorative. */
+.kz-md { min-width: 0; color: var(--kz-text-primary); font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
+.kz-md > * { margin-block: 0; }
+.kz-md > * + * { margin-top: 0.9em; }
+.kz-md h1, .kz-md h2, .kz-md h3, .kz-md h4, .kz-md h5, .kz-md h6 { font-family: var(--kz-font-display); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
+.kz-md > * + :is(h1, h2, h3) { margin-top: 1.6em; }
+.kz-md h1 { font-size: 1.7em; } .kz-md h2 { font-size: 1.35em; } .kz-md h3 { font-size: 1.15em; } .kz-md h4, .kz-md h5, .kz-md h6 { font-size: 1em; }
+.kz-md a { color: var(--kz-accent-text); text-decoration: underline; text-underline-offset: 3px; }
+.kz-md a:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; border-radius: 4px; }
+.kz-md ul, .kz-md ol { padding-inline-start: 1.5em; }
+.kz-md ul { list-style: disc; }
+.kz-md ol { list-style: decimal; }
+.kz-md ul[data-tasks] { list-style: none; padding-inline-start: 0; }
+.kz-md li + li { margin-top: 0.35em; }
+.kz-md li > :is(ul, ol), .kz-md li > p + * { margin-top: 0.35em; }
+.kz-md blockquote { padding-inline-start: 1em; color: var(--kz-text-secondary); border-inline-start: 3px solid var(--kz-hue, var(--kz-accent)); }
+.kz-md :not(pre) > code { padding: 0.12em 0.4em; border-radius: 6px; font-family: var(--kz-font-mono); font-size: 0.88em; background: var(--kz-surface-3); }
+.kz-md hr { border: 0; border-top: 1px solid var(--kz-border-default); }
+.kz-md img { max-width: 100%; height: auto; border-radius: 12px; }
+.kz-md-table { overflow-x: auto; }
+.kz-md-table table { width: 100%; border-collapse: collapse; font-size: 0.93em; }
+.kz-md-table :is(th, td) { padding: 0.55em 0.8em; text-align: start; border-bottom: 1px solid var(--kz-border-subtle); }
+.kz-md-table th { font-weight: 700; color: var(--kz-text-secondary); background: var(--kz-surface-2); }
+.kz-md [data-footnotes] { font-size: 0.9em; color: var(--kz-text-secondary); border-top: 1px solid var(--kz-border-subtle); padding-top: 0.8em; }
+/* A text still arriving: a caret where it goes on (still under reduced motion). */
+.kz-md[data-streaming] > :is(p, h1, h2, h3, h4, h5, h6):last-child::after,
+.kz-md[data-streaming] > :is(ul, ol):last-child > li:last-child::after { content: ""; display: inline-block; width: 0.5ch; height: 1.05em; margin-inline-start: 3px; vertical-align: -0.15em; background: var(--kz-accent-text); }
+@media (prefers-reduced-motion: no-preference) {
+  .kz-md[data-streaming] > :is(p, h1, h2, h3, h4, h5, h6):last-child::after,
+  .kz-md[data-streaming] > :is(ul, ol):last-child > li:last-child::after { animation: kz-md-caret 1s steps(2, start) infinite; }
+}
+@keyframes kz-md-caret { to { visibility: hidden; } }
 .kz-code-copy {
   display: inline-flex;
   align-items: center;

package/dist/button-BmCrLCq7.d.ts

@@ -0,0 +1,114 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as React from 'react';
+
+declare const buttonVariants: tailwind_variants.TVReturnType<{
+    readonly variant: {
+        readonly primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover";
+        readonly gradient: "bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110";
+        readonly secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3";
+        readonly outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent";
+        readonly ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg";
+        readonly danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20";
+    };
+    readonly size: {
+        readonly sm: "h-8 px-3 text-xs";
+        readonly md: "h-10 px-4 text-sm";
+        readonly lg: "h-12 px-6 text-sm";
+        readonly icon: "h-10 w-10";
+    };
+    readonly shape: {
+        readonly rounded: "rounded-lg";
+        readonly pill: "rounded-full";
+        readonly cut: "rounded-[10px] [corner-shape:bevel]";
+    };
+}, undefined, string, {
+    readonly variant: {
+        readonly primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover";
+        readonly gradient: "bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110";
+        readonly secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3";
+        readonly outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent";
+        readonly ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg";
+        readonly danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20";
+    };
+    readonly size: {
+        readonly sm: "h-8 px-3 text-xs";
+        readonly md: "h-10 px-4 text-sm";
+        readonly lg: "h-12 px-6 text-sm";
+        readonly icon: "h-10 w-10";
+    };
+    readonly shape: {
+        readonly rounded: "rounded-lg";
+        readonly pill: "rounded-full";
+        readonly cut: "rounded-[10px] [corner-shape:bevel]";
+    };
+}, undefined, tailwind_variants.TVReturnTypeLike<{
+    readonly variant: {
+        readonly primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover";
+        readonly gradient: "bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110";
+        readonly secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3";
+        readonly outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent";
+        readonly ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg";
+        readonly danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20";
+    };
+    readonly size: {
+        readonly sm: "h-8 px-3 text-xs";
+        readonly md: "h-10 px-4 text-sm";
+        readonly lg: "h-12 px-6 text-sm";
+        readonly icon: "h-10 w-10";
+    };
+    readonly shape: {
+        readonly rounded: "rounded-lg";
+        readonly pill: "rounded-full";
+        readonly cut: "rounded-[10px] [corner-shape:bevel]";
+    };
+}, undefined>>;
+type ButtonVariants = VariantProps<typeof buttonVariants>;
+type ButtonProps = React.ComponentProps<"button"> & ButtonVariants & {
+    /**
+     * The look: `primary` (the accent), `gradient` (accent → accent-2), `secondary` (a raised surface), `outline`,
+     * `ghost`, `danger`.
+     * @default "secondary"
+     */
+    variant?: ButtonVariants["variant"];
+    /**
+     * sm · md · lg, or `icon` (a square).
+     * @default "md"
+     */
+    size?: ButtonVariants["size"];
+    /**
+     * rounded · pill · cut (45° corners, the Krizaka chamfer).
+     * @default "rounded"
+     */
+    shape?: ButtonVariants["shape"];
+    /** Renders the child (e.g. a <Link>) instead of the <button>, with props, classes and ref merged. */
+    asChild?: boolean;
+    /**
+     * Disables and signals the wait (aria-busy, data-loading) and shows the Krizaka loader glyph before the label; the
+     * button keeps its colour.
+     */
+    loading?: boolean;
+    /**
+     * Between 0 and 1, while `loading`: the glyph's trace and a light fill across the button grow to the value (an
+     * upload, an export).
+     */
+    progress?: number | null;
+    /**
+     * How the action ended: `success` draws a check, `error` a cross (and the button shakes its head once); a ring of
+     * the status colour opens around it. Clear it to return to rest.
+     */
+    status?: "success" | "error" | null;
+    /** A message announced politely by assistive technology when it changes (“Saved”, “Upload failed”) — passed translated. */
+    announce?: string;
+    /**
+     * Shows the glyph while `loading` / with a `status`. `false`: you draw your own.
+     * @default true
+     */
+    indicator?: boolean;
+    /** A sheen of light crosses the button on hover — for the one action a page is about. */
+    shimmer?: boolean;
+    /** The button leans a few pixels toward a fine pointer (driven by `MotionObserver`; never under reduced motion or on touch). */
+    magnetic?: boolean;
+};
+
+export type { ButtonProps as B, ButtonVariants as a };

package/dist/button.d.ts

@@ -3,64 +3,64 @@ import { VariantProps } from 'tailwind-variants';
 import * as React from 'react';
 
 declare const buttonVariants: tailwind_variants.TVReturnType<{
-    variant: {
-        primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover";
-        gradient: "bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110";
-        secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3";
-        outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent";
-        ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg";
-        danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20";
+    readonly variant: {
+        readonly primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover";
+        readonly gradient: "bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110";
+        readonly secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3";
+        readonly outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent";
+        readonly ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg";
+        readonly danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20";
     };
-    size: {
-        sm: "h-8 px-3 text-xs";
-        md: "h-10 px-4 text-sm";
-        lg: "h-12 px-6 text-sm";
-        icon: "h-10 w-10";
+    readonly size: {
+        readonly sm: "h-8 px-3 text-xs";
+        readonly md: "h-10 px-4 text-sm";
+        readonly lg: "h-12 px-6 text-sm";
+        readonly icon: "h-10 w-10";
     };
-    shape: {
-        rounded: "rounded-lg";
-        pill: "rounded-full";
-        cut: "rounded-[10px] [corner-shape:bevel]";
+    readonly shape: {
+        readonly rounded: "rounded-lg";
+        readonly pill: "rounded-full";
+        readonly cut: "rounded-[10px] [corner-shape:bevel]";
     };
 }, undefined, string, {
-    variant: {
-        primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover";
-        gradient: "bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110";
-        secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3";
-        outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent";
-        ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg";
-        danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20";
+    readonly variant: {
+        readonly primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover";
+        readonly gradient: "bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110";
+        readonly secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3";
+        readonly outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent";
+        readonly ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg";
+        readonly danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20";
     };
-    size: {
-        sm: "h-8 px-3 text-xs";
-        md: "h-10 px-4 text-sm";
-        lg: "h-12 px-6 text-sm";
-        icon: "h-10 w-10";
+    readonly size: {
+        readonly sm: "h-8 px-3 text-xs";
+        readonly md: "h-10 px-4 text-sm";
+        readonly lg: "h-12 px-6 text-sm";
+        readonly icon: "h-10 w-10";
     };
-    shape: {
-        rounded: "rounded-lg";
-        pill: "rounded-full";
-        cut: "rounded-[10px] [corner-shape:bevel]";
+    readonly shape: {
+        readonly rounded: "rounded-lg";
+        readonly pill: "rounded-full";
+        readonly cut: "rounded-[10px] [corner-shape:bevel]";
     };
 }, undefined, tailwind_variants.TVReturnTypeLike<{
-    variant: {
-        primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover";
-        gradient: "bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110";
-        secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3";
-        outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent";
-        ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg";
-        danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20";
+    readonly variant: {
+        readonly primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover";
+        readonly gradient: "bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110";
+        readonly secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3";
+        readonly outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent";
+        readonly ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg";
+        readonly danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20";
     };
-    size: {
-        sm: "h-8 px-3 text-xs";
-        md: "h-10 px-4 text-sm";
-        lg: "h-12 px-6 text-sm";
-        icon: "h-10 w-10";
+    readonly size: {
+        readonly sm: "h-8 px-3 text-xs";
+        readonly md: "h-10 px-4 text-sm";
+        readonly lg: "h-12 px-6 text-sm";
+        readonly icon: "h-10 w-10";
     };
-    shape: {
-        rounded: "rounded-lg";
-        pill: "rounded-full";
-        cut: "rounded-[10px] [corner-shape:bevel]";
+    readonly shape: {
+        readonly rounded: "rounded-lg";
+        readonly pill: "rounded-full";
+        readonly cut: "rounded-[10px] [corner-shape:bevel]";
     };
 }, undefined>>;
 type ButtonVariants = VariantProps<typeof buttonVariants>;

package/dist/button.js

@@ -2,7 +2,8 @@ import {
   Button,
   IconButton,
   buttonVariants
-} from "./chunk-Z6FUPB3Q.js";
+} from "./chunk-2NB27LM7.js";
+import "./chunk-2VNYHG4E.js";
 import "./chunk-43PTCDTL.js";
 export {
   Button,

package/dist/card.d.ts

@@ -3,164 +3,164 @@ import { VariantProps } from 'tailwind-variants';
 import * as React from 'react';
 
 declare const card: tailwind_variants.TVReturnType<{
-    radius: {
-        md: {
-            root: string;
+    readonly radius: {
+        readonly md: {
+            readonly root: "rounded-md";
         };
-        lg: {
-            root: string;
+        readonly lg: {
+            readonly root: "rounded-lg";
         };
-        xl: {
-            root: string;
+        readonly xl: {
+            readonly root: "rounded-xl";
         };
     };
-    tone: {
-        default: {};
-        elevated: {
-            root: string;
+    readonly tone: {
+        readonly default: {};
+        readonly elevated: {
+            readonly root: "bg-surface-2 shadow-md";
         };
-        glass: {
-            root: string;
+        readonly glass: {
+            readonly root: "bg-surface-1/70 backdrop-blur-md";
         };
     };
-    interactive: {
-        true: {
-            root: string;
+    readonly interactive: {
+        readonly true: {
+            readonly root: "kz-spotlight kz-lift hover:border-accent/50";
         };
     };
-    padding: {
-        none: {
-            body: string;
+    readonly padding: {
+        readonly none: {
+            readonly body: "p-0";
         };
-        sm: {
-            body: string;
+        readonly sm: {
+            readonly body: "p-3";
         };
-        md: {
-            body: string;
+        readonly md: {
+            readonly body: "p-4";
         };
-        lg: {
-            body: string;
+        readonly lg: {
+            readonly body: "p-6";
         };
     };
 }, {
-    root: string;
-    media: string;
-    image: string;
-    fallback: string;
-    overlay: string;
-    body: string;
-    title: string;
-    description: string;
-    stat: string;
-    statLabel: string;
-    statValue: string;
-    footer: string;
+    readonly root: string;
+    readonly media: "relative overflow-hidden bg-media";
+    readonly image: "h-full w-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-105";
+    readonly fallback: "flex h-full w-full items-center justify-center bg-linear-to-br from-accent/15 via-media to-accent-2/15 text-accent/60";
+    readonly overlay: "absolute z-10 flex items-center gap-1.5";
+    readonly body: "relative flex flex-1 flex-col gap-3";
+    readonly title: "line-clamp-1 text-sm font-semibold text-fg transition-colors group-hover:text-fg-accent";
+    readonly description: "line-clamp-2 text-xs text-fg-secondary";
+    readonly stat: "min-w-0";
+    readonly statLabel: "text-[10px] font-semibold uppercase tracking-wider text-fg-secondary";
+    readonly statValue: "font-display text-xl font-black tabular-nums text-fg";
+    readonly footer: "relative mt-auto flex items-center gap-2 border-t border-border-subtle pt-3 text-xs text-fg-secondary";
 }, undefined, {
-    radius: {
-        md: {
-            root: string;
+    readonly radius: {
+        readonly md: {
+            readonly root: "rounded-md";
         };
-        lg: {
-            root: string;
+        readonly lg: {
+            readonly root: "rounded-lg";
         };
-        xl: {
-            root: string;
+        readonly xl: {
+            readonly root: "rounded-xl";
         };
     };
-    tone: {
-        default: {};
-        elevated: {
-            root: string;
+    readonly tone: {
+        readonly default: {};
+        readonly elevated: {
+            readonly root: "bg-surface-2 shadow-md";
         };
-        glass: {
-            root: string;
+        readonly glass: {
+            readonly root: "bg-surface-1/70 backdrop-blur-md";
         };
     };
-    interactive: {
-        true: {
-            root: string;
+    readonly interactive: {
+        readonly true: {
+            readonly root: "kz-spotlight kz-lift hover:border-accent/50";
         };
     };
-    padding: {
-        none: {
-            body: string;
+    readonly padding: {
+        readonly none: {
+            readonly body: "p-0";
         };
-        sm: {
-            body: string;
+        readonly sm: {
+            readonly body: "p-3";
         };
-        md: {
-            body: string;
+        readonly md: {
+            readonly body: "p-4";
         };
-        lg: {
-            body: string;
+        readonly lg: {
+            readonly body: "p-6";
         };
     };
 }, {
-    root: string;
-    media: string;
-    image: string;
-    fallback: string;
-    overlay: string;
-    body: string;
-    title: string;
-    description: string;
-    stat: string;
-    statLabel: string;
-    statValue: string;
-    footer: string;
+    readonly root: string;
+    readonly media: "relative overflow-hidden bg-media";
+    readonly image: "h-full w-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-105";
+    readonly fallback: "flex h-full w-full items-center justify-center bg-linear-to-br from-accent/15 via-media to-accent-2/15 text-accent/60";
+    readonly overlay: "absolute z-10 flex items-center gap-1.5";
+    readonly body: "relative flex flex-1 flex-col gap-3";
+    readonly title: "line-clamp-1 text-sm font-semibold text-fg transition-colors group-hover:text-fg-accent";
+    readonly description: "line-clamp-2 text-xs text-fg-secondary";
+    readonly stat: "min-w-0";
+    readonly statLabel: "text-[10px] font-semibold uppercase tracking-wider text-fg-secondary";
+    readonly statValue: "font-display text-xl font-black tabular-nums text-fg";
+    readonly footer: "relative mt-auto flex items-center gap-2 border-t border-border-subtle pt-3 text-xs text-fg-secondary";
 }, tailwind_variants.TVReturnTypeLike<{
-    radius: {
-        md: {
-            root: string;
+    readonly radius: {
+        readonly md: {
+            readonly root: "rounded-md";
         };
-        lg: {
-            root: string;
+        readonly lg: {
+            readonly root: "rounded-lg";
         };
-        xl: {
-            root: string;
+        readonly xl: {
+            readonly root: "rounded-xl";
         };
     };
-    tone: {
-        default: {};
-        elevated: {
-            root: string;
+    readonly tone: {
+        readonly default: {};
+        readonly elevated: {
+            readonly root: "bg-surface-2 shadow-md";
         };
-        glass: {
-            root: string;
+        readonly glass: {
+            readonly root: "bg-surface-1/70 backdrop-blur-md";
         };
     };
-    interactive: {
-        true: {
-            root: string;
+    readonly interactive: {
+        readonly true: {
+            readonly root: "kz-spotlight kz-lift hover:border-accent/50";
         };
     };
-    padding: {
-        none: {
-            body: string;
+    readonly padding: {
+        readonly none: {
+            readonly body: "p-0";
         };
-        sm: {
-            body: string;
+        readonly sm: {
+            readonly body: "p-3";
         };
-        md: {
-            body: string;
+        readonly md: {
+            readonly body: "p-4";
         };
-        lg: {
-            body: string;
+        readonly lg: {
+            readonly body: "p-6";
         };
     };
 }, {
-    root: string;
-    media: string;
-    image: string;
-    fallback: string;
-    overlay: string;
-    body: string;
-    title: string;
-    description: string;
-    stat: string;
-    statLabel: string;
-    statValue: string;
-    footer: string;
+    readonly root: string;
+    readonly media: "relative overflow-hidden bg-media";
+    readonly image: "h-full w-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-105";
+    readonly fallback: "flex h-full w-full items-center justify-center bg-linear-to-br from-accent/15 via-media to-accent-2/15 text-accent/60";
+    readonly overlay: "absolute z-10 flex items-center gap-1.5";
+    readonly body: "relative flex flex-1 flex-col gap-3";
+    readonly title: "line-clamp-1 text-sm font-semibold text-fg transition-colors group-hover:text-fg-accent";
+    readonly description: "line-clamp-2 text-xs text-fg-secondary";
+    readonly stat: "min-w-0";
+    readonly statLabel: "text-[10px] font-semibold uppercase tracking-wider text-fg-secondary";
+    readonly statValue: "font-display text-xl font-black tabular-nums text-fg";
+    readonly footer: "relative mt-auto flex items-center gap-2 border-t border-border-subtle pt-3 text-xs text-fg-secondary";
 }>>;
 type CardVariants = VariantProps<typeof card>;
 type CardRootProps = React.ComponentProps<"div"> & Pick<CardVariants, "radius" | "tone" | "interactive"> & {

package/dist/card.js

@@ -1,3 +1,6 @@
+import {
+  defineRecipe
+} from "./chunk-2VNYHG4E.js";
 import {
   cn
 } from "./chunk-4LOMIQVX.js";
@@ -5,8 +8,9 @@ import {
 // src/card/card.tsx
 import { Slot } from "radix-ui";
 import { tv } from "tailwind-variants";
-import { jsx, jsxs } from "react/jsx-runtime";
-var card = tv({
+
+// src/card/recipe.ts
+var cardRecipe = defineRecipe({
   slots: {
     root: "group relative flex flex-col overflow-hidden border border-border-default bg-surface-1 text-fg transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
     media: "relative overflow-hidden bg-media",
@@ -29,6 +33,10 @@ var card = tv({
   },
   defaultVariants: { radius: "xl", tone: "default", padding: "md" }
 });
+
+// src/card/card.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var card = tv(cardRecipe);
 var slots = card();
 function CardRoot({ asChild, reveal, radius, tone, interactive, className, style, ...props }) {
   const Comp = asChild ? Slot.Root : "div";