@krizaka/ui 2.2.0 → 2.3.0

package/dist/progress.js

@@ -1,4 +1,5 @@
 // src/progress/progress.tsx
+import * as React from "react";
 import { tv } from "tailwind-variants";
 import { jsx, jsxs } from "react/jsx-runtime";
 var progress = tv({
@@ -6,12 +7,17 @@ var progress = tv({
     root: "relative",
     track: "",
     indicator: "",
-    center: "absolute inset-0 flex flex-col items-center justify-center text-center"
+    center: "absolute inset-0 flex flex-col items-center justify-center text-center",
+    buffer: "absolute inset-y-0 left-0 -z-10 rounded-full bg-accent/25 transition-[width] duration-500 motion-reduce:transition-none",
+    frame: "flex w-full flex-col gap-1.5",
+    header: "flex items-baseline gap-2 text-xs",
+    caption: "min-w-0 flex-1 truncate font-medium text-fg",
+    figure: "shrink-0 tabular-nums text-fg-secondary"
   },
   variants: {
     variant: {
       bar: {
-        root: "w-full overflow-hidden rounded-full bg-surface-3",
+        root: "relative isolate w-full overflow-hidden rounded-full bg-surface-3",
         indicator: "kz-progress h-full rounded-full bg-linear-to-r from-accent to-accent-2 transition-[width] duration-500 motion-reduce:transition-none data-[state=indeterminate]:w-2/5"
       },
       ring: {
@@ -20,7 +26,14 @@ var progress = tv({
         indicator: "stroke-accent transition-[stroke-dashoffset] duration-1000 motion-reduce:transition-none data-[state=indeterminate]:origin-center data-[state=indeterminate]:animate-spin motion-reduce:data-[state=indeterminate]:animate-none"
       }
     },
-    size: { sm: {}, md: {}, lg: {} }
+    size: { sm: {}, md: {}, lg: {} },
+    status: {
+      active: {},
+      // Paused: the fill rests, striped — the task is waiting for someone, not broken.
+      paused: { indicator: "kz-progress-paused opacity-70" },
+      // Failed: the fill turns to the danger colour where it stopped.
+      error: { indicator: "from-danger to-danger stroke-danger" }
+    }
   },
   compoundVariants: [
     { variant: "bar", size: "sm", class: { root: "h-1" } },
@@ -30,11 +43,27 @@ var progress = tv({
     { variant: "ring", size: "md", class: { root: "h-20 w-20" } },
     { variant: "ring", size: "lg", class: { root: "h-36 w-36" } }
   ],
-  defaultVariants: { variant: "bar", size: "md" }
+  defaultVariants: { variant: "bar", size: "md", status: "active" }
 });
 var STROKE = { sm: 12, md: 9, lg: 7 };
-function Progress({ variant = "bar", size = "md", value, max = 100, label, valueText, className, children, ...props }) {
-  const s = progress({ variant, size });
+function Progress({
+  variant = "bar",
+  size = "md",
+  value,
+  max = 100,
+  label,
+  valueText,
+  className,
+  children,
+  buffer,
+  segments,
+  status = "active",
+  showLabel,
+  eta,
+  ...props
+}) {
+  const s = progress({ variant, size, status });
+  const maskId = `kz-seg-${React.useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
   const known = typeof value === "number" && Number.isFinite(value);
   const ratio = known ? Math.min(1, Math.max(0, value / (max || 1))) : 0;
   const percent = Math.round(ratio * 100);
@@ -45,8 +74,9 @@ function Progress({ variant = "bar", size = "md", value, max = 100, label, value
     "aria-valuemin": known ? 0 : void 0,
     "aria-valuemax": known ? max : void 0,
     "aria-valuenow": known ? Math.min(max, Math.max(0, value)) : void 0,
-    "aria-valuetext": known ? valueText ?? `${percent}%` : valueText,
+    "aria-valuetext": [known ? valueText ?? `${percent}%` : valueText, eta].filter(Boolean).join(", ") || void 0,
     "data-state": state,
+    "data-status": status === "active" ? void 0 : status,
     "data-value": known ? value : void 0,
     "data-variant": variant
   };
@@ -55,28 +85,45 @@ function Progress({ variant = "bar", size = "md", value, max = 100, label, value
     const r = 50 - stroke / 2;
     return /* @__PURE__ */ jsxs("div", { ...aria, className: s.root({ className }), ...props, children: [
       /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", "aria-hidden": true, children: [
-        /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r, fill: "none", strokeWidth: stroke, className: s.track() }),
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: "50",
-            cy: "50",
-            r,
-            fill: "none",
-            strokeWidth: stroke,
-            strokeLinecap: "round",
-            pathLength: 100,
-            strokeDasharray: 100,
-            strokeDashoffset: known ? 100 - percent : 75,
-            "data-state": state,
-            className: s.indicator()
-          }
-        )
+        segments && segments > 1 && /* @__PURE__ */ jsx("mask", { id: maskId, children: /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r, fill: "none", stroke: "white", strokeWidth: stroke + 2, pathLength: 100, strokeDasharray: `${100 / segments - 2} 2` }) }),
+        /* @__PURE__ */ jsxs("g", { mask: segments && segments > 1 ? `url(#${maskId})` : void 0, children: [
+          /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r, fill: "none", strokeWidth: stroke, className: s.track() }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "50",
+              cy: "50",
+              r,
+              fill: "none",
+              strokeWidth: stroke,
+              strokeLinecap: "round",
+              pathLength: 100,
+              strokeDasharray: 100,
+              strokeDashoffset: known ? 100 - percent : 75,
+              "data-state": state,
+              className: s.indicator()
+            }
+          )
+        ] })
       ] }),
       children !== void 0 && /* @__PURE__ */ jsx("div", { className: s.center(), children })
     ] });
   }
