@spark-ui/components 14.0.0-beta.1 → 14.0.0

package/dist/input-otp/index.mjs

@@ -1,15 +1,17 @@
 import { jsxs as te, jsx as b } from "react/jsx-runtime";
-import { c as de, a as pe } from "../index-BmAFn37q.mjs";
-import { createContext as fe, useContext as me, useId as be, useRef as Z, useState as L, useEffect as U, useMemo as H, Children as ne, isValidElement as re, cloneElement as ee } from "react";
-import { useFormFieldControl as ve } from "../form-field/index.mjs";
-import { I as Ie } from "../Icon-D1RueiPY.mjs";
-import { Minus as xe } from "@spark-ui/icons/Minus";
-const se = fe(null), he = () => {
-  const e = me(se);
+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);
   if (!e)
     throw new Error("InputOTP components must be used within InputOTP");
   return e;
-}, ae = de(
+};
+ne(["relative", "inline-flex", "items-center", "gap-sm"]);
+const ie = ne(
   [
     // Base slot styles
     "relative",
@@ -50,15 +52,15 @@ const se = fe(null), he = () => {
       intent: "neutral"
     }
   }
-), Fe = ae, E = ({ index: e, className: a, ...t }) => {
-  const o = he(), r = e ?? 0, l = o.slots[r];
+), Ke = ie, E = ({ index: e, className: a, ...t }) => {
+  const o = ge(), r = e ?? 0, l = o.slots[r];
   if (!l)
     return null;
-  const { char: p, isActive: v, hasFakeCaret: h } = l, I = !p && !h && o.placeholder;
+  const { char: p, isActive: v, hasFakeCaret: h } = l, x = !p && !h && o.placeholder;
   return /* @__PURE__ */ te(
     "div",
     {
-      className: ae({
+      className: ie({
         intent: o.intent,
         className: a
       }),
@@ -67,7 +69,7 @@ const se = fe(null), he = () => {
       "data-valid": o.intent !== "error",
       ...t,
       children: [
-        /* @__PURE__ */ b("span", { className: I ? "text-on-surface/dim-3" : "", children: o.type === "password" && p ? "•" : p || (!h && o.placeholder ? o.placeholder : "") }),
+        /* @__PURE__ */ b("span", { className: x ? "text-on-surface/dim-3" : "", children: o.type === "password" && p ? "•" : p || (!h && o.placeholder ? o.placeholder : "") }),
         h && /* @__PURE__ */ b(
           "span",
           {
@@ -81,7 +83,7 @@ const se = fe(null), he = () => {
   );
 };
 E.displayName = "InputOTP.Slot";
-const ye = "Backspace", Pe = "ArrowLeft", ge = "ArrowUp", Oe = "ArrowRight", Te = "ArrowDown", we = "e", Re = ({
+const ye = "Backspace", Pe = "ArrowLeft", Te = "ArrowUp", Oe = "ArrowRight", we = "ArrowDown", Ne = "e", Re = ({
   maxLength: e,
   type: a,
   value: t,
@@ -91,75 +93,75 @@ const ye = "Backspace", Pe = "ArrowLeft", ge = "ArrowUp", Oe = "ArrowRight", Te
   disabledProp: p,
   autoFocus: v,
   forceUppercase: h,
-  filterKeys: g,
-  pattern: I,
+  filterKeys: P,
+  pattern: x,
   placeholder: C,
-  nameProp: z
+  nameProp: G
 }) => {
-  const B = be(), s = Z(null), V = Z(null), c = ve(), O = c.id ?? B, k = z ?? c.name, x = c.disabled ?? p, D = c.isInvalid ?? !l, W = c.isRequired ?? !1, Y = c.labelId, _ = c.description, T = c.state, w = ["success", "alert", "error"].includes(T ?? "") ? T : D ? "error" : "neutral", y = t !== void 0 ? t : o, K = h ? y.toUpperCase() : y, [G, R] = L(K), [S, F] = L(!1), u = t !== void 0 ? t : G, f = Math.min(u.length, e - 1);
-  U(() => {
+  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 j = H(
+  const M = H(
     () => Array.from({ length: e }, (i, n) => ({
       char: u[n] || "",
-      isActive: n === f && S,
-      hasFakeCaret: n === f && !u[n] && !x && S
+      isActive: n === f && R,
+      hasFakeCaret: n === f && !u[n] && !I && R
     })),
-    [e, u, f, S, x]
+    [e, u, f, R, I]
   );
-  U(() => {
+  $(() => {
     s.current && t !== void 0 && (s.current.value = t);
-  }, [t]), U(() => {
+  }, [t]), $(() => {
     v && s.current && s.current.focus();
   }, [v]);
-  const N = (i) => {
+  const S = (i) => {
     let n = i;
-    if (h && (n = n.toUpperCase()), a === "number" && (n = n.replace(/[^\d]/g, "")), I)
+    if (h && (n = n.toUpperCase()), a === "number" && (n = n.replace(/[^\d]/g, "")), x)
       try {
-        let m = I;
-        I.startsWith("^") || (m = `^${I}$`);
+        let m = x;
+        x.startsWith("^") || (m = `^${x}$`);
         const d = new RegExp(m);
-        n = n.split("").filter((P) => d.test(P)).join("");
+        n = n.split("").filter((y) => d.test(y)).join("");
       } catch (m) {
-        console.error("Invalid pattern provided to InputOTP:", I, m);
+        console.error("Invalid pattern provided to InputOTP:", x, m);
       }
     return n;
   };
   return {
-    uuid: O,
+    uuid: T,
     inputRef: s,
-    containerRef: V,
-    name: k,
-    disabled: x,
-    isInvalid: D,
-    isRequired: W,
-    description: _,
+    containerRef: B,
+    name: D,
+    disabled: I,
+    isInvalid: _,
+    isRequired: V,
+    description: k,
     maxLength: e,
     intent: w,
     currentValue: u,
     activeIndex: f,
-    slots: j,
+    slots: M,
     contextValue: {
       value: u,
       maxLength: e,
-      slots: j,
+      slots: M,
       activeIndex: f,
       intent: w,
-      disabled: x,
+      disabled: I,
       placeholder: C,
       type: a
     },
     handleChange: (i) => {
-      if (x) return;
-      const n = i.target.value, d = N(n).slice(0, e);
-      r && r(d), t === void 0 && R(d);
-      const P = Math.min(d.length, e - 1);
-      s.current && s.current.setSelectionRange(P, P);
+      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);
     },
     handleKeyDown: (i) => {
-      if (!x) {
-        if (g.length > 0 && g.includes(i.key)) {
+      if (!I) {
+        if (P.length > 0 && P.includes(i.key)) {
           i.preventDefault();
           return;
         }
@@ -169,7 +171,7 @@ const ye = "Backspace", Pe = "ArrowLeft", ge = "ArrowUp", Oe = "ArrowRight", Te
             const n = u.length;
             if (n > 0) {
               const m = u.slice(0, n - 1);
-              r && r(m), t === void 0 && R(m);
+              r && r(m), t === void 0 && N(m);
               const d = Math.max(0, m.length);
               s.current && s.current.setSelectionRange(d, d);
             }
@@ -178,11 +180,11 @@ const ye = "Backspace", Pe = "ArrowLeft", ge = "ArrowUp", Oe = "ArrowRight", Te
           case Oe:
             i.preventDefault();
             break;
-          case ge:
           case Te:
+          case we:
             i.preventDefault();
             break;
-          case we:
+          case Ne:
           case "E":
             a === "number" && i.preventDefault();
             break;
@@ -190,41 +192,41 @@ const ye = "Backspace", Pe = "ArrowLeft", ge = "ArrowUp", Oe = "ArrowRight", Te
       }
     },
     handlePaste: (i) => {
-      if (x) return;
+      if (I) return;
       i.preventDefault();
       const n = i.clipboardData.getData("text");
       if (!n) return;
-      const d = N(n).slice(0, e);
-      r && r(d), t === void 0 && R(d);
-      const P = Math.min(d.length, e - 1);
-      s.current && s.current.setSelectionRange(P, P);
+      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);
     },
     handleFocus: () => {
-      if (F(!0), s.current) {
+      if (K(!0), s.current) {
         const i = Math.min(u.length, e - 1);
         s.current.setSelectionRange(i, i);
       }
     },
     handleBlur: () => {
-      F(!1);
+      K(!1);
     },
     handleClick: () => {
       s.current && s.current.focus();
     },
-    labelId: Y
+    labelId: W
   };
-}, ie = (e) => {
+}, oe = (e) => {
   let a = 0;
-  return ne.forEach(e, (t) => {
-    if (re(t)) {
+  return re.forEach(e, (t) => {
+    if (se(t)) {
       const o = t.props;
-      t.type === E || t.type?.displayName === "InputOTP.Slot" ? a++ : o.children && (a += ie(o.children));
+      t.type === E || t.type?.displayName === "InputOTP.Slot" ? a++ : o.children && (a += oe(o.children));
     }
   }), a;
-}, oe = (e, a = 0) => {
+}, ce = (e, a = 0) => {
   let t = a;
-  return [ne.map(e, (r) => {
-    if (re(r)) {
+  return [re.map(e, (r) => {
+    if (se(r)) {
       const l = r.props;
       if (r.type === E || r.type?.displayName === "InputOTP.Slot") {
         const p = typeof l.index == "number" ? l.index : t++;
@@ -233,7 +235,7 @@ const ye = "Backspace", Pe = "ArrowLeft", ge = "ArrowUp", Oe = "ArrowRight", Te
           index: p
         });
       } else if (l.children) {
-        const [p, v] = oe(l.children, t);
+        const [p, v] = ce(l.children, t);
         return t = v, ee(r, {
           ...r.props,
           children: p
@@ -242,7 +244,7 @@ const ye = "Backspace", Pe = "ArrowLeft", ge = "ArrowUp", Oe = "ArrowRight", Te
     }
     return r;
   }), t];
-}, ce = ({
+}, le = ({
   maxLength: e,
   type: a = "text",
   value: t,
@@ -252,44 +254,44 @@ const ye = "Backspace", Pe = "ArrowLeft", ge = "ArrowUp", Oe = "ArrowRight", Te
   disabled: p = !1,
   autoFocus: v = !1,
   autoComplete: h = "off",
-  forceUppercase: g = !1,
-  filterKeys: I = ["-", "."],
+  forceUppercase: P = !1,
+  filterKeys: x = ["-", "."],
   pattern: C,
-  inputMode: z,
-  placeholder: B = "",
+  inputMode: G,
+  placeholder: z = "",
   name: s,
-  className: V,
+  className: B,
   children: c,
-  ...O
+  ...T
 }) => {
-  const k = H(() => {
+  const D = H(() => {
     if (e !== void 0)
       return e;
-    const A = ie(c);
+    const A = oe(c);
     return A > 0 ? A : 4;
-  }, [e, c]), x = H(() => {
-    const [A] = oe(c);
+  }, [e, c]), I = H(() => {
+    const [A] = ce(c);
     return A;
   }, [c]), {
-    uuid: D,
-    inputRef: W,
-    containerRef: Y,
-    name: _,
-    disabled: T,
-    isInvalid: q,
+    uuid: _,
+    inputRef: V,
+    containerRef: W,
+    name: k,
+    disabled: O,
+    isInvalid: Y,
     isRequired: w,
-    description: y,
-    currentValue: K,
-    contextValue: G,
-    handleChange: R,
-    handleKeyDown: S,
-    handlePaste: F,
+    description: g,
+    currentValue: F,
+    contextValue: q,
+    handleChange: N,
+    handleKeyDown: R,
+    handlePaste: K,
     handleFocus: u,
     handleBlur: f,
-    handleClick: j,
-    labelId: N
+    handleClick: M,
+    labelId: S
   } = Re({
-    maxLength: k,
+    maxLength: D,
     type: a,
     value: t,
     defaultValue: o,
@@ -297,94 +299,94 @@ const ye = "Backspace", Pe = "ArrowLeft", ge = "ArrowUp", Oe = "ArrowRight", Te
     isValid: l,
     disabledProp: p,
     autoFocus: v,
-    forceUppercase: g,
-    filterKeys: I,
+    forceUppercase: P,
+    filterKeys: x,
     pattern: C,
-    placeholder: B,
+    placeholder: z,
     nameProp: s
-  }), $ = "aria-label" in O ? O["aria-label"] : void 0, { "aria-label": le, ...X } = O, M = N ? { "aria-labelledby": N } : $ ? { "aria-label": $ } : {};
-  return /* @__PURE__ */ b(se.Provider, { value: G, children: /* @__PURE__ */ te(
+  }), 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(
     "div",
     {
-      ref: Y,
+      ref: W,
       "data-spark-component": "input-otp",
       role: "group",
-      ...M,
-      ...y ? { "aria-describedby": y } : {},
-      className: pe(
+      ...j,
+      ...g ? { "aria-describedby": g } : {},
+      className: fe(
         "gap-md relative inline-flex items-center",
-        T ? "cursor-not-allowed" : "cursor-text",
-        V
+        O ? "cursor-not-allowed" : "cursor-text",
+        B
       ),
-      onClick: j,
-      ...X,
+      onClick: M,
+      ...Q,
       children: [
-        _ && /* @__PURE__ */ b(
+        k && /* @__PURE__ */ b(
           "input",
           {
             type: "hidden",
-            name: _,
-            value: K,
+            name: k,
+            value: F,
             required: w,
             "aria-required": w,
-            "aria-invalid": q,
-            ...M
+            "aria-invalid": Y,
+            ...j
           }
         ),
         /* @__PURE__ */ b(
           "input",
           {
-            ref: W,
-            id: D,
+            ref: V,
+            id: _,
             type: a === "password" ? "password" : "text",
-            value: K,
-            maxLength: k,
+            value: F,
+            maxLength: D,
             autoFocus: v,
             autoComplete: h,
-            disabled: T,
+            disabled: O,
             pattern: C,
-            inputMode: z,
-            ...M,
-            ...y ? { "aria-describedby": y } : {},
-            "aria-invalid": q,
-            onChange: R,
-            onKeyDown: S,
-            onPaste: F,
+            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",
             tabIndex: 0
           }
         ),
-        x
+        I
       ]
     }
   ) });
 };
-ce.displayName = "InputOTP";
-const J = ({ children: e, className: a, ...t }) => /* @__PURE__ */ b("div", { className: `inline-flex [&>*:not(:first-child)]:-ml-px ${a || ""}`, ...t, children: e });
-J.displayName = "InputOTP.Group";
-const Q = ({ className: e, ...a }) => /* @__PURE__ */ b(
+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(
   "div",
   {
     className: `text-on-surface flex items-center justify-center ${e || ""}`,
     ...a,
-    children: /* @__PURE__ */ b(Ie, { size: "md", children: /* @__PURE__ */ b(xe, {}) })
+    children: /* @__PURE__ */ b(Ie, { size: "md", children: /* @__PURE__ */ b(he, {}) })
   }
 );
-Q.displayName = "InputOTP.Separator";
-const Se = Object.assign(ce, {
-  Group: J,
+J.displayName = "InputOTP.Separator";
+const Se = Object.assign(le, {
+  Group: X,
   Slot: E,
-  Separator: Q
+  Separator: J
 });
 Se.displayName = "InputOTP";
-J.displayName = "InputOTP.Group";
+X.displayName = "InputOTP.Group";
 E.displayName = "InputOTP.Slot";
-Q.displayName = "InputOTP.Separator";
+J.displayName = "InputOTP.Separator";
 export {
   Se as InputOTP,
-  ae as inputOTPSlotStyles,
-  Fe as inputOTPStyles
+  ie as inputOTPSlotStyles,
+  Ke as inputOTPStyles
 };
 //# sourceMappingURL=index.mjs.map