@alfadocs/ui-kit 0.1.8 → 0.1.9

package/dist/_chunks/number-input-fvGmnRy9.js

@@ -0,0 +1,333 @@
+import { jsxs as be, jsx as x } from "react/jsx-runtime";
+import { useMemo as J, forwardRef as ge, useRef as A, useState as E, useCallback as $, useEffect as he } from "react";
+import { c as Ne } from "./index-D2ZczOXr.js";
+import { useTranslation as ye } from "react-i18next";
+import { u as we } from "./form-field-context-94LwgYTQ.js";
+import { c as Ie } from "./compose-refs-C0k0tdqF.js";
+import { u as De } from "./registry-C9nwlNyL.js";
+import { C as Fe } from "./chevron-down-BX_NP2Yh.js";
+import { C as xe } from "./chevron-up-zOEDrmBB.js";
+const Se = {
+  id: "number-input",
+  capabilities: ["edit_inline"],
+  state: {
+    value: {
+      type: "number | null",
+      descriptionKey: "ui.agent.numberInput.state.value",
+      description: "Current numeric value, or null when empty.",
+      read: (t) => t.getValue()
+    },
+    isEmpty: {
+      type: "boolean",
+      descriptionKey: "ui.agent.numberInput.state.isEmpty",
+      description: "Whether the input has no value.",
+      read: (t) => t.getValue() === null
+    }
+  },
+  actions: {
+    set_value: {
+      safety: "write",
+      argsType: "{ value: number | null }",
+      descriptionKey: "ui.agent.numberInput.actions.setValue",
+      description: "Replace the numeric value, or pass null to clear.",
+      invoke: (t, r) => {
+        t.setValue(r.value);
+      }
+    },
+    clear: {
+      safety: "destructive",
+      descriptionKey: "ui.agent.numberInput.actions.clear",
+      description: "Empty the input. Loses any typed value.",
+      invoke: (t) => {
+        t.clear();
+      }
+    },
+    focus: {
+      safety: "read",
+      descriptionKey: "ui.agent.numberInput.actions.focus",
+      description: "Move keyboard focus to the input.",
+      invoke: (t) => {
+        t.focus();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "number-input",
+      description: "Marks the NumberInput wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+};
+function Me(t) {
+  let r = "";
+  for (const u of t) {
+    const n = u.codePointAt(0);
+    n !== void 0 && (n >= 1632 && n <= 1641 ? r += String.fromCodePoint(48 + (n - 1632)) : n >= 1776 && n <= 1785 ? r += String.fromCodePoint(48 + (n - 1776)) : r += u);
+  }
+  return r;
+}
+function Ve(t, r, u) {
+  return J(() => {
+    var M, V;
+    const n = new Intl.NumberFormat(t).formatToParts(1234.5), d = ((M = n.find((a) => a.type === "decimal")) == null ? void 0 : M.value) ?? ".", S = ((V = n.find((a) => a.type === "group")) == null ? void 0 : V.value) ?? ",", p = r === "currency" ? new Intl.NumberFormat(t, {
+      style: "currency",
+      currency: u ?? "USD"
+    }) : r === "percentage" ? new Intl.NumberFormat(t, {
+      style: "percent",
+      maximumFractionDigits: 4
+    }) : r === "integer" ? new Intl.NumberFormat(t, { maximumFractionDigits: 0 }) : new Intl.NumberFormat(t, { maximumFractionDigits: 10 }), T = (a) => Number.isFinite(a) ? p.format(a) : "", z = (a) => {
+      if (!a) return NaN;
+      const k = Me(a), g = k.trim(), I = g.startsWith("-") || g.startsWith("−");
+      let c = "";
+      for (const h of k)
+        h >= "0" && h <= "9" ? c += h : h === d && (c += ".");
+      if (!c || c === ".") return NaN;
+      let m = Number(c);
+      return Number.isFinite(m) ? (I && (m = -m), r === "percentage" && (m = m / 100), m) : NaN;
+    };
+    let b = "decimal";
+    if (r === "integer")
+      b = "numeric";
+    else if (r === "currency")
+      try {
+        const { maximumFractionDigits: a } = new Intl.NumberFormat(t, {
+          style: "currency",
+          currency: u ?? "USD"
+        }).resolvedOptions();
+        b = a === 0 ? "numeric" : "decimal";
+      } catch {
+        b = "decimal";
+      }
+    return {
+      format: T,
+      parse: z,
+      decimalSeparator: d,
+      groupingSeparator: S,
+      inputMode: b
+    };
+  }, [t, r, u]);
+}
+const ke = Ne(
+  [
+    "ds:flex ds:items-center ds:w-full ds:rounded-[var(--radius-sm)]",
+    "ds:border ds:bg-background ds:text-foreground",
+    "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:focus-within:outline-[length:var(--focus-ring-width)] ds:focus-within:outline-solid",
+    "ds:focus-within:outline-ring ds:focus-within:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:has-[:disabled]:cursor-not-allowed ds:has-[:disabled]:opacity-50"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:h-8 ds:text-[length:var(--font-size-sm)]",
+        md: "ds:h-[var(--min-target-size)] ds:text-[length:var(--font-size-base)]",
+        lg: "ds:h-12 ds:text-[length:var(--font-size-lg)]"
+      },
+      tone: {
+        default: "ds:border-border",
+        error: "ds:border-destructive ds:focus-within:outline-destructive"
+      }
+    },
+    defaultVariants: { size: "md", tone: "default" }
+  }
+), G = [
+  "ds:inline-flex ds:items-center ds:justify-center",
+  "ds:h-full ds:shrink-0",
+  "ds:text-muted-foreground ds:hover:text-foreground",
+  "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+  "ds:disabled:cursor-not-allowed ds:disabled:opacity-50"
+].join(" "), Ce = () => typeof navigator < "u" && navigator.language ? navigator.language : "en-US";
+function Te(t) {
+  if (!Number.isFinite(t)) return 0;
+  const r = String(t), u = r.indexOf(".");
+  return u === -1 ? 0 : r.length - u - 1;
+}
+function ze(t, r) {
+  if (r <= 0 || !Number.isFinite(r)) return t;
+  const n = 10 ** Te(r);
+  return Math.round(t * n) / n;
+}
+const Pe = ge(
+  ({
+    value: t,
+    defaultValue: r,
+    onChange: u,
+    min: n,
+    max: d,
+    step: S = 1,
+    mode: p = "integer",
+    currency: T,
+    locale: z,
+    size: b = "md",
+    tone: M,
+    className: V,
+    id: a,
+    disabled: k,
+    onFocus: g,
+    onBlur: I,
+    onKeyDown: c,
+    ...m
+  }, h) => {
+    const { t: U } = ye(), D = we(), Q = a ?? D.id, C = !!(D.disabled || k), X = z ?? Ce(), P = Ve(X, p, T), { decimalSeparator: B, format: R, parse: K } = P, L = A(null), Y = Ie(h, L), H = t !== void 0, [Z, ee] = E(
+      r ?? null
+    ), s = H ? t ?? null : Z, W = A(s);
+    W.current = s;
+    const F = $(
+      (e) => {
+        const i = p === "percentage" ? e * 100 : e;
+        return (Number.isInteger(i) ? String(i) : i.toString()).replace(".", B);
+      },
+      [p, B]
+    ), f = $(
+      (e) => e == null || Number.isNaN(e) ? "" : R(e),
+      [R]
+    ), [j, l] = E(
+      () => f(s)
+    ), N = A(!1), [te, y] = E(!1);
+    he(() => {
+      N.current || l(f(s));
+    }, [s, f]);
+    const ne = te || s !== null && (n !== void 0 && s < n || d !== void 0 && s > d), q = D.invalid || ne, re = q ? "error" : M ?? "default", v = (e) => {
+      H || ee(e), u == null || u(e);
+    }, w = (e) => {
+      let o = (s ?? 0) + S * e;
+      n !== void 0 && (o = Math.max(n, o)), d !== void 0 && (o = Math.min(d, o)), o = ze(o, S), v(o), y(!1), l(
+        N.current ? F(o) : f(o)
+      );
+    }, O = (e) => {
+      v(e), y(!1), l(
+        N.current ? F(e) : f(e)
+      );
+    }, se = (e) => {
+      if (c == null || c(e), e.defaultPrevented || C) return;
+      const { key: i, shiftKey: o } = e;
+      i === "ArrowUp" ? (e.preventDefault(), w(o ? 10 : 1)) : i === "ArrowDown" ? (e.preventDefault(), w(o ? -10 : -1)) : i === "PageUp" ? (e.preventDefault(), w(100)) : i === "PageDown" ? (e.preventDefault(), w(-100)) : i === "Home" && n !== void 0 ? (e.preventDefault(), O(n)) : i === "End" && d !== void 0 && (e.preventDefault(), O(d));
+    }, ie = (e) => {
+      const i = e.target.value;
+      if (l(i), i.trim() === "") {
+        v(null), y(!1);
+        return;
+      }
+      const o = K(i);
+      Number.isNaN(o) || v(o);
+    }, oe = (e) => {
+      g == null || g(e), N.current = !0, s != null && l(F(s));
+    }, ae = (e) => {
+      if (I == null || I(e), N.current = !1, j.trim() === "") {
+        v(null), y(!1), l("");
+        return;
+      }
+      const i = K(j);
+      if (Number.isNaN(i)) {
+        l(f(s));
+        return;
+      }
+      const o = n !== void 0 && i < n || d !== void 0 && i > d;
+      y(o), v(i), l(f(i));
+    }, _ = (e) => {
+      e.preventDefault();
+    }, ue = () => w(1), de = () => w(-1), le = J(
+      () => ({
+        getValue: () => W.current,
+        setValue: (e) => {
+          v(e), l(
+            e === null ? "" : N.current ? F(e) : f(e)
+          );
+        },
+        clear: () => {
+          v(null), l(""), y(!1);
+        },
+        focus: () => {
+          var e;
+          return (e = L.current) == null ? void 0 : e.focus();
+        }
+      }),
+      // The handle is reconstructed per render; consumers (the agent runtime)
+      // re-register only when the identity changes, which is a cheap no-op.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [F, f]
+    );
+    De(Se, le, a);
+    const ce = C || n !== void 0 && s !== null && s <= n, fe = C || d !== void 0 && s !== null && s >= d, pe = s ?? void 0, me = (p === "currency" || p === "percentage") && s !== null && s !== null ? R(s) : void 0, ve = P.inputMode === "numeric" ? "[0-9]*" : void 0;
+    return /* @__PURE__ */ be(
+      "div",
+      {
+        className: ke({
+          size: b,
+          tone: re,
+          className: V
+        }),
+        "data-component": "number-input",
+        "data-component-id": a,
+        "data-mode": p,
+        children: [
+          /* @__PURE__ */ x(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              "aria-label": U("ui.inputs.number.decrement", "Decrement"),
+              onClick: de,
+              onMouseDown: _,
+              disabled: ce,
+              className: `${G} ds:ps-2 ds:pe-1`,
+              children: /* @__PURE__ */ x(Fe, { "aria-hidden": "true", className: "ds:size-4" })
+            }
+          ),
+          /* @__PURE__ */ x(
+            "input",
+            {
+              ref: Y,
+              id: Q,
+              type: "text",
+              role: "spinbutton",
+              inputMode: P.inputMode,
+              pattern: ve,
+              autoComplete: "off",
+              value: j,
+              disabled: C,
+              "aria-valuemin": n,
+              "aria-valuemax": d,
+              "aria-valuenow": pe,
+              "aria-valuetext": me,
+              "aria-invalid": q || void 0,
+              "aria-required": D.required || void 0,
+              "aria-describedby": D.describedBy || void 0,
+              onChange: ie,
+              onFocus: oe,
+              onBlur: ae,
+              onKeyDown: se,
+              className: "ds:flex-1 ds:w-full ds:min-w-0 ds:bg-transparent ds:outline-none ds:ps-2 ds:pe-2 ds:text-start ds:tabular-nums ds:disabled:cursor-not-allowed",
+              ...m
+            }
+          ),
+          /* @__PURE__ */ x(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              "aria-label": U("ui.inputs.number.increment", "Increment"),
+              onClick: ue,
+              onMouseDown: _,
+              disabled: fe,
+              className: `${G} ds:ps-1 ds:pe-2`,
+              children: /* @__PURE__ */ x(xe, { "aria-hidden": "true", className: "ds:size-4" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Pe.displayName = "NumberInput";
+export {
+  Pe as N,
+  Ve as u
+};
+//# sourceMappingURL=number-input-fvGmnRy9.js.map

package/dist/_chunks/otp-input-EglXOUue.js

@@ -0,0 +1,257 @@
+import { jsxs as ee, jsx as M } from "react/jsx-runtime";
+import { forwardRef as te, useId as re, useState as L, useRef as R, useEffect as se, useCallback as N, useMemo as oe } from "react";
+import { c as O } from "./index-D2ZczOXr.js";
+import { useTranslation as ae } from "react-i18next";
+import { u as ie } from "./form-field-context-94LwgYTQ.js";
+import { u as ne } from "./registry-C9nwlNyL.js";
+const ce = {
+  id: "otp-input",
+  capabilities: ["edit_inline", "submit"],
+  state: {
+    value: {
+      type: "string",
+      descriptionKey: "ui.agent.otpInput.state.value",
+      description: "Current digits entered, packed into a single string.",
+      read: (e) => e.getValue()
+    },
+    isComplete: {
+      type: "boolean",
+      descriptionKey: "ui.agent.otpInput.state.isComplete",
+      description: "Whether all required digits have been entered.",
+      read: (e) => e.isComplete()
+    }
+  },
+  actions: {
+    set_value: {
+      safety: "write",
+      argsType: "{ value: string }",
+      descriptionKey: "ui.agent.otpInput.actions.setValue",
+      description: "Replace the entered digits.",
+      invoke: (e, o) => {
+        e.setValue(o.value);
+      }
+    },
+    clear: {
+      safety: "destructive",
+      descriptionKey: "ui.agent.otpInput.actions.clear",
+      description: "Empty all digit cells. Loses any typed value.",
+      invoke: (e) => {
+        e.clear();
+      }
+    },
+    focus: {
+      safety: "read",
+      descriptionKey: "ui.agent.otpInput.actions.focus",
+      description: "Move keyboard focus to the active digit cell.",
+      invoke: (e) => {
+        e.focus();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "otp-input",
+      description: "Marks the OTPInput wrapper. Completion is observable via state.isComplete; the host onComplete callback fires once when all digits are filled."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, ue = O("ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]"), le = O(
+  [
+    "ds:w-[var(--min-target-size)] ds:h-[var(--min-target-size)]",
+    "ds:rounded-[var(--radius-sm)]",
+    "ds:border ds:bg-background ds:text-foreground ds:text-center ds:font-medium ds:text-[length:var(--font-size-lg)]",
+    "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:disabled:cursor-not-allowed ds:disabled:opacity-50"
+  ].join(" "),
+  {
+    variants: {
+      tone: {
+        default: "ds:border-border",
+        error: "ds:border-destructive"
+      }
+    },
+    defaultVariants: { tone: "default" }
+  }
+);
+function F(e) {
+  return e.replace(/[\u0660-\u0669]/g, (o) => String(o.charCodeAt(0) - 1632)).replace(/[\u06F0-\u06F9]/g, (o) => String(o.charCodeAt(0) - 1776));
+}
+function g(e, o) {
+  return F(e).replace(/\D/g, "").slice(0, o);
+}
+function de(e, o) {
+  const m = g(e, o), l = new Array(o).fill("");
+  for (let n = 0; n < m.length; n += 1)
+    l[n] = m[n];
+  return l;
+}
+const pe = te(
+  ({
+    length: e = 6,
+    value: o,
+    defaultValue: m,
+    onChange: l,
+    onComplete: n,
+    disabled: S,
+    error: $,
+    label: y,
+    id: K,
+    className: j
+  }, z) => {
+    const { t: H } = ae(), v = ie(), _ = re(), P = y ? _ : void 0, I = o !== void 0, [q, W] = L(
+      () => g(m ?? "", e)
+    ), p = g(I ? o : q, e), G = de(p, e), k = v.disabled || !!S, B = v.invalid || !!$, J = B ? "error" : "default", C = R([]), w = R(p.length === e), d = R(p);
+    d.current = p;
+    const Q = () => {
+      const r = p.length;
+      return r >= e ? e - 1 : r;
+    }, [f, V] = L(Q);
+    se(() => {
+      f >= e && V(e - 1);
+    }, [f, e]);
+    const c = N(
+      (r) => {
+        const t = Math.max(0, Math.min(e - 1, r));
+        V(t);
+        const s = C.current[t];
+        s && (s.focus(), s.select());
+      },
+      [e]
+    ), u = N(
+      (r) => {
+        const t = g(r, e);
+        I || W(t), d.current = t, l == null || l(t), t.length === e ? w.current || (w.current = !0, n == null || n(t)) : w.current = !1;
+      },
+      [I, e, l, n]
+    ), U = (r) => (t) => {
+      const s = t.target.value, a = F(s).replace(/\D/g, ""), i = d.current;
+      if (a.length === 0) {
+        if (s === "" && r < i.length) {
+          const A = i.slice(0, r) + i.slice(r + 1);
+          u(A);
+        }
+        return;
+      }
+      const b = i.slice(0, r), h = i.slice(r + a.length), D = (b + a + h).slice(0, e);
+      u(D);
+      const T = Math.min(r + a.length, e - 1);
+      c(T);
+    }, X = (r) => (t) => {
+      const s = d.current;
+      if (t.key === "Backspace") {
+        if (s[r]) {
+          t.preventDefault();
+          const a = s.slice(0, r) + s.slice(r + 1);
+          u(a);
+          return;
+        }
+        if (r > 0) {
+          t.preventDefault();
+          const a = s.slice(0, r - 1) + s.slice(r);
+          u(a), c(r - 1);
+        }
+        return;
+      }
+      if (t.key === "ArrowLeft") {
+        t.preventDefault(), r > 0 && c(r - 1);
+        return;
+      }
+      if (t.key === "ArrowRight") {
+        t.preventDefault(), r < e - 1 && c(r + 1);
+        return;
+      }
+      if (t.key === "Home") {
+        t.preventDefault(), c(0);
+        return;
+      }
+      t.key === "End" && (t.preventDefault(), c(e - 1));
+    }, Y = (r) => (t) => {
+      const a = t.clipboardData.getData("text").replace(/\s+/g, ""), i = F(a);
+      if (!/^[0-9]+$/.test(i)) return;
+      t.preventDefault();
+      const b = d.current, h = b.slice(0, r), D = b.slice(r + i.length), T = (h + i + D).slice(0, e);
+      u(T);
+      const A = Math.min(r + i.length, e - 1);
+      c(A);
+    }, Z = (r) => (t) => {
+      V(r), t.currentTarget.select();
+    }, E = v.id, x = oe(
+      () => ({
+        getValue: () => d.current,
+        setValue: (r) => u(r),
+        clear: () => u(""),
+        focus: () => c(f),
+        isComplete: () => d.current.length === e
+      }),
+      [u, c, f, e]
+    );
+    return ne(ce, x, K), /* @__PURE__ */ ee("div", { className: ue({ className: j }), children: [
+      y ? /* @__PURE__ */ M(
+        "label",
+        {
+          id: P,
+          htmlFor: `${E}-0`,
+          className: "type-label ds:text-foreground",
+          children: y
+        }
+      ) : null,
+      /* @__PURE__ */ M(
+        "div",
+        {
+          ref: z,
+          role: "group",
+          dir: "ltr",
+          "aria-labelledby": P,
+          "aria-invalid": B || void 0,
+          "aria-describedby": v.describedBy || void 0,
+          "aria-disabled": k || void 0,
+          "data-component": "otp-input",
+          "data-component-id": K,
+          className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]",
+          children: G.map((r, t) => {
+            const s = !k && t === f;
+            return /* @__PURE__ */ M(
+              "input",
+              {
+                ref: (a) => {
+                  C.current[t] = a;
+                },
+                id: `${E}-${t}`,
+                type: "text",
+                inputMode: "numeric",
+                pattern: "[0-9]*",
+                autoComplete: t === 0 ? "one-time-code" : "off",
+                maxLength: 1,
+                value: r,
+                disabled: k,
+                tabIndex: s ? 0 : -1,
+                "aria-label": H("ui.inputs.otp.digitLabel", {
+                  current: t + 1,
+                  total: e
+                }),
+                onChange: U(t),
+                onKeyDown: X(t),
+                onPaste: Y(t),
+                onFocus: Z(t),
+                className: le({ tone: J })
+              },
+              t
+            );
+          })
+        }
+      )
+    ] });
+  }
+);
+pe.displayName = "OTPInput";
+export {
+  pe as O
+};
+//# sourceMappingURL=otp-input-EglXOUue.js.map