@krizaka/ui 2.0.0-beta.5 → 2.0.0

package/dist/countdown.d.ts

@@ -26,24 +26,25 @@ type CountdownProps = {
     skewMs?: number;
     /** The short unit labels, passed translated. */
     units: CountdownUnits;
-    /** Below this many milliseconds it turns urgent (`text-danger`, the last segment pulses). Default 60 s. */
+    /** Below this many milliseconds it turns urgent (`text-fg-danger`, the last segment pulses). Default 60 s. */
     urgentBelowMs?: number;
-    /** sm · md · lg (the danger role is large-text safe from `md`). */
+    /** sm · md · lg — the danger text role reads at 4.5:1 at every size, in both themes. */
     size?: "sm" | "md" | "lg";
     /** Accessible name, e.g. "Ends in". */
     label: string;
+    /** Also show `label` before the segments, in the secondary text role (default: only read by screen readers). */
+    showLabel?: boolean;
     /** Classes merged last, over the primitive's. */
     className?: string;
 };
 /**
  * Time left until a moment, as segments (2d 04h 13m 09s — days only when there are some) in tabular figures. Under
- * `urgentBelowMs` it turns to the danger role and its last segment pulses (no motion under prefers-reduced-motion).
+ * `urgentBelowMs` it turns to the danger text role and its last segment pulses (no motion under prefers-reduced-motion).
  * Words come from the app: `units` are the short unit labels. `role="timer"` without live announcements — the app
  * announces what matters. State: `data-urgent`, `data-ended`.
  *
- * The danger role is large-text safe (≥ 3:1) from `size="md"`; at `size="sm"` an urgent countdown in light mode is
- * under the 4.5:1 of small text.
+ * The urgent colour is `--kz-danger-text` (≥ 4.5:1 on every surface in both themes), so `size="sm"` is safe too.
  */
-declare function Countdown({ target, skewMs, units, urgentBelowMs, size, label, className }: CountdownProps): React.JSX.Element;
+declare function Countdown({ target, skewMs, units, urgentBelowMs, size, label, showLabel, className }: CountdownProps): React.JSX.Element;
 
 export { Countdown, type CountdownProps, type CountdownUnits, countdownParts, splitDuration, useCountdown };

package/dist/countdown.js

@@ -36,20 +36,21 @@ var countdown = tv({
   slots: {
     root: "inline-flex items-baseline gap-1.5 font-display font-black tabular-nums tracking-tight text-fg",
     segment: "inline-flex items-baseline",
-    unit: "ml-0.5 text-[0.5em] font-bold uppercase text-fg-secondary"
+    unit: "ml-0.5 text-[0.5em] font-bold uppercase text-fg-secondary",
+    label: "mr-0.5 self-center font-sans text-[0.6em] font-semibold tracking-normal text-fg-secondary"
   },
   variants: {
     size: { sm: { root: "text-sm" }, md: { root: "text-xl" }, lg: { root: "text-3xl sm:text-4xl" } },
-    urgent: { true: { root: "text-danger" } }
+    urgent: { true: { root: "text-fg-danger" } }
   },
   defaultVariants: { size: "md" }
 });
-function Countdown({ target, skewMs = 0, units, urgentBelowMs = 6e4, size = "md", label, className }) {
+function Countdown({ target, skewMs = 0, units, urgentBelowMs = 6e4, size = "md", label, showLabel = false, className }) {
   const ms = useCountdown(target, skewMs);
   const urgent = ms > 0 && ms < urgentBelowMs;
   const parts = countdownParts(ms, units);
   const s = countdown({ size, urgent });
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "span",
     {
       role: "timer",
@@ -58,10 +59,13 @@ function Countdown({ target, skewMs = 0, units, urgentBelowMs = 6e4, size = "md"
       "data-ended": ms === 0 ? "" : void 0,
       suppressHydrationWarning: true,
       className: s.root({ className }),
-      children: parts.map(([value, unit], i) => /* @__PURE__ */ jsxs("span", { className: s.segment({ className: urgent && i === parts.length - 1 ? "motion-safe:animate-pulse" : void 0 }), children: [
-        String(value).padStart(2, "0"),
-        /* @__PURE__ */ jsx("span", { className: s.unit(), children: unit })
-      ] }, unit))
+      children: [
+        showLabel ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: s.label(), children: label }) : null,
+        parts.map(([value, unit], i) => /* @__PURE__ */ jsxs("span", { className: s.segment({ className: urgent && i === parts.length - 1 ? "motion-safe:animate-pulse" : void 0 }), children: [
+          String(value).padStart(2, "0"),
+          /* @__PURE__ */ jsx("span", { className: s.unit(), children: unit })
+        ] }, unit))
+      ]
     }
   );
 }

