@tribepad/themis 1.0.0 → 1.0.1

package/dist/elements/OTPInput/index.mjs

@@ -1,4 +1,734 @@
-export { OTPInput } from '../../chunk-NSQ6MZJ6.mjs';
-import '../../chunk-E2KQFV3O.mjs';
+"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
 //# sourceMappingURL=index.mjs.map