@alfadocs/ui-kit 0.53.0 → 0.55.0

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

@@ -0,0 +1,279 @@
+import { jsxs as re, jsx as I } from "react/jsx-runtime";
+import { forwardRef as ae, useId as se, useRef as R, useState as ne, useEffect as oe, useCallback as S, useMemo as ie, useImperativeHandle as ce } from "react";
+import { c as Z } from "./index-D2ZczOXr.js";
+import { useTranslation as le } from "react-i18next";
+import { u as ue } from "./use-controllable-state-BiY4xTzM.js";
+import { u as de } from "./use-web-otp-D_utzp6S.js";
+import { u as pe } from "./form-field-context-B3APVHKx.js";
+import { u as fe } from "./registry-nPAVE19X.js";
+const ge = {
+  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: (a) => a.getValue()
+    },
+    isComplete: {
+      type: "boolean",
+      descriptionKey: "ui.agent.otpInput.state.isComplete",
+      description: "Whether all required digits have been entered.",
+      read: (a) => a.isComplete()
+    }
+  },
+  actions: {
+    set_value: {
+      safety: "write",
+      argsType: "{ value: string }",
+      descriptionKey: "ui.agent.otpInput.actions.setValue",
+      description: "Replace the entered digits.",
+      invoke: (a, n) => {
+        a.setValue(n.value);
+      }
+    },
+    clear: {
+      safety: "destructive",
+      descriptionKey: "ui.agent.otpInput.actions.clear",
+      description: "Empty all digit cells. Loses any typed value.",
+      invoke: (a) => {
+        a.clear();
+      }
+    },
+    focus: {
+      safety: "read",
+      descriptionKey: "ui.agent.otpInput.actions.focus",
+      description: "Move keyboard focus to the active digit cell.",
+      invoke: (a) => {
+        a.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."
+    }
+  }
+}, me = Z("ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]"), he = Z(
+  [
+    "ds:w-[var(--min-target-size)] ds:h-[var(--min-target-size)]",
+    "ds:rounded-[var(--radius-sm)]",
+    "ds:border ds:bg-input ds:text-foreground ds:text-center ds:font-medium ds:text-[length:var(--font-size-lg)]",
+    "ds:shadow-[var(--shadow-input)]",
+    "ds:transition-[colors,box-shadow] 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 z(a) {
+  return a.replace(/[\u0660-\u0669]/g, (n) => String(n.charCodeAt(0) - 1632)).replace(/[\u06F0-\u06F9]/g, (n) => String(n.charCodeAt(0) - 1776));
+}
+const ve = 3, be = 10;
+function ye(a) {
+  const n = Number.isFinite(a) ? Math.floor(a) : 6;
+  return Math.max(ve, Math.min(be, n));
+}
+function k(a, n, g) {
+  return (g === "alphanumeric" ? a.replace(/[^A-Za-z0-9]/g, "").toUpperCase() : z(a).replace(/\D/g, "")).slice(0, n);
+}
+function we(a, n, g) {
+  const d = k(a, n, g), p = new Array(n).fill("");
+  for (let m = 0; m < d.length; m += 1)
+    p[m] = d[m];
+  return p;
+}
+const Ie = ae(
+  ({
+    length: a = 6,
+    value: n,
+    defaultValue: g,
+    onChange: d,
+    onComplete: p,
+    disabled: m,
+    error: _,
+    label: V,
+    id: F,
+    className: $,
+    webOtp: j = !1,
+    name: E,
+    mode: i = "numeric"
+  }, U) => {
+    const { t: G } = le(), r = ye(a), b = pe(), W = se(), K = V ? W : void 0, [q, H] = ue({
+      value: n,
+      defaultValue: k(g ?? "", r, i)
+    }), h = k(q ?? "", r, i), x = we(h, r, i), y = b.disabled || !!m, O = b.invalid || !!_, X = O ? "error" : "default", P = R([]), D = R(h.length === r), f = R(h);
+    f.current = h;
+    const J = () => {
+      const t = h.length;
+      return t >= r ? r - 1 : t;
+    }, [v, A] = ne(J);
+    oe(() => {
+      v >= r && A(r - 1);
+    }, [v, r]);
+    const l = S(
+      (t) => {
+        const e = Math.max(0, Math.min(r - 1, t));
+        A(e);
+        const s = P.current[e];
+        s && (s.focus(), s.select());
+      },
+      [r]
+    ), u = S(
+      (t) => {
+        const e = k(t, r, i);
+        H(e), f.current = e, d == null || d(e), e.length === r ? D.current || (D.current = !0, p == null || p(e)) : D.current = !1;
+      },
+      [H, r, i, d, p]
+    );
+    de({
+      enabled: j && !y,
+      onCode: u
+    });
+    const Q = (t) => (e) => {
+      const s = e.target.value, o = i === "alphanumeric" ? s.replace(/[^A-Za-z0-9]/g, "").toUpperCase() : z(s).replace(/\D/g, ""), c = f.current;
+      if (o.length === 0) {
+        if (s === "" && t < c.length) {
+          const N = c.slice(0, t) + c.slice(t + 1);
+          u(N);
+        }
+        return;
+      }
+      const w = c.slice(0, t), T = c.slice(t + o.length), C = (w + o + T).slice(0, r);
+      u(C);
+      const L = Math.min(t + o.length, r - 1);
+      l(L);
+    }, Y = (t) => (e) => {
+      const s = f.current;
+      if (e.key === "Backspace") {
+        if (s[t]) {
+          e.preventDefault();
+          const o = s.slice(0, t) + s.slice(t + 1);
+          u(o);
+          return;
+        }
+        if (t > 0) {
+          e.preventDefault();
+          const o = s.slice(0, t - 1) + s.slice(t);
+          u(o), l(t - 1);
+        }
+        return;
+      }
+      if (e.key === "ArrowLeft") {
+        e.preventDefault(), t > 0 && l(t - 1);
+        return;
+      }
+      if (e.key === "ArrowRight") {
+        e.preventDefault(), t < r - 1 && l(t + 1);
+        return;
+      }
+      if (e.key === "Home") {
+        e.preventDefault(), l(0);
+        return;
+      }
+      e.key === "End" && (e.preventDefault(), l(r - 1));
+    }, ee = (t) => (e) => {
+      const o = e.clipboardData.getData("text").replace(/\s+/g, ""), c = i === "alphanumeric" ? o.replace(/[^A-Za-z0-9]/g, "").toUpperCase() : z(o);
+      if (i === "alphanumeric" ? c.length === 0 : !/^[0-9]+$/.test(c))
+        return;
+      e.preventDefault();
+      const w = f.current, T = w.slice(0, t), C = w.slice(t + c.length), L = (T + c + C).slice(0, r);
+      u(L);
+      const N = Math.min(t + c.length, r - 1);
+      l(N);
+    }, te = (t) => (e) => {
+      A(t), e.currentTarget.select();
+    }, B = b.id, M = ie(
+      () => ({
+        getValue: () => f.current,
+        setValue: (t) => u(t),
+        clear: () => u(""),
+        focus: () => l(v),
+        isComplete: () => f.current.length === r
+      }),
+      [u, l, v, r]
+    );
+    return fe(ge, M, F), ce(U, () => M, [M]), /* @__PURE__ */ re("div", { className: me({ className: $ }), children: [
+      V ? /* @__PURE__ */ I(
+        "label",
+        {
+          id: K,
+          htmlFor: `${B}-0`,
+          className: "type-label ds:text-foreground",
+          children: V
+        }
+      ) : null,
+      /* @__PURE__ */ I(
+        "div",
+        {
+          role: "group",
+          dir: "ltr",
+          "aria-labelledby": K,
+          "aria-invalid": O || void 0,
+          "aria-describedby": b.describedBy || void 0,
+          "aria-disabled": y || void 0,
+          "data-component": "otp-input",
+          "data-component-id": F,
+          className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]",
+          children: x.map((t, e) => {
+            const s = !y && e === v;
+            return /* @__PURE__ */ I(
+              "input",
+              {
+                ref: (o) => {
+                  P.current[e] = o;
+                },
+                id: `${B}-${e}`,
+                type: "text",
+                inputMode: i === "alphanumeric" ? "text" : "numeric",
+                pattern: i === "alphanumeric" ? "[A-Za-z0-9]*" : "[0-9]*",
+                autoCapitalize: i === "alphanumeric" ? "characters" : void 0,
+                autoComplete: e === 0 ? "one-time-code" : "off",
+                maxLength: 1,
+                value: t,
+                disabled: y,
+                tabIndex: s ? 0 : -1,
+                "aria-label": G(
+                  i === "alphanumeric" ? "inputs.otp.charLabel" : "inputs.otp.digitLabel",
+                  {
+                    current: e + 1,
+                    total: r
+                  }
+                ),
+                onChange: Q(e),
+                onKeyDown: Y(e),
+                onPaste: ee(e),
+                onFocus: te(e),
+                className: he({ tone: X })
+              },
+              e
+            );
+          })
+        }
+      ),
+      E ? /* @__PURE__ */ I("input", { type: "hidden", name: E, value: h, readOnly: !0 }) : null
+    ] });
+  }
+);
+Ie.displayName = "OTPInput";
+export {
+  Ie as O
+};
+//# sourceMappingURL=otp-input-xQ4Ps5VY.js.map

