@techzyapp/ui-library 1.0.0

package/dist/OtpField-CTq-CUbF.js

@@ -0,0 +1,171 @@
+import { jsxs as I, jsx as h } from "react/jsx-runtime";
+import { forwardRef as Y, useId as tt, useState as et, useRef as rt, useEffect as ot } from "react";
+import { clsx as T } from "clsx";
+import { u as st } from "./formContext-B7ln1Miy.js";
+import { T as R } from "./Typography-Cta6Rg4L.js";
+import { f as d } from "./TextField.module-QePvGeJ3.js";
+import { a as at } from "./ConfigProvider-2c94kUOk.js";
+const lt = "_row_1tqpn_2", nt = "_sm_1tqpn_8", ct = "_md_1tqpn_12", it = "_lg_1tqpn_16", ft = "_box_1tqpn_22", dt = "_filled_1tqpn_46", ut = "_invalid_1tqpn_63", _ = {
+  row: lt,
+  sm: nt,
+  md: ct,
+  lg: it,
+  box: ft,
+  filled: dt,
+  invalid: ut
+}, pt = {
+  numeric: /[0-9]/,
+  alphabetic: /[A-Za-z]/,
+  alphanumeric: /[A-Za-z0-9]/
+};
+function mt(q, a) {
+  const n = [...q].slice(0, a);
+  for (; n.length < a; ) n.push("");
+  return n;
+}
+const Dt = Y(function({
+  length: a = 4,
+  type: n = "numeric",
+  value: x,
+  defaultValue: z,
+  onChange: g,
+  onComplete: b,
+  name: c,
+  label: y,
+  helperText: O,
+  error: S,
+  required: j = !1,
+  disabled: B = !1,
+  autoFocus: E = !1,
+  placeholder: M,
+  size: P = "md",
+  color: V = "primary",
+  className: K,
+  style: Z
+}, $) {
+  const C = at(), N = `${tt()}-helper`, F = pt[n], u = st(), w = !!(u && c), s = u && c ? u.field(c) : void 0, H = x !== void 0 ? x : w ? u.values[c] : void 0, A = x !== void 0 || w, [L, G] = et(z ?? ""), J = A ? H ?? "" : L, v = S ?? (s == null ? void 0 : s.error) ?? !1, D = O ?? (s == null ? void 0 : s.helperText), i = mt(J, a), k = rt([]);
+  ot(() => {
+    var e;
+    E && ((e = k.current[0]) == null || e.focus());
+  }, []);
+  const f = (e) => {
+    const t = k.current[Math.max(0, Math.min(e, a - 1))];
+    t == null || t.focus(), t == null || t.select();
+  }, p = (e) => {
+    const t = e.join("");
+    A || G(t), w && u.setValue(c, t), g == null || g(t), e.every((r) => r !== "") && (b == null || b(t));
+  }, Q = (e, t) => {
+    const r = [...t].filter((o) => F.test(o));
+    if (t !== "" && r.length === 0) return;
+    const l = [...i];
+    if (r.length <= 1)
+      l[e] = r[0] ?? "", p(l), r[0] && f(e + 1);
+    else {
+      let o = e;
+      for (const m of r) {
+        if (o >= a) break;
+        l[o] = m, o++;
+      }
+      p(l), f(o);
+    }
+  }, U = (e, t) => {
+    if (t.key === "Backspace") {
+      if (i[e] === "" && e > 0) {
+        t.preventDefault();
+        const r = [...i];
+        r[e - 1] = "", p(r), f(e - 1);
+      }
+    } else if (t.key === "ArrowLeft")
+      t.preventDefault(), f(e - 1);
+    else if (t.key === "ArrowRight")
+      t.preventDefault(), f(e + 1);
+    else if (t.key === "Delete") {
+      t.preventDefault();
+      const r = [...i];
+      r[e] = "", p(r);
+    }
+  }, W = (e, t) => {
+    t.preventDefault();
+    const r = [...t.clipboardData.getData("text")].filter((m) => F.test(m));
+    if (r.length === 0) return;
+    const l = [...i];
+    let o = e;
+    for (const m of r) {
+      if (o >= a) break;
+      l[o] = m, o++;
+    }
+    p(l), f(o);
+  }, X = (e) => {
+    e.currentTarget.contains(e.relatedTarget) || s == null || s.onBlur(e);
+  };
+  return /* @__PURE__ */ I(
+    "div",
+    {
+      ref: $,
+      className: T(
+        d.field,
+        v && d.error,
+        B && d.disabled,
+        K
+      ),
+      style: {
+        "--tz-btn-rgb": `var(--tz-color-${V}-rgb)`,
+        ...Z
+      },
+      children: [
+        y != null && /* @__PURE__ */ I("span", { className: d.label, children: [
+          /* @__PURE__ */ h(R, { as: "span", variant: "bodySmall", color: "muted", children: y }),
+          j && /* @__PURE__ */ h("span", { className: d.required, "aria-hidden": "true", children: "*" })
+        ] }),
+        /* @__PURE__ */ h(
+          "div",
+          {
+            role: "group",
+            "aria-label": typeof y == "string" ? y : "One-time code",
+            "aria-invalid": v || void 0,
+            "aria-describedby": D != null ? N : void 0,
+            className: T(_.row, _[P], v && _.invalid),
+            onBlur: X,
+            children: i.map((e, t) => /* @__PURE__ */ h(
+              "input",
+              {
+                ref: (r) => {
+                  k.current[t] = r;
+                },
+                name: t === 0 ? c : void 0,
+                type: "text",
+                inputMode: n === "numeric" ? "numeric" : "text",
+                autoComplete: t === 0 ? "one-time-code" : "off",
+                "aria-label": C("otpField.digit", { index: t + 1, total: a }),
+                className: T(_.box, e !== "" && _.filled),
+                value: e,
+                placeholder: M,
+                disabled: B,
+                onChange: (r) => Q(t, r.target.value),
+                onKeyDown: (r) => U(t, r),
+                onPaste: (r) => W(t, r),
+                onFocus: (r) => r.target.select()
+              },
+              t
+            ))
+          }
+        ),
+        D != null && /* @__PURE__ */ h(
+          R,
+          {
+            as: "span",
+            id: N,
+            variant: "bodySmall",
+            color: v ? "error" : "muted",
+            className: d.helper,
+            children: D
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  Dt as O
+};
+//# sourceMappingURL=OtpField-CTq-CUbF.js.map

package/dist/OtpField-CTq-CUbF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpField-CTq-CUbF.js","sources":["../src/components/OtpField/OtpField.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ClipboardEvent,\n  type CSSProperties,\n  type FocusEvent,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport { useT, type ThemeColor } from '../../theme'\nimport { Typography } from '../Typography'\nimport fieldStyles from '../TextField/TextField.module.css'\nimport styles from './OtpField.module.css'\n\nexport type OtpFieldSize = 'sm' | 'md' | 'lg'\n/** Which characters the code accepts. */\nexport type OtpFieldType = 'numeric' | 'alphabetic' | 'alphanumeric'\n\n/** Allowed-character matcher per `type`. */\nconst PATTERN: Record<OtpFieldType, RegExp> = {\n  numeric: /[0-9]/,\n  alphabetic: /[A-Za-z]/,\n  alphanumeric: /[A-Za-z0-9]/,\n}\n\n/** Split a code string into exactly `length` single-char slots, padded with empties. */\nfunction toChars(value: string, length: number): string[] {\n  const out = [...value].slice(0, length)\n  while (out.length < length) out.push('')\n  return out\n}\n\nexport interface OtpFieldProps {\n  /** Number of input boxes (the code length). Defaults to `4`. */\n  length?: number\n  /** Which characters are accepted (also drives the mobile keyboard). Defaults to `'numeric'`. */\n  type?: OtpFieldType\n  /** Controlled value — the concatenated code string. */\n  value?: string\n  /** Initial value for uncontrolled use. */\n  defaultValue?: string\n  /** Fires with the full code string on every change. */\n  onChange?: (value: string) => void\n  /** Fires with the code once every box is filled. */\n  onComplete?: (value: string) => void\n  /** Field name — the `<Form>` binding key (form value is the code `string`). */\n  name?: string\n  /** Label rendered above the boxes. */\n  label?: ReactNode\n  /** Helper / error text under the boxes (shown in the error color while `error`). */\n  helperText?: ReactNode\n  /** Marks the field invalid — reddens the boxes + helper. */\n  error?: boolean\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Disables every box. */\n  disabled?: boolean\n  /** Focus the first box on mount. */\n  autoFocus?: boolean\n  /** Placeholder character shown in empty boxes (e.g. `'•'`). */\n  placeholder?: string\n  /** Preset size. Defaults to `'md'`. */\n  size?: OtpFieldSize\n  /** Theme palette token for the focus ring / active box. Defaults to `'primary'`. */\n  color?: ThemeColor\n  className?: string\n  style?: CSSProperties\n}\n\n/**\n * A one-time-passcode input — a row of single-character boxes for verification codes. **`length`**\n * (default `4`) sets the box count; **`type`** (`'numeric'` default · `'alphabetic'` · `'alphanumeric'`)\n * restricts the accepted characters and the mobile keyboard. Typing advances to the next box, Backspace\n * clears + steps back, Arrows navigate, and **paste / SMS autofill** (`autocomplete=\"one-time-code\"`)\n * distributes the whole code across the boxes. The value is the concatenated string — controlled\n * (`value` + `onChange`) or uncontrolled (`defaultValue`); **`onComplete`** fires when all boxes are\n * filled. Shares the field-family chrome (`label` · `error` + `helperText` · `required` · `disabled` ·\n * `size`) and binds to a surrounding `<Form>` by **`name`** (form value = the code string; validate with\n * e.g. `z.string().length(4)` or a `type`-matching regex). Tinted by `color` via the shared\n * `--tz-btn-rgb` pattern; `role=\"group\"` with per-box `aria-label`s. Own CSS module (+ TextField's for\n * the label/helper chrome).\n */\nexport const OtpField = forwardRef<HTMLDivElement, OtpFieldProps>(function OtpField(\n  {\n    length = 4,\n    type = 'numeric',\n    value,\n    defaultValue,\n    onChange,\n    onComplete,\n    name,\n    label,\n    helperText,\n    error,\n    required = false,\n    disabled = false,\n    autoFocus = false,\n    placeholder,\n    size = 'md',\n    color = 'primary',\n    className,\n    style,\n  },\n  ref,\n) {\n  const t = useT()\n  const reactId = useId()\n  const helperId = `${reactId}-helper`\n  const allowed = PATTERN[type]\n\n  // bind to a surrounding <Form> by `name` — form value is the code string; error/touched via field()\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const externalValue =\n    value !== undefined ? value : isFormBound ? (form!.values[name!] as string) : undefined\n  const isControlled = value !== undefined || isFormBound\n  const [internal, setInternal] = useState<string>(defaultValue ?? '')\n  const currentValue = isControlled ? (externalValue ?? '') : internal\n\n  const resolvedError = error ?? bound?.error ?? false\n  const resolvedHelperText = helperText ?? bound?.helperText\n\n  // the code split into exactly `length` single-char slots (padded with empties)\n  const chars = toChars(currentValue, length)\n\n  const inputsRef = useRef<(HTMLInputElement | null)[]>([])\n\n  useEffect(() => {\n    if (autoFocus) inputsRef.current[0]?.focus()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const focusBox = (i: number) => {\n    const el = inputsRef.current[Math.max(0, Math.min(i, length - 1))]\n    el?.focus()\n    el?.select()\n  }\n\n  const commit = (nextChars: string[]) => {\n    const next = nextChars.join('')\n    if (!isControlled) setInternal(next)\n    if (isFormBound) form!.setValue(name!, next)\n    onChange?.(next)\n    if (nextChars.every((c) => c !== '')) onComplete?.(next)\n  }\n\n  const handleChange = (index: number, raw: string) => {\n    const filtered = [...raw].filter((c) => allowed.test(c))\n    // a disallowed keystroke (raw non-empty but nothing survives the filter) is ignored\n    if (raw !== '' && filtered.length === 0) return\n    const nextChars = [...chars]\n    if (filtered.length <= 1) {\n      // a single typed char (boxes select-on-focus, so this replaces) — or a clear ('')\n      nextChars[index] = filtered[0] ?? ''\n      commit(nextChars)\n      if (filtered[0]) focusBox(index + 1)\n    } else {\n      // multiple chars (SMS autofill dumps the whole code into one box) → distribute from here\n      let k = index\n      for (const ch of filtered) {\n        if (k >= length) break\n        nextChars[k] = ch\n        k++\n      }\n      commit(nextChars)\n      focusBox(k)\n    }\n  }\n\n  const handleKeyDown = (index: number, event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Backspace') {\n      if (chars[index] === '' && index > 0) {\n        // empty box → step back and clear the previous one\n        event.preventDefault()\n        const nextChars = [...chars]\n        nextChars[index - 1] = ''\n        commit(nextChars)\n        focusBox(index - 1)\n      }\n      // a non-empty box lets the native delete run → onChange fires with '' (stays put)\n    } else if (event.key === 'ArrowLeft') {\n      event.preventDefault()\n      focusBox(index - 1)\n    } else if (event.key === 'ArrowRight') {\n      event.preventDefault()\n      focusBox(index + 1)\n    } else if (event.key === 'Delete') {\n      event.preventDefault()\n      const nextChars = [...chars]\n      nextChars[index] = ''\n      commit(nextChars)\n    }\n  }\n\n  const handlePaste = (index: number, event: ClipboardEvent<HTMLInputElement>) => {\n    event.preventDefault()\n    const filtered = [...event.clipboardData.getData('text')].filter((c) => allowed.test(c))\n    if (filtered.length === 0) return\n    const nextChars = [...chars]\n    let k = index\n    for (const ch of filtered) {\n      if (k >= length) break\n      nextChars[k] = ch\n      k++\n    }\n    commit(nextChars)\n    focusBox(k)\n  }\n\n  // mark the field touched when focus leaves the whole widget (not when it hops between boxes)\n  const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n    if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n      bound?.onBlur(event as unknown as FocusEvent<HTMLInputElement>)\n    }\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        fieldStyles.field,\n        resolvedError && fieldStyles.error,\n        disabled && fieldStyles.disabled,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          ...style,\n        } as CSSProperties\n      }\n    >\n      {label != null && (\n        <span 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        </span>\n      )}\n\n      <div\n        role=\"group\"\n        aria-label={typeof label === 'string' ? label : 'One-time code'}\n        aria-invalid={resolvedError || undefined}\n        aria-describedby={resolvedHelperText != null ? helperId : undefined}\n        className={clsx(styles.row, styles[size], resolvedError && styles.invalid)}\n        onBlur={handleBlur}\n      >\n        {chars.map((char, i) => (\n          <input\n            key={i}\n            ref={(el) => {\n              inputsRef.current[i] = el\n            }}\n            // the name goes on the first box only, so the form's scroll-to-error can target it\n            name={i === 0 ? name : undefined}\n            type=\"text\"\n            inputMode={type === 'numeric' ? 'numeric' : 'text'}\n            autoComplete={i === 0 ? 'one-time-code' : 'off'}\n            aria-label={t('otpField.digit', { index: i + 1, total: length })}\n            className={clsx(styles.box, char !== '' && styles.filled)}\n            value={char}\n            placeholder={placeholder}\n            disabled={disabled}\n            onChange={(e) => handleChange(i, e.target.value)}\n            onKeyDown={(e) => handleKeyDown(i, e)}\n            onPaste={(e) => handlePaste(i, e)}\n            onFocus={(e) => e.target.select()}\n          />\n        ))}\n      </div>\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":["PATTERN","toChars","value","length","out","OtpField","forwardRef","type","defaultValue","onChange","onComplete","name","label","helperText","error","required","disabled","autoFocus","placeholder","size","color","className","style","ref","t","useT","helperId","useId","allowed","form","useFormContext","isFormBound","bound","externalValue","isControlled","internal","setInternal","useState","currentValue","resolvedError","resolvedHelperText","chars","inputsRef","useRef","useEffect","_a","focusBox","i","el","commit","nextChars","next","c","handleChange","index","raw","filtered","k","ch","handleKeyDown","event","handlePaste","handleBlur","jsxs","clsx","fieldStyles","jsx","Typography","styles","char","e"],"mappings":";;;;;;;;;;;;;;;GAwBMA,KAAwC;AAAA,EAC5C,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,cAAc;AAChB;AAGA,SAASC,GAAQC,GAAeC,GAA0B;AACxD,QAAMC,IAAM,CAAC,GAAGF,CAAK,EAAE,MAAM,GAAGC,CAAM;AACtC,SAAOC,EAAI,SAASD,IAAQ,CAAAC,EAAI,KAAK,EAAE;AACvC,SAAOA;AACT;AAoDO,MAAMC,KAAWC,EAA0C,SAChE;AAAA,EACE,QAAAH,IAAS;AAAA,EACT,MAAAI,IAAO;AAAA,EACP,OAAAL;AAAA,EACA,cAAAM;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,aAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,OAAAC;AACF,GACAC,GACA;AACA,QAAMC,IAAIC,GAAA,GAEJC,IAAW,GADDC,GAAA,CACW,WACrBC,IAAU5B,GAAQO,CAAI,GAGtBsB,IAAOC,GAAA,GACPC,IAAc,GAAQF,KAAQlB,IAC9BqB,IAAQH,KAAQlB,IAAOkB,EAAK,MAAMlB,CAAI,IAAI,QAE1CsB,IACJ/B,MAAU,SAAYA,IAAQ6B,IAAeF,EAAM,OAAOlB,CAAK,IAAe,QAC1EuB,IAAehC,MAAU,UAAa6B,GACtC,CAACI,GAAUC,CAAW,IAAIC,GAAiB7B,KAAgB,EAAE,GAC7D8B,IAAeJ,IAAgBD,KAAiB,KAAME,GAEtDI,IAAgBzB,MAASkB,KAAA,gBAAAA,EAAO,UAAS,IACzCQ,IAAqB3B,MAAcmB,KAAA,gBAAAA,EAAO,aAG1CS,IAAQxC,GAAQqC,GAAcnC,CAAM,GAEpCuC,IAAYC,GAAoC,EAAE;AAExD,EAAAC,GAAU,MAAM;;AACd,IAAI3B,OAAW4B,IAAAH,EAAU,QAAQ,CAAC,MAAnB,QAAAG,EAAsB;AAAA,EAEvC,GAAG,CAAA,CAAE;AAEL,QAAMC,IAAW,CAACC,MAAc;AAC9B,UAAMC,IAAKN,EAAU,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAIK,GAAG5C,IAAS,CAAC,CAAC,CAAC;AACjE,IAAA6C,KAAA,QAAAA,EAAI,SACJA,KAAA,QAAAA,EAAI;AAAA,EACN,GAEMC,IAAS,CAACC,MAAwB;AACtC,UAAMC,IAAOD,EAAU,KAAK,EAAE;AAC9B,IAAKhB,KAAcE,EAAYe,CAAI,GAC/BpB,KAAaF,EAAM,SAASlB,GAAOwC,CAAI,GAC3C1C,KAAA,QAAAA,EAAW0C,IACPD,EAAU,MAAM,CAACE,MAAMA,MAAM,EAAE,qBAAgBD;AAAA,EACrD,GAEME,IAAe,CAACC,GAAeC,MAAgB;AACnD,UAAMC,IAAW,CAAC,GAAGD,CAAG,EAAE,OAAO,CAACH,MAAMxB,EAAQ,KAAKwB,CAAC,CAAC;AAEvD,QAAIG,MAAQ,MAAMC,EAAS,WAAW,EAAG;AACzC,UAAMN,IAAY,CAAC,GAAGT,CAAK;AAC3B,QAAIe,EAAS,UAAU;AAErB,MAAAN,EAAUI,CAAK,IAAIE,EAAS,CAAC,KAAK,IAClCP,EAAOC,CAAS,GACZM,EAAS,CAAC,KAAGV,EAASQ,IAAQ,CAAC;AAAA,SAC9B;AAEL,UAAIG,IAAIH;AACR,iBAAWI,KAAMF,GAAU;AACzB,YAAIC,KAAKtD,EAAQ;AACjB,QAAA+C,EAAUO,CAAC,IAAIC,GACfD;AAAA,MACF;AACA,MAAAR,EAAOC,CAAS,GAChBJ,EAASW,CAAC;AAAA,IACZ;AAAA,EACF,GAEME,IAAgB,CAACL,GAAeM,MAA2C;AAC/E,QAAIA,EAAM,QAAQ;AAChB,UAAInB,EAAMa,CAAK,MAAM,MAAMA,IAAQ,GAAG;AAEpC,QAAAM,EAAM,eAAA;AACN,cAAMV,IAAY,CAAC,GAAGT,CAAK;AAC3B,QAAAS,EAAUI,IAAQ,CAAC,IAAI,IACvBL,EAAOC,CAAS,GAChBJ,EAASQ,IAAQ,CAAC;AAAA,MACpB;AAAA,eAESM,EAAM,QAAQ;AACvB,MAAAA,EAAM,eAAA,GACNd,EAASQ,IAAQ,CAAC;AAAA,aACTM,EAAM,QAAQ;AACvB,MAAAA,EAAM,eAAA,GACNd,EAASQ,IAAQ,CAAC;AAAA,aACTM,EAAM,QAAQ,UAAU;AACjC,MAAAA,EAAM,eAAA;AACN,YAAMV,IAAY,CAAC,GAAGT,CAAK;AAC3B,MAAAS,EAAUI,CAAK,IAAI,IACnBL,EAAOC,CAAS;AAAA,IAClB;AAAA,EACF,GAEMW,IAAc,CAACP,GAAeM,MAA4C;AAC9E,IAAAA,EAAM,eAAA;AACN,UAAMJ,IAAW,CAAC,GAAGI,EAAM,cAAc,QAAQ,MAAM,CAAC,EAAE,OAAO,CAACR,MAAMxB,EAAQ,KAAKwB,CAAC,CAAC;AACvF,QAAII,EAAS,WAAW,EAAG;AAC3B,UAAMN,IAAY,CAAC,GAAGT,CAAK;AAC3B,QAAIgB,IAAIH;AACR,eAAWI,KAAMF,GAAU;AACzB,UAAIC,KAAKtD,EAAQ;AACjB,MAAA+C,EAAUO,CAAC,IAAIC,GACfD;AAAA,IACF;AACA,IAAAR,EAAOC,CAAS,GAChBJ,EAASW,CAAC;AAAA,EACZ,GAGMK,IAAa,CAACF,MAAsC;AACxD,IAAKA,EAAM,cAAc,SAASA,EAAM,aAA4B,KAClE5B,KAAA,QAAAA,EAAO,OAAO4B;AAAA,EAElB;AAEA,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAxC;AAAA,MACA,WAAWyC;AAAA,QACTC,EAAY;AAAA,QACZ1B,KAAiB0B,EAAY;AAAA,QAC7BjD,KAAYiD,EAAY;AAAA,QACxB5C;AAAA,MAAA;AAAA,MAEF,OACE;AAAA,QACE,gBAAgB,kBAAkBD,CAAK;AAAA,QACvC,GAAGE;AAAA,MAAA;AAAA,MAIN,UAAA;AAAA,QAAAV,KAAS,QACR,gBAAAmD,EAAC,QAAA,EAAK,WAAWE,EAAY,OAC3B,UAAA;AAAA,UAAA,gBAAAC,EAACC,KAAW,IAAG,QAAO,SAAQ,aAAY,OAAM,SAC7C,UAAAvD,EAAA,CACH;AAAA,UACCG,uBACE,QAAA,EAAK,WAAWkD,EAAY,UAAU,eAAY,QAAO,UAAA,IAAA,CAE1D;AAAA,QAAA,GAEJ;AAAA,QAGF,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAY,OAAOtD,KAAU,WAAWA,IAAQ;AAAA,YAChD,gBAAc2B,KAAiB;AAAA,YAC/B,oBAAkBC,KAAsB,OAAOd,IAAW;AAAA,YAC1D,WAAWsC,EAAKI,EAAO,KAAKA,EAAOjD,CAAI,GAAGoB,KAAiB6B,EAAO,OAAO;AAAA,YACzE,QAAQN;AAAA,YAEP,UAAArB,EAAM,IAAI,CAAC4B,GAAMtB,MAChB,gBAAAmB;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,KAAK,CAAClB,MAAO;AACX,kBAAAN,EAAU,QAAQK,CAAC,IAAIC;AAAA,gBACzB;AAAA,gBAEA,MAAMD,MAAM,IAAIpC,IAAO;AAAA,gBACvB,MAAK;AAAA,gBACL,WAAWJ,MAAS,YAAY,YAAY;AAAA,gBAC5C,cAAcwC,MAAM,IAAI,kBAAkB;AAAA,gBAC1C,cAAYvB,EAAE,kBAAkB,EAAE,OAAOuB,IAAI,GAAG,OAAO5C,GAAQ;AAAA,gBAC/D,WAAW6D,EAAKI,EAAO,KAAKC,MAAS,MAAMD,EAAO,MAAM;AAAA,gBACxD,OAAOC;AAAA,gBACP,aAAAnD;AAAA,gBACA,UAAAF;AAAA,gBACA,UAAU,CAACsD,MAAMjB,EAAaN,GAAGuB,EAAE,OAAO,KAAK;AAAA,gBAC/C,WAAW,CAACA,MAAMX,EAAcZ,GAAGuB,CAAC;AAAA,gBACpC,SAAS,CAACA,MAAMT,EAAYd,GAAGuB,CAAC;AAAA,gBAChC,SAAS,CAACA,MAAMA,EAAE,OAAO,OAAA;AAAA,cAAO;AAAA,cAjB3BvB;AAAA,YAAA,CAmBR;AAAA,UAAA;AAAA,QAAA;AAAA,QAGFP,KAAsB,QACrB,gBAAA0B;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAIzC;AAAA,YACJ,SAAQ;AAAA,YACR,OAAOa,IAAgB,UAAU;AAAA,YACjC,WAAW0B,EAAY;AAAA,YAEtB,UAAAzB;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/dist/PageLayout-DddzYw2B.js

@@ -0,0 +1,12 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import { C as f } from "./Card-DzClqJuu.js";
+const n = a(
+  function(r, o) {
+    return /* @__PURE__ */ t(f, { ref: o, flat: !0, ...r });
+  }
+);
+export {
+  n as P
+};
+//# sourceMappingURL=PageLayout-DddzYw2B.js.map

package/dist/PageLayout-DddzYw2B.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLayout-DddzYw2B.js","sources":["../src/components/PageLayout/PageLayout.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Card, type CardProps } from '../Card'\n\n/** PageLayout is a flat `Card`, so it gains all of Card's slots minus the `flat` toggle (always flat). */\nexport interface PageLayoutProps extends Omit<CardProps, 'flat'> {}\n\n/**\n * The content container a page's body sits in — a **flat `Card`** (no shadow, the page `background`\n * color), so it blends with the shell while the Cards/inputs placed inside it read as elevated. Being\n * a Card, it gains the full Card anatomy: an optional header (`icon` + `title` + `subtitle` +\n * `actions`), the body (`children`), a `footer` / `footerStart`, and `collapsible`. Rendered by the\n * consumer inside each route, below the shell's breadcrumbs + page title:\n * `<PageLayout title=\"Settings\" actions={…}>…</PageLayout>`. Styling uses `--tz-*` tokens only.\n */\nexport const PageLayout = forwardRef<HTMLDivElement, PageLayoutProps>(\n  function PageLayout(props, ref) {\n    return <Card ref={ref} flat {...props} />\n  },\n)\n"],"names":["PageLayout","forwardRef","props","ref","Card"],"mappings":";;;AAcO,MAAMA,IAAaC;AAAA,EACxB,SAAoBC,GAAOC,GAAK;AAC9B,6BAAQC,GAAA,EAAK,KAAAD,GAAU,MAAI,IAAE,GAAGD,GAAO;AAAA,EACzC;AACF;"}

package/dist/PageLayout-Dfbjw6jD.cjs

@@ -0,0 +1,2 @@
+"use strict";const t=require("react/jsx-runtime"),a=require("react"),u=require("./Card-CfyaerZZ.cjs"),o=a.forwardRef(function(e,r){return t.jsx(u.Card,{ref:r,flat:!0,...e})});exports.PageLayout=o;
+//# sourceMappingURL=PageLayout-Dfbjw6jD.cjs.map

package/dist/PageLayout-Dfbjw6jD.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLayout-Dfbjw6jD.cjs","sources":["../src/components/PageLayout/PageLayout.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Card, type CardProps } from '../Card'\n\n/** PageLayout is a flat `Card`, so it gains all of Card's slots minus the `flat` toggle (always flat). */\nexport interface PageLayoutProps extends Omit<CardProps, 'flat'> {}\n\n/**\n * The content container a page's body sits in — a **flat `Card`** (no shadow, the page `background`\n * color), so it blends with the shell while the Cards/inputs placed inside it read as elevated. Being\n * a Card, it gains the full Card anatomy: an optional header (`icon` + `title` + `subtitle` +\n * `actions`), the body (`children`), a `footer` / `footerStart`, and `collapsible`. Rendered by the\n * consumer inside each route, below the shell's breadcrumbs + page title:\n * `<PageLayout title=\"Settings\" actions={…}>…</PageLayout>`. Styling uses `--tz-*` tokens only.\n */\nexport const PageLayout = forwardRef<HTMLDivElement, PageLayoutProps>(\n  function PageLayout(props, ref) {\n    return <Card ref={ref} flat {...props} />\n  },\n)\n"],"names":["PageLayout","forwardRef","props","ref","Card"],"mappings":"sGAcaA,EAAaC,EAAAA,WACxB,SAAoBC,EAAOC,EAAK,CAC9B,aAAQC,EAAAA,KAAA,CAAK,IAAAD,EAAU,KAAI,GAAE,GAAGD,EAAO,CACzC,CACF"}

package/dist/Pagination-CN9V8M5C.js

@@ -0,0 +1,139 @@
+import { jsx as r, jsxs as Q } from "react/jsx-runtime";
+import { forwardRef as U, useState as V } from "react";
+import { clsx as d } from "clsx";
+import { I as W } from "./Icon-CophpkHo.js";
+import { a as X } from "./ConfigProvider-2c94kUOk.js";
+const w = (s, t) => Array.from({ length: Math.max(t - s + 1, 0) }, (l, a) => s + a);
+function Y({
+  count: s,
+  page: t,
+  siblingCount: l = 1,
+  boundaryCount: a = 1
+}) {
+  if (s <= 0) return [];
+  const p = w(1, Math.min(a, s)), c = w(Math.max(s - a + 1, a + 1), s), _ = Math.max(
+    Math.min(t - l, s - a - l * 2 - 1),
+    a + 2
+  ), f = Math.min(
+    Math.max(t + l, a + l * 2 + 2),
+    c.length > 0 ? c[0] - 2 : s - 1
+  );
+  return [
+    ...p,
+    // A start ellipsis, OR the single page that sits between the start boundary and the siblings.
+    ..._ > a + 2 ? ["start-ellipsis"] : a + 1 < s - a ? [a + 1] : [],
+    ...w(_, f),
+    // An end ellipsis, OR the single page between the siblings and the end boundary.
+    ...f < s - a - 1 ? ["end-ellipsis"] : s - a > a ? [s - a] : [],
+    ...c
+  ];
+}
+const Z = "_pagination_wk3op_3", b = "_list_wk3op_8", y = "_item_wk3op_18", u = "_sm_wk3op_28", C = "_md_wk3op_33", aa = "_lg_wk3op_38", sa = "_page_wk3op_45", ea = "_selected_wk3op_64", ta = "_outlined_wk3op_80", ia = "_rounded_wk3op_96", la = "_arrow_wk3op_26", na = "_flip_wk3op_107", ra = "_ellipsis_wk3op_112", e = {
+  pagination: Z,
+  list: b,
+  item: y,
+  sm: u,
+  md: C,
+  lg: aa,
+  page: sa,
+  selected: ea,
+  outlined: ta,
+  rounded: ia,
+  arrow: la,
+  flip: na,
+  ellipsis: ra
+}, P = (s, t, l) => Math.min(Math.max(s, t), l), fa = U(function({
+  count: t,
+  page: l,
+  defaultPage: a = 1,
+  onChange: p,
+  siblingCount: c = 1,
+  boundaryCount: _ = 1,
+  showFirstButton: f = !1,
+  showLastButton: $ = !1,
+  hidePrevButton: z = !1,
+  hideNextButton: A = !1,
+  variant: I = "outlined",
+  size: h = "md",
+  color: k = "accent",
+  rounded: S = !1,
+  disabled: x = !1,
+  className: j,
+  style: L,
+  "aria-label": R = "Pagination",
+  ...E
+}, T) {
+  const M = l !== void 0, [q, B] = V(a), N = Math.max(t, 1), n = P(M ? l : q, 1, N), v = (i) => {
+    const o = P(i, 1, N);
+    o !== n && (M || B(o), p == null || p(o));
+  }, m = X(), D = Y({ count: t, page: n, siblingCount: c, boundaryCount: _ }), F = {
+    "--tz-btn-rgb": `var(--tz-color-${k}-rgb)`,
+    "--tz-btn-on": `var(--tz-color-${k}-contrast, #fff)`,
+    ...L
+  }, g = (i, o, G, H, J, K, O = !1) => J ? null : /* @__PURE__ */ r("li", { className: e.item, children: /* @__PURE__ */ r(
+    "button",
+    {
+      type: "button",
+      className: d(e.page, e.arrow),
+      "aria-label": G,
+      disabled: x || K,
+      onClick: () => v(H),
+      children: /* @__PURE__ */ r(W, { name: o, size: h, className: O ? e.flip : void 0 })
+    }
+  ) }, i);
+  return /* @__PURE__ */ r(
+    "nav",
+    {
+      ref: T,
+      "aria-label": R,
+      className: d(
+        e.pagination,
+        e[I],
+        e[h],
+        S && e.rounded,
+        j
+      ),
+      style: F,
+      ...E,
+      children: /* @__PURE__ */ Q("ul", { className: e.list, children: [
+        f && g("first", "Previous", m("pagination.first"), 1, !1, n <= 1),
+        g(
+          "prev",
+          "ArrowLeft",
+          m("pagination.previous"),
+          n - 1,
+          z,
+          n <= 1
+        ),
+        D.map(
+          (i, o) => typeof i == "number" ? /* @__PURE__ */ r("li", { className: e.item, children: /* @__PURE__ */ r(
+            "button",
+            {
+              type: "button",
+              className: d(e.page, i === n && e.selected),
+              "aria-label": m("pagination.page", { page: i }),
+              "aria-current": i === n ? "page" : void 0,
+              disabled: x,
+              onClick: () => v(i),
+              children: i
+            }
+          ) }, i) : /* @__PURE__ */ r("li", { className: e.item, "aria-hidden": !0, children: /* @__PURE__ */ r("span", { className: e.ellipsis, children: "…" }) }, `${i}-${o}`)
+        ),
+        g(
+          "next",
+          "ArrowLeft",
+          m("pagination.next"),
+          n + 1,
+          A,
+          n >= t,
+          !0
+        ),
+        $ && g("last", "Next", m("pagination.last"), t, !1, n >= t)
+      ] })
+    }
+  );
+});
+export {
+  fa as P
+};
+//# sourceMappingURL=Pagination-CN9V8M5C.js.map

package/dist/Pagination-CN9V8M5C.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination-CN9V8M5C.js","sources":["../src/components/Pagination/paginationRange.ts","../src/components/Pagination/Pagination.tsx"],"sourcesContent":["/** A gap placeholder rendered as `…` — at the start (`1 … 4`) or end (`6 … 10`) of the range. */\nexport type PaginationEllipsis = 'start-ellipsis' | 'end-ellipsis'\n\n/** One item in a pagination range: a 1-based page number, or an ellipsis placeholder. */\nexport type PaginationItem = number | PaginationEllipsis\n\n/** Inputs for {@link paginationRange}. */\nexport interface PaginationRangeOptions {\n  /** Total number of pages. */\n  count: number\n  /** Current page (1-based). */\n  page: number\n  /** Pages shown on each side of the current page. Defaults to `1`. */\n  siblingCount?: number\n  /** Pages always shown at the start and end. Defaults to `1`. */\n  boundaryCount?: number\n}\n\n/** Inclusive integer range `[start, end]` (empty when `end < start`). */\nconst range = (start: number, end: number): number[] =>\n  Array.from({ length: Math.max(end - start + 1, 0) }, (_, i) => start + i)\n\n/**\n * Build the page-item sequence for a pager — the boundary pages, the current page with its siblings,\n * and `start`/`end` ellipses where pages are skipped (the classic `1 … 4 5 6 … 10`). Pure and\n * framework-free so it can be unit-tested in isolation and reused. Assumes `1 <= page <= count`.\n */\nexport function paginationRange({\n  count,\n  page,\n  siblingCount = 1,\n  boundaryCount = 1,\n}: PaginationRangeOptions): PaginationItem[] {\n  if (count <= 0) return []\n\n  // Pages pinned at each edge.\n  const startPages = range(1, Math.min(boundaryCount, count))\n  const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count)\n\n  // The window of pages around the current one, clamped so it never overlaps the boundaries.\n  const siblingsStart = Math.max(\n    Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1),\n    boundaryCount + 2,\n  )\n  const siblingsEnd = Math.min(\n    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),\n    endPages.length > 0 ? endPages[0] - 2 : count - 1,\n  )\n\n  return [\n    ...startPages,\n    // A start ellipsis, OR the single page that sits between the start boundary and the siblings.\n    ...(siblingsStart > boundaryCount + 2\n      ? (['start-ellipsis'] as PaginationItem[])\n      : boundaryCount + 1 < count - boundaryCount\n        ? [boundaryCount + 1]\n        : []),\n    ...range(siblingsStart, siblingsEnd),\n    // An end ellipsis, OR the single page between the siblings and the end boundary.\n    ...(siblingsEnd < count - boundaryCount - 1\n      ? (['end-ellipsis'] as PaginationItem[])\n      : count - boundaryCount > boundaryCount\n        ? [count - boundaryCount]\n        : []),\n    ...endPages,\n  ]\n}\n","import {\n  forwardRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { Icon, type IconName } from '../Icon'\nimport { useT, type ThemeColor } from '../../theme'\nimport { paginationRange } from './paginationRange'\nimport styles from './Pagination.module.css'\n\nexport type PaginationVariant = 'outlined' | 'text'\nexport type PaginationSize = 'sm' | 'md' | 'lg'\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'color' | 'onChange'> {\n  /** Total number of pages (required). From a row count, pass `Math.ceil(total / pageSize)`. */\n  count: number\n  /** Controlled current page (1-based). */\n  page?: number\n  /** Initial page for uncontrolled use (1-based). Defaults to `1`. */\n  defaultPage?: number\n  /** Fires with the next page (1-based) when a page or arrow is activated. */\n  onChange?: (page: number) => void\n  /** Pages shown on each side of the current page. Defaults to `1`. */\n  siblingCount?: number\n  /** Pages always shown at the start and end. Defaults to `1`. */\n  boundaryCount?: number\n  /** Show a jump-to-first-page button before the previous arrow. Defaults to `false`. */\n  showFirstButton?: boolean\n  /** Show a jump-to-last-page button after the next arrow. Defaults to `false`. */\n  showLastButton?: boolean\n  /** Hide the previous-page arrow. Defaults to `false`. */\n  hidePrevButton?: boolean\n  /** Hide the next-page arrow. Defaults to `false`. */\n  hideNextButton?: boolean\n  /** Item style: `outlined` (bordered boxes, default) or `text` (borderless). */\n  variant?: PaginationVariant\n  /** Control size — sets the box, font, and icon sizes. Defaults to `md`. */\n  size?: PaginationSize\n  /** Theme palette token that tints the selected page. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Render circular page buttons instead of rounded rectangles. Defaults to `false`. */\n  rounded?: boolean\n  /** Disable the whole control. Defaults to `false`. */\n  disabled?: boolean\n}\n\nconst clamp = (n: number, lo: number, hi: number) => Math.min(Math.max(n, lo), hi)\n\n/**\n * A page navigator — previous/next arrows around a numbered range with `…` gaps (`1 … 4 5 6 … 10`),\n * the classic pager. Reusable across tables, lists, and galleries: drive it with `count` (total\n * pages) + `page`/`onChange`, computing `count` as `Math.ceil(total / pageSize)`. The selected page\n * is tinted via the shared `--tz-btn-rgb` pattern; unselected items are bordered (`outlined`) or\n * borderless (`text`). Controlled (`page` + `onChange`) or uncontrolled (`defaultPage`).\n */\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(function Pagination(\n  {\n    count,\n    page,\n    defaultPage = 1,\n    onChange,\n    siblingCount = 1,\n    boundaryCount = 1,\n    showFirstButton = false,\n    showLastButton = false,\n    hidePrevButton = false,\n    hideNextButton = false,\n    variant = 'outlined',\n    size = 'md',\n    color = 'accent',\n    rounded = false,\n    disabled = false,\n    className,\n    style,\n    'aria-label': ariaLabel = 'Pagination',\n    ...props\n  },\n  ref,\n) {\n  const isControlled = page !== undefined\n  const [internal, setInternal] = useState(defaultPage)\n  const lastPage = Math.max(count, 1)\n  const current = clamp(isControlled ? page! : internal, 1, lastPage)\n\n  const go = (next: number) => {\n    const target = clamp(next, 1, lastPage)\n    if (target === current) return\n    if (!isControlled) setInternal(target)\n    onChange?.(target)\n  }\n\n  const t = useT()\n  const items = paginationRange({ count, page: current, siblingCount, boundaryCount })\n\n  // The selected fill + its readable text color, derived once via the shared button-tint vars.\n  const rootStyle = {\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  // An arrow / jump control. `flip` mirrors the (left-pointing) icon to face right — the icon set has\n  // no matching plain right arrow, so the next/last glyphs are the left ones flipped for symmetry.\n  const control = (\n    key: string,\n    icon: IconName,\n    label: string,\n    target: number,\n    hidden: boolean,\n    atBound: boolean,\n    flip = false,\n  ): ReactNode =>\n    hidden ? null : (\n      <li key={key} className={styles.item}>\n        <button\n          type=\"button\"\n          className={clsx(styles.page, styles.arrow)}\n          aria-label={label}\n          disabled={disabled || atBound}\n          onClick={() => go(target)}\n        >\n          <Icon name={icon} size={size} className={flip ? styles.flip : undefined} />\n        </button>\n      </li>\n    )\n\n  return (\n    <nav\n      ref={ref}\n      aria-label={ariaLabel}\n      className={clsx(\n        styles.pagination,\n        styles[variant],\n        styles[size],\n        rounded && styles.rounded,\n        className,\n      )}\n      style={rootStyle}\n      {...props}\n    >\n      <ul className={styles.list}>\n        {showFirstButton &&\n          control('first', 'Previous', t('pagination.first'), 1, false, current <= 1)}\n        {control(\n          'prev',\n          'ArrowLeft',\n          t('pagination.previous'),\n          current - 1,\n          hidePrevButton,\n          current <= 1,\n        )}\n        {items.map((item, i) =>\n          typeof item === 'number' ? (\n            <li key={item} className={styles.item}>\n              <button\n                type=\"button\"\n                className={clsx(styles.page, item === current && styles.selected)}\n                aria-label={t('pagination.page', { page: item })}\n                aria-current={item === current ? 'page' : undefined}\n                disabled={disabled}\n                onClick={() => go(item)}\n              >\n                {item}\n              </button>\n            </li>\n          ) : (\n            <li key={`${item}-${i}`} className={styles.item} aria-hidden>\n              <span className={styles.ellipsis}>…</span>\n            </li>\n          ),\n        )}\n        {control(\n          'next',\n          'ArrowLeft',\n          t('pagination.next'),\n          current + 1,\n          hideNextButton,\n          current >= count,\n          true,\n        )}\n        {showLastButton &&\n          control('last', 'Next', t('pagination.last'), count, false, current >= count)}\n      </ul>\n    </nav>\n  )\n})\n"],"names":["range","start","end","_","i","paginationRange","count","page","siblingCount","boundaryCount","startPages","endPages","siblingsStart","siblingsEnd","clamp","n","lo","hi","Pagination","forwardRef","defaultPage","onChange","showFirstButton","showLastButton","hidePrevButton","hideNextButton","variant","size","color","rounded","disabled","className","style","ariaLabel","props","ref","isControlled","internal","setInternal","useState","lastPage","current","go","next","target","t","useT","items","rootStyle","control","key","icon","label","hidden","atBound","flip","jsx","styles","clsx","Icon","jsxs","item"],"mappings":"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"}

package/dist/Pagination-DRwTLPh8.cjs

@@ -0,0 +1,2 @@
+"use strict";const r=require("react/jsx-runtime"),N=require("react"),d=require("clsx"),U=require("./Icon-CXTl_QAP.cjs"),V=require("./ConfigProvider-ByOFXVyP.cjs"),x=(e,t)=>Array.from({length:Math.max(t-e+1,0)},(l,s)=>e+s);function W({count:e,page:t,siblingCount:l=1,boundaryCount:s=1}){if(e<=0)return[];const o=x(1,Math.min(s,e)),p=x(Math.max(e-s+1,s+1),e),m=Math.max(Math.min(t-l,e-s-l*2-1),s+2),g=Math.min(Math.max(t+l,s+l*2+2),p.length>0?p[0]-2:e-1);return[...o,...m>s+2?["start-ellipsis"]:s+1<e-s?[s+1]:[],...x(m,g),...g<e-s-1?["end-ellipsis"]:e-s>s?[e-s]:[],...p]}const X="_pagination_wk3op_3",Y="_list_wk3op_8",Z="_item_wk3op_18",b="_sm_wk3op_28",u="_md_wk3op_33",y="_lg_wk3op_38",C="_page_wk3op_45",ss="_selected_wk3op_64",es="_outlined_wk3op_80",as="_rounded_wk3op_96",ts="_arrow_wk3op_26",is="_flip_wk3op_107",ls="_ellipsis_wk3op_112",a={pagination:X,list:Y,item:Z,sm:b,md:u,lg:y,page:C,selected:ss,outlined:es,rounded:as,arrow:ts,flip:is,ellipsis:ls},P=(e,t,l)=>Math.min(Math.max(e,t),l),ns=N.forwardRef(function({count:t,page:l,defaultPage:s=1,onChange:o,siblingCount:p=1,boundaryCount:m=1,showFirstButton:g=!1,showLastButton:q=!1,hidePrevButton:$=!1,hideNextButton:z=!1,variant:A="outlined",size:w="md",color:h="accent",rounded:I=!1,disabled:k=!1,className:R,style:S,"aria-label":L="Pagination",...E},T){const j=l!==void 0,[B,D]=N.useState(s),v=Math.max(t,1),n=P(j?l:B,1,v),M=i=>{const c=P(i,1,v);c!==n&&(j||D(c),o==null||o(c))},_=V.useT(),F=W({count:t,page:n,siblingCount:p,boundaryCount:m}),G={"--tz-btn-rgb":`var(--tz-color-${h}-rgb)`,"--tz-btn-on":`var(--tz-color-${h}-contrast, #fff)`,...S},f=(i,c,H,J,K,O,Q=!1)=>K?null:r.jsx("li",{className:a.item,children:r.jsx("button",{type:"button",className:d.clsx(a.page,a.arrow),"aria-label":H,disabled:k||O,onClick:()=>M(J),children:r.jsx(U.Icon,{name:c,size:w,className:Q?a.flip:void 0})})},i);return r.jsx("nav",{ref:T,"aria-label":L,className:d.clsx(a.pagination,a[A],a[w],I&&a.rounded,R),style:G,...E,children:r.jsxs("ul",{className:a.list,children:[g&&f("first","Previous",_("pagination.first"),1,!1,n<=1),f("prev","ArrowLeft",_("pagination.previous"),n-1,$,n<=1),F.map((i,c)=>typeof i=="number"?r.jsx("li",{className:a.item,children:r.jsx("button",{type:"button",className:d.clsx(a.page,i===n&&a.selected),"aria-label":_("pagination.page",{page:i}),"aria-current":i===n?"page":void 0,disabled:k,onClick:()=>M(i),children:i})},i):r.jsx("li",{className:a.item,"aria-hidden":!0,children:r.jsx("span",{className:a.ellipsis,children:"…"})},`${i}-${c}`)),f("next","ArrowLeft",_("pagination.next"),n+1,z,n>=t,!0),q&&f("last","Next",_("pagination.last"),t,!1,n>=t)]})})});exports.Pagination=ns;
+//# sourceMappingURL=Pagination-DRwTLPh8.cjs.map

package/dist/Pagination-DRwTLPh8.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination-DRwTLPh8.cjs","sources":["../src/components/Pagination/paginationRange.ts","../src/components/Pagination/Pagination.tsx"],"sourcesContent":["/** A gap placeholder rendered as `…` — at the start (`1 … 4`) or end (`6 … 10`) of the range. */\nexport type PaginationEllipsis = 'start-ellipsis' | 'end-ellipsis'\n\n/** One item in a pagination range: a 1-based page number, or an ellipsis placeholder. */\nexport type PaginationItem = number | PaginationEllipsis\n\n/** Inputs for {@link paginationRange}. */\nexport interface PaginationRangeOptions {\n  /** Total number of pages. */\n  count: number\n  /** Current page (1-based). */\n  page: number\n  /** Pages shown on each side of the current page. Defaults to `1`. */\n  siblingCount?: number\n  /** Pages always shown at the start and end. Defaults to `1`. */\n  boundaryCount?: number\n}\n\n/** Inclusive integer range `[start, end]` (empty when `end < start`). */\nconst range = (start: number, end: number): number[] =>\n  Array.from({ length: Math.max(end - start + 1, 0) }, (_, i) => start + i)\n\n/**\n * Build the page-item sequence for a pager — the boundary pages, the current page with its siblings,\n * and `start`/`end` ellipses where pages are skipped (the classic `1 … 4 5 6 … 10`). Pure and\n * framework-free so it can be unit-tested in isolation and reused. Assumes `1 <= page <= count`.\n */\nexport function paginationRange({\n  count,\n  page,\n  siblingCount = 1,\n  boundaryCount = 1,\n}: PaginationRangeOptions): PaginationItem[] {\n  if (count <= 0) return []\n\n  // Pages pinned at each edge.\n  const startPages = range(1, Math.min(boundaryCount, count))\n  const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count)\n\n  // The window of pages around the current one, clamped so it never overlaps the boundaries.\n  const siblingsStart = Math.max(\n    Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1),\n    boundaryCount + 2,\n  )\n  const siblingsEnd = Math.min(\n    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),\n    endPages.length > 0 ? endPages[0] - 2 : count - 1,\n  )\n\n  return [\n    ...startPages,\n    // A start ellipsis, OR the single page that sits between the start boundary and the siblings.\n    ...(siblingsStart > boundaryCount + 2\n      ? (['start-ellipsis'] as PaginationItem[])\n      : boundaryCount + 1 < count - boundaryCount\n        ? [boundaryCount + 1]\n        : []),\n    ...range(siblingsStart, siblingsEnd),\n    // An end ellipsis, OR the single page between the siblings and the end boundary.\n    ...(siblingsEnd < count - boundaryCount - 1\n      ? (['end-ellipsis'] as PaginationItem[])\n      : count - boundaryCount > boundaryCount\n        ? [count - boundaryCount]\n        : []),\n    ...endPages,\n  ]\n}\n","import {\n  forwardRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { Icon, type IconName } from '../Icon'\nimport { useT, type ThemeColor } from '../../theme'\nimport { paginationRange } from './paginationRange'\nimport styles from './Pagination.module.css'\n\nexport type PaginationVariant = 'outlined' | 'text'\nexport type PaginationSize = 'sm' | 'md' | 'lg'\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'color' | 'onChange'> {\n  /** Total number of pages (required). From a row count, pass `Math.ceil(total / pageSize)`. */\n  count: number\n  /** Controlled current page (1-based). */\n  page?: number\n  /** Initial page for uncontrolled use (1-based). Defaults to `1`. */\n  defaultPage?: number\n  /** Fires with the next page (1-based) when a page or arrow is activated. */\n  onChange?: (page: number) => void\n  /** Pages shown on each side of the current page. Defaults to `1`. */\n  siblingCount?: number\n  /** Pages always shown at the start and end. Defaults to `1`. */\n  boundaryCount?: number\n  /** Show a jump-to-first-page button before the previous arrow. Defaults to `false`. */\n  showFirstButton?: boolean\n  /** Show a jump-to-last-page button after the next arrow. Defaults to `false`. */\n  showLastButton?: boolean\n  /** Hide the previous-page arrow. Defaults to `false`. */\n  hidePrevButton?: boolean\n  /** Hide the next-page arrow. Defaults to `false`. */\n  hideNextButton?: boolean\n  /** Item style: `outlined` (bordered boxes, default) or `text` (borderless). */\n  variant?: PaginationVariant\n  /** Control size — sets the box, font, and icon sizes. Defaults to `md`. */\n  size?: PaginationSize\n  /** Theme palette token that tints the selected page. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Render circular page buttons instead of rounded rectangles. Defaults to `false`. */\n  rounded?: boolean\n  /** Disable the whole control. Defaults to `false`. */\n  disabled?: boolean\n}\n\nconst clamp = (n: number, lo: number, hi: number) => Math.min(Math.max(n, lo), hi)\n\n/**\n * A page navigator — previous/next arrows around a numbered range with `…` gaps (`1 … 4 5 6 … 10`),\n * the classic pager. Reusable across tables, lists, and galleries: drive it with `count` (total\n * pages) + `page`/`onChange`, computing `count` as `Math.ceil(total / pageSize)`. The selected page\n * is tinted via the shared `--tz-btn-rgb` pattern; unselected items are bordered (`outlined`) or\n * borderless (`text`). Controlled (`page` + `onChange`) or uncontrolled (`defaultPage`).\n */\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(function Pagination(\n  {\n    count,\n    page,\n    defaultPage = 1,\n    onChange,\n    siblingCount = 1,\n    boundaryCount = 1,\n    showFirstButton = false,\n    showLastButton = false,\n    hidePrevButton = false,\n    hideNextButton = false,\n    variant = 'outlined',\n    size = 'md',\n    color = 'accent',\n    rounded = false,\n    disabled = false,\n    className,\n    style,\n    'aria-label': ariaLabel = 'Pagination',\n    ...props\n  },\n  ref,\n) {\n  const isControlled = page !== undefined\n  const [internal, setInternal] = useState(defaultPage)\n  const lastPage = Math.max(count, 1)\n  const current = clamp(isControlled ? page! : internal, 1, lastPage)\n\n  const go = (next: number) => {\n    const target = clamp(next, 1, lastPage)\n    if (target === current) return\n    if (!isControlled) setInternal(target)\n    onChange?.(target)\n  }\n\n  const t = useT()\n  const items = paginationRange({ count, page: current, siblingCount, boundaryCount })\n\n  // The selected fill + its readable text color, derived once via the shared button-tint vars.\n  const rootStyle = {\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  // An arrow / jump control. `flip` mirrors the (left-pointing) icon to face right — the icon set has\n  // no matching plain right arrow, so the next/last glyphs are the left ones flipped for symmetry.\n  const control = (\n    key: string,\n    icon: IconName,\n    label: string,\n    target: number,\n    hidden: boolean,\n    atBound: boolean,\n    flip = false,\n  ): ReactNode =>\n    hidden ? null : (\n      <li key={key} className={styles.item}>\n        <button\n          type=\"button\"\n          className={clsx(styles.page, styles.arrow)}\n          aria-label={label}\n          disabled={disabled || atBound}\n          onClick={() => go(target)}\n        >\n          <Icon name={icon} size={size} className={flip ? styles.flip : undefined} />\n        </button>\n      </li>\n    )\n\n  return (\n    <nav\n      ref={ref}\n      aria-label={ariaLabel}\n      className={clsx(\n        styles.pagination,\n        styles[variant],\n        styles[size],\n        rounded && styles.rounded,\n        className,\n      )}\n      style={rootStyle}\n      {...props}\n    >\n      <ul className={styles.list}>\n        {showFirstButton &&\n          control('first', 'Previous', t('pagination.first'), 1, false, current <= 1)}\n        {control(\n          'prev',\n          'ArrowLeft',\n          t('pagination.previous'),\n          current - 1,\n          hidePrevButton,\n          current <= 1,\n        )}\n        {items.map((item, i) =>\n          typeof item === 'number' ? (\n            <li key={item} className={styles.item}>\n              <button\n                type=\"button\"\n                className={clsx(styles.page, item === current && styles.selected)}\n                aria-label={t('pagination.page', { page: item })}\n                aria-current={item === current ? 'page' : undefined}\n                disabled={disabled}\n                onClick={() => go(item)}\n              >\n                {item}\n              </button>\n            </li>\n          ) : (\n            <li key={`${item}-${i}`} className={styles.item} aria-hidden>\n              <span className={styles.ellipsis}>…</span>\n            </li>\n          ),\n        )}\n        {control(\n          'next',\n          'ArrowLeft',\n          t('pagination.next'),\n          current + 1,\n          hideNextButton,\n          current >= count,\n          true,\n        )}\n        {showLastButton &&\n          control('last', 'Next', t('pagination.last'), count, false, current >= count)}\n      </ul>\n    </nav>\n  )\n})\n"],"names":["range","start","end","_","i","paginationRange","count","page","siblingCount","boundaryCount","startPages","endPages","siblingsStart","siblingsEnd","clamp","n","lo","hi","Pagination","forwardRef","defaultPage","onChange","showFirstButton","showLastButton","hidePrevButton","hideNextButton","variant","size","color","rounded","disabled","className","style","ariaLabel","props","ref","isControlled","internal","setInternal","useState","lastPage","current","go","next","target","t","useT","items","rootStyle","control","key","icon","label","hidden","atBound","flip","jsx","styles","clsx","Icon","jsxs","item"],"mappings":"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"}

package/dist/Popover-CBI1icIM.cjs

@@ -0,0 +1,2 @@
+"use strict";const i=require("react/jsx-runtime"),n=require("react"),z=require("clsx"),E=require("./FloatingPanel-U6sGYiSK.cjs"),N="_popover_1gmzd_4",S={popover:N};function T({trigger:a,children:v,align:m="start",open:f,defaultOpen:x=!1,onOpenChange:l,trapFocus:q=!1,matchTriggerWidth:R=!1,width:g,ariaLabel:j,disabled:F=!1,className:I,style:P}){const u=n.useId(),c=n.useRef(null),p=f!==void 0,[_,k]=n.useState(x),o=p?f:_,d=e=>{p||k(e),l==null||l(e)},t=a.props,r=t.ref,y=n.cloneElement(a,{ref:e=>{c.current=e,typeof r=="function"?r(e):r&&(r.current=e)},onClick:e=>{var s;(s=t.onClick)==null||s.call(t,e),F||d(!o)},"aria-haspopup":"dialog","aria-expanded":o,"aria-controls":o?u:void 0});return i.jsxs(i.Fragment,{children:[y,i.jsx(E.FloatingPanel,{open:o,triggerRef:c,align:m,onClose:e=>{var s;d(!1),e&&((s=c.current)==null||s.focus())},id:u,role:"dialog",ariaLabel:j,trapFocus:q,matchTriggerWidth:R,width:g,className:z.clsx(S.popover,I),style:P,children:v})]})}exports.Popover=T;
+//# sourceMappingURL=Popover-CBI1icIM.cjs.map

package/dist/Popover-CBI1icIM.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover-CBI1icIM.cjs","sources":["../src/components/Popover/Popover.tsx"],"sourcesContent":["import {\n  cloneElement,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type MouseEvent as ReactMouseEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { FloatingPanel } from '../FloatingPanel/FloatingPanel'\nimport styles from './Popover.module.css'\n\nexport type PopoverAlign = 'start' | 'end'\n\nexport interface PopoverProps {\n  /** Element that toggles the popover (e.g. a `Button`/`IconButton`). Cloned to wire click + a11y. */\n  trigger: ReactElement\n  /** Popover content — arbitrary (a header/body/footer, a form, a filter panel, …). */\n  children: ReactNode\n  /**\n   * Horizontal alignment to the trigger: `start` (default — left edges align, grows right) or `end`\n   * (right edges align, grows left — for a trigger near the right edge).\n   */\n  align?: PopoverAlign\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  /** Trap Tab focus inside (+ `aria-modal`) — for form/filter popovers. Defaults to `false`. */\n  trapFocus?: boolean\n  /** Make the panel at least as wide as the trigger. Defaults to `false`. */\n  matchTriggerWidth?: boolean\n  /** Fixed panel width (px number or any CSS width). */\n  width?: number | string\n  /** Accessible label for the panel (`role=\"dialog\"`). */\n  ariaLabel?: string\n  /** Prevents opening. */\n  disabled?: boolean\n  /** Class applied to the floating panel. */\n  className?: string\n  /** Style applied to the floating panel. */\n  style?: CSSProperties\n}\n\n/**\n * An anchored popover holding **arbitrary content** — the generic floating surface for filter panels,\n * forms, detail cards, etc. (unlike `Dropdown`, which is a `role=\"menu\"` of items). Built on the shared\n * `FloatingPanel`: portaled to `<body>`, opens below the `trigger` (flips above on overflow), locks page\n * scroll, dismisses on outside-pointerdown / `Escape` (refocusing the trigger), and animates in. The\n * trigger is cloned to wire `onClick` + `aria-haspopup=\"dialog\"`/`aria-expanded`/`aria-controls`.\n * `trapFocus` cycles Tab within (for forms). Controlled (`open` + `onOpenChange`) or uncontrolled\n * (`defaultOpen`). The panel is `role=\"dialog\"`.\n */\nexport function Popover({\n  trigger,\n  children,\n  align = 'start',\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  trapFocus = false,\n  matchTriggerWidth = false,\n  width,\n  ariaLabel,\n  disabled = false,\n  className,\n  style,\n}: PopoverProps) {\n  const panelId = useId()\n  const triggerRef = useRef<HTMLElement | null>(null)\n\n  const isControlled = open !== undefined\n  const [internalOpen, setInternalOpen] = useState(defaultOpen)\n  const isOpen = isControlled ? open : internalOpen\n\n  const setOpen = (next: boolean) => {\n    if (!isControlled) setInternalOpen(next)\n    onOpenChange?.(next)\n  }\n\n  const triggerProps = trigger.props as {\n    onClick?: (event: ReactMouseEvent) => void\n    ref?: Ref<HTMLElement>\n  }\n  const originalRef = triggerProps.ref\n\n  const clonedTrigger = cloneElement(trigger as ReactElement<Record<string, unknown>>, {\n    ref: (node: HTMLElement | null) => {\n      triggerRef.current = node\n      if (typeof originalRef === 'function') originalRef(node)\n      else if (originalRef) (originalRef as { current: HTMLElement | null }).current = node\n    },\n    onClick: (event: ReactMouseEvent) => {\n      triggerProps.onClick?.(event)\n      if (!disabled) setOpen(!isOpen)\n    },\n    'aria-haspopup': 'dialog',\n    'aria-expanded': isOpen,\n    'aria-controls': isOpen ? panelId : undefined,\n  })\n\n  return (\n    <>\n      {clonedTrigger}\n      <FloatingPanel\n        open={isOpen}\n        triggerRef={triggerRef}\n        align={align}\n        onClose={(refocus) => {\n          setOpen(false)\n          if (refocus) triggerRef.current?.focus()\n        }}\n        id={panelId}\n        role=\"dialog\"\n        ariaLabel={ariaLabel}\n        trapFocus={trapFocus}\n        matchTriggerWidth={matchTriggerWidth}\n        width={width}\n        className={clsx(styles.popover, className)}\n        style={style}\n      >\n        {children}\n      </FloatingPanel>\n    </>\n  )\n}\n"],"names":["Popover","trigger","children","align","open","defaultOpen","onOpenChange","trapFocus","matchTriggerWidth","width","ariaLabel","disabled","className","style","panelId","useId","triggerRef","useRef","isControlled","internalOpen","setInternalOpen","useState","isOpen","setOpen","next","triggerProps","originalRef","clonedTrigger","cloneElement","node","event","_a","jsxs","Fragment","jsx","FloatingPanel","refocus","clsx","styles"],"mappings":"oKA0DO,SAASA,EAAQ,CACtB,QAAAC,EACA,SAAAC,EACA,MAAAC,EAAQ,QACR,KAAAC,EACA,YAAAC,EAAc,GACd,aAAAC,EACA,UAAAC,EAAY,GACZ,kBAAAC,EAAoB,GACpB,MAAAC,EACA,UAAAC,EACA,SAAAC,EAAW,GACX,UAAAC,EACA,MAAAC,CACF,EAAiB,CACf,MAAMC,EAAUC,EAAAA,MAAA,EACVC,EAAaC,EAAAA,OAA2B,IAAI,EAE5CC,EAAed,IAAS,OACxB,CAACe,EAAcC,CAAe,EAAIC,EAAAA,SAAShB,CAAW,EACtDiB,EAASJ,EAAed,EAAOe,EAE/BI,EAAWC,GAAkB,CAC5BN,GAAcE,EAAgBI,CAAI,EACvClB,GAAA,MAAAA,EAAekB,EACjB,EAEMC,EAAexB,EAAQ,MAIvByB,EAAcD,EAAa,IAE3BE,EAAgBC,EAAAA,aAAa3B,EAAkD,CACnF,IAAM4B,GAA6B,CACjCb,EAAW,QAAUa,EACjB,OAAOH,GAAgB,WAAYA,EAAYG,CAAI,EAC9CH,IAAcA,EAAgD,QAAUG,EACnF,EACA,QAAUC,GAA2B,QACnCC,EAAAN,EAAa,UAAb,MAAAM,EAAA,KAAAN,EAAuBK,GAClBnB,GAAUY,EAAQ,CAACD,CAAM,CAChC,EACA,gBAAiB,SACjB,gBAAiBA,EACjB,gBAAiBA,EAASR,EAAU,MAAA,CACrC,EAED,OACEkB,EAAAA,KAAAC,WAAA,CACG,SAAA,CAAAN,EACDO,EAAAA,IAACC,EAAAA,cAAA,CACC,KAAMb,EACN,WAAAN,EACA,MAAAb,EACA,QAAUiC,GAAY,OACpBb,EAAQ,EAAK,EACTa,KAASL,EAAAf,EAAW,UAAX,MAAAe,EAAoB,QACnC,EACA,GAAIjB,EACJ,KAAK,SACL,UAAAJ,EACA,UAAAH,EACA,kBAAAC,EACA,MAAAC,EACA,UAAW4B,EAAAA,KAAKC,EAAO,QAAS1B,CAAS,EACzC,MAAAC,EAEC,SAAAX,CAAA,CAAA,CACH,EACF,CAEJ"}

package/dist/Popover-CgIU4Rhg.js

@@ -0,0 +1,65 @@
+import { jsxs as P, Fragment as z, jsx as E } from "react/jsx-runtime";
+import { useId as N, useRef as S, useState as T, cloneElement as b } from "react";
+import { clsx as q } from "clsx";
+import { F as w } from "./FloatingPanel-BG9Uag__.js";
+const A = "_popover_1gmzd_4", B = {
+  popover: A
+};
+function J({
+  trigger: n,
+  children: m,
+  align: u = "start",
+  open: c,
+  defaultOpen: d = !1,
+  onOpenChange: l,
+  trapFocus: v = !1,
+  matchTriggerWidth: x = !1,
+  width: F,
+  ariaLabel: I,
+  disabled: R = !1,
+  className: _,
+  style: g
+}) {
+  const a = N(), i = S(null), f = c !== void 0, [j, k] = T(d), s = f ? c : j, p = (o) => {
+    f || k(o), l == null || l(o);
+  }, r = n.props, t = r.ref, y = b(n, {
+    ref: (o) => {
+      i.current = o, typeof t == "function" ? t(o) : t && (t.current = o);
+    },
+    onClick: (o) => {
+      var e;
+      (e = r.onClick) == null || e.call(r, o), R || p(!s);
+    },
+    "aria-haspopup": "dialog",
+    "aria-expanded": s,
+    "aria-controls": s ? a : void 0
+  });
+  return /* @__PURE__ */ P(z, { children: [
+    y,
+    /* @__PURE__ */ E(
+      w,
+      {
+        open: s,
+        triggerRef: i,
+        align: u,
+        onClose: (o) => {
+          var e;
+          p(!1), o && ((e = i.current) == null || e.focus());
+        },
+        id: a,
+        role: "dialog",
+        ariaLabel: I,
+        trapFocus: v,
+        matchTriggerWidth: x,
+        width: F,
+        className: q(B.popover, _),
+        style: g,
+        children: m
+      }
+    )
+  ] });
+}
+export {
+  J as P
+};
+//# sourceMappingURL=Popover-CgIU4Rhg.js.map

package/dist/Popover-CgIU4Rhg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover-CgIU4Rhg.js","sources":["../src/components/Popover/Popover.tsx"],"sourcesContent":["import {\n  cloneElement,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type MouseEvent as ReactMouseEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { FloatingPanel } from '../FloatingPanel/FloatingPanel'\nimport styles from './Popover.module.css'\n\nexport type PopoverAlign = 'start' | 'end'\n\nexport interface PopoverProps {\n  /** Element that toggles the popover (e.g. a `Button`/`IconButton`). Cloned to wire click + a11y. */\n  trigger: ReactElement\n  /** Popover content — arbitrary (a header/body/footer, a form, a filter panel, …). */\n  children: ReactNode\n  /**\n   * Horizontal alignment to the trigger: `start` (default — left edges align, grows right) or `end`\n   * (right edges align, grows left — for a trigger near the right edge).\n   */\n  align?: PopoverAlign\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  /** Trap Tab focus inside (+ `aria-modal`) — for form/filter popovers. Defaults to `false`. */\n  trapFocus?: boolean\n  /** Make the panel at least as wide as the trigger. Defaults to `false`. */\n  matchTriggerWidth?: boolean\n  /** Fixed panel width (px number or any CSS width). */\n  width?: number | string\n  /** Accessible label for the panel (`role=\"dialog\"`). */\n  ariaLabel?: string\n  /** Prevents opening. */\n  disabled?: boolean\n  /** Class applied to the floating panel. */\n  className?: string\n  /** Style applied to the floating panel. */\n  style?: CSSProperties\n}\n\n/**\n * An anchored popover holding **arbitrary content** — the generic floating surface for filter panels,\n * forms, detail cards, etc. (unlike `Dropdown`, which is a `role=\"menu\"` of items). Built on the shared\n * `FloatingPanel`: portaled to `<body>`, opens below the `trigger` (flips above on overflow), locks page\n * scroll, dismisses on outside-pointerdown / `Escape` (refocusing the trigger), and animates in. The\n * trigger is cloned to wire `onClick` + `aria-haspopup=\"dialog\"`/`aria-expanded`/`aria-controls`.\n * `trapFocus` cycles Tab within (for forms). Controlled (`open` + `onOpenChange`) or uncontrolled\n * (`defaultOpen`). The panel is `role=\"dialog\"`.\n */\nexport function Popover({\n  trigger,\n  children,\n  align = 'start',\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  trapFocus = false,\n  matchTriggerWidth = false,\n  width,\n  ariaLabel,\n  disabled = false,\n  className,\n  style,\n}: PopoverProps) {\n  const panelId = useId()\n  const triggerRef = useRef<HTMLElement | null>(null)\n\n  const isControlled = open !== undefined\n  const [internalOpen, setInternalOpen] = useState(defaultOpen)\n  const isOpen = isControlled ? open : internalOpen\n\n  const setOpen = (next: boolean) => {\n    if (!isControlled) setInternalOpen(next)\n    onOpenChange?.(next)\n  }\n\n  const triggerProps = trigger.props as {\n    onClick?: (event: ReactMouseEvent) => void\n    ref?: Ref<HTMLElement>\n  }\n  const originalRef = triggerProps.ref\n\n  const clonedTrigger = cloneElement(trigger as ReactElement<Record<string, unknown>>, {\n    ref: (node: HTMLElement | null) => {\n      triggerRef.current = node\n      if (typeof originalRef === 'function') originalRef(node)\n      else if (originalRef) (originalRef as { current: HTMLElement | null }).current = node\n    },\n    onClick: (event: ReactMouseEvent) => {\n      triggerProps.onClick?.(event)\n      if (!disabled) setOpen(!isOpen)\n    },\n    'aria-haspopup': 'dialog',\n    'aria-expanded': isOpen,\n    'aria-controls': isOpen ? panelId : undefined,\n  })\n\n  return (\n    <>\n      {clonedTrigger}\n      <FloatingPanel\n        open={isOpen}\n        triggerRef={triggerRef}\n        align={align}\n        onClose={(refocus) => {\n          setOpen(false)\n          if (refocus) triggerRef.current?.focus()\n        }}\n        id={panelId}\n        role=\"dialog\"\n        ariaLabel={ariaLabel}\n        trapFocus={trapFocus}\n        matchTriggerWidth={matchTriggerWidth}\n        width={width}\n        className={clsx(styles.popover, className)}\n        style={style}\n      >\n        {children}\n      </FloatingPanel>\n    </>\n  )\n}\n"],"names":["Popover","trigger","children","align","open","defaultOpen","onOpenChange","trapFocus","matchTriggerWidth","width","ariaLabel","disabled","className","style","panelId","useId","triggerRef","useRef","isControlled","internalOpen","setInternalOpen","useState","isOpen","setOpen","next","triggerProps","originalRef","clonedTrigger","cloneElement","node","event","_a","jsxs","Fragment","jsx","FloatingPanel","refocus","clsx","styles"],"mappings":";;;;;;;AA0DO,SAASA,EAAQ;AAAA,EACtB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,mBAAAC,IAAoB;AAAA,EACpB,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,OAAAC;AACF,GAAiB;AACf,QAAMC,IAAUC,EAAA,GACVC,IAAaC,EAA2B,IAAI,GAE5CC,IAAed,MAAS,QACxB,CAACe,GAAcC,CAAe,IAAIC,EAAShB,CAAW,GACtDiB,IAASJ,IAAed,IAAOe,GAE/BI,IAAU,CAACC,MAAkB;AACjC,IAAKN,KAAcE,EAAgBI,CAAI,GACvClB,KAAA,QAAAA,EAAekB;AAAA,EACjB,GAEMC,IAAexB,EAAQ,OAIvByB,IAAcD,EAAa,KAE3BE,IAAgBC,EAAa3B,GAAkD;AAAA,IACnF,KAAK,CAAC4B,MAA6B;AACjC,MAAAb,EAAW,UAAUa,GACjB,OAAOH,KAAgB,aAAYA,EAAYG,CAAI,IAC9CH,MAAcA,EAAgD,UAAUG;AAAA,IACnF;AAAA,IACA,SAAS,CAACC,MAA2B;;AACnC,OAAAC,IAAAN,EAAa,YAAb,QAAAM,EAAA,KAAAN,GAAuBK,IAClBnB,KAAUY,EAAQ,CAACD,CAAM;AAAA,IAChC;AAAA,IACA,iBAAiB;AAAA,IACjB,iBAAiBA;AAAA,IACjB,iBAAiBA,IAASR,IAAU;AAAA,EAAA,CACrC;AAED,SACE,gBAAAkB,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAN;AAAA,IACD,gBAAAO;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAMb;AAAA,QACN,YAAAN;AAAA,QACA,OAAAb;AAAA,QACA,SAAS,CAACiC,MAAY;;AACpB,UAAAb,EAAQ,EAAK,GACTa,OAASL,IAAAf,EAAW,YAAX,QAAAe,EAAoB;AAAA,QACnC;AAAA,QACA,IAAIjB;AAAA,QACJ,MAAK;AAAA,QACL,WAAAJ;AAAA,QACA,WAAAH;AAAA,QACA,mBAAAC;AAAA,QACA,OAAAC;AAAA,QACA,WAAW4B,EAAKC,EAAO,SAAS1B,CAAS;AAAA,QACzC,OAAAC;AAAA,QAEC,UAAAX;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}

package/dist/RadioGroup-C8u7eNBS.cjs

@@ -0,0 +1,2 @@
+"use strict";const r=require("react/jsx-runtime"),a=require("react"),m=require("clsx"),E=require("./formContext-bTWrqdEV.cjs"),F=require("./Typography-BFatE1_A.cjs"),S=a.createContext(null);function T(){return a.useContext(S)}const D="_field_t3fq9_2",P="_row_t3fq9_9",$="_disabled_t3fq9_17",A="_input_t3fq9_23",H="_circle_t3fq9_37",J="_dot_t3fq9_59",K="_error_t3fq9_73",M="_label_t3fq9_77",O="_required_t3fq9_82",Q="_sm_t3fq9_88",U="_md_t3fq9_92",W="_lg_t3fq9_96",X="_group_t3fq9_112",Y="_groupLabel_t3fq9_119",Z="_options_t3fq9_124",ee="_horizontal_t3fq9_130",s={field:D,row:P,disabled:$,input:A,circle:H,dot:J,error:K,label:M,required:O,sm:Q,md:U,lg:W,group:X,groupLabel:Y,options:Z,horizontal:ee},V=a.forwardRef(function({value:n,label:d,color:h,size:u,error:t,checked:c,onChange:_,name:p,disabled:b,id:j,className:N,style:R,...z},y){const g=a.useId(),C=j??g,e=T(),l=h??(e==null?void 0:e.color)??"accent",v=u??(e==null?void 0:e.size)??"md",i=t??(e==null?void 0:e.error)??!1,f=b??(e==null?void 0:e.disabled)??!1,q=p??(e==null?void 0:e.name),[w,G]=a.useState(!1),I=e?e.value===n:c!==void 0?c:w,x=L=>{if(e){e.onChange(n);return}c===void 0&&G(L.target.checked),_==null||_(L.target.checked)};return r.jsx("div",{className:m.clsx(s.field,i&&s.error,f&&s.disabled,N),style:{"--tz-btn-rgb":`var(--tz-color-${l}-rgb)`,...R},children:r.jsxs("label",{className:m.clsx(s.row,s[v]),children:[r.jsx("input",{ref:y,id:C,name:q,type:"radio",className:s.input,value:n,checked:I,onChange:x,disabled:f,"aria-invalid":i||void 0,...z}),r.jsx("span",{className:s.circle,"aria-hidden":"true",children:r.jsx("span",{className:s.dot})}),d!=null&&r.jsx("span",{className:s.label,children:d})]})})}),se=a.forwardRef(function({label:n,value:d,defaultValue:h,onChange:u,name:t,options:c,orientation:_="vertical",size:p="md",color:b="accent",error:j,required:N=!1,disabled:R=!1,children:z,className:y,style:g,...C},e){const l=E.useFormContext(),v=!!(l&&t),i=l&&t?l.field(t):void 0,f=d!==void 0?d:v?l.values[t]:void 0,q=f!==void 0,[w,G]=a.useState(h),I=q?f:w,x=j??(i==null?void 0:i.error)??!1,B={name:t,value:I,onChange:o=>{q||G(o),v&&l.setValue(t,o),u==null||u(o)},size:p,color:b,disabled:R,error:x};return r.jsxs("div",{ref:e,role:"radiogroup","aria-invalid":x||void 0,className:m.clsx(s.group,y),style:g,...C,children:[n!=null&&r.jsxs("span",{className:s.groupLabel,children:[r.jsx(F.Typography,{as:"span",variant:"bodySmall",color:"muted",children:n}),N&&r.jsx("span",{className:s.required,"aria-hidden":"true",children:"*"})]}),r.jsx("div",{className:m.clsx(s.options,_==="horizontal"&&s.horizontal),children:r.jsx(S.Provider,{value:B,children:c?c.map(o=>r.jsx(V,{value:o.value,label:o.label,disabled:o.disabled},o.value)):z})})]})});exports.Radio=V;exports.RadioGroup=se;
+//# sourceMappingURL=RadioGroup-C8u7eNBS.cjs.map

package/dist/RadioGroup-C8u7eNBS.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup-C8u7eNBS.cjs","sources":["../src/components/Radio/radioContext.ts","../src/components/Radio/Radio.tsx","../src/components/Radio/RadioGroup.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { ThemeColor } from '../../theme'\nimport type { RadioSize } from './Radio'\n\n/** Shared state a `<RadioGroup>` hands down to its `<Radio>` children via context. */\nexport interface RadioGroupContextValue {\n  /** Shared input `name` (the radios in a group must share one). */\n  name?: string\n  /** The group's currently-selected value. */\n  value?: string\n  /** Select a value — called by a child `<Radio>` on change. */\n  onChange: (value: string) => void\n  size?: RadioSize\n  color?: ThemeColor\n  disabled?: boolean\n  error?: boolean\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue | null>(null)\n\n/** Read the surrounding `<RadioGroup>` so a `<Radio>` can wire itself in (or `null` when standalone). */\nexport function useRadioGroupContext(): RadioGroupContextValue | null {\n  return useContext(RadioGroupContext)\n}\n","import {\n  forwardRef,\n  useId,\n  useState,\n  type ChangeEvent,\n  type CSSProperties,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport { useRadioGroupContext } from './radioContext'\nimport styles from './Radio.module.css'\n\nexport type RadioSize = 'sm' | 'md' | 'lg'\n\nexport interface RadioProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'color' | 'type' | 'onChange' | 'value'\n> {\n  /** This option's value — selected when it matches the surrounding `RadioGroup`'s value. */\n  value: string\n  /** Text shown to the right of the control. */\n  label?: ReactNode\n  /** Theme palette token for the selected fill. Defaults to `accent` (inherits the group's `color`). */\n  color?: ThemeColor\n  /** Preset size — circle dimensions and label font. Inherits the group's `size` when omitted. */\n  size?: RadioSize\n  /** Marks the control invalid — reddens the ring. Inherits the group's `error`. */\n  error?: boolean\n  /** Controlled selected state for standalone use (inside a `RadioGroup` the group drives this). */\n  checked?: boolean\n  /** Fires with the next selected state (standalone use). */\n  onChange?: (checked: boolean) => void\n}\n\n/**\n * A single radio button with a label. The native `<input type=\"radio\">` is visually hidden but fully\n * accessible; a styled circle shows the state, filling with `color` and an inner dot when selected.\n * Designed to live inside a `<RadioGroup>` (which supplies the shared `name`, selection and\n * `size`/`color`/`disabled`/`error` via context), but also works standalone (`checked` + `onChange`).\n * Styling uses `--tz-*` tokens only.\n */\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  {\n    value,\n    label,\n    color,\n    size,\n    error,\n    checked,\n    onChange,\n    name,\n    disabled,\n    id: idProp,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const reactId = useId()\n  const id = idProp ?? reactId\n  const group = useRadioGroupContext()\n\n  const resolvedColor = color ?? group?.color ?? 'accent'\n  const resolvedSize = size ?? group?.size ?? 'md'\n  const resolvedError = error ?? group?.error ?? false\n  const resolvedDisabled = disabled ?? group?.disabled ?? false\n  const resolvedName = name ?? group?.name\n\n  // In a group the selection comes from context; standalone it's controlled (`checked`) or local.\n  const [internal, setInternal] = useState(false)\n  const isChecked = group ? group.value === value : checked !== undefined ? checked : internal\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    if (group) {\n      group.onChange(value)\n      return\n    }\n    if (checked === undefined) setInternal(event.target.checked)\n    onChange?.(event.target.checked)\n  }\n\n  return (\n    <div\n      className={clsx(\n        styles.field,\n        resolvedError && styles.error,\n        resolvedDisabled && styles.disabled,\n        className,\n      )}\n      style={{ '--tz-btn-rgb': `var(--tz-color-${resolvedColor}-rgb)`, ...style } as CSSProperties}\n    >\n      <label className={clsx(styles.row, styles[resolvedSize])}>\n        <input\n          ref={ref}\n          id={id}\n          name={resolvedName}\n          type=\"radio\"\n          className={styles.input}\n          value={value}\n          checked={isChecked}\n          onChange={handleChange}\n          disabled={resolvedDisabled}\n          aria-invalid={resolvedError || undefined}\n          {...props}\n        />\n        <span className={styles.circle} aria-hidden=\"true\">\n          <span className={styles.dot} />\n        </span>\n        {label != null && <span className={styles.label}>{label}</span>}\n      </label>\n    </div>\n  )\n})\n","import {\n  forwardRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport type { ThemeColor } from '../../theme'\nimport { Typography } from '../Typography'\nimport { Radio, type RadioSize } from './Radio'\nimport { RadioGroupContext, type RadioGroupContextValue } from './radioContext'\nimport styles from './Radio.module.css'\n\nexport type RadioOrientation = 'vertical' | 'horizontal'\n\n/** A single option for the data-driven `options` prop. */\nexport interface RadioOption {\n  value: string\n  label?: ReactNode\n  disabled?: boolean\n}\n\nexport interface RadioGroupProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /** Group label rendered above the options. */\n  label?: ReactNode\n  /** Controlled selected value. */\n  value?: string\n  /** Initial value for uncontrolled use. */\n  defaultValue?: string\n  /** Fires with the newly-selected value. */\n  onChange?: (value: string) => void\n  /** Shared input `name` for the radios (also the `<Form>` binding key). */\n  name?: string\n  /** Data-driven options — an alternative to passing `<Radio>` children. */\n  options?: RadioOption[]\n  /** Stack direction of the options. Defaults to `vertical`. */\n  orientation?: RadioOrientation\n  /** Preset size for every radio. Defaults to `md`. */\n  size?: RadioSize\n  /** Theme palette token for the selected fill. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Marks the group invalid — reddens the radio rings (no message text, like `Checkbox`). */\n  error?: boolean\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Disables every radio in the group. */\n  disabled?: boolean\n  /** `<Radio>` children (used when `options` is not given). */\n  children?: ReactNode\n}\n\n/**\n * Groups radio buttons so exactly one is selected. Supplies the shared `name`, selection and\n * `size`/`color`/`disabled`/`error` to its `<Radio>` children via context — pass them as `children`\n * or, for the common case, via the data-driven `options` prop. Controlled (`value` + `onChange`) or\n * uncontrolled (`defaultValue`), and binds to a surrounding `<Form>` by `name` (its form value is a\n * `string`; validate with e.g. `z.string().min(1)`). `error` reddens the radio rings (no message text,\n * like `Checkbox`). `role=\"radiogroup\"`; styling uses `--tz-*` tokens.\n */\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(function RadioGroup(\n  {\n    label,\n    value,\n    defaultValue,\n    onChange,\n    name,\n    options,\n    orientation = 'vertical',\n    size = 'md',\n    color = 'accent',\n    error,\n    required = false,\n    disabled = false,\n    children,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  // Auto-bind to a surrounding <Form> by `name` — the form value is the selected 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 | undefined =\n    value !== undefined\n      ? value\n      : isFormBound\n        ? (form!.values[name!] as string | undefined)\n        : undefined\n  const isControlled = externalValue !== undefined\n  const [internal, setInternal] = useState<string | undefined>(defaultValue)\n  const currentValue = isControlled ? externalValue : internal\n\n  const resolvedError = error ?? bound?.error ?? false\n\n  const handleChange = (next: string) => {\n    if (!isControlled) setInternal(next)\n    if (isFormBound) form!.setValue(name!, next)\n    onChange?.(next)\n  }\n\n  const ctx: RadioGroupContextValue = {\n    name,\n    value: currentValue,\n    onChange: handleChange,\n    size,\n    color,\n    disabled,\n    error: resolvedError,\n  }\n\n  return (\n    <div\n      ref={ref}\n      role=\"radiogroup\"\n      aria-invalid={resolvedError || undefined}\n      className={clsx(styles.group, className)}\n      style={style as CSSProperties}\n      {...props}\n    >\n      {label != null && (\n        <span className={styles.groupLabel}>\n          <Typography as=\"span\" variant=\"bodySmall\" color=\"muted\">\n            {label}\n          </Typography>\n          {required && (\n            <span className={styles.required} aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </span>\n      )}\n\n      <div className={clsx(styles.options, orientation === 'horizontal' && styles.horizontal)}>\n        <RadioGroupContext.Provider value={ctx}>\n          {options\n            ? options.map((option) => (\n                <Radio\n                  key={option.value}\n                  value={option.value}\n                  label={option.label}\n                  disabled={option.disabled}\n                />\n              ))\n            : children}\n        </RadioGroupContext.Provider>\n      </div>\n    </div>\n  )\n})\n"],"names":["RadioGroupContext","createContext","useRadioGroupContext","useContext","Radio","forwardRef","value","label","color","size","error","checked","onChange","name","disabled","idProp","className","style","props","ref","reactId","useId","id","group","resolvedColor","resolvedSize","resolvedError","resolvedDisabled","resolvedName","internal","setInternal","useState","isChecked","handleChange","event","jsx","clsx","styles","jsxs","RadioGroup","defaultValue","options","orientation","required","children","form","useFormContext","isFormBound","bound","externalValue","isControlled","currentValue","ctx","next","Typography","option"],"mappings":"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"}