@krizaka/ui 2.0.0-beta.0 → 2.0.0-beta.2

package/README.md

@@ -27,7 +27,9 @@ is one CSS file. The primitives: **React 19** and Tailwind CSS v4 with the Kriza
 
 ## Primitives
 
-> 2.0 beta: the first layer (atoms). Cards, dialogs, tabs, toasts and menus follow in the next betas.
+> 2.0 beta: the atoms, the structure of a page and what opens over it (cards, dialogs, sheets, toasts, popovers,
+> menus, tooltips), then navigation and input (tabs, chips, switches, sliders, checkboxes, radios, the command palette,
+> the two-step confirm button, progress).
 
 ### Install
 
@@ -47,6 +49,9 @@ import { Button, IconButton } from "@krizaka/ui/button";
 import { Badge } from "@krizaka/ui/badge";
 import { Field, Input } from "@krizaka/ui/field";
 import { ThemeProvider, ThemeScript, ThemeToggle } from "@krizaka/ui/theme";
+import { Card } from "@krizaka/ui/card";
+import { AlertDialog, Dialog } from "@krizaka/ui/dialog";
+import { toast, Toaster } from "@krizaka/ui/toast";
 
 <Button variant="primary" loading={saving}>{t("save")}</Button>
 <Button asChild variant="outline"><Link href="/docs">{t("docs")}</Link></Button>
@@ -56,6 +61,27 @@ import { ThemeProvider, ThemeScript, ThemeToggle } from "@krizaka/ui/theme";
   <Input id="email" invalid={!!error} aria-describedby="email-error" />
   {error && <Field.Error id="email-error">{error}</Field.Error>}
 </Field.Root>
+
+<Card.Root asChild interactive reveal={index}>
+  <Link href={href}>
+    <Card.Media><Card.Image src={cover} fallback={<PlayIcon />} /></Card.Media>
+    <Card.Body><Card.Title>{title}</Card.Title></Card.Body>
+  </Link>
+</Card.Root>
+
+<Dialog.Root>
+  <Dialog.Trigger asChild><Button>{t("edit")}</Button></Dialog.Trigger>
+  <Dialog.Content closeLabel={t("close")} placement="bottom">
+    <Dialog.Header><Dialog.Title>{t("editTitle")}</Dialog.Title></Dialog.Header>
+    <Dialog.Body>…</Dialog.Body>
+  </Dialog.Content>
+</Dialog.Root>
+
+<AlertDialog tone="danger" trigger={<Button variant="danger">{t("delete")}</Button>} title={t("deleteTitle")}
+  confirmLabel={t("delete")} cancelLabel={t("cancel")} onConfirm={() => deleteVideo(id)} />
+
+// once, in the root layout — then toast.success(t("saved")) anywhere on the client
+<Toaster label={t("notifications")} closeLabel={t("dismiss")} />
 ```
 
 **React 19 is required by the primitives** (`ref` is a prop, no `forwardRef`). The package keeps `react >= 18` as its
@@ -64,7 +90,8 @@ peer range, because the marks and the motion still run on React 18: one `package
 
 ### The component contract (12 points)
 
-1. **Composed when there is structure** (`Field.*`, `Avatar.Group`), **flat for an atom** (`Button`, `Badge`, `Input`).
+1. **Composed when there is structure** (`Card.*`, `Dialog.*`, `Field.*`, `Avatar.Group`), **flat for an atom**
+   (`Button`, `Badge`, `Input`, `Stat`).
 2. **Variants exported next to the component** (`buttonVariants`, `badgeVariants`): a `<Link>` or a Server Component
    is styled without importing the component.
 3. **`asChild`** (Radix `Slot`) rather than `as`: props, `className` and `ref` are merged into the child.
