@krizaka/ui 3.35.0 → 3.37.0

package/dist/specimen-tag.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+type StampTone = "ok" | "wip" | "construction" | "neutral";
+type StampProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * `ok` — released or usable today (green ink); `wip` — in development (pencil); `construction` — not open yet (the
+     * margin's red); `neutral` — a fact.
+     * @default "neutral"
+     */
+    tone?: StampTone;
+};
+/** A rubber stamp: a short status pressed on a tag or a page, double-ruled, slightly askew. */
+declare function Stamp({ tone, className, ...props }: StampProps): React.JSX.Element;
+interface SpecimenField {
+    /** The field's name, typed in lower case: `seen on`, `since`. */
+    label: React.ReactNode;
+    /** Its value: `web · iOS · Android`, `3.34.0`. */
+    value: React.ReactNode;
+}
+type SpecimenTagProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The catalogue number, typed at the top: `KZ-02`, `No. 042`. */
+    code?: React.ReactNode;
+    /** What the tag labels: a product's name, a component's. Set in the display face. */
+    title?: React.ReactNode;
+    /** The element of the title (`h3` in a grid of tags under a section's `h2`). @default "h3" */
+    titleAs?: "h2" | "h3" | "h4" | "p" | "span";
+    /** Beside the title: a product's mark, a bird (decorative). */
+    mark?: React.ReactNode;
+    /** The status, stamped: `{ label: "In development", tone: "wip" }`. */
+    status?: {
+        label: React.ReactNode;
+        tone?: StampTone;
+    };
+    /** The record: a label and a value per line, typed. */
+    fields?: readonly SpecimenField[];
+    /** What the tag says beyond its fields: one or two sentences. */
+    children?: React.ReactNode;
+    /** The foot of the tag: links (the site, the source), a note. */
+    footer?: React.ReactNode;
+    /**
+     * `hang` — the tag hangs from a string (a row of tags on one wire); `pin` — pinned flat, no string.
+     * @default "pin"
+     */
+    mount?: "hang" | "pin";
+};
+/**
+ * A specimen tag: the eyelet, a typed number, a name, a stamp, the record's fields, a sentence and a foot — the status
+ * and meta of a product or a component, labelled the way a field guide labels what it saw.
+ */
+declare function SpecimenTag({ code, title, titleAs: Title, mark, status, fields, children, footer, mount, className, ...props }: SpecimenTagProps): React.JSX.Element;
+
+export { type SpecimenField, SpecimenTag, type SpecimenTagProps, Stamp, type StampProps, type StampTone };

package/dist/specimen-tag.js

@@ -0,0 +1,33 @@
+import {
+  cn
+} from "./chunk-W675RFOA.js";
+
+// src/specimen-tag/specimen-tag.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Stamp({ tone = "neutral", className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("kz-stamp", className), "data-tone": tone, ...props });
+}
+function SpecimenTag({ code, title, titleAs: Title = "h3", mark, status, fields, children, footer, mount = "pin", className, ...props }) {
+  return /* @__PURE__ */ jsxs("article", { className: cn("kz-tag", className), "data-mount": mount, ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "kz-tag-eyelet", "aria-hidden": true }),
+    (code || status) && /* @__PURE__ */ jsxs("div", { className: "kz-tag-head", children: [
+      code && /* @__PURE__ */ jsx("span", { className: "kz-tag-code", children: code }),
+      status && /* @__PURE__ */ jsx(Stamp, { tone: status.tone, children: status.label })
+    ] }),
+    title && /* @__PURE__ */ jsxs(Title, { className: "kz-tag-title", children: [
+      /* @__PURE__ */ jsx("span", { children: title }),
+      mark && /* @__PURE__ */ jsx("span", { className: "kz-tag-mark", "aria-hidden": true, children: mark })
+    ] }),
+    children && /* @__PURE__ */ jsx("div", { className: "kz-tag-body", children }),
+    fields && fields.length > 0 && /* @__PURE__ */ jsx("dl", { className: "kz-tag-fields", children: fields.map((f, i) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("dt", { children: f.label }),
+      /* @__PURE__ */ jsx("dd", { children: f.value })
+    ] }, i)) }),
+    footer && /* @__PURE__ */ jsx("div", { className: "kz-tag-foot", children: footer })
+  ] });
+}
+export {
+  SpecimenTag,
+  Stamp
+};
+//# sourceMappingURL=specimen-tag.js.map

package/dist/specimen-tag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/specimen-tag/specimen-tag.tsx"],"sourcesContent":["// Server-safe. The specimen tag of the Cahier (ADR-004, blocks.css): a manila tag with an eyelet, a typed catalogue\n// number, a name, a stamp for the status and the fields of a record — the way a naturalist labels what was observed.\n// It carries a product's or a component's status and meta; the stamp says the truth (`ok`, `wip`, `construction`).\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport type StampTone = \"ok\" | \"wip\" | \"construction\" | \"neutral\";\n\nexport type StampProps = React.HTMLAttributes<HTMLSpanElement> & {\n  /**\n   * `ok` — released or usable today (green ink); `wip` — in development (pencil); `construction` — not open yet (the\n   * margin's red); `neutral` — a fact.\n   * @default \"neutral\"\n   */\n  tone?: StampTone;\n};\n\n/** A rubber stamp: a short status pressed on a tag or a page, double-ruled, slightly askew. */\nexport function Stamp({ tone = \"neutral\", className, ...props }: StampProps) {\n  return <span className={cn(\"kz-stamp\", className)} data-tone={tone} {...props} />;\n}\n\nexport interface SpecimenField {\n  /** The field's name, typed in lower case: `seen on`, `since`. */\n  label: React.ReactNode;\n  /** Its value: `web · iOS · Android`, `3.34.0`. */\n  value: React.ReactNode;\n}\n\nexport type SpecimenTagProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The catalogue number, typed at the top: `KZ-02`, `No. 042`. */\n  code?: React.ReactNode;\n  /** What the tag labels: a product's name, a component's. Set in the display face. */\n  title?: React.ReactNode;\n  /** The element of the title (`h3` in a grid of tags under a section's `h2`). @default \"h3\" */\n  titleAs?: \"h2\" | \"h3\" | \"h4\" | \"p\" | \"span\";\n  /** Beside the title: a product's mark, a bird (decorative). */\n  mark?: React.ReactNode;\n  /** The status, stamped: `{ label: \"In development\", tone: \"wip\" }`. */\n  status?: { label: React.ReactNode; tone?: StampTone };\n  /** The record: a label and a value per line, typed. */\n  fields?: readonly SpecimenField[];\n  /** What the tag says beyond its fields: one or two sentences. */\n  children?: React.ReactNode;\n  /** The foot of the tag: links (the site, the source), a note. */\n  footer?: React.ReactNode;\n  /**\n   * `hang` — the tag hangs from a string (a row of tags on one wire); `pin` — pinned flat, no string.\n   * @default \"pin\"\n   */\n  mount?: \"hang\" | \"pin\";\n};\n\n/**\n * A specimen tag: the eyelet, a typed number, a name, a stamp, the record's fields, a sentence and a foot — the status\n * and meta of a product or a component, labelled the way a field guide labels what it saw.\n */\nexport function SpecimenTag({ code, title, titleAs: Title = \"h3\", mark, status, fields, children, footer, mount = \"pin\", className, ...props }: SpecimenTagProps) {\n  return (\n    <article className={cn(\"kz-tag\", className)} data-mount={mount} {...props}>\n      <span className=\"kz-tag-eyelet\" aria-hidden />\n      {(code || status) && (\n        <div className=\"kz-tag-head\">\n          {code && <span className=\"kz-tag-code\">{code}</span>}\n          {status && <Stamp tone={status.tone}>{status.label}</Stamp>}\n        </div>\n      )}\n      {title && (\n        <Title className=\"kz-tag-title\">\n          <span>{title}</span>\n          {mark && <span className=\"kz-tag-mark\" aria-hidden>{mark}</span>}\n        </Title>\n      )}\n      {children && <div className=\"kz-tag-body\">{children}</div>}\n      {fields && fields.length > 0 && (\n        <dl className=\"kz-tag-fields\">\n          {fields.map((f, i) => (\n            <div key={i}>\n              <dt>{f.label}</dt>\n              <dd>{f.value}</dd>\n            </div>\n          ))}\n        </dl>\n      )}\n      {footer && <div className=\"kz-tag-foot\">{footer}</div>}\n    </article>\n  );\n}\n"],"mappings":";;;;;AAoBS,cA2CD,YA3CC;AADF,SAAS,MAAM,EAAE,OAAO,WAAW,WAAW,GAAG,MAAM,GAAe;AAC3E,SAAO,oBAAC,UAAK,WAAW,GAAG,YAAY,SAAS,GAAG,aAAW,MAAO,GAAG,OAAO;AACjF;AAqCO,SAAS,YAAY,EAAE,MAAM,OAAO,SAAS,QAAQ,MAAM,MAAM,QAAQ,QAAQ,UAAU,QAAQ,QAAQ,OAAO,WAAW,GAAG,MAAM,GAAqB;AAChK,SACE,qBAAC,aAAQ,WAAW,GAAG,UAAU,SAAS,GAAG,cAAY,OAAQ,GAAG,OAClE;AAAA,wBAAC,UAAK,WAAU,iBAAgB,eAAW,MAAC;AAAA,KAC1C,QAAQ,WACR,qBAAC,SAAI,WAAU,eACZ;AAAA,cAAQ,oBAAC,UAAK,WAAU,eAAe,gBAAK;AAAA,MAC5C,UAAU,oBAAC,SAAM,MAAM,OAAO,MAAO,iBAAO,OAAM;AAAA,OACrD;AAAA,IAED,SACC,qBAAC,SAAM,WAAU,gBACf;AAAA,0BAAC,UAAM,iBAAM;AAAA,MACZ,QAAQ,oBAAC,UAAK,WAAU,eAAc,eAAW,MAAE,gBAAK;AAAA,OAC3D;AAAA,IAED,YAAY,oBAAC,SAAI,WAAU,eAAe,UAAS;AAAA,IACnD,UAAU,OAAO,SAAS,KACzB,oBAAC,QAAG,WAAU,iBACX,iBAAO,IAAI,CAAC,GAAG,MACd,qBAAC,SACC;AAAA,0BAAC,QAAI,YAAE,OAAM;AAAA,MACb,oBAAC,QAAI,YAAE,OAAM;AAAA,SAFL,CAGV,CACD,GACH;AAAA,IAED,UAAU,oBAAC,SAAI,WAAU,eAAe,kBAAO;AAAA,KAClD;AAEJ;","names":[]}

