@krizaka/ui 1.3.0 → 2.0.0-beta.0

package/dist/countdown.js

@@ -0,0 +1,74 @@
+"use client";
+
+// src/countdown/core.ts
+import { useSyncExternalStore } from "react";
+var listeners = /* @__PURE__ */ new Set();
+var timer = null;
+function subscribe(listener) {
+  listeners.add(listener);
+  timer ??= setInterval(() => listeners.forEach((l) => l()), 1e3);
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0 && timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+  };
+}
+var nowSecond = () => Math.floor(Date.now() / 1e3) * 1e3;
+function useCountdown(target, skewMs = 0) {
+  const now = useSyncExternalStore(subscribe, nowSecond, nowSecond);
+  return Math.max(0, new Date(target).getTime() - (now + skewMs));
+}
+function splitDuration(ms) {
+  const total = Math.max(0, Math.floor(ms / 1e3));
+  return { d: Math.floor(total / 86400), h: Math.floor(total % 86400 / 3600), m: Math.floor(total % 3600 / 60), s: total % 60 };
+}
+function countdownParts(ms, units) {
+  const { d, h, m, s } = splitDuration(ms);
+  return d > 0 ? [[d, units.d], [h, units.h], [m, units.m]] : [[h, units.h], [m, units.m], [s, units.s]];
+}
+
+// src/countdown/countdown.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var countdown = tv({
+  slots: {
+    root: "inline-flex items-baseline gap-1.5 font-display font-black tabular-nums tracking-tight text-fg",
+    segment: "inline-flex items-baseline",
+    unit: "ml-0.5 text-[0.5em] font-bold uppercase text-fg-secondary"
+  },
+  variants: {
+    size: { sm: { root: "text-sm" }, md: { root: "text-xl" }, lg: { root: "text-3xl sm:text-4xl" } },
+    urgent: { true: { root: "text-danger" } }
+  },
+  defaultVariants: { size: "md" }
+});
+function Countdown({ target, skewMs = 0, units, urgentBelowMs = 6e4, size = "md", label, className }) {
+  const ms = useCountdown(target, skewMs);
+  const urgent = ms > 0 && ms < urgentBelowMs;
+  const parts = countdownParts(ms, units);
+  const s = countdown({ size, urgent });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "timer",
+      "aria-label": label,
+      "data-urgent": urgent ? "" : void 0,
+      "data-ended": ms === 0 ? "" : void 0,
+      suppressHydrationWarning: true,
+      className: s.root({ className }),
+      children: parts.map(([value, unit], i) => /* @__PURE__ */ jsxs("span", { className: s.segment({ className: urgent && i === parts.length - 1 ? "motion-safe:animate-pulse" : void 0 }), children: [
+        String(value).padStart(2, "0"),
+        /* @__PURE__ */ jsx("span", { className: s.unit(), children: unit })
+      ] }, unit))
+    }
+  );
+}
+export {
+  Countdown,
+  countdownParts,
+  splitDuration,
+  useCountdown
+};
+//# sourceMappingURL=countdown.js.map

