@krizaka/ui 3.53.0 → 3.55.0

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 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: \"kz-stat-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/status-page.d.ts

@@ -36,7 +36,10 @@ type StatusPageProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
     /** The app's link component (Next's `Link`). */
     linkAs?: LinkComponent;
 };
-/** A status page — or an « under construction » one: the overall state, each service, then incidents or progress. */
+/**
+ * A status page — or an « under construction » one: the overall state, each service, then incidents or progress.
+ * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.
+ */
 declare function StatusPage({ back, eyebrow, title, lead, aside, state, stateLabel, checked, services, servicesLabel, linkAs, children, ...props }: StatusPageProps): React.JSX.Element;
 
 export { type ServiceState, StatusPage, type StatusPageProps };

package/dist/status-page.js

@@ -1,8 +1,13 @@
+import {
+  warnDeprecated
+} from "./chunk-KGLRZMCY.js";
+
 // src/status-page/status-page.tsx
 import { Page, Section } from "@krizaka/ui/page";
 import { PageHero } from "@krizaka/ui/page-hero";
 import { jsx, jsxs } from "react/jsx-runtime";
 function StatusPage({ back, eyebrow, title, lead, aside, state, stateLabel, checked, services, servicesLabel = "Services", linkAs, children, ...props }) {
+  warnDeprecated("status-page");
   return /* @__PURE__ */ jsxs("div", { ...props, children: [
     /* @__PURE__ */ jsx(PageHero, { back, linkAs, eyebrow, title, lead, aside, backdrop: "plain" }),
     /* @__PURE__ */ jsxs(Page, { className: "kz-tpl-longform", children: [

package/dist/status-page.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/status-page/status-page.tsx"],"sourcesContent":["// Server-safe. Where things stand (blocks.css `.kz-tpl-state`, `.kz-tpl-services`): the overall state in words and\n// colour, each service on its line, the incidents under them — or, for something not built yet (`state=\"building\"`),\n// what is coming, its progress and how to hear about it, the bird beside it. A state is always said in words.\nimport { Page, Section } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\nimport type * as React from \"react\";\n\nexport type ServiceState = \"operational\" | \"degraded\" | \"outage\" | \"building\";\n\nexport type StatusPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The way back. */\n  back?: { href: string; label: string };\n  /** A mono line above the title. */\n  eyebrow?: React.ReactNode;\n  /** The page's `h1` (`Status`, `Yasakia is on its way`). */\n  title: React.ReactNode;\n  /** One sentence under it. */\n  lead?: React.ReactNode;\n  /** Beside the hero: a bird (the pigeon that delivers, the duck that builds). */\n  aside?: React.ReactNode;\n  /** The overall state. */\n  state: ServiceState;\n  /** The overall state, in words (`All systems operational`). */\n  stateLabel: React.ReactNode;\n  /** When it was checked (`Checked 2 min ago`). */\n  checked?: React.ReactNode;\n  /** The services and their states, in words: `{ id, name, state, label }`. */\n  services?: readonly { id: string; name: React.ReactNode; state: ServiceState; label: React.ReactNode }[];\n  /** The services list's accessible name (`Services`). */\n  servicesLabel?: string;\n  /** Under the services: the incidents (a ChangelogPage's entries, a list), or for `building` the progress and the way to follow. */\n  children?: React.ReactNode;\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** A status page — or an « under construction » one: the overall state, each service, then incidents or progress. */\nexport function StatusPage({ back, eyebrow, title, lead, aside, state, stateLabel, checked, services, servicesLabel = \"Services\", linkAs, children, ...props }: StatusPageProps) {\n  return (\n    <div {...props}>\n      <PageHero back={back} linkAs={linkAs} eyebrow={eyebrow} title={title} lead={lead} aside={aside} backdrop=\"plain\" />\n      <Page className=\"kz-tpl-longform\">\n        <div className=\"kz-tpl-state\" data-state={state} role=\"status\">\n          <span className=\"kz-tpl-dot\" aria-hidden />\n          <strong>{stateLabel}</strong>\n          {checked && <span className=\"kz-tpl-count\">{checked}</span>}\n        </div>\n        {services && services.length > 0 && (\n          <ul className=\"kz-tpl-services\" aria-label={servicesLabel}>\n            {services.map((s) => (\n              <li key={s.id}>\n                <span>{s.name}</span>\n                <small>\n                  <span className=\"kz-tpl-dot\" data-state={s.state} aria-hidden />\n                  {s.label}\n                </small>\n              </li>\n            ))}\n          </ul>\n        )}\n      </Page>\n      {children && <Section spacing=\"sm\">{children}</Section>}\n    </div>\n  );\n}\n"],"mappings":";AAGA,SAAS,MAAM,eAAe;AAE9B,SAAS,gBAAgB;AAoCnB,cAEE,YAFF;AAHC,SAAS,WAAW,EAAE,MAAM,SAAS,OAAO,MAAM,OAAO,OAAO,YAAY,SAAS,UAAU,gBAAgB,YAAY,QAAQ,UAAU,GAAG,MAAM,GAAoB;AAC/K,SACE,qBAAC,SAAK,GAAG,OACP;AAAA,wBAAC,YAAS,MAAY,QAAgB,SAAkB,OAAc,MAAY,OAAc,UAAS,SAAQ;AAAA,IACjH,qBAAC,QAAK,WAAU,mBACd;AAAA,2BAAC,SAAI,WAAU,gBAAe,cAAY,OAAO,MAAK,UACpD;AAAA,4BAAC,UAAK,WAAU,cAAa,eAAW,MAAC;AAAA,QACzC,oBAAC,YAAQ,sBAAW;AAAA,QACnB,WAAW,oBAAC,UAAK,WAAU,gBAAgB,mBAAQ;AAAA,SACtD;AAAA,MACC,YAAY,SAAS,SAAS,KAC7B,oBAAC,QAAG,WAAU,mBAAkB,cAAY,eACzC,mBAAS,IAAI,CAAC,MACb,qBAAC,QACC;AAAA,4BAAC,UAAM,YAAE,MAAK;AAAA,QACd,qBAAC,WACC;AAAA,8BAAC,UAAK,WAAU,cAAa,cAAY,EAAE,OAAO,eAAW,MAAC;AAAA,UAC7D,EAAE;AAAA,WACL;AAAA,WALO,EAAE,EAMX,CACD,GACH;AAAA,OAEJ;AAAA,IACC,YAAY,oBAAC,WAAQ,SAAQ,MAAM,UAAS;AAAA,KAC/C;AAEJ;","names":[]}
+{"version":3,"sources":["../src/status-page/status-page.tsx"],"sourcesContent":["// Server-safe. Where things stand (blocks.css `.kz-tpl-state`, `.kz-tpl-services`): the overall state in words and\n// colour, each service on its line, the incidents under them — or, for something not built yet (`state=\"building\"`),\n// what is coming, its progress and how to hear about it, the bird beside it. A state is always said in words.\nimport { Page, Section } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\nimport type * as React from \"react\";\n\nimport { warnDeprecated } from \"../deprecated\";\n\nexport type ServiceState = \"operational\" | \"degraded\" | \"outage\" | \"building\";\n\nexport type StatusPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The way back. */\n  back?: { href: string; label: string };\n  /** A mono line above the title. */\n  eyebrow?: React.ReactNode;\n  /** The page's `h1` (`Status`, `Yasakia is on its way`). */\n  title: React.ReactNode;\n  /** One sentence under it. */\n  lead?: React.ReactNode;\n  /** Beside the hero: a bird (the pigeon that delivers, the duck that builds). */\n  aside?: React.ReactNode;\n  /** The overall state. */\n  state: ServiceState;\n  /** The overall state, in words (`All systems operational`). */\n  stateLabel: React.ReactNode;\n  /** When it was checked (`Checked 2 min ago`). */\n  checked?: React.ReactNode;\n  /** The services and their states, in words: `{ id, name, state, label }`. */\n  services?: readonly { id: string; name: React.ReactNode; state: ServiceState; label: React.ReactNode }[];\n  /** The services list's accessible name (`Services`). */\n  servicesLabel?: string;\n  /** Under the services: the incidents (a ChangelogPage's entries, a list), or for `building` the progress and the way to follow. */\n  children?: React.ReactNode;\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/**\n * A status page — or an « under construction » one: the overall state, each service, then incidents or progress.\n * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.\n */\nexport function StatusPage({ back, eyebrow, title, lead, aside, state, stateLabel, checked, services, servicesLabel = \"Services\", linkAs, children, ...props }: StatusPageProps) {\n  warnDeprecated(\"status-page\");\n  return (\n    <div {...props}>\n      <PageHero back={back} linkAs={linkAs} eyebrow={eyebrow} title={title} lead={lead} aside={aside} backdrop=\"plain\" />\n      <Page className=\"kz-tpl-longform\">\n        <div className=\"kz-tpl-state\" data-state={state} role=\"status\">\n          <span className=\"kz-tpl-dot\" aria-hidden />\n          <strong>{stateLabel}</strong>\n          {checked && <span className=\"kz-tpl-count\">{checked}</span>}\n        </div>\n        {services && services.length > 0 && (\n          <ul className=\"kz-tpl-services\" aria-label={servicesLabel}>\n            {services.map((s) => (\n              <li key={s.id}>\n                <span>{s.name}</span>\n                <small>\n                  <span className=\"kz-tpl-dot\" data-state={s.state} aria-hidden />\n                  {s.label}\n                </small>\n              </li>\n            ))}\n          </ul>\n        )}\n      </Page>\n      {children && <Section spacing=\"sm\">{children}</Section>}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAGA,SAAS,MAAM,eAAe;AAE9B,SAAS,gBAAgB;AA0CnB,cAEE,YAFF;AAJC,SAAS,WAAW,EAAE,MAAM,SAAS,OAAO,MAAM,OAAO,OAAO,YAAY,SAAS,UAAU,gBAAgB,YAAY,QAAQ,UAAU,GAAG,MAAM,GAAoB;AAC/K,iBAAe,aAAa;AAC5B,SACE,qBAAC,SAAK,GAAG,OACP;AAAA,wBAAC,YAAS,MAAY,QAAgB,SAAkB,OAAc,MAAY,OAAc,UAAS,SAAQ;AAAA,IACjH,qBAAC,QAAK,WAAU,mBACd;AAAA,2BAAC,SAAI,WAAU,gBAAe,cAAY,OAAO,MAAK,UACpD;AAAA,4BAAC,UAAK,WAAU,cAAa,eAAW,MAAC;AAAA,QACzC,oBAAC,YAAQ,sBAAW;AAAA,QACnB,WAAW,oBAAC,UAAK,WAAU,gBAAgB,mBAAQ;AAAA,SACtD;AAAA,MACC,YAAY,SAAS,SAAS,KAC7B,oBAAC,QAAG,WAAU,mBAAkB,cAAY,eACzC,mBAAS,IAAI,CAAC,MACb,qBAAC,QACC;AAAA,4BAAC,UAAM,YAAE,MAAK;AAAA,QACd,qBAAC,WACC;AAAA,8BAAC,UAAK,WAAU,cAAa,cAAY,EAAE,OAAO,eAAW,MAAC;AAAA,UAC7D,EAAE;AAAA,WACL;AAAA,WALO,EAAE,EAMX,CACD,GACH;AAAA,OAEJ;AAAA,IACC,YAAY,oBAAC,WAAQ,SAAQ,MAAM,UAAS;AAAA,KAC/C;AAEJ;","names":[]}

package/dist/stuck.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+type StuckHold = "tape" | "tape-corners" | "pin" | "corner" | "glue";
+type StuckProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
+    /** What is stuck: a figure, a `SpecimenTag`, a card, a `TapedPhoto`. */
+    children: React.ReactNode;
+    /**
+     * How it is held: `tape` (one strip), `tape-corners` (two opposite corners), `pin` (a drawing pin), `corner` (photo
+     * corners) or `glue` (a slightly lifted edge).
+     * @default "tape"
+     */
+    hold?: StuckHold;
+    /** The tilt in degrees (negative leans left). Without it, the tilt comes from `seed`. */
+    tilt?: number;
+    /** Where the tilt comes from when `tilt` is not given: the same string always leans the same way (±2°). @default "" */
+    seed?: string;
+    /** Margin doodles (`Doodle`) drawn beside the block; they leave with the margin on a narrow screen. */
+    doodle?: React.ReactNode;
+    /** The element of the wrapper. A `figure` goes inside, never here. @default "div" */
+    as?: "div" | "li" | "aside";
+};
+/** The tilt of a stuck block: `tilt` when given, otherwise a steady lean (−2° to 2°) read from `seed`, rounded to a tenth. */
+declare function stuckTilt(seed: string, tilt?: number): number;
+/** A block stuck into the notebook: held by tape, a pin, photo corners or glue; tilted from data; a hard paper shadow. */
+declare function Stuck({ children, hold, tilt, seed, doodle, as: Tag, className, style, ...props }: StuckProps): React.JSX.Element;
+
+export { Stuck, type StuckHold, type StuckProps, stuckTilt };

package/dist/stuck.js

@@ -0,0 +1,26 @@
+import {
+  seedUnit
+} from "./chunk-5VEVYDVC.js";
+import {
+  cn
+} from "./chunk-W675RFOA.js";
+
+// src/stuck/stuck.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function stuckTilt(seed, tilt) {
+  return tilt ?? Math.round(seedUnit(seed) * 20) / 10;
+}
+function Stuck({ children, hold = "tape", tilt, seed = "", doodle, as: Tag = "div", className, style, ...props }) {
+  return /* @__PURE__ */ jsxs(Tag, { className: cn("kz-stuck", className), style, ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "kz-stuck-body", "data-hold": hold, style: { ["--kz-stuck-tilt"]: `${stuckTilt(seed, tilt)}deg` }, children: [
+      hold === "pin" ? /* @__PURE__ */ jsx("span", { className: "kz-stuck-pin", "aria-hidden": true }) : null,
+      children
+    ] }),
+    doodle
+  ] });
+}
+export {
+  Stuck,
+  stuckTilt
+};
+//# sourceMappingURL=stuck.js.map

package/dist/stuck.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/stuck/stuck.tsx"],"sourcesContent":["// Server-safe. A block stuck into the notebook (ADR-004, blocks.css): a figure, a specimen tag, a card, a print — held by\n// tape, a pin, photo corners or a lifted edge, slightly tilted (from data, never random), on the Cahier's hard paper\n// shadow. The tape is TapedPhoto's own (the same rule in blocks.css). The tilt is a transform: nothing shifts.\nimport type * as React from \"react\";\n\nimport { seedUnit } from \"../cahier-seed\";\nimport { cn } from \"../cn\";\n\nexport type StuckHold = \"tape\" | \"tape-corners\" | \"pin\" | \"corner\" | \"glue\";\n\nexport type StuckProps = Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n  /** What is stuck: a figure, a `SpecimenTag`, a card, a `TapedPhoto`. */\n  children: React.ReactNode;\n  /**\n   * How it is held: `tape` (one strip), `tape-corners` (two opposite corners), `pin` (a drawing pin), `corner` (photo\n   * corners) or `glue` (a slightly lifted edge).\n   * @default \"tape\"\n   */\n  hold?: StuckHold;\n  /** The tilt in degrees (negative leans left). Without it, the tilt comes from `seed`. */\n  tilt?: number;\n  /** Where the tilt comes from when `tilt` is not given: the same string always leans the same way (±2°). @default \"\" */\n  seed?: string;\n  /** Margin doodles (`Doodle`) drawn beside the block; they leave with the margin on a narrow screen. */\n  doodle?: React.ReactNode;\n  /** The element of the wrapper. A `figure` goes inside, never here. @default \"div\" */\n  as?: \"div\" | \"li\" | \"aside\";\n};\n\n/** The tilt of a stuck block: `tilt` when given, otherwise a steady lean (−2° to 2°) read from `seed`, rounded to a tenth. */\nexport function stuckTilt(seed: string, tilt?: number): number {\n  return tilt ?? Math.round(seedUnit(seed) * 20) / 10;\n}\n\n/** A block stuck into the notebook: held by tape, a pin, photo corners or glue; tilted from data; a hard paper shadow. */\nexport function Stuck({ children, hold = \"tape\", tilt, seed = \"\", doodle, as: Tag = \"div\", className, style, ...props }: StuckProps) {\n  return (\n    <Tag className={cn(\"kz-stuck\", className)} style={style} {...props}>\n      <div className=\"kz-stuck-body\" data-hold={hold} style={{ [\"--kz-stuck-tilt\" as string]: `${stuckTilt(seed, tilt)}deg` }}>\n        {hold === \"pin\" ? <span className=\"kz-stuck-pin\" aria-hidden /> : null}\n        {children}\n      </div>\n      {doodle}\n    </Tag>\n  );\n}\n"],"mappings":";;;;;;;;AAsCM,SACoB,KADpB;AARC,SAAS,UAAU,MAAc,MAAuB;AAC7D,SAAO,QAAQ,KAAK,MAAM,SAAS,IAAI,IAAI,EAAE,IAAI;AACnD;AAGO,SAAS,MAAM,EAAE,UAAU,OAAO,QAAQ,MAAM,OAAO,IAAI,QAAQ,IAAI,MAAM,OAAO,WAAW,OAAO,GAAG,MAAM,GAAe;AACnI,SACE,qBAAC,OAAI,WAAW,GAAG,YAAY,SAAS,GAAG,OAAe,GAAG,OAC3D;AAAA,yBAAC,SAAI,WAAU,iBAAgB,aAAW,MAAM,OAAO,EAAE,CAAC,iBAA2B,GAAG,GAAG,UAAU,MAAM,IAAI,CAAC,MAAM,GACnH;AAAA,eAAS,QAAQ,oBAAC,UAAK,WAAU,gBAAe,eAAW,MAAC,IAAK;AAAA,MACjE;AAAA,OACH;AAAA,IACC;AAAA,KACH;AAEJ;","names":[]}

package/dist/swipe-deck.d.ts

@@ -1,6 +1,7 @@
 import * as tailwind_variants from 'tailwind-variants';
 import * as React from 'react';
 
+/** @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0. */
 declare const swipeDeck: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
@@ -142,7 +143,10 @@ type PersonCardProps = {
     /** Classes merged on the card. */
     className?: string;
 };
-/** A person on a card: photos full bleed (a side to change), name and age over a scrim, a line, a bio, chips. */
+/**
+ * A person on a card: photos full bleed (a side to change), name and age over a scrim, a line, a bio, chips.
+ * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.
+ */
 declare function PersonCard({ photos, name, age, badge, meta, bio, footer, photoLabels, className }: PersonCardProps): React.JSX.Element;
 type SwipeDirection = "like" | "pass";
 type SwipeDeckLabels = {
@@ -177,7 +181,10 @@ type SwipeDeckProps<T> = {
     /** Classes merged on the root. */
     className?: string;
 };
-/** A deck of cards decided one by one: drag, the buttons, or ← → — each decision announced. */
+/**
+ * A deck of cards decided one by one: drag, the buttons, or ← → — each decision announced.
+ * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.
+ */
 declare function SwipeDeck<T>({ items, getId, getName, renderCard, onSwipe, empty, labels, className }: SwipeDeckProps<T>): React.JSX.Element;
 
 export { PersonCard, type PersonCardProps, SwipeDeck, type SwipeDeckLabels, type SwipeDeckProps, type SwipeDirection, swipeDeck };

package/dist/swipe-deck.js

@@ -1,4 +1,7 @@
 "use client";
+import {
+  warnDeprecated
+} from "./chunk-BDIU5LZB.js";
 import {
   usePrefersReducedMotion
 } from "./chunk-FZBWEDQI.js";
@@ -28,6 +31,7 @@ var swipeDeck = tv({
   }
 });
 function PersonCard({ photos, name, age, badge, meta, bio, footer, photoLabels = { previous: "Previous photo", next: "Next photo" }, className }) {
+  warnDeprecated("swipe-deck");
   const s = swipeDeck();
   const [index, setIndex] = React.useState(0);
   const photo = photos[index];
@@ -53,6 +57,7 @@ function PersonCard({ photos, name, age, badge, meta, bio, footer, photoLabels =
   ] });
 }
 function SwipeDeck({ items, getId, getName, renderCard, onSwipe, empty, labels, className }) {
+  warnDeprecated("swipe-deck");
   const s = swipeDeck();
   const reduce = usePrefersReducedMotion();
   const [dx, setDx] = React.useState(0);

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 \",\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 { warnDeprecated } from \"../deprecated\";\nimport { usePrefersReducedMotion } from \"../media\";\n\n/** @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0. */\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/**\n * A person on a card: photos full bleed (a side to change), name and age over a scrim, a line, a bio, chips.\n * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.\n */\nexport function PersonCard({ photos, name, age, badge, meta, bio, footer, photoLabels = { previous: \"Previous photo\", next: \"Next photo\" }, className }: PersonCardProps) {\n  warnDeprecated(\"swipe-deck\");\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/**\n * A deck of cards decided one by one: drag, the buttons, or ← → — each decision announced.\n * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.\n */\nexport function SwipeDeck<T>({ items, getId, getName, renderCard, onSwipe, empty, labels, className }: SwipeDeckProps<T>) {\n  warnDeprecated(\"swipe-deck\");\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/switch.js

@@ -1,36 +1,8 @@
 "use client";
-
-// src/switch/switch.tsx
-import { Switch as SwitchPrimitive } from "radix-ui";
-import { tv } from "tailwind-variants";
-import { jsx } from "react/jsx-runtime";
-var switchVariants = tv({
-  slots: {
-    root: "peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-fg-muted transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:bg-accent aria-invalid:border-danger",
-    thumb: "pointer-events-none block rounded-full bg-fg-on-media shadow-sm transition-transform data-[state=unchecked]:translate-x-0.5 motion-reduce:transition-none"
-  },
-  variants: {
-    size: {
-      sm: { root: "h-5 w-9", thumb: "h-4 w-4 data-[state=checked]:translate-x-[1.125rem]" },
-      md: { root: "h-6 w-11", thumb: "h-5 w-5 data-[state=checked]:translate-x-[1.375rem]" }
-    }
-  },
-  defaultVariants: { size: "md" }
-});
-function Switch({ label, size, invalid, className, ...props }) {
-  const s = switchVariants({ size });
-  return /* @__PURE__ */ jsx(
-    SwitchPrimitive.Root,
-    {
-      "aria-label": label,
-      "aria-invalid": invalid || void 0,
-      "data-invalid": invalid ? "" : void 0,
-      className: s.root({ className }),
-      ...props,
-      children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { className: s.thumb() })
-    }
-  );
-}
+import {
+  Switch,
+  switchVariants
+} from "./chunk-CSRKYZ53.js";
 export {
   Switch,
   switchVariants

package/dist/switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/switch/switch.tsx"],"sourcesContent":["// Client. Radix Switch: role=\"switch\", aria-checked, Space and Enter toggle, a hidden input inside a form.\nimport { Switch as SwitchPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const switchVariants = tv({\n  slots: {\n    root:\n      \"peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-fg-muted transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n      \"disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:bg-accent aria-invalid:border-danger\",\n    thumb:\n      \"pointer-events-none block rounded-full bg-fg-on-media shadow-sm transition-transform data-[state=unchecked]:translate-x-0.5 motion-reduce:transition-none\",\n  },\n  variants: {\n    size: {\n      sm: { root: \"h-5 w-9\", thumb: \"h-4 w-4 data-[state=checked]:translate-x-[1.125rem]\" },\n      md: { root: \"h-6 w-11\", thumb: \"h-5 w-5 data-[state=checked]:translate-x-[1.375rem]\" },\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type SwitchVariants = VariantProps<typeof switchVariants>;\n\ntype Named =\n  | {\n      /** The accessible name — required when no visible label names it, passed translated. */\n      label: string;\n    }\n  /** Named by a visible `<label htmlFor={id}>` (e.g. `Field.Label`). */\n  | { label?: undefined; id: string }\n  /** Named by another element. */\n  | { label?: undefined; \"aria-labelledby\": string };\n\nexport type SwitchProps = Omit<React.ComponentProps<typeof SwitchPrimitive.Root>, \"children\"> &\n  SwitchVariants &\n  Named & {\n    /**\n     * sm · md.\n     * @default \"md\"\n     */\n    size?: SwitchVariants[\"size\"];\n    /** Marks it invalid: aria-invalid and data-invalid. */\n    invalid?: boolean;\n  };\n\n/** An on/off switch: `checked`/`defaultChecked` + `onCheckedChange`. */\nexport function Switch({ label, size, invalid, className, ...props }: SwitchProps) {\n  const s = switchVariants({ size });\n  return (\n    <SwitchPrimitive.Root\n      aria-label={label}\n      aria-invalid={invalid || undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      className={s.root({ className })}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb className={s.thumb()} />\n    </SwitchPrimitive.Root>\n  );\n}\n"],"mappings":";;;AACA,SAAS,UAAU,uBAAuB;AAE1C,SAAS,UAA6B;AAuDhC;AArDC,IAAM,iBAAiB,GAAG;AAAA,EAC/B,OAAO;AAAA,IACL,MACE;AAAA,IAGF,OACE;AAAA,EACJ;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI,EAAE,MAAM,WAAW,OAAO,sDAAsD;AAAA,MACpF,IAAI,EAAE,MAAM,YAAY,OAAO,sDAAsD;AAAA,IACvF;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;AA2BM,SAAS,OAAO,EAAE,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,GAAgB;AACjF,QAAM,IAAI,eAAe,EAAE,KAAK,CAAC;AACjC,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,cAAY;AAAA,MACZ,gBAAc,WAAW;AAAA,MACzB,gBAAc,UAAU,KAAK;AAAA,MAC7B,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC;AAAA,MAC9B,GAAG;AAAA,MAEJ,8BAAC,gBAAgB,OAAhB,EAAsB,WAAW,EAAE,MAAM,GAAG;AAAA;AAAA,EAC/C;AAEJ;","names":[]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/tabs.d.ts

@@ -17,6 +17,10 @@ declare const tabs: tailwind_variants.TVReturnType<{
             list: string;
             trigger: string;
         };
+        binder: {
+            list: string;
+            trigger: string;
+        };
     };
 }, {
     root: string;
@@ -37,6 +41,10 @@ declare const tabs: tailwind_variants.TVReturnType<{
             list: string;
             trigger: string;
         };
+        binder: {
+            list: string;
+            trigger: string;
+        };
     };
 }, {
     root: string;
@@ -57,6 +65,10 @@ declare const tabs: tailwind_variants.TVReturnType<{
             list: string;
             trigger: string;
         };
+        binder: {
+            list: string;
+            trigger: string;
+        };
     };
 }, {
     root: string;
@@ -64,9 +76,20 @@ declare const tabs: tailwind_variants.TVReturnType<{
     trigger: string;
     content: string;
 }>>;
+/**
+ * A divider's colour (`variant="binder"`): the brand's accent by default, or a role of the theme — every one reads at 3:1 or
+ * more on both themes. The colour is never the only signal: the words and the count say it.
+ */
+type TabsHue = "accent" | "success" | "warning" | "danger" | "neutral";
+type TabsAdd = {
+    /** Its words (« Intercalaire », « New tag ») — passed translated. */
+    label: string;
+    /** Adds a divider (opens the host's form). */
+    onAdd: () => void;
+};
 type TabsVariants = VariantProps<typeof tabs>;
 type TabsRootProps = React.ComponentProps<typeof Tabs$1.Root> & {
-    /** underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections). */
+    /** underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections) · binder (dividers that organise collections, tags, statuses). */
     variant?: TabsVariants["variant"];
     /** Binds the active tab to this search parameter of the URL (`?tab=…`): the URL is the state. Without it the state is local — only for an ephemeral choice. */
     routeKey?: string;
@@ -75,9 +98,19 @@ type TabsRootProps = React.ComponentProps<typeof Tabs$1.Root> & {
 };
 /** `value`/`defaultValue` + `onValueChange`, `orientation` (horizontal by default), `variant` for the list. */
 declare function TabsRoot({ variant, className, routeKey, routeValues, ...rest }: TabsRootProps): React.JSX.Element;
+type TabsListProps = React.ComponentProps<typeof Tabs$1.List> & {
+    /** A « + » button after the tabs (`variant="binder"`: « + Intercalaire »): its words and what it does. */
+    add?: TabsAdd;
+};
 /** The tabs. Name it (`aria-label`) when no heading says what it switches. One light glides to the active tab. */
-declare function TabsList({ className, ...props }: React.ComponentProps<typeof Tabs$1.List>): React.JSX.Element;
-declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof Tabs$1.Trigger>): React.JSX.Element;
+declare function TabsList({ className, add, ...props }: TabsListProps): React.JSX.Element;
+type TabsTriggerProps = React.ComponentProps<typeof Tabs$1.Trigger> & {
+    /** A count after the words (clients in a collection, unread): part of the tab's name. */
+    count?: number;
+    /** `variant="binder"`: the divider's colour (the accent by default). */
+    hue?: TabsHue;
+};
+declare function TabsTrigger({ className, count, hue, style, children, ...props }: TabsTriggerProps): React.JSX.Element;
 declare function TabsContent({ className, ...props }: React.ComponentProps<typeof Tabs$1.Content>): React.JSX.Element;
 /**
  * Is the link `href` the tab of the route `current` (a path, with its search: `/docs/api?tab=x`)? The path must equal the
@@ -87,11 +120,13 @@ declare function TabsContent({ className, ...props }: React.ComponentProps<typeo
  */
 declare function isTabActive(current: string, href: string, exact?: boolean): boolean;
 type TabsNavProps = Omit<React.ComponentProps<"nav">, "children"> & {
+    /** A « + » button after the tabs (`variant="binder"`: « + Intercalaire »). */
+    add?: TabsAdd;
     /** The navigation's accessible name (« Sections »). */
     label: string;
     /** The current route, passed in: the path with its search (`usePathname()` + `useSearchParams()`, `/docs?tab=api`). The active tab comes from it; no local state. */
     current: string;
-    /** underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections). */
+    /** underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections) · binder (dividers). */
     variant?: TabsVariants["variant"];
     /** The tabs: `Tabs.NavLink`. */
     children: React.ReactNode;
@@ -101,7 +136,7 @@ type TabsNavProps = Omit<React.ComponentProps<"nav">, "children"> & {
  * anchor, the active one carries `aria-current="page"`, the keyboard is the page's own (Tab walks the links, Enter
  * follows one) and there is no panel — the page is the panel. The same looks and the same gliding light as `Tabs.List`.
  */
-declare function TabsNav({ label, current, variant, className, children, ...props }: TabsNavProps): React.JSX.Element;
+declare function TabsNav({ label, current, variant, add, className, children, ...props }: TabsNavProps): React.JSX.Element;
 type TabsNavLinkProps = React.ComponentProps<"a"> & {
     /** Where the tab goes (`/docs/api`, `/docs?tab=api`). */
     href: string;
@@ -109,10 +144,14 @@ type TabsNavLinkProps = React.ComponentProps<"a"> & {
     exact?: boolean;
     /** Renders your router's `<Link>` (pass it as the only child; the `href` goes on this part and on the link). */
     asChild?: boolean;
+    /** A count after the words (not with `asChild`: put it in your link). */
+    count?: number;
+    /** `variant="binder"`: the divider's colour (the accent by default). */
+    hue?: TabsHue;
 };
 /** One tab of `Tabs.Nav`: an anchor that is active when the current route is its `href`. */
-declare function TabsNavLink({ href, exact, asChild, className, children, ...props }: TabsNavLinkProps): React.JSX.Element;
-/** `Tabs.Root/List/Trigger/Content` — `variant` underline · segmented · pills on the root. `Tabs.Nav` + `Tabs.NavLink`: the same tabs as routes. */
+declare function TabsNavLink({ href, exact, asChild, count, hue, style, className, children, ...props }: TabsNavLinkProps): React.JSX.Element;
+/** `Tabs.Root/List/Trigger/Content` — `variant` underline · segmented · pills · binder on the root. `Tabs.Nav` + `Tabs.NavLink`: the same tabs as routes. */
 declare const Tabs: {
     Root: typeof TabsRoot;
     List: typeof TabsList;
@@ -122,4 +161,4 @@ declare const Tabs: {
     NavLink: typeof TabsNavLink;
 };
 
-export { Tabs, TabsContent, TabsList, TabsNav, TabsNavLink, type TabsNavLinkProps, type TabsNavProps, TabsRoot, type TabsRootProps, TabsTrigger, type TabsVariants, isTabActive, tabs };
+export { Tabs, type TabsAdd, TabsContent, type TabsHue, TabsList, type TabsListProps, TabsNav, TabsNavLink, type TabsNavLinkProps, type TabsNavProps, TabsRoot, type TabsRootProps, TabsTrigger, type TabsTriggerProps, type TabsVariants, isTabActive, tabs };

package/dist/tabs.js

@@ -2,9 +2,6 @@
 import {
   useSlidingIndicator
 } from "./chunk-4QN5YJ3D.js";
-import {
-  useRouteBinding
-} from "./chunk-R3LTSMS5.js";
 import {
   cn
 } from "./chunk-NSLXEDIS.js";
@@ -13,7 +10,8 @@ import {
 import { Slot, Tabs as TabsPrimitive } from "radix-ui";
 import * as React from "react";
 import { tv } from "tailwind-variants";
-import { jsx } from "react/jsx-runtime";
+import { useRouteBinding } from "@krizaka/ui/router";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var tabs = tv({
   slots: {
     root: "flex gap-4 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row",
@@ -39,24 +37,67 @@ var tabs = tv({
       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-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"
+      },
+      /*
+       * Binder dividers (intercalaires, #648): organise collections, tags and statuses. Each tab is a divider with a
+       * coloured top edge (`hue`), its words and a count; the active one is the page's colour and joins the content
+       * under the list's line. Too many dividers scroll sideways, the edges fading. No paper texture: organisation only.
+       */
+      binder: {
+        list: "items-end gap-1 overflow-x-auto overflow-y-hidden overscroll-x-contain border-b border-border-default px-3 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [mask-image:linear-gradient(to_right,transparent,black_12px,black_calc(100%-12px),transparent)]",
+        trigger: "relative -mb-px min-h-10 rounded-t-lg border border-b-0 border-border-default bg-surface-2 px-3.5 pb-2 pt-2.5 text-sm text-fg-secondary before:absolute before:inset-x-0 before:-top-px before:h-1 before:rounded-t-lg before:bg-(--kz-hue,var(--kz-accent)) hover:bg-surface-3 hover:text-fg data-[state=active]:z-[1] data-[state=active]:bg-surface-1 data-[state=active]:pb-2.5 data-[state=active]:text-fg data-[state=active]:shadow-[0_1px_0_0_var(--kz-surface-1)] motion-reduce:transition-none"
       }
     }
   },
   defaultVariants: { variant: "underline" }
 });
+var HUE = {
+  accent: "var(--kz-accent)",
+  success: "var(--kz-success-text)",
+  warning: "var(--kz-warning-text)",
+  danger: "var(--kz-danger-text)",
+  neutral: "var(--kz-text-muted)"
+};
+var hueStyle = (hue, style) => hue ? { ...style, ["--kz-hue"]: HUE[hue] } : style;
+function TabCount({ count }) {
+  if (count === void 0) return null;
+  return /* @__PURE__ */ jsx("span", { "data-tab-count": "", className: "font-mono text-xs font-medium tabular-nums text-fg-secondary", children: count });
+}
+function AddButton({ add }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: add.onAdd,
+      className: "mb-1 ml-1 inline-flex min-h-9 shrink-0 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-fg-secondary hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+      children: [
+        /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" }) }),
+        add.label
+      ]
+    }
+  );
+}
 var VariantContext = React.createContext("underline");
 function TabsRoot({ variant = "underline", className, routeKey, routeValues, ...rest }) {
   const props = useRouteBinding(routeKey, routeValues, rest);
   return /* @__PURE__ */ jsx(VariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { "data-variant": variant, className: tabs({ variant }).root({ className }), ...props }) });
 }
