@spark-ui/components 16.0.1 → 16.0.2

package/dist/input-otp/index.mjs

@@ -1,40 +1,41 @@
-import { jsxs as te, jsx as b } from "react/jsx-runtime";
-import { cva as ne, cx as fe } from "class-variance-authority";
-import { createContext as me, useContext as be, useId as ve, useRef as Z, useState as L, useEffect as $, useMemo as H, Children as re, isValidElement as se, cloneElement as ee } from "react";
-import { useFormFieldControl as xe } from "@spark-ui/components/form-field";
-import { I as Ie } from "../Icon-Ck-dhfLd.mjs";
-import { Minus as he } from "@spark-ui/icons/Minus";
-const ae = me(null), ge = () => {
-  const e = be(ae);
+import { jsxs as se, jsx as I } from "react/jsx-runtime";
+import { cva as ae, cx as ve } from "class-variance-authority";
+import { createContext as he, useContext as ye, useId as xe, useRef as te, useState as ne, useEffect as J, useMemo as L, Children as oe, isValidElement as ie, cloneElement as re } from "react";
+import { useFormFieldControl as Ie } from "@spark-ui/components/form-field";
+const ce = he(null), ge = () => {
+  const e = ye(ce);
   if (!e)
     throw new Error("InputOTP components must be used within InputOTP");
   return e;
 };
-ne(["relative", "inline-flex", "items-center", "gap-sm"]);
-const ie = ne(
+ae(["relative", "inline-flex", "items-center", "gap-sm"]);
+const le = ae(
   [
     // Base slot styles
-    "relative",
-    "border-sm first:rounded-l-lg last:rounded-r-lg",
-    "size-sz-44",
-    "text-center text-body-1",
-    "text-on-surface",
+    "relative h-[50px] w-sz-40",
+    "border-sm rounded-md",
+    "text-center text-display-3 text-on-surface",
     "outline-hidden",
     "transition-colors",
     "flex items-center justify-center",
+    // Slot that receives focus when clicking the group (first empty or last slot)
+    // Use data-[focus-target=true]:... for distinct styles
     // Active state (when focused)
     "data-[active=true]:ring-1",
     "data-[active=true]:ring-inset",
     "data-[active=true]:ring-l-2",
     "data-[active=true]:border-focus",
-    // 'data-[active=true]:ring-focus',
-    // 'data-[active=true]:border-focus',
     "data-[active=true]:z-raised ring-focus",
     // Disabled state
     "data-[disabled=true]:cursor-not-allowed",
     "data-[disabled=true]:border-outline",
     "data-[disabled=true]:bg-on-surface/dim-5",
-    "data-[disabled=true]:text-on-surface/dim-3"
+    "data-[disabled=true]:text-on-surface/dim-3",
+    // Read-only state (same as disabled but text stays normal)
+    "data-[readonly=true]:cursor-default",
+    "data-[readonly=true]:data-[active=false]:border-outline",
+    "data-[readonly=true]:bg-on-surface/dim-5",
+    "group-hover:data-[focus-target=true]:data-[disabled=false]:border-outline-high"
   ],
   {
     variants: {
@@ -42,7 +43,7 @@ const ie = ne(
        * Color scheme of the slot
        */
       intent: {
-        neutral: ["bg-surface border-outline"],
+        neutral: ["data-[filled=true]:bg-neutral-container bg-surface border-outline"],
         success: ["border-success bg-success-container text-on-success-container"],
         alert: ["border-alert bg-alert-container text-on-alert-container"],
         error: ["border-error bg-error-container text-on-error-container"]
@@ -52,30 +53,33 @@ const ie = ne(
       intent: "neutral"
     }
   }
-), Ke = ie, E = ({ index: e, className: a, ...t }) => {
-  const o = ge(), r = e ?? 0, l = o.slots[r];
-  if (!l)
+), Fe = le, E = ({ index: e, className: o, ...t }) => {
+  const i = ge(), r = e ?? 0, d = i.slots[r];
+  if (!d)
     return null;
-  const { char: p, isActive: v, hasFakeCaret: h } = l, x = !p && !h && o.placeholder;
-  return /* @__PURE__ */ te(
+  const { char: p, isActive: g, hasFakeCaret: v } = d, O = !p, T = O && !v && i.placeholder, h = r === i.activeIndex;
+  return /* @__PURE__ */ se(
     "div",
     {
-      className: ie({
-        intent: o.intent,
-        className: a
+      className: le({
+        intent: i.intent,
+        className: o
       }),
-      "data-active": v,
-      "data-disabled": o.disabled,
-      "data-valid": o.intent !== "error",
+      "data-active": g,
+      "data-disabled": i.disabled,
+      "data-readonly": i.readOnly,
+      "data-filled": !O,
+      "data-focus-target": h,
+      "data-valid": i.intent !== "error",
       ...t,
       children: [
-        /* @__PURE__ */ b("span", { className: x ? "text-on-surface/dim-3" : "", children: o.type === "password" && p ? "•" : p || (!h && o.placeholder ? o.placeholder : "") }),
-        h && /* @__PURE__ */ b(
+        /* @__PURE__ */ I("span", { className: T ? "text-on-surface/dim-3" : "", children: i.type === "password" && p ? "•" : p || (!v && i.placeholder ? i.placeholder : "") }),
+        v && /* @__PURE__ */ I(
           "span",
           {
             className: "pointer-events-none absolute inset-0 flex items-center justify-center",
             "aria-hidden": "true",
-            children: /* @__PURE__ */ b("span", { className: "bg-on-surface animate-standalone-caret-blink h-sz-24 w-px" })
+            children: /* @__PURE__ */ I("span", { className: "bg-on-surface animate-standalone-caret-blink h-sz-24 w-sz-2" })
           }
         )
       ]
@@ -83,160 +87,166 @@ const ie = ne(
   );
 };
 E.displayName = "InputOTP.Slot";
-const ye = "Backspace", Pe = "ArrowLeft", Te = "ArrowUp", Oe = "ArrowRight", we = "ArrowDown", Ne = "e", Re = ({
+const Oe = "Backspace", Pe = "ArrowLeft", Te = "ArrowUp", we = "ArrowRight", Ne = "ArrowDown", Re = "e", Se = ({
   maxLength: e,
-  type: a,
+  type: o,
   value: t,
-  defaultValue: o,
+  defaultValue: i,
   onValueChange: r,
-  isValid: l,
+  isValid: d,
   disabledProp: p,
+  readOnlyProp: g,
   autoFocus: v,
-  forceUppercase: h,
-  filterKeys: P,
-  pattern: x,
-  placeholder: C,
-  nameProp: G
+  forceUppercase: O,
+  filterKeys: T,
+  pattern: h,
+  placeholder: D,
+  nameProp: V
 }) => {
-  const z = ve(), s = Z(null), B = Z(null), c = xe(), T = c.id ?? z, D = G ?? c.name, I = c.disabled ?? p, _ = c.isInvalid ?? !l, V = c.isRequired ?? !1, W = c.labelId, k = c.description, O = c.state, w = ["success", "alert", "error"].includes(O ?? "") ? O : _ ? "error" : "neutral", g = t !== void 0 ? t : o, F = h ? g.toUpperCase() : g, [q, N] = L(F), [R, K] = L(!1), u = t !== void 0 ? t : q, f = Math.min(u.length, e - 1);
-  $(() => {
-    s.current && s.current.setSelectionRange(f, f);
-  }, [f, u.length, e]);
-  const M = H(
-    () => Array.from({ length: e }, (i, n) => ({
-      char: u[n] || "",
-      isActive: n === f && R,
-      hasFakeCaret: n === f && !u[n] && !I && R
+  const W = xe(), s = te(null), Y = te(null), c = Ie(), w = c.id ?? W, k = V ?? c.name, f = c.disabled ?? p, y = c.readOnly ?? g, _ = c.isInvalid ?? !d, q = c.isRequired ?? !1, F = c.labelId, K = c.description, N = c.state, R = ["success", "alert", "error"].includes(N ?? "") ? N : _ ? "error" : "neutral", P = t !== void 0 ? t : i, M = O ? P.toUpperCase() : P, [$, S] = ne(M), [A, j] = ne(!1), l = t !== void 0 ? t : $, b = Math.min(l.length, e - 1);
+  J(() => {
+    s.current && s.current.setSelectionRange(b, b);
+  }, [b, l.length, e]);
+  const z = L(
+    () => Array.from({ length: e }, (n, a) => ({
+      char: l[a] || "",
+      isActive: a === b && A,
+      hasFakeCaret: a === b && !l[a] && !f && !y && A
     })),
-    [e, u, f, R, I]
+    [e, l, b, A, f, y]
   );
-  $(() => {
+  J(() => {
     s.current && t !== void 0 && (s.current.value = t);
-  }, [t]), $(() => {
+  }, [t]), J(() => {
     v && s.current && s.current.focus();
   }, [v]);
-  const S = (i) => {
-    let n = i;
-    if (h && (n = n.toUpperCase()), a === "number" && (n = n.replace(/[^\d]/g, "")), x)
+  const G = (n) => {
+    let a = n;
+    if (O && (a = a.toUpperCase()), o === "number" && (a = a.replace(/[^\d]/g, "")), h)
       try {
-        let m = x;
-        x.startsWith("^") || (m = `^${x}$`);
-        const d = new RegExp(m);
-        n = n.split("").filter((y) => d.test(y)).join("");
-      } catch (m) {
-        console.error("Invalid pattern provided to InputOTP:", x, m);
+        let x = h;
+        h.startsWith("^") || (x = `^${h}$`);
+        const u = new RegExp(x);
+        a = a.split("").filter((m) => u.test(m)).join("");
+      } catch (x) {
+        console.error("Invalid pattern provided to InputOTP:", h, x);
       }
-    return n;
+    return a;
   };
   return {
-    uuid: T,
+    uuid: w,
     inputRef: s,
-    containerRef: B,
-    name: D,
-    disabled: I,
+    containerRef: Y,
+    name: k,
+    disabled: f,
+    readOnly: y,
     isInvalid: _,
-    isRequired: V,
-    description: k,
+    isRequired: q,
+    description: K,
     maxLength: e,
-    intent: w,
-    currentValue: u,
-    activeIndex: f,
-    slots: M,
+    intent: R,
+    currentValue: l,
+    activeIndex: b,
+    slots: z,
     contextValue: {
-      value: u,
+      value: l,
       maxLength: e,
-      slots: M,
-      activeIndex: f,
-      intent: w,
-      disabled: I,
-      placeholder: C,
-      type: a
+      slots: z,
+      activeIndex: b,
+      intent: R,
+      disabled: f,
+      readOnly: y,
+      placeholder: D,
+      type: o
     },
-    handleChange: (i) => {
-      if (I) return;
-      const n = i.target.value, d = S(n).slice(0, e);
-      r && r(d), t === void 0 && N(d);
-      const y = Math.min(d.length, e - 1);
-      s.current && s.current.setSelectionRange(y, y);
+    handleChange: (n) => {
+      if (f || y) return;
+      const a = n.target.value, u = G(a).slice(0, e);
+      r && r(u), t === void 0 && S(u);
+      const m = Math.min(u.length, e - 1);
+      s.current && s.current.setSelectionRange(m, m);
     },
-    handleKeyDown: (i) => {
-      if (!I) {
-        if (P.length > 0 && P.includes(i.key)) {
-          i.preventDefault();
-          return;
-        }
-        switch (i.key) {
-          case ye:
-            i.preventDefault();
-            const n = u.length;
-            if (n > 0) {
-              const m = u.slice(0, n - 1);
-              r && r(m), t === void 0 && N(m);
-              const d = Math.max(0, m.length);
-              s.current && s.current.setSelectionRange(d, d);
-            }
-            break;
-          case Pe:
-          case Oe:
-            i.preventDefault();
-            break;
-          case Te:
-          case we:
-            i.preventDefault();
-            break;
-          case Ne:
-          case "E":
-            a === "number" && i.preventDefault();
-            break;
-        }
+    handleKeyDown: (n) => {
+      if (f || y) return;
+      const a = (n.ctrlKey || n.metaKey) && ["a", "c", "v", "x"].includes(n.key.toLowerCase());
+      if (T.length > 0 && T.includes(n.key) && !a) {
+        n.preventDefault();
+        return;
+      }
+      switch (n.key) {
+        case Oe:
+          n.preventDefault();
+          const x = l.length;
+          if (x > 0) {
+            const u = l.slice(0, x - 1);
+            r && r(u), t === void 0 && S(u);
+            const m = Math.max(0, u.length);
+            s.current && s.current.setSelectionRange(m, m);
+          }
+          break;
+        case Pe:
+        case we:
+          n.preventDefault();
+          break;
+        case Te:
+        case Ne:
+          n.preventDefault();
+          break;
+        case Re:
+        case "E":
+          o === "number" && n.preventDefault();
+          break;
       }
     },
-    handlePaste: (i) => {
-      if (I) return;
-      i.preventDefault();
-      const n = i.clipboardData.getData("text");
-      if (!n) return;
-      const d = S(n).slice(0, e);
-      r && r(d), t === void 0 && N(d);
-      const y = Math.min(d.length, e - 1);
-      s.current && s.current.setSelectionRange(y, y);
+    handleCopy: (n) => {
+      f || (n.preventDefault(), l.length > 0 && n.clipboardData.setData("text/plain", l));
+    },
+    handlePaste: (n) => {
+      if (f || y) return;
+      n.preventDefault();
+      const a = n.clipboardData.getData("text");
+      if (!a) return;
+      const u = G(a).slice(0, e);
+      r && r(u), t === void 0 && S(u);
+      const m = Math.min(u.length, e - 1);
+      s.current && s.current.setSelectionRange(m, m);
     },
     handleFocus: () => {
-      if (K(!0), s.current) {
-        const i = Math.min(u.length, e - 1);
-        s.current.setSelectionRange(i, i);
+      if (j(!0), s.current) {
+        const n = Math.min(l.length, e - 1);
+        s.current.setSelectionRange(n, n);
       }
     },
     handleBlur: () => {
-      K(!1);
+      j(!1);
     },
     handleClick: () => {
       s.current && s.current.focus();
     },
-    labelId: W
+    labelId: F
   };
-}, oe = (e) => {
-  let a = 0;
-  return re.forEach(e, (t) => {
-    if (se(t)) {
-      const o = t.props;
-      t.type === E || t.type?.displayName === "InputOTP.Slot" ? a++ : o.children && (a += oe(o.children));
+}, ue = (e) => {
+  let o = 0;
+  return oe.forEach(e, (t) => {
+    if (ie(t)) {
+      const i = t.props;
+      t.type === E || t.type?.displayName === "InputOTP.Slot" ? o++ : i.children && (o += ue(i.children));
     }
-  }), a;
-}, ce = (e, a = 0) => {
-  let t = a;
-  return [re.map(e, (r) => {
-    if (se(r)) {
-      const l = r.props;
+  }), o;
+}, de = (e, o = 0) => {
+  let t = o;
+  return [oe.map(e, (r) => {
+    if (ie(r)) {
+      const d = r.props;
       if (r.type === E || r.type?.displayName === "InputOTP.Slot") {
-        const p = typeof l.index == "number" ? l.index : t++;
-        return ee(r, {
-          ...l,
+        const p = typeof d.index == "number" ? d.index : t++;
+        return re(r, {
+          ...d,
           index: p
         });
-      } else if (l.children) {
-        const [p, v] = ce(l.children, t);
-        return t = v, ee(r, {
+      } else if (d.children) {
+        const [p, g] = de(d.children, t);
+        return t = g, re(r, {
           ...r.props,
           children: p
         });
@@ -244,149 +254,158 @@ const ye = "Backspace", Pe = "ArrowLeft", Te = "ArrowUp", Oe = "ArrowRight", we
     }
     return r;
   }), t];
-}, le = ({
+}, pe = ({
   maxLength: e,
-  type: a = "text",
+  type: o = "text",
   value: t,
-  defaultValue: o = "",
+  defaultValue: i = "",
   onValueChange: r,
-  isValid: l = !0,
+  isValid: d = !0,
   disabled: p = !1,
+  readOnly: g = !1,
   autoFocus: v = !1,
-  autoComplete: h = "off",
-  forceUppercase: P = !1,
-  filterKeys: x = ["-", "."],
-  pattern: C,
-  inputMode: G,
-  placeholder: z = "",
+  autoComplete: O = "off",
+  forceUppercase: T = !1,
+  filterKeys: h = ["-", "."],
+  pattern: D,
+  inputMode: V,
+  placeholder: W = "-",
   name: s,
-  className: B,
+  className: Y,
   children: c,
-  ...T
+  ...w
 }) => {
-  const D = H(() => {
+  const k = L(() => {
     if (e !== void 0)
       return e;
-    const A = oe(c);
-    return A > 0 ? A : 4;
-  }, [e, c]), I = H(() => {
-    const [A] = ce(c);
-    return A;
+    const C = ue(c);
+    return C > 0 ? C : 4;
+  }, [e, c]), f = L(() => {
+    const [C] = de(c);
+    return C;
   }, [c]), {
-    uuid: _,
-    inputRef: V,
-    containerRef: W,
-    name: k,
-    disabled: O,
-    isInvalid: Y,
-    isRequired: w,
-    description: g,
-    currentValue: F,
-    contextValue: q,
-    handleChange: N,
-    handleKeyDown: R,
-    handlePaste: K,
-    handleFocus: u,
-    handleBlur: f,
-    handleClick: M,
-    labelId: S
-  } = Re({
-    maxLength: D,
-    type: a,
+    uuid: y,
+    inputRef: _,
+    containerRef: q,
+    name: F,
+    disabled: K,
+    readOnly: N,
+    isInvalid: U,
+    isRequired: R,
+    description: P,
+    currentValue: M,
+    contextValue: $,
+    handleChange: S,
+    handleKeyDown: A,
+    handleCopy: j,
+    handlePaste: l,
+    handleFocus: b,
+    handleBlur: z,
+    handleClick: G,
+    labelId: H
+  } = Se({
+    maxLength: k,
+    type: o,
     value: t,
-    defaultValue: o,
+    defaultValue: i,
     onValueChange: r,
-    isValid: l,
+    isValid: d,
     disabledProp: p,
+    readOnlyProp: g,
     autoFocus: v,
-    forceUppercase: P,
-    filterKeys: x,
-    pattern: C,
-    placeholder: z,
+    forceUppercase: T,
+    filterKeys: h,
+    pattern: D,
+    placeholder: W,
     nameProp: s
-  }), U = "aria-label" in T ? T["aria-label"] : void 0, { "aria-label": ue, ...Q } = T, j = S ? { "aria-labelledby": S } : U ? { "aria-label": U } : {};
-  return /* @__PURE__ */ b(ae.Provider, { value: q, children: /* @__PURE__ */ te(
+  }), X = "aria-label" in w ? w["aria-label"] : void 0, { "aria-label": fe, ...ee } = w, B = H ? { "aria-labelledby": H } : X ? { "aria-label": X } : {};
+  return /* @__PURE__ */ I(ce.Provider, { value: $, children: /* @__PURE__ */ se(
     "div",
     {
-      ref: W,
+      ref: q,
       "data-spark-component": "input-otp",
       role: "group",
-      ...j,
-      ...g ? { "aria-describedby": g } : {},
-      className: fe(
-        "gap-md relative inline-flex items-center",
-        O ? "cursor-not-allowed" : "cursor-text",
-        B
+      ...B,
+      ...P ? { "aria-describedby": P } : {},
+      className: ve(
+        "group gap-md relative inline-flex w-fit items-center default:cursor-text",
+        {
+          "cursor-not-allowed": K,
+          "cursor-default": N
+        },
+        Y
       ),
-      onClick: M,
-      ...Q,
+      onClick: G,
+      ...ee,
       children: [
-        k && /* @__PURE__ */ b(
+        F && /* @__PURE__ */ I(
           "input",
           {
             type: "hidden",
-            name: k,
-            value: F,
-            required: w,
-            "aria-required": w,
-            "aria-invalid": Y,
-            ...j
+            name: F,
+            value: M,
+            required: R,
+            "aria-required": R,
+            "aria-invalid": U,
+            ...B
           }
         ),
-        /* @__PURE__ */ b(
+        /* @__PURE__ */ I(
           "input",
           {
-            ref: V,
-            id: _,
-            type: a === "password" ? "password" : "text",
-            value: F,
-            maxLength: D,
+            ref: _,
+            id: y,
+            type: o === "password" ? "password" : "text",
+            value: M,
+            maxLength: k,
             autoFocus: v,
-            autoComplete: h,
-            disabled: O,
-            pattern: C,
-            inputMode: G,
-            ...j,
-            ...g ? { "aria-describedby": g } : {},
-            "aria-invalid": Y,
-            onChange: N,
-            onKeyDown: R,
-            onPaste: K,
-            onFocus: u,
-            onBlur: f,
-            className: "bg-success z-raised absolute inset-0 m-0 p-0 opacity-0 disabled:cursor-not-allowed",
+            autoComplete: O,
+            disabled: K,
+            readOnly: N,
+            pattern: D,
+            inputMode: V,
+            ...B,
+            ...P ? { "aria-describedby": P } : {},
+            "aria-invalid": U,
+            onChange: S,
+            onKeyDown: A,
+            onCopy: j,
+            onPaste: l,
+            onFocus: b,
+            onBlur: z,
+            className: "bg-success z-raised absolute inset-0 m-0 p-0 opacity-0 read-only:cursor-default disabled:cursor-not-allowed",
             tabIndex: 0
           }
         ),
-        I
+        f
       ]
     }
   ) });
 };
-le.displayName = "InputOTP";
-const X = ({ children: e, className: a, ...t }) => /* @__PURE__ */ b("div", { className: `inline-flex [&>*:not(:first-child)]:-ml-px ${a || ""}`, ...t, children: e });
-X.displayName = "InputOTP.Group";
-const J = ({ className: e, ...a }) => /* @__PURE__ */ b(
+pe.displayName = "InputOTP";
+const Q = ({ children: e, className: o, ...t }) => /* @__PURE__ */ I("div", { className: `gap-md flex ${o}`, ...t, children: e });
+Q.displayName = "InputOTP.Group";
+const Z = ({ className: e, ...o }) => /* @__PURE__ */ I(
   "div",
   {
-    className: `text-on-surface flex items-center justify-center ${e || ""}`,
-    ...a,
-    children: /* @__PURE__ */ b(Ie, { size: "md", children: /* @__PURE__ */ b(he, {}) })
+    className: `text-on-surface/dim-3 flex items-center justify-center ${e || ""}`,
+    ...o,
+    children: /* @__PURE__ */ I("div", { className: "h-sz-4 w-sz-8 bg-outline rounded-full" })
   }
 );
-J.displayName = "InputOTP.Separator";
-const Se = Object.assign(le, {
-  Group: X,
+Z.displayName = "InputOTP.Separator";
+const Ae = Object.assign(pe, {
+  Group: Q,
   Slot: E,
-  Separator: J
+  Separator: Z
 });
-Se.displayName = "InputOTP";
-X.displayName = "InputOTP.Group";
+Ae.displayName = "InputOTP";
+Q.displayName = "InputOTP.Group";
 E.displayName = "InputOTP.Slot";
-J.displayName = "InputOTP.Separator";
+Z.displayName = "InputOTP.Separator";
 export {
-  Se as InputOTP,
-  ie as inputOTPSlotStyles,
-  Ke as inputOTPStyles
+  Ae as InputOTP,
+  le as inputOTPSlotStyles,
+  Fe as inputOTPStyles
 };
 //# sourceMappingURL=index.mjs.map