@krizaka/ui 1.2.0 → 2.0.0-beta.0

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,103 @@ 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 first layer (atoms). Cards, dialogs, tabs, toasts and menus 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";
+
+<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>
+```
+
+**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** (`Field.*`, `Avatar.Group`), **flat for an atom** (`Button`, `Badge`, `Input`).
+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`).
+   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` | 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
@@ -84,6 +179,21 @@ With Tailwind CSS v4, give every transition the same easing:
 }
 ```
 
+## With Tailwind CSS v4
+
+The components are styled with the [`@krizaka/tailwind`](https://www.npmjs.com/package/@krizaka/tailwind) utilities.
+Import the preset, then `@krizaka/ui/tailwind.css`: it points Tailwind at the package (`@source "./dist"`), so the
+classes the components use are generated in your stylesheet.
+
+```css
+@import "tailwindcss";
+@import "@krizaka/tailwind";
+@import "@krizaka/ui/tailwind.css";
+```
+
+Every component, in dark and light and under each product identity:
+[krizaka.github.io/krizaka-ui/latest](https://krizaka.github.io/krizaka-ui/latest/).
+
 ## Develop
 
 This package lives in the [`krizaka-ui`](https://github.com/krizaka/krizaka-ui) monorepo (pnpm + Turborepo), in

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 };

package/dist/button.js

@@ -0,0 +1,46 @@
+// src/button/button.tsx
+import { Slot } from "radix-ui";
+import { tv } from "tailwind-variants";
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = tv({
+  base: "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98]",
+  variants: {
+    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",
+      // The danger token is invariant and too light for small text on a light surface (3.6:1): the label stays a
+      // text role, the border and the tint carry the danger.
+      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" }
+  },
+  defaultVariants: { variant: "secondary", size: "md", shape: "rounded" }
+});
+function Button({ asChild, loading, variant, size, shape, className, disabled, ...props }) {
+  const Comp = asChild ? Slot.Root : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      type: asChild ? void 0 : "button",
+      "aria-busy": loading || void 0,
+      "data-loading": loading ? "" : void 0,
+      "data-variant": variant ?? "secondary",
+      disabled: asChild ? void 0 : disabled || loading,
+      "aria-disabled": asChild && (disabled || loading) ? true : void 0,
+      className: buttonVariants({ variant, size, shape, className }),
+      ...props
+    }
+  );
+}
+function IconButton({ label, size = "icon", ...props }) {
+  return /* @__PURE__ */ jsx(Button, { "aria-label": label, title: label, size, ...props });
+}
+export {
+  Button,
+  IconButton,
+  buttonVariants
+};
+//# sourceMappingURL=button.js.map

package/dist/button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/button/button.tsx"],"sourcesContent":["// Server-safe: no hook, no context. `buttonVariants` styles a <Link> or a Server Component without the component.\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const buttonVariants = tv({\n  base:\n    \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n    \"disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98]\",\n  variants: {\n    variant: {\n      primary: \"bg-accent text-on-accent shadow-sm hover:bg-accent-hover\",\n      secondary: \"border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3\",\n      outline: \"border border-border-default bg-transparent text-fg hover:border-accent hover:text-accent\",\n      ghost: \"text-fg-secondary hover:bg-surface-2 hover:text-fg\",\n      // The danger token is invariant and too light for small text on a light surface (3.6:1): the label stays a\n      // text role, the border and the tint carry the danger.\n      danger: \"border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20\",\n    },\n    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\" },\n    shape: { rounded: \"rounded-lg\", pill: \"rounded-full\" },\n  },\n  defaultVariants: { variant: \"secondary\", size: \"md\", shape: \"rounded\" },\n});\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n\nexport type ButtonProps = React.ComponentProps<\"button\"> &\n  ButtonVariants & {\n    /** Renders the child (e.g. a <Link>) instead of the <button>, with props, classes and ref merged. */\n    asChild?: boolean;\n    /** Disables and signals the wait (aria-busy, data-loading) — the product adds a spinner if it wants one. */\n    loading?: boolean;\n  };\n\nexport function Button({ asChild, loading, variant, size, shape, className, disabled, ...props }: ButtonProps) {\n  const Comp = asChild ? Slot.Root : \"button\";\n  return (\n    <Comp\n      type={asChild ? undefined : \"button\"}\n      aria-busy={loading || undefined}\n      data-loading={loading ? \"\" : undefined}\n      data-variant={variant ?? \"secondary\"}\n      disabled={asChild ? undefined : disabled || loading}\n      aria-disabled={asChild && (disabled || loading) ? true : undefined}\n      className={buttonVariants({ variant, size, shape, className })}\n      {...props}\n    />\n  );\n}\n\nexport type IconButtonProps = Omit<ButtonProps, \"size\"> & {\n  /** The accessible name (and tooltip) of the button — required, passed translated. */\n  label: string;\n  size?: ButtonProps[\"size\"];\n};\n\n/** An icon-only button: `label` is required, it is its accessible name. */\nexport function IconButton({ label, size = \"icon\", ...props }: IconButtonProps) {\n  return <Button aria-label={label} title={label} size={size} {...props} />;\n}\n"],"mappings":";AACA,SAAS,YAAY;AAErB,SAAS,UAA6B;AAoClC;AAlCG,IAAM,iBAAiB,GAAG;AAAA,EAC/B,MACE;AAAA,EAGF,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA;AAAA;AAAA,MAGP,QAAQ;AAAA,IACV;AAAA,IACA,MAAM,EAAE,IAAI,oBAAoB,IAAI,qBAAqB,IAAI,qBAAqB,MAAM,YAAY;AAAA,IACpG,OAAO,EAAE,SAAS,cAAc,MAAM,eAAe;AAAA,EACvD;AAAA,EACA,iBAAiB,EAAE,SAAS,aAAa,MAAM,MAAM,OAAO,UAAU;AACxE,CAAC;AAYM,SAAS,OAAO,EAAE,SAAS,SAAS,SAAS,MAAM,OAAO,WAAW,UAAU,GAAG,MAAM,GAAgB;AAC7G,QAAM,OAAO,UAAU,KAAK,OAAO;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,UAAU,SAAY;AAAA,MAC5B,aAAW,WAAW;AAAA,MACtB,gBAAc,UAAU,KAAK;AAAA,MAC7B,gBAAc,WAAW;AAAA,MACzB,UAAU,UAAU,SAAY,YAAY;AAAA,MAC5C,iBAAe,YAAY,YAAY,WAAW,OAAO;AAAA,MACzD,WAAW,eAAe,EAAE,SAAS,MAAM,OAAO,UAAU,CAAC;AAAA,MAC5D,GAAG;AAAA;AAAA,EACN;AAEJ;AASO,SAAS,WAAW,EAAE,OAAO,OAAO,QAAQ,GAAG,MAAM,GAAoB;AAC9E,SAAO,oBAAC,UAAO,cAAY,OAAO,OAAO,OAAO,MAAa,GAAG,OAAO;AACzE;","names":[]}