package/dist/countdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/countdown/core.ts","../src/countdown/countdown.tsx"],"sourcesContent":["// The countdown's clock, shared by the web (`@krizaka/ui/countdown`) and native renders: no DOM import.\nimport { useSyncExternalStore } from \"react\";\n\n// One clock for every countdown on the page: it ticks each second while someone listens.\nconst listeners = new Set<() => void>();\nlet timer: ReturnType<typeof setInterval> | null = null;\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  timer ??= setInterval(() => listeners.forEach((l) => l()), 1000);\n  return () => {\n    listeners.delete(listener);\n    if (listeners.size === 0 && timer) {\n      clearInterval(timer);\n      timer = null;\n    }\n  };\n}\n\nconst nowSecond = () => Math.floor(Date.now() / 1000) * 1000;\n\n/** Milliseconds left until `target` (never negative), ticking every second. `skewMs` = server clock − this clock. */\nexport function useCountdown(target: Date | string | number, skewMs = 0): number {\n  const now = useSyncExternalStore(subscribe, nowSecond, nowSecond);\n  return Math.max(0, new Date(target).getTime() - (now + skewMs));\n}\n\n/** Splits a duration into days, hours, minutes and seconds. */\nexport function splitDuration(ms: number): { d: number; h: number; m: number; s: number } {\n  const total = Math.max(0, Math.floor(ms / 1000));\n  return { d: Math.floor(total / 86400), h: Math.floor((total % 86400) / 3600), m: Math.floor((total % 3600) / 60), s: total % 60 };\n}\n\n/** The short unit labels, passed translated (e.g. `{ d: \"d\", h: \"h\", m: \"m\", s: \"s\" }`). */\nexport type CountdownUnits = { d: string; h: string; m: string; s: string };\n\n/** The three segments shown: days, hours, minutes when there are days; else hours, minutes, seconds. */\nexport function countdownParts(ms: number, units: CountdownUnits): [number, string][] {\n  const { d, h, m, s } = splitDuration(ms);\n  return d > 0 ? [[d, units.d], [h, units.h], [m, units.m]] : [[h, units.h], [m, units.m], [s, units.s]];\n}\n","// Client: the clock is a hook.\nimport { tv } from \"tailwind-variants\";\n\nimport { countdownParts, type CountdownUnits, useCountdown } from \"./core\";\n\nconst countdown = tv({\n  slots: {\n    root: \"inline-flex items-baseline gap-1.5 font-display font-black tabular-nums tracking-tight text-fg\",\n    segment: \"inline-flex items-baseline\",\n    unit: \"ml-0.5 text-[0.5em] font-bold uppercase text-fg-secondary\",\n  },\n  variants: {\n    size: { sm: { root: \"text-sm\" }, md: { root: \"text-xl\" }, lg: { root: \"text-3xl sm:text-4xl\" } },\n    urgent: { true: { root: \"text-danger\" } },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type CountdownProps = {\n  target: Date | string | number;\n  /** Server clock − this clock, in milliseconds. */\n  skewMs?: number;\n  /** The short unit labels, passed translated. */\n  units: CountdownUnits;\n  /** Below this many milliseconds it turns urgent (`text-danger`, the last segment pulses). Default 60 s. */\n  urgentBelowMs?: number;\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Accessible name, e.g. \"Ends in\". */\n  label: string;\n  className?: string;\n};\n\n/**\n * Time left until a moment, as segments (2d 04h 13m 09s — days only when there are some) in tabular figures. Under\n * `urgentBelowMs` it turns to the danger role and its last segment pulses (no motion under prefers-reduced-motion).\n * Words come from the app: `units` are the short unit labels. `role=\"timer\"` without live announcements — the app\n * announces what matters. State: `data-urgent`, `data-ended`.\n *\n * The danger role is large-text safe (≥ 3:1) from `size=\"md\"`; at `size=\"sm\"` an urgent countdown in light mode is\n * under the 4.5:1 of small text.\n */\nexport function Countdown({ target, skewMs = 0, units, urgentBelowMs = 60_000, size = \"md\", label, className }: CountdownProps) {\n  const ms = useCountdown(target, skewMs);\n  const urgent = ms > 0 && ms < urgentBelowMs;\n  const parts = countdownParts(ms, units);\n  const s = countdown({ size, urgent });\n  return (\n    <span\n      role=\"timer\"\n      aria-label={label}\n      data-urgent={urgent ? \"\" : undefined}\n      data-ended={ms === 0 ? \"\" : undefined}\n      suppressHydrationWarning\n      className={s.root({ className })}\n    >\n      {parts.map(([value, unit], i) => (\n        <span key={unit} className={s.segment({ className: urgent && i === parts.length - 1 ? \"motion-safe:animate-pulse\" : undefined })}>\n          {String(value).padStart(2, \"0\")}\n          <span className={s.unit()}>{unit}</span>\n        </span>\n      ))}\n    </span>\n  );\n}\n"],"mappings":";;;AACA,SAAS,4BAA4B;AAGrC,IAAM,YAAY,oBAAI,IAAgB;AACtC,IAAI,QAA+C;AAEnD,SAAS,UAAU,UAAsB;AACvC,YAAU,IAAI,QAAQ;AACtB,YAAU,YAAY,MAAM,UAAU,QAAQ,CAAC,MAAM,EAAE,CAAC,GAAG,GAAI;AAC/D,SAAO,MAAM;AACX,cAAU,OAAO,QAAQ;AACzB,QAAI,UAAU,SAAS,KAAK,OAAO;AACjC,oBAAc,KAAK;AACnB,cAAQ;AAAA,IACV;AAAA,EACF;AACF;AAEA,IAAM,YAAY,MAAM,KAAK,MAAM,KAAK,IAAI,IAAI,GAAI,IAAI;AAGjD,SAAS,aAAa,QAAgC,SAAS,GAAW;AAC/E,QAAM,MAAM,qBAAqB,WAAW,WAAW,SAAS;AAChE,SAAO,KAAK,IAAI,GAAG,IAAI,KAAK,MAAM,EAAE,QAAQ,KAAK,MAAM,OAAO;AAChE;AAGO,SAAS,cAAc,IAA4D;AACxF,QAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,GAAI,CAAC;AAC/C,SAAO,EAAE,GAAG,KAAK,MAAM,QAAQ,KAAK,GAAG,GAAG,KAAK,MAAO,QAAQ,QAAS,IAAI,GAAG,GAAG,KAAK,MAAO,QAAQ,OAAQ,EAAE,GAAG,GAAG,QAAQ,GAAG;AAClI;AAMO,SAAS,eAAe,IAAY,OAA2C;AACpF,QAAM,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,cAAc,EAAE;AACvC,SAAO,IAAI,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC;AACvG;;;ACvCA,SAAS,UAAU;AAuDX,SAEE,KAFF;AAnDR,IAAM,YAAY,GAAG;AAAA,EACnB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AAAA,EACA,UAAU;AAAA,IACR,MAAM,EAAE,IAAI,EAAE,MAAM,UAAU,GAAG,IAAI,EAAE,MAAM,UAAU,GAAG,IAAI,EAAE,MAAM,uBAAuB,EAAE;AAAA,IAC/F,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,EAAE;AAAA,EAC1C;AAAA,EACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;AAyBM,SAAS,UAAU,EAAE,QAAQ,SAAS,GAAG,OAAO,gBAAgB,KAAQ,OAAO,MAAM,OAAO,UAAU,GAAmB;AAC9H,QAAM,KAAK,aAAa,QAAQ,MAAM;AACtC,QAAM,SAAS,KAAK,KAAK,KAAK;AAC9B,QAAM,QAAQ,eAAe,IAAI,KAAK;AACtC,QAAM,IAAI,UAAU,EAAE,MAAM,OAAO,CAAC;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,eAAa,SAAS,KAAK;AAAA,MAC3B,cAAY,OAAO,IAAI,KAAK;AAAA,MAC5B,0BAAwB;AAAA,MACxB,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC;AAAA,MAE9B,gBAAM,IAAI,CAAC,CAAC,OAAO,IAAI,GAAG,MACzB,qBAAC,UAAgB,WAAW,EAAE,QAAQ,EAAE,WAAW,UAAU,MAAM,MAAM,SAAS,IAAI,8BAA8B,OAAU,CAAC,GAC5H;AAAA,eAAO,KAAK,EAAE,SAAS,GAAG,GAAG;AAAA,QAC9B,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,WAFxB,IAGX,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/empty-state.d.ts

