@techzyapp/ui-library 1.0.25 → 1.0.27

package/dist/{Stepper-CuqFpamY.js → Stepper-B_e_PGZE.js}

@@ -1,119 +1,119 @@
 import { jsxs as b, jsx as r, Fragment as H } from "react/jsx-runtime";
-import { forwardRef as tt, useCallback as y, useState as nt, useRef as p, useEffect as I } from "react";
-import { clsx as L } from "clsx";
+import { forwardRef as tt, useCallback as I, useState as nt, useRef as w, useEffect as L } from "react";
+import { clsx as x } from "clsx";
 import { a as et } from "./names-r21QPjcU.js";
 import { I as O } from "./Icon-DaTvzLBu.js";
-import { j as ot } from "./ConfigProvider-DR9YMy9U.js";
-const rt = "_root_1xfvk_2", ct = "_list_1xfvk_5", lt = "_horizontal_1xfvk_11", st = "_vertical_1xfvk_24", at = "_sm_1xfvk_29", it = "_md_1xfvk_34", dt = "_lg_1xfvk_39", ft = "_step_1xfvk_47", ut = "_disabled_1xfvk_64", _t = "_main_1xfvk_69", mt = "_indicator_1xfvk_99", vt = "_number_1xfvk_125", ht = "_completed_1xfvk_130", bt = "_active_1xfvk_136", pt = "_error_1xfvk_144", xt = "_text_1xfvk_151", wt = "_label_1xfvk_167", kt = "_description_1xfvk_181", Nt = "_optional_1xfvk_186", gt = "_connector_1xfvk_193", yt = "_done_1xfvk_198", It = "_panel_1xfvk_224", Lt = "_stepContent_1xfvk_228", e = {
+import { j as ot } from "./ConfigProvider-DL9fylMo.js";
+const rt = "_root_p6koa_2", ct = "_list_p6koa_5", at = "_horizontal_p6koa_11", lt = "_vertical_p6koa_24", st = "_sm_p6koa_29", it = "_md_p6koa_34", dt = "_lg_p6koa_39", ut = "_step_p6koa_47", _t = "_disabled_p6koa_64", mt = "_main_p6koa_69", pt = "_indicator_p6koa_99", ft = "_number_p6koa_125", ht = "_completed_p6koa_130", bt = "_active_p6koa_136", wt = "_error_p6koa_144", vt = "_text_p6koa_151", kt = "_label_p6koa_167", Nt = "_description_p6koa_181", gt = "_optional_p6koa_186", yt = "_connector_p6koa_193", It = "_done_p6koa_198", Lt = "_panel_p6koa_224", xt = "_stepContent_p6koa_228", e = {
   root: rt,
   list: ct,
-  horizontal: lt,
-  vertical: st,
-  sm: at,
+  horizontal: at,
+  vertical: lt,
+  sm: st,
   md: it,
   lg: dt,
-  step: ft,
-  disabled: ut,
-  main: _t,
-  indicator: mt,
-  number: vt,
+  step: ut,
+  disabled: _t,
+  main: mt,
+  indicator: pt,
+  number: ft,
   completed: ht,
   active: bt,
-  error: pt,
-  text: xt,
-  label: wt,
-  description: kt,
-  optional: Nt,
-  connector: gt,
-  done: yt,
-  panel: It,
-  stepContent: Lt
+  error: wt,
+  text: vt,
+  label: kt,
+  description: Nt,
+  optional: gt,
+  connector: yt,
+  done: It,
+  panel: Lt,
+  stepContent: xt
 }, Rt = new Set(et), Pt = tt(function({
-  steps: a,
-  activeStep: f,
+  steps: s,
+  activeStep: u,
   defaultStep: R,
   onStepChange: d,
   queryKey: E,
   pushHistory: z = !1,
-  orientation: u = "horizontal",
-  size: x = "md",
+  orientation: _ = "horizontal",
+  size: v = "md",
   color: $ = "primary",
-  onStepClick: _,
+  onStepClick: m,
   "aria-label": T,
   className: U,
   style: W
 }, q) {
   var C;
-  const Q = u === "vertical", F = _ != null, D = ot(), l = E === !0 ? D : E || void 0, m = y(
-    (t) => t != null && Number.isInteger(t) && t >= 0 && t < a.length && !a[t].disabled,
-    [a]
-  ), w = y(() => {
-    if (!l || typeof window > "u") return null;
-    const t = new URLSearchParams(window.location.search).get(l);
+  const Q = _ === "vertical", F = m != null, D = ot(), a = E === !0 ? D : E || void 0, p = I(
+    (t) => t != null && Number.isInteger(t) && t >= 0 && t < s.length && !s[t].disabled,
+    [s]
+  ), k = I(() => {
+    if (!a || typeof window > "u") return null;
+    const t = new URLSearchParams(window.location.search).get(a);
     return t != null && /^\d+$/.test(t) ? Number(t) - 1 : null;
-  }, [l]), G = Math.max(
-    a.findIndex((t) => !t.disabled),
+  }, [a]), G = Math.max(
+    s.findIndex((t) => !t.disabled),
     0
   ), [J, j] = nt(() => {
-    const t = w();
-    return m(t) ? t : m(R) ? R : G;
-  }), A = f !== void 0, o = A ? f : J, k = p(o);
-  k.current = o;
-  const v = p(d);
-  v.current = d;
-  const N = p(!1), M = y(
+    const t = k();
+    return p(t) ? t : p(R) ? R : G;
+  }), A = u !== void 0, o = A ? u : J, N = w(o);
+  N.current = o;
+  const f = w(d);
+  f.current = d;
+  const g = w(!1), M = I(
     (t, n) => {
-      if (!l || typeof window > "u") return;
-      const c = new URLSearchParams(window.location.search), s = String(t + 1);
-      if (c.get(l) === s) return;
-      c.set(l, s);
+      if (!a || typeof window > "u") return;
+      const c = new URLSearchParams(window.location.search), l = String(t + 1);
+      if (c.get(a) === l) return;
+      c.set(a, l);
       const i = `${window.location.pathname}?${c.toString()}${window.location.hash}`;
       window.history[n ? "pushState" : "replaceState"](window.history.state, "", i);
     },
-    [l]
+    [a]
   ), S = (t) => {
-    t !== k.current && (N.current = !0, A || j(t), d == null || d(t));
+    t !== N.current && (g.current = !0, A || j(t), d == null || d(t));
   };
-  I(() => {
-    if (!l || typeof window > "u" || !Number.isInteger(o) || o < 0 || o >= a.length) return;
-    const t = N.current && z;
-    N.current = !1, M(o, t);
-  }, [l, o, z, M, a.length]), I(() => {
-    if (!l || typeof window > "u") return;
+  L(() => {
+    if (!a || typeof window > "u" || !Number.isInteger(o) || o < 0 || o >= s.length) return;
+    const t = g.current && z;
+    g.current = !1, M(o, t);
+  }, [a, o, z, M, s.length]), L(() => {
+    if (!a || typeof window > "u") return;
     const t = () => {
       var c;
-      const n = w();
-      m(n) && n !== k.current && (f === void 0 && j(n), (c = v.current) == null || c.call(v, n));
+      const n = k();
+      p(n) && n !== N.current && (u === void 0 && j(n), (c = f.current) == null || c.call(f, n));
     };
     return window.addEventListener("popstate", t), () => window.removeEventListener("popstate", t);
-  }, [l, w, m, f]);
-  const P = (C = a[o]) == null ? void 0 : C.content, B = p(null);
-  I(() => {
-    if (u === "vertical") return;
+  }, [a, k, p, u]);
+  const P = (C = s[o]) == null ? void 0 : C.content, B = w(null);
+  L(() => {
+    if (_ === "vertical") return;
     const t = B.current, n = t == null ? void 0 : t.children[o];
     if (!t || !n) return;
-    const c = t.getBoundingClientRect(), s = n.getBoundingClientRect(), i = s.left - c.left + t.scrollLeft, h = i + s.width;
+    const c = t.getBoundingClientRect(), l = n.getBoundingClientRect(), i = l.left - c.left + t.scrollLeft, h = i + l.width;
     i < t.scrollLeft ? t.scrollLeft = i : h > t.scrollLeft + t.clientWidth && (t.scrollLeft = h - t.clientWidth);
-  }, [o, u]);
-  const V = (t) => typeof t == "string" && Rt.has(t) ? /* @__PURE__ */ r(O, { name: t, size: x }) : t;
+  }, [o, _]);
+  const V = (t) => typeof t == "string" && Rt.has(t) ? /* @__PURE__ */ r(O, { name: t, size: v }) : t;
   return /* @__PURE__ */ b(
     "div",
     {
       ref: q,
-      className: L(e.root, e[u], e[x], U),
+      className: x(e.root, e[_], e[v], U),
       style: {
         "--tz-btn-rgb": `var(--tz-color-${$}-rgb)`,
         "--tz-btn-on": `var(--tz-color-${$}-contrast, #fff)`,
         ...W
       },
       children: [
-        /* @__PURE__ */ r("ol", { ref: B, "aria-label": T, className: e.list, children: a.map((t, n) => {
-          const c = !!t.error, s = !c && (t.completed || n < o), i = !c && !s && n === o, h = c ? "error" : s ? "completed" : i ? "active" : "upcoming", X = n === a.length - 1, g = V(t.icon), Y = g ?? (s ? /* @__PURE__ */ r(O, { name: "Check", size: x }) : /* @__PURE__ */ r("span", { className: e.number, children: n + 1 })), Z = t.label != null || t.description != null || t.optional != null, K = /* @__PURE__ */ b(H, { children: [
+        /* @__PURE__ */ r("ol", { ref: B, "aria-label": T, className: e.list, children: s.map((t, n) => {
+          const c = !!t.error, l = !c && (t.completed || n < o), i = !c && !l && n === o, h = c ? "error" : l ? "completed" : i ? "active" : "upcoming", X = n === s.length - 1, y = V(t.icon), Y = y ?? (l ? /* @__PURE__ */ r(O, { name: "Check", size: v }) : /* @__PURE__ */ r("span", { className: e.number, children: n + 1 })), Z = t.label != null || t.description != null || t.optional != null, K = /* @__PURE__ */ b(H, { children: [
             /* @__PURE__ */ r(
               "span",
               {
                 className: e.indicator,
-                "aria-hidden": g == null && !s ? void 0 : !0,
+                "aria-hidden": y == null && !l ? void 0 : !0,
                 children: Y
               }
             ),
@@ -126,7 +126,7 @@ const rt = "_root_1xfvk_2", ct = "_list_1xfvk_5", lt = "_horizontal_1xfvk_11", s
           return /* @__PURE__ */ b(
             "li",
             {
-              className: L(e.step, e[h], t.disabled && e.disabled),
+              className: x(e.step, e[h], t.disabled && e.disabled),
               children: [
                 F ? /* @__PURE__ */ r(
                   "button",
@@ -136,7 +136,7 @@ const rt = "_root_1xfvk_2", ct = "_list_1xfvk_5", lt = "_horizontal_1xfvk_11", s
                     disabled: t.disabled,
                     "aria-current": i ? "step" : void 0,
                     onClick: () => {
-                      _ == null || _(n), S(n);
+                      m == null || m(n), S(n);
                     },
                     children: K
                   }
@@ -144,7 +144,7 @@ const rt = "_root_1xfvk_2", ct = "_list_1xfvk_5", lt = "_horizontal_1xfvk_11", s
                 !X && /* @__PURE__ */ r(
                   "span",
                   {
-                    className: L(e.connector, n < o && e.done),
+                    className: x(e.connector, n < o && e.done),
                     "aria-hidden": "true"
                   }
                 ),
@@ -162,4 +162,4 @@ const rt = "_root_1xfvk_2", ct = "_list_1xfvk_5", lt = "_horizontal_1xfvk_11", s
 export {
   Pt as S
 };
-//# sourceMappingURL=Stepper-CuqFpamY.js.map
+//# sourceMappingURL=Stepper-B_e_PGZE.js.map

package/dist/{Stepper-CuqFpamY.js.map → Stepper-B_e_PGZE.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Stepper-CuqFpamY.js","sources":["../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useStepQueryKey, type ThemeColor } from '../../theme'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { Icon } from '../Icon'\nimport styles from './Stepper.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type StepperOrientation = 'horizontal' | 'vertical'\nexport type StepperSize = 'sm' | 'md' | 'lg'\n\nexport interface StepItem {\n  /** Step label. */\n  label?: ReactNode\n  /** Muted secondary line under the label. */\n  description?: ReactNode\n  /** Muted caption under the label (e.g. `\"Optional\"`). */\n  optional?: ReactNode\n  /** Override the step's number indicator with an icon — a known `IconName` or any node. */\n  icon?: IconName | ReactNode\n  /** Force the **completed** look regardless of the active step (e.g. an already-saved step). */\n  completed?: boolean\n  /** Marks the step **invalid** — a red indicator + label (e.g. its form section failed validation). */\n  error?: boolean\n  /** Disables the step — dimmed, (when clickable) not selectable, and skipped by the URL restore. */\n  disabled?: boolean\n  /**\n   * Panel content rendered while this step is active — **below the strip** in horizontal mode, and\n   * **inline under the step** (indented beside the rail) in vertical mode. Optional.\n   */\n  content?: ReactNode\n}\n\nexport interface StepperProps {\n  /** The steps, in order. */\n  steps: StepItem[]\n  /**\n   * Controlled current step index (**0-based**). Steps before it read **completed**, the one at it is\n   * **active**, and those after it are **upcoming**. Omit for uncontrolled (see `defaultStep`).\n   */\n  activeStep?: number\n  /**\n   * Initial step index (uncontrolled). Falls back to the URL query (when URL sync is active and the\n   * param is present) and otherwise the first enabled step.\n   */\n  defaultStep?: number\n  /**\n   * Fires with the next step index whenever the stepper itself changes the step — a clicked step head,\n   * or a Back/Forward `popstate` restore. In controlled mode apply it to your `activeStep` state.\n   */\n  onStepChange?: (index: number) => void\n  /**\n   * **Opt-in** URL sync — **off by default** (the URL is never touched when omitted). Pass the bare\n   * prop (**`queryKey`** / `true`) to sync the active step under the configured `keys.stepQueryKey`\n   * (else `'step'`), or a **string** for a custom param name. The URL value is **1-based**\n   * (`?step=2` = index 1) and a page refresh restores it. Two synced steppers on one page need\n   * distinct keys.\n   */\n  queryKey?: boolean | string\n  /**\n   * Push a history entry on each step change, so the browser **Back** button returns to the previous\n   * step. Defaults to `false` — step changes **replace** the URL, so Back leaves the page instead of\n   * stepping back through the wizard (and `popstate` still restores a step when one is in the query).\n   */\n  pushHistory?: boolean\n  /**\n   * Layout direction. `horizontal` (default) centers each label **under** its circle and **scrolls\n   * sideways** when the steps don't fit (so it fits a phone as-is); `vertical` stacks the steps along\n   * a rail connector.\n   */\n  orientation?: StepperOrientation\n  /** Preset size. Defaults to `'md'`. */\n  size?: StepperSize\n  /** Theme palette token tinting the active / completed steps. Defaults to `'primary'`. */\n  color?: ThemeColor\n  /**\n   * Makes steps **clickable** — each step head becomes a `<button>` that fires this with the step index\n   * (a `disabled` step never fires); an uncontrolled stepper also selects the clicked step itself. Omit\n   * for a display-only progress indicator.\n   */\n  onStepClick?: (index: number) => void\n  /** Accessible label for the stepper list. */\n  'aria-label'?: string\n  className?: string\n  style?: CSSProperties\n}\n\n/**\n * A step progress indicator. Data-driven via `steps` (each: `label`, `description`, `optional`, `icon`,\n * `completed`, `error`, `disabled`, `content`) — controlled (`activeStep`, 0-based) or uncontrolled\n * (`defaultStep`). **Opt-in URL sync:** pass **`queryKey`** (bare/`true` = the configured\n * `keys.stepQueryKey`, else `'step'`; or a custom string) and the active step syncs to that query param\n * (**1-based** — `?step=2`) so a refresh restores it; with no `queryKey` the URL is never touched.\n * Synced step changes **replace** the URL (Back doesn't walk the wizard); pass **`pushHistory`** to\n * step back with Back.\n * Horizontal (labels centered under the circles) or `vertical` (a rail); when the horizontal steps\n * don't fit, the strip **scrolls sideways** (scrollbar hidden, the active step kept in view) — so it\n * fits a phone as-is. The active step's **`content`** renders below the strip (horizontal) or inline\n * under the step (vertical). Pass **`onStepClick`** to make the steps navigable. Tinted by `color` via\n * the shared `--tz-btn-rgb` pattern; the list is an `<ol>` with `aria-current=\"step\"` on the active step.\n */\nexport const Stepper = forwardRef<HTMLDivElement, StepperProps>(function Stepper(\n  {\n    steps,\n    activeStep,\n    defaultStep,\n    onStepChange,\n    queryKey,\n    pushHistory = false,\n    orientation = 'horizontal',\n    size = 'md',\n    color = 'primary',\n    onStepClick,\n    'aria-label': ariaLabel,\n    className,\n    style,\n  },\n  ref,\n) {\n  const vertical = orientation === 'vertical'\n  const clickable = onStepClick != null\n\n  // resolve the URL-sync key — OPT-IN: omitted/false = no sync (URL untouched); the bare/`true` form\n  // uses the configured default (`keys.stepQueryKey`, else 'step'); a string is a custom param name\n  const stepQueryKey = useStepQueryKey()\n  const syncKey = queryKey === true ? stepQueryKey : queryKey || undefined\n\n  const isSelectable = useCallback(\n    (i: number | null | undefined): i is number =>\n      i != null && Number.isInteger(i) && i >= 0 && i < steps.length && !steps[i].disabled,\n    [steps],\n  )\n\n  // the URL carries the step 1-based (`?step=2` = index 1) — human-friendly, like Table's page param\n  const readQuery = useCallback((): number | null => {\n    if (!syncKey || typeof window === 'undefined') return null\n    const raw = new URLSearchParams(window.location.search).get(syncKey)\n    return raw != null && /^\\d+$/.test(raw) ? Number(raw) - 1 : null\n  }, [syncKey])\n\n  const firstEnabled = Math.max(\n    steps.findIndex((s) => !s.disabled),\n    0,\n  )\n\n  const [internal, setInternal] = useState<number>(() => {\n    const q = readQuery()\n    if (isSelectable(q)) return q\n    return isSelectable(defaultStep) ? defaultStep : firstEnabled\n  })\n  const isControlled = activeStep !== undefined\n  // controlled mode renders the given index verbatim (even past the last step — the \"all completed\"\n  // pattern); only the URL/popstate restores are gated by `isSelectable`\n  const active = isControlled ? activeStep : internal\n\n  // keep the latest active / onStepChange / push-intent for the stable effects + popstate listener\n  const activeRef = useRef(active)\n  activeRef.current = active\n  const onStepChangeRef = useRef(onStepChange)\n  onStepChangeRef.current = onStepChange\n  const pushIntent = useRef(false)\n\n  const writeQuery = useCallback(\n    (next: number, push: boolean) => {\n      if (!syncKey || typeof window === 'undefined') return\n      const params = new URLSearchParams(window.location.search)\n      const value = String(next + 1)\n      if (params.get(syncKey) === value) return\n      params.set(syncKey, value)\n      const url = `${window.location.pathname}?${params.toString()}${window.location.hash}`\n      window.history[push ? 'pushState' : 'replaceState'](window.history.state, '', url)\n    },\n    [syncKey],\n  )\n\n  const select = (next: number) => {\n    if (next === activeRef.current) return\n    pushIntent.current = true\n    if (!isControlled) setInternal(next)\n    onStepChange?.(next)\n  }\n\n  // mirror the active step into the URL whenever it changes (and on mount = canonicalize). A\n  // user-driven change `push`es when `pushHistory`; programmatic / popstate changes just `replace`.\n  useEffect(() => {\n    if (!syncKey || typeof window === 'undefined') return\n    // an out-of-range active (e.g. `steps.length` = \"all done\") isn't a step — leave the URL alone\n    if (!Number.isInteger(active) || active < 0 || active >= steps.length) return\n    const push = pushIntent.current && pushHistory\n    pushIntent.current = false\n    writeQuery(active, push)\n  }, [syncKey, active, pushHistory, writeQuery, steps.length])\n\n  // Back/Forward → restore the step from the query\n  useEffect(() => {\n    if (!syncKey || typeof window === 'undefined') return\n    const onPopState = () => {\n      const q = readQuery()\n      if (isSelectable(q) && q !== activeRef.current) {\n        if (activeStep === undefined) setInternal(q)\n        onStepChangeRef.current?.(q)\n      }\n    }\n    window.addEventListener('popstate', onPopState)\n    return () => window.removeEventListener('popstate', onPopState)\n  }, [syncKey, readQuery, isSelectable, activeStep])\n\n  const activeContent = steps[active]?.content\n\n  // when the horizontal strip overflows (scrolls sideways), keep the active step in view — by moving\n  // the strip's own scrollLeft only. (scrollIntoView would also scroll every scrollable ancestor —\n  // i.e. the page itself — yanking the viewport down to the stepper on mount.)\n  const listRef = useRef<HTMLOListElement | null>(null)\n  useEffect(() => {\n    if (orientation === 'vertical') return // the vertical rail never scrolls sideways\n    const list = listRef.current\n    const el = list?.children[active] as HTMLElement | undefined\n    if (!list || !el) return\n    const listRect = list.getBoundingClientRect()\n    const elRect = el.getBoundingClientRect()\n    const left = elRect.left - listRect.left + list.scrollLeft\n    const right = left + elRect.width\n    if (left < list.scrollLeft) list.scrollLeft = left\n    else if (right > list.scrollLeft + list.clientWidth) list.scrollLeft = right - list.clientWidth\n  }, [active, orientation])\n\n  const renderIcon = (icon: StepItem['icon']) =>\n    typeof icon === 'string' && ICON_NAME_SET.has(icon) ? (\n      <Icon name={icon as IconName} size={size} />\n    ) : (\n      icon\n    )\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(styles.root, styles[orientation], styles[size], className)}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n    >\n      <ol ref={listRef} aria-label={ariaLabel} className={styles.list}>\n        {steps.map((step, i) => {\n          const isError = !!step.error\n          const isCompleted = !isError && (step.completed || i < active)\n          const isActive = !isError && !isCompleted && i === active\n          const state = isError\n            ? 'error'\n            : isCompleted\n              ? 'completed'\n              : isActive\n                ? 'active'\n                : 'upcoming'\n          const isLast = i === steps.length - 1\n\n          const icon = renderIcon(step.icon)\n          const indicator =\n            icon != null ? (\n              icon\n            ) : isCompleted ? (\n              <Icon name=\"Check\" size={size} />\n            ) : (\n              <span className={styles.number}>{i + 1}</span>\n            )\n\n          const hasText = step.label != null || step.description != null || step.optional != null\n          const head = (\n            <>\n              <span\n                className={styles.indicator}\n                aria-hidden={icon == null && !isCompleted ? undefined : true}\n              >\n                {indicator}\n              </span>\n              {hasText && (\n                <span className={styles.text}>\n                  {step.label != null && <span className={styles.label}>{step.label}</span>}\n                  {step.description != null && (\n                    <span className={styles.description}>{step.description}</span>\n                  )}\n                  {step.optional != null && (\n                    <span className={styles.optional}>{step.optional}</span>\n                  )}\n                </span>\n              )}\n            </>\n          )\n\n          return (\n            <li\n              key={i}\n              className={clsx(styles.step, styles[state], step.disabled && styles.disabled)}\n            >\n              {clickable ? (\n                <button\n                  type=\"button\"\n                  className={styles.main}\n                  disabled={step.disabled}\n                  aria-current={isActive ? 'step' : undefined}\n                  onClick={() => {\n                    onStepClick?.(i)\n                    select(i)\n                  }}\n                >\n                  {head}\n                </button>\n              ) : (\n                <div className={styles.main} aria-current={isActive ? 'step' : undefined}>\n                  {head}\n                </div>\n              )}\n              {!isLast && (\n                <span\n                  className={clsx(styles.connector, i < active && styles.done)}\n                  aria-hidden=\"true\"\n                />\n              )}\n              {/* vertical: the active step's content sits inline, indented beside the rail */}\n              {vertical && i === active && step.content != null && (\n                <div className={styles.stepContent}>{step.content}</div>\n              )}\n            </li>\n          )\n        })}\n      </ol>\n      {/* horizontal: the active step's content renders as a panel below the strip */}\n      {!vertical && activeContent != null && <div className={styles.panel}>{activeContent}</div>}\n    </div>\n  )\n})\n"],"names":["ICON_NAME_SET","ICON_NAMES","Stepper","forwardRef","steps","activeStep","defaultStep","onStepChange","queryKey","pushHistory","orientation","size","color","onStepClick","ariaLabel","className","style","ref","vertical","clickable","stepQueryKey","useStepQueryKey","syncKey","isSelectable","useCallback","i","readQuery","raw","firstEnabled","s","internal","setInternal","useState","q","isControlled","active","activeRef","useRef","onStepChangeRef","pushIntent","writeQuery","next","push","params","value","url","select","useEffect","onPopState","_a","activeContent","listRef","list","el","listRect","elRect","left","right","renderIcon","icon","jsx","Icon","jsxs","clsx","styles","step","isError","isCompleted","isActive","state","isLast","indicator","hasText","head","Fragment"],"mappings":"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"}
+{"version":3,"file":"Stepper-B_e_PGZE.js","sources":["../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useStepQueryKey, type ThemeColor } from '../../theme'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { Icon } from '../Icon'\nimport styles from './Stepper.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type StepperOrientation = 'horizontal' | 'vertical'\nexport type StepperSize = 'sm' | 'md' | 'lg'\n\nexport interface StepItem {\n  /** Step label. */\n  label?: ReactNode\n  /** Muted secondary line under the label. */\n  description?: ReactNode\n  /** Muted caption under the label (e.g. `\"Optional\"`). */\n  optional?: ReactNode\n  /** Override the step's number indicator with an icon — a known `IconName` or any node. */\n  icon?: IconName | ReactNode\n  /** Force the **completed** look regardless of the active step (e.g. an already-saved step). */\n  completed?: boolean\n  /** Marks the step **invalid** — a red indicator + label (e.g. its form section failed validation). */\n  error?: boolean\n  /** Disables the step — dimmed, (when clickable) not selectable, and skipped by the URL restore. */\n  disabled?: boolean\n  /**\n   * Panel content rendered while this step is active — **below the strip** in horizontal mode, and\n   * **inline under the step** (indented beside the rail) in vertical mode. Optional.\n   */\n  content?: ReactNode\n}\n\nexport interface StepperProps {\n  /** The steps, in order. */\n  steps: StepItem[]\n  /**\n   * Controlled current step index (**0-based**). Steps before it read **completed**, the one at it is\n   * **active**, and those after it are **upcoming**. Omit for uncontrolled (see `defaultStep`).\n   */\n  activeStep?: number\n  /**\n   * Initial step index (uncontrolled). Falls back to the URL query (when URL sync is active and the\n   * param is present) and otherwise the first enabled step.\n   */\n  defaultStep?: number\n  /**\n   * Fires with the next step index whenever the stepper itself changes the step — a clicked step head,\n   * or a Back/Forward `popstate` restore. In controlled mode apply it to your `activeStep` state.\n   */\n  onStepChange?: (index: number) => void\n  /**\n   * **Opt-in** URL sync — **off by default** (the URL is never touched when omitted). Pass the bare\n   * prop (**`queryKey`** / `true`) to sync the active step under the configured `keys.stepQueryKey`\n   * (else `'step'`), or a **string** for a custom param name. The URL value is **1-based**\n   * (`?step=2` = index 1) and a page refresh restores it. Two synced steppers on one page need\n   * distinct keys.\n   */\n  queryKey?: boolean | string\n  /**\n   * Push a history entry on each step change, so the browser **Back** button returns to the previous\n   * step. Defaults to `false` — step changes **replace** the URL, so Back leaves the page instead of\n   * stepping back through the wizard (and `popstate` still restores a step when one is in the query).\n   */\n  pushHistory?: boolean\n  /**\n   * Layout direction. `horizontal` (default) centers each label **under** its circle and **scrolls\n   * sideways** when the steps don't fit (so it fits a phone as-is); `vertical` stacks the steps along\n   * a rail connector.\n   */\n  orientation?: StepperOrientation\n  /** Preset size. Defaults to `'md'`. */\n  size?: StepperSize\n  /** Theme palette token tinting the active / completed steps. Defaults to `'primary'`. */\n  color?: ThemeColor\n  /**\n   * Makes steps **clickable** — each step head becomes a `<button>` that fires this with the step index\n   * (a `disabled` step never fires); an uncontrolled stepper also selects the clicked step itself. Omit\n   * for a display-only progress indicator.\n   */\n  onStepClick?: (index: number) => void\n  /** Accessible label for the stepper list. */\n  'aria-label'?: string\n  className?: string\n  style?: CSSProperties\n}\n\n/**\n * A step progress indicator. Data-driven via `steps` (each: `label`, `description`, `optional`, `icon`,\n * `completed`, `error`, `disabled`, `content`) — controlled (`activeStep`, 0-based) or uncontrolled\n * (`defaultStep`). **Opt-in URL sync:** pass **`queryKey`** (bare/`true` = the configured\n * `keys.stepQueryKey`, else `'step'`; or a custom string) and the active step syncs to that query param\n * (**1-based** — `?step=2`) so a refresh restores it; with no `queryKey` the URL is never touched.\n * Synced step changes **replace** the URL (Back doesn't walk the wizard); pass **`pushHistory`** to\n * step back with Back.\n * Horizontal (labels centered under the circles) or `vertical` (a rail); when the horizontal steps\n * don't fit, the strip **scrolls sideways** (scrollbar hidden, the active step kept in view) — so it\n * fits a phone as-is. The active step's **`content`** renders below the strip (horizontal) or inline\n * under the step (vertical). Pass **`onStepClick`** to make the steps navigable. Tinted by `color` via\n * the shared `--tz-btn-rgb` pattern; the list is an `<ol>` with `aria-current=\"step\"` on the active step.\n */\nexport const Stepper = forwardRef<HTMLDivElement, StepperProps>(function Stepper(\n  {\n    steps,\n    activeStep,\n    defaultStep,\n    onStepChange,\n    queryKey,\n    pushHistory = false,\n    orientation = 'horizontal',\n    size = 'md',\n    color = 'primary',\n    onStepClick,\n    'aria-label': ariaLabel,\n    className,\n    style,\n  },\n  ref,\n) {\n  const vertical = orientation === 'vertical'\n  const clickable = onStepClick != null\n\n  // resolve the URL-sync key — OPT-IN: omitted/false = no sync (URL untouched); the bare/`true` form\n  // uses the configured default (`keys.stepQueryKey`, else 'step'); a string is a custom param name\n  const stepQueryKey = useStepQueryKey()\n  const syncKey = queryKey === true ? stepQueryKey : queryKey || undefined\n\n  const isSelectable = useCallback(\n    (i: number | null | undefined): i is number =>\n      i != null && Number.isInteger(i) && i >= 0 && i < steps.length && !steps[i].disabled,\n    [steps],\n  )\n\n  // the URL carries the step 1-based (`?step=2` = index 1) — human-friendly, like Table's page param\n  const readQuery = useCallback((): number | null => {\n    if (!syncKey || typeof window === 'undefined') return null\n    const raw = new URLSearchParams(window.location.search).get(syncKey)\n    return raw != null && /^\\d+$/.test(raw) ? Number(raw) - 1 : null\n  }, [syncKey])\n\n  const firstEnabled = Math.max(\n    steps.findIndex((s) => !s.disabled),\n    0,\n  )\n\n  const [internal, setInternal] = useState<number>(() => {\n    const q = readQuery()\n    if (isSelectable(q)) return q\n    return isSelectable(defaultStep) ? defaultStep : firstEnabled\n  })\n  const isControlled = activeStep !== undefined\n  // controlled mode renders the given index verbatim (even past the last step — the \"all completed\"\n  // pattern); only the URL/popstate restores are gated by `isSelectable`\n  const active = isControlled ? activeStep : internal\n\n  // keep the latest active / onStepChange / push-intent for the stable effects + popstate listener\n  const activeRef = useRef(active)\n  activeRef.current = active\n  const onStepChangeRef = useRef(onStepChange)\n  onStepChangeRef.current = onStepChange\n  const pushIntent = useRef(false)\n\n  const writeQuery = useCallback(\n    (next: number, push: boolean) => {\n      if (!syncKey || typeof window === 'undefined') return\n      const params = new URLSearchParams(window.location.search)\n      const value = String(next + 1)\n      if (params.get(syncKey) === value) return\n      params.set(syncKey, value)\n      const url = `${window.location.pathname}?${params.toString()}${window.location.hash}`\n      window.history[push ? 'pushState' : 'replaceState'](window.history.state, '', url)\n    },\n    [syncKey],\n  )\n\n  const select = (next: number) => {\n    if (next === activeRef.current) return\n    pushIntent.current = true\n    if (!isControlled) setInternal(next)\n    onStepChange?.(next)\n  }\n\n  // mirror the active step into the URL whenever it changes (and on mount = canonicalize). A\n  // user-driven change `push`es when `pushHistory`; programmatic / popstate changes just `replace`.\n  useEffect(() => {\n    if (!syncKey || typeof window === 'undefined') return\n    // an out-of-range active (e.g. `steps.length` = \"all done\") isn't a step — leave the URL alone\n    if (!Number.isInteger(active) || active < 0 || active >= steps.length) return\n    const push = pushIntent.current && pushHistory\n    pushIntent.current = false\n    writeQuery(active, push)\n  }, [syncKey, active, pushHistory, writeQuery, steps.length])\n\n  // Back/Forward → restore the step from the query\n  useEffect(() => {\n    if (!syncKey || typeof window === 'undefined') return\n    const onPopState = () => {\n      const q = readQuery()\n      if (isSelectable(q) && q !== activeRef.current) {\n        if (activeStep === undefined) setInternal(q)\n        onStepChangeRef.current?.(q)\n      }\n    }\n    window.addEventListener('popstate', onPopState)\n    return () => window.removeEventListener('popstate', onPopState)\n  }, [syncKey, readQuery, isSelectable, activeStep])\n\n  const activeContent = steps[active]?.content\n\n  // when the horizontal strip overflows (scrolls sideways), keep the active step in view — by moving\n  // the strip's own scrollLeft only. (scrollIntoView would also scroll every scrollable ancestor —\n  // i.e. the page itself — yanking the viewport down to the stepper on mount.)\n  const listRef = useRef<HTMLOListElement | null>(null)\n  useEffect(() => {\n    if (orientation === 'vertical') return // the vertical rail never scrolls sideways\n    const list = listRef.current\n    const el = list?.children[active] as HTMLElement | undefined\n    if (!list || !el) return\n    const listRect = list.getBoundingClientRect()\n    const elRect = el.getBoundingClientRect()\n    const left = elRect.left - listRect.left + list.scrollLeft\n    const right = left + elRect.width\n    if (left < list.scrollLeft) list.scrollLeft = left\n    else if (right > list.scrollLeft + list.clientWidth) list.scrollLeft = right - list.clientWidth\n  }, [active, orientation])\n\n  const renderIcon = (icon: StepItem['icon']) =>\n    typeof icon === 'string' && ICON_NAME_SET.has(icon) ? (\n      <Icon name={icon as IconName} size={size} />\n    ) : (\n      icon\n    )\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(styles.root, styles[orientation], styles[size], className)}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n    >\n      <ol ref={listRef} aria-label={ariaLabel} className={styles.list}>\n        {steps.map((step, i) => {\n          const isError = !!step.error\n          const isCompleted = !isError && (step.completed || i < active)\n          const isActive = !isError && !isCompleted && i === active\n          const state = isError\n            ? 'error'\n            : isCompleted\n              ? 'completed'\n              : isActive\n                ? 'active'\n                : 'upcoming'\n          const isLast = i === steps.length - 1\n\n          const icon = renderIcon(step.icon)\n          const indicator =\n            icon != null ? (\n              icon\n            ) : isCompleted ? (\n              <Icon name=\"Check\" size={size} />\n            ) : (\n              <span className={styles.number}>{i + 1}</span>\n            )\n\n          const hasText = step.label != null || step.description != null || step.optional != null\n          const head = (\n            <>\n              <span\n                className={styles.indicator}\n                aria-hidden={icon == null && !isCompleted ? undefined : true}\n              >\n                {indicator}\n              </span>\n              {hasText && (\n                <span className={styles.text}>\n                  {step.label != null && <span className={styles.label}>{step.label}</span>}\n                  {step.description != null && (\n                    <span className={styles.description}>{step.description}</span>\n                  )}\n                  {step.optional != null && (\n                    <span className={styles.optional}>{step.optional}</span>\n                  )}\n                </span>\n              )}\n            </>\n          )\n\n          return (\n            <li\n              key={i}\n              className={clsx(styles.step, styles[state], step.disabled && styles.disabled)}\n            >\n              {clickable ? (\n                <button\n                  type=\"button\"\n                  className={styles.main}\n                  disabled={step.disabled}\n                  aria-current={isActive ? 'step' : undefined}\n                  onClick={() => {\n                    onStepClick?.(i)\n                    select(i)\n                  }}\n                >\n                  {head}\n                </button>\n              ) : (\n                <div className={styles.main} aria-current={isActive ? 'step' : undefined}>\n                  {head}\n                </div>\n              )}\n              {!isLast && (\n                <span\n                  className={clsx(styles.connector, i < active && styles.done)}\n                  aria-hidden=\"true\"\n                />\n              )}\n              {/* vertical: the active step's content sits inline, indented beside the rail */}\n              {vertical && i === active && step.content != null && (\n                <div className={styles.stepContent}>{step.content}</div>\n              )}\n            </li>\n          )\n        })}\n      </ol>\n      {/* horizontal: the active step's content renders as a panel below the strip */}\n      {!vertical && activeContent != null && <div className={styles.panel}>{activeContent}</div>}\n    </div>\n  )\n})\n"],"names":["ICON_NAME_SET","ICON_NAMES","Stepper","forwardRef","steps","activeStep","defaultStep","onStepChange","queryKey","pushHistory","orientation","size","color","onStepClick","ariaLabel","className","style","ref","vertical","clickable","stepQueryKey","useStepQueryKey","syncKey","isSelectable","useCallback","i","readQuery","raw","firstEnabled","s","internal","setInternal","useState","q","isControlled","active","activeRef","useRef","onStepChangeRef","pushIntent","writeQuery","next","push","params","value","url","select","useEffect","onPopState","_a","activeContent","listRef","list","el","listRect","elRect","left","right","renderIcon","icon","jsx","Icon","jsxs","clsx","styles","step","isError","isCompleted","isActive","state","isLast","indicator","hasText","head","Fragment"],"mappings":"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"}

package/dist/Stepper-BjkkWawQ.cjs

@@ -0,0 +1,2 @@
+"use strict";const o=require("react/jsx-runtime"),c=require("react"),j=require("clsx"),X=require("./names-BJnFU_5m.cjs"),A=require("./Icon-BVULqOJD.cjs"),Y=require("./ConfigProvider-BicoaBLj.cjs"),Z="_root_p6koa_2",H="_list_p6koa_5",ee="_horizontal_p6koa_11",ne="_vertical_p6koa_24",te="_sm_p6koa_29",oe="_md_p6koa_34",se="_lg_p6koa_39",re="_step_p6koa_47",ce="_disabled_p6koa_64",le="_main_p6koa_69",ae="_indicator_p6koa_99",ie="_number_p6koa_125",de="_completed_p6koa_130",ue="_active_p6koa_136",_e="_error_p6koa_144",fe="_text_p6koa_151",me="_label_p6koa_167",pe="_description_p6koa_181",he="_optional_p6koa_186",be="_connector_p6koa_193",we="_done_p6koa_198",ve="_panel_p6koa_224",xe="_stepContent_p6koa_228",t={root:Z,list:H,horizontal:ee,vertical:ne,sm:te,md:oe,lg:se,step:re,disabled:ce,main:le,indicator:ae,number:ie,completed:de,active:ue,error:_e,text:fe,label:me,description:pe,optional:he,connector:be,done:we,panel:ve,stepContent:xe},ke=new Set(X.ICON_NAMES),Ne=c.forwardRef(function({steps:i,activeStep:_,defaultStep:g,onStepChange:u,queryKey:y,pushHistory:R=!1,orientation:f="horizontal",size:w="md",color:I="primary",onStepClick:m,"aria-label":M,className:B,style:K},O){var P;const E=f==="vertical",T=m!=null,U=Y.useStepQueryKey(),l=y===!0?U:y||void 0,p=c.useCallback(e=>e!=null&&Number.isInteger(e)&&e>=0&&e<i.length&&!i[e].disabled,[i]),v=c.useCallback(()=>{if(!l||typeof window>"u")return null;const e=new URLSearchParams(window.location.search).get(l);return e!=null&&/^\d+$/.test(e)?Number(e)-1:null},[l]),W=Math.max(i.findIndex(e=>!e.disabled),0),[F,L]=c.useState(()=>{const e=v();return p(e)?e:p(g)?g:W}),q=_!==void 0,s=q?_:F,x=c.useRef(s);x.current=s;const h=c.useRef(u);h.current=u;const k=c.useRef(!1),z=c.useCallback((e,n)=>{if(!l||typeof window>"u")return;const r=new URLSearchParams(window.location.search),a=String(e+1);if(r.get(l)===a)return;r.set(l,a);const d=`${window.location.pathname}?${r.toString()}${window.location.hash}`;window.history[n?"pushState":"replaceState"](window.history.state,"",d)},[l]),D=e=>{e!==x.current&&(k.current=!0,q||L(e),u==null||u(e))};c.useEffect(()=>{if(!l||typeof window>"u"||!Number.isInteger(s)||s<0||s>=i.length)return;const e=k.current&&R;k.current=!1,z(s,e)},[l,s,R,z,i.length]),c.useEffect(()=>{if(!l||typeof window>"u")return;const e=()=>{var r;const n=v();p(n)&&n!==x.current&&(_===void 0&&L(n),(r=h.current)==null||r.call(h,n))};return window.addEventListener("popstate",e),()=>window.removeEventListener("popstate",e)},[l,v,p,_]);const $=(P=i[s])==null?void 0:P.content,C=c.useRef(null);c.useEffect(()=>{if(f==="vertical")return;const e=C.current,n=e==null?void 0:e.children[s];if(!e||!n)return;const r=e.getBoundingClientRect(),a=n.getBoundingClientRect(),d=a.left-r.left+e.scrollLeft,b=d+a.width;d<e.scrollLeft?e.scrollLeft=d:b>e.scrollLeft+e.clientWidth&&(e.scrollLeft=b-e.clientWidth)},[s,f]);const G=e=>typeof e=="string"&&ke.has(e)?o.jsx(A.Icon,{name:e,size:w}):e;return o.jsxs("div",{ref:O,className:j.clsx(t.root,t[f],t[w],B),style:{"--tz-btn-rgb":`var(--tz-color-${I}-rgb)`,"--tz-btn-on":`var(--tz-color-${I}-contrast, #fff)`,...K},children:[o.jsx("ol",{ref:C,"aria-label":M,className:t.list,children:i.map((e,n)=>{const r=!!e.error,a=!r&&(e.completed||n<s),d=!r&&!a&&n===s,b=r?"error":a?"completed":d?"active":"upcoming",J=n===i.length-1,N=G(e.icon),S=N??(a?o.jsx(A.Icon,{name:"Check",size:w}):o.jsx("span",{className:t.number,children:n+1})),V=e.label!=null||e.description!=null||e.optional!=null,Q=o.jsxs(o.Fragment,{children:[o.jsx("span",{className:t.indicator,"aria-hidden":N==null&&!a?void 0:!0,children:S}),V&&o.jsxs("span",{className:t.text,children:[e.label!=null&&o.jsx("span",{className:t.label,children:e.label}),e.description!=null&&o.jsx("span",{className:t.description,children:e.description}),e.optional!=null&&o.jsx("span",{className:t.optional,children:e.optional})]})]});return o.jsxs("li",{className:j.clsx(t.step,t[b],e.disabled&&t.disabled),children:[T?o.jsx("button",{type:"button",className:t.main,disabled:e.disabled,"aria-current":d?"step":void 0,onClick:()=>{m==null||m(n),D(n)},children:Q}):o.jsx("div",{className:t.main,"aria-current":d?"step":void 0,children:Q}),!J&&o.jsx("span",{className:j.clsx(t.connector,n<s&&t.done),"aria-hidden":"true"}),E&&n===s&&e.content!=null&&o.jsx("div",{className:t.stepContent,children:e.content})]},n)})}),!E&&$!=null&&o.jsx("div",{className:t.panel,children:$})]})});exports.Stepper=Ne;
+//# sourceMappingURL=Stepper-BjkkWawQ.cjs.map

package/dist/{Stepper-B1z_u650.cjs.map → Stepper-BjkkWawQ.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Stepper-B1z_u650.cjs","sources":["../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useStepQueryKey, type ThemeColor } from '../../theme'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { Icon } from '../Icon'\nimport styles from './Stepper.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type StepperOrientation = 'horizontal' | 'vertical'\nexport type StepperSize = 'sm' | 'md' | 'lg'\n\nexport interface StepItem {\n  /** Step label. */\n  label?: ReactNode\n  /** Muted secondary line under the label. */\n  description?: ReactNode\n  /** Muted caption under the label (e.g. `\"Optional\"`). */\n  optional?: ReactNode\n  /** Override the step's number indicator with an icon — a known `IconName` or any node. */\n  icon?: IconName | ReactNode\n  /** Force the **completed** look regardless of the active step (e.g. an already-saved step). */\n  completed?: boolean\n  /** Marks the step **invalid** — a red indicator + label (e.g. its form section failed validation). */\n  error?: boolean\n  /** Disables the step — dimmed, (when clickable) not selectable, and skipped by the URL restore. */\n  disabled?: boolean\n  /**\n   * Panel content rendered while this step is active — **below the strip** in horizontal mode, and\n   * **inline under the step** (indented beside the rail) in vertical mode. Optional.\n   */\n  content?: ReactNode\n}\n\nexport interface StepperProps {\n  /** The steps, in order. */\n  steps: StepItem[]\n  /**\n   * Controlled current step index (**0-based**). Steps before it read **completed**, the one at it is\n   * **active**, and those after it are **upcoming**. Omit for uncontrolled (see `defaultStep`).\n   */\n  activeStep?: number\n  /**\n   * Initial step index (uncontrolled). Falls back to the URL query (when URL sync is active and the\n   * param is present) and otherwise the first enabled step.\n   */\n  defaultStep?: number\n  /**\n   * Fires with the next step index whenever the stepper itself changes the step — a clicked step head,\n   * or a Back/Forward `popstate` restore. In controlled mode apply it to your `activeStep` state.\n   */\n  onStepChange?: (index: number) => void\n  /**\n   * **Opt-in** URL sync — **off by default** (the URL is never touched when omitted). Pass the bare\n   * prop (**`queryKey`** / `true`) to sync the active step under the configured `keys.stepQueryKey`\n   * (else `'step'`), or a **string** for a custom param name. The URL value is **1-based**\n   * (`?step=2` = index 1) and a page refresh restores it. Two synced steppers on one page need\n   * distinct keys.\n   */\n  queryKey?: boolean | string\n  /**\n   * Push a history entry on each step change, so the browser **Back** button returns to the previous\n   * step. Defaults to `false` — step changes **replace** the URL, so Back leaves the page instead of\n   * stepping back through the wizard (and `popstate` still restores a step when one is in the query).\n   */\n  pushHistory?: boolean\n  /**\n   * Layout direction. `horizontal` (default) centers each label **under** its circle and **scrolls\n   * sideways** when the steps don't fit (so it fits a phone as-is); `vertical` stacks the steps along\n   * a rail connector.\n   */\n  orientation?: StepperOrientation\n  /** Preset size. Defaults to `'md'`. */\n  size?: StepperSize\n  /** Theme palette token tinting the active / completed steps. Defaults to `'primary'`. */\n  color?: ThemeColor\n  /**\n   * Makes steps **clickable** — each step head becomes a `<button>` that fires this with the step index\n   * (a `disabled` step never fires); an uncontrolled stepper also selects the clicked step itself. Omit\n   * for a display-only progress indicator.\n   */\n  onStepClick?: (index: number) => void\n  /** Accessible label for the stepper list. */\n  'aria-label'?: string\n  className?: string\n  style?: CSSProperties\n}\n\n/**\n * A step progress indicator. Data-driven via `steps` (each: `label`, `description`, `optional`, `icon`,\n * `completed`, `error`, `disabled`, `content`) — controlled (`activeStep`, 0-based) or uncontrolled\n * (`defaultStep`). **Opt-in URL sync:** pass **`queryKey`** (bare/`true` = the configured\n * `keys.stepQueryKey`, else `'step'`; or a custom string) and the active step syncs to that query param\n * (**1-based** — `?step=2`) so a refresh restores it; with no `queryKey` the URL is never touched.\n * Synced step changes **replace** the URL (Back doesn't walk the wizard); pass **`pushHistory`** to\n * step back with Back.\n * Horizontal (labels centered under the circles) or `vertical` (a rail); when the horizontal steps\n * don't fit, the strip **scrolls sideways** (scrollbar hidden, the active step kept in view) — so it\n * fits a phone as-is. The active step's **`content`** renders below the strip (horizontal) or inline\n * under the step (vertical). Pass **`onStepClick`** to make the steps navigable. Tinted by `color` via\n * the shared `--tz-btn-rgb` pattern; the list is an `<ol>` with `aria-current=\"step\"` on the active step.\n */\nexport const Stepper = forwardRef<HTMLDivElement, StepperProps>(function Stepper(\n  {\n    steps,\n    activeStep,\n    defaultStep,\n    onStepChange,\n    queryKey,\n    pushHistory = false,\n    orientation = 'horizontal',\n    size = 'md',\n    color = 'primary',\n    onStepClick,\n    'aria-label': ariaLabel,\n    className,\n    style,\n  },\n  ref,\n) {\n  const vertical = orientation === 'vertical'\n  const clickable = onStepClick != null\n\n  // resolve the URL-sync key — OPT-IN: omitted/false = no sync (URL untouched); the bare/`true` form\n  // uses the configured default (`keys.stepQueryKey`, else 'step'); a string is a custom param name\n  const stepQueryKey = useStepQueryKey()\n  const syncKey = queryKey === true ? stepQueryKey : queryKey || undefined\n\n  const isSelectable = useCallback(\n    (i: number | null | undefined): i is number =>\n      i != null && Number.isInteger(i) && i >= 0 && i < steps.length && !steps[i].disabled,\n    [steps],\n  )\n\n  // the URL carries the step 1-based (`?step=2` = index 1) — human-friendly, like Table's page param\n  const readQuery = useCallback((): number | null => {\n    if (!syncKey || typeof window === 'undefined') return null\n    const raw = new URLSearchParams(window.location.search).get(syncKey)\n    return raw != null && /^\\d+$/.test(raw) ? Number(raw) - 1 : null\n  }, [syncKey])\n\n  const firstEnabled = Math.max(\n    steps.findIndex((s) => !s.disabled),\n    0,\n  )\n\n  const [internal, setInternal] = useState<number>(() => {\n    const q = readQuery()\n    if (isSelectable(q)) return q\n    return isSelectable(defaultStep) ? defaultStep : firstEnabled\n  })\n  const isControlled = activeStep !== undefined\n  // controlled mode renders the given index verbatim (even past the last step — the \"all completed\"\n  // pattern); only the URL/popstate restores are gated by `isSelectable`\n  const active = isControlled ? activeStep : internal\n\n  // keep the latest active / onStepChange / push-intent for the stable effects + popstate listener\n  const activeRef = useRef(active)\n  activeRef.current = active\n  const onStepChangeRef = useRef(onStepChange)\n  onStepChangeRef.current = onStepChange\n  const pushIntent = useRef(false)\n\n  const writeQuery = useCallback(\n    (next: number, push: boolean) => {\n      if (!syncKey || typeof window === 'undefined') return\n      const params = new URLSearchParams(window.location.search)\n      const value = String(next + 1)\n      if (params.get(syncKey) === value) return\n      params.set(syncKey, value)\n      const url = `${window.location.pathname}?${params.toString()}${window.location.hash}`\n      window.history[push ? 'pushState' : 'replaceState'](window.history.state, '', url)\n    },\n    [syncKey],\n  )\n\n  const select = (next: number) => {\n    if (next === activeRef.current) return\n    pushIntent.current = true\n    if (!isControlled) setInternal(next)\n    onStepChange?.(next)\n  }\n\n  // mirror the active step into the URL whenever it changes (and on mount = canonicalize). A\n  // user-driven change `push`es when `pushHistory`; programmatic / popstate changes just `replace`.\n  useEffect(() => {\n    if (!syncKey || typeof window === 'undefined') return\n    // an out-of-range active (e.g. `steps.length` = \"all done\") isn't a step — leave the URL alone\n    if (!Number.isInteger(active) || active < 0 || active >= steps.length) return\n    const push = pushIntent.current && pushHistory\n    pushIntent.current = false\n    writeQuery(active, push)\n  }, [syncKey, active, pushHistory, writeQuery, steps.length])\n\n  // Back/Forward → restore the step from the query\n  useEffect(() => {\n    if (!syncKey || typeof window === 'undefined') return\n    const onPopState = () => {\n      const q = readQuery()\n      if (isSelectable(q) && q !== activeRef.current) {\n        if (activeStep === undefined) setInternal(q)\n        onStepChangeRef.current?.(q)\n      }\n    }\n    window.addEventListener('popstate', onPopState)\n    return () => window.removeEventListener('popstate', onPopState)\n  }, [syncKey, readQuery, isSelectable, activeStep])\n\n  const activeContent = steps[active]?.content\n\n  // when the horizontal strip overflows (scrolls sideways), keep the active step in view — by moving\n  // the strip's own scrollLeft only. (scrollIntoView would also scroll every scrollable ancestor —\n  // i.e. the page itself — yanking the viewport down to the stepper on mount.)\n  const listRef = useRef<HTMLOListElement | null>(null)\n  useEffect(() => {\n    if (orientation === 'vertical') return // the vertical rail never scrolls sideways\n    const list = listRef.current\n    const el = list?.children[active] as HTMLElement | undefined\n    if (!list || !el) return\n    const listRect = list.getBoundingClientRect()\n    const elRect = el.getBoundingClientRect()\n    const left = elRect.left - listRect.left + list.scrollLeft\n    const right = left + elRect.width\n    if (left < list.scrollLeft) list.scrollLeft = left\n    else if (right > list.scrollLeft + list.clientWidth) list.scrollLeft = right - list.clientWidth\n  }, [active, orientation])\n\n  const renderIcon = (icon: StepItem['icon']) =>\n    typeof icon === 'string' && ICON_NAME_SET.has(icon) ? (\n      <Icon name={icon as IconName} size={size} />\n    ) : (\n      icon\n    )\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(styles.root, styles[orientation], styles[size], className)}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n    >\n      <ol ref={listRef} aria-label={ariaLabel} className={styles.list}>\n        {steps.map((step, i) => {\n          const isError = !!step.error\n          const isCompleted = !isError && (step.completed || i < active)\n          const isActive = !isError && !isCompleted && i === active\n          const state = isError\n            ? 'error'\n            : isCompleted\n              ? 'completed'\n              : isActive\n                ? 'active'\n                : 'upcoming'\n          const isLast = i === steps.length - 1\n\n          const icon = renderIcon(step.icon)\n          const indicator =\n            icon != null ? (\n              icon\n            ) : isCompleted ? (\n              <Icon name=\"Check\" size={size} />\n            ) : (\n              <span className={styles.number}>{i + 1}</span>\n            )\n\n          const hasText = step.label != null || step.description != null || step.optional != null\n          const head = (\n            <>\n              <span\n                className={styles.indicator}\n                aria-hidden={icon == null && !isCompleted ? undefined : true}\n              >\n                {indicator}\n              </span>\n              {hasText && (\n                <span className={styles.text}>\n                  {step.label != null && <span className={styles.label}>{step.label}</span>}\n                  {step.description != null && (\n                    <span className={styles.description}>{step.description}</span>\n                  )}\n                  {step.optional != null && (\n                    <span className={styles.optional}>{step.optional}</span>\n                  )}\n                </span>\n              )}\n            </>\n          )\n\n          return (\n            <li\n              key={i}\n              className={clsx(styles.step, styles[state], step.disabled && styles.disabled)}\n            >\n              {clickable ? (\n                <button\n                  type=\"button\"\n                  className={styles.main}\n                  disabled={step.disabled}\n                  aria-current={isActive ? 'step' : undefined}\n                  onClick={() => {\n                    onStepClick?.(i)\n                    select(i)\n                  }}\n                >\n                  {head}\n                </button>\n              ) : (\n                <div className={styles.main} aria-current={isActive ? 'step' : undefined}>\n                  {head}\n                </div>\n              )}\n              {!isLast && (\n                <span\n                  className={clsx(styles.connector, i < active && styles.done)}\n                  aria-hidden=\"true\"\n                />\n              )}\n              {/* vertical: the active step's content sits inline, indented beside the rail */}\n              {vertical && i === active && step.content != null && (\n                <div className={styles.stepContent}>{step.content}</div>\n              )}\n            </li>\n          )\n        })}\n      </ol>\n      {/* horizontal: the active step's content renders as a panel below the strip */}\n      {!vertical && activeContent != null && <div className={styles.panel}>{activeContent}</div>}\n    </div>\n  )\n})\n"],"names":["ICON_NAME_SET","ICON_NAMES","Stepper","forwardRef","steps","activeStep","defaultStep","onStepChange","queryKey","pushHistory","orientation","size","color","onStepClick","ariaLabel","className","style","ref","vertical","clickable","stepQueryKey","useStepQueryKey","syncKey","isSelectable","useCallback","i","readQuery","raw","firstEnabled","s","internal","setInternal","useState","q","isControlled","active","activeRef","useRef","onStepChangeRef","pushIntent","writeQuery","next","push","params","value","url","select","useEffect","onPopState","_a","activeContent","listRef","list","el","listRect","elRect","left","right","renderIcon","icon","jsx","Icon","jsxs","clsx","styles","step","isError","isCompleted","isActive","state","isLast","indicator","hasText","head","Fragment"],"mappings":"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"}
+{"version":3,"file":"Stepper-BjkkWawQ.cjs","sources":["../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useStepQueryKey, type ThemeColor } from '../../theme'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { Icon } from '../Icon'\nimport styles from './Stepper.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type StepperOrientation = 'horizontal' | 'vertical'\nexport type StepperSize = 'sm' | 'md' | 'lg'\n\nexport interface StepItem {\n  /** Step label. */\n  label?: ReactNode\n  /** Muted secondary line under the label. */\n  description?: ReactNode\n  /** Muted caption under the label (e.g. `\"Optional\"`). */\n  optional?: ReactNode\n  /** Override the step's number indicator with an icon — a known `IconName` or any node. */\n  icon?: IconName | ReactNode\n  /** Force the **completed** look regardless of the active step (e.g. an already-saved step). */\n  completed?: boolean\n  /** Marks the step **invalid** — a red indicator + label (e.g. its form section failed validation). */\n  error?: boolean\n  /** Disables the step — dimmed, (when clickable) not selectable, and skipped by the URL restore. */\n  disabled?: boolean\n  /**\n   * Panel content rendered while this step is active — **below the strip** in horizontal mode, and\n   * **inline under the step** (indented beside the rail) in vertical mode. Optional.\n   */\n  content?: ReactNode\n}\n\nexport interface StepperProps {\n  /** The steps, in order. */\n  steps: StepItem[]\n  /**\n   * Controlled current step index (**0-based**). Steps before it read **completed**, the one at it is\n   * **active**, and those after it are **upcoming**. Omit for uncontrolled (see `defaultStep`).\n   */\n  activeStep?: number\n  /**\n   * Initial step index (uncontrolled). Falls back to the URL query (when URL sync is active and the\n   * param is present) and otherwise the first enabled step.\n   */\n  defaultStep?: number\n  /**\n   * Fires with the next step index whenever the stepper itself changes the step — a clicked step head,\n   * or a Back/Forward `popstate` restore. In controlled mode apply it to your `activeStep` state.\n   */\n  onStepChange?: (index: number) => void\n  /**\n   * **Opt-in** URL sync — **off by default** (the URL is never touched when omitted). Pass the bare\n   * prop (**`queryKey`** / `true`) to sync the active step under the configured `keys.stepQueryKey`\n   * (else `'step'`), or a **string** for a custom param name. The URL value is **1-based**\n   * (`?step=2` = index 1) and a page refresh restores it. Two synced steppers on one page need\n   * distinct keys.\n   */\n  queryKey?: boolean | string\n  /**\n   * Push a history entry on each step change, so the browser **Back** button returns to the previous\n   * step. Defaults to `false` — step changes **replace** the URL, so Back leaves the page instead of\n   * stepping back through the wizard (and `popstate` still restores a step when one is in the query).\n   */\n  pushHistory?: boolean\n  /**\n   * Layout direction. `horizontal` (default) centers each label **under** its circle and **scrolls\n   * sideways** when the steps don't fit (so it fits a phone as-is); `vertical` stacks the steps along\n   * a rail connector.\n   */\n  orientation?: StepperOrientation\n  /** Preset size. Defaults to `'md'`. */\n  size?: StepperSize\n  /** Theme palette token tinting the active / completed steps. Defaults to `'primary'`. */\n  color?: ThemeColor\n  /**\n   * Makes steps **clickable** — each step head becomes a `<button>` that fires this with the step index\n   * (a `disabled` step never fires); an uncontrolled stepper also selects the clicked step itself. Omit\n   * for a display-only progress indicator.\n   */\n  onStepClick?: (index: number) => void\n  /** Accessible label for the stepper list. */\n  'aria-label'?: string\n  className?: string\n  style?: CSSProperties\n}\n\n/**\n * A step progress indicator. Data-driven via `steps` (each: `label`, `description`, `optional`, `icon`,\n * `completed`, `error`, `disabled`, `content`) — controlled (`activeStep`, 0-based) or uncontrolled\n * (`defaultStep`). **Opt-in URL sync:** pass **`queryKey`** (bare/`true` = the configured\n * `keys.stepQueryKey`, else `'step'`; or a custom string) and the active step syncs to that query param\n * (**1-based** — `?step=2`) so a refresh restores it; with no `queryKey` the URL is never touched.\n * Synced step changes **replace** the URL (Back doesn't walk the wizard); pass **`pushHistory`** to\n * step back with Back.\n * Horizontal (labels centered under the circles) or `vertical` (a rail); when the horizontal steps\n * don't fit, the strip **scrolls sideways** (scrollbar hidden, the active step kept in view) — so it\n * fits a phone as-is. The active step's **`content`** renders below the strip (horizontal) or inline\n * under the step (vertical). Pass **`onStepClick`** to make the steps navigable. Tinted by `color` via\n * the shared `--tz-btn-rgb` pattern; the list is an `<ol>` with `aria-current=\"step\"` on the active step.\n */\nexport const Stepper = forwardRef<HTMLDivElement, StepperProps>(function Stepper(\n  {\n    steps,\n    activeStep,\n    defaultStep,\n    onStepChange,\n    queryKey,\n    pushHistory = false,\n    orientation = 'horizontal',\n    size = 'md',\n    color = 'primary',\n    onStepClick,\n    'aria-label': ariaLabel,\n    className,\n    style,\n  },\n  ref,\n) {\n  const vertical = orientation === 'vertical'\n  const clickable = onStepClick != null\n\n  // resolve the URL-sync key — OPT-IN: omitted/false = no sync (URL untouched); the bare/`true` form\n  // uses the configured default (`keys.stepQueryKey`, else 'step'); a string is a custom param name\n  const stepQueryKey = useStepQueryKey()\n  const syncKey = queryKey === true ? stepQueryKey : queryKey || undefined\n\n  const isSelectable = useCallback(\n    (i: number | null | undefined): i is number =>\n      i != null && Number.isInteger(i) && i >= 0 && i < steps.length && !steps[i].disabled,\n    [steps],\n  )\n\n  // the URL carries the step 1-based (`?step=2` = index 1) — human-friendly, like Table's page param\n  const readQuery = useCallback((): number | null => {\n    if (!syncKey || typeof window === 'undefined') return null\n    const raw = new URLSearchParams(window.location.search).get(syncKey)\n    return raw != null && /^\\d+$/.test(raw) ? Number(raw) - 1 : null\n  }, [syncKey])\n\n  const firstEnabled = Math.max(\n    steps.findIndex((s) => !s.disabled),\n    0,\n  )\n\n  const [internal, setInternal] = useState<number>(() => {\n    const q = readQuery()\n    if (isSelectable(q)) return q\n    return isSelectable(defaultStep) ? defaultStep : firstEnabled\n  })\n  const isControlled = activeStep !== undefined\n  // controlled mode renders the given index verbatim (even past the last step — the \"all completed\"\n  // pattern); only the URL/popstate restores are gated by `isSelectable`\n  const active = isControlled ? activeStep : internal\n\n  // keep the latest active / onStepChange / push-intent for the stable effects + popstate listener\n  const activeRef = useRef(active)\n  activeRef.current = active\n  const onStepChangeRef = useRef(onStepChange)\n  onStepChangeRef.current = onStepChange\n  const pushIntent = useRef(false)\n\n  const writeQuery = useCallback(\n    (next: number, push: boolean) => {\n      if (!syncKey || typeof window === 'undefined') return\n      const params = new URLSearchParams(window.location.search)\n      const value = String(next + 1)\n      if (params.get(syncKey) === value) return\n      params.set(syncKey, value)\n      const url = `${window.location.pathname}?${params.toString()}${window.location.hash}`\n      window.history[push ? 'pushState' : 'replaceState'](window.history.state, '', url)\n    },\n    [syncKey],\n  )\n\n  const select = (next: number) => {\n    if (next === activeRef.current) return\n    pushIntent.current = true\n    if (!isControlled) setInternal(next)\n    onStepChange?.(next)\n  }\n\n  // mirror the active step into the URL whenever it changes (and on mount = canonicalize). A\n  // user-driven change `push`es when `pushHistory`; programmatic / popstate changes just `replace`.\n  useEffect(() => {\n    if (!syncKey || typeof window === 'undefined') return\n    // an out-of-range active (e.g. `steps.length` = \"all done\") isn't a step — leave the URL alone\n    if (!Number.isInteger(active) || active < 0 || active >= steps.length) return\n    const push = pushIntent.current && pushHistory\n    pushIntent.current = false\n    writeQuery(active, push)\n  }, [syncKey, active, pushHistory, writeQuery, steps.length])\n\n  // Back/Forward → restore the step from the query\n  useEffect(() => {\n    if (!syncKey || typeof window === 'undefined') return\n    const onPopState = () => {\n      const q = readQuery()\n      if (isSelectable(q) && q !== activeRef.current) {\n        if (activeStep === undefined) setInternal(q)\n        onStepChangeRef.current?.(q)\n      }\n    }\n    window.addEventListener('popstate', onPopState)\n    return () => window.removeEventListener('popstate', onPopState)\n  }, [syncKey, readQuery, isSelectable, activeStep])\n\n  const activeContent = steps[active]?.content\n\n  // when the horizontal strip overflows (scrolls sideways), keep the active step in view — by moving\n  // the strip's own scrollLeft only. (scrollIntoView would also scroll every scrollable ancestor —\n  // i.e. the page itself — yanking the viewport down to the stepper on mount.)\n  const listRef = useRef<HTMLOListElement | null>(null)\n  useEffect(() => {\n    if (orientation === 'vertical') return // the vertical rail never scrolls sideways\n    const list = listRef.current\n    const el = list?.children[active] as HTMLElement | undefined\n    if (!list || !el) return\n    const listRect = list.getBoundingClientRect()\n    const elRect = el.getBoundingClientRect()\n    const left = elRect.left - listRect.left + list.scrollLeft\n    const right = left + elRect.width\n    if (left < list.scrollLeft) list.scrollLeft = left\n    else if (right > list.scrollLeft + list.clientWidth) list.scrollLeft = right - list.clientWidth\n  }, [active, orientation])\n\n  const renderIcon = (icon: StepItem['icon']) =>\n    typeof icon === 'string' && ICON_NAME_SET.has(icon) ? (\n      <Icon name={icon as IconName} size={size} />\n    ) : (\n      icon\n    )\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(styles.root, styles[orientation], styles[size], className)}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n    >\n      <ol ref={listRef} aria-label={ariaLabel} className={styles.list}>\n        {steps.map((step, i) => {\n          const isError = !!step.error\n          const isCompleted = !isError && (step.completed || i < active)\n          const isActive = !isError && !isCompleted && i === active\n          const state = isError\n            ? 'error'\n            : isCompleted\n              ? 'completed'\n              : isActive\n                ? 'active'\n                : 'upcoming'\n          const isLast = i === steps.length - 1\n\n          const icon = renderIcon(step.icon)\n          const indicator =\n            icon != null ? (\n              icon\n            ) : isCompleted ? (\n              <Icon name=\"Check\" size={size} />\n            ) : (\n              <span className={styles.number}>{i + 1}</span>\n            )\n\n          const hasText = step.label != null || step.description != null || step.optional != null\n          const head = (\n            <>\n              <span\n                className={styles.indicator}\n                aria-hidden={icon == null && !isCompleted ? undefined : true}\n              >\n                {indicator}\n              </span>\n              {hasText && (\n                <span className={styles.text}>\n                  {step.label != null && <span className={styles.label}>{step.label}</span>}\n                  {step.description != null && (\n                    <span className={styles.description}>{step.description}</span>\n                  )}\n                  {step.optional != null && (\n                    <span className={styles.optional}>{step.optional}</span>\n                  )}\n                </span>\n              )}\n            </>\n          )\n\n          return (\n            <li\n              key={i}\n              className={clsx(styles.step, styles[state], step.disabled && styles.disabled)}\n            >\n              {clickable ? (\n                <button\n                  type=\"button\"\n                  className={styles.main}\n                  disabled={step.disabled}\n                  aria-current={isActive ? 'step' : undefined}\n                  onClick={() => {\n                    onStepClick?.(i)\n                    select(i)\n                  }}\n                >\n                  {head}\n                </button>\n              ) : (\n                <div className={styles.main} aria-current={isActive ? 'step' : undefined}>\n                  {head}\n                </div>\n              )}\n              {!isLast && (\n                <span\n                  className={clsx(styles.connector, i < active && styles.done)}\n                  aria-hidden=\"true\"\n                />\n              )}\n              {/* vertical: the active step's content sits inline, indented beside the rail */}\n              {vertical && i === active && step.content != null && (\n                <div className={styles.stepContent}>{step.content}</div>\n              )}\n            </li>\n          )\n        })}\n      </ol>\n      {/* horizontal: the active step's content renders as a panel below the strip */}\n      {!vertical && activeContent != null && <div className={styles.panel}>{activeContent}</div>}\n    </div>\n  )\n})\n"],"names":["ICON_NAME_SET","ICON_NAMES","Stepper","forwardRef","steps","activeStep","defaultStep","onStepChange","queryKey","pushHistory","orientation","size","color","onStepClick","ariaLabel","className","style","ref","vertical","clickable","stepQueryKey","useStepQueryKey","syncKey","isSelectable","useCallback","i","readQuery","raw","firstEnabled","s","internal","setInternal","useState","q","isControlled","active","activeRef","useRef","onStepChangeRef","pushIntent","writeQuery","next","push","params","value","url","select","useEffect","onPopState","_a","activeContent","listRef","list","el","listRect","elRect","left","right","renderIcon","icon","jsx","Icon","jsxs","clsx","styles","step","isError","isCompleted","isActive","state","isLast","indicator","hasText","head","Fragment"],"mappings":"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"}

package/dist/{SwatchPicker-CCJltwHI.cjs → SwatchPicker-C8amdDnA.cjs}

@@ -1,2 +1,2 @@
-"use strict";const t=require("react/jsx-runtime"),u=require("react"),N=require("clsx"),U=require("./formContext-bTWrqdEV.cjs"),G=require("./Icon-BVULqOJD.cjs"),R=require("./Typography-BFatE1_A.cjs"),i=require("./TextField.module-m-UllwzG.cjs"),J="_swatches_1kbcs_3",M="_sm_1kbcs_13",O="_md_1kbcs_18",Q="_lg_1kbcs_23",W="_swatch_1kbcs_3",m={swatches:J,sm:M,md:O,lg:Q,swatch:W},X=u.forwardRef(function({colors:r,value:p,defaultValue:A=null,onChange:h,size:b="md",labels:w,label:d,error:C,helperText:L,required:D=!1,name:c,className:F,"aria-label":P,...B},E){const x=u.useId(),v=`${x}-label`,k=`${x}-helper`,o=U.useFormContext(),_=!!(o&&c),l=o&&c?o.field(c):void 0,S=p!==void 0?p:_?o.values[c]??null:void 0,I=S!==void 0,[H,K]=u.useState(A),g=((I?S:H)??"").toLowerCase(),f=C??(l==null?void 0:l.error)??!1,y=L??(l==null?void 0:l.helperText),j=e=>{I||K(e),_&&o.setValue(c,e),h==null||h(e)},q=u.useRef([]),T=r.findIndex(e=>e.toLowerCase()===g),V=T>=0?T:0,$=(e,a)=>{var n;let s=a;switch(e.key){case"ArrowRight":case"ArrowDown":s=(a+1)%r.length;break;case"ArrowLeft":case"ArrowUp":s=(a-1+r.length)%r.length;break;case"Home":s=0;break;case"End":s=r.length-1;break;default:return}e.preventDefault(),j(r[s]),(n=q.current[s])==null||n.focus()};return t.jsxs("div",{ref:E,className:N.clsx(i.fieldStyles.field,i.fieldStyles[b],f&&i.fieldStyles.error,F),...B,children:[d!=null&&t.jsxs("label",{id:v,className:i.fieldStyles.label,children:[t.jsx(R.Typography,{as:"span",variant:"bodySmall",color:"muted",children:d}),D&&t.jsx("span",{className:i.fieldStyles.required,"aria-hidden":"true",children:"*"})]}),t.jsx("div",{role:"radiogroup","aria-labelledby":d!=null?v:void 0,"aria-label":d==null?P:void 0,"aria-invalid":f||void 0,"aria-describedby":y!=null?k:void 0,className:N.clsx(m.swatches,m[b]),...c?{name:c,tabIndex:-1}:{},children:r.map((e,a)=>{const s=e.toLowerCase()===g;return t.jsx("button",{ref:n=>{q.current[a]=n},type:"button",role:"radio","aria-checked":s,"aria-label":(w==null?void 0:w[e])??e,tabIndex:a===V?0:-1,className:m.swatch,style:{"--sw":e},onClick:()=>j(e),onKeyDown:n=>$(n,a),children:s?t.jsx(G.Icon,{name:"TickCircle",style:{width:"var(--sw-icon)",height:"var(--sw-icon)"}}):null},e)})}),y!=null&&t.jsx(R.Typography,{as:"span",id:k,variant:"bodySmall",color:f?"error":"muted",className:i.fieldStyles.helper,children:y})]})});exports.SwatchPicker=X;
-//# sourceMappingURL=SwatchPicker-CCJltwHI.cjs.map
+"use strict";const t=require("react/jsx-runtime"),u=require("react"),N=require("clsx"),U=require("./formContext-bTWrqdEV.cjs"),G=require("./Icon-BVULqOJD.cjs"),R=require("./Typography-BFatE1_A.cjs"),i=require("./TextField.module-DsNCo8vN.cjs"),J="_swatches_1kbcs_3",M="_sm_1kbcs_13",O="_md_1kbcs_18",Q="_lg_1kbcs_23",W="_swatch_1kbcs_3",m={swatches:J,sm:M,md:O,lg:Q,swatch:W},X=u.forwardRef(function({colors:r,value:p,defaultValue:A=null,onChange:h,size:b="md",labels:w,label:d,error:C,helperText:L,required:D=!1,name:c,className:F,"aria-label":P,...B},E){const x=u.useId(),v=`${x}-label`,k=`${x}-helper`,o=U.useFormContext(),_=!!(o&&c),l=o&&c?o.field(c):void 0,S=p!==void 0?p:_?o.values[c]??null:void 0,I=S!==void 0,[H,K]=u.useState(A),g=((I?S:H)??"").toLowerCase(),f=C??(l==null?void 0:l.error)??!1,y=L??(l==null?void 0:l.helperText),j=e=>{I||K(e),_&&o.setValue(c,e),h==null||h(e)},q=u.useRef([]),T=r.findIndex(e=>e.toLowerCase()===g),V=T>=0?T:0,$=(e,a)=>{var n;let s=a;switch(e.key){case"ArrowRight":case"ArrowDown":s=(a+1)%r.length;break;case"ArrowLeft":case"ArrowUp":s=(a-1+r.length)%r.length;break;case"Home":s=0;break;case"End":s=r.length-1;break;default:return}e.preventDefault(),j(r[s]),(n=q.current[s])==null||n.focus()};return t.jsxs("div",{ref:E,className:N.clsx(i.fieldStyles.field,i.fieldStyles[b],f&&i.fieldStyles.error,F),...B,children:[d!=null&&t.jsxs("label",{id:v,className:i.fieldStyles.label,children:[t.jsx(R.Typography,{as:"span",variant:"bodySmall",color:"muted",children:d}),D&&t.jsx("span",{className:i.fieldStyles.required,"aria-hidden":"true",children:"*"})]}),t.jsx("div",{role:"radiogroup","aria-labelledby":d!=null?v:void 0,"aria-label":d==null?P:void 0,"aria-invalid":f||void 0,"aria-describedby":y!=null?k:void 0,className:N.clsx(m.swatches,m[b]),...c?{name:c,tabIndex:-1}:{},children:r.map((e,a)=>{const s=e.toLowerCase()===g;return t.jsx("button",{ref:n=>{q.current[a]=n},type:"button",role:"radio","aria-checked":s,"aria-label":(w==null?void 0:w[e])??e,tabIndex:a===V?0:-1,className:m.swatch,style:{"--sw":e},onClick:()=>j(e),onKeyDown:n=>$(n,a),children:s?t.jsx(G.Icon,{name:"TickCircle",style:{width:"var(--sw-icon)",height:"var(--sw-icon)"}}):null},e)})}),y!=null&&t.jsx(R.Typography,{as:"span",id:k,variant:"bodySmall",color:f?"error":"muted",className:i.fieldStyles.helper,children:y})]})});exports.SwatchPicker=X;
+//# sourceMappingURL=SwatchPicker-C8amdDnA.cjs.map

package/dist/{SwatchPicker-CCJltwHI.cjs.map → SwatchPicker-C8amdDnA.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"SwatchPicker-CCJltwHI.cjs","sources":["../src/components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport { Icon } from '../Icon'\nimport { Typography } from '../Typography'\n// shared field chrome (wrapper / label / helper / required / error / sizes)\nimport fieldStyles from '../TextField/TextField.module.css'\nimport styles from './SwatchPicker.module.css'\n\nexport type SwatchPickerSize = 'sm' | 'md' | 'lg'\n\nexport interface SwatchPickerProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /** The color values to render as selectable swatches (any CSS color — hex / `rgb()` / …). */\n  colors: string[]\n  /** The selected color (controlled) — matched case-insensitively against `colors`; `null` = none. */\n  value?: string | null\n  /** Initial selected color (uncontrolled). */\n  defaultValue?: string | null\n  /** Fires with the clicked color. */\n  onChange?: (color: string) => void\n  /**\n   * Swatch size — `sm` 30 / `md` 36 / `lg` 42 px, each with its own corner radius and tick size\n   * (12/16/20). Defaults to `md`. All three are per-size CSS vars in the module.\n   */\n  size?: SwatchPickerSize\n  /** Per-color accessible labels (falls back to the color value itself). */\n  labels?: Record<string, string>\n  /** Label rendered above the swatches. */\n  label?: ReactNode\n  /** Marks the field invalid — reddens the label/asterisk and shows `helperText` in the error color. */\n  error?: boolean\n  /** Helper / validation text under the swatches. Adopts the error color while `error`. */\n  helperText?: ReactNode\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Form field name — auto-binds to a surrounding `<Form>` (the form value is the color string). */\n  name?: string\n}\n\n/**\n * A grid of selectable color **swatches** (rounded tiles) — pick one from a fixed palette. The selected\n * swatch shows a centered white **`TickCircle`** icon. Unlike `ColorPicker` (a field + full popover\n * picker), this is a lightweight primitive for a **preset** set of colors — e.g. an accent-color chooser.\n * Controlled (`value` + `onChange`) or uncontrolled (`defaultValue`); binds to a surrounding `<Form>` by\n * `name` (the form value is the color string — validate with e.g. `z.string().min(1, 'Pick a color')`),\n * and shares the field family's `label` / `error` + `helperText` / `required` chrome.\n *\n * Swatch fills are arbitrary CSS colors (fed via an inline `--sw` var), not `--tz-*` tokens — a\n * deliberate exception, like `ColorPicker`'s spectrum. a11y: `role=\"radiogroup\"` (labelled by `label`\n * or `aria-label`) with `role=\"radio\"` + `aria-checked` swatches; the group carries `name` for the\n * form's scroll-to-error.\n */\nexport const SwatchPicker = forwardRef<HTMLDivElement, SwatchPickerProps>(function SwatchPicker(\n  {\n    colors,\n    value,\n    defaultValue = null,\n    onChange,\n    size = 'md',\n    labels,\n    label,\n    error,\n    helperText,\n    required = false,\n    name,\n    className,\n    'aria-label': ariaLabel,\n    ...props\n  },\n  ref,\n) {\n  const id = useId()\n  const labelId = `${id}-label`\n  const helperId = `${id}-helper`\n\n  // Auto-bind to a surrounding <Form> by `name` — the form value is the color string.\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const externalValue: string | null | undefined =\n    value !== undefined\n      ? value\n      : isFormBound\n        ? ((form!.values[name!] as string | null | undefined) ?? null)\n        : undefined\n  const isControlled = externalValue !== undefined\n  const [internal, setInternal] = useState<string | null>(defaultValue)\n  const selected = isControlled ? externalValue! : internal\n  const active = (selected ?? '').toLowerCase()\n\n  const resolvedError = error ?? bound?.error ?? false\n  const resolvedHelperText = helperText ?? bound?.helperText\n\n  const pick = (color: string) => {\n    if (!isControlled) setInternal(color)\n    if (isFormBound) form!.setValue(name!, color)\n    onChange?.(color)\n  }\n\n  // roving tabindex (ARIA radiogroup): only the selected swatch — or the first, if none — is tabbable;\n  // arrows move selection between swatches (wrapping), Home/End jump to the ends\n  const swatchRefs = useRef<(HTMLButtonElement | null)[]>([])\n  const selectedIndex = colors.findIndex((c) => c.toLowerCase() === active)\n  const tabbableIndex = selectedIndex >= 0 ? selectedIndex : 0\n  const onSwatchKey = (event: ReactKeyboardEvent<HTMLButtonElement>, index: number) => {\n    let target = index\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        target = (index + 1) % colors.length\n        break\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        target = (index - 1 + colors.length) % colors.length\n        break\n      case 'Home':\n        target = 0\n        break\n      case 'End':\n        target = colors.length - 1\n        break\n      default:\n        return\n    }\n    event.preventDefault()\n    pick(colors[target])\n    swatchRefs.current[target]?.focus()\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        fieldStyles.field,\n        fieldStyles[size],\n        resolvedError && fieldStyles.error,\n        className,\n      )}\n      {...props}\n    >\n      {label != null && (\n        <label id={labelId} className={fieldStyles.label}>\n          <Typography as=\"span\" variant=\"bodySmall\" color=\"muted\">\n            {label}\n          </Typography>\n          {required && (\n            <span className={fieldStyles.required} aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n      <div\n        role=\"radiogroup\"\n        aria-labelledby={label != null ? labelId : undefined}\n        aria-label={label == null ? ariaLabel : undefined}\n        aria-invalid={resolvedError || undefined}\n        aria-describedby={resolvedHelperText != null ? helperId : undefined}\n        className={clsx(styles.swatches, styles[size])}\n        // name + tabIndex are load-bearing for the form's scroll-to-error\n        {...(name ? { name, tabIndex: -1 } : {})}\n      >\n        {colors.map((color, index) => {\n          const isSelected = color.toLowerCase() === active\n          return (\n            <button\n              key={color}\n              ref={(el) => {\n                swatchRefs.current[index] = el\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isSelected}\n              aria-label={labels?.[color] ?? color}\n              tabIndex={index === tabbableIndex ? 0 : -1}\n              className={styles.swatch}\n              style={{ '--sw': color } as CSSProperties}\n              onClick={() => pick(color)}\n              onKeyDown={(e) => onSwatchKey(e, index)}\n            >\n              {isSelected ? (\n                <Icon\n                  name=\"TickCircle\"\n                  style={{ width: 'var(--sw-icon)', height: 'var(--sw-icon)' }}\n                />\n              ) : null}\n            </button>\n          )\n        })}\n      </div>\n      {resolvedHelperText != null && (\n        <Typography\n          as=\"span\"\n          id={helperId}\n          variant=\"bodySmall\"\n          color={resolvedError ? 'error' : 'muted'}\n          className={fieldStyles.helper}\n        >\n          {resolvedHelperText}\n        </Typography>\n      )}\n    </div>\n  )\n})\n"],"names":["SwatchPicker","forwardRef","colors","value","defaultValue","onChange","size","labels","label","error","helperText","required","name","className","ariaLabel","props","ref","id","useId","labelId","helperId","form","useFormContext","isFormBound","bound","externalValue","isControlled","internal","setInternal","useState","active","resolvedError","resolvedHelperText","pick","color","swatchRefs","useRef","selectedIndex","c","tabbableIndex","onSwatchKey","event","index","target","_a","jsxs","clsx","fieldStyles","jsx","Typography","styles","isSelected","el","e","Icon"],"mappings":"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"}
+{"version":3,"file":"SwatchPicker-C8amdDnA.cjs","sources":["../src/components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport { Icon } from '../Icon'\nimport { Typography } from '../Typography'\n// shared field chrome (wrapper / label / helper / required / error / sizes)\nimport fieldStyles from '../TextField/TextField.module.css'\nimport styles from './SwatchPicker.module.css'\n\nexport type SwatchPickerSize = 'sm' | 'md' | 'lg'\n\nexport interface SwatchPickerProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /** The color values to render as selectable swatches (any CSS color — hex / `rgb()` / …). */\n  colors: string[]\n  /** The selected color (controlled) — matched case-insensitively against `colors`; `null` = none. */\n  value?: string | null\n  /** Initial selected color (uncontrolled). */\n  defaultValue?: string | null\n  /** Fires with the clicked color. */\n  onChange?: (color: string) => void\n  /**\n   * Swatch size — `sm` 30 / `md` 36 / `lg` 42 px, each with its own corner radius and tick size\n   * (12/16/20). Defaults to `md`. All three are per-size CSS vars in the module.\n   */\n  size?: SwatchPickerSize\n  /** Per-color accessible labels (falls back to the color value itself). */\n  labels?: Record<string, string>\n  /** Label rendered above the swatches. */\n  label?: ReactNode\n  /** Marks the field invalid — reddens the label/asterisk and shows `helperText` in the error color. */\n  error?: boolean\n  /** Helper / validation text under the swatches. Adopts the error color while `error`. */\n  helperText?: ReactNode\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Form field name — auto-binds to a surrounding `<Form>` (the form value is the color string). */\n  name?: string\n}\n\n/**\n * A grid of selectable color **swatches** (rounded tiles) — pick one from a fixed palette. The selected\n * swatch shows a centered white **`TickCircle`** icon. Unlike `ColorPicker` (a field + full popover\n * picker), this is a lightweight primitive for a **preset** set of colors — e.g. an accent-color chooser.\n * Controlled (`value` + `onChange`) or uncontrolled (`defaultValue`); binds to a surrounding `<Form>` by\n * `name` (the form value is the color string — validate with e.g. `z.string().min(1, 'Pick a color')`),\n * and shares the field family's `label` / `error` + `helperText` / `required` chrome.\n *\n * Swatch fills are arbitrary CSS colors (fed via an inline `--sw` var), not `--tz-*` tokens — a\n * deliberate exception, like `ColorPicker`'s spectrum. a11y: `role=\"radiogroup\"` (labelled by `label`\n * or `aria-label`) with `role=\"radio\"` + `aria-checked` swatches; the group carries `name` for the\n * form's scroll-to-error.\n */\nexport const SwatchPicker = forwardRef<HTMLDivElement, SwatchPickerProps>(function SwatchPicker(\n  {\n    colors,\n    value,\n    defaultValue = null,\n    onChange,\n    size = 'md',\n    labels,\n    label,\n    error,\n    helperText,\n    required = false,\n    name,\n    className,\n    'aria-label': ariaLabel,\n    ...props\n  },\n  ref,\n) {\n  const id = useId()\n  const labelId = `${id}-label`\n  const helperId = `${id}-helper`\n\n  // Auto-bind to a surrounding <Form> by `name` — the form value is the color string.\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const externalValue: string | null | undefined =\n    value !== undefined\n      ? value\n      : isFormBound\n        ? ((form!.values[name!] as string | null | undefined) ?? null)\n        : undefined\n  const isControlled = externalValue !== undefined\n  const [internal, setInternal] = useState<string | null>(defaultValue)\n  const selected = isControlled ? externalValue! : internal\n  const active = (selected ?? '').toLowerCase()\n\n  const resolvedError = error ?? bound?.error ?? false\n  const resolvedHelperText = helperText ?? bound?.helperText\n\n  const pick = (color: string) => {\n    if (!isControlled) setInternal(color)\n    if (isFormBound) form!.setValue(name!, color)\n    onChange?.(color)\n  }\n\n  // roving tabindex (ARIA radiogroup): only the selected swatch — or the first, if none — is tabbable;\n  // arrows move selection between swatches (wrapping), Home/End jump to the ends\n  const swatchRefs = useRef<(HTMLButtonElement | null)[]>([])\n  const selectedIndex = colors.findIndex((c) => c.toLowerCase() === active)\n  const tabbableIndex = selectedIndex >= 0 ? selectedIndex : 0\n  const onSwatchKey = (event: ReactKeyboardEvent<HTMLButtonElement>, index: number) => {\n    let target = index\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        target = (index + 1) % colors.length\n        break\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        target = (index - 1 + colors.length) % colors.length\n        break\n      case 'Home':\n        target = 0\n        break\n      case 'End':\n        target = colors.length - 1\n        break\n      default:\n        return\n    }\n    event.preventDefault()\n    pick(colors[target])\n    swatchRefs.current[target]?.focus()\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        fieldStyles.field,\n        fieldStyles[size],\n        resolvedError && fieldStyles.error,\n        className,\n      )}\n      {...props}\n    >\n      {label != null && (\n        <label id={labelId} className={fieldStyles.label}>\n          <Typography as=\"span\" variant=\"bodySmall\" color=\"muted\">\n            {label}\n          </Typography>\n          {required && (\n            <span className={fieldStyles.required} aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n      <div\n        role=\"radiogroup\"\n        aria-labelledby={label != null ? labelId : undefined}\n        aria-label={label == null ? ariaLabel : undefined}\n        aria-invalid={resolvedError || undefined}\n        aria-describedby={resolvedHelperText != null ? helperId : undefined}\n        className={clsx(styles.swatches, styles[size])}\n        // name + tabIndex are load-bearing for the form's scroll-to-error\n        {...(name ? { name, tabIndex: -1 } : {})}\n      >\n        {colors.map((color, index) => {\n          const isSelected = color.toLowerCase() === active\n          return (\n            <button\n              key={color}\n              ref={(el) => {\n                swatchRefs.current[index] = el\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isSelected}\n              aria-label={labels?.[color] ?? color}\n              tabIndex={index === tabbableIndex ? 0 : -1}\n              className={styles.swatch}\n              style={{ '--sw': color } as CSSProperties}\n              onClick={() => pick(color)}\n              onKeyDown={(e) => onSwatchKey(e, index)}\n            >\n              {isSelected ? (\n                <Icon\n                  name=\"TickCircle\"\n                  style={{ width: 'var(--sw-icon)', height: 'var(--sw-icon)' }}\n                />\n              ) : null}\n            </button>\n          )\n        })}\n      </div>\n      {resolvedHelperText != null && (\n        <Typography\n          as=\"span\"\n          id={helperId}\n          variant=\"bodySmall\"\n          color={resolvedError ? 'error' : 'muted'}\n          className={fieldStyles.helper}\n        >\n          {resolvedHelperText}\n        </Typography>\n      )}\n    </div>\n  )\n})\n"],"names":["SwatchPicker","forwardRef","colors","value","defaultValue","onChange","size","labels","label","error","helperText","required","name","className","ariaLabel","props","ref","id","useId","labelId","helperId","form","useFormContext","isFormBound","bound","externalValue","isControlled","internal","setInternal","useState","active","resolvedError","resolvedHelperText","pick","color","swatchRefs","useRef","selectedIndex","c","tabbableIndex","onSwatchKey","event","index","target","_a","jsxs","clsx","fieldStyles","jsx","Typography","styles","isSelected","el","e","Icon"],"mappings":"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"}

package/dist/{SwatchPicker-CqyWngFJ.js → SwatchPicker-DXEE9xqY.js}

@@ -4,7 +4,7 @@ import { clsx as L } from "clsx";
 import { u as O } from "./formContext-B7ln1Miy.js";
 import { I as Q } from "./Icon-DaTvzLBu.js";
 import { T as R } from "./Typography-Cta6Rg4L.js";
-import { f as n } from "./TextField.module-QePvGeJ3.js";
+import { f as n } from "./TextField.module-6gYcR9TL.js";
 const W = "_swatches_1kbcs_3", X = "_sm_1kbcs_13", Y = "_md_1kbcs_18", Z = "_lg_1kbcs_23", z = "_swatch_1kbcs_3", w = {
   swatches: W,
   sm: X,
@@ -126,4 +126,4 @@ const W = "_swatches_1kbcs_3", X = "_sm_1kbcs_13", Y = "_md_1kbcs_18", Z = "_lg_
 export {
   ie as S
 };
-//# sourceMappingURL=SwatchPicker-CqyWngFJ.js.map
+//# sourceMappingURL=SwatchPicker-DXEE9xqY.js.map

package/dist/{SwatchPicker-CqyWngFJ.js.map → SwatchPicker-DXEE9xqY.js.map}

@@ -1 +1 @@
-{"version":3,"file":"SwatchPicker-CqyWngFJ.js","sources":["../src/components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport { Icon } from '../Icon'\nimport { Typography } from '../Typography'\n// shared field chrome (wrapper / label / helper / required / error / sizes)\nimport fieldStyles from '../TextField/TextField.module.css'\nimport styles from './SwatchPicker.module.css'\n\nexport type SwatchPickerSize = 'sm' | 'md' | 'lg'\n\nexport interface SwatchPickerProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /** The color values to render as selectable swatches (any CSS color — hex / `rgb()` / …). */\n  colors: string[]\n  /** The selected color (controlled) — matched case-insensitively against `colors`; `null` = none. */\n  value?: string | null\n  /** Initial selected color (uncontrolled). */\n  defaultValue?: string | null\n  /** Fires with the clicked color. */\n  onChange?: (color: string) => void\n  /**\n   * Swatch size — `sm` 30 / `md` 36 / `lg` 42 px, each with its own corner radius and tick size\n   * (12/16/20). Defaults to `md`. All three are per-size CSS vars in the module.\n   */\n  size?: SwatchPickerSize\n  /** Per-color accessible labels (falls back to the color value itself). */\n  labels?: Record<string, string>\n  /** Label rendered above the swatches. */\n  label?: ReactNode\n  /** Marks the field invalid — reddens the label/asterisk and shows `helperText` in the error color. */\n  error?: boolean\n  /** Helper / validation text under the swatches. Adopts the error color while `error`. */\n  helperText?: ReactNode\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Form field name — auto-binds to a surrounding `<Form>` (the form value is the color string). */\n  name?: string\n}\n\n/**\n * A grid of selectable color **swatches** (rounded tiles) — pick one from a fixed palette. The selected\n * swatch shows a centered white **`TickCircle`** icon. Unlike `ColorPicker` (a field + full popover\n * picker), this is a lightweight primitive for a **preset** set of colors — e.g. an accent-color chooser.\n * Controlled (`value` + `onChange`) or uncontrolled (`defaultValue`); binds to a surrounding `<Form>` by\n * `name` (the form value is the color string — validate with e.g. `z.string().min(1, 'Pick a color')`),\n * and shares the field family's `label` / `error` + `helperText` / `required` chrome.\n *\n * Swatch fills are arbitrary CSS colors (fed via an inline `--sw` var), not `--tz-*` tokens — a\n * deliberate exception, like `ColorPicker`'s spectrum. a11y: `role=\"radiogroup\"` (labelled by `label`\n * or `aria-label`) with `role=\"radio\"` + `aria-checked` swatches; the group carries `name` for the\n * form's scroll-to-error.\n */\nexport const SwatchPicker = forwardRef<HTMLDivElement, SwatchPickerProps>(function SwatchPicker(\n  {\n    colors,\n    value,\n    defaultValue = null,\n    onChange,\n    size = 'md',\n    labels,\n    label,\n    error,\n    helperText,\n    required = false,\n    name,\n    className,\n    'aria-label': ariaLabel,\n    ...props\n  },\n  ref,\n) {\n  const id = useId()\n  const labelId = `${id}-label`\n  const helperId = `${id}-helper`\n\n  // Auto-bind to a surrounding <Form> by `name` — the form value is the color string.\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const externalValue: string | null | undefined =\n    value !== undefined\n      ? value\n      : isFormBound\n        ? ((form!.values[name!] as string | null | undefined) ?? null)\n        : undefined\n  const isControlled = externalValue !== undefined\n  const [internal, setInternal] = useState<string | null>(defaultValue)\n  const selected = isControlled ? externalValue! : internal\n  const active = (selected ?? '').toLowerCase()\n\n  const resolvedError = error ?? bound?.error ?? false\n  const resolvedHelperText = helperText ?? bound?.helperText\n\n  const pick = (color: string) => {\n    if (!isControlled) setInternal(color)\n    if (isFormBound) form!.setValue(name!, color)\n    onChange?.(color)\n  }\n\n  // roving tabindex (ARIA radiogroup): only the selected swatch — or the first, if none — is tabbable;\n  // arrows move selection between swatches (wrapping), Home/End jump to the ends\n  const swatchRefs = useRef<(HTMLButtonElement | null)[]>([])\n  const selectedIndex = colors.findIndex((c) => c.toLowerCase() === active)\n  const tabbableIndex = selectedIndex >= 0 ? selectedIndex : 0\n  const onSwatchKey = (event: ReactKeyboardEvent<HTMLButtonElement>, index: number) => {\n    let target = index\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        target = (index + 1) % colors.length\n        break\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        target = (index - 1 + colors.length) % colors.length\n        break\n      case 'Home':\n        target = 0\n        break\n      case 'End':\n        target = colors.length - 1\n        break\n      default:\n        return\n    }\n    event.preventDefault()\n    pick(colors[target])\n    swatchRefs.current[target]?.focus()\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        fieldStyles.field,\n        fieldStyles[size],\n        resolvedError && fieldStyles.error,\n        className,\n      )}\n      {...props}\n    >\n      {label != null && (\n        <label id={labelId} className={fieldStyles.label}>\n          <Typography as=\"span\" variant=\"bodySmall\" color=\"muted\">\n            {label}\n          </Typography>\n          {required && (\n            <span className={fieldStyles.required} aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n      <div\n        role=\"radiogroup\"\n        aria-labelledby={label != null ? labelId : undefined}\n        aria-label={label == null ? ariaLabel : undefined}\n        aria-invalid={resolvedError || undefined}\n        aria-describedby={resolvedHelperText != null ? helperId : undefined}\n        className={clsx(styles.swatches, styles[size])}\n        // name + tabIndex are load-bearing for the form's scroll-to-error\n        {...(name ? { name, tabIndex: -1 } : {})}\n      >\n        {colors.map((color, index) => {\n          const isSelected = color.toLowerCase() === active\n          return (\n            <button\n              key={color}\n              ref={(el) => {\n                swatchRefs.current[index] = el\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isSelected}\n              aria-label={labels?.[color] ?? color}\n              tabIndex={index === tabbableIndex ? 0 : -1}\n              className={styles.swatch}\n              style={{ '--sw': color } as CSSProperties}\n              onClick={() => pick(color)}\n              onKeyDown={(e) => onSwatchKey(e, index)}\n            >\n              {isSelected ? (\n                <Icon\n                  name=\"TickCircle\"\n                  style={{ width: 'var(--sw-icon)', height: 'var(--sw-icon)' }}\n                />\n              ) : null}\n            </button>\n          )\n        })}\n      </div>\n      {resolvedHelperText != null && (\n        <Typography\n          as=\"span\"\n          id={helperId}\n          variant=\"bodySmall\"\n          color={resolvedError ? 'error' : 'muted'}\n          className={fieldStyles.helper}\n        >\n          {resolvedHelperText}\n        </Typography>\n      )}\n    </div>\n  )\n})\n"],"names":["SwatchPicker","forwardRef","colors","value","defaultValue","onChange","size","labels","label","error","helperText","required","name","className","ariaLabel","props","ref","id","useId","labelId","helperId","form","useFormContext","isFormBound","bound","externalValue","isControlled","internal","setInternal","useState","active","resolvedError","resolvedHelperText","pick","color","swatchRefs","useRef","selectedIndex","c","tabbableIndex","onSwatchKey","event","index","target","_a","jsxs","clsx","fieldStyles","jsx","Typography","styles","isSelected","el","e","Icon"],"mappings":"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"}
+{"version":3,"file":"SwatchPicker-DXEE9xqY.js","sources":["../src/components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport { Icon } from '../Icon'\nimport { Typography } from '../Typography'\n// shared field chrome (wrapper / label / helper / required / error / sizes)\nimport fieldStyles from '../TextField/TextField.module.css'\nimport styles from './SwatchPicker.module.css'\n\nexport type SwatchPickerSize = 'sm' | 'md' | 'lg'\n\nexport interface SwatchPickerProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /** The color values to render as selectable swatches (any CSS color — hex / `rgb()` / …). */\n  colors: string[]\n  /** The selected color (controlled) — matched case-insensitively against `colors`; `null` = none. */\n  value?: string | null\n  /** Initial selected color (uncontrolled). */\n  defaultValue?: string | null\n  /** Fires with the clicked color. */\n  onChange?: (color: string) => void\n  /**\n   * Swatch size — `sm` 30 / `md` 36 / `lg` 42 px, each with its own corner radius and tick size\n   * (12/16/20). Defaults to `md`. All three are per-size CSS vars in the module.\n   */\n  size?: SwatchPickerSize\n  /** Per-color accessible labels (falls back to the color value itself). */\n  labels?: Record<string, string>\n  /** Label rendered above the swatches. */\n  label?: ReactNode\n  /** Marks the field invalid — reddens the label/asterisk and shows `helperText` in the error color. */\n  error?: boolean\n  /** Helper / validation text under the swatches. Adopts the error color while `error`. */\n  helperText?: ReactNode\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Form field name — auto-binds to a surrounding `<Form>` (the form value is the color string). */\n  name?: string\n}\n\n/**\n * A grid of selectable color **swatches** (rounded tiles) — pick one from a fixed palette. The selected\n * swatch shows a centered white **`TickCircle`** icon. Unlike `ColorPicker` (a field + full popover\n * picker), this is a lightweight primitive for a **preset** set of colors — e.g. an accent-color chooser.\n * Controlled (`value` + `onChange`) or uncontrolled (`defaultValue`); binds to a surrounding `<Form>` by\n * `name` (the form value is the color string — validate with e.g. `z.string().min(1, 'Pick a color')`),\n * and shares the field family's `label` / `error` + `helperText` / `required` chrome.\n *\n * Swatch fills are arbitrary CSS colors (fed via an inline `--sw` var), not `--tz-*` tokens — a\n * deliberate exception, like `ColorPicker`'s spectrum. a11y: `role=\"radiogroup\"` (labelled by `label`\n * or `aria-label`) with `role=\"radio\"` + `aria-checked` swatches; the group carries `name` for the\n * form's scroll-to-error.\n */\nexport const SwatchPicker = forwardRef<HTMLDivElement, SwatchPickerProps>(function SwatchPicker(\n  {\n    colors,\n    value,\n    defaultValue = null,\n    onChange,\n    size = 'md',\n    labels,\n    label,\n    error,\n    helperText,\n    required = false,\n    name,\n    className,\n    'aria-label': ariaLabel,\n    ...props\n  },\n  ref,\n) {\n  const id = useId()\n  const labelId = `${id}-label`\n  const helperId = `${id}-helper`\n\n  // Auto-bind to a surrounding <Form> by `name` — the form value is the color string.\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const externalValue: string | null | undefined =\n    value !== undefined\n      ? value\n      : isFormBound\n        ? ((form!.values[name!] as string | null | undefined) ?? null)\n        : undefined\n  const isControlled = externalValue !== undefined\n  const [internal, setInternal] = useState<string | null>(defaultValue)\n  const selected = isControlled ? externalValue! : internal\n  const active = (selected ?? '').toLowerCase()\n\n  const resolvedError = error ?? bound?.error ?? false\n  const resolvedHelperText = helperText ?? bound?.helperText\n\n  const pick = (color: string) => {\n    if (!isControlled) setInternal(color)\n    if (isFormBound) form!.setValue(name!, color)\n    onChange?.(color)\n  }\n\n  // roving tabindex (ARIA radiogroup): only the selected swatch — or the first, if none — is tabbable;\n  // arrows move selection between swatches (wrapping), Home/End jump to the ends\n  const swatchRefs = useRef<(HTMLButtonElement | null)[]>([])\n  const selectedIndex = colors.findIndex((c) => c.toLowerCase() === active)\n  const tabbableIndex = selectedIndex >= 0 ? selectedIndex : 0\n  const onSwatchKey = (event: ReactKeyboardEvent<HTMLButtonElement>, index: number) => {\n    let target = index\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        target = (index + 1) % colors.length\n        break\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        target = (index - 1 + colors.length) % colors.length\n        break\n      case 'Home':\n        target = 0\n        break\n      case 'End':\n        target = colors.length - 1\n        break\n      default:\n        return\n    }\n    event.preventDefault()\n    pick(colors[target])\n    swatchRefs.current[target]?.focus()\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        fieldStyles.field,\n        fieldStyles[size],\n        resolvedError && fieldStyles.error,\n        className,\n      )}\n      {...props}\n    >\n      {label != null && (\n        <label id={labelId} className={fieldStyles.label}>\n          <Typography as=\"span\" variant=\"bodySmall\" color=\"muted\">\n            {label}\n          </Typography>\n          {required && (\n            <span className={fieldStyles.required} aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n      <div\n        role=\"radiogroup\"\n        aria-labelledby={label != null ? labelId : undefined}\n        aria-label={label == null ? ariaLabel : undefined}\n        aria-invalid={resolvedError || undefined}\n        aria-describedby={resolvedHelperText != null ? helperId : undefined}\n        className={clsx(styles.swatches, styles[size])}\n        // name + tabIndex are load-bearing for the form's scroll-to-error\n        {...(name ? { name, tabIndex: -1 } : {})}\n      >\n        {colors.map((color, index) => {\n          const isSelected = color.toLowerCase() === active\n          return (\n            <button\n              key={color}\n              ref={(el) => {\n                swatchRefs.current[index] = el\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isSelected}\n              aria-label={labels?.[color] ?? color}\n              tabIndex={index === tabbableIndex ? 0 : -1}\n              className={styles.swatch}\n              style={{ '--sw': color } as CSSProperties}\n              onClick={() => pick(color)}\n              onKeyDown={(e) => onSwatchKey(e, index)}\n            >\n              {isSelected ? (\n                <Icon\n                  name=\"TickCircle\"\n                  style={{ width: 'var(--sw-icon)', height: 'var(--sw-icon)' }}\n                />\n              ) : null}\n            </button>\n          )\n        })}\n      </div>\n      {resolvedHelperText != null && (\n        <Typography\n          as=\"span\"\n          id={helperId}\n          variant=\"bodySmall\"\n          color={resolvedError ? 'error' : 'muted'}\n          className={fieldStyles.helper}\n        >\n          {resolvedHelperText}\n        </Typography>\n      )}\n    </div>\n  )\n})\n"],"names":["SwatchPicker","forwardRef","colors","value","defaultValue","onChange","size","labels","label","error","helperText","required","name","className","ariaLabel","props","ref","id","useId","labelId","helperId","form","useFormContext","isFormBound","bound","externalValue","isControlled","internal","setInternal","useState","active","resolvedError","resolvedHelperText","pick","color","swatchRefs","useRef","selectedIndex","c","tabbableIndex","onSwatchKey","event","index","target","_a","jsxs","clsx","fieldStyles","jsx","Typography","styles","isSelected","el","e","Icon"],"mappings":"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"}