package/dist/chunk-CPMZS4XA.js

@@ -0,0 +1,11 @@
+// src/cn.ts
+import { clsx } from "clsx";
+import { cn as merge } from "tailwind-variants";
+function cn(...inputs) {
+  return merge(clsx(inputs)) ?? "";
+}
+
+export {
+  cn
+};
+//# sourceMappingURL=chunk-CPMZS4XA.js.map

package/dist/chunk-CPMZS4XA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/cn.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { cn as merge } from \"tailwind-variants\";\n\nexport type { ClassValue };\n\n/**\n * Merges Tailwind classes: the last one wins — a product's `className` overrides the primitive's. The merge engine is\n * tailwind-merge as tailwind-variants ships it (the one `tv` uses), so the platform carries a single copy of it.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return merge(clsx(inputs)) ?? \"\";\n}\n"],"mappings":";AAAA,SAA0B,YAAY;AACtC,SAAS,MAAM,aAAa;AAQrB,SAAS,MAAM,QAA8B;AAClD,SAAO,MAAM,KAAK,MAAM,CAAC,KAAK;AAChC;","names":[]}

package/dist/cn.d.ts

@@ -0,0 +1,10 @@
+import { ClassValue } from 'clsx';
+export { ClassValue } from 'clsx';
+
+/**
+ * Merges Tailwind classes: the last one wins — a product's `className` overrides the primitive's. The merge engine is
+ * tailwind-merge as tailwind-variants ships it (the one `tv` uses), so the platform carries a single copy of it.
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/cn.js

@@ -0,0 +1,7 @@
+import {
+  cn
+} from "./chunk-CPMZS4XA.js";
+export {
+  cn
+};
+//# sourceMappingURL=cn.js.map

package/dist/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/countdown.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+/** Milliseconds left until `target` (never negative), ticking every second. `skewMs` = server clock − this clock. */
+declare function useCountdown(target: Date | string | number, skewMs?: number): number;
+/** Splits a duration into days, hours, minutes and seconds. */
+declare function splitDuration(ms: number): {
+    d: number;
+    h: number;
+    m: number;
+    s: number;
+};
+/** The short unit labels, passed translated (e.g. `{ d: "d", h: "h", m: "m", s: "s" }`). */
+type CountdownUnits = {
+    d: string;
+    h: string;
+    m: string;
+    s: string;
+};
+/** The three segments shown: days, hours, minutes when there are days; else hours, minutes, seconds. */
+declare function countdownParts(ms: number, units: CountdownUnits): [number, string][];
+
+type CountdownProps = {
+    target: Date | string | number;
+    /** Server clock − this clock, in milliseconds. */
+    skewMs?: number;
+    /** The short unit labels, passed translated. */
+    units: CountdownUnits;
+    /** Below this many milliseconds it turns urgent (`text-danger`, the last segment pulses). Default 60 s. */
+    urgentBelowMs?: number;
+    size?: "sm" | "md" | "lg";
+    /** Accessible name, e.g. "Ends in". */
+    label: string;
+    className?: string;
+};
+/**
+ * Time left until a moment, as segments (2d 04h 13m 09s — days only when there are some) in tabular figures. Under
+ * `urgentBelowMs` it turns to the danger role and its last segment pulses (no motion under prefers-reduced-motion).
+ * Words come from the app: `units` are the short unit labels. `role="timer"` without live announcements — the app
+ * announces what matters. State: `data-urgent`, `data-ended`.
+ *
+ * The danger role is large-text safe (≥ 3:1) from `size="md"`; at `size="sm"` an urgent countdown in light mode is
+ * under the 4.5:1 of small text.
+ */
+declare function Countdown({ target, skewMs, units, urgentBelowMs, size, label, className }: CountdownProps): React.JSX.Element;
+
+export { Countdown, type CountdownProps, type CountdownUnits, countdownParts, splitDuration, useCountdown };