@@ -0,0 +1,63 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const emptyState: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            action?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            action?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    icon: string;
+    title: string;
+    description: string;
+    action: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            action?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    icon: string;
+    title: string;
+    description: string;
+    action: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    icon: string;
+    title: string;
+    description: string;
+    action: string;
+}>>;
+type EmptyStateProps = Omit<React.ComponentProps<"div">, "title"> & {
+    /** A decorative icon (hidden from assistive technology). */
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** What to do next: a Button, a link. */
+    action?: React.ReactNode;
+};
+declare function EmptyState({ icon, title, description, action, className, ...props }: EmptyStateProps): React.JSX.Element;
+
+export { EmptyState, type EmptyStateProps, emptyState };

package/dist/empty-state.js

@@ -0,0 +1,26 @@
+// src/empty-state/empty-state.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var emptyState = tv({
+  slots: {
+    root: "flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border-default px-6 py-10 text-center",
+    icon: "flex h-12 w-12 items-center justify-center rounded-full bg-surface-2 text-fg-secondary [&>svg]:h-6 [&>svg]:w-6",
+    title: "text-sm font-semibold text-fg",
+    description: "max-w-sm text-sm text-fg-secondary",
+    action: "mt-1 flex flex-wrap items-center justify-center gap-2"
+  }
+});
+var s = emptyState();
+function EmptyState({ icon, title, description, action, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { role: "status", className: s.root({ className }), ...props, children: [
+    icon && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: s.icon(), children: icon }),
+    /* @__PURE__ */ jsx("p", { className: s.title(), children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: s.description(), children: description }),
+    action && /* @__PURE__ */ jsx("div", { className: s.action(), children: action })
+  ] });
+}
+export {
+  EmptyState,
+  emptyState
+};
+//# sourceMappingURL=empty-state.js.map

package/dist/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/empty-state/empty-state.tsx"],"sourcesContent":["// Server-safe. What a list, a search or a panel says when it has nothing to show — every word is a prop.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const emptyState = tv({\n  slots: {\n    root: \"flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border-default px-6 py-10 text-center\",\n    icon: \"flex h-12 w-12 items-center justify-center rounded-full bg-surface-2 text-fg-secondary [&>svg]:h-6 [&>svg]:w-6\",\n    title: \"text-sm font-semibold text-fg\",\n    description: \"max-w-sm text-sm text-fg-secondary\",\n    action: \"mt-1 flex flex-wrap items-center justify-center gap-2\",\n  },\n});\nconst s = emptyState();\n\nexport type EmptyStateProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** A decorative icon (hidden from assistive technology). */\n  icon?: React.ReactNode;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** What to do next: a Button, a link. */\n  action?: React.ReactNode;\n};\n\nexport function EmptyState({ icon, title, description, action, className, ...props }: EmptyStateProps) {\n  return (\n    <div role=\"status\" className={s.root({ className })} {...props}>\n      {icon && (\n        <div aria-hidden className={s.icon()}>\n          {icon}\n        </div>\n      )}\n      <p className={s.title()}>{title}</p>\n      {description && <p className={s.description()}>{description}</p>}\n      {action && <div className={s.action()}>{action}</div>}\n    </div>\n  );\n}\n"],"mappings":";AAEA,SAAS,UAAU;AAwBf,SAEI,KAFJ;AAtBG,IAAM,aAAa,GAAG;AAAA,EAC3B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,IACb,QAAQ;AAAA,EACV;AACF,CAAC;AACD,IAAM,IAAI,WAAW;AAWd,SAAS,WAAW,EAAE,MAAM,OAAO,aAAa,QAAQ,WAAW,GAAG,MAAM,GAAoB;AACrG,SACE,qBAAC,SAAI,MAAK,UAAS,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACtD;AAAA,YACC,oBAAC,SAAI,eAAW,MAAC,WAAW,EAAE,KAAK,GAChC,gBACH;AAAA,IAEF,oBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAC/B,eAAe,oBAAC,OAAE,WAAW,EAAE,YAAY,GAAI,uBAAY;AAAA,IAC3D,UAAU,oBAAC,SAAI,WAAW,EAAE,OAAO,GAAI,kBAAO;AAAA,KACjD;AAEJ;","names":[]}

