@spark-ui/components 13.1.2 → 13.1.4

package/dist/input-otp/index.js

@@ -1,2 +1,668 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),Z=require("../index-DnaHaH_0.js"),a=require("react"),oe=require("../form-field/index.js"),ce=require("../Icon-Bf0XrmiR.js"),le=require("@spark-ui/icons/Minus"),L=a.createContext(null),ue=()=>{const e=a.useContext(L);if(!e)throw new Error("InputOTP components must be used within InputOTP");return e},H=Z.cva(["relative","border-sm first:rounded-l-lg last:rounded-r-lg","size-sz-44","text-center text-body-1","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"],{variants:{intent:{neutral:["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"}}),de=H,j=({index:e,className:i,...t})=>{const c=ue(),s=e??0,u=c.slots[s];if(!u)return null;const{char:b,isActive:v,hasFakeCaret:y}=u,I=!b&&!y&&c.placeholder;return f.jsxs("div",{className:H({intent:c.intent,className:i}),"data-active":v,"data-disabled":c.disabled,"data-valid":c.intent!=="error",...t,children:[f.jsx("span",{className:I?"text-on-surface/dim-3":"",children:c.type==="password"&&b?"•":b||(!y&&c.placeholder?c.placeholder:"")}),y&&f.jsx("span",{className:"pointer-events-none absolute inset-0 flex items-center justify-center","aria-hidden":"true",children:f.jsx("span",{className:"bg-on-surface animate-standalone-caret-blink h-sz-24 w-px"})})]})};j.displayName="InputOTP.Slot";const pe="Backspace",fe="ArrowLeft",be="ArrowUp",xe="ArrowRight",me="ArrowDown",ve="e",Ie=({maxLength:e,type:i,value:t,defaultValue:c,onValueChange:s,isValid:u,disabledProp:b,autoFocus:v,forceUppercase:y,filterKeys:g,pattern:I,placeholder:C,nameProp:G})=>{const V=a.useId(),r=a.useRef(null),z=a.useRef(null),l=oe.useFormFieldControl(),O=l.id??V,D=G??l.name,h=l.disabled??b,_=l.isInvalid??!u,B=l.isRequired??!1,W=l.labelId,k=l.description,S=l.state,w=["success","alert","error"].includes(S??"")?S:_?"error":"neutral",P=t!==void 0?t:c,M=y?P.toUpperCase():P,[U,R]=a.useState(M),[E,F]=a.useState(!1),d=t!==void 0?t:U,x=Math.min(d.length,e-1);a.useEffect(()=>{r.current&&r.current.setSelectionRange(x,x)},[x,d.length,e]);const q=a.useMemo(()=>Array.from({length:e},(o,n)=>({char:d[n]||"",isActive:n===x&&E,hasFakeCaret:n===x&&!d[n]&&!h&&E})),[e,d,x,E,h]);a.useEffect(()=>{r.current&&t!==void 0&&(r.current.value=t)},[t]),a.useEffect(()=>{v&&r.current&&r.current.focus()},[v]);const N=o=>{let n=o;if(y&&(n=n.toUpperCase()),i==="number"&&(n=n.replace(/[^\d]/g,"")),I)try{let m=I;I.startsWith("^")||(m=`^${I}$`);const p=new RegExp(m);n=n.split("").filter(T=>p.test(T)).join("")}catch(m){console.error("Invalid pattern provided to InputOTP:",I,m)}return n};return{uuid:O,inputRef:r,containerRef:z,name:D,disabled:h,isInvalid:_,isRequired:B,description:k,maxLength:e,intent:w,currentValue:d,activeIndex:x,slots:q,contextValue:{value:d,maxLength:e,slots:q,activeIndex:x,intent:w,disabled:h,placeholder:C,type:i},handleChange:o=>{if(h)return;const n=o.target.value,p=N(n).slice(0,e);s&&s(p),t===void 0&&R(p);const T=Math.min(p.length,e-1);r.current&&r.current.setSelectionRange(T,T)},handleKeyDown:o=>{if(!h){if(g.length>0&&g.includes(o.key)){o.preventDefault();return}switch(o.key){case pe:o.preventDefault();const n=d.length;if(n>0){const m=d.slice(0,n-1);s&&s(m),t===void 0&&R(m);const p=Math.max(0,m.length);r.current&&r.current.setSelectionRange(p,p)}break;case fe:case xe:o.preventDefault();break;case be:case me:o.preventDefault();break;case ve:case"E":i==="number"&&o.preventDefault();break}}},handlePaste:o=>{if(h)return;o.preventDefault();const n=o.clipboardData.getData("text");if(!n)return;const p=N(n).slice(0,e);s&&s(p),t===void 0&&R(p);const T=Math.min(p.length,e-1);r.current&&r.current.setSelectionRange(T,T)},handleFocus:()=>{if(F(!0),r.current){const o=Math.min(d.length,e-1);r.current.setSelectionRange(o,o)}},handleBlur:()=>{F(!1)},handleClick:()=>{r.current&&r.current.focus()},labelId:W}},ee=e=>{let i=0;return a.Children.forEach(e,t=>{if(a.isValidElement(t)){const c=t.props;t.type===j||t.type?.displayName==="InputOTP.Slot"?i++:c.children&&(i+=ee(c.children))}}),i},te=(e,i=0)=>{let t=i;return[a.Children.map(e,s=>{if(a.isValidElement(s)){const u=s.props;if(s.type===j||s.type?.displayName==="InputOTP.Slot"){const b=typeof u.index=="number"?u.index:t++;return a.cloneElement(s,{...u,index:b})}else if(u.children){const[b,v]=te(u.children,t);return t=v,a.cloneElement(s,{...s.props,children:b})}}return s}),t]},ne=({maxLength:e,type:i="text",value:t,defaultValue:c="",onValueChange:s,isValid:u=!0,disabled:b=!1,autoFocus:v=!1,autoComplete:y="off",forceUppercase:g=!1,filterKeys:I=["-","."],pattern:C,inputMode:G,placeholder:V="",name:r,className:z,children:l,...O})=>{const D=a.useMemo(()=>{if(e!==void 0)return e;const A=ee(l);return A>0?A:4},[e,l]),h=a.useMemo(()=>{const[A]=te(l);return A},[l]),{uuid:_,inputRef:B,containerRef:W,name:k,disabled:S,isInvalid:Y,isRequired:w,description:P,currentValue:M,contextValue:U,handleChange:R,handleKeyDown:E,handlePaste:F,handleFocus:d,handleBlur:x,handleClick:q,labelId:N}=Ie({maxLength:D,type:i,value:t,defaultValue:c,onValueChange:s,isValid:u,disabledProp:b,autoFocus:v,forceUppercase:g,filterKeys:I,pattern:C,placeholder:V,nameProp:r}),$="aria-label"in O?O["aria-label"]:void 0,{"aria-label":re,...Q}=O,K=N?{"aria-labelledby":N}:$?{"aria-label":$}:{};return f.jsx(L.Provider,{value:U,children:f.jsxs("div",{ref:W,"data-spark-component":"input-otp",role:"group",...K,...P?{"aria-describedby":P}:{},className:Z.cx("gap-md relative inline-flex items-center",S?"cursor-not-allowed":"cursor-text",z),onClick:q,...Q,children:[k&&f.jsx("input",{type:"hidden",name:k,value:M,required:w,"aria-required":w,"aria-invalid":Y,...K}),f.jsx("input",{ref:B,id:_,type:i==="password"?"password":"text",value:M,maxLength:D,autoFocus:v,autoComplete:y,disabled:S,pattern:C,inputMode:G,...K,...P?{"aria-describedby":P}:{},"aria-invalid":Y,onChange:R,onKeyDown:E,onPaste:F,onFocus:d,onBlur:x,className:"bg-success z-raised absolute inset-0 m-0 p-0 opacity-0 disabled:cursor-not-allowed",tabIndex:0}),h]})})};ne.displayName="InputOTP";const X=({children:e,className:i,...t})=>f.jsx("div",{className:`inline-flex [&>*:not(:first-child)]:-ml-px ${i||""}`,...t,children:e});X.displayName="InputOTP.Group";const J=({className:e,...i})=>f.jsx("div",{className:`text-on-surface flex items-center justify-center ${e||""}`,...i,children:f.jsx(ce.Icon,{size:"md",children:f.jsx(le.Minus,{})})});J.displayName="InputOTP.Separator";const se=Object.assign(ne,{Group:X,Slot:j,Separator:J});se.displayName="InputOTP";X.displayName="InputOTP.Group";j.displayName="InputOTP.Slot";J.displayName="InputOTP.Separator";exports.InputOTP=se;exports.inputOTPSlotStyles=H;exports.inputOTPStyles=de;
-//# sourceMappingURL=index.js.map
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/input-otp/index.ts
+var input_otp_exports = {};
+__export(input_otp_exports, {
+  InputOTP: () => InputOTP2,
+  inputOTPSlotStyles: () => inputOTPSlotStyles,
+  inputOTPStyles: () => inputOTPStyles
+});
+module.exports = __toCommonJS(input_otp_exports);
+
+// src/input-otp/InputOTP.tsx
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_react3 = require("react");
+
+// src/input-otp/InputOTPContext.tsx
+var import_react = require("react");
+var InputOTPContext = (0, import_react.createContext)(null);
+var useInputOTPContext = () => {
+  const context = (0, import_react.useContext)(InputOTPContext);
+  if (!context) {
+    throw new Error("InputOTP components must be used within InputOTP");
+  }
+  return context;
+};
+
+// src/input-otp/InputOTP.styles.ts
+var import_class_variance_authority = require("class-variance-authority");
+var inputOTPContainerStyles = (0, import_class_variance_authority.cva)(["relative", "inline-flex", "items-center", "gap-sm"]);
+var inputOTPSlotStyles = (0, import_class_variance_authority.cva)(
+  [
+    // 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",
+    "outline-hidden",
+    "transition-colors",
+    "flex items-center justify-center",
+    // 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"
+  ],
+  {
+    variants: {
+      /**
+       * Color scheme of the slot
+       */
+      intent: {
+        neutral: ["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"
+    }
+  }
+);
+var inputOTPStyles = inputOTPSlotStyles;
+
+// src/input-otp/InputOTPSlot.tsx
+var import_jsx_runtime = require("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, isActive, hasFakeCaret } = slot;
+  const isEmpty = !char;
+  const isPlaceholder = isEmpty && !hasFakeCaret && context.placeholder;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: inputOTPSlotStyles({
+        intent: context.intent,
+        className
+      }),
+      "data-active": isActive,
+      "data-disabled": context.disabled,
+      "data-valid": context.intent !== "error",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: isPlaceholder ? "text-on-surface/dim-3" : "", children: context.type === "password" && char ? "\u2022" : char || (!hasFakeCaret && context.placeholder ? context.placeholder : "") }),
+        hasFakeCaret && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "bg-on-surface animate-standalone-caret-blink h-sz-24 w-px" })
+          }
+        )
+      ]
+    }
+  );
+};
+InputOTPSlot.displayName = "InputOTP.Slot";
+
+// src/input-otp/useInputOTP.ts
+var import_form_field = require("@spark-ui/components/form-field");
+var import_react2 = require("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 uuid = (0, import_react2.useId)();
+  const inputRef = (0, import_react2.useRef)(null);
+  const containerRef = (0, import_react2.useRef)(null);
+  const field = (0, import_form_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] = (0, import_react2.useState)(processedValue);
+  const [isFocused, setIsFocused] = (0, import_react2.useState)(false);
+  const currentValue = controlledValue !== void 0 ? controlledValue : internalValue;
+  const activeIndex = Math.min(currentValue.length, maxLength - 1);
+  (0, import_react2.useEffect)(() => {
+    if (inputRef.current) {
+      inputRef.current.setSelectionRange(activeIndex, activeIndex);
+    }
+  }, [activeIndex, currentValue.length, maxLength]);
+  const slots = (0, import_react2.useMemo)(
+    () => Array.from({ length: maxLength }, (_, i) => ({
+      char: currentValue[i] || "",
+      isActive: i === activeIndex && isFocused,
+      hasFakeCaret: i === activeIndex && !currentValue[i] && !disabled && isFocused
+    })),
+    [maxLength, currentValue, activeIndex, isFocused, disabled]
+  );
+  (0, import_react2.useEffect)(() => {
+    if (inputRef.current && controlledValue !== void 0) {
+      inputRef.current.value = controlledValue;
+    }
+  }, [controlledValue]);
+  (0, import_react2.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 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 processed;
+  };
+  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);
+          }
+        }
+        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();
+        }
+        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);
+    }
+  };
+  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
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var countSlots = (children) => {
+  let count = 0;
+  import_react3.Children.forEach(children, (child) => {
+    if ((0, import_react3.isValidElement)(child)) {
+      const props = child.props;
+      if (child.type === InputOTPSlot || child.type?.displayName === "InputOTP.Slot") {
+        count++;
+      } else if (props.children) {
+        count += countSlots(props.children);
+      }
+    }
+  });
+  return count;
+};
+var assignSlotIndexes = (children, startIndex = 0) => {
+  let currentIndex = startIndex;
+  const processed = import_react3.Children.map(children, (child) => {
+    if ((0, import_react3.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 (0, import_react3.cloneElement)(child, {
+          ...props,
+          index: slotIndex
+        });
+      } else if (props.children) {
+        const [processedChildren, nextIndex] = assignSlotIndexes(props.children, currentIndex);
+        currentIndex = nextIndex;
+        return (0, import_react3.cloneElement)(child, {
+          ...child.props,
+          children: processedChildren
+        });
+      }
+    }
+    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 maxLength = (0, import_react3.useMemo)(() => {
+    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 = (0, import_react3.useMemo)(() => {
+    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__ */ (0, import_jsx_runtime2.jsx)(InputOTPContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      "data-spark-component": "input-otp",
+      role: "group",
+      ...accessibleNameProps,
+      ...description ? { "aria-describedby": description } : {},
+      className: (0, import_class_variance_authority2.cx)(
+        "gap-md relative inline-flex items-center",
+        disabled ? "cursor-not-allowed" : "cursor-text",
+        className
+      ),
+      onClick: handleClick,
+      ...restOthers,
+      children: [
+        name && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            type: "hidden",
+            name,
+            value: currentValue,
+            required: isRequired,
+            "aria-required": isRequired,
+            "aria-invalid": isInvalid,
+            ...accessibleNameProps
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            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
+          }
+        ),
+        processedChildren
+      ]
+    }
+  ) });
+};
+InputOTP.displayName = "InputOTP";
+
+// src/input-otp/InputOTPGroup.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var InputOTPGroup = ({ children, className, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `inline-flex [&>*:not(:first-child)]:-ml-px ${className || ""}`, ...props, children });
+};
+InputOTPGroup.displayName = "InputOTP.Group";
+
+// src/icon/Icon.tsx
+var import_react5 = require("react");
+
+// src/slot/Slot.tsx
+var import_radix_ui = require("radix-ui");
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Slottable = import_radix_ui.Slot.Slottable;
+var Slot = ({ ref, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
+};
+
+// src/visually-hidden/VisuallyHidden.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
+  const Component = asChild ? Slot : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    Component,
+    {
+      ...props,
+      ref,
+      style: {
+        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
+        position: "absolute",
+        border: 0,
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        wordWrap: "normal",
+        ...props.style
+      }
+    }
+  );
+};
+VisuallyHidden.displayName = "VisuallyHidden";
+
+// src/icon/Icon.styles.tsx
+var import_internal_utils = require("@spark-ui/internal-utils");
+var import_class_variance_authority3 = require("class-variance-authority");
+var iconStyles = (0, import_class_variance_authority3.cva)(["fill-current shrink-0"], {
+  variants: {
+    /**
+     * Color scheme of the icon.
+     */
+    intent: (0, import_internal_utils.makeVariants)({
+      current: ["text-current"],
+      main: ["text-main"],
+      support: ["text-support"],
+      accent: ["text-accent"],
+      basic: ["text-basic"],
+      success: ["text-success"],
+      alert: ["text-alert"],
+      error: ["text-error"],
+      info: ["text-info"],
+      neutral: ["text-neutral"]
+    }),
+    /**
+     * Sets the size of the icon.
+     */
+    size: (0, import_internal_utils.makeVariants)({
+      current: ["u-current-font-size"],
+      sm: ["w-sz-16", "h-sz-16"],
+      md: ["w-sz-24", "h-sz-24"],
+      lg: ["w-sz-32", "h-sz-32"],
+      xl: ["w-sz-40", "h-sz-40"]
+    })
+  }
+});
+
+// src/icon/Icon.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Icon = ({
+  label,
+  className,
+  size = "current",
+  intent = "current",
+  children,
+  ...others
+}) => {
+  const child = import_react5.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    (0, import_react5.cloneElement)(child, {
+      className: iconStyles({ className, size, intent }),
+      "data-spark-component": "icon",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...others
+    }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VisuallyHidden, { children: label })
+  ] });
+};
+Icon.displayName = "Icon";
+
+// src/input-otp/InputOTPSeparator.tsx
+var import_Minus = require("@spark-ui/icons/Minus");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var InputOTPSeparator = ({ className, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      className: `text-on-surface flex items-center justify-center ${className || ""}`,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: "md", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Minus.Minus, {}) })
+    }
+  );
+};
+InputOTPSeparator.displayName = "InputOTP.Separator";
+
+// src/input-otp/index.ts
+var InputOTP2 = Object.assign(InputOTP, {
+  Group: InputOTPGroup,
+  Slot: InputOTPSlot,
+  Separator: InputOTPSeparator
+});
+InputOTP2.displayName = "InputOTP";
+InputOTPGroup.displayName = "InputOTP.Group";
+InputOTPSlot.displayName = "InputOTP.Slot";
+InputOTPSeparator.displayName = "InputOTP.Separator";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InputOTP,
+  inputOTPSlotStyles,
+  inputOTPStyles
+});
+//# sourceMappingURL=index.js.map