@spark-ui/components 13.1.2 → 13.1.4

package/dist/input-otp/index.mjs

@@ -1,15 +1,33 @@
-import { jsxs as te, jsx as b } from "react/jsx-runtime";
-import { c as pe, a as fe } from "../index-BmAFn37q.mjs";
-import { createContext as me, useContext as be, useId as ve, useRef as Z, useState as L, useEffect as $, useMemo as H, Children as ne, isValidElement as re, cloneElement as ee } from "react";
-import { useFormFieldControl as Ie } from "../form-field/index.mjs";
-import { I as xe } from "../Icon-D1RueiPY.mjs";
-import { Minus as he } from "@spark-ui/icons/Minus";
-const se = me(null), ye = () => {
-  const e = be(se);
-  if (!e)
+import {
+  Icon
+} from "../chunk-UMUMFMFB.mjs";
+import "../chunk-KEGAAGJW.mjs";
+import "../chunk-6QCEPQ3U.mjs";
+
+// src/input-otp/InputOTP.tsx
+import { cx } from "class-variance-authority";
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  useMemo as useMemo2
+} from "react";
+
+// src/input-otp/InputOTPContext.tsx
+import { createContext, useContext } from "react";
+var InputOTPContext = createContext(null);
+var useInputOTPContext = () => {
+  const context = useContext(InputOTPContext);
+  if (!context) {
     throw new Error("InputOTP components must be used within InputOTP");
-  return e;
-}, ae = pe(
+  }
+  return context;
+};
+
+// src/input-otp/InputOTP.styles.ts
+import { cva } from "class-variance-authority";
+var inputOTPContainerStyles = cva(["relative", "inline-flex", "items-center", "gap-sm"]);
+var inputOTPSlotStyles = cva(
   [
     // Base slot styles
     "relative",
@@ -50,341 +68,492 @@ const se = me(null), ye = () => {
       intent: "neutral"
     }
   }
-), Ke = ae, E = ({ index: e, className: a, ...t }) => {
-  const o = ye(), r = e ?? 0, l = o.slots[r];
-  if (!l)
+);
+var inputOTPStyles = inputOTPSlotStyles;
+
+// src/input-otp/InputOTPSlot.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var InputOTPSlot = ({ index: indexProp, className, ...props }) => {
+  const context = useInputOTPContext();
+  const index = indexProp ?? 0;
+  const slot = context.slots[index];
+  if (!slot) {
     return null;
-  const { char: p, isActive: v, hasFakeCaret: h } = l, I = !p && !h && o.placeholder;
-  return /* @__PURE__ */ te(
+  }
+  const { char, isActive, hasFakeCaret } = slot;
+  const isEmpty = !char;
+  const isPlaceholder = isEmpty && !hasFakeCaret && context.placeholder;
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: ae({
-        intent: o.intent,
-        className: a
+      className: inputOTPSlotStyles({
+        intent: context.intent,
+        className
       }),
-      "data-active": v,
-      "data-disabled": o.disabled,
-      "data-valid": o.intent !== "error",
-      ...t,
+      "data-active": isActive,
+      "data-disabled": context.disabled,
+      "data-valid": context.intent !== "error",
+      ...props,
       children: [
-        /* @__PURE__ */ b("span", { className: I ? "text-on-surface/dim-3" : "", children: o.type === "password" && p ? "•" : p || (!h && o.placeholder ? o.placeholder : "") }),
-        h && /* @__PURE__ */ b(
+        /* @__PURE__ */ jsx("span", { className: isPlaceholder ? "text-on-surface/dim-3" : "", children: context.type === "password" && char ? "\u2022" : char || (!hasFakeCaret && context.placeholder ? context.placeholder : "") }),
+        hasFakeCaret && /* @__PURE__ */ jsx(
           "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__ */ jsx("span", { className: "bg-on-surface animate-standalone-caret-blink h-sz-24 w-px" })
           }
         )
       ]
     }
   );
 };