package/dist/field.d.ts

@@ -0,0 +1,80 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const field: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            hint?: tailwind_variants.ClassValue;
+            error?: tailwind_variants.ClassValue;
+            selectWrap?: tailwind_variants.ClassValue;
+            chevron?: tailwind_variants.ClassValue;
+            control?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            hint?: tailwind_variants.ClassValue;
+            error?: tailwind_variants.ClassValue;
+            selectWrap?: tailwind_variants.ClassValue;
+            chevron?: tailwind_variants.ClassValue;
+            control?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    label: string;
+    control: string;
+    hint: string;
+    error: string;
+    selectWrap: string;
+    chevron: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            hint?: tailwind_variants.ClassValue;
+            error?: tailwind_variants.ClassValue;
+            selectWrap?: tailwind_variants.ClassValue;
+            chevron?: tailwind_variants.ClassValue;
+            control?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    label: string;
+    control: string;
+    hint: string;
+    error: string;
+    selectWrap: string;
+    chevron: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    label: string;
+    control: string;
+    hint: string;
+    error: string;
+    selectWrap: string;
+    chevron: string;
+}>>;
+declare const Field: {
+    Root: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;
+    Label: ({ className, ...props }: React.ComponentProps<"label">) => React.JSX.Element;
+    Hint: ({ className, ...props }: React.ComponentProps<"p">) => React.JSX.Element;
+    Error: ({ className, ...props }: React.ComponentProps<"p">) => React.JSX.Element;
+};
+type ControlProps = {
+    /** Marks the control invalid: aria-invalid and data-invalid (pair it with a `Field.Error` in aria-describedby). */
+    invalid?: boolean;
+};
+declare function Input({ invalid, className, ...props }: React.ComponentProps<"input"> & ControlProps): React.JSX.Element;
+declare function Textarea({ invalid, className, ...props }: React.ComponentProps<"textarea"> & ControlProps): React.JSX.Element;
+/** A native <select>, styled like the other controls (the platform's menu: accessible and right on phones). */
+declare function Select({ invalid, className, ...props }: React.ComponentProps<"select"> & ControlProps): React.JSX.Element;
+
+export { Field, Input, Select, Textarea, field };

package/dist/field.js

@@ -0,0 +1,47 @@
+import {
+  cn
+} from "./chunk-CPMZS4XA.js";
+
+// src/field/field.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var field = tv({
+  slots: {
+    root: "flex flex-col gap-1.5",
+    label: "text-xs font-semibold text-fg-secondary",
+    control: "flex h-11 w-full rounded-lg border border-border-default bg-surface-2 px-3 text-sm text-fg placeholder:text-fg-muted transition-[border-color,box-shadow] focus-visible:border-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/30",
+    hint: "text-xs text-fg-secondary",
+    // The danger token is too light for small text on a light surface: the message is a text role, the dot says danger.
+    error: "flex items-center gap-1.5 text-xs font-medium text-fg before:h-1.5 before:w-1.5 before:shrink-0 before:rounded-full before:bg-danger",
+    selectWrap: "relative flex w-full",
+    chevron: "pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-fg-secondary"
+  }
+});
+var s = field();
+var Field = {
+  Root: ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: s.root({ className }), ...props }),
+  Label: ({ className, ...props }) => /* @__PURE__ */ jsx("label", { className: s.label({ className }), ...props }),
+  Hint: ({ className, ...props }) => /* @__PURE__ */ jsx("p", { className: s.hint({ className }), ...props }),
+  Error: ({ className, ...props }) => /* @__PURE__ */ jsx("p", { role: "alert", className: s.error({ className }), ...props })
+};
+var invalidProps = (invalid) => invalid ? { "aria-invalid": true, "data-invalid": "" } : {};
+function Input({ invalid, className, ...props }) {
+  return /* @__PURE__ */ jsx("input", { ...invalidProps(invalid), className: s.control({ className }), ...props });
+}
+function Textarea({ invalid, className, ...props }) {
+  return /* @__PURE__ */ jsx("textarea", { ...invalidProps(invalid), className: s.control({ className: cn("h-auto min-h-24 py-2", className) }), ...props });
+}
+function Select({ invalid, className, ...props }) {
+  return /* @__PURE__ */ jsxs("span", { className: s.selectWrap(), children: [
+    /* @__PURE__ */ jsx("select", { ...invalidProps(invalid), className: s.control({ className: cn("appearance-none pr-9", className) }), ...props }),
+    /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, className: s.chevron(), children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) })
+  ] });
+}
+export {
+  Field,
+  Input,
+  Select,
+  Textarea,
+  field
+};
+//# sourceMappingURL=field.js.map