package/dist/agent-catalog.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "packageVersion": "0.53.0",
+  "packageVersion": "0.55.0",
   "components": [
     {
       "kind": "component",

package/dist/components/otp-input/index.js

@@ -1,4 +1,4 @@
-import { O as r } from "../../_chunks/otp-input-Chb9r5vf.js";
+import { O as r } from "../../_chunks/otp-input-xQ4Ps5VY.js";
 export {
   r as OTPInput
 };

package/dist/components/otp-input/otp-input.d.ts

@@ -1,3 +1,4 @@
+export type OTPMode = 'numeric' | 'alphanumeric';
 /** Agent-readiness curated handle for OTPInput. */
 export interface OTPInputHandle {
     getValue: () => string;
@@ -7,7 +8,11 @@ export interface OTPInputHandle {
     isComplete: () => boolean;
 }
 export interface OTPInputProps {
-    length?: 4 | 6 | 8;
+    /**
+     * Number of boxes. Default 6. Any integer in [3, 10] is honoured;
+     * out-of-range values are clamped (with a DEV warning).
+     */
+    length?: number;
     value?: string;
     defaultValue?: string;
     onChange?: (value: string) => void;
@@ -40,6 +45,13 @@ export interface OTPInputProps {
      * `sms_code_form[code]`. Default off — no behaviour change.
      */
     name?: string;
+    /**
+     * Character set. `numeric` (default) accepts digits only (with Arabic-Indic
+     * digit folding) — byte-identical to prior behaviour. `alphanumeric` accepts
+     * `[A-Za-z0-9]`, uppercases the value, and switches the boxes to text input
+     * (for SMS codes that mix letters and digits).
+     */
+    mode?: OTPMode;
 }
 export declare const OTPInput: import("react").ForwardRefExoticComponent<OTPInputProps & import("react").RefAttributes<OTPInputHandle>>;
 //# sourceMappingURL=otp-input.d.ts.map

package/dist/i18n/locales/ar.d.ts

@@ -147,6 +147,7 @@ export declare const arUi: {
         };
         readonly otp: {
             readonly digitLabel: "الرقم {{current}} من {{total}}";
+            readonly charLabel: "الحرف {{current}} من {{total}}";
         };
         readonly slider: {
             readonly minLabel: "الحد الأدنى";

package/dist/i18n/locales/ar.js

@@ -139,7 +139,8 @@ const e = {
       clear: "مسح الاختيار"
     },
     otp: {
-      digitLabel: "الرقم {{current}} من {{total}}"
+      digitLabel: "الرقم {{current}} من {{total}}",
+      charLabel: "الحرف {{current}} من {{total}}"
     },
     slider: {
       minLabel: "الحد الأدنى",

package/dist/i18n/locales/de.d.ts

@@ -136,6 +136,7 @@ export declare const deUi: {
         };
         readonly otp: {
             readonly digitLabel: "Ziffer {{current}} von {{total}}";
+            readonly charLabel: "Zeichen {{current}} von {{total}}";
         };
         readonly slider: {
             readonly minLabel: "Minimum";

package/dist/i18n/locales/de.js

@@ -128,7 +128,8 @@ const e = {
       clear: "Auswahl aufheben"
     },
     otp: {
-      digitLabel: "Ziffer {{current}} von {{total}}"
+      digitLabel: "Ziffer {{current}} von {{total}}",
+      charLabel: "Zeichen {{current}} von {{total}}"
     },
     slider: {
       minLabel: "Minimum",

package/dist/i18n/locales/el.d.ts

@@ -144,6 +144,7 @@ export declare const elUi: {
         };
         readonly otp: {
             readonly digitLabel: "Ψηφίο {{current}} από {{total}}";
+            readonly charLabel: "Χαρακτήρας {{current}} από {{total}}";
         };
         readonly slider: {
             readonly minLabel: "Ελάχιστο";

package/dist/i18n/locales/el.js

@@ -139,7 +139,8 @@ const e = {
       clear: "Εκκαθάριση επιλογής"
     },
     otp: {
-      digitLabel: "Ψηφίο {{current}} από {{total}}"
+      digitLabel: "Ψηφίο {{current}} από {{total}}",
+      charLabel: "Χαρακτήρας {{current}} από {{total}}"
     },
     slider: {
       minLabel: "Ελάχιστο",

package/dist/i18n/locales/en.d.ts

@@ -144,6 +144,7 @@ export declare const enUi: {
         };
         readonly otp: {
             readonly digitLabel: "Digit {{current}} of {{total}}";
+            readonly charLabel: "Character {{current}} of {{total}}";
         };
         readonly slider: {
             readonly minLabel: "Minimum";

package/dist/i18n/locales/en.js

@@ -139,7 +139,8 @@ const e = {
       clear: "Clear selection"
     },
     otp: {
-      digitLabel: "Digit {{current}} of {{total}}"
+      digitLabel: "Digit {{current}} of {{total}}",
+      charLabel: "Character {{current}} of {{total}}"
     },
     slider: {
       minLabel: "Minimum",

package/dist/i18n/locales/es.d.ts

@@ -133,6 +133,7 @@ export declare const esUi: {
         };
         readonly otp: {
             readonly digitLabel: "Dígito {{current}} de {{total}}";
+            readonly charLabel: "Carácter {{current}} de {{total}}";
         };
         readonly slider: {
             readonly minLabel: "Mínimo";

package/dist/i18n/locales/es.js

@@ -128,7 +128,8 @@ const e = {
       clear: "Borrar selección"
     },
     otp: {
-      digitLabel: "Dígito {{current}} de {{total}}"
+      digitLabel: "Dígito {{current}} de {{total}}",
+      charLabel: "Carácter {{current}} de {{total}}"
     },
     slider: {
       minLabel: "Mínimo",

package/dist/i18n/locales/fr.d.ts

@@ -144,6 +144,7 @@ export declare const frUi: {
         };
         readonly otp: {
             readonly digitLabel: "Chiffre {{current}} sur {{total}}";
+            readonly charLabel: "Caractère {{current}} sur {{total}}";
         };
         readonly slider: {
             readonly minLabel: "Minimum";

package/dist/i18n/locales/fr.js

@@ -139,7 +139,8 @@ const e = {
       clear: "Effacer la sélection"
     },
     otp: {
-      digitLabel: "Chiffre {{current}} sur {{total}}"
+      digitLabel: "Chiffre {{current}} sur {{total}}",
+      charLabel: "Caractère {{current}} sur {{total}}"
     },
     slider: {
       minLabel: "Minimum",

package/dist/i18n/locales/hi.d.ts

@@ -144,6 +144,7 @@ export declare const hiUi: {
         };
         readonly otp: {
             readonly digitLabel: "{{current}} में से {{total}} का अंक";
+            readonly charLabel: "{{current}} में से {{total}} का वर्ण";
         };
         readonly slider: {
             readonly minLabel: "न्यूनतम";

package/dist/i18n/locales/hi.js

@@ -139,7 +139,8 @@ const e = {
       clear: "चयन हटाएं"
     },
     otp: {
-      digitLabel: "{{current}} में से {{total}} का अंक"
+      digitLabel: "{{current}} में से {{total}} का अंक",
+      charLabel: "{{current}} में से {{total}} का वर्ण"
     },
     slider: {
       minLabel: "न्यूनतम",

package/dist/i18n/locales/it.d.ts

@@ -141,6 +141,7 @@ export declare const itUi: {
         };
         readonly otp: {
             readonly digitLabel: "Cifra {{current}} di {{total}}";
+            readonly charLabel: "Carattere {{current}} di {{total}}";
         };
         readonly slider: {
             readonly minLabel: "Minimo";

package/dist/i18n/locales/it.js

@@ -139,7 +139,8 @@ const e = {
       clear: "Cancella selezione"
     },
     otp: {
-      digitLabel: "Cifra {{current}} di {{total}}"
+      digitLabel: "Cifra {{current}} di {{total}}",
+      charLabel: "Carattere {{current}} di {{total}}"
     },
     slider: {
       minLabel: "Minimo",

package/dist/i18n/locales/ja.d.ts

@@ -133,6 +133,7 @@ export declare const jaUi: {
         };
         readonly otp: {
             readonly digitLabel: "{{total}} 桁中 {{current}} 桁目";
+            readonly charLabel: "{{total}} 文字中 {{current}} 文字目";
         };
         readonly slider: {
             readonly minLabel: "最小";

package/dist/i18n/locales/ja.js

@@ -128,7 +128,8 @@ const e = {
       clear: "選択をクリア"
     },
     otp: {
-      digitLabel: "{{total}} 桁中 {{current}} 桁目"
+      digitLabel: "{{total}} 桁中 {{current}} 桁目",
+      charLabel: "{{total}} 文字中 {{current}} 文字目"
     },
     slider: {
       minLabel: "最小",

package/dist/i18n/locales/nl.d.ts

@@ -133,6 +133,7 @@ export declare const nlUi: {
         };
         readonly otp: {
             readonly digitLabel: "Cijfer {{current}} van {{total}}";
+            readonly charLabel: "Teken {{current}} van {{total}}";
         };
         readonly slider: {
             readonly minLabel: "Minimum";

package/dist/i18n/locales/nl.js

@@ -128,7 +128,8 @@ const e = {
       clear: "Selectie wissen"
     },
     otp: {
-      digitLabel: "Cijfer {{current}} van {{total}}"
+      digitLabel: "Cijfer {{current}} van {{total}}",
+      charLabel: "Teken {{current}} van {{total}}"
     },
     slider: {
       minLabel: "Minimum",

package/dist/i18n/locales/pl.d.ts

@@ -133,6 +133,7 @@ export declare const plUi: {
         };
         readonly otp: {
             readonly digitLabel: "Cyfra {{current}} z {{total}}";
+            readonly charLabel: "Znak {{current}} z {{total}}";
         };
         readonly slider: {
             readonly minLabel: "Minimum";

package/dist/i18n/locales/pl.js

@@ -128,7 +128,8 @@ const e = {
       clear: "Wyczyść wybór"
     },
     otp: {
-      digitLabel: "Cyfra {{current}} z {{total}}"
+      digitLabel: "Cyfra {{current}} z {{total}}",
+      charLabel: "Znak {{current}} z {{total}}"
     },
     slider: {
       minLabel: "Minimum",

package/dist/i18n/locales/pt.d.ts

@@ -145,6 +145,7 @@ export declare const ptUi: {
         };
         readonly otp: {
             readonly digitLabel: "Dígito {{current}} de {{total}}";
+            readonly charLabel: "Caractere {{current}} de {{total}}";
         };
         readonly slider: {
             readonly minLabel: "Mínimo";

package/dist/i18n/locales/pt.js

@@ -139,7 +139,8 @@ const e = {
       clear: "Limpar seleção"
     },
     otp: {
-      digitLabel: "Dígito {{current}} de {{total}}"
+      digitLabel: "Dígito {{current}} de {{total}}",
+      charLabel: "Caractere {{current}} de {{total}}"
     },
     slider: {
       minLabel: "Mínimo",

package/dist/i18n/locales/ro.d.ts

@@ -133,6 +133,7 @@ export declare const roUi: {
         };
         readonly otp: {
             readonly digitLabel: "Cifra {{current}} din {{total}}";
+            readonly charLabel: "Caracterul {{current}} din {{total}}";
         };
         readonly slider: {
             readonly minLabel: "Minim";

package/dist/i18n/locales/ro.js

@@ -128,7 +128,8 @@ const e = {
       clear: "Anulează selecția"
     },
     otp: {
-      digitLabel: "Cifra {{current}} din {{total}}"
+      digitLabel: "Cifra {{current}} din {{total}}",
+      charLabel: "Caracterul {{current}} din {{total}}"
     },
     slider: {
       minLabel: "Minim",

package/dist/i18n/locales/ru.d.ts

@@ -144,6 +144,7 @@ export declare const ruUi: {
         };
         readonly otp: {
             readonly digitLabel: "Цифра {{current}} из {{total}}";
+            readonly charLabel: "Символ {{current}} из {{total}}";
         };
         readonly slider: {
             readonly minLabel: "Минимум";

package/dist/i18n/locales/ru.js

@@ -139,7 +139,8 @@ const e = {
       clear: "Очистить выбор"
     },
     otp: {
-      digitLabel: "Цифра {{current}} из {{total}}"
+      digitLabel: "Цифра {{current}} из {{total}}",
+      charLabel: "Символ {{current}} из {{total}}"
     },
     slider: {
       minLabel: "Минимум",

package/dist/i18n/locales/sq.d.ts

@@ -144,6 +144,7 @@ export declare const sqUi: {
         };
         readonly otp: {
             readonly digitLabel: "Shifra {{current}} nga {{total}}";
+            readonly charLabel: "Karakteri {{current}} nga {{total}}";
         };
         readonly slider: {
             readonly minLabel: "Minimumi";

package/dist/i18n/locales/sq.js

@@ -139,7 +139,8 @@ const e = {
       clear: "Pastro zgjedhjen"
     },
     otp: {
-      digitLabel: "Shifra {{current}} nga {{total}}"
+      digitLabel: "Shifra {{current}} nga {{total}}",
+      charLabel: "Karakteri {{current}} nga {{total}}"
     },
     slider: {
       minLabel: "Minimumi",

package/dist/i18n/locales/sv.d.ts

@@ -144,6 +144,7 @@ export declare const svUi: {
         };
         readonly otp: {
             readonly digitLabel: "Siffra {{current}} av {{total}}";
+            readonly charLabel: "Tecken {{current}} av {{total}}";
         };
         readonly slider: {
             readonly minLabel: "Minimum";

package/dist/i18n/locales/sv.js

@@ -139,7 +139,8 @@ const e = {
       clear: "Rensa val"
     },
     otp: {
-      digitLabel: "Siffra {{current}} av {{total}}"
+      digitLabel: "Siffra {{current}} av {{total}}",
+      charLabel: "Tecken {{current}} av {{total}}"
     },
     slider: {
       minLabel: "Minimum",

package/dist/i18n/locales/tr.d.ts

@@ -144,6 +144,7 @@ export declare const trUi: {
         };
         readonly otp: {
             readonly digitLabel: "{{total}} basamaktan {{current}}. basamak";
+            readonly charLabel: "{{total}} karakterden {{current}}. karakter";
         };
         readonly slider: {
             readonly minLabel: "Minimum";

package/dist/i18n/locales/tr.js

@@ -139,7 +139,8 @@ const e = {
       clear: "Seçimi temizle"
     },
     otp: {
-      digitLabel: "{{total}} basamaktan {{current}}. basamak"
+      digitLabel: "{{total}} basamaktan {{current}}. basamak",
+      charLabel: "{{total}} karakterden {{current}}. karakter"
     },
     slider: {
       minLabel: "Minimum",

package/dist/i18n/locales/zh.d.ts

@@ -133,6 +133,7 @@ export declare const zhUi: {
         };
         readonly otp: {
             readonly digitLabel: "第 {{current}} 位，共 {{total}} 位";
+            readonly charLabel: "第 {{current}} 个字符，共 {{total}} 个";
         };
         readonly slider: {
             readonly minLabel: "最小值";

package/dist/i18n/locales/zh.js

@@ -128,7 +128,8 @@ const e = {
       clear: "清除选择"
     },
     otp: {
-      digitLabel: "第 {{current}} 位，共 {{total}} 位"
+      digitLabel: "第 {{current}} 位，共 {{total}} 位",
+      charLabel: "第 {{current}} 个字符，共 {{total}} 个"
     },
     slider: {
       minLabel: "最小值",

package/dist/index.js

@@ -34,7 +34,7 @@ import { F as Ya } from "./_chunks/form-field-BOm9hK35.js";
 import { F as Qa, u as ja } from "./_chunks/form-field-context-B3APVHKx.js";
 import { M as Xa, m as Ja, a as Za } from "./_chunks/multi-select-DOLO3K_z.js";
 import { N as ae, u as ee } from "./_chunks/number-input-Dj5L3pXK.js";
-import { O as oe } from "./_chunks/otp-input-Chb9r5vf.js";
+import { O as oe } from "./_chunks/otp-input-xQ4Ps5VY.js";
 import { P as se, u as ne } from "./_chunks/use-password-requirements-DsgduV1x.js";
 import { P as pe, c as me, p as le, a as de } from "./_chunks/phone-input-DfZbPPvh.js";
 import { R as fe, r as ge } from "./_chunks/recaptcha-widget-BCNHsgqt.js";

package/dist/locales/ar.json

@@ -139,7 +139,8 @@
       "clear": "مسح الاختيار"
     },
     "otp": {
-      "digitLabel": "الرقم {{current}} من {{total}}"
+      "digitLabel": "الرقم {{current}} من {{total}}",
+      "charLabel": "الحرف {{current}} من {{total}}"
     },
     "slider": {
       "minLabel": "الحد الأدنى",

package/dist/locales/de.json

@@ -128,7 +128,8 @@
       "clear": "Auswahl aufheben"
     },
     "otp": {
-      "digitLabel": "Ziffer {{current}} von {{total}}"
+      "digitLabel": "Ziffer {{current}} von {{total}}",
+      "charLabel": "Zeichen {{current}} von {{total}}"
     },
     "slider": {
       "minLabel": "Minimum",

package/dist/locales/el.json

@@ -139,7 +139,8 @@
       "clear": "Εκκαθάριση επιλογής"
     },
     "otp": {
-      "digitLabel": "Ψηφίο {{current}} από {{total}}"
+      "digitLabel": "Ψηφίο {{current}} από {{total}}",
+      "charLabel": "Χαρακτήρας {{current}} από {{total}}"
     },
     "slider": {
       "minLabel": "Ελάχιστο",

package/dist/locales/en.json

@@ -139,7 +139,8 @@
       "clear": "Clear selection"
     },
     "otp": {
-      "digitLabel": "Digit {{current}} of {{total}}"
+      "digitLabel": "Digit {{current}} of {{total}}",
+      "charLabel": "Character {{current}} of {{total}}"
     },
     "slider": {
       "minLabel": "Minimum",

package/dist/locales/es.json

@@ -128,7 +128,8 @@
       "clear": "Borrar selección"
     },
     "otp": {
-      "digitLabel": "Dígito {{current}} de {{total}}"
+      "digitLabel": "Dígito {{current}} de {{total}}",
+      "charLabel": "Carácter {{current}} de {{total}}"
     },
     "slider": {
       "minLabel": "Mínimo",

package/dist/locales/fr.json

@@ -139,7 +139,8 @@
       "clear": "Effacer la sélection"
     },
     "otp": {
-      "digitLabel": "Chiffre {{current}} sur {{total}}"
+      "digitLabel": "Chiffre {{current}} sur {{total}}",
+      "charLabel": "Caractère {{current}} sur {{total}}"
     },
     "slider": {
       "minLabel": "Minimum",

package/dist/locales/hi.json

@@ -139,7 +139,8 @@
       "clear": "चयन हटाएं"
     },
     "otp": {
-      "digitLabel": "{{current}} में से {{total}} का अंक"
+      "digitLabel": "{{current}} में से {{total}} का अंक",
+      "charLabel": "{{current}} में से {{total}} का वर्ण"
     },
     "slider": {
       "minLabel": "न्यूनतम",

package/dist/locales/it.json

@@ -139,7 +139,8 @@
       "clear": "Cancella selezione"
     },
     "otp": {
-      "digitLabel": "Cifra {{current}} di {{total}}"
+      "digitLabel": "Cifra {{current}} di {{total}}",
+      "charLabel": "Carattere {{current}} di {{total}}"
     },
     "slider": {
       "minLabel": "Minimo",

package/dist/locales/ja.json

@@ -128,7 +128,8 @@
       "clear": "選択をクリア"
     },
     "otp": {
-      "digitLabel": "{{total}} 桁中 {{current}} 桁目"
+      "digitLabel": "{{total}} 桁中 {{current}} 桁目",
+      "charLabel": "{{total}} 文字中 {{current}} 文字目"
     },
     "slider": {
       "minLabel": "最小",

package/dist/locales/nl.json

@@ -128,7 +128,8 @@
       "clear": "Selectie wissen"
     },
     "otp": {
-      "digitLabel": "Cijfer {{current}} van {{total}}"
+      "digitLabel": "Cijfer {{current}} van {{total}}",
+      "charLabel": "Teken {{current}} van {{total}}"
     },
     "slider": {
       "minLabel": "Minimum",

package/dist/locales/pl.json

@@ -128,7 +128,8 @@
       "clear": "Wyczyść wybór"
     },
     "otp": {
-      "digitLabel": "Cyfra {{current}} z {{total}}"
+      "digitLabel": "Cyfra {{current}} z {{total}}",
+      "charLabel": "Znak {{current}} z {{total}}"
     },
     "slider": {
       "minLabel": "Minimum",

package/dist/locales/pt.json

@@ -139,7 +139,8 @@
       "clear": "Limpar seleção"
     },
     "otp": {
-      "digitLabel": "Dígito {{current}} de {{total}}"
+      "digitLabel": "Dígito {{current}} de {{total}}",
+      "charLabel": "Caractere {{current}} de {{total}}"
     },
     "slider": {
       "minLabel": "Mínimo",

package/dist/locales/ro.json

@@ -128,7 +128,8 @@
       "clear": "Anulează selecția"
     },
     "otp": {
-      "digitLabel": "Cifra {{current}} din {{total}}"
+      "digitLabel": "Cifra {{current}} din {{total}}",
+      "charLabel": "Caracterul {{current}} din {{total}}"
     },
     "slider": {
       "minLabel": "Minim",

package/dist/locales/ru.json

@@ -139,7 +139,8 @@
       "clear": "Очистить выбор"
     },
     "otp": {
-      "digitLabel": "Цифра {{current}} из {{total}}"
+      "digitLabel": "Цифра {{current}} из {{total}}",
+      "charLabel": "Символ {{current}} из {{total}}"
     },
     "slider": {
       "minLabel": "Минимум",

package/dist/locales/sq.json

@@ -139,7 +139,8 @@
       "clear": "Pastro zgjedhjen"
     },
     "otp": {
-      "digitLabel": "Shifra {{current}} nga {{total}}"
+      "digitLabel": "Shifra {{current}} nga {{total}}",
+      "charLabel": "Karakteri {{current}} nga {{total}}"
     },
     "slider": {
       "minLabel": "Minimumi",

package/dist/locales/sv.json

@@ -139,7 +139,8 @@
       "clear": "Rensa val"
     },
     "otp": {
-      "digitLabel": "Siffra {{current}} av {{total}}"
+      "digitLabel": "Siffra {{current}} av {{total}}",
+      "charLabel": "Tecken {{current}} av {{total}}"
     },
     "slider": {
       "minLabel": "Minimum",

package/dist/locales/tr.json

@@ -139,7 +139,8 @@
       "clear": "Seçimi temizle"
     },
     "otp": {
-      "digitLabel": "{{total}} basamaktan {{current}}. basamak"
+      "digitLabel": "{{total}} basamaktan {{current}}. basamak",
+      "charLabel": "{{total}} karakterden {{current}}. karakter"
     },
     "slider": {
       "minLabel": "Minimum",

package/dist/locales/zh.json

@@ -128,7 +128,8 @@
       "clear": "清除选择"
     },
     "otp": {
-      "digitLabel": "第 {{current}} 位，共 {{total}} 位"
+      "digitLabel": "第 {{current}} 位，共 {{total}} 位",
+      "charLabel": "第 {{current}} 个字符，共 {{total}} 个"
     },
     "slider": {
       "minLabel": "最小值",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfadocs/ui-kit",
-  "version": "0.53.0",
+  "version": "0.55.0",
   "type": "module",
   "description": "AlfaDocs shared design system — tokens, components, patterns, and translations for platform, booking, and alfascribe.",
   "license": "BUSL-1.1",

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

@@ -1,268 +0,0 @@
-import { jsxs as ee, jsx as y } from "react/jsx-runtime";
-import { forwardRef as te, useId as re, useRef as M, useState as se, useEffect as ae, useCallback as N, useMemo as oe, useImperativeHandle as ie } from "react";
-import { c as S } from "./index-D2ZczOXr.js";
-import { useTranslation as ne } from "react-i18next";
-import { u as ce } from "./use-controllable-state-BiY4xTzM.js";
-import { u as ue } from "./use-web-otp-D_utzp6S.js";
-import { u as le } from "./form-field-context-B3APVHKx.js";
-import { u as de } from "./registry-nPAVE19X.js";
-const pe = {
-  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, a) => {
-        e.setValue(a.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."
-    }
-  }
-}, fe = S("ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]"), me = S(
-  [
-    "ds:w-[var(--min-target-size)] ds:h-[var(--min-target-size)]",
-    "ds:rounded-[var(--radius-sm)]",
-    "ds:border ds:bg-input ds:text-foreground ds:text-center ds:font-medium ds:text-[length:var(--font-size-lg)]",
-    "ds:shadow-[var(--shadow-input)]",
-    "ds:transition-[colors,box-shadow] 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, (a) => String(a.charCodeAt(0) - 1632)).replace(/[\u06F0-\u06F9]/g, (a) => String(a.charCodeAt(0) - 1776));
-}
-function w(e, a) {
-  return F(e).replace(/\D/g, "").slice(0, a);
-}
-function ve(e, a) {
-  const m = w(e, a), l = new Array(a).fill("");
-  for (let n = 0; n < m.length; n += 1)
-    l[n] = m[n];
-  return l;
-}
-const be = te(
-  ({
-    length: e = 6,
-    value: a,
-    defaultValue: m,
-    onChange: l,
-    onComplete: n,
-    disabled: H,
-    error: $,
-    label: I,
-    id: K,
-    className: j,
-    webOtp: z = !1,
-    name: C
-  }, W) => {
-    const { t: _ } = ne(), v = le(), q = re(), O = I ? q : void 0, [G, P] = ce({
-      value: a,
-      defaultValue: w(m ?? "", e)
-    }), p = w(G ?? "", e), J = ve(p, e), b = v.disabled || !!H, B = v.invalid || !!$, Q = B ? "error" : "default", E = M([]), h = M(p.length === e), d = M(p);
-    d.current = p;
-    const U = () => {
-      const r = p.length;
-      return r >= e ? e - 1 : r;
-    }, [f, k] = se(U);
-    ae(() => {
-      f >= e && k(e - 1);
-    }, [f, e]);
-    const c = N(
-      (r) => {
-        const t = Math.max(0, Math.min(e - 1, r));
-        k(t);
-        const s = E.current[t];
-        s && (s.focus(), s.select());
-      },
-      [e]
-    ), u = N(
-      (r) => {
-        const t = w(r, e);
-        P(t), d.current = t, l == null || l(t), t.length === e ? h.current || (h.current = !0, n == null || n(t)) : h.current = !1;
-      },
-      [P, e, l, n]
-    );
-    ue({
-      enabled: z && !b,
-      onCode: u
-    });
-    const X = (r) => (t) => {
-      const s = t.target.value, o = F(s).replace(/\D/g, ""), i = d.current;
-      if (o.length === 0) {
-        if (s === "" && r < i.length) {
-          const R = i.slice(0, r) + i.slice(r + 1);
-          u(R);
-        }
-        return;
-      }
-      const g = i.slice(0, r), D = i.slice(r + o.length), T = (g + o + D).slice(0, e);
-      u(T);
-      const A = Math.min(r + o.length, e - 1);
-      c(A);
-    }, Y = (r) => (t) => {
-      const s = d.current;
-      if (t.key === "Backspace") {
-        if (s[r]) {
-          t.preventDefault();
-          const o = s.slice(0, r) + s.slice(r + 1);
-          u(o);
-          return;
-        }
-        if (r > 0) {
-          t.preventDefault();
-          const o = s.slice(0, r - 1) + s.slice(r);
-          u(o), 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));
-    }, Z = (r) => (t) => {
-      const o = t.clipboardData.getData("text").replace(/\s+/g, ""), i = F(o);
-      if (!/^[0-9]+$/.test(i)) return;
-      t.preventDefault();
-      const g = d.current, D = g.slice(0, r), T = g.slice(r + i.length), A = (D + i + T).slice(0, e);
-      u(A);
-      const R = Math.min(r + i.length, e - 1);
-      c(R);
-    }, x = (r) => (t) => {
-      k(r), t.currentTarget.select();
-    }, L = v.id, V = oe(
-      () => ({
-        getValue: () => d.current,
-        setValue: (r) => u(r),
-        clear: () => u(""),
-        focus: () => c(f),
-        isComplete: () => d.current.length === e
-      }),
-      [u, c, f, e]
-    );
-    return de(pe, V, K), ie(W, () => V, [V]), /* @__PURE__ */ ee("div", { className: fe({ className: j }), children: [
-      I ? /* @__PURE__ */ y(
-        "label",
-        {
-          id: O,
-          htmlFor: `${L}-0`,
-          className: "type-label ds:text-foreground",
-          children: I
-        }
-      ) : null,
-      /* @__PURE__ */ y(
-        "div",
-        {
-          role: "group",
-          dir: "ltr",
-          "aria-labelledby": O,
-          "aria-invalid": B || void 0,
-          "aria-describedby": v.describedBy || void 0,
-          "aria-disabled": b || void 0,
-          "data-component": "otp-input",
-          "data-component-id": K,
-          className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]",
-          children: J.map((r, t) => {
-            const s = !b && t === f;
-            return /* @__PURE__ */ y(
-              "input",
-              {
-                ref: (o) => {
-                  E.current[t] = o;
-                },
-                id: `${L}-${t}`,
-                type: "text",
-                inputMode: "numeric",
-                pattern: "[0-9]*",
-                autoComplete: t === 0 ? "one-time-code" : "off",
-                maxLength: 1,
-                value: r,
-                disabled: b,
-                tabIndex: s ? 0 : -1,
-                "aria-label": _("inputs.otp.digitLabel", {
-                  current: t + 1,
-                  total: e
-                }),
-                onChange: X(t),
-                onKeyDown: Y(t),
-                onPaste: Z(t),
-                onFocus: x(t),
-                className: me({ tone: Q })
-              },
-              t
-            );
-          })
-        }
-      ),
-      C ? /* @__PURE__ */ y("input", { type: "hidden", name: C, value: p, readOnly: !0 }) : null
-    ] });
-  }
-);
-be.displayName = "OTPInput";
-export {
-  be as O
-};
-//# sourceMappingURL=otp-input-Chb9r5vf.js.map