@@ -74,7 +101,8 @@ peer range, because the marks and the motion still run on React 18: one `package
 6. **Controlled and uncontrolled**: `value`/`defaultValue` + `onValueChange`, `open`/`defaultOpen` + `onOpenChange`.
 7. **State is exposed as `data-*`** (`data-tone`, `data-loading`, `data-invalid`, `data-urgent`, `data-mode`): a
    product styles a state without a new variant.
-8. **Server by default**: `"use client"` only on the entries with a hook or a portal (`avatar`, `theme`, `countdown`).
+8. **Server by default**: `"use client"` only on the entries with a hook or a portal (`avatar`, `theme`, `countdown`,
+   `dialog`, `toast`, `popover`, `dropdown-menu`, `tooltip`).
    One build entry per component; the directive is kept per entry.
 9. **React 19 minimum for the primitives**; the marks stay `react >= 18`.
 10. **Accessibility is delegated**: non-trivial interactions on Radix UI (`radix-ui`), the command palette on cmdk,
@@ -101,6 +129,26 @@ Colours are roles of the preset (`bg-surface-2`, `text-fg-secondary`, `border-bo
 | `@krizaka/ui/empty-state` | `EmptyState` (`icon`, `title`, `description`, `action`) | server |
 | `@krizaka/ui/spinner` | `Spinner` (`label`, `size`) | server |
 | `@krizaka/ui/countdown` | `Countdown` (`target`, `label`, `units`, `size`, `urgentBelowMs`, `skewMs`), `useCountdown`, `splitDuration` | client |