package/dist/field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/field/field.tsx"],"sourcesContent":["// Server-safe. The label ↔ control wiring is HTML (htmlFor / id, aria-describedby): no context.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\n\nexport const field = tv({\n  slots: {\n    root: \"flex flex-col gap-1.5\",\n    label: \"text-xs font-semibold text-fg-secondary\",\n    control:\n      \"flex h-11 w-full rounded-lg border border-border-default bg-surface-2 px-3 text-sm text-fg placeholder:text-fg-muted \" +\n      \"transition-[border-color,box-shadow] focus-visible:border-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/30\",\n    hint: \"text-xs text-fg-secondary\",\n    // The danger token is too light for small text on a light surface: the message is a text role, the dot says danger.\n    error: \"flex items-center gap-1.5 text-xs font-medium text-fg before:h-1.5 before:w-1.5 before:shrink-0 before:rounded-full before:bg-danger\",\n    selectWrap: \"relative flex w-full\",\n    chevron: \"pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-fg-secondary\",\n  },\n});\nconst s = field();\n\nexport const Field = {\n  Root: ({ className, ...props }: React.ComponentProps<\"div\">) => <div className={s.root({ className })} {...props} />,\n  Label: ({ className, ...props }: React.ComponentProps<\"label\">) => <label className={s.label({ className })} {...props} />,\n  Hint: ({ className, ...props }: React.ComponentProps<\"p\">) => <p className={s.hint({ className })} {...props} />,\n  Error: ({ className, ...props }: React.ComponentProps<\"p\">) => <p role=\"alert\" className={s.error({ className })} {...props} />,\n};\n\ntype ControlProps = {\n  /** Marks the control invalid: aria-invalid and data-invalid (pair it with a `Field.Error` in aria-describedby). */\n  invalid?: boolean;\n};\n\nconst invalidProps = (invalid?: boolean) => (invalid ? { \"aria-invalid\": true as const, \"data-invalid\": \"\" } : {});\n\nexport function Input({ invalid, className, ...props }: React.ComponentProps<\"input\"> & ControlProps) {\n  return <input {...invalidProps(invalid)} className={s.control({ className })} {...props} />;\n}\n\nexport function Textarea({ invalid, className, ...props }: React.ComponentProps<\"textarea\"> & ControlProps) {\n  return <textarea {...invalidProps(invalid)} className={s.control({ className: cn(\"h-auto min-h-24 py-2\", className) })} {...props} />;\n}\n\n/** A native <select>, styled like the other controls (the platform's menu: accessible and right on phones). */\nexport function Select({ invalid, className, ...props }: React.ComponentProps<\"select\"> & ControlProps) {\n  return (\n    <span className={s.selectWrap()}>\n      <select {...invalidProps(invalid)} className={s.control({ className: cn(\"appearance-none pr-9\", className) })} {...props} />\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden className={s.chevron()}>\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </span>\n  );\n}\n"],"mappings":";;;;;AAEA,SAAS,UAAU;AAsB+C,cAwB9D,YAxB8D;AAlB3D,IAAM,QAAQ,GAAG;AAAA,EACtB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SACE;AAAA,IAGF,MAAM;AAAA;AAAA,IAEN,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,SAAS;AAAA,EACX;AACF,CAAC;AACD,IAAM,IAAI,MAAM;AAET,IAAM,QAAQ;AAAA,EACnB,MAAM,CAAC,EAAE,WAAW,GAAG,MAAM,MAAmC,oBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAAA,EAClH,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,MAAqC,oBAAC,WAAM,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAAA,EACxH,MAAM,CAAC,EAAE,WAAW,GAAG,MAAM,MAAiC,oBAAC,OAAE,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAAA,EAC9G,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,MAAiC,oBAAC,OAAE,MAAK,SAAQ,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC/H;AAOA,IAAM,eAAe,CAAC,YAAuB,UAAU,EAAE,gBAAgB,MAAe,gBAAgB,GAAG,IAAI,CAAC;AAEzG,SAAS,MAAM,EAAE,SAAS,WAAW,GAAG,MAAM,GAAiD;AACpG,SAAO,oBAAC,WAAO,GAAG,aAAa,OAAO,GAAG,WAAW,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC3F;AAEO,SAAS,SAAS,EAAE,SAAS,WAAW,GAAG,MAAM,GAAoD;AAC1G,SAAO,oBAAC,cAAU,GAAG,aAAa,OAAO,GAAG,WAAW,EAAE,QAAQ,EAAE,WAAW,GAAG,wBAAwB,SAAS,EAAE,CAAC,GAAI,GAAG,OAAO;AACrI;AAGO,SAAS,OAAO,EAAE,SAAS,WAAW,GAAG,MAAM,GAAkD;AACtG,SACE,qBAAC,UAAK,WAAW,EAAE,WAAW,GAC5B;AAAA,wBAAC,YAAQ,GAAG,aAAa,OAAO,GAAG,WAAW,EAAE,QAAQ,EAAE,WAAW,GAAG,wBAAwB,SAAS,EAAE,CAAC,GAAI,GAAG,OAAO;AAAA,IAC1H,oBAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MAAC,WAAW,EAAE,QAAQ,GACvJ,8BAAC,UAAK,GAAE,gBAAe,GACzB;AAAA,KACF;AAEJ;","names":[]}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import * as React from 'react';
 
 /** Joins class names, skipping the falsy ones. */
 declare function cx(...parts: Array<string | false | null | undefined>): string;