-E.displayName = "InputOTP.Slot";
-const Pe = "Backspace", ge = "ArrowLeft", Te = "ArrowUp", Oe = "ArrowRight", we = "ArrowDown", Ne = "e", Re = ({
-  maxLength: e,
-  type: a,
-  value: t,
-  defaultValue: o,
-  onValueChange: r,
-  isValid: l,
-  disabledProp: p,
-  autoFocus: v,
-  forceUppercase: h,
-  filterKeys: g,
-  pattern: I,
-  placeholder: C,
-  nameProp: G
+InputOTPSlot.displayName = "InputOTP.Slot";
+
+// src/input-otp/useInputOTP.ts
+import { useFormFieldControl } from "@spark-ui/components/form-field";
+import {
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+var BACKSPACE_KEY = "Backspace";
+var LEFT_ARROW_KEY = "ArrowLeft";
+var UP_ARROW_KEY = "ArrowUp";
+var RIGHT_ARROW_KEY = "ArrowRight";
+var DOWN_ARROW_KEY = "ArrowDown";
+var E_KEY = "e";
+var useInputOTP = ({
+  maxLength,
+  type,
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  isValid,
+  disabledProp,
+  autoFocus,
+  forceUppercase,
+  filterKeys,
+  pattern,
+  placeholder,
+  nameProp
 }) => {
-  const z = ve(), s = Z(null), B = Z(null), c = Ie(), T = c.id ?? z, D = G ?? c.name, x = 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", y = t !== void 0 ? t : o, F = h ? y.toUpperCase() : y, [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] && !x && R
+  const uuid = useId();
+  const inputRef = useRef(null);
+  const containerRef = useRef(null);
+  const field = useFormFieldControl();
+  const id = field.id ?? uuid;
+  const name = nameProp ?? field.name;
+  const disabled = field.disabled ?? disabledProp;
+  const isInvalid = field.isInvalid ?? !isValid;
+  const isRequired = field.isRequired ?? false;
+  const labelId = field.labelId;
+  const description = field.description;
+  const fieldState = field.state;
+  const getIntent = () => {
+    if (["success", "alert", "error"].includes(fieldState ?? "")) {
+      return fieldState;
+    }
+    if (isInvalid) {
+      return "error";
+    }
+    return "neutral";
+  };
+  const intent = getIntent();
+  const initialValue = controlledValue !== void 0 ? controlledValue : defaultValue;
+  const processedValue = forceUppercase ? initialValue.toUpperCase() : initialValue;
+  const [internalValue, setInternalValue] = useState(processedValue);
+  const [isFocused, setIsFocused] = useState(false);
+  const currentValue = controlledValue !== void 0 ? controlledValue : internalValue;
+  const activeIndex = Math.min(currentValue.length, maxLength - 1);
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.setSelectionRange(activeIndex, activeIndex);
+    }
+  }, [activeIndex, currentValue.length, maxLength]);
+  const slots = useMemo(
+    () => Array.from({ length: maxLength }, (_, i) => ({
+      char: currentValue[i] || "",
+      isActive: i === activeIndex && isFocused,
+      hasFakeCaret: i === activeIndex && !currentValue[i] && !disabled && isFocused
     })),
-    [e, u, f, R, x]
+    [maxLength, currentValue, activeIndex, isFocused, disabled]
   );
-  $(() => {
-    s.current && t !== void 0 && (s.current.value = t);
-  }, [t]), $(() => {
-    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, "")), I)
+  useEffect(() => {
+    if (inputRef.current && controlledValue !== void 0) {
+      inputRef.current.value = controlledValue;
+    }
+  }, [controlledValue]);
+  useEffect(() => {
+    if (autoFocus && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [autoFocus]);
+  const processInputValue = (inputValue) => {
+    let processed = inputValue;
+    if (forceUppercase) {
+      processed = processed.toUpperCase();
+    }
+    if (type === "number") {
+      processed = processed.replace(/[^\d]/g, "");
+    }
+    if (pattern) {
       try {
-        let m = I;
-        I.startsWith("^") || (m = `^${I}$`);
-        const d = new RegExp(m);
-        n = n.split("").filter((P) => d.test(P)).join("");
-      } catch (m) {
-        console.error("Invalid pattern provided to InputOTP:", I, m);
+        let regexPattern = pattern;
+        if (!pattern.startsWith("^")) {
+          regexPattern = `^${pattern}$`;
+        }
+        const regex = new RegExp(regexPattern);
+        processed = processed.split("").filter((currChar) => {
+          return regex.test(currChar);
+        }).join("");
+      } catch (error) {
+        console.error("Invalid pattern provided to InputOTP:", pattern, error);
       }
-    return n;
+    }
+    return processed;
   };
-  return {
-    uuid: T,
-    inputRef: s,
-    containerRef: B,
-    name: D,
-    disabled: x,
-    isInvalid: _,
-    isRequired: V,
-    description: k,
-    maxLength: e,
-    intent: w,
-    currentValue: u,
-    activeIndex: f,
-    slots: M,
-    contextValue: {
-      value: u,
-      maxLength: e,
-      slots: M,
-      activeIndex: f,
-      intent: w,
-      disabled: x,
-      placeholder: C,
-      type: a
-    },
-    handleChange: (i) => {
-      if (x) return;
-      const n = i.target.value, d = S(n).slice(0, e);
-      r && r(d), t === void 0 && N(d);
-      const P = Math.min(d.length, e - 1);
-      s.current && s.current.setSelectionRange(P, P);
-    },
-    handleKeyDown: (i) => {
-      if (!x) {
-        if (g.length > 0 && g.includes(i.key)) {
-          i.preventDefault();
-          return;
+  const handleChange = (e) => {
+    if (disabled) return;
+    const inputValue = e.target.value;
+    const processedValue2 = processInputValue(inputValue);
+    const newValue = processedValue2.slice(0, maxLength);
+    if (onValueChange) {
+      onValueChange(newValue);
+    }
+    if (controlledValue === void 0) {
+      setInternalValue(newValue);
+    }
+    const newActiveIndex = Math.min(newValue.length, maxLength - 1);
+    if (inputRef.current) {
+      inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    if (filterKeys.length > 0 && filterKeys.includes(e.key)) {
+      e.preventDefault();
+      return;
+    }
+    switch (e.key) {
+      case BACKSPACE_KEY:
+        e.preventDefault();
+        const currentLength = currentValue.length;
+        if (currentLength > 0) {
+          const newValue = currentValue.slice(0, currentLength - 1);
+          if (onValueChange) {
+            onValueChange(newValue);
+          }
+          if (controlledValue === void 0) {
+            setInternalValue(newValue);
+          }
+          const newActiveIndex = Math.max(0, newValue.length);
+          if (inputRef.current) {
+            inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex);
+          }
         }
-        switch (i.key) {
-          case Pe:
-            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 ge:
-          case Oe:
-            i.preventDefault();
-            break;
-          case Te:
-          case we:
-            i.preventDefault();
-            break;
-          case Ne:
-          case "E":
-            a === "number" && i.preventDefault();
-            break;
+        break;
+      case LEFT_ARROW_KEY:
+      case RIGHT_ARROW_KEY:
+        e.preventDefault();
+        break;
+      case UP_ARROW_KEY:
+      case DOWN_ARROW_KEY:
+        e.preventDefault();
+        break;
+      case E_KEY:
+      case "E":
+        if (type === "number") {
+          e.preventDefault();
         }
-      }
-    },
-    handlePaste: (i) => {
-      if (x) 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 P = Math.min(d.length, e - 1);
-      s.current && s.current.setSelectionRange(P, P);
-    },
-    handleFocus: () => {
-      if (K(!0), s.current) {
-        const i = Math.min(u.length, e - 1);
-        s.current.setSelectionRange(i, i);
-      }
-    },
-    handleBlur: () => {
-      K(!1);
-    },
-    handleClick: () => {
-      s.current && s.current.focus();
-    },
-    labelId: W
+        break;
+      default:
+        break;
+    }
+  };
+  const handlePaste = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    const pastedText = e.clipboardData.getData("text");
+    if (!pastedText) return;
+    const processedText = processInputValue(pastedText);
+    const newValue = processedText.slice(0, maxLength);
+    if (onValueChange) {
+      onValueChange(newValue);
+    }
+    if (controlledValue === void 0) {
+      setInternalValue(newValue);
+    }
+    const newActiveIndex = Math.min(newValue.length, maxLength - 1);
+    if (inputRef.current) {
+      inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex);
+    }
+  };
+  const handleFocus = () => {
+    setIsFocused(true);
+    if (inputRef.current) {
+      const cursorPosition = Math.min(currentValue.length, maxLength - 1);
+      inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
+    }
   };
-}, ie = (e) => {
-  let a = 0;
-  return ne.forEach(e, (t) => {
-    if (re(t)) {
-      const o = t.props;
-      t.type === E || t.type?.displayName === "InputOTP.Slot" ? a++ : o.children && (a += ie(o.children));
+  const handleBlur = () => {
+    setIsFocused(false);
+  };
+  const handleClick = () => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+  const contextValue = {
+    value: currentValue,
+    maxLength,
+    slots,
+    activeIndex,
+    intent,
+    disabled,
+    placeholder,
+    type
+  };
+  const returnValue = {
+    uuid: id,
+    inputRef,
+    containerRef,
+    name,
+    disabled,
+    isInvalid,
+    isRequired,
+    description,
+    maxLength,
+    intent,
+    currentValue,
+    activeIndex,
+    slots,
+    contextValue,
+    handleChange,
+    handleKeyDown,
+    handlePaste,
+    handleFocus,
+    handleBlur,
+    handleClick,
+    labelId
+  };
+  return returnValue;
+};
+
+// src/input-otp/InputOTP.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var countSlots = (children) => {
+  let count = 0;
+  Children.forEach(children, (child) => {
+    if (isValidElement(child)) {
+      const props = child.props;
+      if (child.type === InputOTPSlot || child.type?.displayName === "InputOTP.Slot") {
+        count++;
+      } else if (props.children) {
+        count += countSlots(props.children);
+      }
     }
-  }), a;
-}, oe = (e, a = 0) => {
-  let t = a;
-  return [ne.map(e, (r) => {
-    if (re(r)) {
-      const l = r.props;
-      if (r.type === E || r.type?.displayName === "InputOTP.Slot") {
-        const p = typeof l.index == "number" ? l.index : t++;
-        return ee(r, {
-          ...l,
-          index: p
+  });
+  return count;
+};
+var assignSlotIndexes = (children, startIndex = 0) => {
+  let currentIndex = startIndex;
+  const processed = Children.map(children, (child) => {
+    if (isValidElement(child)) {
+      const props = child.props;
+      if (child.type === InputOTPSlot || child.type?.displayName === "InputOTP.Slot") {
+        const slotIndex = typeof props.index === "number" ? props.index : currentIndex++;
+        return cloneElement(child, {
+          ...props,
+          index: slotIndex
         });
-      } else if (l.children) {
-        const [p, v] = oe(l.children, t);
-        return t = v, ee(r, {
-          ...r.props,
-          children: p
+      } else if (props.children) {
+        const [processedChildren, nextIndex] = assignSlotIndexes(props.children, currentIndex);
+        currentIndex = nextIndex;
+        return cloneElement(child, {
+          ...child.props,
+          children: processedChildren
         });
       }
     }
-    return r;
-  }), t];
-}, ce = ({
-  maxLength: e,
-  type: a = "text",
-  value: t,
-  defaultValue: o = "",
-  onValueChange: r,
-  isValid: l = !0,
-  disabled: p = !1,
-  autoFocus: v = !1,
-  autoComplete: h = "off",
-  forceUppercase: g = !1,
-  filterKeys: I = ["-", "."],
-  pattern: C,
-  inputMode: G,
-  placeholder: z = "",
-  name: s,
-  className: B,
-  children: c,
-  ...T
+    return child;
+  });
+  return [processed, currentIndex];
+};
+var InputOTP = ({
+  maxLength: maxLengthProp,
+  type = "text",
+  value: controlledValue,
+  defaultValue = "",
+  onValueChange,
+  isValid = true,
+  disabled: disabledProp = false,
+  autoFocus = false,
+  autoComplete = "off",
+  forceUppercase = false,
+  filterKeys = ["-", "."],
+  pattern,
+  inputMode,
+  placeholder = "",
+  name: nameProp,
+  className,
+  children,
+  ...others
 }) => {
-  const D = H(() => {
-    if (e !== void 0)
-      return e;
-    const A = ie(c);
-    return A > 0 ? A : 4;
-  }, [e, c]), x = H(() => {
-    const [A] = oe(c);
-    return A;
-  }, [c]), {
-    uuid: _,
-    inputRef: V,
-    containerRef: W,
-    name: k,
-    disabled: O,
-    isInvalid: Y,
-    isRequired: w,
-    description: y,
-    currentValue: F,
-    contextValue: q,
-    handleChange: N,
-    handleKeyDown: R,
-    handlePaste: K,
-    handleFocus: u,
-    handleBlur: f,
-    handleClick: M,
-    labelId: S
-  } = Re({
-    maxLength: D,
-    type: a,
-    value: t,
-    defaultValue: o,
-    onValueChange: r,
-    isValid: l,
-    disabledProp: p,
-    autoFocus: v,
-    forceUppercase: g,
-    filterKeys: I,
-    pattern: C,
-    placeholder: z,
-    nameProp: s
-  }), U = "aria-label" in T ? T["aria-label"] : void 0, { "aria-label": le, ...Q } = T, j = S ? { "aria-labelledby": S } : U ? { "aria-label": U } : {};
-  return /* @__PURE__ */ b(se.Provider, { value: q, children: /* @__PURE__ */ te(
+  const maxLength = useMemo2(() => {
+    if (maxLengthProp !== void 0) {
+      return maxLengthProp;
+    }
+    const detectedLength = countSlots(children);
+    const DEFAULT_MAX_LENGTH = 4;
+    return detectedLength > 0 ? detectedLength : DEFAULT_MAX_LENGTH;
+  }, [maxLengthProp, children]);
+  const processedChildren = useMemo2(() => {
+    const [processed] = assignSlotIndexes(children);
+    return processed;
+  }, [children]);
+  const {
+    uuid,
+    inputRef,
+    containerRef,
+    name,
+    disabled,
+    isInvalid,
+    isRequired,
+    description,
+    currentValue,
+    contextValue,
+    handleChange,
+    handleKeyDown,
+    handlePaste,
+    handleFocus,
+    handleBlur,
+    handleClick,
+    labelId
+  } = useInputOTP({
+    maxLength,
+    type,
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+    isValid,
+    disabledProp,
+    autoFocus,
+    forceUppercase,
+    filterKeys,
+    pattern,
+    placeholder,
+    nameProp
+  });
+  const ariaLabel = "aria-label" in others ? others["aria-label"] : void 0;
+  const { "aria-label": _, ...restOthers } = others;
+  const getAccessibleNameProps = () => {
+    if (labelId) {
+      return { "aria-labelledby": labelId };
+    }
+    if (ariaLabel) {
+      return { "aria-label": ariaLabel };
+    }
+    return {};
+  };
+  const accessibleNameProps = getAccessibleNameProps();
+  return /* @__PURE__ */ jsx2(InputOTPContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs2(
     "div",
     {
-      ref: W,
+      ref: containerRef,
       "data-spark-component": "input-otp",
       role: "group",
-      ...j,
-      ...y ? { "aria-describedby": y } : {},
-      className: fe(
+      ...accessibleNameProps,
+      ...description ? { "aria-describedby": description } : {},
+      className: cx(
         "gap-md relative inline-flex items-center",
-        O ? "cursor-not-allowed" : "cursor-text",
-        B
+        disabled ? "cursor-not-allowed" : "cursor-text",
+        className
       ),
-      onClick: M,
-      ...Q,
+      onClick: handleClick,
+      ...restOthers,
       children: [
-        k && /* @__PURE__ */ b(
+        name && /* @__PURE__ */ jsx2(
           "input",
           {
             type: "hidden",
-            name: k,
-            value: F,
-            required: w,
-            "aria-required": w,
-            "aria-invalid": Y,
-            ...j
+            name,
+            value: currentValue,
+            required: isRequired,
+            "aria-required": isRequired,
+            "aria-invalid": isInvalid,
+            ...accessibleNameProps
           }
         ),
-        /* @__PURE__ */ b(
+        /* @__PURE__ */ jsx2(
           "input",
           {
-            ref: V,
-            id: _,
-            type: a === "password" ? "password" : "text",
-            value: F,
-            maxLength: D,
-            autoFocus: v,
-            autoComplete: h,
-            disabled: O,
-            pattern: C,
-            inputMode: G,
-            ...j,
-            ...y ? { "aria-describedby": y } : {},
-            "aria-invalid": Y,
-            onChange: N,
-            onKeyDown: R,
-            onPaste: K,
-            onFocus: u,
-            onBlur: f,
+            ref: inputRef,
+            id: uuid,
+            type: type === "password" ? "password" : "text",
+            value: currentValue,
+            maxLength,
+            autoFocus,
+            autoComplete,
+            disabled,
+            pattern,
+            inputMode,
+            ...accessibleNameProps,
+            ...description ? { "aria-describedby": description } : {},
+            "aria-invalid": isInvalid,
+            onChange: handleChange,
+            onKeyDown: handleKeyDown,
+            onPaste: handlePaste,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
             className: "bg-success z-raised absolute inset-0 m-0 p-0 opacity-0 disabled:cursor-not-allowed",
             tabIndex: 0
           }
         ),
-        x
+        processedChildren
       ]
     }
   ) });
 };
-ce.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(xe, { size: "md", children: /* @__PURE__ */ b(he, {}) })
-  }
-);
-J.displayName = "InputOTP.Separator";
-const Se = Object.assign(ce, {
-  Group: X,
-  Slot: E,
-  Separator: J
+InputOTP.displayName = "InputOTP";
+
+// src/input-otp/InputOTPGroup.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var InputOTPGroup = ({ children, className, ...props }) => {
+  return /* @__PURE__ */ jsx3("div", { className: `inline-flex [&>*:not(:first-child)]:-ml-px ${className || ""}`, ...props, children });
+};
+InputOTPGroup.displayName = "InputOTP.Group";
+
+// src/input-otp/InputOTPSeparator.tsx
+import { Minus } from "@spark-ui/icons/Minus";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var InputOTPSeparator = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: `text-on-surface flex items-center justify-center ${className || ""}`,
+      ...props,
+      children: /* @__PURE__ */ jsx4(Icon, { size: "md", children: /* @__PURE__ */ jsx4(Minus, {}) })
+    }
+  );
+};
+InputOTPSeparator.displayName = "InputOTP.Separator";
+
+// src/input-otp/index.ts
+var InputOTP2 = Object.assign(InputOTP, {
+  Group: InputOTPGroup,
+  Slot: InputOTPSlot,
+  Separator: InputOTPSeparator
 });
-Se.displayName = "InputOTP";
-X.displayName = "InputOTP.Group";
-E.displayName = "InputOTP.Slot";
-J.displayName = "InputOTP.Separator";
+InputOTP2.displayName = "InputOTP";
+InputOTPGroup.displayName = "InputOTP.Group";
+InputOTPSlot.displayName = "InputOTP.Slot";
+InputOTPSeparator.displayName = "InputOTP.Separator";
 export {
-  Se as InputOTP,
-  ae as inputOTPSlotStyles,
-  Ke as inputOTPStyles
+  InputOTP2 as InputOTP,
+  inputOTPSlotStyles,
+  inputOTPStyles
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map