+| `@krizaka/ui/card` | `Card.Root` (`asChild`, `reveal`, `radius` md·lg·xl, `tone` default·elevated·glass, `interactive`), `Card.Media` (`aspect` video·square·portrait·auto), `Card.Image` (`fallback`), `Card.Overlay` (`corner`), `Card.Body` (`padding`), `Card.Title` (`as`), `Card.Description`, `Card.Stat` (`label`), `Card.Footer`; `card` (the slots) | server |
+| `@krizaka/ui/dialog` | `Dialog.Root/Trigger/Content/Header/Title/Description/Body/Footer/Close` (`placement` center·bottom·right, `size` sm·md·lg, `closeLabel` required unless `hideClose`, `dismissible={false}`: no close on Escape or outside click), `Sheet` (= `placement="bottom"`), `AlertDialog` (`title`, `description`, `confirmLabel`, `cancelLabel`, `tone` danger·primary, async `onConfirm`, `trigger`) | client |
+| `@krizaka/ui/toast` | `Toaster` (sonner styled by roles: `label`, `closeLabel`, `position`, `closeButton`; `richColors` off), `toast` (`.success/.warning/.error/.info/.custom`…) | client |
+| `@krizaka/ui/popover` | `Popover.Root/Trigger/Anchor/Content/Close` | client |
+| `@krizaka/ui/dropdown-menu` | `DropdownMenu.Root/Trigger/Content/Item/CheckboxItem/Label/Separator/Group` (`Item` `tone` default·danger), `menu` (the slots) | client |
+| `@krizaka/ui/tooltip` | `Tooltip` (`content`, `delayDuration` 300, `side`, `open`/`defaultOpen`), `TooltipProvider` | client |
+| `@krizaka/ui/stat` | `Stat` (`label`, `value`, `hint`, `trend` up·down·flat, `trendLabel`) | server |
+| `@krizaka/ui/page-header` | `PageHeader` (`title`, `description`, `actions`, `breadcrumb`, `as` h1·h2) | server |
+| `@krizaka/ui/alert` | `Alert` (`tone` info·success·warning·danger, `icon`, `title`, `action`; `role="alert"` for danger and warning, `status` otherwise), `alertVariants` | server |
+| `@krizaka/ui/separator` | `Separator` (`orientation`, `decorative`, Radix), `separatorVariants` | server |
+| `@krizaka/ui/kbd` | `Kbd` (`size` sm·md), `kbdVariants` | server |
+| `@krizaka/ui/tabs` | `Tabs.Root/List/Trigger/Content` (`variant` underline·segmented·pills on the root, `orientation`, `value`/`defaultValue` + `onValueChange`), `tabs` (the slots) | client |
+| `@krizaka/ui/chip` | `Chip` (`selected`/`defaultSelected` + `onSelectedChange`, `size` sm·md; `removable` + `removeLabel` + `onRemove`), `Chip.Group` (`type` single·multiple, `label`, `required` for single), `chip` (the slots) | client |
+| `@krizaka/ui/switch` | `Switch` (`checked`/`defaultChecked` + `onCheckedChange`, `label` unless a visible label names it, `size` sm·md, `invalid`), `switchVariants` | client |
+| `@krizaka/ui/slider` | `Slider` (`value`: a number or a `[min, max]` range, `onValueChange`, `onValueCommit`, `label`, `thumbLabels`, `formatValue` → aria-valuetext, `showLabel`, `origin`), `slider` (the slots) | client |
+| `@krizaka/ui/checkbox` | `Checkbox` (`checked` true·false·"indeterminate" + `onCheckedChange`, `invalid`, its words as children) — sits in a `Field` | client |
+| `@krizaka/ui/radio-group` | `RadioGroup.Root` (`label`, `orientation`, `invalid`), `RadioGroup.Item` (a dot and its words), `RadioGroup.Card` (a whole card is the radio) | client |
+| `@krizaka/ui/command` | `Command.Root` (`label`, `shouldFilter`…) `/Input` (`placeholder`, `trailing`) `/List` (`label`) `/Empty` (`emptyLabel`) `/Loading/Group/Item/Separator/Shortcut` on cmdk; `CommandDialog` (`label`, `open`/`onOpenChange`, `footer`, `contentProps`) | client |
+| `@krizaka/ui/confirm-button` | `ConfirmButton` (two presses: `confirmLabel`, `onConfirm`, `timeoutMs` 4000, `label` for an icon, `armedContent`; the `Button` variants), `confirmArmed` | client |
+| `@krizaka/ui/progress` | `Progress` (`variant` bar·ring, `size` sm·md·lg, `value`/`max`, indeterminate without a value, `label`, `valueText`, a ring's centre as children) | server |
 | `@krizaka/ui` | the marks, `MotionObserver`, `RotatingWord`, `cx` (unchanged) | client |
 | `@krizaka/ui/native` | the marks for React Native (unchanged) | native |
 | `@krizaka/ui/motion.css`, `@krizaka/ui/tailwind.css` | the motion signature; the `@source` of the primitives' classes | CSS |
@@ -170,6 +218,7 @@ import { MotionObserver, RotatingWord } from "@krizaka/ui";
 | `kz-lift` | A card rising under the pointer |
 | `kz-gradient-text`, `kz-marquee` | Drifting gradient text, endless bands |
 | `kz-overlay`, `kz-dialog`, `kz-pop`, `kz-fade` | Backdrops, dialogs (from the bottom on phones), menus, views swapped in place |
+| `kz-progress` | The indeterminate progress bar's travelling segment |
 
 With Tailwind CSS v4, give every transition the same easing:
 

package/dist/alert.d.ts

@@ -0,0 +1,95 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as React from 'react';
+
+declare const alertVariants: tailwind_variants.TVReturnType<{
+    tone: {
+        info: {
+            root: string;
+            icon: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+        };
+        danger: {
+            root: string;
+            icon: string;
+        };
+    };
+}, {
+    root: string;
+    icon: string;
+    content: string;
+    title: string;
+    description: string;
+    action: string;
+}, undefined, {
+    tone: {
+        info: {
+            root: string;
+            icon: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+        };
+        danger: {
+            root: string;
+            icon: string;
+        };
+    };
+}, {
+    root: string;
+    icon: string;
+    content: string;
+    title: string;
+    description: string;
+    action: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    tone: {
+        info: {
+            root: string;
+            icon: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+        };
+        danger: {
+            root: string;
+            icon: string;
+        };
+    };
+}, {
+    root: string;
+    icon: string;
+    content: string;
+    title: string;
+    description: string;
+    action: string;
+}>>;
+type AlertTone = NonNullable<VariantProps<typeof alertVariants>["tone"]>;
+type AlertProps = Omit<React.ComponentProps<"div">, "title"> & {
+    tone?: AlertTone;
+    /** A decorative icon (hidden from assistive technology). */
+    icon?: React.ReactNode;
+    title?: React.ReactNode;
+    /** What to do: a Button, a link. */
+    action?: React.ReactNode;
+};
+declare function Alert({ tone, icon, title, action, className, children, ...props }: AlertProps): React.JSX.Element;
+
+export { Alert, type AlertProps, type AlertTone, alertVariants };

package/dist/alert.js

@@ -0,0 +1,38 @@
+// src/alert/alert.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var alertVariants = tv({
+  slots: {
+    root: "relative flex w-full items-start gap-3 rounded-xl border p-4 text-sm text-fg",
+    icon: "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center [&>svg]:h-5 [&>svg]:w-5",
+    content: "flex min-w-0 flex-1 flex-col gap-1",
+    title: "font-semibold text-fg",
+    description: "text-fg-secondary",
+    action: "flex shrink-0 items-center gap-2 self-center"
+  },
+  variants: {
+    tone: {
+      info: { root: "border-info/40 bg-info/10", icon: "text-info" },
+      success: { root: "border-success/40 bg-success/10", icon: "text-success" },
+      warning: { root: "border-warning/50 bg-warning/10", icon: "text-warning" },
+      danger: { root: "border-danger/50 bg-danger/10", icon: "text-danger" }
+    }
+  },
+  defaultVariants: { tone: "info" }
+});
+function Alert({ tone = "info", icon, title, action, className, children, ...props }) {
+  const s = alertVariants({ tone });
+  return /* @__PURE__ */ jsxs("div", { role: tone === "danger" || tone === "warning" ? "alert" : "status", "data-tone": tone, className: s.root({ className }), ...props, children: [
+    icon && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: s.icon(), children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: s.content(), children: [
+      title && /* @__PURE__ */ jsx("p", { className: s.title(), children: title }),
+      children && /* @__PURE__ */ jsx("div", { className: s.description(), children })
+    ] }),
+    action && /* @__PURE__ */ jsx("div", { className: s.action(), children: action })
+  ] });
+}
+export {
+  Alert,
+  alertVariants
+};
+//# sourceMappingURL=alert.js.map

