@tribepad/themis 1.0.0 → 1.0.1

package/dist/chunk-NSQ6MZJ6.mjs

@@ -1,728 +0,0 @@
-import { cn } from './chunk-E2KQFV3O.mjs';
-import { memo, forwardRef, useRef, useImperativeHandle, useState, useCallback, useEffect } from 'react';
-import { cva } from 'class-variance-authority';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-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=chunk-NSQ6MZJ6.mjs.map
-//# sourceMappingURL=chunk-NSQ6MZJ6.mjs.map