@alfadocs/ui-kit 0.33.1 → 0.33.2

package/dist/_chunks/{otp-input-BEg_sn8A.js → otp-input-CDTWT5EK.js}

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

package/dist/_chunks/use-web-otp-D_utzp6S.js

@@ -0,0 +1,33 @@
+import { useRef as f, useEffect as l } from "react";
+function p({
+  onCode: i,
+  onError: o,
+  enabled: c = !0
+}) {
+  const s = f(i), e = f(o);
+  s.current = i, e.current = o, l(() => {
+    if (!c || typeof window > "u" || !("OTPCredential" in window)) return;
+    const u = new AbortController(), a = {
+      otp: { transport: ["sms"] },
+      signal: u.signal
+    };
+    let r = !1;
+    return navigator.credentials.get(a).then((t) => {
+      if (r) return;
+      const n = t;
+      n != null && n.code && s.current(n.code);
+    }).catch((t) => {
+      var n;
+      r || t instanceof DOMException && t.name === "AbortError" || (n = e.current) == null || n.call(
+        e,
+        t instanceof Error ? t : new Error(String(t))
+      );
+    }), () => {
+      r = !0, u.abort();
+    };
+  }, [c]);
+}
+export {
+  p as u
+};
+//# sourceMappingURL=use-web-otp-D_utzp6S.js.map