package/dist/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/alert/alert.tsx"],"sourcesContent":["// Server-safe. A message in the flow of the page (not a toast): a tone, an icon, a title, a text, an action.\n// danger and warning are announced at once (role=\"alert\"); info and success politely (role=\"status\").\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\n// Soft tones (a tint, a tinted border, a coloured icon): the text stays a text role — the invariant status tokens are\n// too light for small text on a light surface (WCAG AA).\nexport const alertVariants = tv({\n  slots: {\n    root: \"relative flex w-full items-start gap-3 rounded-xl border p-4 text-sm text-fg\",\n    icon: \"mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center [&>svg]:h-5 [&>svg]:w-5\",\n    content: \"flex min-w-0 flex-1 flex-col gap-1\",\n    title: \"font-semibold text-fg\",\n    description: \"text-fg-secondary\",\n    action: \"flex shrink-0 items-center gap-2 self-center\",\n  },\n  variants: {\n    tone: {\n      info: { root: \"border-info/40 bg-info/10\", icon: \"text-info\" },\n      success: { root: \"border-success/40 bg-success/10\", icon: \"text-success\" },\n      warning: { root: \"border-warning/50 bg-warning/10\", icon: \"text-warning\" },\n      danger: { root: \"border-danger/50 bg-danger/10\", icon: \"text-danger\" },\n    },\n  },\n  defaultVariants: { tone: \"info\" },\n});\n\nexport type AlertTone = NonNullable<VariantProps<typeof alertVariants>[\"tone\"]>;\n\nexport type AlertProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  tone?: AlertTone;\n  /** A decorative icon (hidden from assistive technology). */\n  icon?: React.ReactNode;\n  title?: React.ReactNode;\n  /** What to do: a Button, a link. */\n  action?: React.ReactNode;\n};\n\nexport function Alert({ tone = \"info\", icon, title, action, className, children, ...props }: AlertProps) {\n  const s = alertVariants({ tone });\n  return (\n    <div role={tone === \"danger\" || tone === \"warning\" ? \"alert\" : \"status\"} data-tone={tone} className={s.root({ className })} {...props}>\n      {icon && (\n        <span aria-hidden className={s.icon()}>\n          {icon}\n        </span>\n      )}\n      <div className={s.content()}>\n        {title && <p className={s.title()}>{title}</p>}\n        {children && <div className={s.description()}>{children}</div>}\n      </div>\n      {action && <div className={s.action()}>{action}</div>}\n    </div>\n  );\n}\n"],"mappings":";AAGA,SAAS,UAA6B;AAwC9B,cAIF,YAJE;AApCD,IAAM,gBAAgB,GAAG;AAAA,EAC9B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,aAAa;AAAA,IACb,QAAQ;AAAA,EACV;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM,EAAE,MAAM,6BAA6B,MAAM,YAAY;AAAA,MAC7D,SAAS,EAAE,MAAM,mCAAmC,MAAM,eAAe;AAAA,MACzE,SAAS,EAAE,MAAM,mCAAmC,MAAM,eAAe;AAAA,MACzE,QAAQ,EAAE,MAAM,iCAAiC,MAAM,cAAc;AAAA,IACvE;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,OAAO;AAClC,CAAC;AAaM,SAAS,MAAM,EAAE,OAAO,QAAQ,MAAM,OAAO,QAAQ,WAAW,UAAU,GAAG,MAAM,GAAe;AACvG,QAAM,IAAI,cAAc,EAAE,KAAK,CAAC;AAChC,SACE,qBAAC,SAAI,MAAM,SAAS,YAAY,SAAS,YAAY,UAAU,UAAU,aAAW,MAAM,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC7H;AAAA,YACC,oBAAC,UAAK,eAAW,MAAC,WAAW,EAAE,KAAK,GACjC,gBACH;AAAA,IAEF,qBAAC,SAAI,WAAW,EAAE,QAAQ,GACvB;AAAA,eAAS,oBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,MACzC,YAAY,oBAAC,SAAI,WAAW,EAAE,YAAY,GAAI,UAAS;AAAA,OAC1D;AAAA,IACC,UAAU,oBAAC,SAAI,WAAW,EAAE,OAAO,GAAI,kBAAO;AAAA,KACjD;AAEJ;","names":[]}