@@ -14,22 +14,22 @@ interface MarkProps {
 }
 
 /** The Krizaka mark: a hexagonal shield with a neural core, inside slow orbits. Blue accent: `--kz-accent`. */
-declare function KrizakaLogo({ size, animated, title, className }: MarkProps): react.JSX.Element;
+declare function KrizakaLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
 
 /** The Orazaka mark: three shards orbiting slowly around an amber core that breathes. */
-declare function OrazakaLogo({ size, animated, title, className }: MarkProps): react.JSX.Element;
+declare function OrazakaLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
 
 /**
  * The Orochia mark: the serpent (Orochi) coiled into an "O" around the flame it guards. The orbit turns, scales slide
  * along the body, the eye and the flame breathe. Below 48 px it crops to the serpent: the orbits would be hairlines.
  */
-declare function OrochiaLogo({ size, animated, title, className }: MarkProps): react.JSX.Element;
+declare function OrochiaLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
 
 type BrandId = "krizaka" | "orazaka" | "orochia";
 /** The mark of a Krizaka brand by id — for navigation, cards and lists driven by data. */
 declare function ProductLogo({ id, ...props }: MarkProps & {
     id: BrandId;
-}): react.JSX.Element;
+}): React.JSX.Element;
 
 /**
  * Mount once at the root of the app. It reveals every `[data-reveal]` element as it enters the viewport — including
@@ -48,6 +48,6 @@ declare function RotatingWord({ words, interval, className }: {
     words: readonly string[];
     interval?: number;
     className?: string;
-}): react.JSX.Element;
+}): React.JSX.Element;
 
 export { type BrandId, KrizakaLogo, type MarkProps, MotionObserver, OrazakaLogo, OrochiaLogo, ProductLogo, RotatingWord, cx };

package/dist/skeleton.d.ts

@@ -0,0 +1,28 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as React from 'react';
+
+declare const skeletonVariants: tailwind_variants.TVReturnType<{
+    shape: {
+        text: "h-3 w-full rounded-sm";
+        circle: "aspect-square h-10 rounded-full";
+        rect: "h-24 w-full rounded-lg";
+    };
+}, undefined, "block bg-surface-3 motion-safe:animate-pulse", {
+    shape: {
+        text: "h-3 w-full rounded-sm";
+        circle: "aspect-square h-10 rounded-full";
+        rect: "h-24 w-full rounded-lg";
+    };
+}, undefined, tailwind_variants.TVReturnTypeLike<{
+    shape: {
+        text: "h-3 w-full rounded-sm";
+        circle: "aspect-square h-10 rounded-full";
+        rect: "h-24 w-full rounded-lg";
+    };
+}, undefined>>;
+type SkeletonProps = React.ComponentProps<"span"> & VariantProps<typeof skeletonVariants>;
+/** A pulsing shape the size of what is loading. Announce the wait elsewhere (aria-busy on the region, a Spinner). */
+declare function Skeleton({ shape, className, ...props }: SkeletonProps): React.JSX.Element;
+
+export { Skeleton, type SkeletonProps, skeletonVariants };

package/dist/skeleton.js

@@ -0,0 +1,18 @@
+// src/skeleton/skeleton.tsx
+import { tv } from "tailwind-variants";
+import { jsx } from "react/jsx-runtime";
+var skeletonVariants = tv({
+  base: "block bg-surface-3 motion-safe:animate-pulse",
+  variants: {
+    shape: { text: "h-3 w-full rounded-sm", circle: "aspect-square h-10 rounded-full", rect: "h-24 w-full rounded-lg" }
+  },
+  defaultVariants: { shape: "text" }
+});
+function Skeleton({ shape, className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, "data-shape": shape ?? "text", className: skeletonVariants({ shape, className }), ...props });
+}
+export {
+  Skeleton,
+  skeletonVariants
+};
+//# sourceMappingURL=skeleton.js.map

