@krizaka/ui 1.3.0 → 2.0.0-beta.1

package/README.md

@@ -4,9 +4,10 @@
 
 # @krizaka/ui
 
-**The Krizaka brand layer, shared by every product.**
-The animated marks of Krizaka, Orazaka and Orochia, and the Krizaka motion signature — one easing, one way to enter,
-reveal, roll, shine and open.
+**The Krizaka front-end platform's components, shared by every product.**
+The primitives (button, badge, avatar, field, theme, countdown…) on the semantic `--kz-*` tokens, the animated marks
+of Krizaka, Orazaka and Orochia, and the Krizaka motion signature — one easing, one way to enter, reveal, roll, shine
+and open.
 
 [![npm](https://img.shields.io/npm/v/@krizaka/ui?color=3b82f6&label=npm)](https://www.npmjs.com/package/@krizaka/ui)
 [![CI](https://github.com/krizaka/krizaka-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/krizaka/krizaka-ui/actions/workflows/ci.yml)
@@ -20,9 +21,141 @@ reveal, roll, shine and open.
 npm install @krizaka/ui
 ```
 
-React 18 or 19. No framework, no CSS library required: the marks carry their own styles, the motion is one CSS file.
+The marks and the motion: React 18 or 19, no framework, no CSS library — the marks carry their own styles, the motion
+is one CSS file. The primitives: **React 19** and Tailwind CSS v4 with the Krizaka preset (below).
 
 
+## Primitives
+
+> 2.0 beta: the atoms, then the structure of a page and what opens over it (cards, dialogs, sheets, toasts, popovers,
+> menus, tooltips). Tabs, chips, switches and the command palette follow in the next betas.
+
+### Install
+
+```bash
+npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss
+```
+
+```css
+/* app/globals.css — the preset (tokens as utilities), then the classes the primitives use */
+@import "tailwindcss";
+@import "@krizaka/tailwind";
+@import "@krizaka/ui/tailwind.css";
+```
+
+```tsx
+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>
+<Badge tone="danger" dot pulse>{t("endsSoon")}</Badge>
+<Field.Root>
+  <Field.Label htmlFor="email">{t("email")}</Field.Label>
+  <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
+peer range, because the marks and the motion still run on React 18: one `package.json` cannot hold both ranges.
+`tailwindcss` and `@krizaka/tailwind` are optional peers — a native app or a marks-only site never installs them.
+
+### The component contract (12 points)
+
+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.
+4. **`className` is always merged last** (tailwind-merge, through `cn`): the product's override wins.
+5. **Words are props** (`label`, `closeLabel`, `units`, `title`) — there is no `t()` in the kit. Each app re-exports the
+   primitives with its words from its own `components/ui/`.
+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`,
+   `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,
+    toasts on sonner — no hand-written focus trap.
+11. **Every primitive ships** types, a story (every variant, dark and light, screenshot-tested), an RTL + axe test and
+    an entry here.
+12. **Motion**: `prefers-reduced-motion` is honoured (`motion-safe:`); no component animates a layout property.
+
+Colours are roles of the preset (`bg-surface-2`, `text-fg-secondary`, `border-border-default`, `text-accent`,
+`text-danger`), never a palette step nor `light:`: a theme — dark, light or a product's — is a set of tokens.
+
+### Entries
+
+| Entry | Exports | Runs |
+| :-- | :-- | :-- |
+| `@krizaka/ui/cn` | `cn(...classes)` — clsx + tailwind-merge (the engine `tailwind-variants` ships) | server |
+| `@krizaka/ui/slot` | `Slot`, `VisuallyHidden` (Radix) | server |
+| `@krizaka/ui/button` | `Button` (`variant` primary·secondary·outline·ghost·danger, `size` sm·md·lg·icon, `shape` rounded·pill, `loading`, `asChild`), `IconButton` (`label` required), `buttonVariants` | server |
+| `@krizaka/ui/badge` | `Badge` (`tone` neutral·accent·success·warning·danger·scrim, `size` sm·md, `dot`, `pulse`), `badgeVariants` | server |
+| `@krizaka/ui/avatar` | `Avatar` (`src`, `alt`, `fallback`, `size` xs·sm·md·lg·xl), `Avatar.Group` (`max`) | client |
+| `@krizaka/ui/field` | `Field.Root/Label/Hint/Error`, `Input`, `Textarea`, `Select` (native, styled) — `invalid` | server |
+| `@krizaka/ui/theme` | `ThemeScript` (in `<head>`, no flash), `ThemeProvider`, `useTheme()` → `{ mode, setMode, theme, setTheme }`, `ThemeToggle` (`label`) | client |
+| `@krizaka/ui/skeleton` | `Skeleton` (`shape` text·circle·rect) | server |
+| `@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), `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` | 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 |
+
+The theme is one mechanism for every product: dark by default, `html.light` for light, `html.theme-<name>` for a named
+theme, persisted as `kz-theme` (and `kz-theme-name`).
+
+```tsx
+// app/layout.tsx
+<html lang={locale} suppressHydrationWarning>
+  <head><ThemeScript /></head>
+  <body><ThemeProvider>{children}</ThemeProvider></body>
+</html>
+
+<ThemeToggle label={(mode) => t(`theme.${mode}`)} />
+```
+
 ## React Native
 
 The marks have one geometry; `@krizaka/ui/native` draws it with `react-native-svg` for the apps

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/avatar.d.ts

@@ -0,0 +1,98 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as React from 'react';
+
+declare const avatar: tailwind_variants.TVReturnType<{
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+    group: string;
+}, undefined, {
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+    group: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+    group: string;
+}>>;
+type AvatarSize = NonNullable<VariantProps<typeof avatar>["size"]>;
+type AvatarProps = Omit<React.ComponentProps<"span">, "children"> & {
+    src?: string | null;
+    /** The image's text alternative (the person's name); empty when a visible name sits next to the avatar. */
+    alt?: string;
+    /** Shown while the image loads, when it fails or when there is none: initials, an icon. */
+    fallback?: React.ReactNode;
+    size?: AvatarSize;
+};
+declare function AvatarRoot({ src, alt, fallback, size, className, ...props }: AvatarProps): React.JSX.Element;
+type AvatarGroupProps = React.ComponentProps<"div"> & {
+    /** How many avatars are shown; the rest becomes a `+n` avatar. */
+    max?: number;
+    /** The size of the `+n` avatar (match the avatars of the group). */
+    size?: AvatarSize;
+};
+/** Overlapping avatars; past `max`, a `+n` avatar counts the rest. */
+declare function AvatarGroup({ max, size, className, children, ...props }: AvatarGroupProps): React.JSX.Element;
+/** `Avatar` (an image with a fallback) and `Avatar.Group`. */
+declare const Avatar: typeof AvatarRoot & {
+    Group: typeof AvatarGroup;
+};
+
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, AvatarRoot, type AvatarSize };

package/dist/avatar.js

@@ -0,0 +1,48 @@
+"use client";
+
+// src/avatar/avatar.tsx
+import { Avatar as AvatarPrimitive } from "radix-ui";
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var avatar = tv({
+  slots: {
+    root: "relative inline-flex shrink-0 overflow-hidden rounded-full bg-surface-3 align-middle",
+    image: "h-full w-full object-cover",
+    fallback: "flex h-full w-full items-center justify-center font-semibold uppercase text-fg-secondary",
+    group: "flex items-center -space-x-2 [&>*]:ring-2 [&>*]:ring-surface-0"
+  },
+  variants: {
+    size: {
+      xs: { root: "h-5 w-5 text-[9px]" },
+      sm: { root: "h-8 w-8 text-xs" },
+      md: { root: "h-10 w-10 text-sm" },
+      lg: { root: "h-14 w-14 text-base" },
+      xl: { root: "h-20 w-20 text-lg" }
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+function AvatarRoot({ src, alt = "", fallback, size, className, ...props }) {
+  const s = avatar({ size });
+  return /* @__PURE__ */ jsxs(AvatarPrimitive.Root, { "data-size": size ?? "md", className: s.root({ className }), ...props, children: [
+    src && /* @__PURE__ */ jsx(AvatarPrimitive.Image, { src, alt, className: s.image() }),
+    /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, { delayMs: src ? 300 : 0, className: s.fallback(), children: fallback })
+  ] });
+}
+function AvatarGroup({ max, size, className, children, ...props }) {
+  const items = React.Children.toArray(children);
+  const shown = max === void 0 ? items : items.slice(0, max);
+  const rest = items.length - shown.length;
+  return /* @__PURE__ */ jsxs("div", { className: avatar().group({ className }), ...props, children: [
+    shown,
+    rest > 0 && /* @__PURE__ */ jsx(AvatarRoot, { size, fallback: `+${rest}` })
+  ] });
+}
+var Avatar = Object.assign(AvatarRoot, { Group: AvatarGroup });
+export {
+  Avatar,
+  AvatarGroup,
+  AvatarRoot
+};
+//# sourceMappingURL=avatar.js.map

package/dist/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/avatar/avatar.tsx"],"sourcesContent":["// Client: Radix tracks the image's loading state and shows the fallback until it has loaded (or when it fails).\nimport { Avatar as AvatarPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nconst avatar = tv({\n  slots: {\n    root: \"relative inline-flex shrink-0 overflow-hidden rounded-full bg-surface-3 align-middle\",\n    image: \"h-full w-full object-cover\",\n    fallback: \"flex h-full w-full items-center justify-center font-semibold uppercase text-fg-secondary\",\n    group: \"flex items-center -space-x-2 [&>*]:ring-2 [&>*]:ring-surface-0\",\n  },\n  variants: {\n    size: {\n      xs: { root: \"h-5 w-5 text-[9px]\" },\n      sm: { root: \"h-8 w-8 text-xs\" },\n      md: { root: \"h-10 w-10 text-sm\" },\n      lg: { root: \"h-14 w-14 text-base\" },\n      xl: { root: \"h-20 w-20 text-lg\" },\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type AvatarSize = NonNullable<VariantProps<typeof avatar>[\"size\"]>;\n\nexport type AvatarProps = Omit<React.ComponentProps<\"span\">, \"children\"> & {\n  src?: string | null;\n  /** The image's text alternative (the person's name); empty when a visible name sits next to the avatar. */\n  alt?: string;\n  /** Shown while the image loads, when it fails or when there is none: initials, an icon. */\n  fallback?: React.ReactNode;\n  size?: AvatarSize;\n};\n\nexport function AvatarRoot({ src, alt = \"\", fallback, size, className, ...props }: AvatarProps) {\n  const s = avatar({ size });\n  return (\n    <AvatarPrimitive.Root data-size={size ?? \"md\"} className={s.root({ className })} {...props}>\n      {src && <AvatarPrimitive.Image src={src} alt={alt} className={s.image()} />}\n      <AvatarPrimitive.Fallback delayMs={src ? 300 : 0} className={s.fallback()}>\n        {fallback}\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  );\n}\n\nexport type AvatarGroupProps = React.ComponentProps<\"div\"> & {\n  /** How many avatars are shown; the rest becomes a `+n` avatar. */\n  max?: number;\n  /** The size of the `+n` avatar (match the avatars of the group). */\n  size?: AvatarSize;\n};\n\n/** Overlapping avatars; past `max`, a `+n` avatar counts the rest. */\nexport function AvatarGroup({ max, size, className, children, ...props }: AvatarGroupProps) {\n  const items = React.Children.toArray(children);\n  const shown = max === undefined ? items : items.slice(0, max);\n  const rest = items.length - shown.length;\n  return (\n    <div className={avatar().group({ className })} {...props}>\n      {shown}\n      {rest > 0 && <AvatarRoot size={size} fallback={`+${rest}`} />}\n    </div>\n  );\n}\n\n/** `Avatar` (an image with a fallback) and `Avatar.Group`. */\nexport const Avatar = Object.assign(AvatarRoot, { Group: AvatarGroup });\n"],"mappings":";;;AACA,SAAS,UAAU,uBAAuB;AAC1C,YAAY,WAAW;AACvB,SAAS,UAA6B;AAmClC,SACU,KADV;AAjCJ,IAAM,SAAS,GAAG;AAAA,EAChB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI,EAAE,MAAM,qBAAqB;AAAA,MACjC,IAAI,EAAE,MAAM,kBAAkB;AAAA,MAC9B,IAAI,EAAE,MAAM,oBAAoB;AAAA,MAChC,IAAI,EAAE,MAAM,sBAAsB;AAAA,MAClC,IAAI,EAAE,MAAM,oBAAoB;AAAA,IAClC;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;AAaM,SAAS,WAAW,EAAE,KAAK,MAAM,IAAI,UAAU,MAAM,WAAW,GAAG,MAAM,GAAgB;AAC9F,QAAM,IAAI,OAAO,EAAE,KAAK,CAAC;AACzB,SACE,qBAAC,gBAAgB,MAAhB,EAAqB,aAAW,QAAQ,MAAM,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAClF;AAAA,WAAO,oBAAC,gBAAgB,OAAhB,EAAsB,KAAU,KAAU,WAAW,EAAE,MAAM,GAAG;AAAA,IACzE,oBAAC,gBAAgB,UAAhB,EAAyB,SAAS,MAAM,MAAM,GAAG,WAAW,EAAE,SAAS,GACrE,oBACH;AAAA,KACF;AAEJ;AAUO,SAAS,YAAY,EAAE,KAAK,MAAM,WAAW,UAAU,GAAG,MAAM,GAAqB;AAC1F,QAAM,QAAc,eAAS,QAAQ,QAAQ;AAC7C,QAAM,QAAQ,QAAQ,SAAY,QAAQ,MAAM,MAAM,GAAG,GAAG;AAC5D,QAAM,OAAO,MAAM,SAAS,MAAM;AAClC,SACE,qBAAC,SAAI,WAAW,OAAO,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAChD;AAAA;AAAA,IACA,OAAO,KAAK,oBAAC,cAAW,MAAY,UAAU,IAAI,IAAI,IAAI;AAAA,KAC7D;AAEJ;AAGO,IAAM,SAAS,OAAO,OAAO,YAAY,EAAE,OAAO,YAAY,CAAC;","names":[]}

package/dist/badge.d.ts

@@ -0,0 +1,64 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as React from 'react';
+
+declare const badgeVariants: tailwind_variants.TVReturnType<{
+    tone: {
+        neutral: "bg-surface-3 text-fg-secondary";
+        accent: "bg-accent-soft text-fg ring-1 ring-inset ring-accent/40 [&>[data-dot]]:bg-accent";
+        success: "bg-success/15 text-fg ring-1 ring-inset ring-success/40 [&>[data-dot]]:bg-success";
+        warning: "bg-warning/15 text-fg ring-1 ring-inset ring-warning/40 [&>[data-dot]]:bg-warning";
+        danger: "bg-danger/15 text-fg ring-1 ring-inset ring-danger/40 [&>[data-dot]]:bg-danger";
+        /** On a media: veil and text invariant, identical in both themes. */
+        scrim: "bg-scrim text-fg-on-media backdrop-blur-md";
+    };
+    size: {
+        sm: "px-2 py-0.5 text-[10px]";
+        md: "px-2.5 py-1 text-[11px]";
+    };
+    pulse: {
+        true: "[&>[data-dot]]:motion-safe:animate-pulse";
+    };
+}, undefined, "inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full font-semibold uppercase tracking-wider", {
+    tone: {
+        neutral: "bg-surface-3 text-fg-secondary";
+        accent: "bg-accent-soft text-fg ring-1 ring-inset ring-accent/40 [&>[data-dot]]:bg-accent";
+        success: "bg-success/15 text-fg ring-1 ring-inset ring-success/40 [&>[data-dot]]:bg-success";
+        warning: "bg-warning/15 text-fg ring-1 ring-inset ring-warning/40 [&>[data-dot]]:bg-warning";
+        danger: "bg-danger/15 text-fg ring-1 ring-inset ring-danger/40 [&>[data-dot]]:bg-danger";
+        /** On a media: veil and text invariant, identical in both themes. */
+        scrim: "bg-scrim text-fg-on-media backdrop-blur-md";
+    };
+    size: {
+        sm: "px-2 py-0.5 text-[10px]";
+        md: "px-2.5 py-1 text-[11px]";
+    };
+    pulse: {
+        true: "[&>[data-dot]]:motion-safe:animate-pulse";
+    };
+}, undefined, tailwind_variants.TVReturnTypeLike<{
+    tone: {
+        neutral: "bg-surface-3 text-fg-secondary";
+        accent: "bg-accent-soft text-fg ring-1 ring-inset ring-accent/40 [&>[data-dot]]:bg-accent";
+        success: "bg-success/15 text-fg ring-1 ring-inset ring-success/40 [&>[data-dot]]:bg-success";
+        warning: "bg-warning/15 text-fg ring-1 ring-inset ring-warning/40 [&>[data-dot]]:bg-warning";
+        danger: "bg-danger/15 text-fg ring-1 ring-inset ring-danger/40 [&>[data-dot]]:bg-danger";
+        /** On a media: veil and text invariant, identical in both themes. */
+        scrim: "bg-scrim text-fg-on-media backdrop-blur-md";
+    };
+    size: {
+        sm: "px-2 py-0.5 text-[10px]";
+        md: "px-2.5 py-1 text-[11px]";
+    };
+    pulse: {
+        true: "[&>[data-dot]]:motion-safe:animate-pulse";
+    };
+}, undefined>>;
+type BadgeVariants = VariantProps<typeof badgeVariants>;
+type BadgeProps = React.ComponentProps<"span"> & BadgeVariants & {
+    /** A small dot before the text, in the tone's colour (pulsing with `pulse`). */
+    dot?: boolean;
+};
+declare function Badge({ tone, size, pulse, dot, className, children, ...props }: BadgeProps): React.JSX.Element;
+
+export { Badge, type BadgeProps, type BadgeVariants, badgeVariants };

package/dist/badge.js

@@ -0,0 +1,31 @@
+// src/badge/badge.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var badgeVariants = tv({
+  base: "inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full font-semibold uppercase tracking-wider",
+  variants: {
+    tone: {
+      neutral: "bg-surface-3 text-fg-secondary",
+      accent: "bg-accent-soft text-fg ring-1 ring-inset ring-accent/40 [&>[data-dot]]:bg-accent",
+      success: "bg-success/15 text-fg ring-1 ring-inset ring-success/40 [&>[data-dot]]:bg-success",
+      warning: "bg-warning/15 text-fg ring-1 ring-inset ring-warning/40 [&>[data-dot]]:bg-warning",
+      danger: "bg-danger/15 text-fg ring-1 ring-inset ring-danger/40 [&>[data-dot]]:bg-danger",
+      /** On a media: veil and text invariant, identical in both themes. */
+      scrim: "bg-scrim text-fg-on-media backdrop-blur-md"
+    },
+    size: { sm: "px-2 py-0.5 text-[10px]", md: "px-2.5 py-1 text-[11px]" },
+    pulse: { true: "[&>[data-dot]]:motion-safe:animate-pulse" }
+  },
+  defaultVariants: { tone: "neutral", size: "sm" }
+});
+function Badge({ tone, size, pulse, dot, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs("span", { "data-tone": tone ?? "neutral", className: badgeVariants({ tone, size, pulse, className }), ...props, children: [
+    dot && /* @__PURE__ */ jsx("span", { "data-dot": "", "aria-hidden": true, className: "h-1.5 w-1.5 rounded-full bg-current" }),
+    children
+  ] });
+}
+export {
+  Badge,
+  badgeVariants
+};
+//# sourceMappingURL=badge.js.map

package/dist/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/badge/badge.tsx"],"sourcesContent":["// Server-safe: no hook, no context.\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\n// Status tones are soft (a tint, a coloured dot, a text role): the invariant status tokens are too light to carry\n// small text on a light surface, or to sit under white text (WCAG AA).\nexport const badgeVariants = tv({\n  base: \"inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full font-semibold uppercase tracking-wider\",\n  variants: {\n    tone: {\n      neutral: \"bg-surface-3 text-fg-secondary\",\n      accent: \"bg-accent-soft text-fg ring-1 ring-inset ring-accent/40 [&>[data-dot]]:bg-accent\",\n      success: \"bg-success/15 text-fg ring-1 ring-inset ring-success/40 [&>[data-dot]]:bg-success\",\n      warning: \"bg-warning/15 text-fg ring-1 ring-inset ring-warning/40 [&>[data-dot]]:bg-warning\",\n      danger: \"bg-danger/15 text-fg ring-1 ring-inset ring-danger/40 [&>[data-dot]]:bg-danger\",\n      /** On a media: veil and text invariant, identical in both themes. */\n      scrim: \"bg-scrim text-fg-on-media backdrop-blur-md\",\n    },\n    size: { sm: \"px-2 py-0.5 text-[10px]\", md: \"px-2.5 py-1 text-[11px]\" },\n    pulse: { true: \"[&>[data-dot]]:motion-safe:animate-pulse\" },\n  },\n  defaultVariants: { tone: \"neutral\", size: \"sm\" },\n});\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>;\n\nexport type BadgeProps = React.ComponentProps<\"span\"> &\n  BadgeVariants & {\n    /** A small dot before the text, in the tone's colour (pulsing with `pulse`). */\n    dot?: boolean;\n  };\n\nexport function Badge({ tone, size, pulse, dot, className, children, ...props }: BadgeProps) {\n  return (\n    <span data-tone={tone ?? \"neutral\"} className={badgeVariants({ tone, size, pulse, className })} {...props}>\n      {dot && <span data-dot=\"\" aria-hidden className=\"h-1.5 w-1.5 rounded-full bg-current\" />}\n      {children}\n    </span>\n  );\n}\n"],"mappings":";AAEA,SAAS,UAA6B;AAgClC,SACU,KADV;AA5BG,IAAM,gBAAgB,GAAG;AAAA,EAC9B,MAAM;AAAA,EACN,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,QAAQ;AAAA;AAAA,MAER,OAAO;AAAA,IACT;AAAA,IACA,MAAM,EAAE,IAAI,2BAA2B,IAAI,0BAA0B;AAAA,IACrE,OAAO,EAAE,MAAM,2CAA2C;AAAA,EAC5D;AAAA,EACA,iBAAiB,EAAE,MAAM,WAAW,MAAM,KAAK;AACjD,CAAC;AAUM,SAAS,MAAM,EAAE,MAAM,MAAM,OAAO,KAAK,WAAW,UAAU,GAAG,MAAM,GAAe;AAC3F,SACE,qBAAC,UAAK,aAAW,QAAQ,WAAW,WAAW,cAAc,EAAE,MAAM,MAAM,OAAO,UAAU,CAAC,GAAI,GAAG,OACjG;AAAA,WAAO,oBAAC,UAAK,YAAS,IAAG,eAAW,MAAC,WAAU,uCAAsC;AAAA,IACrF;AAAA,KACH;AAEJ;","names":[]}

package/dist/button.d.ts

@@ -0,0 +1,76 @@
+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;
+};
+declare function Button({ asChild, loading, variant, size, shape, className, disabled, ...props }: ButtonProps): React.JSX.Element;
+type IconButtonProps = Omit<ButtonProps, "size"> & {
+    /** The accessible name (and tooltip) of the button — required, passed translated. */
+    label: string;
+    size?: ButtonProps["size"];
+};
+/** An icon-only button: `label` is required, it is its accessible name. */
+declare function IconButton({ label, size, ...props }: IconButtonProps): React.JSX.Element;
+
+export { Button, type ButtonProps, type ButtonVariants, IconButton, type IconButtonProps, buttonVariants };