package/dist/button-G5qY4qSY.d.ts

@@ -0,0 +1,68 @@
+import * as tailwind_variants from 'tailwind-variants';
+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";
+        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-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";
+    };
+    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";
+    };
+    shape: {
+        rounded: "rounded-lg";
+        pill: "rounded-full";
+    };
+}, undefined, string, {
+    variant: {
+        primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover";
+        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-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";
+    };
+    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";
+    };
+    shape: {
+        rounded: "rounded-lg";
+        pill: "rounded-full";
+    };
+}, undefined, tailwind_variants.TVReturnTypeLike<{
+    variant: {
+        primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover";
+        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-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";
+    };
+    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";
+    };
+    shape: {
+        rounded: "rounded-lg";
+        pill: "rounded-full";
+    };
+}, undefined>>;
+type ButtonVariants = VariantProps<typeof buttonVariants>;
+type ButtonProps = React.ComponentProps<"button"> & ButtonVariants & {
+    /** 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) — the product adds a spinner if it wants one. */
+    loading?: boolean;
+};
+
+export type { ButtonProps as B, ButtonVariants as a };

package/dist/card.d.ts

@@ -0,0 +1,227 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as React from 'react';
+
+declare const card: tailwind_variants.TVReturnType<{
+    radius: {
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+    tone: {
+        default: {};
+        elevated: {
+            root: string;
+        };
+        glass: {
+            root: string;
+        };
+    };
+    interactive: {
+        true: {
+            root: string;
+        };
+    };
+    padding: {
+        none: {
+            body: string;
+        };
+        sm: {
+            body: string;
+        };
+        md: {
+            body: string;
+        };
+        lg: {
+            body: string;
+        };
+    };
+}, {
+    root: string;
+    media: string;
+    image: string;
+    fallback: string;
+    overlay: string;
+    body: string;
+    title: string;
+    description: string;
+    stat: string;
+    statLabel: string;
+    statValue: string;
+    footer: string;
+}, undefined, {
+    radius: {
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+    tone: {
+        default: {};
+        elevated: {
+            root: string;
+        };
+        glass: {
+            root: string;
+        };
+    };
+    interactive: {
+        true: {
+            root: string;
+        };
+    };
+    padding: {
+        none: {
+            body: string;
+        };
+        sm: {
+            body: string;
+        };
+        md: {
+            body: string;
+        };
+        lg: {
+            body: string;
+        };
+    };
+}, {
+    root: string;
+    media: string;
+    image: string;
+    fallback: string;
+    overlay: string;
+    body: string;
+    title: string;
+    description: string;
+    stat: string;
+    statLabel: string;
+    statValue: string;
+    footer: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    radius: {
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+    tone: {
+        default: {};
+        elevated: {
+            root: string;
+        };
+        glass: {
+            root: string;
+        };
+    };
+    interactive: {
+        true: {
+            root: string;
+        };
+    };
+    padding: {
+        none: {
+            body: string;
+        };
+        sm: {
+            body: string;
+        };
+        md: {
+            body: string;
+        };
+        lg: {
+            body: string;
+        };
+    };
+}, {
+    root: string;
+    media: string;
+    image: string;
+    fallback: string;
+    overlay: string;
+    body: string;
+    title: string;
+    description: string;
+    stat: string;
+    statLabel: string;
+    statValue: string;
+    footer: string;
+}>>;
+type CardVariants = VariantProps<typeof card>;
+type CardRootProps = React.ComponentProps<"div"> & Pick<CardVariants, "radius" | "tone" | "interactive"> & {
+    /** Renders the child (a link, an article) instead of the <div>, with props, classes and ref merged. */
+    asChild?: boolean;
+    /** Enters on scroll (MotionObserver): the index in the grid becomes the delay (50 ms a step, 8 steps at most). */
+    reveal?: number;
+};
+declare function CardRoot({ asChild, reveal, radius, tone, interactive, className, style, ...props }: CardRootProps): React.JSX.Element;
+declare const ASPECT: {
+    readonly video: "aspect-video";
+    readonly square: "aspect-square";
+    readonly portrait: "aspect-[3/4]";
+    readonly auto: "";
+};
+type CardMediaProps = React.ComponentProps<"div"> & {
+    aspect?: keyof typeof ASPECT;
+};
+declare function CardMedia({ aspect, className, ...props }: CardMediaProps): React.JSX.Element;
+type CardImageProps = Omit<React.ComponentProps<"img">, "src"> & {
+    src?: string | null;
+    /** Shown when there is no image: an icon, an illustration (decorative). */
+    fallback?: React.ReactNode;
+};
+/** The image of a media, or its `fallback` when there is none. `alt` is empty by default: the title names the card. */
+declare function CardImage({ src, alt, fallback, className, ...props }: CardImageProps): React.JSX.Element;
+declare const CORNER: {
+    readonly "top-left": "left-2.5 top-2.5";
+    readonly "top-right": "right-2.5 top-2.5";
+    readonly "bottom-left": "bottom-2.5 left-2.5";
+    readonly "bottom-right": "bottom-2.5 right-2.5";
+};
+type CardOverlayProps = React.ComponentProps<"div"> & {
+    corner?: keyof typeof CORNER;
+};
+/** What sits on the media (badges, a caption). `scrim` and `fg-on-media` are invariant: nothing to do for light. */
+declare function CardOverlay({ corner, className, ...props }: CardOverlayProps): React.JSX.Element;
+type CardBodyProps = React.ComponentProps<"div"> & Pick<CardVariants, "padding">;
+declare function CardBody({ padding, className, ...props }: CardBodyProps): React.JSX.Element;
+type CardTitleProps = React.ComponentProps<"h3"> & {
+    as?: "h2" | "h3" | "h4";
+};
+declare function CardTitle({ as: Tag, className, ...props }: CardTitleProps): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+type CardStatProps = React.ComponentProps<"div"> & {
+    label: React.ReactNode;
+};
+/** A figure put forward: the label in capitals, the value in tabular digits. */
+declare function CardStat({ label, className, children, ...props }: CardStatProps): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/** `Card.Root/Media/Image/Overlay/Body/Title/Description/Stat/Footer`. */
+declare const Card: {
+    Root: typeof CardRoot;
+    Media: typeof CardMedia;
+    Image: typeof CardImage;
+    Overlay: typeof CardOverlay;
+    Body: typeof CardBody;
+    Title: typeof CardTitle;
+    Description: typeof CardDescription;
+    Stat: typeof CardStat;
+    Footer: typeof CardFooter;
+};
+
+export { Card, CardBody, type CardBodyProps, CardDescription, CardFooter, CardImage, type CardImageProps, CardMedia, type CardMediaProps, CardOverlay, type CardOverlayProps, CardRoot, type CardRootProps, CardStat, type CardStatProps, CardTitle, type CardTitleProps, card };

package/dist/card.js

@@ -0,0 +1,108 @@
+import {
+  cn
+} from "./chunk-FJDSLNXK.js";
+
+// src/card/card.tsx
+import { Slot } from "radix-ui";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var card = tv({
+  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",
+    image: "h-full w-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-105",
+    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",
+    overlay: "absolute z-10 flex items-center gap-1.5",
+    body: "relative flex flex-1 flex-col gap-3",
+    title: "line-clamp-1 text-sm font-semibold text-fg transition-colors group-hover:text-accent",
+    description: "line-clamp-2 text-xs text-fg-secondary",
+    stat: "min-w-0",
+    statLabel: "text-[10px] font-semibold uppercase tracking-wider text-fg-secondary",
+    statValue: "font-display text-xl font-black tabular-nums text-fg",
+    footer: "relative mt-auto flex items-center gap-2 border-t border-border-subtle pt-3 text-xs text-fg-secondary"
+  },
+  variants: {
+    radius: { md: { root: "rounded-md" }, lg: { root: "rounded-lg" }, xl: { root: "rounded-xl" } },
+    tone: { default: {}, elevated: { root: "bg-surface-2 shadow-md" }, glass: { root: "bg-surface-1/70 backdrop-blur-md" } },
+    interactive: { true: { root: "kz-spotlight kz-lift hover:border-accent/50" } },
+    padding: { none: { body: "p-0" }, sm: { body: "p-3" }, md: { body: "p-4" }, lg: { body: "p-6" } }
+  },
+  defaultVariants: { radius: "xl", tone: "default", padding: "md" }
+});
+var slots = card();
+function CardRoot({ asChild, reveal, radius, tone, interactive, className, style, ...props }) {
+  const Comp = asChild ? Slot.Root : "div";
+  const revealStyle = reveal === void 0 ? style : { ...style, "--kz-delay": `${Math.min(Math.max(reveal, 0), 8) * 50}ms` };
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-reveal": reveal === void 0 ? void 0 : "",
+      "data-interactive": interactive ? "" : void 0,
+      style: revealStyle,
+      className: card({ radius, tone, interactive }).root({ className }),
+      ...props
+    }
+  );
+}
+var ASPECT = { video: "aspect-video", square: "aspect-square", portrait: "aspect-[3/4]", auto: "" };
+function CardMedia({ aspect = "video", className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-aspect": aspect, className: slots.media({ className: cn(ASPECT[aspect], className) }), ...props });
+}
+function CardImage({ src, alt = "", fallback, className, ...props }) {
+  if (!src) {
+    return /* @__PURE__ */ jsx("div", { "data-fallback": "", "aria-hidden": true, className: slots.fallback({ className }), children: fallback });
+  }
+  return /* @__PURE__ */ jsx("img", { src, alt, loading: "lazy", decoding: "async", className: slots.image({ className }), ...props });
+}
+var CORNER = {
+  "top-left": "left-2.5 top-2.5",
+  "top-right": "right-2.5 top-2.5",
+  "bottom-left": "bottom-2.5 left-2.5",
+  "bottom-right": "bottom-2.5 right-2.5"
+};
+function CardOverlay({ corner = "top-left", className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-corner": corner, className: slots.overlay({ className: cn(CORNER[corner], className) }), ...props });
+}
+function CardBody({ padding, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: card({ padding }).body({ className }), ...props });
+}
+function CardTitle({ as: Tag = "h3", className, ...props }) {
+  return /* @__PURE__ */ jsx(Tag, { className: slots.title({ className }), ...props });
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx("p", { className: slots.description({ className }), ...props });
+}
+function CardStat({ label, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: slots.stat({ className }), ...props, children: [
+    /* @__PURE__ */ jsx("p", { className: slots.statLabel(), children: label }),
+    /* @__PURE__ */ jsx("p", { className: slots.statValue(), children })
+  ] });
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: slots.footer({ className }), ...props });
+}
+var Card = {
+  Root: CardRoot,
+  Media: CardMedia,
+  Image: CardImage,
+  Overlay: CardOverlay,
+  Body: CardBody,
+  Title: CardTitle,
+  Description: CardDescription,
+  Stat: CardStat,
+  Footer: CardFooter
+};
+export {
+  Card,
+  CardBody,
+  CardDescription,
+  CardFooter,
+  CardImage,
+  CardMedia,
+  CardOverlay,
+  CardRoot,
+  CardStat,
+  CardTitle,
+  card
+};
+//# sourceMappingURL=card.js.map