package/dist/agent-catalog.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "packageVersion": "0.33.1",
+  "packageVersion": "0.33.2",
   "components": [
     {
       "kind": "component",

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

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

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

@@ -18,6 +18,22 @@ export interface OTPInputProps {
     /** Stable id, used to address this instance from the agent runtime. */
     id?: string;
     className?: string;
+    /**
+     * Opt into Chrome-Android's WebOTP API for one-tap SMS autofill. When
+     * the browser surfaces a matching SMS-bound credential, the kit spreads
+     * the code across every digit box and fires `onComplete` automatically.
+     *
+     * Falls back silently to manual entry on Firefox / desktop / iOS — those
+     * platforms either don't ship the API at all or rely on the
+     * `autocomplete="one-time-code"` QuickType heuristic the kit already
+     * applies to the first input.
+     *
+     * Prerequisites the prop can't enforce: page must be HTTPS, and the SMS
+     * body must end with `@<origin> #<code>` on its last line (Chrome's
+     * spec — without it the browser refuses to surface the message).
+     * Default `false` so the listener stays opt-in.
+     */
+    webOtp?: boolean;
 }
 export declare const OTPInput: import("react").ForwardRefExoticComponent<OTPInputProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=otp-input.d.ts.map

package/dist/hooks/index.d.ts

@@ -16,4 +16,5 @@ export { useFocusTrap, type UseFocusTrapOptions } from './use-focus-trap';
 export { useDirection, useDocumentDirection, type Direction, } from './use-direction';
 export { usePersistentState } from './use-persistent-state';
 export { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
+export { useWebOtp, type UseWebOtpOptions } from './use-web-otp';
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.js

@@ -1,27 +1,28 @@
 import { u as v } from "../_chunks/use-prefers-reduced-motion-BMwIQRjB.js";
 import { u as D } from "../_chunks/use-media-query-CcAx5SMM.js";
 import { u as _ } from "../_chunks/use-scroll-to-first-error-4Za-u5Nw.js";
-import { u as g } from "../_chunks/use-count-up-BLLetaZ8.js";
-import { u as w } from "../_chunks/use-locale-BkCIHujH.js";
-import { A as O, T as R, a as H, r as M, t as Y, u as q } from "../_chunks/use-theme-C2dHKUAN.js";
+import { u as O } from "../_chunks/use-count-up-BLLetaZ8.js";
+import { u as k } from "../_chunks/use-locale-BkCIHujH.js";
+import { A as K, T as R, a as H, r as M, t as Y, u as q } from "../_chunks/use-theme-C2dHKUAN.js";
 import { u as G } from "../_chunks/use-controllable-state-BiY4xTzM.js";
 import { u as U } from "../_chunks/use-copy-to-clipboard-Cyfc_dlv.js";
 import { u as j } from "../_chunks/use-debounced-callback-BisrB-Fq.js";
 import { useState as x, useRef as b, useEffect as E } from "react";
-import { u as z, a as J } from "../_chunks/use-direction-Dp8h70PP.js";
-import { u as W } from "../_chunks/use-persistent-state-i23OWy6G.js";
+import { u as W, a as z } from "../_chunks/use-direction-Dp8h70PP.js";
+import { u as N } from "../_chunks/use-persistent-state-i23OWy6G.js";
 import { u as Z } from "../_chunks/use-isomorphic-layout-effect-BGfaCOP1.js";
+import { u as ee } from "../_chunks/use-web-otp-D_utzp6S.js";
 function S(e, o) {
-  const [t, c] = x(e), n = b(null);
+  const [t, c] = x(e), u = b(null);
   return E(() => {
     if (o <= 0) {
-      n.current !== null && (clearTimeout(n.current), n.current = null), c(e);
+      u.current !== null && (clearTimeout(u.current), u.current = null), c(e);
       return;
     }
     const s = setTimeout(() => {
-      c(e), n.current = null;
+      c(e), u.current = null;
     }, o);
-    return n.current = s, () => clearTimeout(s);
+    return u.current = s, () => clearTimeout(s);
   }, [e, o]), t;
 }
 const T = [
@@ -49,57 +50,58 @@ function p(e) {
   });
 }
 function C(e, o = {}) {
-  const { enabled: t = !0, autoFocus: c = !0, restoreFocus: n = !0 } = o, s = b(null);
+  const { enabled: t = !0, autoFocus: c = !0, restoreFocus: u = !0 } = o, s = b(null);
   E(() => {
     if (!t) return;
     const a = e.current;
     if (!a) return;
     if (s.current = typeof document < "u" && document.activeElement instanceof HTMLElement ? document.activeElement : null, c) {
-      const u = p(a)[0] ?? (a.tabIndex >= -1 ? a : null);
-      u == null || u.focus();
+      const n = p(a)[0] ?? (a.tabIndex >= -1 ? a : null);
+      n == null || n.focus();
     }
     function f(r) {
       if (r.key !== "Tab") return;
-      const u = e.current;
-      if (!u) return;
-      const i = p(u);
+      const n = e.current;
+      if (!n) return;
+      const i = p(n);
       if (i.length === 0) {
         r.preventDefault();
         return;
       }
       const d = i[0], m = i[i.length - 1], l = document.activeElement;
-      r.shiftKey ? (l === d || !u.contains(l)) && (r.preventDefault(), m.focus()) : (l === m || !u.contains(l)) && (r.preventDefault(), d.focus());
+      r.shiftKey ? (l === d || !n.contains(l)) && (r.preventDefault(), m.focus()) : (l === m || !n.contains(l)) && (r.preventDefault(), d.focus());
     }
     return a.addEventListener("keydown", f), () => {
-      if (a.removeEventListener("keydown", f), n && s.current) {
+      if (a.removeEventListener("keydown", f), u && s.current) {
         const r = s.current;
         requestAnimationFrame(() => {
           r.isConnected && r.focus();
         });
       }
     };
-  }, [t, c, n, e]);
+  }, [t, c, u, e]);
 }
 export {
-  O as ACCESSIBILITY_STORAGE_KEY,
+  K as ACCESSIBILITY_STORAGE_KEY,
   R as THEME_CLASS,
   H as THEME_STORAGE_KEY,
   M as resolveTheme,
   Y as themeClassList,
   G as useControllableState,
   U as useCopyToClipboard,
-  g as useCountUp,
+  O as useCountUp,
   j as useDebouncedCallback,
   S as useDebouncedValue,
-  z as useDirection,
-  J as useDocumentDirection,
+  W as useDirection,
+  z as useDocumentDirection,
   C as useFocusTrap,
   Z as useIsomorphicLayoutEffect,
-  w as useLocale,
+  k as useLocale,
   D as useMediaQuery,
-  W as usePersistentState,
+  N as usePersistentState,
   v as usePrefersReducedMotion,
   _ as useScrollToFirstError,
-  q as useTheme
+  q as useTheme,
+  ee as useWebOtp
 };
 //# sourceMappingURL=index.js.map

package/dist/hooks/use-web-otp.d.ts

@@ -0,0 +1,22 @@
+export interface UseWebOtpOptions {
+    /**
+     * Invoked once with the full code when the browser surfaces a matching
+     * SMS. Setting state from inside `onCode` is safe — the hook will not
+     * fire again for the same lifecycle (it auto-aborts after success).
+     */
+    onCode: (code: string) => void;
+    /**
+     * Optional error sink. `AbortError` (the normal cleanup path) is NEVER
+     * forwarded — only real failures (permission denied, malformed SMS, etc.).
+     * When omitted the hook silently swallows everything so a consumer that
+     * doesn't care about telemetry can call the hook bare.
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Gate the listener. When `false` the hook is a no-op; flipping back to
+     * `true` reinstalls the listener. Default `true`.
+     */
+    enabled?: boolean;
+}
+export declare function useWebOtp({ onCode, onError, enabled, }: UseWebOtpOptions): void;
+//# sourceMappingURL=use-web-otp.d.ts.map

package/dist/index.js

@@ -27,7 +27,7 @@ import { F as ba } from "./_chunks/form-field-BOm9hK35.js";
 import { F as Ra, u as Ia } from "./_chunks/form-field-context-B3APVHKx.js";
 import { M as Fa, m as Ea, a as La } from "./_chunks/multi-select-DOLO3K_z.js";
 import { N as ka, u as Oa } from "./_chunks/number-input-Dj5L3pXK.js";
-import { O as ya } from "./_chunks/otp-input-BEg_sn8A.js";
+import { O as ya } from "./_chunks/otp-input-CDTWT5EK.js";
 import { P as Ma, u as Da } from "./_chunks/use-password-requirements-DsgduV1x.js";
 import { P as Va, c as va, p as Ha, a as Wa } from "./_chunks/phone-input-DfZbPPvh.js";
 import { R as Ua, r as Ka } from "./_chunks/recaptcha-widget-CFYyLSEX.js";

package/package.json

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