package/dist/stat.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var stat = tv({
   slots: {
     root: "flex min-w-0 flex-col gap-1",
-    label: "text-xs font-semibold uppercase tracking-wider text-fg-secondary",
+    label: "text-xs font-semibold text-fg-secondary",
     value: "font-display text-2xl font-black tabular-nums text-fg",
     meta: "flex flex-wrap items-center gap-x-2 gap-y-1 text-xs",
     // The status tokens are too light for small text on a light surface: the words stay a text role, the arrow carries

package/dist/stat.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/stat/stat.tsx"],"sourcesContent":["// Server-safe. A key figure: a label, the value in tabular digits, a hint, a trend. Every word is a prop.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const stat = tv({\n  slots: {\n    root: \"flex min-w-0 flex-col gap-1\",\n    label: \"text-xs font-semibold uppercase tracking-wider text-fg-secondary\",\n    value: \"font-display text-2xl font-black tabular-nums text-fg\",\n    meta: \"flex flex-wrap items-center gap-x-2 gap-y-1 text-xs\",\n    // The status tokens are too light for small text on a light surface: the words stay a text role, the arrow carries\n    // the direction's colour.\n    trend: \"inline-flex items-center gap-1 font-semibold text-fg [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:shrink-0\",\n    hint: \"text-fg-secondary\",\n    chart: \"mt-2 h-10 w-full min-w-0\",\n  },\n  variants: {\n    trend: {\n      up: { trend: \"[&>svg]:text-success\" },\n      down: { trend: \"[&>svg]:text-danger\" },\n      flat: { trend: \"[&>svg]:text-fg-secondary\" },\n    },\n  },\n});\n\nexport type StatTrend = \"up\" | \"down\" | \"flat\";\n\nconst ARROW: Record<StatTrend, string> = { up: \"M7 17 17 7M8 7h9v9\", down: \"M7 7l10 10M17 8v9H8\", flat: \"M5 12h14M13 6l6 6-6 6\" };\n\nexport type StatProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  /** What the figure is (\"Revenue\"), above it. */\n  label: React.ReactNode;\n  /** The figure, formatted by the app, in tabular digits. */\n  value: React.ReactNode;\n  /** A line under the value: the period, the comparison. */\n  hint?: React.ReactNode;\n  /** The direction of the change; its arrow is decorative. */\n  trend?: StatTrend;\n  /** The change, in words, as read and shown (e.g. \"+12 % vs last week\") — the arrow alone says nothing. */\n  trendLabel?: React.ReactNode;\n  /** Under the figure: a `Sparkline` of @krizaka/charts (its own accessible summary), a `Meter`. */\n  chart?: React.ReactNode;\n};\n\nexport function Stat({ label, value, hint, trend, trendLabel, chart, className, ...props }: StatProps) {\n  const s = stat({ trend });\n  return (\n    <div data-trend={trend} className={s.root({ className })} {...props}>\n      <p className={s.label()}>{label}</p>\n      <p className={s.value()}>{value}</p>\n      {(trendLabel || hint) && (\n        <p className={s.meta()}>\n          {trend && trendLabel && (\n            <span className={s.trend()}>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n                <path d={ARROW[trend]} />\n              </svg>\n              {trendLabel}\n            </span>\n          )}\n          {hint && <span className={s.hint()}>{hint}</span>}\n        </p>\n      )}\n      {chart ? <div className={s.chart()}>{chart}</div> : null}\n    </div>\n  );\n}\n\nexport const statGrid = tv({\n  base: \"grid w-full grid-cols-[repeat(auto-fit,minmax(var(--kz-stat-min,11rem),1fr))] overflow-hidden rounded-xl border border-border-default bg-surface-1\",\n  variants: {\n    divided: {\n      true: \"gap-px bg-border-subtle [&>*]:bg-surface-1 [&>*]:p-5\",\n      false: \"gap-6 p-5\",\n    },\n  },\n  defaultVariants: { divided: true },\n});\n\nexport type StatGridProps = React.ComponentProps<\"div\"> & {\n  /** Hairlines between the stats (default) or space only. */\n  divided?: boolean;\n  /** The narrowest a stat may be before the row wraps, in rem. Default 11. */\n  minWidth?: number;\n};\n\n/** A row of key figures that wraps with the width: a dashboard's head. The stats are its children. */\nexport function StatGrid({ divided, minWidth = 11, className, style, ...props }: StatGridProps) {\n  return <div className={statGrid({ divided, className })} style={{ ...style, [\"--kz-stat-min\" as string]: `${minWidth}rem` }} {...props} />;\n}\n"],"mappings":";AAEA,SAAS,UAAU;AA8Cb,cAKM,YALN;AA5CC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA;AAAA;AAAA,IAGN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,MACL,IAAI,EAAE,OAAO,uBAAuB;AAAA,MACpC,MAAM,EAAE,OAAO,sBAAsB;AAAA,MACrC,MAAM,EAAE,OAAO,4BAA4B;AAAA,IAC7C;AAAA,EACF;AACF,CAAC;AAID,IAAM,QAAmC,EAAE,IAAI,sBAAsB,MAAM,uBAAuB,MAAM,wBAAwB;AAiBzH,SAAS,KAAK,EAAE,OAAO,OAAO,MAAM,OAAO,YAAY,OAAO,WAAW,GAAG,MAAM,GAAc;AACrG,QAAM,IAAI,KAAK,EAAE,MAAM,CAAC;AACxB,SACE,qBAAC,SAAI,cAAY,OAAO,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC5D;AAAA,wBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAChC,oBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,KAC9B,cAAc,SACd,qBAAC,OAAE,WAAW,EAAE,KAAK,GAClB;AAAA,eAAS,cACR,qBAAC,UAAK,WAAW,EAAE,MAAM,GACvB;AAAA,4BAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACnI,8BAAC,UAAK,GAAG,MAAM,KAAK,GAAG,GACzB;AAAA,QACC;AAAA,SACH;AAAA,MAED,QAAQ,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,OAC5C;AAAA,IAED,QAAQ,oBAAC,SAAI,WAAW,EAAE,MAAM,GAAI,iBAAM,IAAS;AAAA,KACtD;AAEJ;AAEO,IAAM,WAAW,GAAG;AAAA,EACzB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,KAAK;AACnC,CAAC;AAUM,SAAS,SAAS,EAAE,SAAS,WAAW,IAAI,WAAW,OAAO,GAAG,MAAM,GAAkB;AAC9F,SAAO,oBAAC,SAAI,WAAW,SAAS,EAAE,SAAS,UAAU,CAAC,GAAG,OAAO,EAAE,GAAG,OAAO,CAAC,eAAyB,GAAG,GAAG,QAAQ,MAAM,GAAI,GAAG,OAAO;AAC1I;","names":[]}
+{"version":3,"sources":["../src/stat/stat.tsx"],"sourcesContent":["// Server-safe. A key figure: a label, the value in tabular digits, a hint, a trend. Every word is a prop.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const stat = tv({\n  slots: {\n    root: \"flex min-w-0 flex-col gap-1\",\n    label: \"text-xs font-semibold text-fg-secondary\",\n    value: \"font-display text-2xl font-black tabular-nums text-fg\",\n    meta: \"flex flex-wrap items-center gap-x-2 gap-y-1 text-xs\",\n    // The status tokens are too light for small text on a light surface: the words stay a text role, the arrow carries\n    // the direction's colour.\n    trend: \"inline-flex items-center gap-1 font-semibold text-fg [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:shrink-0\",\n    hint: \"text-fg-secondary\",\n    chart: \"mt-2 h-10 w-full min-w-0\",\n  },\n  variants: {\n    trend: {\n      up: { trend: \"[&>svg]:text-success\" },\n      down: { trend: \"[&>svg]:text-danger\" },\n      flat: { trend: \"[&>svg]:text-fg-secondary\" },\n    },\n  },\n});\n\nexport type StatTrend = \"up\" | \"down\" | \"flat\";\n\nconst ARROW: Record<StatTrend, string> = { up: \"M7 17 17 7M8 7h9v9\", down: \"M7 7l10 10M17 8v9H8\", flat: \"M5 12h14M13 6l6 6-6 6\" };\n\nexport type StatProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  /** What the figure is (\"Revenue\"), above it. */\n  label: React.ReactNode;\n  /** The figure, formatted by the app, in tabular digits. */\n  value: React.ReactNode;\n  /** A line under the value: the period, the comparison. */\n  hint?: React.ReactNode;\n  /** The direction of the change; its arrow is decorative. */\n  trend?: StatTrend;\n  /** The change, in words, as read and shown (e.g. \"+12 % vs last week\") — the arrow alone says nothing. */\n  trendLabel?: React.ReactNode;\n  /** Under the figure: a `Sparkline` of @krizaka/charts (its own accessible summary), a `Meter`. */\n  chart?: React.ReactNode;\n};\n\nexport function Stat({ label, value, hint, trend, trendLabel, chart, className, ...props }: StatProps) {\n  const s = stat({ trend });\n  return (\n    <div data-trend={trend} className={s.root({ className })} {...props}>\n      <p className={s.label()}>{label}</p>\n      <p className={s.value()}>{value}</p>\n      {(trendLabel || hint) && (\n        <p className={s.meta()}>\n          {trend && trendLabel && (\n            <span className={s.trend()}>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n                <path d={ARROW[trend]} />\n              </svg>\n              {trendLabel}\n            </span>\n          )}\n          {hint && <span className={s.hint()}>{hint}</span>}\n        </p>\n      )}\n      {chart ? <div className={s.chart()}>{chart}</div> : null}\n    </div>\n  );\n}\n\nexport const statGrid = tv({\n  base: \"grid w-full grid-cols-[repeat(auto-fit,minmax(var(--kz-stat-min,11rem),1fr))] overflow-hidden rounded-xl border border-border-default bg-surface-1\",\n  variants: {\n    divided: {\n      true: \"gap-px bg-border-subtle [&>*]:bg-surface-1 [&>*]:p-5\",\n      false: \"gap-6 p-5\",\n    },\n  },\n  defaultVariants: { divided: true },\n});\n\nexport type StatGridProps = React.ComponentProps<\"div\"> & {\n  /** Hairlines between the stats (default) or space only. */\n  divided?: boolean;\n  /** The narrowest a stat may be before the row wraps, in rem. Default 11. */\n  minWidth?: number;\n};\n\n/** A row of key figures that wraps with the width: a dashboard's head. The stats are its children. */\nexport function StatGrid({ divided, minWidth = 11, className, style, ...props }: StatGridProps) {\n  return <div className={statGrid({ divided, className })} style={{ ...style, [\"--kz-stat-min\" as string]: `${minWidth}rem` }} {...props} />;\n}\n"],"mappings":";AAEA,SAAS,UAAU;AA8Cb,cAKM,YALN;AA5CC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA;AAAA;AAAA,IAGN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,MACL,IAAI,EAAE,OAAO,uBAAuB;AAAA,MACpC,MAAM,EAAE,OAAO,sBAAsB;AAAA,MACrC,MAAM,EAAE,OAAO,4BAA4B;AAAA,IAC7C;AAAA,EACF;AACF,CAAC;AAID,IAAM,QAAmC,EAAE,IAAI,sBAAsB,MAAM,uBAAuB,MAAM,wBAAwB;AAiBzH,SAAS,KAAK,EAAE,OAAO,OAAO,MAAM,OAAO,YAAY,OAAO,WAAW,GAAG,MAAM,GAAc;AACrG,QAAM,IAAI,KAAK,EAAE,MAAM,CAAC;AACxB,SACE,qBAAC,SAAI,cAAY,OAAO,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC5D;AAAA,wBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAChC,oBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,KAC9B,cAAc,SACd,qBAAC,OAAE,WAAW,EAAE,KAAK,GAClB;AAAA,eAAS,cACR,qBAAC,UAAK,WAAW,EAAE,MAAM,GACvB;AAAA,4BAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACnI,8BAAC,UAAK,GAAG,MAAM,KAAK,GAAG,GACzB;AAAA,QACC;AAAA,SACH;AAAA,MAED,QAAQ,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,OAC5C;AAAA,IAED,QAAQ,oBAAC,SAAI,WAAW,EAAE,MAAM,GAAI,iBAAM,IAAS;AAAA,KACtD;AAEJ;AAEO,IAAM,WAAW,GAAG;AAAA,EACzB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,KAAK;AACnC,CAAC;AAUM,SAAS,SAAS,EAAE,SAAS,WAAW,IAAI,WAAW,OAAO,GAAG,MAAM,GAAkB;AAC9F,SAAO,oBAAC,SAAI,WAAW,SAAS,EAAE,SAAS,UAAU,CAAC,GAAG,OAAO,EAAE,GAAG,OAAO,CAAC,eAAyB,GAAG,GAAG,QAAQ,MAAM,GAAI,GAAG,OAAO;AAC1I;","names":[]}

package/dist/step-progress.js

@@ -5,7 +5,7 @@ function StepProgress({ step, total, label, back, trailing, className }) {
   return /* @__PURE__ */ jsxs("div", { className: ["flex flex-col gap-1.5", className].filter(Boolean).join(" "), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ jsx("div", { className: "flex min-w-10 justify-start", children: back }),
-      /* @__PURE__ */ jsx("div", { role: "progressbar", "aria-label": words, "aria-valuemin": 1, "aria-valuemax": total, "aria-valuenow": step, "aria-valuetext": words, className: "flex flex-1 gap-1", children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx("span", { className: ["h-1 flex-1 rounded-full transition-colors motion-reduce:transition-none", i < step ? "bg-accent" : "bg-surface-3"].join(" ") }, i)) }),
+      /* @__PURE__ */ jsx("div", { role: "progressbar", "aria-label": words, "aria-valuemin": 1, "aria-valuemax": total, "aria-valuenow": step, "aria-valuetext": words, className: "flex flex-1 gap-1", children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx("span", { className: ["h-1 flex-1 rounded-sm transition-colors motion-reduce:transition-none", i < step ? "bg-accent" : "bg-surface-3"].join(" ") }, i)) }),
       /* @__PURE__ */ jsx("div", { className: "flex min-w-10 justify-end", children: trailing })
     ] }),
     /* @__PURE__ */ jsx("p", { className: "m-0 text-center text-xs text-fg-secondary", "aria-hidden": true, children: words })

package/dist/step-progress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/step-progress/step-progress.tsx"],"sourcesContent":["// Server-safe. The head of a multi-step flow: back, segments that fill, the position in words — a `progressbar`.\nimport type * as React from \"react\";\n\nexport type StepProgressProps = {\n  /** The current step, from 1. */\n  step: number;\n  /** How many steps. */\n  total: number;\n  /** The position in words: `(n, total) => \"Step \" + n + \" of \" + total` — passed translated. */\n  label: (step: number, total: number) => string;\n  /** The back link or button (a `Button`), at the left. */\n  back?: React.ReactNode;\n  /** At the right: a Skip link. */\n  trailing?: React.ReactNode;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** The head of a sign-up or a profile to fill: back, segments that fill, the position in words. */\nexport function StepProgress({ step, total, label, back, trailing, className }: StepProgressProps) {\n  const words = label(step, total);\n  return (\n    <div className={[\"flex flex-col gap-1.5\", className].filter(Boolean).join(\" \")}>\n      <div className=\"flex items-center gap-3\">\n        <div className=\"flex min-w-10 justify-start\">{back}</div>\n        <div role=\"progressbar\" aria-label={words} aria-valuemin={1} aria-valuemax={total} aria-valuenow={step} aria-valuetext={words} className=\"flex flex-1 gap-1\">\n          {Array.from({ length: total }, (_, i) => (\n            <span key={i} className={[\"h-1 flex-1 rounded-full transition-colors motion-reduce:transition-none\", i < step ? \"bg-accent\" : \"bg-surface-3\"].join(\" \")} />\n          ))}\n        </div>\n        <div className=\"flex min-w-10 justify-end\">{trailing}</div>\n      </div>\n      <p className=\"m-0 text-center text-xs text-fg-secondary\" aria-hidden>\n        {words}\n      </p>\n    </div>\n  );\n}\n"],"mappings":";AAuBM,SACE,KADF;AAJC,SAAS,aAAa,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,UAAU,GAAsB;AACjG,QAAM,QAAQ,MAAM,MAAM,KAAK;AAC/B,SACE,qBAAC,SAAI,WAAW,CAAC,yBAAyB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC3E;AAAA,yBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,SAAI,WAAU,+BAA+B,gBAAK;AAAA,MACnD,oBAAC,SAAI,MAAK,eAAc,cAAY,OAAO,iBAAe,GAAG,iBAAe,OAAO,iBAAe,MAAM,kBAAgB,OAAO,WAAU,qBACtI,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MACjC,oBAAC,UAAa,WAAW,CAAC,2EAA2E,IAAI,OAAO,cAAc,cAAc,EAAE,KAAK,GAAG,KAA3I,CAA8I,CAC1J,GACH;AAAA,MACA,oBAAC,SAAI,WAAU,6BAA6B,oBAAS;AAAA,OACvD;AAAA,IACA,oBAAC,OAAE,WAAU,6CAA4C,eAAW,MACjE,iBACH;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../src/step-progress/step-progress.tsx"],"sourcesContent":["// Server-safe. The head of a multi-step flow: back, segments that fill, the position in words — a `progressbar`.\nimport type * as React from \"react\";\n\nexport type StepProgressProps = {\n  /** The current step, from 1. */\n  step: number;\n  /** How many steps. */\n  total: number;\n  /** The position in words: `(n, total) => \"Step \" + n + \" of \" + total` — passed translated. */\n  label: (step: number, total: number) => string;\n  /** The back link or button (a `Button`), at the left. */\n  back?: React.ReactNode;\n  /** At the right: a Skip link. */\n  trailing?: React.ReactNode;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** The head of a sign-up or a profile to fill: back, segments that fill, the position in words. */\nexport function StepProgress({ step, total, label, back, trailing, className }: StepProgressProps) {\n  const words = label(step, total);\n  return (\n    <div className={[\"flex flex-col gap-1.5\", className].filter(Boolean).join(\" \")}>\n      <div className=\"flex items-center gap-3\">\n        <div className=\"flex min-w-10 justify-start\">{back}</div>\n        <div role=\"progressbar\" aria-label={words} aria-valuemin={1} aria-valuemax={total} aria-valuenow={step} aria-valuetext={words} className=\"flex flex-1 gap-1\">\n          {Array.from({ length: total }, (_, i) => (\n            <span key={i} className={[\"h-1 flex-1 rounded-sm transition-colors motion-reduce:transition-none\", i < step ? \"bg-accent\" : \"bg-surface-3\"].join(\" \")} />\n          ))}\n        </div>\n        <div className=\"flex min-w-10 justify-end\">{trailing}</div>\n      </div>\n      <p className=\"m-0 text-center text-xs text-fg-secondary\" aria-hidden>\n        {words}\n      </p>\n    </div>\n  );\n}\n"],"mappings":";AAuBM,SACE,KADF;AAJC,SAAS,aAAa,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,UAAU,GAAsB;AACjG,QAAM,QAAQ,MAAM,MAAM,KAAK;AAC/B,SACE,qBAAC,SAAI,WAAW,CAAC,yBAAyB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC3E;AAAA,yBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,SAAI,WAAU,+BAA+B,gBAAK;AAAA,MACnD,oBAAC,SAAI,MAAK,eAAc,cAAY,OAAO,iBAAe,GAAG,iBAAe,OAAO,iBAAe,MAAM,kBAAgB,OAAO,WAAU,qBACtI,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MACjC,oBAAC,UAAa,WAAW,CAAC,yEAAyE,IAAI,OAAO,cAAc,cAAc,EAAE,KAAK,GAAG,KAAzI,CAA4I,CACxJ,GACH;AAAA,MACA,oBAAC,SAAI,WAAU,6BAA6B,oBAAS;AAAA,OACvD;AAAA,IACA,oBAAC,OAAE,WAAU,6CAA4C,eAAW,MACjE,iBACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/sticky-action.d.ts

@@ -1,7 +1,7 @@
 import * as tailwind_variants from 'tailwind-variants';
 import * as React from 'react';
 
-declare const stickyAction: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "sticky bottom-0 z-30 border-t border-border-subtle bg-surface-1/90 px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3 backdrop-blur-xl md:hidden", {} | {}, undefined, tailwind_variants.TVReturnTypeLike<unknown, undefined>>;
+declare const stickyAction: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "sticky bottom-0 z-30 border-t border-border-subtle bg-surface-1 px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3 md:hidden", {} | {}, undefined, tailwind_variants.TVReturnTypeLike<unknown, undefined>>;
 type StickyActionProps = React.ComponentProps<"div"> & {
     /** The action: one `ButtonLink` (full width is added). */
     children: React.ReactNode;

package/dist/sticky-action.js

@@ -2,7 +2,7 @@
 import { tv } from "tailwind-variants";
 import { jsx } from "react/jsx-runtime";
 var stickyAction = tv({
-  base: "sticky bottom-0 z-30 border-t border-border-subtle bg-surface-1/90 px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3 backdrop-blur-xl md:hidden"
+  base: "sticky bottom-0 z-30 border-t border-border-subtle bg-surface-1 px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3 md:hidden"
 });
 function StickyAction({ className, children, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: stickyAction({ className }), ...props, children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-md flex-col [&>*]:w-full", children }) });

package/dist/sticky-action.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/sticky-action/sticky-action.tsx"],"sourcesContent":["// Server-safe: pure CSS. The main action of a page, stuck to the bottom of a phone's screen while the page scrolls: put it\n// as the last child of the page's `main` (a sticky element holds the viewport's edge inside its container). From `md` up it\n// is not drawn — the page's own buttons are within reach.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const stickyAction = tv({\n  base: \"sticky bottom-0 z-30 border-t border-border-subtle bg-surface-1/90 px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3 backdrop-blur-xl md:hidden\",\n});\n\nexport type StickyActionProps = React.ComponentProps<\"div\"> & {\n  /** The action: one `ButtonLink` (full width is added). */\n  children: React.ReactNode;\n};\n\n/** The one action of a page, held at the bottom edge of a phone. */\nexport function StickyAction({ className, children, ...props }: StickyActionProps) {\n  return (\n    <div className={stickyAction({ className })} {...props}>\n      <div className=\"mx-auto flex max-w-md flex-col [&>*]:w-full\">{children}</div>\n    </div>\n  );\n}\n"],"mappings":";AAIA,SAAS,UAAU;AAeb;AAbC,IAAM,eAAe,GAAG;AAAA,EAC7B,MAAM;AACR,CAAC;AAQM,SAAS,aAAa,EAAE,WAAW,UAAU,GAAG,MAAM,GAAsB;AACjF,SACE,oBAAC,SAAI,WAAW,aAAa,EAAE,UAAU,CAAC,GAAI,GAAG,OAC/C,8BAAC,SAAI,WAAU,+CAA+C,UAAS,GACzE;AAEJ;","names":[]}
+{"version":3,"sources":["../src/sticky-action/sticky-action.tsx"],"sourcesContent":["// Server-safe: pure CSS. The main action of a page, stuck to the bottom of a phone's screen while the page scrolls: put it\n// as the last child of the page's `main` (a sticky element holds the viewport's edge inside its container). From `md` up it\n// is not drawn — the page's own buttons are within reach.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const stickyAction = tv({\n  base: \"sticky bottom-0 z-30 border-t border-border-subtle bg-surface-1 px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3 md:hidden\",\n});\n\nexport type StickyActionProps = React.ComponentProps<\"div\"> & {\n  /** The action: one `ButtonLink` (full width is added). */\n  children: React.ReactNode;\n};\n\n/** The one action of a page, held at the bottom edge of a phone. */\nexport function StickyAction({ className, children, ...props }: StickyActionProps) {\n  return (\n    <div className={stickyAction({ className })} {...props}>\n      <div className=\"mx-auto flex max-w-md flex-col [&>*]:w-full\">{children}</div>\n    </div>\n  );\n}\n"],"mappings":";AAIA,SAAS,UAAU;AAeb;AAbC,IAAM,eAAe,GAAG;AAAA,EAC7B,MAAM;AACR,CAAC;AAQM,SAAS,aAAa,EAAE,WAAW,UAAU,GAAG,MAAM,GAAsB;AACjF,SACE,oBAAC,SAAI,WAAW,aAAa,EAAE,UAAU,CAAC,GAAI,GAAG,OAC/C,8BAAC,SAAI,WAAU,+CAA+C,UAAS,GACzE;AAEJ;","names":[]}

package/dist/swipe-deck.js

@@ -12,7 +12,7 @@ var swipeDeck = tv({
     root: "flex w-full flex-col items-center gap-5",
     stack: "relative aspect-[3/4] w-full max-w-sm outline-hidden focus-visible:rounded-2xl focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-4 focus-visible:ring-offset-surface-0",
     layer: "absolute inset-0 touch-pan-y select-none",
-    stamp: "pointer-events-none absolute top-8 rounded-lg border-[3px] px-2.5 py-0.5 font-display text-2xl font-black uppercase tracking-wide",
+    stamp: "pointer-events-none absolute top-8 rounded-lg border-[3px] px-2.5 py-0.5 font-display text-2xl font-black ",
     buttons: "flex items-center gap-7",
     button: "inline-flex h-16 w-16 items-center justify-center rounded-full border-2 bg-surface-1 shadow-md transition-transform active:scale-90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40 motion-reduce:transition-none [&>svg]:h-7 [&>svg]:w-7",
     card: "relative h-full w-full overflow-hidden rounded-2xl bg-surface-3 shadow-lg",

package/dist/swipe-deck.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/swipe-deck/swipe-deck.tsx"],"sourcesContent":["// Client (the drag, the decision). A deck of cards decided one by one — drag right to like, left to pass, or the\n// buttons, or ← → on the focused deck — and `PersonCard`, a person on a card. Reduced motion: the card leaves without\n// flying.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { usePrefersReducedMotion } from \"../media\";\n\nexport const swipeDeck = tv({\n  slots: {\n    root: \"flex w-full flex-col items-center gap-5\",\n    stack: \"relative aspect-[3/4] w-full max-w-sm outline-hidden focus-visible:rounded-2xl focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-4 focus-visible:ring-offset-surface-0\",\n    layer: \"absolute inset-0 touch-pan-y select-none\",\n    stamp: \"pointer-events-none absolute top-8 rounded-lg border-[3px] px-2.5 py-0.5 font-display text-2xl font-black uppercase tracking-wide\",\n    buttons: \"flex items-center gap-7\",\n    button:\n      \"inline-flex h-16 w-16 items-center justify-center rounded-full border-2 bg-surface-1 shadow-md transition-transform active:scale-90 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40 motion-reduce:transition-none [&>svg]:h-7 [&>svg]:w-7\",\n    card: \"relative h-full w-full overflow-hidden rounded-2xl bg-surface-3 shadow-lg\",\n    photo: \"absolute inset-0 h-full w-full object-cover\",\n    bars: \"absolute inset-x-2 top-2 flex gap-1\",\n    bar: \"h-[3px] flex-1 rounded-full bg-fg-on-media opacity-40 data-[on]:opacity-100\",\n    half: \"absolute top-0 bottom-2/5 w-2/5 cursor-pointer outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring\",\n    info: \"absolute inset-x-0 bottom-0 flex flex-col gap-1.5 bg-gradient-to-t from-scrim-strong via-scrim-strong/80 to-transparent p-4 pt-24 text-fg-on-media\",\n    name: \"flex items-center gap-2 font-display text-3xl font-black\",\n    age: \"font-sans text-2xl font-normal\",\n    bio: \"line-clamp-2 text-sm\",\n    footer: \"mt-1 flex flex-wrap gap-1.5\",\n  },\n});\n\nexport type PersonCardProps = {\n  /** The person's photos (URLs), the first shown first; click a side, or its buttons, to move between them. */\n  photos: readonly { src: string; alt?: string }[];\n  /** The name. */\n  name: string;\n  /** The age, written after the name. */\n  age?: number;\n  /** Beside the name: a `VerifiedBadge`. */\n  badge?: React.ReactNode;\n  /** A line under the name: a distance, a job. */\n  meta?: React.ReactNode;\n  /** A sentence about the person. */\n  bio?: string;\n  /** At the bottom: the interests as chips. */\n  footer?: React.ReactNode;\n  /** The photo buttons' words: `{ previous: \"Previous photo\", next: \"Next photo\" }` — passed translated. */\n  photoLabels?: { previous: string; next: string };\n  /** Classes merged on the card. */\n  className?: string;\n};\n\n/** A person on a card: photos full bleed (a side to change), name and age over a scrim, a line, a bio, chips. */\nexport function PersonCard({ photos, name, age, badge, meta, bio, footer, photoLabels = { previous: \"Previous photo\", next: \"Next photo\" }, className }: PersonCardProps) {\n  const s = swipeDeck();\n  const [index, setIndex] = React.useState(0);\n  const photo = photos[index];\n  return (\n    <article aria-label={age !== undefined ? `${name}, ${age}` : name} className={s.card({ className })}>\n      {photo ? <img src={photo.src} alt={photo.alt ?? \"\"} className={s.photo()} draggable={false} /> : null}\n      {photos.length > 1 ? (\n        <>\n          <div className={s.bars()} aria-hidden>\n            {photos.map((_, i) => (\n              <span key={i} className={s.bar()} data-on={i === index || undefined} />\n            ))}\n          </div>\n          <button type=\"button\" aria-label={photoLabels.previous} disabled={index === 0} className={s.half({ className: \"left-0\" })} onClick={() => setIndex((i) => Math.max(0, i - 1))} />\n          <button type=\"button\" aria-label={photoLabels.next} disabled={index === photos.length - 1} className={s.half({ className: \"right-0\" })} onClick={() => setIndex((i) => Math.min(photos.length - 1, i + 1))} />\n        </>\n      ) : null}\n      <div className={s.info()}>\n        <h3 className={s.name()}>\n          <span className=\"truncate\">\n            {name}\n            {age !== undefined ? <span className={s.age()}>{`  ${age}`}</span> : null}\n          </span>\n          {badge}\n        </h3>\n        {meta}\n        {bio ? <p className={s.bio()}>{bio}</p> : null}\n        {footer ? <div className={s.footer()}>{footer}</div> : null}\n      </div>\n    </article>\n  );\n}\n\nexport type SwipeDirection = \"like\" | \"pass\";\n\nexport type SwipeDeckLabels = {\n  /** The like button (“Like”). */\n  like: string;\n  /** The pass button (“Pass”). */\n  pass: string;\n  /** The deck's name and its keyboard hint (“Profiles. Right arrow to like, left arrow to pass.”). */\n  deck: string;\n  /** The stamp while dragging right (“LIKE”). */\n  likeStamp?: string;\n  /** The stamp while dragging left (“NOPE”). */\n  passStamp?: string;\n  /** Announced after a decision: `(name, direction) => …`. */\n  decided?: (name: string, direction: SwipeDirection) => string;\n};\n\nexport type SwipeDeckProps<T> = {\n  /** The cards still to decide, the first on top. */\n  items: readonly T[];\n  /** A card's id. */\n  getId: (item: T) => string;\n  /** A card's name, for the announcements. */\n  getName: (item: T) => string;\n  /** A card (usually a `PersonCard`). */\n  renderCard: (item: T) => React.ReactNode;\n  /** Called with the card decided and the decision; remove it from `items`. */\n  onSwipe: (item: T, direction: SwipeDirection) => void;\n  /** Shown when there is no card left (an `EmptyState`). */\n  empty?: React.ReactNode;\n  /** The words, passed translated. */\n  labels: SwipeDeckLabels;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** A deck of cards decided one by one: drag, the buttons, or ← → — each decision announced. */\nexport function SwipeDeck<T>({ items, getId, getName, renderCard, onSwipe, empty, labels, className }: SwipeDeckProps<T>) {\n  const s = swipeDeck();\n  const reduce = usePrefersReducedMotion();\n  const [dx, setDx] = React.useState(0);\n  const [leaving, setLeaving] = React.useState<SwipeDirection | null>(null);\n  const [message, setMessage] = React.useState(\"\");\n  const start = React.useRef<{ x: number; width: number } | null>(null);\n  const [dragging, setDragging] = React.useState(false);\n  const top = items[0];\n  const decide = (direction: SwipeDirection) => {\n    if (!top || leaving) return;\n    const finish = () => {\n      setLeaving(null);\n      setDx(0);\n      setMessage(labels.decided ? labels.decided(getName(top), direction) : `${getName(top)}: ${direction === \"like\" ? labels.like : labels.pass}`);\n      onSwipe(top, direction);\n    };\n    if (reduce) return finish();\n    setLeaving(direction);\n    setTimeout(finish, 220);\n  };\n  const offset = leaving ? (leaving === \"like\" ? 1 : -1) * 900 : dx;\n  const stampOpacity = (dir: 1 | -1) => Math.max(0, Math.min(1, (dir * offset) / 120));\n  return (\n    <div className={s.root({ className })}>\n      <p className=\"sr-only\" aria-live=\"polite\">\n        {message}\n      </p>\n      <div\n        role=\"group\"\n        aria-label={labels.deck}\n        tabIndex={top ? 0 : -1}\n        className={s.stack()}\n        onKeyDown={(e) => {\n          if (e.key === \"ArrowRight\") decide(\"like\");\n          if (e.key === \"ArrowLeft\") decide(\"pass\");\n        }}\n      >\n        {!top ? empty : null}\n        {items\n          .slice(0, 2)\n          .reverse()\n          .map((item) => {\n            const isTop = item === top;\n            return (\n              <div\n                key={getId(item)}\n                aria-hidden={!isTop || undefined}\n                inert={!isTop || undefined}\n                className={s.layer()}\n                style={\n                  isTop\n                    ? { transform: `translateX(${offset}px) rotate(${offset / 22}deg)`, transition: dragging && !leaving ? \"none\" : reduce ? \"none\" : \"transform 220ms var(--kz-ease, ease-out)\" }\n                    : { transform: \"scale(0.96)\", opacity: 0.9 }\n                }\n                onPointerDown={(e) => {\n                  if (!isTop || (e.target as HTMLElement).closest(\"button\")) return;\n                  start.current = { x: e.clientX, width: e.currentTarget.offsetWidth };\n                  e.currentTarget.setPointerCapture(e.pointerId);\n                  setDragging(true);\n                }}\n                onPointerMove={(e) => {\n                  if (start.current) setDx(e.clientX - start.current.x);\n                }}\n                onPointerUp={() => {\n                  const width = start.current?.width ?? 300;\n                  start.current = null;\n                  setDragging(false);\n                  if (dx > width / 3) decide(\"like\");\n                  else if (dx < -width / 3) decide(\"pass\");\n                  else setDx(0);\n                }}\n              >\n                {renderCard(item)}\n                {isTop ? (\n                  <>\n                    <span aria-hidden className={s.stamp({ className: \"left-6 -rotate-12 border-success text-fg-success\" })} style={{ opacity: stampOpacity(1) }}>\n                      {labels.likeStamp ?? labels.like}\n                    </span>\n                    <span aria-hidden className={s.stamp({ className: \"right-6 rotate-12 border-danger text-fg-danger\" })} style={{ opacity: stampOpacity(-1) }}>\n                      {labels.passStamp ?? labels.pass}\n                    </span>\n                  </>\n                ) : null}\n              </div>\n            );\n          })}\n      </div>\n      <div className={s.buttons()}>\n        <button type=\"button\" aria-label={labels.pass} disabled={!top} onClick={() => decide(\"pass\")} className={s.button({ className: \"border-danger text-fg-danger\" })}>\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" aria-hidden>\n            <path d=\"M6 6l12 12M18 6 6 18\" />\n          </svg>\n        </button>\n        <button type=\"button\" aria-label={labels.like} disabled={!top} onClick={() => decide(\"like\")} className={s.button({ className: \"border-success text-fg-success\" })}>\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden>\n            <path d=\"M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/swipe-deck/swipe-deck.tsx"],"sourcesContent":["// Client (the drag, the decision). A deck of cards decided one by one — drag right to like, left to pass, or the\n// buttons, or ← → on the focused deck — and `PersonCard`, a person on a card. Reduced motion: the card leaves without\n// flying.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { usePrefersReducedMotion } from \"../media\";\n\nexport const swipeDeck = tv({\n  slots: {\n    root: \"flex w-full flex-col items-center gap-5\",\n    stack: \"relative aspect-[3/4] w-full max-w-sm outline-hidden focus-visible:rounded-2xl focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-4 focus-visible:ring-offset-surface-0\",\n    layer: \"absolute inset-0 touch-pan-y select-none\",\n    stamp: \"pointer-events-none absolute top-8 rounded-lg border-[3px] px-2.5 py-0.5 font-display text-2xl font-black \",\n    buttons: \"flex items-center gap-7\",\n    button:\n      \"inline-flex h-16 w-16 items-center justify-center rounded-full border-2 bg-surface-1 shadow-md transition-transform active:scale-90 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40 motion-reduce:transition-none [&>svg]:h-7 [&>svg]:w-7\",\n    card: \"relative h-full w-full overflow-hidden rounded-2xl bg-surface-3 shadow-lg\",\n    photo: \"absolute inset-0 h-full w-full object-cover\",\n    bars: \"absolute inset-x-2 top-2 flex gap-1\",\n    bar: \"h-[3px] flex-1 rounded-full bg-fg-on-media opacity-40 data-[on]:opacity-100\",\n    half: \"absolute top-0 bottom-2/5 w-2/5 cursor-pointer outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring\",\n    info: \"absolute inset-x-0 bottom-0 flex flex-col gap-1.5 bg-gradient-to-t from-scrim-strong via-scrim-strong/80 to-transparent p-4 pt-24 text-fg-on-media\",\n    name: \"flex items-center gap-2 font-display text-3xl font-black\",\n    age: \"font-sans text-2xl font-normal\",\n    bio: \"line-clamp-2 text-sm\",\n    footer: \"mt-1 flex flex-wrap gap-1.5\",\n  },\n});\n\nexport type PersonCardProps = {\n  /** The person's photos (URLs), the first shown first; click a side, or its buttons, to move between them. */\n  photos: readonly { src: string; alt?: string }[];\n  /** The name. */\n  name: string;\n  /** The age, written after the name. */\n  age?: number;\n  /** Beside the name: a `VerifiedBadge`. */\n  badge?: React.ReactNode;\n  /** A line under the name: a distance, a job. */\n  meta?: React.ReactNode;\n  /** A sentence about the person. */\n  bio?: string;\n  /** At the bottom: the interests as chips. */\n  footer?: React.ReactNode;\n  /** The photo buttons' words: `{ previous: \"Previous photo\", next: \"Next photo\" }` — passed translated. */\n  photoLabels?: { previous: string; next: string };\n  /** Classes merged on the card. */\n  className?: string;\n};\n\n/** A person on a card: photos full bleed (a side to change), name and age over a scrim, a line, a bio, chips. */\nexport function PersonCard({ photos, name, age, badge, meta, bio, footer, photoLabels = { previous: \"Previous photo\", next: \"Next photo\" }, className }: PersonCardProps) {\n  const s = swipeDeck();\n  const [index, setIndex] = React.useState(0);\n  const photo = photos[index];\n  return (\n    <article aria-label={age !== undefined ? `${name}, ${age}` : name} className={s.card({ className })}>\n      {photo ? <img src={photo.src} alt={photo.alt ?? \"\"} className={s.photo()} draggable={false} /> : null}\n      {photos.length > 1 ? (\n        <>\n          <div className={s.bars()} aria-hidden>\n            {photos.map((_, i) => (\n              <span key={i} className={s.bar()} data-on={i === index || undefined} />\n            ))}\n          </div>\n          <button type=\"button\" aria-label={photoLabels.previous} disabled={index === 0} className={s.half({ className: \"left-0\" })} onClick={() => setIndex((i) => Math.max(0, i - 1))} />\n          <button type=\"button\" aria-label={photoLabels.next} disabled={index === photos.length - 1} className={s.half({ className: \"right-0\" })} onClick={() => setIndex((i) => Math.min(photos.length - 1, i + 1))} />\n        </>\n      ) : null}\n      <div className={s.info()}>\n        <h3 className={s.name()}>\n          <span className=\"truncate\">\n            {name}\n            {age !== undefined ? <span className={s.age()}>{`  ${age}`}</span> : null}\n          </span>\n          {badge}\n        </h3>\n        {meta}\n        {bio ? <p className={s.bio()}>{bio}</p> : null}\n        {footer ? <div className={s.footer()}>{footer}</div> : null}\n      </div>\n    </article>\n  );\n}\n\nexport type SwipeDirection = \"like\" | \"pass\";\n\nexport type SwipeDeckLabels = {\n  /** The like button (“Like”). */\n  like: string;\n  /** The pass button (“Pass”). */\n  pass: string;\n  /** The deck's name and its keyboard hint (“Profiles. Right arrow to like, left arrow to pass.”). */\n  deck: string;\n  /** The stamp while dragging right (“LIKE”). */\n  likeStamp?: string;\n  /** The stamp while dragging left (“NOPE”). */\n  passStamp?: string;\n  /** Announced after a decision: `(name, direction) => …`. */\n  decided?: (name: string, direction: SwipeDirection) => string;\n};\n\nexport type SwipeDeckProps<T> = {\n  /** The cards still to decide, the first on top. */\n  items: readonly T[];\n  /** A card's id. */\n  getId: (item: T) => string;\n  /** A card's name, for the announcements. */\n  getName: (item: T) => string;\n  /** A card (usually a `PersonCard`). */\n  renderCard: (item: T) => React.ReactNode;\n  /** Called with the card decided and the decision; remove it from `items`. */\n  onSwipe: (item: T, direction: SwipeDirection) => void;\n  /** Shown when there is no card left (an `EmptyState`). */\n  empty?: React.ReactNode;\n  /** The words, passed translated. */\n  labels: SwipeDeckLabels;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** A deck of cards decided one by one: drag, the buttons, or ← → — each decision announced. */\nexport function SwipeDeck<T>({ items, getId, getName, renderCard, onSwipe, empty, labels, className }: SwipeDeckProps<T>) {\n  const s = swipeDeck();\n  const reduce = usePrefersReducedMotion();\n  const [dx, setDx] = React.useState(0);\n  const [leaving, setLeaving] = React.useState<SwipeDirection | null>(null);\n  const [message, setMessage] = React.useState(\"\");\n  const start = React.useRef<{ x: number; width: number } | null>(null);\n  const [dragging, setDragging] = React.useState(false);\n  const top = items[0];\n  const decide = (direction: SwipeDirection) => {\n    if (!top || leaving) return;\n    const finish = () => {\n      setLeaving(null);\n      setDx(0);\n      setMessage(labels.decided ? labels.decided(getName(top), direction) : `${getName(top)}: ${direction === \"like\" ? labels.like : labels.pass}`);\n      onSwipe(top, direction);\n    };\n    if (reduce) return finish();\n    setLeaving(direction);\n    setTimeout(finish, 220);\n  };\n  const offset = leaving ? (leaving === \"like\" ? 1 : -1) * 900 : dx;\n  const stampOpacity = (dir: 1 | -1) => Math.max(0, Math.min(1, (dir * offset) / 120));\n  return (\n    <div className={s.root({ className })}>\n      <p className=\"sr-only\" aria-live=\"polite\">\n        {message}\n      </p>\n      <div\n        role=\"group\"\n        aria-label={labels.deck}\n        tabIndex={top ? 0 : -1}\n        className={s.stack()}\n        onKeyDown={(e) => {\n          if (e.key === \"ArrowRight\") decide(\"like\");\n          if (e.key === \"ArrowLeft\") decide(\"pass\");\n        }}\n      >\n        {!top ? empty : null}\n        {items\n          .slice(0, 2)\n          .reverse()\n          .map((item) => {\n            const isTop = item === top;\n            return (\n              <div\n                key={getId(item)}\n                aria-hidden={!isTop || undefined}\n                inert={!isTop || undefined}\n                className={s.layer()}\n                style={\n                  isTop\n                    ? { transform: `translateX(${offset}px) rotate(${offset / 22}deg)`, transition: dragging && !leaving ? \"none\" : reduce ? \"none\" : \"transform 220ms var(--kz-ease, ease-out)\" }\n                    : { transform: \"scale(0.96)\", opacity: 0.9 }\n                }\n                onPointerDown={(e) => {\n                  if (!isTop || (e.target as HTMLElement).closest(\"button\")) return;\n                  start.current = { x: e.clientX, width: e.currentTarget.offsetWidth };\n                  e.currentTarget.setPointerCapture(e.pointerId);\n                  setDragging(true);\n                }}\n                onPointerMove={(e) => {\n                  if (start.current) setDx(e.clientX - start.current.x);\n                }}\n                onPointerUp={() => {\n                  const width = start.current?.width ?? 300;\n                  start.current = null;\n                  setDragging(false);\n                  if (dx > width / 3) decide(\"like\");\n                  else if (dx < -width / 3) decide(\"pass\");\n                  else setDx(0);\n                }}\n              >\n                {renderCard(item)}\n                {isTop ? (\n                  <>\n                    <span aria-hidden className={s.stamp({ className: \"left-6 -rotate-12 border-success text-fg-success\" })} style={{ opacity: stampOpacity(1) }}>\n                      {labels.likeStamp ?? labels.like}\n                    </span>\n                    <span aria-hidden className={s.stamp({ className: \"right-6 rotate-12 border-danger text-fg-danger\" })} style={{ opacity: stampOpacity(-1) }}>\n                      {labels.passStamp ?? labels.pass}\n                    </span>\n                  </>\n                ) : null}\n              </div>\n            );\n          })}\n      </div>\n      <div className={s.buttons()}>\n        <button type=\"button\" aria-label={labels.pass} disabled={!top} onClick={() => decide(\"pass\")} className={s.button({ className: \"border-danger text-fg-danger\" })}>\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" aria-hidden>\n            <path d=\"M6 6l12 12M18 6 6 18\" />\n          </svg>\n        </button>\n        <button type=\"button\" aria-label={labels.like} disabled={!top} onClick={() => decide(\"like\")} className={s.button({ className: \"border-success text-fg-success\" })}>\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden>\n            <path d=\"M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/tabs.js

@@ -21,8 +21,8 @@ var tabs = tv({
     variant: {
       /* The section of a page: a line under the list, the active tab underlined in the accent. */
       underline: {
-        list: "gap-1 border-border-default data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-r before:rounded-full before:bg-accent data-[orientation=horizontal]:before:-bottom-px data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:h-0.5 data-[orientation=horizontal]:before:w-(--kz-ind-w) data-[orientation=horizontal]:before:translate-x-(--kz-ind-x) data-[orientation=vertical]:before:-right-px data-[orientation=vertical]:before:top-0 data-[orientation=vertical]:before:w-0.5 data-[orientation=vertical]:before:h-(--kz-ind-h) data-[orientation=vertical]:before:translate-y-(--kz-ind-y)",
-        trigger: "relative rounded-md px-3 py-2.5 text-sm text-fg-secondary hover:text-fg data-[state=active]:text-fg after:absolute after:rounded-full after:bg-transparent data-[state=active]:after:bg-accent data-[orientation=horizontal]:after:inset-x-2 data-[orientation=horizontal]:after:-bottom-px data-[orientation=horizontal]:after:h-0.5 data-[orientation=vertical]:justify-start data-[orientation=vertical]:after:inset-y-1.5 data-[orientation=vertical]:after:-right-px data-[orientation=vertical]:after:w-0.5 group-data-[indicator=on]/tabs:data-[state=active]:after:bg-transparent"
+        list: "gap-1 border-border-default data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-r before:rounded-sm before:bg-accent data-[orientation=horizontal]:before:-bottom-px data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:h-0.5 data-[orientation=horizontal]:before:w-(--kz-ind-w) data-[orientation=horizontal]:before:translate-x-(--kz-ind-x) data-[orientation=vertical]:before:-right-px data-[orientation=vertical]:before:top-0 data-[orientation=vertical]:before:w-0.5 data-[orientation=vertical]:before:h-(--kz-ind-h) data-[orientation=vertical]:before:translate-y-(--kz-ind-y)",
+        trigger: "relative rounded-md px-3 py-2.5 text-sm text-fg-secondary hover:text-fg data-[state=active]:text-fg after:absolute after:rounded-sm after:bg-transparent data-[state=active]:after:bg-accent data-[orientation=horizontal]:after:inset-x-2 data-[orientation=horizontal]:after:-bottom-px data-[orientation=horizontal]:after:h-0.5 data-[orientation=vertical]:justify-start data-[orientation=vertical]:after:inset-y-1.5 data-[orientation=vertical]:after:-right-px data-[orientation=vertical]:after:w-0.5 group-data-[indicator=on]/tabs:data-[state=active]:after:bg-transparent"
       },
       /* A view switch: equal segments in a track, the active one filled. */
       segmented: {
@@ -31,8 +31,8 @@ var tabs = tv({
       },
       /* Pills that scroll sideways on a phone: a feed's sections. */
       pills: {
-        list: "gap-1.5 overflow-x-auto overflow-y-hidden overscroll-x-contain pt-1 -mt-1 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-full before:border before:border-accent before:bg-accent-soft",
-        trigger: "h-9 rounded-full border border-border-default bg-surface-1 px-4 text-xs text-fg-secondary hover:border-border-strong hover:text-fg data-[state=active]:border-accent data-[state=active]:bg-accent-soft data-[state=active]:text-fg group-data-[indicator=on]/tabs:data-[state=active]:border-transparent group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent"
+        list: "gap-1.5 overflow-x-auto overflow-y-hidden overscroll-x-contain pt-1 -mt-1 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-sm before:border before:border-accent before:bg-accent-soft",
+        trigger: "h-9 rounded-sm border border-border-default bg-surface-1 px-4 text-xs text-fg-secondary hover:border-border-strong hover:text-fg data-[state=active]:border-accent data-[state=active]:bg-accent-soft data-[state=active]:text-fg group-data-[indicator=on]/tabs:data-[state=active]:border-transparent group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent"
       }
     }
   },

package/dist/tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tabs/tabs.tsx"],"sourcesContent":["// Client (a context). Radix Tabs does the roles (tablist, tab, tabpanel), the aria-selected / aria-controls wiring,\n// the roving focus (arrows, Home, End) and automatic activation: this file only holds the three looks.\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { useSlidingIndicator } from \"../sliding-indicator\";\n\nexport const tabs = tv({\n  slots: {\n    root: \"flex gap-4 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row\",\n    // One light glides from the active tab to the next (`before:`, placed by useSlidingIndicator); until it is placed\n    // (server render), each trigger carries its own active style.\n    list:\n      \"group/tabs relative isolate flex shrink-0 data-[orientation=vertical]:flex-col \" +\n      \"before:pointer-events-none before:absolute before:-z-10 before:opacity-0 before:transition-[translate,width,height,opacity] before:duration-300 \" +\n      \"motion-reduce:before:transition-none data-[indicator=on]:before:opacity-100\",\n    trigger:\n      \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40\",\n    content: \"kz-fade min-w-0 flex-1 rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-[state=inactive]:hidden\",\n  },\n  variants: {\n    variant: {\n      /* The section of a page: a line under the list, the active tab underlined in the accent. */\n      underline: {\n        list:\n          \"gap-1 border-border-default data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-r before:rounded-full before:bg-accent \" +\n          \"data-[orientation=horizontal]:before:-bottom-px data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:h-0.5 \" +\n          \"data-[orientation=horizontal]:before:w-(--kz-ind-w) data-[orientation=horizontal]:before:translate-x-(--kz-ind-x) \" +\n          \"data-[orientation=vertical]:before:-right-px data-[orientation=vertical]:before:top-0 data-[orientation=vertical]:before:w-0.5 \" +\n          \"data-[orientation=vertical]:before:h-(--kz-ind-h) data-[orientation=vertical]:before:translate-y-(--kz-ind-y)\",\n        trigger:\n          \"relative rounded-md px-3 py-2.5 text-sm text-fg-secondary hover:text-fg data-[state=active]:text-fg \" +\n          \"after:absolute after:rounded-full after:bg-transparent data-[state=active]:after:bg-accent \" +\n          \"data-[orientation=horizontal]:after:inset-x-2 data-[orientation=horizontal]:after:-bottom-px data-[orientation=horizontal]:after:h-0.5 \" +\n          \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:after:inset-y-1.5 data-[orientation=vertical]:after:-right-px data-[orientation=vertical]:after:w-0.5 \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:after:bg-transparent\",\n      },\n      /* A view switch: equal segments in a track, the active one filled. */\n      segmented: {\n        list:\n          \"inline-grid auto-cols-fr grid-flow-col gap-1 self-start rounded-xl border border-border-default bg-surface-1 p-1 data-[orientation=vertical]:grid-flow-row \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-lg before:bg-accent before:shadow-sm\",\n        trigger:\n          \"min-h-8 rounded-lg px-3 py-1.5 text-xs text-fg-secondary hover:bg-surface-2 hover:text-fg \" +\n          \"data-[state=active]:bg-accent data-[state=active]:text-on-accent data-[state=active]:shadow-sm data-[state=active]:hover:bg-accent \" +\n          \"transition-colors group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent group-data-[indicator=on]/tabs:data-[state=active]:shadow-none\",\n      },\n      /* Pills that scroll sideways on a phone: a feed's sections. */\n      pills: {\n        list:\n          \"gap-1.5 overflow-x-auto overflow-y-hidden overscroll-x-contain pt-1 -mt-1 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) \" +\n          \"before:rounded-full before:border before:border-accent before:bg-accent-soft\",\n        trigger:\n          \"h-9 rounded-full border border-border-default bg-surface-1 px-4 text-xs text-fg-secondary hover:border-border-strong hover:text-fg \" +\n          \"data-[state=active]:border-accent data-[state=active]:bg-accent-soft data-[state=active]:text-fg \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:border-transparent group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent\",\n      },\n    },\n  },\n  defaultVariants: { variant: \"underline\" },\n});\n\nexport type TabsVariants = VariantProps<typeof tabs>;\ntype Variant = NonNullable<TabsVariants[\"variant\"]>;\n\nconst VariantContext = React.createContext<Variant>(\"underline\");\n\nexport type TabsRootProps = React.ComponentProps<typeof TabsPrimitive.Root> & {\n  /** underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections). */\n  variant?: TabsVariants[\"variant\"];\n};\n\n/** `value`/`defaultValue` + `onValueChange`, `orientation` (horizontal by default), `variant` for the list. */\nexport function TabsRoot({ variant = \"underline\", className, ...props }: TabsRootProps) {\n  return (\n    <VariantContext.Provider value={variant}>\n      <TabsPrimitive.Root data-variant={variant} className={tabs({ variant }).root({ className })} {...props} />\n    </VariantContext.Provider>\n  );\n}\n\n/** The tabs. Name it (`aria-label`) when no heading says what it switches. One light glides to the active tab. */\nexport function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {\n  const variant = React.useContext(VariantContext);\n  const { ref } = useSlidingIndicator<HTMLDivElement>({ item: \"[role=tab]\", active: \"[role=tab][data-state=active]\" });\n  return <TabsPrimitive.List ref={ref} data-variant={variant} className={tabs({ variant }).list({ className })} {...props} />;\n}\n\nexport function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  const variant = React.useContext(VariantContext);\n  return <TabsPrimitive.Trigger className={tabs({ variant }).trigger({ className })} {...props} />;\n}\n\nexport function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return <TabsPrimitive.Content className={tabs().content({ className })} {...props} />;\n}\n\n/** `Tabs.Root/List/Trigger/Content` — `variant` underline · segmented · pills on the root. */\nexport const Tabs = { Root: TabsRoot, List: TabsList, Trigger: TabsTrigger, Content: TabsContent };\n"],"mappings":";;;;;;AAEA,SAAS,QAAQ,qBAAqB;AACtC,YAAY,WAAW;AACvB,SAAS,UAA6B;AA2EhC;AAvEC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,MAAM;AAAA;AAAA;AAAA,IAGN,MACE;AAAA,IAGF,SACE;AAAA,IAEF,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA;AAAA,MAEP,WAAW;AAAA,QACT,MACE;AAAA,QAKF,SACE;AAAA,MAKJ;AAAA;AAAA,MAEA,WAAW;AAAA,QACT,MACE;AAAA,QAEF,SACE;AAAA,MAGJ;AAAA;AAAA,MAEA,OAAO;AAAA,QACL,MACE;AAAA,QAGF,SACE;AAAA,MAGJ;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,YAAY;AAC1C,CAAC;AAKD,IAAM,iBAAuB,oBAAuB,WAAW;AAQxD,SAAS,SAAS,EAAE,UAAU,aAAa,WAAW,GAAG,MAAM,GAAkB;AACtF,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,SAC9B,8BAAC,cAAc,MAAd,EAAmB,gBAAc,SAAS,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO,GAC1G;AAEJ;AAGO,SAAS,SAAS,EAAE,WAAW,GAAG,MAAM,GAAoD;AACjG,QAAM,UAAgB,iBAAW,cAAc;AAC/C,QAAM,EAAE,IAAI,IAAI,oBAAoC,EAAE,MAAM,cAAc,QAAQ,gCAAgC,CAAC;AACnH,SAAO,oBAAC,cAAc,MAAd,EAAmB,KAAU,gBAAc,SAAS,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC3H;AAEO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAuD;AACvG,QAAM,UAAgB,iBAAW,cAAc;AAC/C,SAAO,oBAAC,cAAc,SAAd,EAAsB,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAChG;AAEO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAuD;AACvG,SAAO,oBAAC,cAAc,SAAd,EAAsB,WAAW,KAAK,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACrF;AAGO,IAAM,OAAO,EAAE,MAAM,UAAU,MAAM,UAAU,SAAS,aAAa,SAAS,YAAY;","names":[]}
+{"version":3,"sources":["../src/tabs/tabs.tsx"],"sourcesContent":["// Client (a context). Radix Tabs does the roles (tablist, tab, tabpanel), the aria-selected / aria-controls wiring,\n// the roving focus (arrows, Home, End) and automatic activation: this file only holds the three looks.\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { useSlidingIndicator } from \"../sliding-indicator\";\n\nexport const tabs = tv({\n  slots: {\n    root: \"flex gap-4 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row\",\n    // One light glides from the active tab to the next (`before:`, placed by useSlidingIndicator); until it is placed\n    // (server render), each trigger carries its own active style.\n    list:\n      \"group/tabs relative isolate flex shrink-0 data-[orientation=vertical]:flex-col \" +\n      \"before:pointer-events-none before:absolute before:-z-10 before:opacity-0 before:transition-[translate,width,height,opacity] before:duration-300 \" +\n      \"motion-reduce:before:transition-none data-[indicator=on]:before:opacity-100\",\n    trigger:\n      \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40\",\n    content: \"kz-fade min-w-0 flex-1 rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-[state=inactive]:hidden\",\n  },\n  variants: {\n    variant: {\n      /* The section of a page: a line under the list, the active tab underlined in the accent. */\n      underline: {\n        list:\n          \"gap-1 border-border-default data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-r before:rounded-sm before:bg-accent \" +\n          \"data-[orientation=horizontal]:before:-bottom-px data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:h-0.5 \" +\n          \"data-[orientation=horizontal]:before:w-(--kz-ind-w) data-[orientation=horizontal]:before:translate-x-(--kz-ind-x) \" +\n          \"data-[orientation=vertical]:before:-right-px data-[orientation=vertical]:before:top-0 data-[orientation=vertical]:before:w-0.5 \" +\n          \"data-[orientation=vertical]:before:h-(--kz-ind-h) data-[orientation=vertical]:before:translate-y-(--kz-ind-y)\",\n        trigger:\n          \"relative rounded-md px-3 py-2.5 text-sm text-fg-secondary hover:text-fg data-[state=active]:text-fg \" +\n          \"after:absolute after:rounded-sm after:bg-transparent data-[state=active]:after:bg-accent \" +\n          \"data-[orientation=horizontal]:after:inset-x-2 data-[orientation=horizontal]:after:-bottom-px data-[orientation=horizontal]:after:h-0.5 \" +\n          \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:after:inset-y-1.5 data-[orientation=vertical]:after:-right-px data-[orientation=vertical]:after:w-0.5 \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:after:bg-transparent\",\n      },\n      /* A view switch: equal segments in a track, the active one filled. */\n      segmented: {\n        list:\n          \"inline-grid auto-cols-fr grid-flow-col gap-1 self-start rounded-xl border border-border-default bg-surface-1 p-1 data-[orientation=vertical]:grid-flow-row \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-lg before:bg-accent before:shadow-sm\",\n        trigger:\n          \"min-h-8 rounded-lg px-3 py-1.5 text-xs text-fg-secondary hover:bg-surface-2 hover:text-fg \" +\n          \"data-[state=active]:bg-accent data-[state=active]:text-on-accent data-[state=active]:shadow-sm data-[state=active]:hover:bg-accent \" +\n          \"transition-colors group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent group-data-[indicator=on]/tabs:data-[state=active]:shadow-none\",\n      },\n      /* Pills that scroll sideways on a phone: a feed's sections. */\n      pills: {\n        list:\n          \"gap-1.5 overflow-x-auto overflow-y-hidden overscroll-x-contain pt-1 -mt-1 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) \" +\n          \"before:rounded-sm before:border before:border-accent before:bg-accent-soft\",\n        trigger:\n          \"h-9 rounded-sm border border-border-default bg-surface-1 px-4 text-xs text-fg-secondary hover:border-border-strong hover:text-fg \" +\n          \"data-[state=active]:border-accent data-[state=active]:bg-accent-soft data-[state=active]:text-fg \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:border-transparent group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent\",\n      },\n    },\n  },\n  defaultVariants: { variant: \"underline\" },\n});\n\nexport type TabsVariants = VariantProps<typeof tabs>;\ntype Variant = NonNullable<TabsVariants[\"variant\"]>;\n\nconst VariantContext = React.createContext<Variant>(\"underline\");\n\nexport type TabsRootProps = React.ComponentProps<typeof TabsPrimitive.Root> & {\n  /** underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections). */\n  variant?: TabsVariants[\"variant\"];\n};\n\n/** `value`/`defaultValue` + `onValueChange`, `orientation` (horizontal by default), `variant` for the list. */\nexport function TabsRoot({ variant = \"underline\", className, ...props }: TabsRootProps) {\n  return (\n    <VariantContext.Provider value={variant}>\n      <TabsPrimitive.Root data-variant={variant} className={tabs({ variant }).root({ className })} {...props} />\n    </VariantContext.Provider>\n  );\n}\n\n/** The tabs. Name it (`aria-label`) when no heading says what it switches. One light glides to the active tab. */\nexport function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {\n  const variant = React.useContext(VariantContext);\n  const { ref } = useSlidingIndicator<HTMLDivElement>({ item: \"[role=tab]\", active: \"[role=tab][data-state=active]\" });\n  return <TabsPrimitive.List ref={ref} data-variant={variant} className={tabs({ variant }).list({ className })} {...props} />;\n}\n\nexport function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  const variant = React.useContext(VariantContext);\n  return <TabsPrimitive.Trigger className={tabs({ variant }).trigger({ className })} {...props} />;\n}\n\nexport function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return <TabsPrimitive.Content className={tabs().content({ className })} {...props} />;\n}\n\n/** `Tabs.Root/List/Trigger/Content` — `variant` underline · segmented · pills on the root. */\nexport const Tabs = { Root: TabsRoot, List: TabsList, Trigger: TabsTrigger, Content: TabsContent };\n"],"mappings":";;;;;;AAEA,SAAS,QAAQ,qBAAqB;AACtC,YAAY,WAAW;AACvB,SAAS,UAA6B;AA2EhC;AAvEC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,MAAM;AAAA;AAAA;AAAA,IAGN,MACE;AAAA,IAGF,SACE;AAAA,IAEF,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA;AAAA,MAEP,WAAW;AAAA,QACT,MACE;AAAA,QAKF,SACE;AAAA,MAKJ;AAAA;AAAA,MAEA,WAAW;AAAA,QACT,MACE;AAAA,QAEF,SACE;AAAA,MAGJ;AAAA;AAAA,MAEA,OAAO;AAAA,QACL,MACE;AAAA,QAGF,SACE;AAAA,MAGJ;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,YAAY;AAC1C,CAAC;AAKD,IAAM,iBAAuB,oBAAuB,WAAW;AAQxD,SAAS,SAAS,EAAE,UAAU,aAAa,WAAW,GAAG,MAAM,GAAkB;AACtF,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,SAC9B,8BAAC,cAAc,MAAd,EAAmB,gBAAc,SAAS,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO,GAC1G;AAEJ;AAGO,SAAS,SAAS,EAAE,WAAW,GAAG,MAAM,GAAoD;AACjG,QAAM,UAAgB,iBAAW,cAAc;AAC/C,QAAM,EAAE,IAAI,IAAI,oBAAoC,EAAE,MAAM,cAAc,QAAQ,gCAAgC,CAAC;AACnH,SAAO,oBAAC,cAAc,MAAd,EAAmB,KAAU,gBAAc,SAAS,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC3H;AAEO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAuD;AACvG,QAAM,UAAgB,iBAAW,cAAc;AAC/C,SAAO,oBAAC,cAAc,SAAd,EAAsB,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAChG;AAEO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAuD;AACvG,SAAO,oBAAC,cAAc,SAAd,EAAsB,WAAW,KAAK,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACrF;AAGO,IAAM,OAAO,EAAE,MAAM,UAAU,MAAM,UAAU,SAAS,aAAa,SAAS,YAAY;","names":[]}

package/dist/tag-input.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   Combobox
-} from "./chunk-CKSHLSDH.js";
-import "./chunk-7UCPGXKN.js";
+} from "./chunk-AAP3U66V.js";
+import "./chunk-C3NF7V5Y.js";
 import "./chunk-D3T54RSL.js";
 import "./chunk-ZIXB33X7.js";
 import {

package/dist/tag-selector.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Chip
-} from "./chunk-7UCPGXKN.js";
+} from "./chunk-C3NF7V5Y.js";
 import "./chunk-D3T54RSL.js";
 
 // src/tag-selector/tag-selector.tsx

package/dist/toast.js

@@ -85,7 +85,7 @@ function progressToast(message, { id, value, doneMessage, description, style, ..
     icon: /* @__PURE__ */ jsx(LoaderGlyph, { value: ratio, className: "h-4 w-4 text-accent" }),
     description: /* @__PURE__ */ jsxs("span", { className: "mt-1 flex flex-col gap-1.5", children: [
       typeof description === "function" ? description() : description,
-      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "block h-1 w-full overflow-hidden rounded-full bg-surface-3", children: /* @__PURE__ */ jsx("span", { className: "block h-full rounded-full bg-linear-to-r from-accent to-accent-2 transition-[width] duration-500", style: { width: `${ratio * 100}%` } }) }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "block h-1 w-full overflow-hidden rounded-sm bg-surface-3", children: /* @__PURE__ */ jsx("span", { className: "block h-full rounded-sm bg-linear-to-r from-accent to-accent-2 transition-[width] duration-500", style: { width: `${ratio * 100}%` } }) }),
       /* @__PURE__ */ jsxs("span", { className: "tabular-nums", children: [
         Math.round(ratio * 100),
         " %"

package/dist/toast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/toast/toast.tsx"],"sourcesContent":["// Client. sonner does the queue, the stacking, the swipe, the timers, the live region and the hotkey; the look is\n// ours: sonner's own styling is off (`unstyled`) and every part reads a role. The status tones are soft (a tinted\n// border and a coloured icon, the text stays `text-fg`): the invariant status tokens are too light for small text.\nimport type * as React from \"react\";\nimport { type ExternalToast, toast, Toaster as Sonner, type ToasterProps as SonnerProps } from \"sonner\";\n\nimport { cn } from \"../cn\";\nimport { LoaderGlyph } from \"../spinner/glyph\";\n\nexport type { ExternalToast } from \"sonner\";\nexport { toast } from \"sonner\";\n\nconst tone = (color: string) => cn(\"border-l-4\", color);\n\nexport const toastClassNames = {\n  // `kz-toast`: a hairline at the bottom counts the time left, and pauses with the toast (hover, focus) — motion.css.\n  toast:\n    \"kz-toast group pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden rounded-xl border border-border-default bg-surface-2 p-4 pr-10 \" +\n    \"text-sm text-fg shadow-lg\",\n  default: \"\",\n  title: \"font-semibold text-fg\",\n  description: \"mt-0.5 text-xs text-fg-secondary\",\n  content: \"flex min-w-0 flex-1 flex-col\",\n  icon: \"mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4\",\n  success: tone(\"border-l-success [&_[data-icon]]:text-success\"),\n  warning: tone(\"border-l-warning [&_[data-icon]]:text-warning\"),\n  error: tone(\"border-l-danger [&_[data-icon]]:text-danger\"),\n  info: tone(\"border-l-info [&_[data-icon]]:text-info\"),\n  loading: \"\",\n  actionButton:\n    \"ml-auto shrink-0 self-center rounded-lg bg-accent px-3 py-1.5 text-xs font-semibold text-on-accent hover:bg-accent-hover \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  cancelButton:\n    \"shrink-0 self-center rounded-lg px-3 py-1.5 text-xs font-semibold text-fg-secondary hover:bg-surface-3 hover:text-fg \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  closeButton:\n    \"absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-full text-fg-secondary hover:bg-surface-3 hover:text-fg \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [&>svg]:h-3.5 [&>svg]:w-3.5\",\n} satisfies NonNullable<NonNullable<SonnerProps[\"toastOptions\"]>[\"classNames\"]>;\n\nexport type ToasterProps = Omit<SonnerProps, \"richColors\" | \"theme\" | \"containerAriaLabel\" | \"toastOptions\"> & {\n  /** The accessible name of the notifications region (sonner's `containerAriaLabel`) — passed translated. */\n  label: string;\n  /** The accessible name of each toast's close button — passed translated. */\n  closeLabel: string;\n  /** Extra options for every toast (duration, a className); the class names are merged with the platform's. */\n  toastOptions?: Omit<NonNullable<SonnerProps[\"toastOptions\"]>, \"unstyled\" | \"closeButtonAriaLabel\">;\n};\n\n/** Mount once, in the root layout. Then call `toast()`, `toast.success/warning/error/info`, `toast.custom(…)`, and the helpers below. */\nexport function Toaster({ label, closeLabel, position = \"bottom-right\", closeButton = true, toastOptions, duration = 4000, ...props }: ToasterProps) {\n  const extra = toastOptions?.classNames ?? {};\n  const classNames = Object.fromEntries(\n    Object.entries(toastClassNames).map(([key, value]) => [key, cn(value, extra[key as keyof typeof extra])]),\n  ) as typeof toastClassNames;\n  return (\n    <Sonner\n      position={position}\n      closeButton={closeButton}\n      containerAriaLabel={label}\n      richColors={false}\n      duration={duration}\n      style={{ \"--kz-toast-duration\": Number.isFinite(duration) ? `${duration}ms` : \"none\" } as React.CSSProperties}\n      toastOptions={{ ...toastOptions, unstyled: true, closeButtonAriaLabel: closeLabel, classNames }}\n      {...props}\n    />\n  );\n}\n\n/** The time-left hairline of one toast: its own duration (none when it stays). */\nconst timer = (duration: number | undefined, style?: React.CSSProperties) =>\n  ({ ...style, \"--kz-toast-duration\": duration === undefined ? undefined : Number.isFinite(duration) ? `${duration}ms` : \"none\" }) as React.CSSProperties;\n\nexport interface UndoToastOptions extends Omit<ExternalToast, \"action\" | \"cancel\"> {\n  /** The label of the undo button (“Undo”) — passed translated. */\n  undoLabel: string;\n  /** Called when the user undoes: restore what was done. */\n  onUndo: () => void;\n  /** Called when the toast goes without an undo: make it final (delete for good, send…). */\n  onCommit?: () => void;\n}\n\n/**\n * “Archived — Undo”: an action that waits before it becomes final. The hairline counts the time left to undo (6 s by\n * default, paused while hovered or focused); `onCommit` runs when it goes without an undo. Returns the toast's id.\n */\nexport function undoToast(message: React.ReactNode, { undoLabel, onUndo, onCommit, duration = 6000, style, onAutoClose, onDismiss, ...options }: UndoToastOptions) {\n  let undone = false;\n  const commit = () => {\n    if (!undone) onCommit?.();\n  };\n  return toast(message, {\n    ...options,\n    duration,\n    style: timer(duration, style),\n    action: {\n      label: undoLabel,\n      onClick: () => {\n        undone = true;\n        onUndo();\n      },\n    },\n    onAutoClose: (t) => {\n      commit();\n      onAutoClose?.(t);\n    },\n    onDismiss: (t) => {\n      commit();\n      onDismiss?.(t);\n    },\n  });\n}\n\nexport interface ProgressToastOptions extends Omit<ExternalToast, \"id\" | \"icon\"> {\n  /** The toast to update: pass the id it returned the first time. */\n  id?: string | number;\n  /** Between 0 and 1. At 1 the toast turns to `doneMessage` (a success) and goes after the usual duration. */\n  value: number;\n  /** The message once done (“Uploaded”) — passed translated. */\n  doneMessage?: React.ReactNode;\n}\n\n/**\n * A long task in a toast (an upload in the background): call it again with the same `id` as it advances — the glyph's\n * trace and a bar grow, without a new toast each time; at 1 it becomes a success. Returns the toast's id.\n */\nexport function progressToast(message: React.ReactNode, { id, value, doneMessage, description, style, ...options }: ProgressToastOptions) {\n  const ratio = Math.min(1, Math.max(0, Number.isFinite(value) ? value : 0));\n  if (ratio >= 1) return toast.success(doneMessage ?? message, { ...options, id, description, style: timer(options.duration, style) });\n  return toast(message, {\n    ...options,\n    id,\n    duration: Number.POSITIVE_INFINITY,\n    style: timer(Number.POSITIVE_INFINITY, style),\n    icon: <LoaderGlyph value={ratio} className=\"h-4 w-4 text-accent\" />,\n    description: (\n      <span className=\"mt-1 flex flex-col gap-1.5\">\n        {typeof description === \"function\" ? description() : description}\n        <span aria-hidden className=\"block h-1 w-full overflow-hidden rounded-full bg-surface-3\">\n          <span className=\"block h-full rounded-full bg-linear-to-r from-accent to-accent-2 transition-[width] duration-500\" style={{ width: `${ratio * 100}%` }} />\n        </span>\n        <span className=\"tabular-nums\">{Math.round(ratio * 100)} %</span>\n      </span>\n    ),\n  });\n}\n\nconst counts = new Map<string, number>();\n\nexport interface GroupedToastOptions extends Omit<ExternalToast, \"id\"> {\n  /** The repeat count in words (`(n) => \\`${n} new messages\\``) — passed translated; default “×n”. */\n  countLabel?: (count: number) => string;\n}\n\n/**\n * The same event again and again (new messages, failed retries) folds into one toast that counts — instead of a pile.\n * Toasts with the same `key` share one place; the count resets once it goes. Returns the toast's id.\n */\nexport function groupedToast(key: string, message: React.ReactNode, { countLabel = (n) => `×${n}`, onAutoClose, onDismiss, ...options }: GroupedToastOptions = {}) {\n  const count = (counts.get(key) ?? 0) + 1;\n  counts.set(key, count);\n  const reset = () => counts.delete(key);\n  return toast(message, {\n    ...options,\n    id: `group:${key}`,\n    description: count > 1 ? countLabel(count) : options.description,\n    onAutoClose: (t) => {\n      reset();\n      onAutoClose?.(t);\n    },\n    onDismiss: (t) => {\n      reset();\n      onDismiss?.(t);\n    },\n  });\n}\n"],"mappings":"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","names":["toast"]}
+{"version":3,"sources":["../src/toast/toast.tsx"],"sourcesContent":["// Client. sonner does the queue, the stacking, the swipe, the timers, the live region and the hotkey; the look is\n// ours: sonner's own styling is off (`unstyled`) and every part reads a role. The status tones are soft (a tinted\n// border and a coloured icon, the text stays `text-fg`): the invariant status tokens are too light for small text.\nimport type * as React from \"react\";\nimport { type ExternalToast, toast, Toaster as Sonner, type ToasterProps as SonnerProps } from \"sonner\";\n\nimport { cn } from \"../cn\";\nimport { LoaderGlyph } from \"../spinner/glyph\";\n\nexport type { ExternalToast } from \"sonner\";\nexport { toast } from \"sonner\";\n\nconst tone = (color: string) => cn(\"border-l-4\", color);\n\nexport const toastClassNames = {\n  // `kz-toast`: a hairline at the bottom counts the time left, and pauses with the toast (hover, focus) — motion.css.\n  toast:\n    \"kz-toast group pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden rounded-xl border border-border-default bg-surface-2 p-4 pr-10 \" +\n    \"text-sm text-fg shadow-lg\",\n  default: \"\",\n  title: \"font-semibold text-fg\",\n  description: \"mt-0.5 text-xs text-fg-secondary\",\n  content: \"flex min-w-0 flex-1 flex-col\",\n  icon: \"mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4\",\n  success: tone(\"border-l-success [&_[data-icon]]:text-success\"),\n  warning: tone(\"border-l-warning [&_[data-icon]]:text-warning\"),\n  error: tone(\"border-l-danger [&_[data-icon]]:text-danger\"),\n  info: tone(\"border-l-info [&_[data-icon]]:text-info\"),\n  loading: \"\",\n  actionButton:\n    \"ml-auto shrink-0 self-center rounded-lg bg-accent px-3 py-1.5 text-xs font-semibold text-on-accent hover:bg-accent-hover \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  cancelButton:\n    \"shrink-0 self-center rounded-lg px-3 py-1.5 text-xs font-semibold text-fg-secondary hover:bg-surface-3 hover:text-fg \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  closeButton:\n    \"absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-full text-fg-secondary hover:bg-surface-3 hover:text-fg \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [&>svg]:h-3.5 [&>svg]:w-3.5\",\n} satisfies NonNullable<NonNullable<SonnerProps[\"toastOptions\"]>[\"classNames\"]>;\n\nexport type ToasterProps = Omit<SonnerProps, \"richColors\" | \"theme\" | \"containerAriaLabel\" | \"toastOptions\"> & {\n  /** The accessible name of the notifications region (sonner's `containerAriaLabel`) — passed translated. */\n  label: string;\n  /** The accessible name of each toast's close button — passed translated. */\n  closeLabel: string;\n  /** Extra options for every toast (duration, a className); the class names are merged with the platform's. */\n  toastOptions?: Omit<NonNullable<SonnerProps[\"toastOptions\"]>, \"unstyled\" | \"closeButtonAriaLabel\">;\n};\n\n/** Mount once, in the root layout. Then call `toast()`, `toast.success/warning/error/info`, `toast.custom(…)`, and the helpers below. */\nexport function Toaster({ label, closeLabel, position = \"bottom-right\", closeButton = true, toastOptions, duration = 4000, ...props }: ToasterProps) {\n  const extra = toastOptions?.classNames ?? {};\n  const classNames = Object.fromEntries(\n    Object.entries(toastClassNames).map(([key, value]) => [key, cn(value, extra[key as keyof typeof extra])]),\n  ) as typeof toastClassNames;\n  return (\n    <Sonner\n      position={position}\n      closeButton={closeButton}\n      containerAriaLabel={label}\n      richColors={false}\n      duration={duration}\n      style={{ \"--kz-toast-duration\": Number.isFinite(duration) ? `${duration}ms` : \"none\" } as React.CSSProperties}\n      toastOptions={{ ...toastOptions, unstyled: true, closeButtonAriaLabel: closeLabel, classNames }}\n      {...props}\n    />\n  );\n}\n\n/** The time-left hairline of one toast: its own duration (none when it stays). */\nconst timer = (duration: number | undefined, style?: React.CSSProperties) =>\n  ({ ...style, \"--kz-toast-duration\": duration === undefined ? undefined : Number.isFinite(duration) ? `${duration}ms` : \"none\" }) as React.CSSProperties;\n\nexport interface UndoToastOptions extends Omit<ExternalToast, \"action\" | \"cancel\"> {\n  /** The label of the undo button (“Undo”) — passed translated. */\n  undoLabel: string;\n  /** Called when the user undoes: restore what was done. */\n  onUndo: () => void;\n  /** Called when the toast goes without an undo: make it final (delete for good, send…). */\n  onCommit?: () => void;\n}\n\n/**\n * “Archived — Undo”: an action that waits before it becomes final. The hairline counts the time left to undo (6 s by\n * default, paused while hovered or focused); `onCommit` runs when it goes without an undo. Returns the toast's id.\n */\nexport function undoToast(message: React.ReactNode, { undoLabel, onUndo, onCommit, duration = 6000, style, onAutoClose, onDismiss, ...options }: UndoToastOptions) {\n  let undone = false;\n  const commit = () => {\n    if (!undone) onCommit?.();\n  };\n  return toast(message, {\n    ...options,\n    duration,\n    style: timer(duration, style),\n    action: {\n      label: undoLabel,\n      onClick: () => {\n        undone = true;\n        onUndo();\n      },\n    },\n    onAutoClose: (t) => {\n      commit();\n      onAutoClose?.(t);\n    },\n    onDismiss: (t) => {\n      commit();\n      onDismiss?.(t);\n    },\n  });\n}\n\nexport interface ProgressToastOptions extends Omit<ExternalToast, \"id\" | \"icon\"> {\n  /** The toast to update: pass the id it returned the first time. */\n  id?: string | number;\n  /** Between 0 and 1. At 1 the toast turns to `doneMessage` (a success) and goes after the usual duration. */\n  value: number;\n  /** The message once done (“Uploaded”) — passed translated. */\n  doneMessage?: React.ReactNode;\n}\n\n/**\n * A long task in a toast (an upload in the background): call it again with the same `id` as it advances — the glyph's\n * trace and a bar grow, without a new toast each time; at 1 it becomes a success. Returns the toast's id.\n */\nexport function progressToast(message: React.ReactNode, { id, value, doneMessage, description, style, ...options }: ProgressToastOptions) {\n  const ratio = Math.min(1, Math.max(0, Number.isFinite(value) ? value : 0));\n  if (ratio >= 1) return toast.success(doneMessage ?? message, { ...options, id, description, style: timer(options.duration, style) });\n  return toast(message, {\n    ...options,\n    id,\n    duration: Number.POSITIVE_INFINITY,\n    style: timer(Number.POSITIVE_INFINITY, style),\n    icon: <LoaderGlyph value={ratio} className=\"h-4 w-4 text-accent\" />,\n    description: (\n      <span className=\"mt-1 flex flex-col gap-1.5\">\n        {typeof description === \"function\" ? description() : description}\n        <span aria-hidden className=\"block h-1 w-full overflow-hidden rounded-sm bg-surface-3\">\n          <span className=\"block h-full rounded-sm bg-linear-to-r from-accent to-accent-2 transition-[width] duration-500\" style={{ width: `${ratio * 100}%` }} />\n        </span>\n        <span className=\"tabular-nums\">{Math.round(ratio * 100)} %</span>\n      </span>\n    ),\n  });\n}\n\nconst counts = new Map<string, number>();\n\nexport interface GroupedToastOptions extends Omit<ExternalToast, \"id\"> {\n  /** The repeat count in words (`(n) => \\`${n} new messages\\``) — passed translated; default “×n”. */\n  countLabel?: (count: number) => string;\n}\n\n/**\n * The same event again and again (new messages, failed retries) folds into one toast that counts — instead of a pile.\n * Toasts with the same `key` share one place; the count resets once it goes. Returns the toast's id.\n */\nexport function groupedToast(key: string, message: React.ReactNode, { countLabel = (n) => `×${n}`, onAutoClose, onDismiss, ...options }: GroupedToastOptions = {}) {\n  const count = (counts.get(key) ?? 0) + 1;\n  counts.set(key, count);\n  const reset = () => counts.delete(key);\n  return toast(message, {\n    ...options,\n    id: `group:${key}`,\n    description: count > 1 ? countLabel(count) : options.description,\n    onAutoClose: (t) => {\n      reset();\n      onAutoClose?.(t);\n    },\n    onDismiss: (t) => {\n      reset();\n      onDismiss?.(t);\n    },\n  });\n}\n"],"mappings":"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","names":["toast"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/ui",
-  "version": "3.35.0",
+  "version": "3.37.0",
   "description": "The Krizaka front-end platform's components: the primitives (button, card, dialog, toast, menu, field, tabs, chip, switch, slider, command palette, theme, countdown…) on the semantic --kz-* tokens, the animated marks (Krizaka, Orazaka, Orochia, Yasakia, Yororis) and the motion signature — web and /native.",
   "keywords": [
     "krizaka",
@@ -461,6 +461,26 @@
       "types": "./dist/decision-list.d.ts",
       "import": "./dist/decision-list.js"
     },
+    "./specimen-tag": {
+      "types": "./dist/specimen-tag.d.ts",
+      "import": "./dist/specimen-tag.js"
+    },
+    "./bird-plate": {
+      "types": "./dist/bird-plate.d.ts",
+      "import": "./dist/bird-plate.js"
+    },
+    "./anatomy-plate": {
+      "types": "./dist/anatomy-plate.d.ts",
+      "import": "./dist/anatomy-plate.js"
+    },
+    "./page-index": {
+      "types": "./dist/page-index.d.ts",
+      "import": "./dist/page-index.js"
+    },
+    "./footnote": {
+      "types": "./dist/footnote.d.ts",
+      "import": "./dist/footnote.js"
+    },
     "./code-block": {
       "types": "./dist/code-block.d.ts",
       "import": "./dist/code-block.js"
@@ -721,7 +741,7 @@
   ],
   "peerDependencies": {
     "@krizaka/query": ">=0.2.1",
-    "@krizaka/tailwind": ">=3.35.0",
+    "@krizaka/tailwind": ">=3.37.0",
     "@maplibre/maplibre-react-native": ">=11",
     "@shopify/flash-list": ">=2",
     "expo-camera": ">=16",
@@ -1796,7 +1816,7 @@
     {
       "name": "./page",
       "path": "dist/page.js",
-      "limit": "1.2 kB",
+      "limit": "1.25 kB",
       "gzip": true,
       "ignore": [
         "tailwind-variants",
@@ -1873,6 +1893,56 @@
         "clsx"
       ]
     },
+    {
+      "name": "./specimen-tag",
+      "path": "dist/specimen-tag.js",
+      "limit": "1.2 kB",
+      "gzip": true,
+      "ignore": [
+        "tailwind-variants",
+        "clsx"
+      ]
+    },
+    {
+      "name": "./anatomy-plate",
+      "path": "dist/anatomy-plate.js",
+      "limit": "1 kB",
+      "gzip": true,
+      "ignore": [
+        "tailwind-variants",
+        "clsx"
+      ]
+    },
+    {
+      "name": "./page-index",
+      "path": "dist/page-index.js",
+      "limit": "1.2 kB",
+      "gzip": true,
+      "ignore": [
+        "tailwind-variants",
+        "clsx"
+      ]
+    },
+    {
+      "name": "./footnote",
+      "path": "dist/footnote.js",
+      "limit": "1 kB",
+      "gzip": true,
+      "ignore": [
+        "tailwind-variants",
+        "clsx"
+      ]
+    },
+    {
+      "name": "./bird-plate",
+      "path": "dist/bird-plate.js",
+      "limit": "5.8 kB",
+      "gzip": true,
+      "ignore": [
+        "tailwind-variants",
+        "clsx"
+      ]
+    },
     {
       "name": "./markdown (TanStack Markdown; the code blocks are ./code-block)",
       "path": "dist/markdown.js",
@@ -2466,7 +2536,7 @@
     "tailwind-variants": "^3.3.1",
     "@krizaka/intl": "^0.2.1",
     "@krizaka/pacer": "^0.1.0",
-    "@krizaka/tokens": "^3.35.0"
+    "@krizaka/tokens": "^3.37.0"
   },
   "scripts": {
     "build": "node -e \"const fs=require('node:fs');fs.rmSync('dist',{recursive:true,force:true});for(const f of fs.readdirSync('registry/examples',{recursive:true}))if(/\\.(js|d\\.ts)$/.test(f))fs.rmSync('registry/examples/'+f)\" && tsup && node -e \"require('node:fs').copyFileSync('src/motion.css','dist/motion.css');require('node:fs').copyFileSync('src/blocks.css','dist/blocks.css');require('node:fs').copyFileSync('src/story.css','dist/story.css')\" && node scripts/build-registry.mjs",