-function TabsList({ className, ...props }) {
+function TabsList({ className, add, ...props }) {
   const variant = React.useContext(VariantContext);
   const { ref } = useSlidingIndicator({ item: "[role=tab]", active: "[role=tab][data-state=active]" });
-  return /* @__PURE__ */ jsx(TabsPrimitive.List, { ref, "data-variant": variant, className: tabs({ variant }).list({ className }), ...props });
+  const list = /* @__PURE__ */ jsx(TabsPrimitive.List, { ref, "data-variant": variant, className: tabs({ variant }).list({ className: cn(add && "min-w-0 flex-1 border-b-0", className) }), ...props });
+  if (!add) return list;
+  return /* @__PURE__ */ jsxs("div", { "data-tabs-row": "", className: cn("flex min-w-0 items-end", variant === "binder" && "border-b border-border-default"), children: [
+    list,
+    /* @__PURE__ */ jsx(AddButton, { add })
+  ] });
 }
-function TabsTrigger({ className, ...props }) {
+function TabsTrigger({ className, count, hue, style, children, ...props }) {
   const variant = React.useContext(VariantContext);
-  return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, { className: tabs({ variant }).trigger({ className }), ...props });
+  return /* @__PURE__ */ jsxs(TabsPrimitive.Trigger, { className: tabs({ variant }).trigger({ className }), style: hueStyle(hue, style), "data-hue": hue, ...props, children: [
+    children,
+    /* @__PURE__ */ jsx(TabCount, { count })
+  ] });
 }
 function TabsContent({ className, ...props }) {
   return /* @__PURE__ */ jsx(TabsPrimitive.Content, { className: tabs().content({ className }), ...props });
@@ -75,12 +116,16 @@ function isTabActive(current, href, exact = false) {
   return true;
 }
 var NavContext = React.createContext(null);
-function TabsNav({ label, current, variant = "underline", className, children, ...props }) {
+function TabsNav({ label, current, variant = "underline", add, className, children, ...props }) {
   const { ref } = useSlidingIndicator({ item: "[data-tabs-link]", active: "[data-tabs-link][data-state=active]" });
   const value = React.useMemo(() => ({ current, variant }), [current, variant]);
-  return /* @__PURE__ */ jsx(NavContext.Provider, { value, children: /* @__PURE__ */ jsx("nav", { ref, "aria-label": label, "data-variant": variant, "data-orientation": "horizontal", className: tabs({ variant }).list({ className }), ...props, children }) });
+  const nav = /* @__PURE__ */ jsx("nav", { ref, "aria-label": label, "data-variant": variant, "data-orientation": "horizontal", className: tabs({ variant }).list({ className: cn(add && "min-w-0 flex-1 border-b-0", className) }), ...props, children });
+  return /* @__PURE__ */ jsx(NavContext.Provider, { value, children: add ? /* @__PURE__ */ jsxs("div", { "data-tabs-row": "", className: cn("flex min-w-0 items-end", variant === "binder" && "border-b border-border-default"), children: [
+    nav,
+    /* @__PURE__ */ jsx(AddButton, { add })
+  ] }) : nav });
 }
-function TabsNavLink({ href, exact, asChild, className, children, ...props }) {
+function TabsNavLink({ href, exact, asChild, count, hue, style, className, children, ...props }) {
   const ctx = React.useContext(NavContext);
   if (!ctx) throw new Error("Tabs.NavLink must be inside <Tabs.Nav>");
   const active = isTabActive(ctx.current, href, exact);
@@ -93,9 +138,14 @@ function TabsNavLink({ href, exact, asChild, className, children, ...props }) {
       "data-orientation": "horizontal",
       "aria-current": active ? "page" : void 0,
       ...asChild ? {} : { href },
+      "data-hue": hue,
+      style: hueStyle(hue, style),
       className: cn(tabs({ variant: ctx.variant }).trigger(), "no-underline", className),
       ...props,
-      children
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        children,
+        /* @__PURE__ */ jsx(TabCount, { count })
+      ] })
     }
   );
 }