@spark-ui/components 13.1.4 → 13.2.0

package/dist/input-otp/index.js

@@ -1,668 +1,2 @@
-"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
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),H=require("class-variance-authority"),a=require("react"),oe=require("@spark-ui/components/form-field"),ce=require("../Icon-CF0W0LKr.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.cva(["relative","inline-flex","items-center","gap-sm"]);const X=H.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=X,j=({index:e,className:i,...t})=>{const c=ue(),s=e??0,u=c.slots[s];if(!u)return null;const{char:b,isActive:x,hasFakeCaret:y}=u,I=!b&&!y&&c.placeholder;return f.jsxs("div",{className:X({intent:c.intent,className:i}),"data-active":x,"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",me="ArrowRight",ve="ArrowDown",xe="e",Ie=({maxLength:e,type:i,value:t,defaultValue:c,onValueChange:s,isValid:u,disabledProp:b,autoFocus:x,forceUppercase:y,filterKeys:T,pattern:I,placeholder:C,nameProp:V})=>{const G=a.useId(),r=a.useRef(null),z=a.useRef(null),l=oe.useFormFieldControl(),O=l.id??G,D=V??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,m=Math.min(d.length,e-1);a.useEffect(()=>{r.current&&r.current.setSelectionRange(m,m)},[m,d.length,e]);const q=a.useMemo(()=>Array.from({length:e},(o,n)=>({char:d[n]||"",isActive:n===m&&E,hasFakeCaret:n===m&&!d[n]&&!h&&E})),[e,d,m,E,h]);a.useEffect(()=>{r.current&&t!==void 0&&(r.current.value=t)},[t]),a.useEffect(()=>{x&&r.current&&r.current.focus()},[x]);const N=o=>{let n=o;if(y&&(n=n.toUpperCase()),i==="number"&&(n=n.replace(/[^\d]/g,"")),I)try{let v=I;I.startsWith("^")||(v=`^${I}$`);const p=new RegExp(v);n=n.split("").filter(g=>p.test(g)).join("")}catch(v){console.error("Invalid pattern provided to InputOTP:",I,v)}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:m,slots:q,contextValue:{value:d,maxLength:e,slots:q,activeIndex:m,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 g=Math.min(p.length,e-1);r.current&&r.current.setSelectionRange(g,g)},handleKeyDown:o=>{if(!h){if(T.length>0&&T.includes(o.key)){o.preventDefault();return}switch(o.key){case pe:o.preventDefault();const n=d.length;if(n>0){const v=d.slice(0,n-1);s&&s(v),t===void 0&&R(v);const p=Math.max(0,v.length);r.current&&r.current.setSelectionRange(p,p)}break;case fe:case me:o.preventDefault();break;case be:case ve:o.preventDefault();break;case xe: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 g=Math.min(p.length,e-1);r.current&&r.current.setSelectionRange(g,g)},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,x]=te(u.children,t);return t=x,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:x=!1,autoComplete:y="off",forceUppercase:T=!1,filterKeys:I=["-","."],pattern:C,inputMode:V,placeholder:G="",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:m,handleClick:q,labelId:N}=Ie({maxLength:D,type:i,value:t,defaultValue:c,onValueChange:s,isValid:u,disabledProp:b,autoFocus:x,forceUppercase:T,filterKeys:I,pattern:C,placeholder:G,nameProp:r}),$="aria-label"in O?O["aria-label"]:void 0,{"aria-label":re,...Z}=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:H.cx("gap-md relative inline-flex items-center",S?"cursor-not-allowed":"cursor-text",z),onClick:q,...Z,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:x,autoComplete:y,disabled:S,pattern:C,inputMode:V,...K,...P?{"aria-describedby":P}:{},"aria-invalid":Y,onChange:R,onKeyDown:E,onPaste:F,onFocus:d,onBlur:m,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 J=({children:e,className:i,...t})=>f.jsx("div",{className:`inline-flex [&>*:not(:first-child)]:-ml-px ${i||""}`,...t,children:e});J.displayName="InputOTP.Group";const Q=({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,{})})});Q.displayName="InputOTP.Separator";const se=Object.assign(ne,{Group:J,Slot:j,Separator:Q});se.displayName="InputOTP";J.displayName="InputOTP.Group";j.displayName="InputOTP.Slot";Q.displayName="InputOTP.Separator";exports.InputOTP=se;exports.inputOTPSlotStyles=X;exports.inputOTPStyles=de;
+//# sourceMappingURL=index.js.map