@spark-ui/components 17.2.3 → 17.2.4-beta.0

package/dist/input-otp/index.mjs

@@ -1,411 +1,348 @@
-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;
+import { cva as e, cx as t } from "class-variance-authority";
+import { Children as n, cloneElement as r, createContext as i, isValidElement as a, useContext as o, useEffect as s, useId as c, useMemo as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { useFormFieldControl as m } from "@spark-ui/components/form-field";
+//#region src/input-otp/InputOTPContext.tsx
+var h = i(null), g = () => {
+	let e = o(h);
+	if (!e) throw Error("InputOTP components must be used within InputOTP");
+	return e;
 };
-ae(["relative", "inline-flex", "items-center", "gap-sm"]);
-const le = ae(
-  [
-    // Base slot styles
-    "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]: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",
-    // 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: {
-      /**
-       * Color scheme of the slot
-       */
-      intent: {
-        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"]
-      }
-    },
-    defaultVariants: {
-      intent: "neutral"
-    }
-  }
-), 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: g, hasFakeCaret: v } = d, O = !p, T = O && !v && i.placeholder, h = r === i.activeIndex;
-  return /* @__PURE__ */ se(
-    "div",
-    {
-      className: le({
-        intent: i.intent,
-        className: o
-      }),
-      "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__ */ 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__ */ I("span", { className: "bg-on-surface animate-standalone-caret-blink h-sz-24 w-sz-2" })
-          }
-        )
-      ]
-    }
-  );
+e([
+	"relative",
+	"inline-flex",
+	"items-center",
+	"gap-sm"
+]);
+var _ = e([
+	"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",
+	"data-[active=true]:ring-1",
+	"data-[active=true]:ring-inset",
+	"data-[active=true]:ring-l-2",
+	"data-[active=true]:border-focus",
+	"data-[active=true]:z-raised ring-focus",
+	"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-[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: { intent: {
+		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"]
+	} },
+	defaultVariants: { intent: "neutral" }
+}), v = _, y = ({ index: e, className: t, ...n }) => {
+	let r = g(), i = e ?? 0, a = r.slots[i];
+	if (!a) return null;
+	let { char: o, isActive: s, hasFakeCaret: c } = a, l = !o, u = l && !c && r.placeholder, d = i === r.activeIndex;
+	return /* @__PURE__ */ p("div", {
+		className: _({
+			intent: r.intent,
+			className: t
+		}),
+		"data-active": s,
+		"data-disabled": r.disabled,
+		"data-readonly": r.readOnly,
+		"data-filled": !l,
+		"data-focus-target": d,
+		"data-valid": r.intent !== "error",
+		...n,
+		children: [/* @__PURE__ */ f("span", {
+			className: u ? "text-on-surface/dim-3" : "",
+			children: r.type === "password" && o ? "•" : o || (!c && r.placeholder ? r.placeholder : "")
+		}), c && /* @__PURE__ */ f("span", {
+			className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ f("span", { className: "bg-on-surface animate-standalone-caret-blink h-sz-24 w-sz-2" })
+		})]
+	});
 };
