Aurora Input OTP

1"use client"
2 
3import * as React from "react"
4 
5export interface InputOTPProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
6  length?: number
7  value?: string
8  defaultValue?: string
9  onChange?: (value: string) => void
10  /** Render a separator dot after the segment at this 1-based index. */
11  separatorAfter?: number
12  disabled?: boolean
13  autoFocus?: boolean
14}
15 
16export function InputOTP({
17  length = 6,
18  value: valueProp,
19  defaultValue = "",
20  onChange,
21  separatorAfter,
22  disabled = false,
23  autoFocus = false,
24  className,
25  style,
26  ...props
27}: InputOTPProps) {
28  const isControlled = valueProp !== undefined
29  const [internalValue, setInternalValue] = React.useState(defaultValue)
30  const value = isControlled ? valueProp : internalValue
31  const inputRefs = React.useRef<Array<HTMLInputElement | null>>([])
32 
33  const chars = value.padEnd(length).slice(0, length).split("")
34 
35  const commit = React.useCallback(
36    (next: string) => {
37      if (!isControlled) setInternalValue(next)
38      onChange?.(next)
39    },
40    [isControlled, onChange],
41  )
42 
43  const focusIndex = React.useCallback((index: number) => {
44    const clamped = Math.max(0, Math.min(length - 1, index))
45    const next = inputRefs.current[clamped]
46    next?.focus()
47    next?.select()
48  }, [length])
49 
50  const writeChars = React.useCallback(
51    (startIndex: number, raw: string) => {
52      const sanitized = raw.replace(/\s+/g, "")
53      if (!sanitized) return
54      const next = chars.slice()
55      let cursor = startIndex
56      for (const char of sanitized) {
57        if (cursor >= length) break
58        next[cursor] = char
59        cursor += 1
60      }
61      commit(next.join("").trimEnd())
62      focusIndex(Math.min(cursor, length - 1))
63    },
64    [chars, commit, focusIndex, length]
65  )
66 
67  return (
68    <div
69      role="group"
70      aria-label="One-time passcode"
71      className={["flex items-center", className].filter(Boolean).join(" ")}
72      style={{ gap: "12px", ...style }}
73      {...props}
74    >
75      {chars.map((char, index) => {
76        const filled = char.trim().length > 0
77        return (
78          <React.Fragment key={index}>
79            <input
80              aria-label={`Digit ${index + 1}`}
81              autoFocus={autoFocus && index === 0}
82              autoComplete={index === 0 ? "one-time-code" : undefined}
83              disabled={disabled}
84              inputMode="numeric"
85              maxLength={1}
86              value={char.trim()}
87// … truncated