package/dist/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/skeleton/skeleton.tsx"],"sourcesContent":["// Server-safe. A placeholder for content on its way: decorative, so hidden from assistive technology.\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const skeletonVariants = tv({\n  base: \"block bg-surface-3 motion-safe:animate-pulse\",\n  variants: {\n    shape: { text: \"h-3 w-full rounded-sm\", circle: \"aspect-square h-10 rounded-full\", rect: \"h-24 w-full rounded-lg\" },\n  },\n  defaultVariants: { shape: \"text\" },\n});\n\nexport type SkeletonProps = React.ComponentProps<\"span\"> & VariantProps<typeof skeletonVariants>;\n\n/** A pulsing shape the size of what is loading. Announce the wait elsewhere (aria-busy on the region, a Spinner). */\nexport function Skeleton({ shape, className, ...props }: SkeletonProps) {\n  return <span aria-hidden data-shape={shape ?? \"text\"} className={skeletonVariants({ shape, className })} {...props} />;\n}\n"],"mappings":";AAEA,SAAS,UAA6B;AAc7B;AAZF,IAAM,mBAAmB,GAAG;AAAA,EACjC,MAAM;AAAA,EACN,UAAU;AAAA,IACR,OAAO,EAAE,MAAM,yBAAyB,QAAQ,mCAAmC,MAAM,yBAAyB;AAAA,EACpH;AAAA,EACA,iBAAiB,EAAE,OAAO,OAAO;AACnC,CAAC;AAKM,SAAS,SAAS,EAAE,OAAO,WAAW,GAAG,MAAM,GAAkB;AACtE,SAAO,oBAAC,UAAK,eAAW,MAAC,cAAY,SAAS,QAAQ,WAAW,iBAAiB,EAAE,OAAO,UAAU,CAAC,GAAI,GAAG,OAAO;AACtH;","names":[]}

package/dist/slot.d.ts

@@ -0,0 +1,11 @@
+import * as React$1 from 'react';
+import { VisuallyHidden as VisuallyHidden$1 } from 'radix-ui';
+
+/** Merges its props, `className` and `ref` into its only child: the engine of every `asChild`. */
+declare const Slot: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & {
+    children?: React.ReactNode;
+} & React$1.RefAttributes<HTMLElement>>;
+/** Hidden on screen, read by assistive technology. */
+declare const VisuallyHidden: React$1.ForwardRefExoticComponent<VisuallyHidden$1.VisuallyHiddenProps & React$1.RefAttributes<HTMLSpanElement>>;
+
+export { Slot, VisuallyHidden };

package/dist/slot.js

@@ -0,0 +1,9 @@
+// src/slot/index.ts
+import { Slot as SlotPrimitive, VisuallyHidden as VisuallyHiddenPrimitive } from "radix-ui";
+var Slot = SlotPrimitive.Root;
+var VisuallyHidden = VisuallyHiddenPrimitive.Root;
+export {
+  Slot,
+  VisuallyHidden
+};
+//# sourceMappingURL=slot.js.map

package/dist/slot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/slot/index.ts"],"sourcesContent":["/** @krizaka/ui/slot — `Slot` (what `asChild` renders) and `VisuallyHidden` (a name for assistive technology only), from Radix. */\nimport { Slot as SlotPrimitive, VisuallyHidden as VisuallyHiddenPrimitive } from \"radix-ui\";\n\n/** Merges its props, `className` and `ref` into its only child: the engine of every `asChild`. */\nexport const Slot = SlotPrimitive.Root;\n/** Hidden on screen, read by assistive technology. */\nexport const VisuallyHidden = VisuallyHiddenPrimitive.Root;\n"],"mappings":";AACA,SAAS,QAAQ,eAAe,kBAAkB,+BAA+B;AAG1E,IAAM,OAAO,cAAc;AAE3B,IAAM,iBAAiB,wBAAwB;","names":[]}

package/dist/spinner.d.ts

@@ -0,0 +1,31 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as React from 'react';
+
+declare const spinnerVariants: tailwind_variants.TVReturnType<{
+    size: {
+        sm: "h-4 w-4";
+        md: "h-6 w-6";
+        lg: "h-10 w-10";
+    };
+}, undefined, "shrink-0 text-accent motion-safe:animate-spin", {
+    size: {
+        sm: "h-4 w-4";
+        md: "h-6 w-6";
+        lg: "h-10 w-10";
+    };
+}, undefined, tailwind_variants.TVReturnTypeLike<{
+    size: {
+        sm: "h-4 w-4";
+        md: "h-6 w-6";
+        lg: "h-10 w-10";
+    };
+}, undefined>>;
+type SpinnerProps = Omit<React.ComponentProps<"svg">, "children"> & VariantProps<typeof spinnerVariants> & {
+    /** The accessible name of the wait, e.g. "Loading" — passed translated. */
+    label: string;
+};
+/** A turning ring with `role="status"` (it stops turning under prefers-reduced-motion). */
+declare function Spinner({ label, size, className, ...props }: SpinnerProps): React.JSX.Element;
+
+export { Spinner, type SpinnerProps, spinnerVariants };