-E.displayName = "InputOTP.Slot";
-const Oe = "Backspace", Pe = "ArrowLeft", Te = "ArrowUp", we = "ArrowRight", Ne = "ArrowDown", Re = "e", Se = ({
-  maxLength: e,
-  type: o,
-  value: t,
-  defaultValue: i,
-  onValueChange: r,
-  isValid: d,
-  disabledProp: p,
-  readOnlyProp: g,
-  autoFocus: v,
-  forceUppercase: O,
-  filterKeys: T,
-  pattern: h,
-  placeholder: D,
-  nameProp: V
-}) => {
-  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, l, b, A, f, y]
-  );
-  J(() => {
-    s.current && t !== void 0 && (s.current.value = t);
-  }, [t]), J(() => {
-    v && s.current && s.current.focus();
-  }, [v]);
-  const G = (n) => {
-    let a = n;
-    if (O && (a = a.toUpperCase()), o === "number" && (a = a.replace(/[^\d]/g, "")), h)
-      try {
-        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 a;
-  };
-  return {
-    uuid: w,
-    inputRef: s,
-    containerRef: Y,
-    name: k,
-    disabled: f,
-    readOnly: y,
-    isInvalid: _,
-    isRequired: q,
-    description: K,
-    maxLength: e,
-    intent: R,
-    currentValue: l,
-    activeIndex: b,
-    slots: z,
-    contextValue: {
-      value: l,
-      maxLength: e,
-      slots: z,
-      activeIndex: b,
-      intent: R,
-      disabled: f,
-      readOnly: y,
-      placeholder: D,
-      type: o
-    },
-    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: (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;
-      }
-    },
-    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 (j(!0), s.current) {
-        const n = Math.min(l.length, e - 1);
-        s.current.setSelectionRange(n, n);
-      }
-    },
-    handleBlur: () => {
-      j(!1);
-    },
-    handleClick: () => {
-      s.current && s.current.focus();
-    },
-    labelId: F
-  };
-}, 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));
-    }
-  }), 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 d.index == "number" ? d.index : t++;
-        return re(r, {
-          ...d,
-          index: p
-        });
-      } else if (d.children) {
-        const [p, g] = de(d.children, t);
-        return t = g, re(r, {
-          ...r.props,
-          children: p
-        });
-      }
-    }
-    return r;
-  }), t];
-}, pe = ({
-  maxLength: e,
-  type: o = "text",
-  value: t,
-  defaultValue: i = "",
-  onValueChange: r,
-  isValid: d = !0,
-  disabled: p = !1,
-  readOnly: g = !1,
-  autoFocus: v = !1,
-  autoComplete: O = "off",
-  forceUppercase: T = !1,
-  filterKeys: h = ["-", "."],
-  pattern: D,
-  inputMode: V,
-  placeholder: W = "-",
-  name: s,
-  className: Y,
-  children: c,
-  ...w
-}) => {
-  const k = L(() => {
-    if (e !== void 0)
-      return e;
-    const C = ue(c);
-    return C > 0 ? C : 4;
-  }, [e, c]), f = L(() => {
-    const [C] = de(c);
-    return C;
-  }, [c]), {
-    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: i,
-    onValueChange: r,
-    isValid: d,
-    disabledProp: p,
-    readOnlyProp: g,
-    autoFocus: v,
-    forceUppercase: T,
-    filterKeys: h,
-    pattern: D,
-    placeholder: W,
-    nameProp: s
-  }), 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: q,
-      "data-spark-component": "input-otp",
-      role: "group",
-      ...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: G,
-      ...ee,
-      children: [
-        F && /* @__PURE__ */ I(
-          "input",
-          {
-            type: "hidden",
-            name: F,
-            value: M,
-            required: R,
-            "aria-required": R,
-            "aria-invalid": U,
-            ...B
-          }
-        ),
-        /* @__PURE__ */ I(
-          "input",
-          {
-            ref: _,
-            id: y,
-            type: o === "password" ? "password" : "text",
-            value: M,
-            maxLength: k,
-            autoFocus: v,
-            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
-          }
-        ),
-        f
-      ]
-    }
-  ) });
+y.displayName = "InputOTP.Slot";
+//#endregion
+//#region src/input-otp/useInputOTP.ts
+var b = "Backspace", x = "ArrowLeft", S = "ArrowUp", C = "ArrowRight", w = "ArrowDown", T = "e", E = ({ maxLength: e, type: t, value: n, defaultValue: r, onValueChange: i, isValid: a, disabledProp: o, readOnlyProp: f, autoFocus: p, forceUppercase: h, filterKeys: g, pattern: _, placeholder: v, nameProp: y }) => {
+	let E = c(), D = u(null), O = u(null), k = m(), A = k.id ?? E, j = y ?? k.name, M = k.disabled ?? o, N = k.readOnly ?? f, P = k.isInvalid ?? !a, F = k.isRequired ?? !1, I = k.labelId, L = k.description, R = k.state, z = [
+		"success",
+		"alert",
+		"error"
+	].includes(R ?? "") ? R : P ? "error" : "neutral", B = n === void 0 ? r : n, [V, H] = d(h ? B.toUpperCase() : B), [U, W] = d(!1), G = n === void 0 ? V : n, K = Math.min(G.length, e - 1);
+	s(() => {
+		D.current && D.current.setSelectionRange(K, K);
+	}, [
+		K,
+		G.length,
+		e
+	]);
+	let q = l(() => Array.from({ length: e }, (e, t) => ({
+		char: G[t] || "",
+		isActive: t === K && U,
+		hasFakeCaret: t === K && !G[t] && !M && !N && U
+	})), [
+		e,
+		G,
+		K,
+		U,
+		M,
+		N
+	]);
+	s(() => {
+		D.current && n !== void 0 && (D.current.value = n);
+	}, [n]), s(() => {
+		p && D.current && D.current.focus();
+	}, [p]);
+	let J = (e) => {
+		let n = e;
+		if (h && (n = n.toUpperCase()), t === "number" && (n = n.replace(/[^\d]/g, "")), _) try {
+			let e = _;
+			_.startsWith("^") || (e = `^${_}$`);
+			let t = new RegExp(e);
+			n = n.split("").filter((e) => t.test(e)).join("");
+		} catch (e) {
+			console.error("Invalid pattern provided to InputOTP:", _, e);
+		}
+		return n;
+	};
+	return {
+		uuid: A,
+		inputRef: D,
+		containerRef: O,
+		name: j,
+		disabled: M,
+		readOnly: N,
+		isInvalid: P,
+		isRequired: F,
+		description: L,
+		maxLength: e,
+		intent: z,
+		currentValue: G,
+		activeIndex: K,
+		slots: q,
+		contextValue: {
+			value: G,
+			maxLength: e,
+			slots: q,
+			activeIndex: K,
+			intent: z,
+			disabled: M,
+			readOnly: N,
+			placeholder: v,
+			type: t
+		},
+		handleChange: (t) => {
+			if (M || N) return;
+			let r = t.target.value, a = J(r).slice(0, e);
+			i && i(a), n === void 0 && H(a);
+			let o = Math.min(a.length, e - 1);
+			D.current && D.current.setSelectionRange(o, o);
+		},
+		handleKeyDown: (e) => {
+			if (M || N) return;
+			let r = (e.ctrlKey || e.metaKey) && [
+				"a",
+				"c",
+				"v",
+				"x"
+			].includes(e.key.toLowerCase());
+			if (g.length > 0 && g.includes(e.key) && !r) {
+				e.preventDefault();
+				return;
+			}
+			switch (e.key) {
+				case b:
+					e.preventDefault();
+					let r = G.length;
+					if (r > 0) {
+						let e = G.slice(0, r - 1);
+						i && i(e), n === void 0 && H(e);
+						let t = Math.max(0, e.length);
+						D.current && D.current.setSelectionRange(t, t);
+					}
+					break;
+				case x:
+				case C:
+					e.preventDefault();
+					break;
+				case S:
+				case w:
+					e.preventDefault();
+					break;
+				case T:
+				case "E":
+					t === "number" && e.preventDefault();
+					break;
+				default: break;
+			}
+		},
+		handleCopy: (e) => {
+			M || (e.preventDefault(), G.length > 0 && e.clipboardData.setData("text/plain", G));
+		},
+		handlePaste: (t) => {
+			if (M || N) return;
+			t.preventDefault();
+			let r = t.clipboardData.getData("text");
+			if (!r) return;
+			let a = J(r).slice(0, e);
+			i && i(a), n === void 0 && H(a);
+			let o = Math.min(a.length, e - 1);
+			D.current && D.current.setSelectionRange(o, o);
+		},
+		handleFocus: () => {
+			if (W(!0), D.current) {
+				let t = Math.min(G.length, e - 1);
+				D.current.setSelectionRange(t, t);
+			}
+		},
+		handleBlur: () => {
+			W(!1);
+		},
+		handleClick: () => {
+			D.current && D.current.focus();
+		},
+		labelId: I
+	};
+}, D = (e) => {
+	let t = 0;
+	return n.forEach(e, (e) => {
+		if (a(e)) {
+			let n = e.props;
+			e.type === y || e.type?.displayName === "InputOTP.Slot" ? t++ : n.children && (t += D(n.children));
+		}
+	}), t;
+}, O = (e, t = 0) => {
+	let i = t;
+	return [n.map(e, (e) => {
+		if (a(e)) {
+			let t = e.props;
+			if (e.type === y || e.type?.displayName === "InputOTP.Slot") {
+				let n = typeof t.index == "number" ? t.index : i++;
+				return r(e, {
+					...t,
+					index: n
+				});
+			} else if (t.children) {
+				let [n, a] = O(t.children, i);
+				return i = a, r(e, {
+					...e.props,
+					children: n
+				});
+			}
+		}
+		return e;
+	}), i];
+}, k = ({ maxLength: e, type: n = "text", value: r, defaultValue: i = "", onValueChange: a, isValid: o = !0, disabled: s = !1, readOnly: c = !1, autoFocus: u = !1, autoComplete: d = "off", forceUppercase: m = !1, filterKeys: g = ["-", "."], pattern: _, inputMode: v, placeholder: y = "-", name: b, className: x, children: S, ...C }) => {
+	let w = l(() => {
+		if (e !== void 0) return e;
+		let t = D(S);
+		return t > 0 ? t : 4;
+	}, [e, S]), T = l(() => {
+		let [e] = O(S);
+		return e;
+	}, [S]), { uuid: k, inputRef: A, containerRef: j, name: M, disabled: N, readOnly: P, isInvalid: F, isRequired: I, description: L, currentValue: R, contextValue: z, handleChange: B, handleKeyDown: V, handleCopy: H, handlePaste: U, handleFocus: W, handleBlur: G, handleClick: K, labelId: q } = E({
+		maxLength: w,
+		type: n,
+		value: r,
+		defaultValue: i,
+		onValueChange: a,
+		isValid: o,
+		disabledProp: s,
+		readOnlyProp: c,
+		autoFocus: u,
+		forceUppercase: m,
+		filterKeys: g,
+		pattern: _,
+		placeholder: y,
+		nameProp: b
+	}), J = "aria-label" in C ? C["aria-label"] : void 0, { "aria-label": Y, ...X } = C, Z = q ? { "aria-labelledby": q } : J ? { "aria-label": J } : {};
+	return /* @__PURE__ */ f(h.Provider, {
+		value: z,
+		children: /* @__PURE__ */ p("div", {
+			ref: j,
+			"data-spark-component": "input-otp",
+			role: "group",
+			...Z,
+			...L ? { "aria-describedby": L } : {},
+			className: t("group gap-md relative inline-flex w-fit items-center default:cursor-text", {
+				"cursor-not-allowed": N,
+				"cursor-default": P
+			}, x),
+			onClick: K,
+			...X,
+			children: [
+				M && /* @__PURE__ */ f("input", {
+					type: "hidden",
+					name: M,
+					value: R,
+					required: I,
+					"aria-required": I,
+					"aria-invalid": F,
+					...Z
+				}),
+				/* @__PURE__ */ f("input", {
+					ref: A,
+					id: k,
+					type: n === "password" ? "password" : "text",
+					value: R,
+					maxLength: w,
+					autoFocus: u,
+					autoComplete: d,
+					disabled: N,
+					readOnly: P,
+					pattern: _,
+					inputMode: v,
+					...Z,
+					...L ? { "aria-describedby": L } : {},
+					"aria-invalid": F,
+					onChange: B,
+					onKeyDown: V,
+					onCopy: H,
+					onPaste: U,
+					onFocus: W,
+					onBlur: G,
+					className: "bg-success z-raised absolute inset-0 m-0 p-0 opacity-0 read-only:cursor-default disabled:cursor-not-allowed",
+					tabIndex: 0
+				}),
+				T
+			]
+		})
+	});
 };
