@techzyapp/ui-library 1.0.0

package/dist/Slider-oGXd5e9X.js

@@ -0,0 +1,184 @@
+import { jsxs as h, jsx as s } from "react/jsx-runtime";
+import { forwardRef as da, useId as oa, useState as ia } from "react";
+import { clsx as g } from "clsx";
+import { u as ua } from "./formContext-B7ln1Miy.js";
+import { T as A } from "./Typography-Cta6Rg4L.js";
+import { f as c } from "./TextField.module-QePvGeJ3.js";
+const _a = "_sm_1bd0d_5", ha = "_md_1bd0d_9", pa = "_lg_1bd0d_13", va = "_labelRow_1bd0d_18", ba = "_value_1bd0d_24", ma = "_track_1bd0d_30", ga = "_hasMarks_1bd0d_37", fa = "_input_1bd0d_42", ka = "_marks_1bd0d_109", ya = "_mark_1bd0d_109", Na = "_tick_1bd0d_128", Ma = "_markLabel_1bd0d_134", Ia = "_rangeTrack_1bd0d_141", Sa = "_rail_1bd0d_146", $a = "_rangeFill_1bd0d_147", wa = "_rangeInput_1bd0d_164", e = {
+  sm: _a,
+  md: ha,
+  lg: pa,
+  labelRow: va,
+  value: ba,
+  track: ma,
+  hasMarks: ga,
+  input: fa,
+  marks: ka,
+  mark: ya,
+  tick: Na,
+  markLabel: Ma,
+  rangeTrack: Ia,
+  rail: Sa,
+  rangeFill: $a,
+  rangeInput: wa
+}, f = (k, t, d) => Math.min(Math.max(k, t), d), w = (k, t, d) => d > t ? (k - t) / (d - t) * 100 : 0, Pa = da(function({
+  label: t,
+  size: d = "md",
+  error: O,
+  helperText: Q,
+  required: U = !1,
+  fullWidth: X = !0,
+  range: y = !1,
+  value: B,
+  defaultValue: Y,
+  onChange: R,
+  min: l = 0,
+  max: r = 100,
+  step: T = 1,
+  color: Z = "accent",
+  disabled: N = !1,
+  valueLabel: F = !0,
+  marks: p,
+  name: o,
+  onBlur: V,
+  id: x,
+  className: aa,
+  style: ea,
+  ...P
+}, j) {
+  const la = oa(), M = x ?? la, I = `${M}-helper`, v = ua(), L = !!(v && o), n = v && o ? v.field(o) : void 0, q = y ? [l, r] : l, C = B !== void 0 ? B : L ? v.values[o] ?? q : void 0, E = C !== void 0, [ra, ta] = ia(Y ?? q), u = E ? C : ra, S = Array.isArray(u) ? u : [l, u], i = f(Math.min(S[0], S[1]), l, r), _ = f(Math.max(S[0], S[1]), l, r), $ = f(Array.isArray(u) ? u[0] : u, l, r), b = O ?? (n == null ? void 0 : n.error) ?? !1, m = Q ?? (n == null ? void 0 : n.helperText), H = (a) => {
+    E || ta(a), L && v.setValue(o, a), R == null || R(a);
+  }, W = (a, ca) => {
+    const J = f(a, l, r), K = f(ca, l, r);
+    H([Math.min(J, K), Math.max(J, K)]);
+  }, z = (a) => {
+    n == null || n.onBlur(a), V == null || V(a);
+  }, D = F !== !1, sa = typeof F == "function" ? F(y ? [i, _] : $) : y ? `${i} – ${_}` : $, G = w(i, l, r), na = w(_, l, r);
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      className: g(
+        c.field,
+        c[d],
+        e[d],
+        X && c.fullWidth,
+        b && c.error,
+        N && c.disabled,
+        aa
+      ),
+      style: {
+        "--tz-btn-rgb": `var(--tz-color-${Z}-rgb)`,
+        "--tz-slider-fill": `${w($, l, r)}%`,
+        ...ea
+      },
+      children: [
+        (t != null || D) && /* @__PURE__ */ h("div", { className: e.labelRow, children: [
+          t != null ? /* @__PURE__ */ h("label", { htmlFor: M, className: c.label, children: [
+            /* @__PURE__ */ s(A, { as: "span", variant: "bodySmall", color: "muted", children: t }),
+            U && /* @__PURE__ */ s("span", { className: c.required, "aria-hidden": "true", children: "*" })
+          ] }) : /* @__PURE__ */ s("span", {}),
+          D && /* @__PURE__ */ s(A, { as: "span", variant: "bodySmall", className: e.value, children: sa })
+        ] }),
+        y ? /* @__PURE__ */ h("div", { className: g(e.track, e.rangeTrack), children: [
+          /* @__PURE__ */ s("span", { className: e.rail, "aria-hidden": !0 }),
+          /* @__PURE__ */ s(
+            "span",
+            {
+              className: e.rangeFill,
+              "aria-hidden": !0,
+              style: { left: `${G}%`, width: `${na - G}%` }
+            }
+          ),
+          /* @__PURE__ */ s(
+            "input",
+            {
+              ref: j,
+              id: M,
+              name: o,
+              type: "range",
+              min: l,
+              max: r,
+              step: T,
+              value: i,
+              onChange: (a) => W(Math.min(Number(a.target.value), _), _),
+              onBlur: z,
+              disabled: N,
+              className: g(e.input, e.rangeInput),
+              style: { zIndex: i >= r ? 5 : 3 },
+              "aria-label": t != null ? `${String(t)} start` : "Range start",
+              "aria-invalid": b || void 0,
+              "aria-describedby": m != null ? I : void 0,
+              ...P
+            }
+          ),
+          /* @__PURE__ */ s(
+            "input",
+            {
+              type: "range",
+              min: l,
+              max: r,
+              step: T,
+              value: _,
+              onChange: (a) => W(i, Math.max(Number(a.target.value), i)),
+              onBlur: z,
+              disabled: N,
+              className: g(e.input, e.rangeInput),
+              style: { zIndex: 4 },
+              "aria-label": t != null ? `${String(t)} end` : "Range end",
+              "aria-invalid": b || void 0,
+              "aria-describedby": m != null ? I : void 0
+            }
+          )
+        ] }) : /* @__PURE__ */ h("div", { className: g(e.track, p != null && p.length > 0 && e.hasMarks), children: [
+          /* @__PURE__ */ s(
+            "input",
+            {
+              ref: j,
+              id: M,
+              name: o,
+              type: "range",
+              min: l,
+              max: r,
+              step: T,
+              value: $,
+              onChange: (a) => H(Number(a.target.value)),
+              onBlur: z,
+              disabled: N,
+              className: e.input,
+              "aria-invalid": b || void 0,
+              "aria-describedby": m != null ? I : void 0,
+              ...P
+            }
+          ),
+          p != null && p.length > 0 && /* @__PURE__ */ s("div", { className: e.marks, "aria-hidden": !0, children: p.map((a) => /* @__PURE__ */ h(
+            "span",
+            {
+              className: e.mark,
+              style: { left: `${w(a.value, l, r)}%` },
+              children: [
+                /* @__PURE__ */ s("span", { className: e.tick }),
+                a.label != null && /* @__PURE__ */ s("span", { className: e.markLabel, children: a.label })
+              ]
+            },
+            a.value
+          )) })
+        ] }),
+        m != null && /* @__PURE__ */ s(
+          A,
+          {
+            as: "span",
+            id: I,
+            variant: "bodySmall",
+            color: b ? "error" : "muted",
+            className: c.helper,
+            children: m
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  Pa as S
+};
+//# sourceMappingURL=Slider-oGXd5e9X.js.map

package/dist/Slider-oGXd5e9X.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider-oGXd5e9X.js","sources":["../src/components/Slider/Slider.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  useState,\n  type CSSProperties,\n  type ChangeEvent,\n  type FocusEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport { Typography } from '../Typography'\nimport type { ThemeColor } from '../../theme'\n// shared field chrome (wrapper / label / helper / required / error / sizes)\nimport fieldStyles from '../TextField/TextField.module.css'\nimport styles from './Slider.module.css'\n\nexport type SliderSize = 'sm' | 'md' | 'lg'\n/** A single value, or a `[start, end]` tuple when `range`. */\nexport type SliderValue = number | [number, number]\n\n/** A labeled tick under the track. */\nexport interface SliderMark {\n  value: number\n  label?: ReactNode\n}\n\nexport interface SliderProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'value' | 'defaultValue' | 'onChange' | 'type' | 'min' | 'max' | 'step' | 'color'\n> {\n  /** Label rendered above the track. */\n  label?: ReactNode\n  /** Preset size — drives the track + thumb dimensions and the label/helper font. */\n  size?: SliderSize\n  /** Marks the field invalid: red focus ring + the `helperText` in the error color. */\n  error?: boolean\n  /** Helper / validation text under the track. Adopts the error color while `error`. */\n  helperText?: ReactNode\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Stretches the slider to fill its container width. Defaults to `true`. */\n  fullWidth?: boolean\n  /** Two-thumb range mode — pick a `[start, end]` span (e.g. 5–10). The value becomes a tuple. */\n  range?: boolean\n  /** Controlled value — a `number`, or a `[start, end]` tuple when `range`. */\n  value?: SliderValue\n  /** Initial value for uncontrolled use. Defaults to `min` (or `[min, max]` when `range`). */\n  defaultValue?: SliderValue\n  /** Fires with the next value (a `number`, or a `[start, end]` tuple when `range`). */\n  onChange?: (value: SliderValue) => void\n  /** Minimum value. Defaults to `0`. */\n  min?: number\n  /** Maximum value. Defaults to `100`. */\n  max?: number\n  /** Increment the thumb snaps to (arrow keys + drag). Defaults to `1`. */\n  step?: number\n  /** Theme palette token that tints the fill + thumb. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Disables the slider. */\n  disabled?: boolean\n  /**\n   * Show the current value at the end of the label row. Defaults to `true`. Pass a function to format\n   * it (receives the `number` or `[start, end]`), or `false` to hide it.\n   */\n  valueLabel?: boolean | ((value: SliderValue) => ReactNode)\n  /** Optional labeled ticks under the track (e.g. `[{ value: 0, label: 'Min' }, …]`). */\n  marks?: SliderMark[]\n}\n\nconst clamp = (n: number, lo: number, hi: number) => Math.min(Math.max(n, lo), hi)\nconst toPercent = (v: number, min: number, max: number) =>\n  max > min ? ((v - min) / (max - min)) * 100 : 0\n\n/**\n * A range slider — drag (or arrow-key / Home / End) a thumb along the track to pick a number, snapping\n * to `step`. Built on a native `<input type=\"range\">`, so keyboard, dragging, step/min/max, and a11y\n * come for free; the track / fill / thumb are styled with `--tz-*` tokens and tinted by `color`. Pass\n * **`range`** for a two-thumb span (the value becomes a `[start, end]` tuple). Controlled (`value` +\n * `onChange`) or uncontrolled (`defaultValue`); a `name` binds it to a surrounding `<Form>` — the form\n * value is a real `number` (or `[start, end]`), validated with `z.number()` / `z.tuple([…])`.\n */\nexport const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(\n  {\n    label,\n    size = 'md',\n    error,\n    helperText,\n    required = false,\n    fullWidth = true,\n    range = false,\n    value,\n    defaultValue,\n    onChange,\n    min = 0,\n    max = 100,\n    step = 1,\n    color = 'accent',\n    disabled = false,\n    valueLabel = true,\n    marks,\n    name,\n    onBlur,\n    id: idProp,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const reactId = useId()\n  const id = idProp ?? reactId\n  const helperId = `${id}-helper`\n\n  // Auto-bind to a surrounding <Form> by `name` — the form value is a real number (or tuple); the\n  // touched/error state comes from field(), the raw value from values[name] (tuples must not be coerced).\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const fallback: SliderValue = range ? [min, max] : min\n  const externalValue: SliderValue | undefined =\n    value !== undefined\n      ? value\n      : isFormBound\n        ? ((form!.values[name!] as SliderValue | undefined) ?? fallback)\n        : undefined\n  const isControlled = externalValue !== undefined\n  const [internal, setInternal] = useState<SliderValue>(defaultValue ?? fallback)\n  const raw = isControlled ? externalValue! : internal\n\n  // Normalize to the active shape (clamped, and — for a range — ordered low ≤ high).\n  const tuple = Array.isArray(raw) ? raw : [min, raw]\n  const lo = clamp(Math.min(tuple[0], tuple[1]), min, max)\n  const hi = clamp(Math.max(tuple[0], tuple[1]), min, max)\n  const single = clamp(Array.isArray(raw) ? raw[0] : raw, min, max)\n\n  const resolvedError = error ?? bound?.error ?? false\n  const resolvedHelperText = helperText ?? bound?.helperText\n\n  const commit = (next: SliderValue) => {\n    if (!isControlled) setInternal(next)\n    if (isFormBound) form!.setValue(name!, next)\n    onChange?.(next)\n  }\n  const commitRange = (nextLo: number, nextHi: number) => {\n    const l = clamp(nextLo, min, max)\n    const h = clamp(nextHi, min, max)\n    commit([Math.min(l, h), Math.max(l, h)])\n  }\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    bound?.onBlur(event)\n    onBlur?.(event)\n  }\n\n  const showValue = valueLabel !== false\n  const currentValue: SliderValue = range ? [lo, hi] : single\n  const renderedValue =\n    typeof valueLabel === 'function' ? valueLabel(currentValue) : range ? `${lo} – ${hi}` : single\n\n  const loPct = toPercent(lo, min, max)\n  const hiPct = toPercent(hi, min, max)\n\n  return (\n    <div\n      className={clsx(\n        fieldStyles.field,\n        fieldStyles[size],\n        styles[size],\n        fullWidth && fieldStyles.fullWidth,\n        resolvedError && fieldStyles.error,\n        disabled && fieldStyles.disabled,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-slider-fill': `${toPercent(single, min, max)}%`,\n          ...style,\n        } as CSSProperties\n      }\n    >\n      {(label != null || showValue) && (\n        <div className={styles.labelRow}>\n          {label != null ? (\n            <label htmlFor={id} 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            <span />\n          )}\n          {showValue && (\n            <Typography as=\"span\" variant=\"bodySmall\" className={styles.value}>\n              {renderedValue}\n            </Typography>\n          )}\n        </div>\n      )}\n\n      {range ? (\n        <div className={clsx(styles.track, styles.rangeTrack)}>\n          <span className={styles.rail} aria-hidden />\n          <span\n            className={styles.rangeFill}\n            aria-hidden\n            style={{ left: `${loPct}%`, width: `${hiPct - loPct}%` }}\n          />\n          {/* start thumb — can't pass the end thumb */}\n          <input\n            ref={ref}\n            id={id}\n            name={name}\n            type=\"range\"\n            min={min}\n            max={max}\n            step={step}\n            value={lo}\n            onChange={(e: ChangeEvent<HTMLInputElement>) =>\n              commitRange(Math.min(Number(e.target.value), hi), hi)\n            }\n            onBlur={handleBlur}\n            disabled={disabled}\n            className={clsx(styles.input, styles.rangeInput)}\n            // end thumb sits on top by default (z 4); raise the start above it (z 5) only when both pile\n            // at max, so whichever thumb needs grabbing is always reachable\n            style={{ zIndex: lo >= max ? 5 : 3 }}\n            aria-label={label != null ? `${String(label)} start` : 'Range start'}\n            aria-invalid={resolvedError || undefined}\n            aria-describedby={resolvedHelperText != null ? helperId : undefined}\n            {...props}\n          />\n          {/* end thumb — can't pass the start thumb */}\n          <input\n            type=\"range\"\n            min={min}\n            max={max}\n            step={step}\n            value={hi}\n            onChange={(e: ChangeEvent<HTMLInputElement>) =>\n              commitRange(lo, Math.max(Number(e.target.value), lo))\n            }\n            onBlur={handleBlur}\n            disabled={disabled}\n            className={clsx(styles.input, styles.rangeInput)}\n            style={{ zIndex: 4 }}\n            aria-label={label != null ? `${String(label)} end` : 'Range end'}\n            aria-invalid={resolvedError || undefined}\n            aria-describedby={resolvedHelperText != null ? helperId : undefined}\n          />\n        </div>\n      ) : (\n        <div className={clsx(styles.track, marks != null && marks.length > 0 && styles.hasMarks)}>\n          <input\n            ref={ref}\n            id={id}\n            name={name}\n            type=\"range\"\n            min={min}\n            max={max}\n            step={step}\n            value={single}\n            onChange={(e: ChangeEvent<HTMLInputElement>) => commit(Number(e.target.value))}\n            onBlur={handleBlur}\n            disabled={disabled}\n            className={styles.input}\n            aria-invalid={resolvedError || undefined}\n            aria-describedby={resolvedHelperText != null ? helperId : undefined}\n            {...props}\n          />\n          {marks != null && marks.length > 0 && (\n            <div className={styles.marks} aria-hidden>\n              {marks.map((mark) => (\n                <span\n                  key={mark.value}\n                  className={styles.mark}\n                  style={{ left: `${toPercent(mark.value, min, max)}%` }}\n                >\n                  <span className={styles.tick} />\n                  {mark.label != null && <span className={styles.markLabel}>{mark.label}</span>}\n                </span>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n\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":["clamp","n","lo","hi","toPercent","v","min","max","Slider","forwardRef","label","size","error","helperText","required","fullWidth","range","value","defaultValue","onChange","step","color","disabled","valueLabel","marks","name","onBlur","idProp","className","style","props","ref","reactId","useId","id","helperId","form","useFormContext","isFormBound","bound","fallback","externalValue","isControlled","internal","setInternal","useState","raw","tuple","single","resolvedError","resolvedHelperText","commit","next","commitRange","nextLo","nextHi","l","h","handleBlur","event","showValue","renderedValue","loPct","hiPct","jsxs","clsx","fieldStyles","styles","jsx","Typography","e","mark"],"mappings":"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"}

package/dist/SpeedDial-C4jxIXTr.cjs

@@ -0,0 +1,2 @@
+"use strict";const n=require("react/jsx-runtime"),o=require("react"),_=require("clsx"),A=require("./names-C2Yj1p3u.cjs"),C=require("./Icon-CXTl_QAP.cjs"),R=require("./IconButton-D6TenQZ_.cjs"),G=require("./Tooltip-Ao7az09p.cjs"),M=o.createContext(null);function H(){return o.useContext(M)}const J="_speedDial_1qwl9_4",Q="_fab_1qwl9_9",U="_fabIcon_1qwl9_17",V="_fabIconOpen_1qwl9_21",X="_actions_1qwl9_26",Y="_up_1qwl9_47",ee="_down_1qwl9_53",te="_left_1qwl9_59",ne="_right_1qwl9_65",se="_action_1qwl9_26",oe="_actionWrap_1qwl9_91",ce="_actionLabel_1qwl9_95",re="_labelLeft_1qwl9_110",ae="_labelTop_1qwl9_117",s={speedDial:J,fab:Q,fabIcon:U,fabIconOpen:V,actions:X,up:Y,down:ee,left:te,right:ne,action:se,actionWrap:oe,actionLabel:ce,labelLeft:re,labelTop:ae},le=new Set(A.ICON_NAMES),k=o.forwardRef(function({icon:a,label:c,tooltipOpen:i,hideTooltip:b=!1,onClick:u,disabled:m,className:w,...I},f){const t=H(),N=typeof a=="string"&&le.has(a)?n.jsx(C.Icon,{name:a}):a,p=n.jsx(R.IconButton,{ref:f,rounded:!0,variant:"contained",color:"surface",size:(t==null?void 0:t.size)??"sm",disabled:m,"aria-label":typeof c=="string"?c:void 0,className:_.clsx(s.action,w),onClick:E=>{u==null||u(E),t!=null&&t.closeOnClick&&t.requestClose()},...I,children:N});if(c==null||b)return p;const d=(t==null?void 0:t.placement)??"left";return i??(t==null?void 0:t.persistentLabels)??!1?n.jsxs("span",{className:_.clsx(s.actionWrap,d==="top"?s.labelTop:s.labelLeft),children:[p,n.jsx("span",{className:s.actionLabel,children:c})]}):n.jsx(G.Tooltip,{content:c,placement:d,children:p})}),ie=new Set(A.ICON_NAMES),ue={sm:"sm",md:"sm",lg:"md"},fe={up:"left",down:"left",left:"top",right:"top"},pe=o.forwardRef(function({ariaLabel:a,icon:c="Add",openIcon:i,direction:b="up",color:u="primary",size:m="md",open:w,defaultOpen:I=!1,onOpenChange:f,openOnHover:t=!0,closeOnActionClick:N=!0,tooltipOpen:p=!1,actions:d,disabled:L=!1,children:E,className:P,style:W,...B},q){const S=o.useRef(null),j=o.useRef(null),v=o.useId(),O=w!==void 0,[z,K]=o.useState(I),r=O?w:z,l=e=>{O||K(e),f==null||f(e)},D=o.useRef(l);D.current=l,o.useEffect(()=>{if(!r)return;const e=h=>{S.current&&!S.current.contains(h.target)&&D.current(!1)},x=h=>{var y;h.key==="Escape"&&(D.current(!1),(y=j.current)==null||y.focus())};return document.addEventListener("pointerdown",e),document.addEventListener("keydown",x),()=>{document.removeEventListener("pointerdown",e),document.removeEventListener("keydown",x)}},[r]);const Z=e=>{S.current=e,typeof q=="function"?q(e):q&&(q.current=e)},T=e=>typeof e=="string"&&ie.has(e)?n.jsx(C.Icon,{name:e}):e,$={size:ue[m],placement:fe[b],closeOnClick:N,persistentLabels:p,requestClose:()=>l(!1)},F=t&&!L?{onMouseEnter:()=>l(!0),onMouseLeave:()=>l(!1)}:{};return n.jsxs("div",{ref:Z,className:_.clsx(s.speedDial,P),style:W,...F,...B,children:[n.jsx("div",{id:v,className:_.clsx(s.actions,s[b]),"data-open":r?"true":"false",children:n.jsx(M.Provider,{value:$,children:d?d.map((e,x)=>n.jsx(k,{icon:e.icon,label:e.label,onClick:e.onClick,disabled:e.disabled},e.key??x)):E})}),n.jsx(R.IconButton,{ref:j,rounded:!0,variant:"contained",color:u,size:m,disabled:L,"aria-label":a,"aria-haspopup":"true","aria-expanded":r,"aria-controls":v,className:s.fab,onClick:()=>l(!r),children:n.jsx("span",{className:_.clsx(s.fabIcon,!i&&r&&s.fabIconOpen),children:r&&i!=null?T(i):T(c)})})]})});exports.SpeedDial=pe;exports.SpeedDialAction=k;
+//# sourceMappingURL=SpeedDial-C4jxIXTr.cjs.map

package/dist/SpeedDial-C4jxIXTr.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpeedDial-C4jxIXTr.cjs","sources":["../src/components/SpeedDial/speedDialContext.ts","../src/components/SpeedDial/SpeedDialAction.tsx","../src/components/SpeedDial/SpeedDial.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { TooltipPlacement } from '../Tooltip'\n\n/** Action button size — one step smaller than the dial's FAB. */\nexport type SpeedDialActionSize = 'sm' | 'md' | 'lg'\n\n/** Shared state a `<SpeedDial>` hands down to its `<SpeedDialAction>` children via context. */\nexport interface SpeedDialContextValue {\n  /** Size for the action FABs. */\n  size: SpeedDialActionSize\n  /** Where each action's tooltip label sits (derived from the dial `direction`). */\n  placement: TooltipPlacement\n  /** Close the dial after an action is clicked. */\n  closeOnClick: boolean\n  /** Show every action's label persistently (no hover needed) while the dial is open. */\n  persistentLabels: boolean\n  /** Request the dial to close (called by an action on click). */\n  requestClose: () => void\n}\n\nexport const SpeedDialContext = createContext<SpeedDialContextValue | null>(null)\n\n/** Read the surrounding `<SpeedDial>` (or `null` when an action is rendered standalone). */\nexport function useSpeedDial(): SpeedDialContextValue | null {\n  return useContext(SpeedDialContext)\n}\n","import { forwardRef, type ButtonHTMLAttributes, type MouseEvent, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { Icon } from '../Icon'\nimport { IconButton } from '../IconButton'\nimport { Tooltip } from '../Tooltip'\nimport { useSpeedDial } from './speedDialContext'\nimport styles from './SpeedDial.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport interface SpeedDialActionProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'color'\n> {\n  /** Action icon — a known `IconName` or any node. */\n  icon: IconName | ReactNode\n  /** Label shown as a tooltip beside the action (also its `aria-label` when a string). */\n  label?: ReactNode\n  /** Show the label persistently (no hover) while the dial is open — overrides the dial's `tooltipOpen`. */\n  tooltipOpen?: boolean\n  /** Hide the tooltip / persistent label (still used for `aria-label`). */\n  hideTooltip?: boolean\n}\n\n/**\n * One action inside a `<SpeedDial>` — a small circular `IconButton` (surface-tinted) with a tooltip\n * `label`. It reads the dial via context for its size, tooltip placement and close-on-click; clicking\n * runs `onClick` then closes the dial. The ref points at the `<button>`.\n */\nexport const SpeedDialAction = forwardRef<HTMLButtonElement, SpeedDialActionProps>(\n  function SpeedDialAction(\n    { icon, label, tooltipOpen, hideTooltip = false, onClick, disabled, className, ...props },\n    ref,\n  ) {\n    const dial = useSpeedDial()\n    const iconNode =\n      typeof icon === 'string' && ICON_NAME_SET.has(icon) ? <Icon name={icon as IconName} /> : icon\n\n    const button = (\n      <IconButton\n        ref={ref}\n        rounded\n        variant=\"contained\"\n        color=\"surface\"\n        size={dial?.size ?? 'sm'}\n        disabled={disabled}\n        aria-label={typeof label === 'string' ? label : undefined}\n        className={clsx(styles.action, className)}\n        onClick={(event: MouseEvent<HTMLButtonElement>) => {\n          onClick?.(event)\n          if (dial?.closeOnClick) dial.requestClose()\n        }}\n        {...props}\n      >\n        {iconNode}\n      </IconButton>\n    )\n\n    if (label == null || hideTooltip) return button\n\n    const placement = dial?.placement ?? 'left'\n    // persistent label: render a static label beside the button (no hover) — like MUI's tooltipOpen\n    const persistent = tooltipOpen ?? dial?.persistentLabels ?? false\n    if (persistent) {\n      return (\n        <span\n          className={clsx(\n            styles.actionWrap,\n            placement === 'top' ? styles.labelTop : styles.labelLeft,\n          )}\n        >\n          {button}\n          <span className={styles.actionLabel}>{label}</span>\n        </span>\n      )\n    }\n\n    return (\n      <Tooltip content={label} placement={placement}>\n        {button}\n      </Tooltip>\n    )\n  },\n)\n","import {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport type { ThemeColor } from '../../theme'\nimport type { TooltipPlacement } from '../Tooltip'\nimport { Icon } from '../Icon'\nimport { IconButton } from '../IconButton'\nimport { SpeedDialAction } from './SpeedDialAction'\nimport {\n  SpeedDialContext,\n  type SpeedDialActionSize,\n  type SpeedDialContextValue,\n} from './speedDialContext'\nimport styles from './SpeedDial.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type SpeedDialSize = 'sm' | 'md' | 'lg'\nexport type SpeedDialDirection = 'up' | 'down' | 'left' | 'right'\n\n/** The FAB size → the (smaller) action-button size. */\nconst ACTION_SIZE: Record<SpeedDialSize, SpeedDialActionSize> = { sm: 'sm', md: 'sm', lg: 'md' }\n/** Tooltip side per direction — labels sit left of a vertical dial, above a horizontal one. */\nconst TOOLTIP_PLACEMENT: Record<SpeedDialDirection, TooltipPlacement> = {\n  up: 'left',\n  down: 'left',\n  left: 'top',\n  right: 'top',\n}\n\n/** A data-driven action for the `actions` prop. */\nexport interface SpeedDialActionItem {\n  /** Stable key (falls back to the index). */\n  key?: string\n  icon: IconName | ReactNode\n  label?: ReactNode\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void\n  disabled?: boolean\n}\n\nexport interface SpeedDialProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onChange'> {\n  /** Accessible label for the FAB (required — it's icon-only). */\n  ariaLabel: string\n  /** FAB icon. Defaults to `Add` (a `+`). */\n  icon?: IconName | ReactNode\n  /** Icon shown while open. Omit to rotate the `icon` 45° instead (a `+` becomes a `×`). */\n  openIcon?: IconName | ReactNode\n  /** Which way the actions fan out. Defaults to `up`. */\n  direction?: SpeedDialDirection\n  /** Theme palette token tinting the FAB. Defaults to `primary`. */\n  color?: ThemeColor\n  /** FAB size (actions render one step smaller). Defaults to `md`. */\n  size?: SpeedDialSize\n  /** Controlled open state. */\n  open?: boolean\n  /** Initial open state for uncontrolled use. Defaults to `false`. */\n  defaultOpen?: boolean\n  /** Fires with the next open state. */\n  onOpenChange?: (open: boolean) => void\n  /** Open on hover (also opens on click). Defaults to `true`. */\n  openOnHover?: boolean\n  /** Close the dial after an action is clicked. Defaults to `true`. */\n  closeOnActionClick?: boolean\n  /** Show every action's label persistently while open (no hover needed) — like MUI's `tooltipOpen`. */\n  tooltipOpen?: boolean\n  /** Data-driven actions — an alternative to `<SpeedDialAction>` children. */\n  actions?: SpeedDialActionItem[]\n  /** Disables the FAB (and hover-opening). */\n  disabled?: boolean\n  /** `<SpeedDialAction>` children (used when `actions` is not given). */\n  children?: ReactNode\n}\n\n/**\n * A floating action button that reveals a set of related actions on hover / click — fanning out in\n * `direction` (`up` default). The FAB icon rotates 45° when open (a `+` → `×`) unless an `openIcon` is\n * given. Each `<SpeedDialAction>` is a small circular button with a tooltip label; supply them via the\n * data-driven `actions` prop or as children. Opens on hover (`openOnHover`) and click; closes on\n * outside-pointerdown, Escape (refocusing the FAB), or selecting an action. Controlled (`open` +\n * `onOpenChange`) or uncontrolled (`defaultOpen`). The ref points at the root; position it (e.g.\n * `fixed` bottom-right) via `style`/`className`. The FAB carries `aria-expanded`/`aria-controls`.\n */\nexport const SpeedDial = forwardRef<HTMLDivElement, SpeedDialProps>(function SpeedDial(\n  {\n    ariaLabel,\n    icon = 'Add',\n    openIcon,\n    direction = 'up',\n    color = 'primary',\n    size = 'md',\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    openOnHover = true,\n    closeOnActionClick = true,\n    tooltipOpen = false,\n    actions,\n    disabled = false,\n    children,\n    className,\n    style,\n    ...props\n  },\n  forwardedRef,\n) {\n  const rootRef = useRef<HTMLDivElement | null>(null)\n  const fabRef = useRef<HTMLButtonElement | null>(null)\n  const actionsId = useId()\n\n  const isControlled = open !== undefined\n  const [internal, setInternal] = useState(defaultOpen)\n  const isOpen = isControlled ? open : internal\n\n  const setOpen = (next: boolean) => {\n    if (!isControlled) setInternal(next)\n    onOpenChange?.(next)\n  }\n  // keep a stable reference for the document listeners below\n  const setOpenRef = useRef(setOpen)\n  setOpenRef.current = setOpen\n\n  // while open: close on outside pointerdown / Escape (Escape refocuses the FAB)\n  useEffect(() => {\n    if (!isOpen) return\n    const onPointerDown = (event: PointerEvent) => {\n      if (rootRef.current && !rootRef.current.contains(event.target as Node)) {\n        setOpenRef.current(false)\n      }\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setOpenRef.current(false)\n        fabRef.current?.focus()\n      }\n    }\n    document.addEventListener('pointerdown', onPointerDown)\n    document.addEventListener('keydown', onKeyDown)\n    return () => {\n      document.removeEventListener('pointerdown', onPointerDown)\n      document.removeEventListener('keydown', onKeyDown)\n    }\n  }, [isOpen])\n\n  const setRootRef = (node: HTMLDivElement | null) => {\n    rootRef.current = node\n    if (typeof forwardedRef === 'function') forwardedRef(node)\n    else if (forwardedRef) forwardedRef.current = node\n  }\n\n  const renderIcon = (value: IconName | ReactNode) =>\n    typeof value === 'string' && ICON_NAME_SET.has(value) ? (\n      <Icon name={value as IconName} />\n    ) : (\n      value\n    )\n\n  const ctx: SpeedDialContextValue = {\n    size: ACTION_SIZE[size],\n    placement: TOOLTIP_PLACEMENT[direction],\n    closeOnClick: closeOnActionClick,\n    persistentLabels: tooltipOpen,\n    requestClose: () => setOpen(false),\n  }\n\n  const hoverProps =\n    openOnHover && !disabled\n      ? { onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false) }\n      : {}\n\n  return (\n    <div\n      ref={setRootRef}\n      className={clsx(styles.speedDial, className)}\n      style={style as CSSProperties}\n      {...hoverProps}\n      {...props}\n    >\n      <div\n        id={actionsId}\n        className={clsx(styles.actions, styles[direction])}\n        data-open={isOpen ? 'true' : 'false'}\n      >\n        <SpeedDialContext.Provider value={ctx}>\n          {actions\n            ? actions.map((action, index) => (\n                <SpeedDialAction\n                  key={action.key ?? index}\n                  icon={action.icon}\n                  label={action.label}\n                  onClick={action.onClick}\n                  disabled={action.disabled}\n                />\n              ))\n            : children}\n        </SpeedDialContext.Provider>\n      </div>\n\n      <IconButton\n        ref={fabRef}\n        rounded\n        variant=\"contained\"\n        color={color}\n        size={size}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-haspopup=\"true\"\n        aria-expanded={isOpen}\n        aria-controls={actionsId}\n        className={styles.fab}\n        onClick={() => setOpen(!isOpen)}\n      >\n        <span className={clsx(styles.fabIcon, !openIcon && isOpen && styles.fabIconOpen)}>\n          {isOpen && openIcon != null ? renderIcon(openIcon) : renderIcon(icon)}\n        </span>\n      </IconButton>\n    </div>\n  )\n})\n"],"names":["SpeedDialContext","createContext","useSpeedDial","useContext","ICON_NAME_SET","ICON_NAMES","SpeedDialAction","forwardRef","icon","label","tooltipOpen","hideTooltip","onClick","disabled","className","props","ref","dial","iconNode","jsx","Icon","button","IconButton","clsx","styles","event","placement","jsxs","Tooltip","ACTION_SIZE","TOOLTIP_PLACEMENT","SpeedDial","ariaLabel","openIcon","direction","color","size","open","defaultOpen","onOpenChange","openOnHover","closeOnActionClick","actions","children","style","forwardedRef","rootRef","useRef","fabRef","actionsId","useId","isControlled","internal","setInternal","useState","isOpen","setOpen","next","setOpenRef","useEffect","onPointerDown","onKeyDown","_a","setRootRef","node","renderIcon","value","ctx","hoverProps","action","index"],"mappings":"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"}

package/dist/SpeedDial-DgFj16BQ.js

@@ -0,0 +1,165 @@
+import { jsx as o, jsxs as A } from "react/jsx-runtime";
+import { createContext as H, useContext as J, forwardRef as k, useRef as D, useId as Q, useState as U, useEffect as V } from "react";
+import { clsx as _ } from "clsx";
+import { a as M } from "./names-D8ABK2Wk.js";
+import { I as g } from "./Icon-CophpkHo.js";
+import { I as P } from "./IconButton-CBusrDa9.js";
+import { T as X } from "./Tooltip-Cb_FKxT9.js";
+const R = H(null);
+function Y() {
+  return J(R);
+}
+const ee = "_speedDial_1qwl9_4", te = "_fab_1qwl9_9", ne = "_fabIcon_1qwl9_17", oe = "_fabIconOpen_1qwl9_21", se = "_actions_1qwl9_26", ce = "_up_1qwl9_47", ae = "_down_1qwl9_53", re = "_left_1qwl9_59", le = "_right_1qwl9_65", ie = "_action_1qwl9_26", fe = "_actionWrap_1qwl9_91", pe = "_actionLabel_1qwl9_95", ue = "_labelLeft_1qwl9_110", _e = "_labelTop_1qwl9_117", n = {
+  speedDial: ee,
+  fab: te,
+  fabIcon: ne,
+  fabIconOpen: oe,
+  actions: se,
+  up: ce,
+  down: ae,
+  left: re,
+  right: le,
+  action: ie,
+  actionWrap: fe,
+  actionLabel: pe,
+  labelLeft: ue,
+  labelTop: _e
+}, de = new Set(M), me = k(
+  function({ icon: a, label: s, tooltipOpen: l, hideTooltip: d = !1, onClick: i, disabled: m, className: b, ...L }, f) {
+    const t = Y(), q = typeof a == "string" && de.has(a) ? /* @__PURE__ */ o(g, { name: a }) : a, p = /* @__PURE__ */ o(
+      P,
+      {
+        ref: f,
+        rounded: !0,
+        variant: "contained",
+        color: "surface",
+        size: (t == null ? void 0 : t.size) ?? "sm",
+        disabled: m,
+        "aria-label": typeof s == "string" ? s : void 0,
+        className: _(n.action, b),
+        onClick: (E) => {
+          i == null || i(E), t != null && t.closeOnClick && t.requestClose();
+        },
+        ...L,
+        children: q
+      }
+    );
+    if (s == null || d) return p;
+    const u = (t == null ? void 0 : t.placement) ?? "left";
+    return l ?? (t == null ? void 0 : t.persistentLabels) ?? !1 ? /* @__PURE__ */ A(
+      "span",
+      {
+        className: _(
+          n.actionWrap,
+          u === "top" ? n.labelTop : n.labelLeft
+        ),
+        children: [
+          p,
+          /* @__PURE__ */ o("span", { className: n.actionLabel, children: s })
+        ]
+      }
+    ) : /* @__PURE__ */ o(X, { content: s, placement: u, children: p });
+  }
+), be = new Set(M), we = { sm: "sm", md: "sm", lg: "md" }, Ie = {
+  up: "left",
+  down: "left",
+  left: "top",
+  right: "top"
+}, De = k(function({
+  ariaLabel: a,
+  icon: s = "Add",
+  openIcon: l,
+  direction: d = "up",
+  color: i = "primary",
+  size: m = "md",
+  open: b,
+  defaultOpen: L = !1,
+  onOpenChange: f,
+  openOnHover: t = !0,
+  closeOnActionClick: q = !0,
+  tooltipOpen: p = !1,
+  actions: u,
+  disabled: N = !1,
+  children: E,
+  className: j,
+  style: z,
+  ...B
+}, w) {
+  const S = D(null), T = D(null), y = Q(), O = b !== void 0, [K, Z] = U(L), c = O ? b : K, r = (e) => {
+    O || Z(e), f == null || f(e);
+  }, h = D(r);
+  h.current = r, V(() => {
+    if (!c) return;
+    const e = (v) => {
+      S.current && !S.current.contains(v.target) && h.current(!1);
+    }, I = (v) => {
+      var x;
+      v.key === "Escape" && (h.current(!1), (x = T.current) == null || x.focus());
+    };
+    return document.addEventListener("pointerdown", e), document.addEventListener("keydown", I), () => {
+      document.removeEventListener("pointerdown", e), document.removeEventListener("keydown", I);
+    };
+  }, [c]);
+  const $ = (e) => {
+    S.current = e, typeof w == "function" ? w(e) : w && (w.current = e);
+  }, C = (e) => typeof e == "string" && be.has(e) ? /* @__PURE__ */ o(g, { name: e }) : e, F = {
+    size: we[m],
+    placement: Ie[d],
+    closeOnClick: q,
+    persistentLabels: p,
+    requestClose: () => r(!1)
+  }, G = t && !N ? { onMouseEnter: () => r(!0), onMouseLeave: () => r(!1) } : {};
+  return /* @__PURE__ */ A(
+    "div",
+    {
+      ref: $,
+      className: _(n.speedDial, j),
+      style: z,
+      ...G,
+      ...B,
+      children: [
+        /* @__PURE__ */ o(
+          "div",
+          {
+            id: y,
+            className: _(n.actions, n[d]),
+            "data-open": c ? "true" : "false",
+            children: /* @__PURE__ */ o(R.Provider, { value: F, children: u ? u.map((e, I) => /* @__PURE__ */ o(
+              me,
+              {
+                icon: e.icon,
+                label: e.label,
+                onClick: e.onClick,
+                disabled: e.disabled
+              },
+              e.key ?? I
+            )) : E })
+          }
+        ),
+        /* @__PURE__ */ o(
+          P,
+          {
+            ref: T,
+            rounded: !0,
+            variant: "contained",
+            color: i,
+            size: m,
+            disabled: N,
+            "aria-label": a,
+            "aria-haspopup": "true",
+            "aria-expanded": c,
+            "aria-controls": y,
+            className: n.fab,
+            onClick: () => r(!c),
+            children: /* @__PURE__ */ o("span", { className: _(n.fabIcon, !l && c && n.fabIconOpen), children: c && l != null ? C(l) : C(s) })
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  De as S,
+  me as a
+};
+//# sourceMappingURL=SpeedDial-DgFj16BQ.js.map

package/dist/SpeedDial-DgFj16BQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpeedDial-DgFj16BQ.js","sources":["../src/components/SpeedDial/speedDialContext.ts","../src/components/SpeedDial/SpeedDialAction.tsx","../src/components/SpeedDial/SpeedDial.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { TooltipPlacement } from '../Tooltip'\n\n/** Action button size — one step smaller than the dial's FAB. */\nexport type SpeedDialActionSize = 'sm' | 'md' | 'lg'\n\n/** Shared state a `<SpeedDial>` hands down to its `<SpeedDialAction>` children via context. */\nexport interface SpeedDialContextValue {\n  /** Size for the action FABs. */\n  size: SpeedDialActionSize\n  /** Where each action's tooltip label sits (derived from the dial `direction`). */\n  placement: TooltipPlacement\n  /** Close the dial after an action is clicked. */\n  closeOnClick: boolean\n  /** Show every action's label persistently (no hover needed) while the dial is open. */\n  persistentLabels: boolean\n  /** Request the dial to close (called by an action on click). */\n  requestClose: () => void\n}\n\nexport const SpeedDialContext = createContext<SpeedDialContextValue | null>(null)\n\n/** Read the surrounding `<SpeedDial>` (or `null` when an action is rendered standalone). */\nexport function useSpeedDial(): SpeedDialContextValue | null {\n  return useContext(SpeedDialContext)\n}\n","import { forwardRef, type ButtonHTMLAttributes, type MouseEvent, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { Icon } from '../Icon'\nimport { IconButton } from '../IconButton'\nimport { Tooltip } from '../Tooltip'\nimport { useSpeedDial } from './speedDialContext'\nimport styles from './SpeedDial.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport interface SpeedDialActionProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'color'\n> {\n  /** Action icon — a known `IconName` or any node. */\n  icon: IconName | ReactNode\n  /** Label shown as a tooltip beside the action (also its `aria-label` when a string). */\n  label?: ReactNode\n  /** Show the label persistently (no hover) while the dial is open — overrides the dial's `tooltipOpen`. */\n  tooltipOpen?: boolean\n  /** Hide the tooltip / persistent label (still used for `aria-label`). */\n  hideTooltip?: boolean\n}\n\n/**\n * One action inside a `<SpeedDial>` — a small circular `IconButton` (surface-tinted) with a tooltip\n * `label`. It reads the dial via context for its size, tooltip placement and close-on-click; clicking\n * runs `onClick` then closes the dial. The ref points at the `<button>`.\n */\nexport const SpeedDialAction = forwardRef<HTMLButtonElement, SpeedDialActionProps>(\n  function SpeedDialAction(\n    { icon, label, tooltipOpen, hideTooltip = false, onClick, disabled, className, ...props },\n    ref,\n  ) {\n    const dial = useSpeedDial()\n    const iconNode =\n      typeof icon === 'string' && ICON_NAME_SET.has(icon) ? <Icon name={icon as IconName} /> : icon\n\n    const button = (\n      <IconButton\n        ref={ref}\n        rounded\n        variant=\"contained\"\n        color=\"surface\"\n        size={dial?.size ?? 'sm'}\n        disabled={disabled}\n        aria-label={typeof label === 'string' ? label : undefined}\n        className={clsx(styles.action, className)}\n        onClick={(event: MouseEvent<HTMLButtonElement>) => {\n          onClick?.(event)\n          if (dial?.closeOnClick) dial.requestClose()\n        }}\n        {...props}\n      >\n        {iconNode}\n      </IconButton>\n    )\n\n    if (label == null || hideTooltip) return button\n\n    const placement = dial?.placement ?? 'left'\n    // persistent label: render a static label beside the button (no hover) — like MUI's tooltipOpen\n    const persistent = tooltipOpen ?? dial?.persistentLabels ?? false\n    if (persistent) {\n      return (\n        <span\n          className={clsx(\n            styles.actionWrap,\n            placement === 'top' ? styles.labelTop : styles.labelLeft,\n          )}\n        >\n          {button}\n          <span className={styles.actionLabel}>{label}</span>\n        </span>\n      )\n    }\n\n    return (\n      <Tooltip content={label} placement={placement}>\n        {button}\n      </Tooltip>\n    )\n  },\n)\n","import {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport type { ThemeColor } from '../../theme'\nimport type { TooltipPlacement } from '../Tooltip'\nimport { Icon } from '../Icon'\nimport { IconButton } from '../IconButton'\nimport { SpeedDialAction } from './SpeedDialAction'\nimport {\n  SpeedDialContext,\n  type SpeedDialActionSize,\n  type SpeedDialContextValue,\n} from './speedDialContext'\nimport styles from './SpeedDial.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type SpeedDialSize = 'sm' | 'md' | 'lg'\nexport type SpeedDialDirection = 'up' | 'down' | 'left' | 'right'\n\n/** The FAB size → the (smaller) action-button size. */\nconst ACTION_SIZE: Record<SpeedDialSize, SpeedDialActionSize> = { sm: 'sm', md: 'sm', lg: 'md' }\n/** Tooltip side per direction — labels sit left of a vertical dial, above a horizontal one. */\nconst TOOLTIP_PLACEMENT: Record<SpeedDialDirection, TooltipPlacement> = {\n  up: 'left',\n  down: 'left',\n  left: 'top',\n  right: 'top',\n}\n\n/** A data-driven action for the `actions` prop. */\nexport interface SpeedDialActionItem {\n  /** Stable key (falls back to the index). */\n  key?: string\n  icon: IconName | ReactNode\n  label?: ReactNode\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void\n  disabled?: boolean\n}\n\nexport interface SpeedDialProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onChange'> {\n  /** Accessible label for the FAB (required — it's icon-only). */\n  ariaLabel: string\n  /** FAB icon. Defaults to `Add` (a `+`). */\n  icon?: IconName | ReactNode\n  /** Icon shown while open. Omit to rotate the `icon` 45° instead (a `+` becomes a `×`). */\n  openIcon?: IconName | ReactNode\n  /** Which way the actions fan out. Defaults to `up`. */\n  direction?: SpeedDialDirection\n  /** Theme palette token tinting the FAB. Defaults to `primary`. */\n  color?: ThemeColor\n  /** FAB size (actions render one step smaller). Defaults to `md`. */\n  size?: SpeedDialSize\n  /** Controlled open state. */\n  open?: boolean\n  /** Initial open state for uncontrolled use. Defaults to `false`. */\n  defaultOpen?: boolean\n  /** Fires with the next open state. */\n  onOpenChange?: (open: boolean) => void\n  /** Open on hover (also opens on click). Defaults to `true`. */\n  openOnHover?: boolean\n  /** Close the dial after an action is clicked. Defaults to `true`. */\n  closeOnActionClick?: boolean\n  /** Show every action's label persistently while open (no hover needed) — like MUI's `tooltipOpen`. */\n  tooltipOpen?: boolean\n  /** Data-driven actions — an alternative to `<SpeedDialAction>` children. */\n  actions?: SpeedDialActionItem[]\n  /** Disables the FAB (and hover-opening). */\n  disabled?: boolean\n  /** `<SpeedDialAction>` children (used when `actions` is not given). */\n  children?: ReactNode\n}\n\n/**\n * A floating action button that reveals a set of related actions on hover / click — fanning out in\n * `direction` (`up` default). The FAB icon rotates 45° when open (a `+` → `×`) unless an `openIcon` is\n * given. Each `<SpeedDialAction>` is a small circular button with a tooltip label; supply them via the\n * data-driven `actions` prop or as children. Opens on hover (`openOnHover`) and click; closes on\n * outside-pointerdown, Escape (refocusing the FAB), or selecting an action. Controlled (`open` +\n * `onOpenChange`) or uncontrolled (`defaultOpen`). The ref points at the root; position it (e.g.\n * `fixed` bottom-right) via `style`/`className`. The FAB carries `aria-expanded`/`aria-controls`.\n */\nexport const SpeedDial = forwardRef<HTMLDivElement, SpeedDialProps>(function SpeedDial(\n  {\n    ariaLabel,\n    icon = 'Add',\n    openIcon,\n    direction = 'up',\n    color = 'primary',\n    size = 'md',\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    openOnHover = true,\n    closeOnActionClick = true,\n    tooltipOpen = false,\n    actions,\n    disabled = false,\n    children,\n    className,\n    style,\n    ...props\n  },\n  forwardedRef,\n) {\n  const rootRef = useRef<HTMLDivElement | null>(null)\n  const fabRef = useRef<HTMLButtonElement | null>(null)\n  const actionsId = useId()\n\n  const isControlled = open !== undefined\n  const [internal, setInternal] = useState(defaultOpen)\n  const isOpen = isControlled ? open : internal\n\n  const setOpen = (next: boolean) => {\n    if (!isControlled) setInternal(next)\n    onOpenChange?.(next)\n  }\n  // keep a stable reference for the document listeners below\n  const setOpenRef = useRef(setOpen)\n  setOpenRef.current = setOpen\n\n  // while open: close on outside pointerdown / Escape (Escape refocuses the FAB)\n  useEffect(() => {\n    if (!isOpen) return\n    const onPointerDown = (event: PointerEvent) => {\n      if (rootRef.current && !rootRef.current.contains(event.target as Node)) {\n        setOpenRef.current(false)\n      }\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setOpenRef.current(false)\n        fabRef.current?.focus()\n      }\n    }\n    document.addEventListener('pointerdown', onPointerDown)\n    document.addEventListener('keydown', onKeyDown)\n    return () => {\n      document.removeEventListener('pointerdown', onPointerDown)\n      document.removeEventListener('keydown', onKeyDown)\n    }\n  }, [isOpen])\n\n  const setRootRef = (node: HTMLDivElement | null) => {\n    rootRef.current = node\n    if (typeof forwardedRef === 'function') forwardedRef(node)\n    else if (forwardedRef) forwardedRef.current = node\n  }\n\n  const renderIcon = (value: IconName | ReactNode) =>\n    typeof value === 'string' && ICON_NAME_SET.has(value) ? (\n      <Icon name={value as IconName} />\n    ) : (\n      value\n    )\n\n  const ctx: SpeedDialContextValue = {\n    size: ACTION_SIZE[size],\n    placement: TOOLTIP_PLACEMENT[direction],\n    closeOnClick: closeOnActionClick,\n    persistentLabels: tooltipOpen,\n    requestClose: () => setOpen(false),\n  }\n\n  const hoverProps =\n    openOnHover && !disabled\n      ? { onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false) }\n      : {}\n\n  return (\n    <div\n      ref={setRootRef}\n      className={clsx(styles.speedDial, className)}\n      style={style as CSSProperties}\n      {...hoverProps}\n      {...props}\n    >\n      <div\n        id={actionsId}\n        className={clsx(styles.actions, styles[direction])}\n        data-open={isOpen ? 'true' : 'false'}\n      >\n        <SpeedDialContext.Provider value={ctx}>\n          {actions\n            ? actions.map((action, index) => (\n                <SpeedDialAction\n                  key={action.key ?? index}\n                  icon={action.icon}\n                  label={action.label}\n                  onClick={action.onClick}\n                  disabled={action.disabled}\n                />\n              ))\n            : children}\n        </SpeedDialContext.Provider>\n      </div>\n\n      <IconButton\n        ref={fabRef}\n        rounded\n        variant=\"contained\"\n        color={color}\n        size={size}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-haspopup=\"true\"\n        aria-expanded={isOpen}\n        aria-controls={actionsId}\n        className={styles.fab}\n        onClick={() => setOpen(!isOpen)}\n      >\n        <span className={clsx(styles.fabIcon, !openIcon && isOpen && styles.fabIconOpen)}>\n          {isOpen && openIcon != null ? renderIcon(openIcon) : renderIcon(icon)}\n        </span>\n      </IconButton>\n    </div>\n  )\n})\n"],"names":["SpeedDialContext","createContext","useSpeedDial","useContext","ICON_NAME_SET","ICON_NAMES","SpeedDialAction","forwardRef","icon","label","tooltipOpen","hideTooltip","onClick","disabled","className","props","ref","dial","iconNode","jsx","Icon","button","IconButton","clsx","styles","event","placement","jsxs","Tooltip","ACTION_SIZE","TOOLTIP_PLACEMENT","SpeedDial","ariaLabel","openIcon","direction","color","size","open","defaultOpen","onOpenChange","openOnHover","closeOnActionClick","actions","children","style","forwardedRef","rootRef","useRef","fabRef","actionsId","useId","isControlled","internal","setInternal","useState","isOpen","setOpen","next","setOpenRef","useEffect","onPointerDown","onKeyDown","_a","setRootRef","node","renderIcon","value","ctx","hoverProps","action","index"],"mappings":"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"}

package/dist/Stepper-7pPEBRLI.cjs

@@ -0,0 +1,2 @@
+"use strict";const s=require("react/jsx-runtime"),o=require("react"),j=require("clsx"),X=require("./names-C2Yj1p3u.cjs"),A=require("./Icon-CXTl_QAP.cjs"),Y=require("./ConfigProvider-ByOFXVyP.cjs"),Z="_root_1xfvk_2",H="_list_1xfvk_5",ee="_horizontal_1xfvk_11",ne="_vertical_1xfvk_24",te="_sm_1xfvk_29",se="_md_1xfvk_34",re="_lg_1xfvk_39",ce="_step_1xfvk_47",oe="_disabled_1xfvk_64",le="_main_1xfvk_69",ie="_indicator_1xfvk_99",ae="_number_1xfvk_125",de="_completed_1xfvk_130",ue="_active_1xfvk_136",fe="_error_1xfvk_144",_e="_text_1xfvk_151",me="_label_1xfvk_167",ve="_description_1xfvk_181",xe="_optional_1xfvk_186",he="_connector_1xfvk_193",be="_done_1xfvk_198",we="_panel_1xfvk_224",pe="_stepContent_1xfvk_228",t={root:Z,list:H,horizontal:ee,vertical:ne,sm:te,md:se,lg:re,step:ce,disabled:oe,main:le,indicator:ie,number:ae,completed:de,active:ue,error:fe,text:_e,label:me,description:ve,optional:xe,connector:he,done:be,panel:we,stepContent:pe},ke=new Set(X.ICON_NAMES),Ne=o.forwardRef(function({steps:a,activeStep:f,defaultStep:g,onStepChange:u,queryKey:y,pushHistory:R=!1,orientation:_="horizontal",size:b="md",color:I="primary",onStepClick:m,"aria-label":M,className:B,style:K},O){var P;const E=_==="vertical",T=m!=null,U=Y.useStepQueryKey(),l=y===!0?U:y||void 0,v=o.useCallback(e=>e!=null&&Number.isInteger(e)&&e>=0&&e<a.length&&!a[e].disabled,[a]),w=o.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(a.findIndex(e=>!e.disabled),0),[F,L]=o.useState(()=>{const e=w();return v(e)?e:v(g)?g:W}),q=f!==void 0,r=q?f:F,p=o.useRef(r);p.current=r;const x=o.useRef(u);x.current=u;const k=o.useRef(!1),z=o.useCallback((e,n)=>{if(!l||typeof window>"u")return;const c=new URLSearchParams(window.location.search),i=String(e+1);if(c.get(l)===i)return;c.set(l,i);const d=`${window.location.pathname}?${c.toString()}${window.location.hash}`;window.history[n?"pushState":"replaceState"](window.history.state,"",d)},[l]),D=e=>{e!==p.current&&(k.current=!0,q||L(e),u==null||u(e))};o.useEffect(()=>{if(!l||typeof window>"u"||!Number.isInteger(r)||r<0||r>=a.length)return;const e=k.current&&R;k.current=!1,z(r,e)},[l,r,R,z,a.length]),o.useEffect(()=>{if(!l||typeof window>"u")return;const e=()=>{var c;const n=w();v(n)&&n!==p.current&&(f===void 0&&L(n),(c=x.current)==null||c.call(x,n))};return window.addEventListener("popstate",e),()=>window.removeEventListener("popstate",e)},[l,w,v,f]);const $=(P=a[r])==null?void 0:P.content,C=o.useRef(null);o.useEffect(()=>{if(_==="vertical")return;const e=C.current,n=e==null?void 0:e.children[r];if(!e||!n)return;const c=e.getBoundingClientRect(),i=n.getBoundingClientRect(),d=i.left-c.left+e.scrollLeft,h=d+i.width;d<e.scrollLeft?e.scrollLeft=d:h>e.scrollLeft+e.clientWidth&&(e.scrollLeft=h-e.clientWidth)},[r,_]);const G=e=>typeof e=="string"&&ke.has(e)?s.jsx(A.Icon,{name:e,size:b}):e;return s.jsxs("div",{ref:O,className:j.clsx(t.root,t[_],t[b],B),style:{"--tz-btn-rgb":`var(--tz-color-${I}-rgb)`,"--tz-btn-on":`var(--tz-color-${I}-contrast, #fff)`,...K},children:[s.jsx("ol",{ref:C,"aria-label":M,className:t.list,children:a.map((e,n)=>{const c=!!e.error,i=!c&&(e.completed||n<r),d=!c&&!i&&n===r,h=c?"error":i?"completed":d?"active":"upcoming",J=n===a.length-1,N=G(e.icon),S=N??(i?s.jsx(A.Icon,{name:"Check",size:b}):s.jsx("span",{className:t.number,children:n+1})),V=e.label!=null||e.description!=null||e.optional!=null,Q=s.jsxs(s.Fragment,{children:[s.jsx("span",{className:t.indicator,"aria-hidden":N==null&&!i?void 0:!0,children:S}),V&&s.jsxs("span",{className:t.text,children:[e.label!=null&&s.jsx("span",{className:t.label,children:e.label}),e.description!=null&&s.jsx("span",{className:t.description,children:e.description}),e.optional!=null&&s.jsx("span",{className:t.optional,children:e.optional})]})]});return s.jsxs("li",{className:j.clsx(t.step,t[h],e.disabled&&t.disabled),children:[T?s.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}):s.jsx("div",{className:t.main,"aria-current":d?"step":void 0,children:Q}),!J&&s.jsx("span",{className:j.clsx(t.connector,n<r&&t.done),"aria-hidden":"true"}),E&&n===r&&e.content!=null&&s.jsx("div",{className:t.stepContent,children:e.content})]},n)})}),!E&&$!=null&&s.jsx("div",{className:t.panel,children:$})]})});exports.Stepper=Ne;
+//# sourceMappingURL=Stepper-7pPEBRLI.cjs.map

package/dist/Stepper-7pPEBRLI.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper-7pPEBRLI.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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"}