@tribepad/themis 1.0.1 → 1.0.3

package/dist/elements/OTPInput/index.mjs

@@ -1,734 +1,3 @@
 "use client";
-import { memo, forwardRef, useRef, useImperativeHandle, useState, useCallback, useEffect } from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { cva } from 'class-variance-authority';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-// src/elements/OTPInput/OTPInput.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-function useOTPKeyboard(options) {
-  const {
-    value,
-    length,
-    focusedIndex,
-    onChange,
-    setFocusedIndex,
-    disabled = false,
-    readOnly = false
-  } = options;
-  const handleArrowLeft = useCallback(() => {
-    if (focusedIndex > 0) {
-      setFocusedIndex(focusedIndex - 1);
-    }
-  }, [focusedIndex, setFocusedIndex]);
-  const handleArrowRight = useCallback(() => {
-    if (focusedIndex < length - 1) {
-      setFocusedIndex(focusedIndex + 1);
-    }
-  }, [focusedIndex, length, setFocusedIndex]);
-  const handleBackspace = useCallback(() => {
-    if (readOnly) return;
-    const digits = value.split("");
-    const currentDigit = digits[focusedIndex];
-    if (currentDigit === "_") {
-      if (focusedIndex > 0) {
-        const newIndex = focusedIndex - 1;
-        digits[newIndex] = "_";
-        onChange(digits.join(""));
-        setFocusedIndex(newIndex);
-      }
-    } else {
-      digits[focusedIndex] = "_";
-      onChange(digits.join(""));
-      if (focusedIndex > 0) {
-        setFocusedIndex(focusedIndex - 1);
-      }
-    }
-  }, [value, focusedIndex, readOnly, onChange, setFocusedIndex]);
-  const handleDelete = useCallback(() => {
-    if (readOnly) return;
-    const digits = value.split("");
-    digits[focusedIndex] = "_";
-    onChange(digits.join(""));
-  }, [value, focusedIndex, readOnly, onChange]);
-  const handleHome = useCallback(() => {
-    setFocusedIndex(0);
-  }, [setFocusedIndex]);
-  const handleEnd = useCallback(() => {
-    setFocusedIndex(length - 1);
-  }, [length, setFocusedIndex]);
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (disabled) return;
-      switch (e.key) {
-        case "ArrowLeft":
-          e.preventDefault();
-          handleArrowLeft();
-          break;
-        case "ArrowRight":
-          e.preventDefault();
-          handleArrowRight();
-          break;
-        case "Backspace":
-          e.preventDefault();
-          handleBackspace();
-          break;
-        case "Delete":
-          e.preventDefault();
-          handleDelete();
-          break;
-        case "Home":
-          e.preventDefault();
-          handleHome();
-          break;
-        case "End":
-          e.preventDefault();
-          handleEnd();
-          break;
-        // Ctrl/Cmd+A (Select All) - Allow native behavior
-        case "a":
-        case "A":
-          if (e.ctrlKey || e.metaKey) {
-            return;
-          }
-          break;
-        // Prevent Enter from submitting the form
-        // Form submission should be handled by onComplete callback when all digits are filled
-        case "Enter":
-          e.preventDefault();
-          break;
-      }
-    },
-    [
-      disabled,
-      handleArrowLeft,
-      handleArrowRight,
-      handleBackspace,
-      handleDelete,
-      handleHome,
-      handleEnd
-    ]
-  );
-  return {
-    handleKeyDown
-  };
-}
-
-// src/elements/OTPInput/hooks/useOTPInput.ts
-function useOTPInput(props) {
-  const {
-    value: controlledValue,
-    defaultValue = "",
-    length = 6,
-    type = "numeric",
-    pattern,
-    onChange,
-    onComplete,
-    validate,
-    error: controlledError,
-    disabled = false,
-    readOnly = false
-  } = props;
-  const isControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = useState(() => {
-    return (defaultValue || "").padEnd(length, "_");
-  });
-  const [internalError, setInternalError] = useState(null);
-  const [focusedIndex, setFocusedIndex] = useState(0);
-  const completedRef = useRef(null);
-  const debounceTimerRef = useRef(null);
-  const currentValue = isControlled ? controlledValue || "".padEnd(length, "_") : internalValue;
-  const currentError = controlledError !== void 0 ? controlledError : internalError;
-  const runValidation = useCallback(
-    (value) => {
-      const filledLength = value.replace(/_/g, "").length;
-      if (filledLength < length) {
-        return null;
-      }
-      if (validate) {
-        return validate(value);
-      }
-      if (type === "numeric") {
-        const numericPattern = /^\d+$/;
-        const cleanValue = value.replace(/_/g, "");
-        if (!numericPattern.test(cleanValue)) {
-          return "Code must contain only digits";
-        }
-      } else if (type === "alphanumeric") {
-        const alphanumericPattern = /^[A-Za-z0-9]+$/;
-        const cleanValue = value.replace(/_/g, "");
-        if (!alphanumericPattern.test(cleanValue)) {
-          return "Code must contain only letters and numbers";
-        }
-      } else if (type === "custom" && pattern) {
-        const cleanValue = value.replace(/_/g, "");
-        for (const char of cleanValue) {
-          if (!pattern.test(char)) {
-            return "Invalid character in code";
-          }
-        }
-      }
-      return null;
-    },
-    [length, type, pattern, validate]
-  );
-  const updateValue = useCallback(
-    (newValue) => {
-      if (!isControlled) {
-        setInternalValue(newValue);
-      }
-      onChange?.(newValue);
-      const validationError = runValidation(newValue);
-      if (!isControlled) {
-        setInternalError(validationError);
-      }
-      const filledLength = newValue.replace(/_/g, "").length;
-      const isComplete2 = filledLength === length;
-      if (isComplete2 && !validationError && completedRef.current !== newValue) {
-        completedRef.current = newValue;
-        if (debounceTimerRef.current) {
-          clearTimeout(debounceTimerRef.current);
-        }
-        debounceTimerRef.current = setTimeout(() => {
-          onComplete?.(newValue.replace(/_/g, ""));
-        }, 200);
-      }
-      if (!isComplete2 && completedRef.current) {
-        completedRef.current = null;
-      }
-    },
-    [isControlled, length, onChange, onComplete, runValidation]
-  );
-  const handleChange = useCallback(
-    (e) => {
-      if (disabled) return;
-      const inputValue = e.target.value;
-      const newChar = inputValue[inputValue.length - 1] || "";
-      let isValid = false;
-      if (type === "numeric") {
-        isValid = /^\d$/.test(newChar);
-      } else if (type === "alphanumeric") {
-        isValid = /^[A-Za-z0-9]$/.test(newChar);
-      } else if (type === "custom" && pattern) {
-        isValid = pattern.test(newChar);
-      } else {
-        isValid = true;
-      }
-      if (!isValid) {
-        return;
-      }
-      const valueArray = currentValue.split("");
-      valueArray[focusedIndex] = newChar;
-      const newValue = valueArray.join("");
-      updateValue(newValue);
-      if (focusedIndex < length - 1) {
-        setFocusedIndex(focusedIndex + 1);
-      }
-    },
-    [disabled, type, pattern, currentValue, focusedIndex, length, updateValue]
-  );
-  const handlePaste = useCallback(
-    async (e) => {
-      if (disabled || readOnly) return;
-      e.preventDefault();
-      const pastedText = e.clipboardData.getData("text/plain").trim();
-      if (!pastedText) return;
-      if (props.onPaste) {
-        const shouldProceed = await props.onPaste(pastedText);
-        if (shouldProceed === false) return;
-      }
-      let validChars = "";
-      for (const char of pastedText) {
-        if (validChars.length >= length) break;
-        let isValid = false;
-        if (type === "numeric") {
-          isValid = /^\d$/.test(char);
-        } else if (type === "alphanumeric") {
-          isValid = /^[A-Za-z0-9]$/.test(char);
-        } else if (type === "custom" && pattern) {
-          isValid = pattern.test(char);
-        } else {
-          isValid = true;
-        }
-        if (isValid) {
-          validChars += char;
-        }
-      }
-      const newValue = validChars.padEnd(length, "_");
-      updateValue(newValue);
-      const firstEmptyIndex = newValue.indexOf("_");
-      setFocusedIndex(firstEmptyIndex === -1 ? length - 1 : firstEmptyIndex);
-    },
-    [disabled, readOnly, props, length, type, pattern, updateValue]
-  );
-  const clear = useCallback(() => {
-    const emptyValue = "".padEnd(length, "_");
-    updateValue(emptyValue);
-    setFocusedIndex(0);
-    if (!isControlled) {
-      setInternalError(null);
-    }
-    completedRef.current = null;
-  }, [length, updateValue, isControlled]);
-  const setValue = useCallback(
-    (newValue) => {
-      const paddedValue = newValue.padEnd(length, "_").slice(0, length);
-      updateValue(paddedValue);
-      const firstEmptyIndex = paddedValue.indexOf("_");
-      setFocusedIndex(firstEmptyIndex === -1 ? length - 1 : firstEmptyIndex);
-    },
-    [length, updateValue]
-  );
-  const validateCurrent = useCallback(() => {
-    return runValidation(currentValue);
-  }, [currentValue, runValidation]);
-  const isComplete = currentValue.replace(/_/g, "").length === length;
-  const { handleKeyDown } = useOTPKeyboard({
-    value: currentValue,
-    length,
-    focusedIndex,
-    onChange: updateValue,
-    setFocusedIndex,
-    disabled,
-    readOnly
-  });
-  useEffect(() => {
-    if (isControlled && controlledValue !== void 0) {
-      const firstEmptyIndex = controlledValue.indexOf("_");
-      if (firstEmptyIndex !== -1) {
-        setFocusedIndex(firstEmptyIndex);
-      }
-    }
-  }, [isControlled, controlledValue]);
-  useEffect(() => {
-    return () => {
-      if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current);
-      }
-    };
-  }, []);
-  return {
-    value: currentValue,
-    focusedIndex,
-    error: currentError,
-    isComplete,
-    handleChange,
-    handleKeyDown,
-    handlePaste,
-    setFocusedIndex,
-    clear,
-    setValue,
-    validate: validateCurrent
-  };
-}
-var otpDigitVariants = cva(
-  // Base styles - Applied to all variants
-  [
-    "inline-flex",
-    "items-center",
-    "justify-center",
-    "rounded-md",
-    "border-2",
-    "font-semibold",
-    "transition-all",
-    "duration-200",
-    "ease-in-out",
-    "select-none",
-    "tabindex-[-1]"
-    // Not tabbable (hidden input handles focus)
-  ],
-  {
-    variants: {
-      /**
-       * Size Variants
-       * All sizes meet WCAG AAA touch target minimum (44x44px)
-       */
-      size: {
-        /**
-         * Small: 40×40px base + 4px padding = 44×44px touch target
-         * Font: 16px (base size)
-         * Use case: Compact layouts, mobile optimization
-         */
-        sm: [
-          "h-10",
-          // 40px
-          "w-10",
-          // 40px
-          "text-base",
-          // 16px
-          "p-1"
-          // 4px padding for touch target
-        ],
-        /**
-         * Medium (default): 48×56px
-         * Font: 20px (comfortable reading size)
-         * Use case: Standard desktop/mobile layouts
-         */
-        md: [
-          "h-14",
-          // 56px
-          "w-10 sm:w-12 md:w-14",
-          // 48px
-          "text-xl"
-          // 20px
-        ],
-        /**
-         * Large: 56×64px
-         * Font: 24px (large reading size)
-         * Use case: Accessibility focus, high-visibility needs
-         */
-        lg: [
-          "h-16",
-          // 64px
-          "w-10 sm:w-12 md:w-16",
-          // 56px
-          "text-2xl"
-          // 24px
-        ]
-      },
-      /**
-       * State Variants
-       * All states meet WCAG AAA contrast (7:1 minimum)
-       */
-      state: {
-        /**
-         * Default: Standard input appearance
-         * Border: --border
-         * Background: --background
-         * Text: --foreground
-         */
-        default: [
-          "border-[var(--input)]",
-          "bg-[var(--content-background)]",
-          "text-[var(--content-foreground)]",
-          "hover:border-[var(--input-hover)]"
-        ],
-        /**
-         * Focus: Active digit being edited
-         * Border: --primary
-         * Ring: --ring (2px, 2px offset)
-         * Contrast: 7:1 minimum
-         */
-        focus: [
-          "border-[var(--input)]",
-          "ring-2",
-          "ring-[var(--primary)]",
-          "ring-offset-2",
-          "ring-offset-background",
-          "outline-none"
-        ],
-        /**
-         * Filled: Digit has been entered
-         * Border: --primary with 50% opacity
-         * Text: Bold weight for emphasis
-         */
-        filled: [
-          "border-[var(--primary)]",
-          "bg-[var(--content-background)]",
-          "text-[var(--content-foreground)]",
-          "font-bold"
-        ],
-        /**
-         * Error: Validation failed
-         * Border: --destructive
-         * Background: --destructive with 10% opacity
-         * Text: --destructive-foreground
-         * Animation: Shake on error
-         */
-        error: [
-          "border-[var(--destructive)]",
-          "bg-[var(--content-background)]",
-          "text-[var(--destructive-foreground)]",
-          "animate-shake"
-        ],
-        /**
-         * Success: Validation passed (optional)
-         * Border: Green (or --success if available)
-         * Background: Green with 10% opacity
-         * May include checkmark icon
-         */
-        success: [
-          "border-green-600",
-          "bg-green-50",
-          "text-green-900",
-          "dark:border-green-500",
-          "dark:bg-green-900/20",
-          "dark:text-green-100"
-        ],
-        /**
-         * Disabled: Input not interactive
-         * Border: --border with 50% opacity
-         * Background: --muted with 50% opacity
-         * Text: --muted-foreground
-         * Cursor: not-allowed
-         * Opacity: 60%
-         * Contrast: 4.5:1 minimum (AA standard for disabled)
-         */
-        disabled: [
-          "border-[var(--accent-background)]",
-          "bg-[var(--accent-background)]",
-          "text-[var(--menu-muted)]",
-          "cursor-not-allowed",
-          "opacity-60",
-          "hover:border-[var(--accent-background)]"
-          // Prevent hover effect
-        ]
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      state: "default"
-    }
-  }
-);
-var otpContainerVariants = cva(
-  [
-    "inline-flex",
-    "flex-col",
-    "gap-2"
-  ],
-  {
-    variants: {
-      /**
-       * Container size variants
-       * Affects spacing and layout
-       */
-      size: {
-        sm: ["gap-1.5"],
-        md: ["gap-2"],
-        lg: ["gap-3"]
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-var otpDigitGroupVariants = cva(
-  [
-    "flex",
-    "items-center"
-  ],
-  {
-    variants: {
-      /**
-       * Gap between digits
-       */
-      size: {
-        sm: ["gap-1.5"],
-        // 6px
-        md: ["gap-2"],
-        // 8px
-        lg: ["gap-3"]
-        // 12px
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-var otpErrorVariants = cva([
-  "text-sm",
-  "font-medium",
-  "text-[var(--destructive)]",
-  "mt-1.5",
-  "text-center"
-]);
-var otpDescriptionVariants = cva([
-  "text-sm",
-  "text-[var(--menu-muted)]",
-  "mt-1"
-]);
-var OTPDigitComponent = ({
-  value,
-  focused,
-  size = "md",
-  state = "default",
-  masked = false,
-  className,
-  index
-}) => {
-  const isFilled = value !== "_" && value !== "";
-  const computedState = focused && !state ? "focus" : isFilled && state === "default" ? "filled" : state;
-  const displayValue = masked && isFilled ? "\u2022" : value === "_" ? "" : value;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        otpDigitVariants({ size, state: computedState }),
-        className
-      ),
-      role: "presentation",
-      "aria-hidden": "true",
-      "data-focused": focused,
-      "data-filled": isFilled,
-      "data-index": index,
-      children: displayValue || /* @__PURE__ */ jsx("span", { className: "text-[var(--menu-muted)] opacity-40", children: "\u2022" })
-    }
-  );
-};
-var OTPDigit = memo(OTPDigitComponent);
-OTPDigit.displayName = "OTPDigit";
-var OTPInput = forwardRef((props, ref) => {
-  const {
-    label,
-    description,
-    size = "md",
-    disabled = false,
-    readOnly = false,
-    mask = false,
-    showSuccess = false,
-    className,
-    digitClassName,
-    onFocus,
-    onBlur,
-    inputMode = "numeric",
-    length = 6
-  } = props;
-  const {
-    value,
-    focusedIndex,
-    error,
-    isComplete,
-    handleChange,
-    handleKeyDown,
-    handlePaste,
-    setFocusedIndex,
-    clear,
-    setValue,
-    validate
-  } = useOTPInput(props);
-  const inputRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    focus: () => inputRef.current?.focus(),
-    blur: () => inputRef.current?.blur(),
-    clear,
-    setValue,
-    getValue: () => value.replace(/_/g, ""),
-    isComplete: () => isComplete,
-    validate,
-    getElement: () => inputRef.current
-  }));
-  const digits = value.split("");
-  const getDigitState = (index) => {
-    if (disabled) return "disabled";
-    if (error) return "error";
-    if (showSuccess && isComplete && !error) return "success";
-    if (index === focusedIndex) return "focus";
-    if (digits[index] !== "_") return "filled";
-    return "default";
-  };
-  const handleFocusEvent = (e) => {
-    onFocus?.(e);
-  };
-  const handleBlurEvent = (e) => {
-    onBlur?.(e);
-  };
-  const handleDigitClick = (index) => {
-    if (disabled || readOnly) return;
-    setFocusedIndex(index);
-    inputRef.current?.focus();
-  };
-  const handleDigitKeyDown = (e, index) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      handleDigitClick(index);
-    }
-  };
-  const descriptionId = description ? `otp-description-${Math.random().toString(36).slice(2, 9)}` : void 0;
-  const errorId = error ? `otp-error-${Math.random().toString(36).slice(2, 9)}` : void 0;
-  return /* @__PURE__ */ jsxs("div", { className: cn(otpContainerVariants({ size }), className), children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref: inputRef,
-        type: "text",
-        inputMode,
-        value: value.replace(/_/g, ""),
-        onChange: handleChange,
-        onKeyDown: handleKeyDown,
-        onPaste: handlePaste,
-        onFocus: handleFocusEvent,
-        onBlur: handleBlurEvent,
-        disabled,
-        readOnly,
-        "aria-label": label,
-        "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" "),
-        "aria-invalid": !!error,
-        "aria-errormessage": errorId,
-        className: "sr-only",
-        autoComplete: "one-time-code",
-        maxLength: length
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(otpDigitGroupVariants({ size })),
-        role: "presentation",
-        "aria-hidden": "true",
-        children: digits.map((digit, index) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            onClick: () => handleDigitClick(index),
-            onKeyDown: (e) => handleDigitKeyDown(e, index),
-            role: "button",
-            tabIndex: -1,
-            className: "cursor-text",
-            children: /* @__PURE__ */ jsx(
-              OTPDigit,
-              {
-                value: digit,
-                focused: index === focusedIndex,
-                size,
-                state: getDigitState(index),
-                masked: mask,
-                className: digitClassName,
-                index
-              }
-            )
-          },
-          index
-        ))
-      }
-    ),
-    description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: otpDescriptionVariants(), children: description }),
-    error && /* @__PURE__ */ jsx(
-      "p",
-      {
-        id: errorId,
-        className: otpErrorVariants(),
-        role: "alert",
-        "aria-live": "assertive",
-        children: error
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        role: "status",
-        "aria-live": "polite",
-        "aria-atomic": "true",
-        className: "sr-only",
-        children: [
-          !isComplete && !error && /* @__PURE__ */ jsxs(Fragment, { children: [
-            value.replace(/_/g, "").length,
-            " of ",
-            length,
-            " digits entered"
-          ] }),
-          isComplete && !error && /* @__PURE__ */ jsx(Fragment, { children: "Verification code complete" })
-        ]
-      }
-    )
-  ] });
-});
-OTPInput.displayName = "OTPInput";
-
-export { OTPInput };
-//# sourceMappingURL=index.mjs.map
+import {memo,forwardRef,useRef,useImperativeHandle,useId,useState,useCallback,useEffect}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {cva}from'class-variance-authority';import {jsxs,jsx,Fragment}from'react/jsx-runtime';function N(...d){return twMerge(clsx(d))}function Z(d){let{value:p,length:b,focusedIndex:e,onChange:a,setFocusedIndex:t,disabled:y=false,readOnly:f=false}=d,h=useCallback(()=>{e>0&&t(e-1);},[e,t]),x=useCallback(()=>{e<b-1&&t(e+1);},[e,b,t]),P=useCallback(()=>{if(f)return;let r=p.split("");if(r[e]==="_"){if(e>0){let l=e-1;r[l]="_",a(r.join("")),t(l);}}else r[e]="_",a(r.join("")),e>0&&t(e-1);},[p,e,f,a,t]),E=useCallback(()=>{if(f)return;let r=p.split("");r[e]="_",a(r.join(""));},[p,e,f,a]),m=useCallback(()=>{t(0);},[t]),w=useCallback(()=>{t(b-1);},[b,t]);return {handleKeyDown:useCallback(r=>{if(!y)switch(r.key){case "ArrowLeft":r.preventDefault(),h();break;case "ArrowRight":r.preventDefault(),x();break;case "Backspace":r.preventDefault(),P();break;case "Delete":r.preventDefault(),E();break;case "Home":r.preventDefault(),m();break;case "End":r.preventDefault(),w();break;case "a":case "A":if(r.ctrlKey||r.metaKey)return;break;case "Enter":r.preventDefault();break;}},[y,h,x,P,E,m,w])}}function Q(d){let{value:p,defaultValue:b="",length:e=6,type:a="numeric",pattern:t,onChange:y,onComplete:f,validate:h,error:x,disabled:P=false,readOnly:E=false}=d,m=p!==void 0,[w,R]=useState(()=>(b||"").padEnd(e,"_")),[r,K]=useState(null),[l,g]=useState(0),I=useRef(null),D=useRef(null),T=m?p||"".padEnd(e,"_"):w,F=x!==void 0?x:r,L=useCallback(n=>{if(n.replace(/_/g,"").length<e)return null;if(h)return h(n);if(a==="numeric"){let o=/^\d+$/,i=n.replace(/_/g,"");if(!o.test(i))return "Code must contain only digits"}else if(a==="alphanumeric"){let o=/^[A-Za-z0-9]+$/,i=n.replace(/_/g,"");if(!o.test(i))return "Code must contain only letters and numbers"}else if(a==="custom"&&t){let o=n.replace(/_/g,"");for(let i of o)if(!t.test(i))return "Invalid character in code"}return null},[e,a,t,h]),v=useCallback(n=>{m||R(n),y?.(n);let u=L(n);m||K(u);let i=n.replace(/_/g,"").length===e;i&&!u&&I.current!==n&&(I.current=n,D.current&&clearTimeout(D.current),D.current=setTimeout(()=>{f?.(n.replace(/_/g,""));},200)),!i&&I.current&&(I.current=null);},[m,e,y,f,L]),A=useCallback(n=>{if(P)return;let u=n.target.value,o=u[u.length-1]||"",i=false;if(a==="numeric"?i=/^\d$/.test(o):a==="alphanumeric"?i=/^[A-Za-z0-9]$/.test(o):a==="custom"&&t?i=t.test(o):i=true,!i)return;let s=T.split("");s[l]=o;let c=s.join("");v(c),l<e-1&&g(l+1);},[P,a,t,T,l,e,v]),O=useCallback(async n=>{if(P||E)return;n.preventDefault();let u=n.clipboardData.getData("text/plain").trim();if(!u||d.onPaste&&await d.onPaste(u)===false)return;let o="";for(let c of u){if(o.length>=e)break;let V=false;a==="numeric"?V=/^\d$/.test(c):a==="alphanumeric"?V=/^[A-Za-z0-9]$/.test(c):a==="custom"&&t?V=t.test(c):V=true,V&&(o+=c);}let i=o.padEnd(e,"_");v(i);let s=i.indexOf("_");g(s===-1?e-1:s);},[P,E,d,e,a,t,v]),M=useCallback(()=>{let n="".padEnd(e,"_");v(n),g(0),m||K(null),I.current=null;},[e,v,m]),$=useCallback(n=>{let u=n.padEnd(e,"_").slice(0,e);v(u);let o=u.indexOf("_");g(o===-1?e-1:o);},[e,v]),B=useCallback(()=>L(T),[T,L]),U=T.replace(/_/g,"").length===e,{handleKeyDown:z}=Z({value:T,length:e,focusedIndex:l,onChange:v,setFocusedIndex:g,disabled:P,readOnly:E});return useEffect(()=>{if(m&&p!==void 0){let n=p.indexOf("_");n!==-1&&g(n);}},[m,p]),useEffect(()=>()=>{D.current&&clearTimeout(D.current);},[]),{value:T,focusedIndex:l,error:F,isComplete:U,handleChange:A,handleKeyDown:z,handlePaste:O,setFocusedIndex:g,clear:M,setValue:$,validate:B}}var W=cva(["inline-flex","items-center","justify-center","rounded-md","border-2","font-semibold","transition-all","duration-200","ease-in-out","select-none","tabindex-[-1]"],{variants:{size:{sm:["h-10","w-10","text-base","p-1"],md:["h-14","w-10 sm:w-12 md:w-14","text-xl"],lg:["h-16","w-10 sm:w-12 md:w-16","text-2xl"]},state:{default:["border-[var(--input-border)]","bg-[var(--content-background)]","text-[var(--content-foreground)]","hover:border-[var(--input-border)]/80"],focus:["border-[var(--input-border)]","ring-2","ring-[var(--primary)]","ring-offset-2","ring-offset-background","outline-none"],filled:["border-[var(--primary)]","bg-[var(--content-background)]","text-[var(--content-foreground)]","font-bold"],error:["border-[var(--destructive-background)]","bg-[var(--content-background)]","text-[var(--destructive-foreground)]","animate-shake"],success:["border-green-600","bg-green-50","text-green-900","dark:border-green-500","dark:bg-green-900/20","dark:text-green-100"],disabled:["border-[var(--accent-background)]","bg-[var(--accent-background)]","text-[var(--menu-muted)]","cursor-not-allowed","opacity-60","hover:border-[var(--accent-background)]"]}},defaultVariants:{size:"md",state:"default"}}),X=cva(["inline-flex","flex-col","gap-2"],{variants:{size:{sm:["gap-1.5"],md:["gap-2"],lg:["gap-3"]}},defaultVariants:{size:"md"}}),Y=cva(["flex","items-center"],{variants:{size:{sm:["gap-1.5"],md:["gap-2"],lg:["gap-3"]}},defaultVariants:{size:"md"}}),ee=cva(["text-sm","font-medium","text-[var(--destructive-background)]","mt-1.5","text-center"]),te=cva(["text-sm","text-[var(--menu-muted)]","mt-1"]);var le=({value:d,focused:p,size:b="md",state:e="default",masked:a=false,className:t,index:y})=>{let f=d!=="_"&&d!=="",h=p&&!e?"focus":f&&e==="default"?"filled":e,x=a&&f?"\u2022":d==="_"?"":d;return jsx("div",{className:N(W({size:b,state:h}),t),role:"presentation","aria-hidden":"true","data-focused":p,"data-filled":f,"data-index":y,children:x||jsx("span",{className:"text-[var(--menu-muted)] opacity-40",children:"\u2022"})})},j=memo(le);j.displayName="OTPDigit";var ae=forwardRef((d,p)=>{let{label:b,description:e,size:a="md",disabled:t=false,readOnly:y=false,mask:f=false,showSuccess:h=false,className:x,digitClassName:P,onFocus:E,onBlur:m,inputMode:w="numeric",length:R=6}=d,{value:r,focusedIndex:K,error:l,isComplete:g,handleChange:I,handleKeyDown:D,handlePaste:T,setFocusedIndex:F,clear:L,setValue:v,validate:A}=Q(d),O=useRef(null);useImperativeHandle(p,()=>({focus:()=>O.current?.focus(),blur:()=>O.current?.blur(),clear:L,setValue:v,getValue:()=>r.replace(/_/g,""),isComplete:()=>g,validate:A,getElement:()=>O.current}));let M=r.split(""),$=s=>t?"disabled":l?"error":h&&g&&!l?"success":s===K?"focus":M[s]!=="_"?"filled":"default",B=s=>{E?.(s);},U=s=>{m?.(s);},z=s=>{t||y||(F(s),O.current?.focus());},n=(s,c)=>{(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),z(c));},u=useId(),o=e?`${u}-description`:void 0,i=l?`${u}-error`:void 0;return jsxs("div",{className:N(X({size:a}),x),children:[jsx("input",{ref:O,type:"text",inputMode:w,value:r.replace(/_/g,""),onChange:I,onKeyDown:D,onPaste:T,onFocus:B,onBlur:U,disabled:t,readOnly:y,"aria-label":b,"aria-describedby":[o,i].filter(Boolean).join(" "),"aria-invalid":!!l,"aria-errormessage":i,className:"sr-only",autoComplete:"one-time-code",maxLength:R}),jsx("div",{className:N(Y({size:a})),role:"presentation","aria-hidden":"true",children:M.map((s,c)=>jsx("div",{onClick:()=>z(c),onKeyDown:V=>n(V,c),role:"button",tabIndex:-1,className:"cursor-text",children:jsx(j,{value:s,focused:c===K,size:a,state:$(c),masked:f,className:P,index:c})},c))}),e&&jsx("p",{id:o,className:te(),children:e}),l&&jsx("p",{id:i,className:ee(),role:"alert","aria-live":"assertive",children:l}),jsxs("div",{role:"status","aria-live":"polite","aria-atomic":"true",className:"sr-only",children:[!g&&!l&&jsxs(Fragment,{children:[r.replace(/_/g,"").length," of ",R," digits entered"]}),g&&!l&&jsx(Fragment,{children:"Verification code complete"})]})]})});ae.displayName="OTPInput";export{ae as OTPInput};//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map