package/dist/spinner.js

@@ -0,0 +1,31 @@
+// src/spinner/spinner.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var spinnerVariants = tv({
+  base: "shrink-0 text-accent motion-safe:animate-spin",
+  variants: { size: { sm: "h-4 w-4", md: "h-6 w-6", lg: "h-10 w-10" } },
+  defaultVariants: { size: "md" }
+});
+function Spinner({ label, size, className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      role: "status",
+      "aria-label": label,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "data-size": size ?? "md",
+      className: spinnerVariants({ size, className }),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeOpacity: "0.2", strokeWidth: "3" }),
+        /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 0-9-9", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+export {
+  Spinner,
+  spinnerVariants
+};
+//# sourceMappingURL=spinner.js.map

package/dist/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/spinner/spinner.tsx"],"sourcesContent":["// Server-safe. An indeterminate wait: an SVG ring, announced as a status with its `label`.\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const spinnerVariants = tv({\n  base: \"shrink-0 text-accent motion-safe:animate-spin\",\n  variants: { size: { sm: \"h-4 w-4\", md: \"h-6 w-6\", lg: \"h-10 w-10\" } },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type SpinnerProps = Omit<React.ComponentProps<\"svg\">, \"children\"> &\n  VariantProps<typeof spinnerVariants> & {\n    /** The accessible name of the wait, e.g. \"Loading\" — passed translated. */\n    label: string;\n  };\n\n/** A turning ring with `role=\"status\"` (it stops turning under prefers-reduced-motion). */\nexport function Spinner({ label, size, className, ...props }: SpinnerProps) {\n  return (\n    <svg\n      role=\"status\"\n      aria-label={label}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      data-size={size ?? \"md\"}\n      className={spinnerVariants({ size, className })}\n      {...props}\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" strokeOpacity=\"0.2\" strokeWidth=\"3\" />\n      <path d=\"M21 12a9 9 0 0 0-9-9\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n"],"mappings":";AAEA,SAAS,UAA6B;AAiBlC,SASE,KATF;AAfG,IAAM,kBAAkB,GAAG;AAAA,EAChC,MAAM;AAAA,EACN,UAAU,EAAE,MAAM,EAAE,IAAI,WAAW,IAAI,WAAW,IAAI,YAAY,EAAE;AAAA,EACpE,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;AASM,SAAS,QAAQ,EAAE,OAAO,MAAM,WAAW,GAAG,MAAM,GAAiB;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,aAAW,QAAQ;AAAA,MACnB,WAAW,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAAA,MAC7C,GAAG;AAAA,MAEJ;AAAA,4BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,QAAO,gBAAe,eAAc,OAAM,aAAY,KAAI;AAAA,QACxF,oBAAC,UAAK,GAAE,wBAAuB,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ;AAAA;AAAA;AAAA,EAC7F;AAEJ;","names":[]}

package/dist/theme.d.ts

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+
+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 Mode = "dark" | "light" | "system";
+/**
+ * In <head>, before anything renders: applies the persisted mode and named theme, so the page never flashes.
+ * `nonce` for a strict Content-Security-Policy.
+ */
+declare function ThemeScript({ nonce }: {
+    nonce?: string;
+}): React.JSX.Element;
+type ThemeContextValue = {
+    /** The chosen mode: dark, light or follow the system. */
+    mode: Mode;
+    setMode: (mode: Mode) => void;
+    /** The named theme (`html.theme-<name>`), or null. */
+    theme: string | null;
+    setTheme: (theme: string | null) => void;
+};
+type ThemeProviderProps = {
+    children: React.ReactNode;
+    /** The mode before anything is persisted. */
+    defaultMode?: Mode;
+};
+declare function ThemeProvider({ children, defaultMode }: ThemeProviderProps): React.JSX.Element;
+declare function useTheme(): ThemeContextValue;
+type ThemeToggleProps = Omit<React.ComponentProps<"button">, "onClick" | "children"> & Pick<ButtonVariants, "variant" | "shape"> & {
+    /** The accessible name — a string, or one per current mode (e.g. `(mode) => t("theme." + mode)`). */
+    label: string | ((mode: Mode) => string);
+};
+/**
+ * An icon button (styled as `IconButton`, without its Slot) that cycles dark → light → system. Needs a
+ * <ThemeProvider> above it. State: `data-mode`.
+ */
+declare function ThemeToggle({ label, variant, shape, className, ...props }: ThemeToggleProps): React.JSX.Element;
+
+export { type Mode, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, ThemeScript, ThemeToggle, type ThemeToggleProps, useTheme };