package/dist/countdown.js.map

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

package/dist/dialog.js

@@ -9,10 +9,10 @@ import {
   DialogTitle,
   Sheet,
   dialog
-} from "./chunk-IUGBKMJC.js";
+} from "./chunk-FHYZSO2S.js";
 import {
   Button
-} from "./chunk-6DJ6SQY3.js";
+} from "./chunk-PESA2R4U.js";
 
 // src/dialog/alert-dialog.tsx
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui";

package/dist/dropdown-menu.js

@@ -19,9 +19,9 @@ var menu = tv({
     separator: "-mx-1 my-1 h-px bg-border-subtle"
   },
   variants: {
-    // The danger token is too light for small text on a light surface: the label stays a text role, the icon and the
-    // highlight carry the danger.
-    tone: { default: {}, danger: { item: "data-highlighted:bg-danger/15 [&>svg]:text-danger" } }
+    // The label reads in the danger text role (≥ 4.5:1 on the menu surface, both themes); the icon and the highlight
+    // carry the danger fill.
+    tone: { default: {}, danger: { item: "text-fg-danger data-highlighted:bg-danger/15 [&>svg]:text-danger" } }
   },
   defaultVariants: { tone: "default" }
 });

package/dist/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["// Client (a portal). Radix does the roving focus, the arrows, Home/End, typeahead, Escape and the focus return.\nimport { DropdownMenu as MenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { floating } from \"../floating\";\n\nexport const menu = tv({\n  slots: {\n    content: cn(floating, \"min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-1 origin-(--radix-dropdown-menu-content-transform-origin)\"),\n    item:\n      \"relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm text-fg outline-hidden transition-colors \" +\n      \"data-highlighted:bg-surface-3 data-disabled:pointer-events-none data-disabled:opacity-40 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 \" +\n      \"[&>svg]:text-fg-secondary\",\n    indicator: \"ml-auto flex h-4 w-4 items-center justify-center text-fg-accent\",\n    label: \"px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    separator: \"-mx-1 my-1 h-px bg-border-subtle\",\n  },\n  variants: {\n    // The danger token is too light for small text on a light surface: the label stays a text role, the icon and the\n    // highlight carry the danger.\n    tone: { default: {}, danger: { item: \"data-highlighted:bg-danger/15 [&>svg]:text-danger\" } },\n  },\n  defaultVariants: { tone: \"default\" },\n});\nconst s = menu();\n\nexport type DropdownMenuContentProps = React.ComponentProps<typeof MenuPrimitive.Content> & {\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n};\n\nexport function DropdownMenuContent({ sideOffset = 6, align = \"end\", collisionPadding = 8, container, className, ...props }: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal container={container}>\n      <MenuPrimitive.Content sideOffset={sideOffset} align={align} collisionPadding={collisionPadding} className={s.content({ className })} {...props} />\n    </MenuPrimitive.Portal>\n  );\n}\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> & {\n  /** `danger` for a destructive action: the icon and the highlight carry the danger, the label stays legible. */\n  tone?: \"default\" | \"danger\";\n};\n\n/** An action. `tone=\"danger\"` for a destructive one; `onSelect` runs it (the menu closes). */\nexport function DropdownMenuItem({ tone, className, ...props }: DropdownMenuItemProps) {\n  return <MenuPrimitive.Item data-tone={tone ?? \"default\"} className={menu({ tone }).item({ className })} {...props} />;\n}\n\n/** A toggled option: `checked` + `onCheckedChange`. */\nexport function DropdownMenuCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.CheckboxItem>) {\n  return (\n    <MenuPrimitive.CheckboxItem className={s.item({ className })} {...props}>\n      {children}\n      <MenuPrimitive.ItemIndicator className={s.indicator()}>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </MenuPrimitive.ItemIndicator>\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Label>) {\n  return <MenuPrimitive.Label className={s.label({ className })} {...props} />;\n}\n\nexport function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Separator>) {\n  return <MenuPrimitive.Separator className={s.separator({ className })} {...props} />;\n}\n\n/** `DropdownMenu.Root/Trigger/Content/Item/CheckboxItem/Label/Separator/Group`. `open`/`defaultOpen` + `onOpenChange`. */\nexport const DropdownMenu = {\n  Root: MenuPrimitive.Root,\n  Trigger: MenuPrimitive.Trigger,\n  Content: DropdownMenuContent,\n  Item: DropdownMenuItem,\n  CheckboxItem: DropdownMenuCheckboxItem,\n  Label: DropdownMenuLabel,\n  Separator: DropdownMenuSeparator,\n  Group: MenuPrimitive.Group,\n};\n"],"mappings":";;;;;;;;;AACA,SAAS,gBAAgB,qBAAqB;AAE9C,SAAS,UAAU;AAiCb,cAkBF,YAlBE;AA5BC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,SAAS,GAAG,UAAU,6IAA6I;AAAA,IACnK,MACE;AAAA,IAGF,WAAW;AAAA,IACX,OAAO;AAAA,IACP,WAAW;AAAA,EACb;AAAA,EACA,UAAU;AAAA;AAAA;AAAA,IAGR,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAE,MAAM,oDAAoD,EAAE;AAAA,EAC7F;AAAA,EACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CAAC;AACD,IAAM,IAAI,KAAK;AAOR,SAAS,oBAAoB,EAAE,aAAa,GAAG,QAAQ,OAAO,mBAAmB,GAAG,WAAW,WAAW,GAAG,MAAM,GAA6B;AACrJ,SACE,oBAAC,cAAc,QAAd,EAAqB,WACpB,8BAAC,cAAc,SAAd,EAAsB,YAAwB,OAAc,kBAAoC,WAAW,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO,GACnJ;AAEJ;AAQO,SAAS,iBAAiB,EAAE,MAAM,WAAW,GAAG,MAAM,GAA0B;AACrF,SAAO,oBAAC,cAAc,MAAd,EAAmB,aAAW,QAAQ,WAAW,WAAW,KAAK,EAAE,KAAK,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACrH;AAGO,SAAS,yBAAyB,EAAE,WAAW,UAAU,GAAG,MAAM,GAA4D;AACnI,SACE,qBAAC,cAAc,cAAd,EAA2B,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC/D;AAAA;AAAA,IACD,oBAAC,cAAc,eAAd,EAA4B,WAAW,EAAE,UAAU,GAClD,8BAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACnI,8BAAC,UAAK,GAAE,mBAAkB,GAC5B,GACF;AAAA,KACF;AAEJ;AAEO,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAAqD;AAC3G,SAAO,oBAAC,cAAc,OAAd,EAAoB,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC5E;AAEO,SAAS,sBAAsB,EAAE,WAAW,GAAG,MAAM,GAAyD;AACnH,SAAO,oBAAC,cAAc,WAAd,EAAwB,WAAW,EAAE,UAAU,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACpF;AAGO,IAAM,eAAe;AAAA,EAC1B,MAAM,cAAc;AAAA,EACpB,SAAS,cAAc;AAAA,EACvB,SAAS;AAAA,EACT,MAAM;AAAA,EACN,cAAc;AAAA,EACd,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO,cAAc;AACvB;","names":[]}
+{"version":3,"sources":["../src/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["// Client (a portal). Radix does the roving focus, the arrows, Home/End, typeahead, Escape and the focus return.\nimport { DropdownMenu as MenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { floating } from \"../floating\";\n\nexport const menu = tv({\n  slots: {\n    content: cn(floating, \"min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-1 origin-(--radix-dropdown-menu-content-transform-origin)\"),\n    item:\n      \"relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm text-fg outline-hidden transition-colors \" +\n      \"data-highlighted:bg-surface-3 data-disabled:pointer-events-none data-disabled:opacity-40 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 \" +\n      \"[&>svg]:text-fg-secondary\",\n    indicator: \"ml-auto flex h-4 w-4 items-center justify-center text-fg-accent\",\n    label: \"px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    separator: \"-mx-1 my-1 h-px bg-border-subtle\",\n  },\n  variants: {\n    // The label reads in the danger text role (≥ 4.5:1 on the menu surface, both themes); the icon and the highlight\n    // carry the danger fill.\n    tone: { default: {}, danger: { item: \"text-fg-danger data-highlighted:bg-danger/15 [&>svg]:text-danger\" } },\n  },\n  defaultVariants: { tone: \"default\" },\n});\nconst s = menu();\n\nexport type DropdownMenuContentProps = React.ComponentProps<typeof MenuPrimitive.Content> & {\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n};\n\nexport function DropdownMenuContent({ sideOffset = 6, align = \"end\", collisionPadding = 8, container, className, ...props }: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal container={container}>\n      <MenuPrimitive.Content sideOffset={sideOffset} align={align} collisionPadding={collisionPadding} className={s.content({ className })} {...props} />\n    </MenuPrimitive.Portal>\n  );\n}\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> & {\n  /** `danger` for a destructive action: the icon and the highlight carry the danger, the label stays legible. */\n  tone?: \"default\" | \"danger\";\n};\n\n/** An action. `tone=\"danger\"` for a destructive one; `onSelect` runs it (the menu closes). */\nexport function DropdownMenuItem({ tone, className, ...props }: DropdownMenuItemProps) {\n  return <MenuPrimitive.Item data-tone={tone ?? \"default\"} className={menu({ tone }).item({ className })} {...props} />;\n}\n\n/** A toggled option: `checked` + `onCheckedChange`. */\nexport function DropdownMenuCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.CheckboxItem>) {\n  return (\n    <MenuPrimitive.CheckboxItem className={s.item({ className })} {...props}>\n      {children}\n      <MenuPrimitive.ItemIndicator className={s.indicator()}>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </MenuPrimitive.ItemIndicator>\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Label>) {\n  return <MenuPrimitive.Label className={s.label({ className })} {...props} />;\n}\n\nexport function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Separator>) {\n  return <MenuPrimitive.Separator className={s.separator({ className })} {...props} />;\n}\n\n/** `DropdownMenu.Root/Trigger/Content/Item/CheckboxItem/Label/Separator/Group`. `open`/`defaultOpen` + `onOpenChange`. */\nexport const DropdownMenu = {\n  Root: MenuPrimitive.Root,\n  Trigger: MenuPrimitive.Trigger,\n  Content: DropdownMenuContent,\n  Item: DropdownMenuItem,\n  CheckboxItem: DropdownMenuCheckboxItem,\n  Label: DropdownMenuLabel,\n  Separator: DropdownMenuSeparator,\n  Group: MenuPrimitive.Group,\n};\n"],"mappings":";;;;;;;;;AACA,SAAS,gBAAgB,qBAAqB;AAE9C,SAAS,UAAU;AAiCb,cAkBF,YAlBE;AA5BC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,SAAS,GAAG,UAAU,6IAA6I;AAAA,IACnK,MACE;AAAA,IAGF,WAAW;AAAA,IACX,OAAO;AAAA,IACP,WAAW;AAAA,EACb;AAAA,EACA,UAAU;AAAA;AAAA;AAAA,IAGR,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAE,MAAM,mEAAmE,EAAE;AAAA,EAC5G;AAAA,EACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CAAC;AACD,IAAM,IAAI,KAAK;AAOR,SAAS,oBAAoB,EAAE,aAAa,GAAG,QAAQ,OAAO,mBAAmB,GAAG,WAAW,WAAW,GAAG,MAAM,GAA6B;AACrJ,SACE,oBAAC,cAAc,QAAd,EAAqB,WACpB,8BAAC,cAAc,SAAd,EAAsB,YAAwB,OAAc,kBAAoC,WAAW,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO,GACnJ;AAEJ;AAQO,SAAS,iBAAiB,EAAE,MAAM,WAAW,GAAG,MAAM,GAA0B;AACrF,SAAO,oBAAC,cAAc,MAAd,EAAmB,aAAW,QAAQ,WAAW,WAAW,KAAK,EAAE,KAAK,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACrH;AAGO,SAAS,yBAAyB,EAAE,WAAW,UAAU,GAAG,MAAM,GAA4D;AACnI,SACE,qBAAC,cAAc,cAAd,EAA2B,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC/D;AAAA;AAAA,IACD,oBAAC,cAAc,eAAd,EAA4B,WAAW,EAAE,UAAU,GAClD,8BAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACnI,8BAAC,UAAK,GAAE,mBAAkB,GAC5B,GACF;AAAA,KACF;AAEJ;AAEO,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAAqD;AAC3G,SAAO,oBAAC,cAAc,OAAd,EAAoB,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC5E;AAEO,SAAS,sBAAsB,EAAE,WAAW,GAAG,MAAM,GAAyD;AACnH,SAAO,oBAAC,cAAc,WAAd,EAAwB,WAAW,EAAE,UAAU,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACpF;AAGO,IAAM,eAAe;AAAA,EAC1B,MAAM,cAAc;AAAA,EACpB,SAAS,cAAc;AAAA,EACvB,SAAS;AAAA,EACT,MAAM;AAAA,EACN,cAAc;AAAA,EACd,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO,cAAc;AACvB;","names":[]}

package/dist/field.js

@@ -11,8 +11,8 @@ var field = tv({
     label: "text-xs font-semibold text-fg-secondary",
     control: "flex h-11 w-full rounded-lg border border-border-default bg-surface-2 px-3 text-sm text-fg placeholder:text-fg-muted transition-[border-color,box-shadow] focus-visible:border-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/30",
     hint: "text-xs text-fg-secondary",
-    // The danger token is too light for small text on a light surface: the message is a text role, the dot says danger.
-    error: "flex items-center gap-1.5 text-xs font-medium text-fg before:h-1.5 before:w-1.5 before:shrink-0 before:rounded-full before:bg-danger",
+    // The message reads in the danger text role (≥ 4.5:1 on every surface, both themes); the dot is the danger fill.
+    error: "flex items-center gap-1.5 text-xs font-medium text-fg-danger before:h-1.5 before:w-1.5 before:shrink-0 before:rounded-full before:bg-danger",
     selectWrap: "relative flex w-full",
     chevron: "pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-fg-secondary"
   }

package/dist/field.js.map

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

package/dist/native.d.ts

@@ -23,7 +23,14 @@ type BrandId = "krizaka" | "orazaka" | "orochia";
 
 type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
 type AvatarProps = Omit<ViewProps, "children"> & {
+    /**
+     * The image URI; absent, `null` or failing: the fallback. An SVG (`….svg`, `data:image/svg+xml,…` — generated
+     * avatars) is drawn by react-native-svg, which React Native's `Image` cannot do; `svg` forces it for a URI without
+     * the extension.
+     */
     src?: string | null;
+    /** Draw `src` as an SVG even when its URI does not say so (an avatar service that answers `image/svg+xml`). */
+    svg?: boolean;
     /** The person's name: the image's accessible name and the source of the default initial. */
     alt?: string;
     /** Shown while there is no image or when it fails: default, the first letter of `alt`. */
@@ -31,8 +38,7 @@ type AvatarProps = Omit<ViewProps, "children"> & {
     /** A size of the scale, or points. */
     size?: AvatarSize | number;
 };
-/** A round picture; the initial (or `fallback`) when there is none or it fails to load. */
-declare function AvatarRoot({ src, alt, fallback, size, style, ...props }: AvatarProps): React.JSX.Element;
+declare function AvatarRoot({ src, svg, alt, fallback, size, style, ...props }: AvatarProps): React.JSX.Element;
 type AvatarGroupProps = ViewProps & {
     /** How many avatars are shown; the rest becomes a `+n` avatar. */
     max?: number;
@@ -48,7 +54,9 @@ declare const Avatar: typeof AvatarRoot & {
 
 type BadgeTone = "neutral" | "accent" | "success" | "warning" | "danger" | "scrim";
 type BadgeProps = ViewProps & {
+    /** neutral (default) · accent · success · warning · danger · scrim (on a media). */
     tone?: BadgeTone;
+    /** sm (default) · md. */
     size?: "sm" | "md";
     /** A small dot before the text, in the tone's colour. */
     dot?: boolean;
@@ -59,15 +67,18 @@ type BadgeProps = ViewProps & {
 /** A short status in capitals: a tone, a size, an optional (pulsing) dot. */
 declare function Badge({ tone, size, dot, pulse, style, children, ...props }: BadgeProps): React.JSX.Element;
 
-type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "danger";
+type ButtonVariant = "primary" | "gradient" | "secondary" | "outline" | "ghost" | "danger";
 type ButtonSize = "sm" | "md" | "lg";
 type BaseProps = Omit<PressableProps, "children" | "style"> & {
+    /** The look: `primary`, `gradient` (accent → accent-2), `secondary` (default), `outline`, `ghost`, `danger` — as on the web. */
     variant?: ButtonVariant;
+    /** sm · md (default) · lg: 32, 40 or 48 points high. */
     size?: ButtonSize;
     /** `rounded` (default) or `pill`. */
     shape?: "rounded" | "pill";
     /** Disables, shows a spinner in place of the icon and says busy. */
     loading?: boolean;
+    /** Styles merged last, over the button's frame. */
     style?: StyleProp<ViewStyle>;
 };
 type ButtonProps = BaseProps & {
@@ -81,6 +92,7 @@ declare function Button({ label, icon, variant, size, shape, loading, disabled,
 type IconButtonProps = BaseProps & {
     /** The accessible name — required, passed translated. */
     label: string;
+    /** The icon (from the app's icon set); the button shows nothing else. */
     icon: React.ReactNode;
 };
 /** A square button holding only an icon: `label` is required, it is its accessible name. */
@@ -132,6 +144,7 @@ declare const textStyles: {
 type CardRootProps = ViewProps & {
     /** `default` (the raised surface) or `elevated` (one step higher, with a shadow). */
     tone?: "default" | "elevated";
+    /** The corner radius, from the theme: md · lg · xl (default). */
     radius?: "md" | "lg" | "xl";
     /**
      * Makes the whole card pressable: a button for screen readers, named by its content (an `aria-label`, if any, must
@@ -147,11 +160,13 @@ declare const ASPECT: {
     readonly portrait: number;
 };
 type CardMediaProps = ViewProps & {
+    /** video (default, 16:9) · square · portrait, or `auto` (the image's own). */
     aspect?: keyof typeof ASPECT | "auto";
 };
 /** The media area at the top of a card: a fixed ratio, the `media` role behind (what shows while an image loads). */
 declare function CardMedia({ aspect, style, ...props }: CardMediaProps): React.JSX.Element;
 type CardImageProps = Omit<ImageProps, "source" | "src"> & {
+    /** The image URI; absent or `null`: the `fallback` on the media colour. */
     src?: string | null;
     /** Shown when there is no image: an icon, an illustration (decorative). */
     fallback?: React.ReactNode;
@@ -160,6 +175,7 @@ type CardImageProps = Omit<ImageProps, "source" | "src"> & {
 declare function CardImage({ src, fallback, alt, style, ...props }: CardImageProps): React.JSX.Element;
 declare const CORNER: Record<"top-left" | "top-right" | "bottom-left" | "bottom-right", ViewStyle>;
 type CardOverlayProps = ViewProps & {
+    /** The corner of the media it sits in: top-left (default) · top-right · bottom-left · bottom-right. */
     corner?: keyof typeof CORNER;
 };
 /** What sits on the media (badges, a caption), in a corner. */
@@ -171,6 +187,7 @@ declare const PADDING: {
     readonly lg: 24;
 };
 type CardBodyProps = ViewProps & {
+    /** none · sm · md (default) · lg. */
     padding?: keyof typeof PADDING;
 };
 declare function CardBody({ padding, style, ...props }: CardBodyProps): React.JSX.Element;
@@ -192,7 +209,9 @@ declare const Card: {
 
 type ChipSize = "sm" | "md";
 type CommonProps = Omit<PressableProps, "children" | "style" | "onPress"> & {
+    /** sm · md (default); in a group, the group's size. */
     size?: ChipSize;
+    /** Styles merged last. */
     style?: StyleProp<ViewStyle>;
     /** The text (passed translated) or a node (an icon and a text). */
     children: React.ReactNode;
@@ -202,7 +221,9 @@ type ToggleChipProps = CommonProps & {
     value?: string;
     /** Alone: pressed or not (`defaultSelected` uncontrolled), `onSelectedChange` on every press. */
     selected?: boolean;
+    /** Uncontrolled: selected at first (alone, outside a group). */
     defaultSelected?: boolean;
+    /** Alone: called with the new state when it is pressed. */
     onSelectedChange?: (selected: boolean) => void;
     removable?: false;
 };
@@ -211,18 +232,21 @@ type RemovableChipProps = CommonProps & {
     removable: true;
     /** The accessible name of the remove button — passed translated, e.g. "Remove #night". */
     removeLabel: string;
+    /** Called when its remove button is pressed. */
     onRemove: () => void;
 };
 type ChipProps = ToggleChipProps | RemovableChipProps;
 /** A selectable pill (`selected` / `onSelectedChange`), an item of `Chip.Group` (`value`), or `removable`. */
 declare function ChipBase(props: ChipProps): React.JSX.Element;
 type GroupBase = {
+    /** sm · md (default); in a group, the group's size. */
     size?: ChipSize;
     disabled?: boolean;
     /** One horizontal scrolling row (a filter bar) instead of wrapping lines. */
     scrollable?: boolean;
     /** The accessible name of the group — passed translated. */
     "aria-label"?: string;
+    /** Styles merged last. */
     style?: StyleProp<ViewStyle>;
     children: React.ReactNode;
 };
@@ -245,29 +269,37 @@ declare const Chip: typeof ChipBase & {
 };
 
 type CountdownProps = {
+    /** The moment it counts down to: a Date, an ISO string or epoch milliseconds. */
     target: Date | string | number;
     /** Server clock − this clock, in milliseconds. */
     skewMs?: number;
     /** The short unit labels, passed translated. */
     units: CountdownUnits;
-    /** Below this many milliseconds it turns urgent (the danger role, the last segment breathes). Default 60 s. */
+    /** Below this many milliseconds it turns urgent (the danger text role, the last segment breathes). Default 60 s. */
     urgentBelowMs?: number;
+    /** sm · md (default) · lg. */
     size?: "sm" | "md" | "lg";
     /** Accessible name, e.g. "Ends in". */
     label: string;
+    /** Also show `label` before the segments, in the secondary text role (default: only read by screen readers). */
+    showLabel?: boolean;
+    /** Styles merged last. */
     style?: StyleProp<ViewStyle>;
 };
 /**
  * Time left until a moment, as segments (2d 04h 13m — days only when there are some) in tabular figures, on the same
  * clock as the web `Countdown` (one interval for every countdown on screen). Under `urgentBelowMs` it turns to the
- * danger role and its last segment breathes (still when the system reduces motion).
+ * danger text role (≥ 4.5:1 in both themes) and its last segment breathes (still when the system reduces motion).
+ * `showLabel` writes `label` before the segments; it is the accessible name either way.
  */
-declare function Countdown({ target, skewMs, units, urgentBelowMs, size, label, style }: CountdownProps): React.JSX.Element;
+declare function Countdown({ target, skewMs, units, urgentBelowMs, size, label, showLabel, style }: CountdownProps): React.JSX.Element;
 
 type EmptyStateProps = Omit<ViewProps, "children"> & {
     /** A decorative icon (hidden from screen readers). */
     icon?: React.ReactNode;
+    /** What is empty, in a few words ("No notifications yet"). */
     title: string;
+    /** Why, or what will fill it. */
     description?: string;
     /** What to do next: a Button. */
     action?: React.ReactNode;
@@ -314,9 +346,11 @@ declare function ProductMark({ id, ...props }: NativeMarkProps & {
 type ProgressProps = {
     /** `bar` (default) or `ring`. */
     variant?: "bar" | "ring";
+    /** sm · md (default) · lg: the bar's thickness or the ring's diameter. */
     size?: "sm" | "md" | "lg";
     /** How far, between 0 and `max`. `null` or absent: indeterminate (a wait of unknown length). */
     value?: number | null;
+    /** The value of a full bar. Default 100. */
     max?: number;
     /** The accessible name — passed translated ("Upload", "Raised towards the goal"). */
     label: string;
@@ -324,6 +358,7 @@ type ProgressProps = {
     valueText?: string;
     /** A ring's centre: an amount, a percentage, an icon. */
     children?: React.ReactNode;
+    /** Styles merged last. */
     style?: StyleProp<ViewStyle>;
 };
 /**
@@ -340,11 +375,15 @@ type SegmentedOption<T extends string> = {
 type SegmentedProps<T extends string> = {
     /** The views, in order; `label` passed translated. */
     options: readonly SegmentedOption<T>[];
+    /** The selected view (controlled). */
     value: T;
+    /** Called with the view pressed. */
     onValueChange: (value: T) => void;
+    /** sm · md (default). */
     size?: "sm" | "md";
     /** The accessible name of the tab list — passed translated. */
     "aria-label"?: string;
+    /** Styles merged last. */
     style?: StyleProp<ViewStyle>;
 };
 /**
@@ -356,9 +395,13 @@ declare function Segmented<T extends string>({ options, value, onValueChange, si
 type SkeletonProps = {
     /** `text` (a line), `circle` (an avatar), `rect` (a media, a card). */
     shape?: "text" | "circle" | "rect";
+    /** Points or a percentage; default: the shape's. */
     width?: DimensionValue;
+    /** Points or a percentage; default: the shape's. */
     height?: DimensionValue;
+    /** Styles merged last. */
     style?: StyleProp<ViewStyle>;
+    /** The id the tests find it by. */
     testID?: string;
 };
 /** A pulsing placeholder the size of what is loading — hidden from screen readers; still when the system reduces motion. */
@@ -367,6 +410,7 @@ declare function Skeleton({ shape, width, height, style, testID }: SkeletonProps
 type SpinnerProps = Omit<ActivityIndicatorProps, "size" | "color"> & {
     /** The accessible name of the wait, e.g. "Loading" — passed translated. */
     label: string;
+    /** sm · md (default) · lg. */
     size?: "sm" | "md" | "lg";
 };
 /** An indeterminate wait: the platform's activity indicator in the accent, named by `label`. */
@@ -398,9 +442,13 @@ type Theme = {
     readonly brandGradientVia: string;
     readonly brandGradientTo: string;
     readonly success: string;
+    readonly successText: string;
     readonly warning: string;
+    readonly warningText: string;
     readonly danger: string;
+    readonly dangerText: string;
     readonly info: string;
+    readonly infoText: string;
     readonly scrim: string;
     readonly scrimStrong: string;
     readonly overlay: string;
@@ -451,6 +499,7 @@ type ThemeProviderProps = {
     onModeChange?: (mode: Mode) => void;
     /** The product's roles over the platform's, per theme. */
     overrides?: ThemeOverrides;
+    /** Font families the app has loaded (`expo-font`…); absent: the system font. */
     fonts?: ThemeFonts;
 };
 /** Once, at the root of the app. Without it, `useTheme()` follows the system with the platform's roles. */
@@ -499,6 +548,7 @@ declare const toast: typeof show & {
 type ToasterProps = {
     /** The accessible name of each toast's close button — passed translated. */
     closeLabel: string;
+    /** Where the toasts stack: `top` (default) or `bottom`. */
     position?: "top" | "bottom";
     /** Distance from the edge, e.g. the safe-area inset + a margin (no safe-area dependency here). */
     offset?: number;