-  return /* @__PURE__ */ jsx("div", { ...aria, className: s.root({ className }), ...props, children: /* @__PURE__ */ jsx("div", { "data-state": state, className: s.indicator(), style: known ? { width: `${ratio * 100}%` } : void 0 }) });
+  const segmented = segments && segments > 1 ? { "--kz-segments": segments } : void 0;
+  const bufferRatio = typeof buffer === "number" && Number.isFinite(buffer) ? Math.min(1, Math.max(0, buffer / (max || 1))) : null;
+  const bar = /* @__PURE__ */ jsxs("div", { ...aria, className: s.root({ className: [segmented && "kz-progress-segmented", className].filter(Boolean).join(" ") || void 0 }), style: segmented, ...props, children: [
+    /* @__PURE__ */ jsx("div", { "data-state": state, className: s.indicator(), style: known ? { width: `${ratio * 100}%` } : void 0 }),
+    bufferRatio !== null && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: s.buffer(), style: { width: `${bufferRatio * 100}%` } })
+  ] });
+  if (!showLabel) return bar;
+  const figure = [known ? valueText ?? `${percent} %` : valueText, eta].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ jsxs("div", { className: s.frame(), children: [
+    /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: s.header(), children: [
+      /* @__PURE__ */ jsx("span", { className: s.caption(), children: label }),
+      figure && /* @__PURE__ */ jsx("span", { className: s.figure(), children: figure })
+    ] }),
+    bar
+  ] });
 }
 export {
   Progress,

package/dist/progress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/progress/progress.tsx"],"sourcesContent":["// Server-safe: no hook, no context. role=\"progressbar\" with aria-valuenow / aria-valuemax (none when indeterminate),\n// named by `label`. A bar or a ring; the ring can hold content in its centre (an amount, a percentage).\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const progress = tv({\n  slots: {\n    root: \"relative\",\n    track: \"\",\n    indicator: \"\",\n    center: \"absolute inset-0 flex flex-col items-center justify-center text-center\",\n  },\n  variants: {\n    variant: {\n      bar: {\n        root: \"w-full overflow-hidden rounded-full bg-surface-3\",\n        indicator:\n          \"kz-progress h-full rounded-full bg-linear-to-r from-accent to-accent-2 transition-[width] duration-500 motion-reduce:transition-none \" +\n          \"data-[state=indeterminate]:w-2/5\",\n      },\n      ring: {\n        root: \"inline-flex shrink-0 items-center justify-center\",\n        track: \"stroke-border-default\",\n        indicator:\n          \"stroke-accent transition-[stroke-dashoffset] duration-1000 motion-reduce:transition-none \" +\n          \"data-[state=indeterminate]:origin-center data-[state=indeterminate]:animate-spin motion-reduce:data-[state=indeterminate]:animate-none\",\n      },\n    },\n    size: { sm: {}, md: {}, lg: {} },\n  },\n  compoundVariants: [\n    { variant: \"bar\", size: \"sm\", class: { root: \"h-1\" } },\n    { variant: \"bar\", size: \"md\", class: { root: \"h-2\" } },\n    { variant: \"bar\", size: \"lg\", class: { root: \"h-3\" } },\n    { variant: \"ring\", size: \"sm\", class: { root: \"h-10 w-10\" } },\n    { variant: \"ring\", size: \"md\", class: { root: \"h-20 w-20\" } },\n    { variant: \"ring\", size: \"lg\", class: { root: \"h-36 w-36\" } },\n  ],\n  defaultVariants: { variant: \"bar\", size: \"md\" },\n});\n\nexport type ProgressVariants = VariantProps<typeof progress>;\n\nexport type ProgressProps = Omit<React.ComponentProps<\"div\">, \"children\"> &\n  ProgressVariants & {\n    /** bar · ring (a ring holds its `children` in the centre). */\n    variant?: ProgressVariants[\"variant\"];\n    /** sm · md · lg: the bar's thickness, the ring's diameter. */\n    size?: ProgressVariants[\"size\"];\n    /** How far, between 0 and `max`. `null` or absent: indeterminate (a wait of unknown length). */\n    value?: number | null;\n    /** The value that means complete. */\n    max?: number;\n    /** The accessible name — passed translated (\"Upload\", \"Raised towards the goal\"). */\n    label: string;\n    /** The value in words for assistive technology (\"$420 of $1,000\") — default: the percentage. */\n    valueText?: string;\n    /** A ring's centre: an amount, a percentage, an icon. */\n    children?: React.ReactNode;\n  };\n\nconst STROKE = { sm: 12, md: 9, lg: 7 } as const;\n\n/** A progress bar or ring: `value` / `max`, indeterminate without a value. State: `data-state` (loading · complete · indeterminate). */\nexport function Progress({ variant = \"bar\", size = \"md\", value, max = 100, label, valueText, className, children, ...props }: ProgressProps) {\n  const s = progress({ variant, size });\n  const known = typeof value === \"number\" && Number.isFinite(value);\n  const ratio = known ? Math.min(1, Math.max(0, value / (max || 1))) : 0;\n  const percent = Math.round(ratio * 100);\n  const state = !known ? \"indeterminate\" : ratio >= 1 ? \"complete\" : \"loading\";\n  const aria = {\n    role: \"progressbar\" as const,\n    \"aria-label\": label,\n    \"aria-valuemin\": known ? 0 : undefined,\n    \"aria-valuemax\": known ? max : undefined,\n    \"aria-valuenow\": known ? Math.min(max, Math.max(0, value)) : undefined,\n    \"aria-valuetext\": known ? (valueText ?? `${percent}%`) : valueText,\n    \"data-state\": state,\n    \"data-value\": known ? value : undefined,\n    \"data-variant\": variant,\n  };\n  if (variant === \"ring\") {\n    const stroke = STROKE[size];\n    const r = 50 - stroke / 2;\n    return (\n      <div {...aria} className={s.root({ className })} {...props}>\n        <svg viewBox=\"0 0 100 100\" className=\"h-full w-full -rotate-90\" aria-hidden>\n          <circle cx=\"50\" cy=\"50\" r={r} fill=\"none\" strokeWidth={stroke} className={s.track()} />\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r={r}\n            fill=\"none\"\n            strokeWidth={stroke}\n            strokeLinecap=\"round\"\n            pathLength={100}\n            strokeDasharray={100}\n            strokeDashoffset={known ? 100 - percent : 75}\n            data-state={state}\n            className={s.indicator()}\n          />\n        </svg>\n        {children !== undefined && <div className={s.center()}>{children}</div>}\n      </div>\n    );\n  }\n  return (\n    <div {...aria} className={s.root({ className })} {...props}>\n      <div data-state={state} className={s.indicator()} style={known ? { width: `${ratio * 100}%` } : undefined} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/progress/progress.tsx"],"sourcesContent":["// Server-safe: no hook, no context. role=\"progressbar\" with aria-valuenow / aria-valuemax (none when indeterminate),\n// named by `label`. A bar or a ring; the ring can hold content in its centre (an amount, a percentage).\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const progress = tv({\n  slots: {\n    root: \"relative\",\n    track: \"\",\n    indicator: \"\",\n    center: \"absolute inset-0 flex flex-col items-center justify-center text-center\",\n    buffer: \"absolute inset-y-0 left-0 -z-10 rounded-full bg-accent/25 transition-[width] duration-500 motion-reduce:transition-none\",\n    frame: \"flex w-full flex-col gap-1.5\",\n    header: \"flex items-baseline gap-2 text-xs\",\n    caption: \"min-w-0 flex-1 truncate font-medium text-fg\",\n    figure: \"shrink-0 tabular-nums text-fg-secondary\",\n  },\n  variants: {\n    variant: {\n      bar: {\n        root: \"relative isolate w-full overflow-hidden rounded-full bg-surface-3\",\n        indicator:\n          \"kz-progress h-full rounded-full bg-linear-to-r from-accent to-accent-2 transition-[width] duration-500 motion-reduce:transition-none \" +\n          \"data-[state=indeterminate]:w-2/5\",\n      },\n      ring: {\n        root: \"inline-flex shrink-0 items-center justify-center\",\n        track: \"stroke-border-default\",\n        indicator:\n          \"stroke-accent transition-[stroke-dashoffset] duration-1000 motion-reduce:transition-none \" +\n          \"data-[state=indeterminate]:origin-center data-[state=indeterminate]:animate-spin motion-reduce:data-[state=indeterminate]:animate-none\",\n      },\n    },\n    size: { sm: {}, md: {}, lg: {} },\n    status: {\n      active: {},\n      // Paused: the fill rests, striped — the task is waiting for someone, not broken.\n      paused: { indicator: \"kz-progress-paused opacity-70\" },\n      // Failed: the fill turns to the danger colour where it stopped.\n      error: { indicator: \"from-danger to-danger stroke-danger\" },\n    },\n  },\n  compoundVariants: [\n    { variant: \"bar\", size: \"sm\", class: { root: \"h-1\" } },\n    { variant: \"bar\", size: \"md\", class: { root: \"h-2\" } },\n    { variant: \"bar\", size: \"lg\", class: { root: \"h-3\" } },\n    { variant: \"ring\", size: \"sm\", class: { root: \"h-10 w-10\" } },\n    { variant: \"ring\", size: \"md\", class: { root: \"h-20 w-20\" } },\n    { variant: \"ring\", size: \"lg\", class: { root: \"h-36 w-36\" } },\n  ],\n  defaultVariants: { variant: \"bar\", size: \"md\", status: \"active\" },\n});\n\nexport type ProgressVariants = VariantProps<typeof progress>;\n\nexport type ProgressProps = Omit<React.ComponentProps<\"div\">, \"children\"> &\n  ProgressVariants & {\n    /** bar · ring (a ring holds its `children` in the centre). */\n    variant?: ProgressVariants[\"variant\"];\n    /** sm · md · lg: the bar's thickness, the ring's diameter. */\n    size?: ProgressVariants[\"size\"];\n    /** How far, between 0 and `max`. `null` or absent: indeterminate (a wait of unknown length). */\n    value?: number | null;\n    /** The value that means complete. */\n    max?: number;\n    /** The accessible name — passed translated (\"Upload\", \"Raised towards the goal\"). */\n    label: string;\n    /** The value in words for assistive technology (\"$420 of $1,000\") — default: the percentage. */\n    valueText?: string;\n    /** A ring's centre: an amount, a percentage, an icon. */\n    children?: React.ReactNode;\n    /** How far is already available beyond the value (a video buffered ahead), between 0 and `max` — bar only. */\n    buffer?: number;\n    /** Splits the bar or the ring into this many segments: the steps of a task, the parts of a goal. */\n    segments?: number;\n    /**\n     * active · paused (the fill rests, striped: waiting for someone) · error (the fill turns to the danger colour where it stopped).\n     * @default \"active\"\n     */\n    status?: ProgressVariants[\"status\"];\n    /** Shows the label above the bar, with the percentage (or `valueText`) and `eta` — bar only. */\n    showLabel?: boolean;\n    /** The time left, in words (“About 2 min left”), shown with `showLabel` and read with the value — passed translated. */\n    eta?: string;\n  };\n\nconst STROKE = { sm: 12, md: 9, lg: 7 } as const;\n\n/** A progress bar or ring: `value` / `max`, indeterminate without a value. State: `data-state` (loading · complete · indeterminate). */\nexport function Progress({\n  variant = \"bar\",\n  size = \"md\",\n  value,\n  max = 100,\n  label,\n  valueText,\n  className,\n  children,\n  buffer,\n  segments,\n  status = \"active\",\n  showLabel,\n  eta,\n  ...props\n}: ProgressProps) {\n  const s = progress({ variant, size, status });\n  const maskId = `kz-seg-${React.useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n  const known = typeof value === \"number\" && Number.isFinite(value);\n  const ratio = known ? Math.min(1, Math.max(0, value / (max || 1))) : 0;\n  const percent = Math.round(ratio * 100);\n  const state = !known ? \"indeterminate\" : ratio >= 1 ? \"complete\" : \"loading\";\n  const aria = {\n    role: \"progressbar\" as const,\n    \"aria-label\": label,\n    \"aria-valuemin\": known ? 0 : undefined,\n    \"aria-valuemax\": known ? max : undefined,\n    \"aria-valuenow\": known ? Math.min(max, Math.max(0, value)) : undefined,\n    \"aria-valuetext\": [known ? (valueText ?? `${percent}%`) : valueText, eta].filter(Boolean).join(\", \") || undefined,\n    \"data-state\": state,\n    \"data-status\": status === \"active\" ? undefined : status,\n    \"data-value\": known ? value : undefined,\n    \"data-variant\": variant,\n  };\n  if (variant === \"ring\") {\n    const stroke = STROKE[size];\n    const r = 50 - stroke / 2;\n    return (\n      <div {...aria} className={s.root({ className })} {...props}>\n        <svg viewBox=\"0 0 100 100\" className=\"h-full w-full -rotate-90\" aria-hidden>\n          {segments && segments > 1 && (\n            <mask id={maskId}>\n              <circle cx=\"50\" cy=\"50\" r={r} fill=\"none\" stroke=\"white\" strokeWidth={stroke + 2} pathLength={100} strokeDasharray={`${100 / segments - 2} 2`} />\n            </mask>\n          )}\n          <g mask={segments && segments > 1 ? `url(#${maskId})` : undefined}>\n          <circle cx=\"50\" cy=\"50\" r={r} fill=\"none\" strokeWidth={stroke} className={s.track()} />\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r={r}\n            fill=\"none\"\n            strokeWidth={stroke}\n            strokeLinecap=\"round\"\n            pathLength={100}\n            strokeDasharray={100}\n            strokeDashoffset={known ? 100 - percent : 75}\n            data-state={state}\n            className={s.indicator()}\n          />\n          </g>\n        </svg>\n        {children !== undefined && <div className={s.center()}>{children}</div>}\n      </div>\n    );\n  }\n  const segmented = segments && segments > 1 ? ({ \"--kz-segments\": segments } as React.CSSProperties) : undefined;\n  const bufferRatio = typeof buffer === \"number\" && Number.isFinite(buffer) ? Math.min(1, Math.max(0, buffer / (max || 1))) : null;\n  const bar = (\n    <div {...aria} className={s.root({ className: [segmented && \"kz-progress-segmented\", className].filter(Boolean).join(\" \") || undefined })} style={segmented} {...props}>\n      <div data-state={state} className={s.indicator()} style={known ? { width: `${ratio * 100}%` } : undefined} />\n      {bufferRatio !== null && <div aria-hidden className={s.buffer()} style={{ width: `${bufferRatio * 100}%` }} />}\n    </div>\n  );\n  if (!showLabel) return bar;\n  const figure = [known ? (valueText ?? `${percent} %`) : valueText, eta].filter(Boolean).join(\" · \");\n  return (\n    <div className={s.frame()}>\n      <div aria-hidden className={s.header()}>\n        <span className={s.caption()}>{label}</span>\n        {figure && <span className={s.figure()}>{figure}</span>}\n      </div>\n      {bar}\n    </div>\n  );\n}\n"],"mappings":";AAEA,YAAY,WAAW;AACvB,SAAS,UAA6B;AAgIxB,cAGJ,YAHI;AA9HP,IAAM,WAAW,GAAG;AAAA,EACzB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,KAAK;AAAA,QACH,MAAM;AAAA,QACN,WACE;AAAA,MAEJ;AAAA,MACA,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,WACE;AAAA,MAEJ;AAAA,IACF;AAAA,IACA,MAAM,EAAE,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,EAAE;AAAA,IAC/B,QAAQ;AAAA,MACN,QAAQ,CAAC;AAAA;AAAA,MAET,QAAQ,EAAE,WAAW,gCAAgC;AAAA;AAAA,MAErD,OAAO,EAAE,WAAW,sCAAsC;AAAA,IAC5D;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB,EAAE,SAAS,OAAO,MAAM,MAAM,OAAO,EAAE,MAAM,MAAM,EAAE;AAAA,IACrD,EAAE,SAAS,OAAO,MAAM,MAAM,OAAO,EAAE,MAAM,MAAM,EAAE;AAAA,IACrD,EAAE,SAAS,OAAO,MAAM,MAAM,OAAO,EAAE,MAAM,MAAM,EAAE;AAAA,IACrD,EAAE,SAAS,QAAQ,MAAM,MAAM,OAAO,EAAE,MAAM,YAAY,EAAE;AAAA,IAC5D,EAAE,SAAS,QAAQ,MAAM,MAAM,OAAO,EAAE,MAAM,YAAY,EAAE;AAAA,IAC5D,EAAE,SAAS,QAAQ,MAAM,MAAM,OAAO,EAAE,MAAM,YAAY,EAAE;AAAA,EAC9D;AAAA,EACA,iBAAiB,EAAE,SAAS,OAAO,MAAM,MAAM,QAAQ,SAAS;AAClE,CAAC;AAmCD,IAAM,SAAS,EAAE,IAAI,IAAI,IAAI,GAAG,IAAI,EAAE;AAG/B,SAAS,SAAS;AAAA,EACvB,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,IAAI,SAAS,EAAE,SAAS,MAAM,OAAO,CAAC;AAC5C,QAAM,SAAS,UAAgB,YAAM,EAAE,QAAQ,mBAAmB,EAAE,CAAC;AACrE,QAAM,QAAQ,OAAO,UAAU,YAAY,OAAO,SAAS,KAAK;AAChE,QAAM,QAAQ,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,SAAS,OAAO,EAAE,CAAC,IAAI;AACrE,QAAM,UAAU,KAAK,MAAM,QAAQ,GAAG;AACtC,QAAM,QAAQ,CAAC,QAAQ,kBAAkB,SAAS,IAAI,aAAa;AACnE,QAAM,OAAO;AAAA,IACX,MAAM;AAAA,IACN,cAAc;AAAA,IACd,iBAAiB,QAAQ,IAAI;AAAA,IAC7B,iBAAiB,QAAQ,MAAM;AAAA,IAC/B,iBAAiB,QAAQ,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC,IAAI;AAAA,IAC7D,kBAAkB,CAAC,QAAS,aAAa,GAAG,OAAO,MAAO,WAAW,GAAG,EAAE,OAAO,OAAO,EAAE,KAAK,IAAI,KAAK;AAAA,IACxG,cAAc;AAAA,IACd,eAAe,WAAW,WAAW,SAAY;AAAA,IACjD,cAAc,QAAQ,QAAQ;AAAA,IAC9B,gBAAgB;AAAA,EAClB;AACA,MAAI,YAAY,QAAQ;AACtB,UAAM,SAAS,OAAO,IAAI;AAC1B,UAAM,IAAI,KAAK,SAAS;AACxB,WACE,qBAAC,SAAK,GAAG,MAAM,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACnD;AAAA,2BAAC,SAAI,SAAQ,eAAc,WAAU,4BAA2B,eAAW,MACxE;AAAA,oBAAY,WAAW,KACtB,oBAAC,UAAK,IAAI,QACR,8BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAM,MAAK,QAAO,QAAO,SAAQ,aAAa,SAAS,GAAG,YAAY,KAAK,iBAAiB,GAAG,MAAM,WAAW,CAAC,MAAM,GACjJ;AAAA,QAEF,qBAAC,OAAE,MAAM,YAAY,WAAW,IAAI,QAAQ,MAAM,MAAM,QACxD;AAAA,8BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAM,MAAK,QAAO,aAAa,QAAQ,WAAW,EAAE,MAAM,GAAG;AAAA,UACrF;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,IAAG;AAAA,cACH;AAAA,cACA,MAAK;AAAA,cACL,aAAa;AAAA,cACb,eAAc;AAAA,cACd,YAAY;AAAA,cACZ,iBAAiB;AAAA,cACjB,kBAAkB,QAAQ,MAAM,UAAU;AAAA,cAC1C,cAAY;AAAA,cACZ,WAAW,EAAE,UAAU;AAAA;AAAA,UACzB;AAAA,WACA;AAAA,SACF;AAAA,MACC,aAAa,UAAa,oBAAC,SAAI,WAAW,EAAE,OAAO,GAAI,UAAS;AAAA,OACnE;AAAA,EAEJ;AACA,QAAM,YAAY,YAAY,WAAW,IAAK,EAAE,iBAAiB,SAAS,IAA4B;AACtG,QAAM,cAAc,OAAO,WAAW,YAAY,OAAO,SAAS,MAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,UAAU,OAAO,EAAE,CAAC,IAAI;AAC5H,QAAM,MACJ,qBAAC,SAAK,GAAG,MAAM,WAAW,EAAE,KAAK,EAAE,WAAW,CAAC,aAAa,yBAAyB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK,OAAU,CAAC,GAAG,OAAO,WAAY,GAAG,OAC/J;AAAA,wBAAC,SAAI,cAAY,OAAO,WAAW,EAAE,UAAU,GAAG,OAAO,QAAQ,EAAE,OAAO,GAAG,QAAQ,GAAG,IAAI,IAAI,QAAW;AAAA,IAC1G,gBAAgB,QAAQ,oBAAC,SAAI,eAAW,MAAC,WAAW,EAAE,OAAO,GAAG,OAAO,EAAE,OAAO,GAAG,cAAc,GAAG,IAAI,GAAG;AAAA,KAC9G;AAEF,MAAI,CAAC,UAAW,QAAO;AACvB,QAAM,SAAS,CAAC,QAAS,aAAa,GAAG,OAAO,OAAQ,WAAW,GAAG,EAAE,OAAO,OAAO,EAAE,KAAK,QAAK;AAClG,SACE,qBAAC,SAAI,WAAW,EAAE,MAAM,GACtB;AAAA,yBAAC,SAAI,eAAW,MAAC,WAAW,EAAE,OAAO,GACnC;AAAA,0BAAC,UAAK,WAAW,EAAE,QAAQ,GAAI,iBAAM;AAAA,MACpC,UAAU,oBAAC,UAAK,WAAW,EAAE,OAAO,GAAI,kBAAO;AAAA,OAClD;AAAA,IACC;AAAA,KACH;AAEJ;","names":[]}

package/dist/skeleton.d.ts

@@ -8,7 +8,7 @@ declare const skeletonVariants: tailwind_variants.TVReturnType<{
         circle: "aspect-square h-10 rounded-full";
         rect: "h-24 w-full rounded-lg";
     };
-}, undefined, "block bg-surface-3 motion-safe:animate-pulse", {
+}, undefined, "kz-skeleton block bg-surface-3", {
     shape: {
         text: "h-3 w-full rounded-sm";
         circle: "aspect-square h-10 rounded-full";
@@ -28,7 +28,22 @@ type SkeletonProps = React.ComponentProps<"span"> & {
      */
     shape?: VariantProps<typeof skeletonVariants>["shape"];
 };
-/** A pulsing shape the size of what is loading. Announce the wait elsewhere (aria-busy on the region, a Spinner). */
+/** A shape the size of what is loading. Announce the wait elsewhere (`LoadingRegion` does it, with `aria-busy`). */
 declare function Skeleton({ shape, className, ...props }: SkeletonProps): React.JSX.Element;
+type SkeletonTextProps = React.ComponentProps<"span"> & {
+    /**
+     * How many lines.
+     * @default 3
+     */
+    lines?: number;
+};
+/** A paragraph on its way: `lines` lines, the last one shorter — like text that wraps. */
+declare function SkeletonText({ lines, className, ...props }: SkeletonTextProps): React.JSX.Element;
+type SkeletonShapeProps = React.ComponentProps<"div">;
+/**
+ * The skeleton of the real thing: render your component with placeholder data inside, and its text, images and icons
+ * become skeleton shapes in place — the exact layout, nothing to draw twice. Inert and hidden from assistive technology.
+ */
+declare function SkeletonShape({ className, children, ...props }: SkeletonShapeProps): React.JSX.Element;
 
-export { Skeleton, type SkeletonProps, skeletonVariants };
+export { Skeleton, type SkeletonProps, SkeletonShape, type SkeletonShapeProps, SkeletonText, type SkeletonTextProps, skeletonVariants };

package/dist/skeleton.js

@@ -2,7 +2,7 @@
 import { tv } from "tailwind-variants";
 import { jsx } from "react/jsx-runtime";
 var skeletonVariants = tv({
-  base: "block bg-surface-3 motion-safe:animate-pulse",
+  base: "kz-skeleton block bg-surface-3",
   variants: {
     shape: { text: "h-3 w-full rounded-sm", circle: "aspect-square h-10 rounded-full", rect: "h-24 w-full rounded-lg" }
   },
@@ -11,8 +11,16 @@ var skeletonVariants = tv({
 function Skeleton({ shape, className, ...props }) {
   return /* @__PURE__ */ jsx("span", { "aria-hidden": true, "data-shape": shape ?? "text", className: skeletonVariants({ shape, className }), ...props });
 }
+function SkeletonText({ lines = 3, className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: ["flex w-full flex-col gap-2", className].filter(Boolean).join(" "), ...props, children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { className: i === lines - 1 && lines > 1 ? "w-3/5" : void 0 }, i)) });
+}
+function SkeletonShape({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": true, inert: true, className: ["kz-skeleton-shape", className].filter(Boolean).join(" "), ...props, children });
+}
 export {
   Skeleton,
+  SkeletonShape,
+  SkeletonText,
   skeletonVariants
 };
 //# sourceMappingURL=skeleton.js.map

package/dist/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/skeleton/skeleton.tsx"],"sourcesContent":["// Server-safe. A placeholder for content on its way: decorative, so hidden from assistive technology.\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const skeletonVariants = tv({\n  base: \"block bg-surface-3 motion-safe:animate-pulse\",\n  variants: {\n    shape: { text: \"h-3 w-full rounded-sm\", circle: \"aspect-square h-10 rounded-full\", rect: \"h-24 w-full rounded-lg\" },\n  },\n  defaultVariants: { shape: \"text\" },\n});\n\nexport type SkeletonProps = React.ComponentProps<\"span\"> & {\n  /**\n   * text (a line) · circle (an avatar; give it a height) · rect (a media; give it a height).\n   * @default \"text\"\n   */\n  shape?: VariantProps<typeof skeletonVariants>[\"shape\"];\n};\n\n/** A pulsing shape the size of what is loading. Announce the wait elsewhere (aria-busy on the region, a Spinner). */\nexport function Skeleton({ shape, className, ...props }: SkeletonProps) {\n  return <span aria-hidden data-shape={shape ?? \"text\"} className={skeletonVariants({ shape, className })} {...props} />;\n}\n"],"mappings":";AAEA,SAAS,UAA6B;AAoB7B;AAlBF,IAAM,mBAAmB,GAAG;AAAA,EACjC,MAAM;AAAA,EACN,UAAU;AAAA,IACR,OAAO,EAAE,MAAM,yBAAyB,QAAQ,mCAAmC,MAAM,yBAAyB;AAAA,EACpH;AAAA,EACA,iBAAiB,EAAE,OAAO,OAAO;AACnC,CAAC;AAWM,SAAS,SAAS,EAAE,OAAO,WAAW,GAAG,MAAM,GAAkB;AACtE,SAAO,oBAAC,UAAK,eAAW,MAAC,cAAY,SAAS,QAAQ,WAAW,iBAAiB,EAAE,OAAO,UAAU,CAAC,GAAI,GAAG,OAAO;AACtH;","names":[]}
+{"version":3,"sources":["../src/skeleton/skeleton.tsx"],"sourcesContent":["// Server-safe. A placeholder for content on its way: decorative, so hidden from assistive technology. One reflection of\n// the brand light crosses every skeleton of the page together (`background-attachment: fixed`), instead of each one\n// pulsing on its own; under reduced motion they rest, tinted.\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const skeletonVariants = tv({\n  base: \"kz-skeleton block bg-surface-3\",\n  variants: {\n    shape: { text: \"h-3 w-full rounded-sm\", circle: \"aspect-square h-10 rounded-full\", rect: \"h-24 w-full rounded-lg\" },\n  },\n  defaultVariants: { shape: \"text\" },\n});\n\nexport type SkeletonProps = React.ComponentProps<\"span\"> & {\n  /**\n   * text (a line) · circle (an avatar; give it a height) · rect (a media; give it a height).\n   * @default \"text\"\n   */\n  shape?: VariantProps<typeof skeletonVariants>[\"shape\"];\n};\n\n/** A shape the size of what is loading. Announce the wait elsewhere (`LoadingRegion` does it, with `aria-busy`). */\nexport function Skeleton({ shape, className, ...props }: SkeletonProps) {\n  return <span aria-hidden data-shape={shape ?? \"text\"} className={skeletonVariants({ shape, className })} {...props} />;\n}\n\nexport type SkeletonTextProps = React.ComponentProps<\"span\"> & {\n  /**\n   * How many lines.\n   * @default 3\n   */\n  lines?: number;\n};\n\n/** A paragraph on its way: `lines` lines, the last one shorter — like text that wraps. */\nexport function SkeletonText({ lines = 3, className, ...props }: SkeletonTextProps) {\n  return (\n    <span aria-hidden className={[\"flex w-full flex-col gap-2\", className].filter(Boolean).join(\" \")} {...props}>\n      {Array.from({ length: lines }, (_, i) => (\n        <Skeleton key={i} className={i === lines - 1 && lines > 1 ? \"w-3/5\" : undefined} />\n      ))}\n    </span>\n  );\n}\n\nexport type SkeletonShapeProps = React.ComponentProps<\"div\">;\n\n/**\n * The skeleton of the real thing: render your component with placeholder data inside, and its text, images and icons\n * become skeleton shapes in place — the exact layout, nothing to draw twice. Inert and hidden from assistive technology.\n */\nexport function SkeletonShape({ className, children, ...props }: SkeletonShapeProps) {\n  return (\n    <div aria-hidden inert className={[\"kz-skeleton-shape\", className].filter(Boolean).join(\" \")} {...props}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";AAIA,SAAS,UAA6B;AAoB7B;AAlBF,IAAM,mBAAmB,GAAG;AAAA,EACjC,MAAM;AAAA,EACN,UAAU;AAAA,IACR,OAAO,EAAE,MAAM,yBAAyB,QAAQ,mCAAmC,MAAM,yBAAyB;AAAA,EACpH;AAAA,EACA,iBAAiB,EAAE,OAAO,OAAO;AACnC,CAAC;AAWM,SAAS,SAAS,EAAE,OAAO,WAAW,GAAG,MAAM,GAAkB;AACtE,SAAO,oBAAC,UAAK,eAAW,MAAC,cAAY,SAAS,QAAQ,WAAW,iBAAiB,EAAE,OAAO,UAAU,CAAC,GAAI,GAAG,OAAO;AACtH;AAWO,SAAS,aAAa,EAAE,QAAQ,GAAG,WAAW,GAAG,MAAM,GAAsB;AAClF,SACE,oBAAC,UAAK,eAAW,MAAC,WAAW,CAAC,8BAA8B,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,OACnG,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MACjC,oBAAC,YAAiB,WAAW,MAAM,QAAQ,KAAK,QAAQ,IAAI,UAAU,UAAvD,CAAkE,CAClF,GACH;AAEJ;AAQO,SAAS,cAAc,EAAE,WAAW,UAAU,GAAG,MAAM,GAAuB;AACnF,SACE,oBAAC,SAAI,eAAW,MAAC,OAAK,MAAC,WAAW,CAAC,qBAAqB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,OAC/F,UACH;AAEJ;","names":[]}

package/dist/spinner.d.ts

@@ -1,6 +1,17 @@
+import * as React from 'react';
 import * as tailwind_variants from 'tailwind-variants';
 import { VariantProps } from 'tailwind-variants';
-import * as React from 'react';
+
+/** What the glyph shows: a wait (with an optional value), or how it ended. */
+type LoaderGlyphState = "loading" | "success" | "error";
+interface LoaderGlyphProps extends Omit<React.ComponentProps<"svg">, "children"> {
+    /** loading · success · error. */
+    state?: LoaderGlyphState;
+    /** Between 0 and 1: a determinate wait, the trace grows to it. Absent: indeterminate. */
+    value?: number | null;
+}
+/** The glyph alone (decorative): the Spinner, the Loader and the Button's `loading` draw it. */
+declare function LoaderGlyph({ state, value, ...props }: LoaderGlyphProps): React.JSX.Element;
 
 declare const spinnerVariants: tailwind_variants.TVReturnType<{
     size: {
@@ -8,7 +19,7 @@ declare const spinnerVariants: tailwind_variants.TVReturnType<{
         md: "h-6 w-6";
         lg: "h-10 w-10";
     };
-}, undefined, "shrink-0 text-accent motion-safe:animate-spin", {
+}, undefined, "shrink-0 text-accent", {
     size: {
         sm: "h-4 w-4";
         md: "h-6 w-6";
@@ -29,8 +40,13 @@ type SpinnerProps = Omit<React.ComponentProps<"svg">, "children"> & VariantProps
     size?: VariantProps<typeof spinnerVariants>["size"];
     /** The accessible name of the wait, e.g. "Loading" — passed translated. */
     label: string;
+    /** Between 0 and 1: the trace grows to the value (a determinate wait). Absent: it travels around. */
+    value?: number | null;
 };
-/** A turning ring with `role="status"` (it stops turning under prefers-reduced-motion). */
-declare function Spinner({ label, size, className, ...props }: SpinnerProps): React.JSX.Element;
+/**
+ * The Krizaka spinner: a hexagon traced by a segment of light around a breathing node, in `currentColor` (the accent by
+ * default). `role="status"`, named by `label`. Under prefers-reduced-motion it rests — a segment and the node lit.
+ */
+declare function Spinner({ label, size, value, className, ...props }: SpinnerProps): React.JSX.Element;
 
-export { Spinner, type SpinnerProps, spinnerVariants };
+export { LoaderGlyph, type LoaderGlyphProps, type LoaderGlyphState, Spinner, type SpinnerProps, spinnerVariants };

package/dist/spinner.js

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

package/dist/spinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/spinner/spinner.tsx"],"sourcesContent":["// Server-safe. An indeterminate wait: an SVG ring, announced as a status with its `label`.\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const spinnerVariants = tv({\n  base: \"shrink-0 text-accent motion-safe:animate-spin\",\n  variants: { size: { sm: \"h-4 w-4\", md: \"h-6 w-6\", lg: \"h-10 w-10\" } },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type SpinnerProps = Omit<React.ComponentProps<\"svg\">, \"children\"> &\n  VariantProps<typeof spinnerVariants> & {\n    /**\n     * sm · md · lg.\n     * @default \"md\"\n     */\n    size?: VariantProps<typeof spinnerVariants>[\"size\"];\n    /** The accessible name of the wait, e.g. \"Loading\" — passed translated. */\n    label: string;\n  };\n\n/** A turning ring with `role=\"status\"` (it stops turning under prefers-reduced-motion). */\nexport function Spinner({ label, size, className, ...props }: SpinnerProps) {\n  return (\n    <svg\n      role=\"status\"\n      aria-label={label}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      data-size={size ?? \"md\"}\n      className={spinnerVariants({ size, className })}\n      {...props}\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" strokeOpacity=\"0.2\" strokeWidth=\"3\" />\n      <path d=\"M21 12a9 9 0 0 0-9-9\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n"],"mappings":";AAEA,SAAS,UAA6B;AAsBlC,SASE,KATF;AApBG,IAAM,kBAAkB,GAAG;AAAA,EAChC,MAAM;AAAA,EACN,UAAU,EAAE,MAAM,EAAE,IAAI,WAAW,IAAI,WAAW,IAAI,YAAY,EAAE;AAAA,EACpE,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;AAcM,SAAS,QAAQ,EAAE,OAAO,MAAM,WAAW,GAAG,MAAM,GAAiB;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,aAAW,QAAQ;AAAA,MACnB,WAAW,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAAA,MAC7C,GAAG;AAAA,MAEJ;AAAA,4BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,QAAO,gBAAe,eAAc,OAAM,aAAY,KAAI;AAAA,QACxF,oBAAC,UAAK,GAAE,wBAAuB,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ;AAAA;AAAA;AAAA,EAC7F;AAEJ;","names":[]}
+{"version":3,"sources":["../src/spinner/spinner.tsx"],"sourcesContent":["// Server-safe. An indeterminate wait: the Krizaka loader glyph (a hexagon traced by light around a node), announced as\n// a status with its `label`. For a wait with a delay, a value, an ETA or an ending, see `@krizaka/ui/loader`.\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { LoaderGlyph } from \"./glyph\";\n\nexport const spinnerVariants = tv({\n  base: \"shrink-0 text-accent\",\n  variants: { size: { sm: \"h-4 w-4\", md: \"h-6 w-6\", lg: \"h-10 w-10\" } },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type SpinnerProps = Omit<React.ComponentProps<\"svg\">, \"children\"> &\n  VariantProps<typeof spinnerVariants> & {\n    /**\n     * sm · md · lg.\n     * @default \"md\"\n     */\n    size?: VariantProps<typeof spinnerVariants>[\"size\"];\n    /** The accessible name of the wait, e.g. \"Loading\" — passed translated. */\n    label: string;\n    /** Between 0 and 1: the trace grows to the value (a determinate wait). Absent: it travels around. */\n    value?: number | null;\n  };\n\n/**\n * The Krizaka spinner: a hexagon traced by a segment of light around a breathing node, in `currentColor` (the accent by\n * default). `role=\"status\"`, named by `label`. Under prefers-reduced-motion it rests — a segment and the node lit.\n */\nexport function Spinner({ label, size, value, className, ...props }: SpinnerProps) {\n  return (\n    <LoaderGlyph\n      role=\"status\"\n      aria-label={label}\n      aria-hidden={undefined}\n      value={value}\n      data-size={size ?? \"md\"}\n      className={spinnerVariants({ size, className })}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;AAGA,SAAS,UAA6B;AA6BlC;AAzBG,IAAM,kBAAkB,GAAG;AAAA,EAChC,MAAM;AAAA,EACN,UAAU,EAAE,MAAM,EAAE,IAAI,WAAW,IAAI,WAAW,IAAI,YAAY,EAAE;AAAA,EACpE,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;AAmBM,SAAS,QAAQ,EAAE,OAAO,MAAM,OAAO,WAAW,GAAG,MAAM,GAAiB;AACjF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,eAAa;AAAA,MACb;AAAA,MACA,aAAW,QAAQ;AAAA,MACnB,WAAW,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAAA,MAC7C,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/stepper.d.ts

@@ -0,0 +1,112 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+type StepStatus = "done" | "current" | "upcoming" | "error";
+interface Step {
+    /** Its name — passed translated. */
+    title: string;
+    /** One line under it (what happens, a time) — passed translated. */
+    description?: string;
+    /** Where it stands; by default from `current` (before: done, at: current, after: upcoming). */
+    status?: StepStatus;
+    /** Between 0 and 1 for the current step: its glyph grows to it. */
+    value?: number;
+    /** Anything under the step while it is current or failed: a progress bar, an action, a detail. */
+    content?: React.ReactNode;
+}
+declare const stepper: tailwind_variants.TVReturnType<{
+    orientation: {
+        vertical: {
+            root: string;
+            step: string;
+            connector: string;
+            body: string;
+        };
+        horizontal: {
+            root: string;
+            step: string;
+            connector: string;
+            body: string;
+        };
+    };
+}, {
+    root: string;
+    step: string;
+    node: string;
+    glyph: string;
+    connector: string;
+    body: string;
+    title: string;
+    description: string;
+    state: string;
+    content: string;
+}, undefined, {
+    orientation: {
+        vertical: {
+            root: string;
+            step: string;
+            connector: string;
+            body: string;
+        };
+        horizontal: {
+            root: string;
+            step: string;
+            connector: string;
+            body: string;
+        };
+    };
+}, {
+    root: string;
+    step: string;
+    node: string;
+    glyph: string;
+    connector: string;
+    body: string;
+    title: string;
+    description: string;
+    state: string;
+    content: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    orientation: {
+        vertical: {
+            root: string;
+            step: string;
+            connector: string;
+            body: string;
+        };
+        horizontal: {
+            root: string;
+            step: string;
+            connector: string;
+            body: string;
+        };
+    };
+}, {
+    root: string;
+    step: string;
+    node: string;
+    glyph: string;
+    connector: string;
+    body: string;
+    title: string;
+    description: string;
+    state: string;
+    content: string;
+}>>;
+type StepperProps = Omit<React.ComponentProps<"ol">, "children"> & {
+    /** The steps, in order. */
+    steps: readonly Step[];
+    /** The index of the current step: those before it are done, those after it upcoming (a step's own `status` wins). */
+    current?: number;
+    /** What each state is called, read with every step (“Done”, “In progress”, “Upcoming”, “Failed”) — passed translated. */
+    labels: Readonly<Record<StepStatus, string>>;
+    /**
+     * vertical (a job, a timeline) · horizontal (a short journey, a checkout).
+     * @default "vertical"
+     */
+    orientation?: "vertical" | "horizontal";
+};
+/** An ordered list of steps: `aria-current="step"` on the current one, each state said in words. */
+declare function Stepper({ steps, current, labels, orientation, className, ...props }: StepperProps): React.JSX.Element;
+
+export { type Step, type StepStatus, Stepper, type StepperProps, stepper };

package/dist/stepper.js

@@ -0,0 +1,67 @@
+import {
+  LoaderGlyph
+} from "./chunk-43PTCDTL.js";
+
+// src/stepper/stepper.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var stepper = tv({
+  slots: {
+    root: "flex",
+    step: "group/step relative flex min-w-0",
+    node: "relative z-10 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-surface-0",
+    glyph: "h-6 w-6",
+    connector: "absolute bg-border-default after:absolute after:inset-0 after:origin-top-left after:bg-accent after:transition-transform after:duration-700 motion-reduce:after:transition-none",
+    body: "min-w-0",
+    title: "text-sm font-semibold text-fg group-data-[status=upcoming]/step:text-fg-secondary",
+    description: "mt-0.5 text-xs text-fg-secondary",
+    state: "sr-only",
+    content: "mt-2"
+  },
+  variants: {
+    orientation: {
+      vertical: {
+        root: "flex-col",
+        step: "gap-3 pb-6 last:pb-0",
+        connector: "left-3.5 top-7 bottom-0 w-0.5 -translate-x-1/2 group-last/step:hidden after:scale-y-0 group-data-[status=done]/step:after:scale-y-100",
+        body: "pt-1"
+      },
+      horizontal: {
+        root: "flex-row",
+        step: "flex-1 flex-col gap-2 pr-3 last:flex-none last:pr-0",
+        connector: "left-8 right-1 top-3.5 h-0.5 -translate-y-1/2 group-last/step:hidden after:scale-x-0 group-data-[status=done]/step:after:scale-x-100",
+        body: ""
+      }
+    }
+  },
+  defaultVariants: { orientation: "vertical" }
+});
+var GLYPH = { done: "success", current: "loading", error: "error", upcoming: null };
+var TONE = { done: "text-accent", current: "text-accent", error: "text-fg-danger", upcoming: "text-border-strong" };
+function Stepper({ steps, current = 0, labels, orientation = "vertical", className, ...props }) {
+  const s = stepper({ orientation });
+  return /* @__PURE__ */ jsx("ol", { className: s.root({ className }), "data-orientation": orientation, ...props, children: steps.map((step, i) => {
+    const status = step.status ?? (i < current ? "done" : i === current ? "current" : "upcoming");
+    const glyph = GLYPH[status];
+    return /* @__PURE__ */ jsxs("li", { "data-status": status, "aria-current": status === "current" ? "step" : void 0, className: s.step(), children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: s.connector() }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: s.node(), children: glyph ? /* @__PURE__ */ jsx(LoaderGlyph, { state: glyph, value: status === "current" ? step.value : void 0, className: [s.glyph(), TONE[status]].join(" ") }) : /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", className: [s.glyph(), TONE[status]].join(" "), children: /* @__PURE__ */ jsx("path", { d: "M12 3 19.79 7.5 19.79 16.5 12 21 4.21 16.5 4.21 7.5Z", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }) }) }),
+      /* @__PURE__ */ jsxs("div", { className: s.body(), children: [
+        /* @__PURE__ */ jsxs("p", { className: s.title(), children: [
+          step.title,
+          /* @__PURE__ */ jsxs("span", { className: s.state(), children: [
+            " \u2014 ",
+            labels[status]
+          ] })
+        ] }),
+        step.description && /* @__PURE__ */ jsx("p", { className: s.description(), children: step.description }),
+        step.content && (status === "current" || status === "error") && /* @__PURE__ */ jsx("div", { className: s.content(), children: step.content })
+      ] })
+    ] }, i);
+  }) });
+}
+export {
+  Stepper,
+  stepper
+};
+//# sourceMappingURL=stepper.js.map

package/dist/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/stepper/stepper.tsx"],"sourcesContent":["// Server-safe. The steps of a journey or a job: an ordered list whose nodes are the Krizaka loader glyph — the current\n// step traces its hexagon (and grows to its `value` when known), a done step draws its check, a failed one its cross —\n// joined by connectors that fill as the journey advances. The state of every step is said in words, not only colour.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { LoaderGlyph } from \"../spinner/glyph\";\n\nexport type StepStatus = \"done\" | \"current\" | \"upcoming\" | \"error\";\n\nexport interface Step {\n  /** Its name — passed translated. */\n  title: string;\n  /** One line under it (what happens, a time) — passed translated. */\n  description?: string;\n  /** Where it stands; by default from `current` (before: done, at: current, after: upcoming). */\n  status?: StepStatus;\n  /** Between 0 and 1 for the current step: its glyph grows to it. */\n  value?: number;\n  /** Anything under the step while it is current or failed: a progress bar, an action, a detail. */\n  content?: React.ReactNode;\n}\n\nexport const stepper = tv({\n  slots: {\n    root: \"flex\",\n    step: \"group/step relative flex min-w-0\",\n    node: \"relative z-10 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-surface-0\",\n    glyph: \"h-6 w-6\",\n    connector: \"absolute bg-border-default after:absolute after:inset-0 after:origin-top-left after:bg-accent after:transition-transform after:duration-700 motion-reduce:after:transition-none\",\n    body: \"min-w-0\",\n    title: \"text-sm font-semibold text-fg group-data-[status=upcoming]/step:text-fg-secondary\",\n    description: \"mt-0.5 text-xs text-fg-secondary\",\n    state: \"sr-only\",\n    content: \"mt-2\",\n  },\n  variants: {\n    orientation: {\n      vertical: {\n        root: \"flex-col\",\n        step: \"gap-3 pb-6 last:pb-0\",\n        connector: \"left-3.5 top-7 bottom-0 w-0.5 -translate-x-1/2 group-last/step:hidden after:scale-y-0 group-data-[status=done]/step:after:scale-y-100\",\n        body: \"pt-1\",\n      },\n      horizontal: {\n        root: \"flex-row\",\n        step: \"flex-1 flex-col gap-2 pr-3 last:flex-none last:pr-0\",\n        connector: \"left-8 right-1 top-3.5 h-0.5 -translate-y-1/2 group-last/step:hidden after:scale-x-0 group-data-[status=done]/step:after:scale-x-100\",\n        body: \"\",\n      },\n    },\n  },\n  defaultVariants: { orientation: \"vertical\" },\n});\n\nconst GLYPH: Record<StepStatus, \"loading\" | \"success\" | \"error\" | null> = { done: \"success\", current: \"loading\", error: \"error\", upcoming: null };\nconst TONE: Record<StepStatus, string> = { done: \"text-accent\", current: \"text-accent\", error: \"text-fg-danger\", upcoming: \"text-border-strong\" };\n\nexport type StepperProps = Omit<React.ComponentProps<\"ol\">, \"children\"> & {\n  /** The steps, in order. */\n  steps: readonly Step[];\n  /** The index of the current step: those before it are done, those after it upcoming (a step's own `status` wins). */\n  current?: number;\n  /** What each state is called, read with every step (“Done”, “In progress”, “Upcoming”, “Failed”) — passed translated. */\n  labels: Readonly<Record<StepStatus, string>>;\n  /**\n   * vertical (a job, a timeline) · horizontal (a short journey, a checkout).\n   * @default \"vertical\"\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n};\n\n/** An ordered list of steps: `aria-current=\"step\"` on the current one, each state said in words. */\nexport function Stepper({ steps, current = 0, labels, orientation = \"vertical\", className, ...props }: StepperProps) {\n  const s = stepper({ orientation });\n  return (\n    <ol className={s.root({ className })} data-orientation={orientation} {...props}>\n      {steps.map((step, i) => {\n        const status: StepStatus = step.status ?? (i < current ? \"done\" : i === current ? \"current\" : \"upcoming\");\n        const glyph = GLYPH[status];\n        return (\n          <li key={i} data-status={status} aria-current={status === \"current\" ? \"step\" : undefined} className={s.step()}>\n            <span aria-hidden className={s.connector()} />\n            <span aria-hidden className={s.node()}>\n              {glyph ? (\n                <LoaderGlyph state={glyph} value={status === \"current\" ? step.value : undefined} className={[s.glyph(), TONE[status]].join(\" \")} />\n              ) : (\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" className={[s.glyph(), TONE[status]].join(\" \")}>\n                  <path d=\"M12 3 19.79 7.5 19.79 16.5 12 21 4.21 16.5 4.21 7.5Z\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinejoin=\"round\" />\n                </svg>\n              )}\n            </span>\n            <div className={s.body()}>\n              <p className={s.title()}>\n                {step.title}\n                <span className={s.state()}> — {labels[status]}</span>\n              </p>\n              {step.description && <p className={s.description()}>{step.description}</p>}\n              {step.content && (status === \"current\" || status === \"error\") && <div className={s.content()}>{step.content}</div>}\n            </div>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"],"mappings":";;;;;AAIA,SAAS,UAAU;AA8EP,cAaI,YAbJ;AA3DL,IAAM,UAAU,GAAG;AAAA,EACxB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,IACb,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,aAAa;AAAA,MACX,UAAU;AAAA,QACR,MAAM;AAAA,QACN,MAAM;AAAA,QACN,WAAW;AAAA,QACX,MAAM;AAAA,MACR;AAAA,MACA,YAAY;AAAA,QACV,MAAM;AAAA,QACN,MAAM;AAAA,QACN,WAAW;AAAA,QACX,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,aAAa,WAAW;AAC7C,CAAC;AAED,IAAM,QAAoE,EAAE,MAAM,WAAW,SAAS,WAAW,OAAO,SAAS,UAAU,KAAK;AAChJ,IAAM,OAAmC,EAAE,MAAM,eAAe,SAAS,eAAe,OAAO,kBAAkB,UAAU,qBAAqB;AAiBzI,SAAS,QAAQ,EAAE,OAAO,UAAU,GAAG,QAAQ,cAAc,YAAY,WAAW,GAAG,MAAM,GAAiB;AACnH,QAAM,IAAI,QAAQ,EAAE,YAAY,CAAC;AACjC,SACE,oBAAC,QAAG,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAG,oBAAkB,aAAc,GAAG,OACtE,gBAAM,IAAI,CAAC,MAAM,MAAM;AACtB,UAAM,SAAqB,KAAK,WAAW,IAAI,UAAU,SAAS,MAAM,UAAU,YAAY;AAC9F,UAAM,QAAQ,MAAM,MAAM;AAC1B,WACE,qBAAC,QAAW,eAAa,QAAQ,gBAAc,WAAW,YAAY,SAAS,QAAW,WAAW,EAAE,KAAK,GAC1G;AAAA,0BAAC,UAAK,eAAW,MAAC,WAAW,EAAE,UAAU,GAAG;AAAA,MAC5C,oBAAC,UAAK,eAAW,MAAC,WAAW,EAAE,KAAK,GACjC,kBACC,oBAAC,eAAY,OAAO,OAAO,OAAO,WAAW,YAAY,KAAK,QAAQ,QAAW,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,MAAM,CAAC,EAAE,KAAK,GAAG,GAAG,IAEjI,oBAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,MAAM,CAAC,EAAE,KAAK,GAAG,GAChF,8BAAC,UAAK,GAAE,wDAAuD,QAAO,gBAAe,aAAY,KAAI,gBAAe,SAAQ,GAC9H,GAEJ;AAAA,MACA,qBAAC,SAAI,WAAW,EAAE,KAAK,GACrB;AAAA,6BAAC,OAAE,WAAW,EAAE,MAAM,GACnB;AAAA,eAAK;AAAA,UACN,qBAAC,UAAK,WAAW,EAAE,MAAM,GAAG;AAAA;AAAA,YAAI,OAAO,MAAM;AAAA,aAAE;AAAA,WACjD;AAAA,QACC,KAAK,eAAe,oBAAC,OAAE,WAAW,EAAE,YAAY,GAAI,eAAK,aAAY;AAAA,QACrE,KAAK,YAAY,WAAW,aAAa,WAAW,YAAY,oBAAC,SAAI,WAAW,EAAE,QAAQ,GAAI,eAAK,SAAQ;AAAA,SAC9G;AAAA,SAlBO,CAmBT;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/tabs.d.ts

@@ -71,7 +71,7 @@ type TabsRootProps = React.ComponentProps<typeof Tabs$1.Root> & {
 };
 /** `value`/`defaultValue` + `onValueChange`, `orientation` (horizontal by default), `variant` for the list. */
 declare function TabsRoot({ variant, className, ...props }: TabsRootProps): React.JSX.Element;
-/** The tabs. Name it (`aria-label`) when no heading says what it switches. */
+/** 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 TabsContent({ className, ...props }: React.ComponentProps<typeof Tabs$1.Content>): React.JSX.Element;