Input OTP

1"use client"
2
3import * as React from "react"
4import { cn } from "@/lib/utils"
5import { useFyskConfig } from "@/components/fysk-provider"
6
7export interface OTPInputProps
8    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "size"> {
9    length?: number
10    onChange?: (value: string) => void
11    variant?: "default" | "condensed" | "underline"
12    size?: "default" | "xs" | "sm" | "md" | "lg" | "xl"
13    state?: "idle" | "loading" | "success" | "error"
14    inputType?: "numeric" | "alphanumeric" | "alpha"
15    Icon?: React.ReactNode
16}
17
18const OTPInput = React.forwardRef<HTMLDivElement, OTPInputProps>(
19    ({
20        length: propLength,
21        onChange,
22        variant = "default",
23        size = "default",
24        state = "idle",
25        inputType = "numeric",
26        Icon,
27        className,
28        disabled,
29        ...props
30    }, ref) => {
31        const length = propLength || 6
32        const [otp, setOtp] = React.useState<string[]>(new Array(length).fill(""))
33        const inputRefs = React.useRef<(HTMLInputElement | null)[]>([])
34
35        React.useEffect(() => {
36            setOtp((prev) => {
37                if (prev.length === length) return prev
38                const newOtp = new Array(length).fill("")
39                // Preserve existing values, truncating if necessary
40                for (let i = 0; i < Math.min(prev.length, length); i++) {
41                    newOtp[i] = prev[i]
42                }
43                return newOtp
44            })
45        }, [length])
46
47        const patterns = {
48            numeric: /^[0-9]$/,
49            alpha: /^[a-zA-Z]$/,
50            alphanumeric: /^[a-zA-Z0-9]$/
51        }
52
53        const validateChar = (char: string) => {
54            return patterns[inputType].test(char)
55        }
56
57        const handleChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
58            const value = e.target.value
59
60            // Handle clearing
61            if (value === "") {
62                const newOtp = [...otp]
63                newOtp[index] = ""
64                setOtp(newOtp)
65                onChange?.(newOtp.join(""))
66                return
67            }
68
69            // Get the last character typed
70            const char = value.substring(value.length - 1)
71
72            if (!validateChar(char)) return
73
74            const newOtp = [...otp]
75            newOtp[index] = char
76            setOtp(newOtp)
77
78// … truncated