-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/dim-3 flex items-center justify-center ${e || ""}`,
-    ...o,
-    children: /* @__PURE__ */ I("div", { className: "h-sz-4 w-sz-8 bg-outline rounded-full" })
-  }
-);
-Z.displayName = "InputOTP.Separator";
-const Ae = Object.assign(pe, {
-  Group: Q,
-  Slot: E,
-  Separator: Z
+k.displayName = "InputOTP";
+//#endregion
+//#region src/input-otp/InputOTPGroup.tsx
+var A = ({ children: e, className: t, ...n }) => /* @__PURE__ */ f("div", {
+	className: `gap-md flex ${t}`,
+	...n,
+	children: e
 });
-Ae.displayName = "InputOTP";
-Q.displayName = "InputOTP.Group";
-E.displayName = "InputOTP.Slot";
-Z.displayName = "InputOTP.Separator";
-export {
-  Ae as InputOTP,
-  le as inputOTPSlotStyles,
-  Fe as inputOTPStyles
-};
-//# sourceMappingURL=index.mjs.map
+A.displayName = "InputOTP.Group";
+//#endregion
+//#region src/input-otp/InputOTPSeparator.tsx
+var j = ({ className: e, ...t }) => /* @__PURE__ */ f("div", {
+	className: `text-on-surface/dim-3 flex items-center justify-center ${e || ""}`,
+	...t,
+	children: /* @__PURE__ */ f("div", { className: "h-sz-4 w-sz-8 bg-outline rounded-full" })
+});
+j.displayName = "InputOTP.Separator";
+//#endregion
+//#region src/input-otp/index.ts
+var M = Object.assign(k, {
+	Group: A,
+	Slot: y,
+	Separator: j
+});
+M.displayName = "InputOTP", A.displayName = "InputOTP.Group", y.displayName = "InputOTP.Slot", j.displayName = "InputOTP.Separator";
+//#endregion
+export { M as InputOTP, _ as inputOTPSlotStyles, v as inputOTPStyles };
+
+//# sourceMappingURL=index.mjs.map