"use client"; import { useEffect, useId, useRef, useState } from "react"; import type { ClipboardEvent, KeyboardEvent, ChangeEvent, FocusEvent } from "react"; import { AnimatePresence, motion, useAnimate, useReducedMotion } from "motion/react"; import type { Transition } from "motion/react"; import { motionTokens } from "../lib/motion-tokens"; import styles from "./otp-input.module.css"; export interface OtpInputProps { length?: number; value?: string; onChange?: (value: string) => void; label: string; description?: string; error?: string; autoFocus?: boolean; disabled?: boolean; inputMode?: "numeric" | "text"; className?: string; } /** Changed words rise in and unblur while unchanged words hold still. Assistive tech reads the plain copy. */ function MotionText({ text }: { text: string }) { const reduced = useReducedMotion(); const words = text.split(" "); return <>{text}; } /** Helper and error copy: the row opens its height on a spring, then the words settle in. */ function FieldMessage({ id, text, className, alert }: { id?: string; text?: string; className?: string; alert?: boolean }) { return {text ? : null}; } /** The row tracks the measured copy, so a longer message that wraps opens its next line instead of snapping. */ function MessageRow({ id, text, className, alert }: { id?: string; text: string; className?: string; alert?: boolean }) { const reduced = useReducedMotion(); const copyRef = useRef(null); const [height, setHeight] = useState("auto"); useEffect(() => { const node = copyRef.current; if (!node || typeof ResizeObserver === "undefined") return; const observer = new ResizeObserver(([entry]) => setHeight(entry?.borderBoxSize?.[0]?.blockSize ?? node.offsetHeight)); observer.observe(node); return () => observer.disconnect(); }, []); return ; } export function OtpInput({ length = 6, value = "", onChange, label, description, error, autoFocus = false, disabled = false, inputMode = "numeric", className }: OtpInputProps) { const generatedId = useId(); const reduced = useReducedMotion(); const [scope, animate] = useAnimate(); const inputRefs = useRef>([]); const values = Array.from({ length }, (_, index) => value[index] ?? ""); const hintId = description ? `${generatedId}-description` : undefined; const errorId = error ? `${generatedId}-error` : undefined; const describedBy = [hintId, errorId].filter(Boolean).join(" ") || undefined; const focusAt = (index: number) => inputRefs.current[Math.max(0, Math.min(index, length - 1))]?.focus(); const sanitize = (next: string) => inputMode === "numeric" ? next.replace(/\D/g, "") : next; // One ring for the whole row. It glides between slots while focus stays inside, and fades in where focus lands when it arrives from outside. const [ring, setRing] = useState({ x: 0, width: 0, shown: false, glide: false }); // A paste fills several slots in one update; those digits land as a short left to right wave. const [fill, setFill] = useState({ value, wave: false }); if (fill.value !== value) setFill({ value, wave: Array.from({ length }, (_, index) => (fill.value[index] ?? "") !== (value[index] ?? "")).filter(Boolean).length > 1 }); const lastError = useRef(error); useEffect(() => { if (autoFocus) inputRefs.current[0]?.focus(); }, [autoFocus]); // Slots shrink at narrow widths; keep the ring on the focused slot when the row resizes. useEffect(() => { const row = scope.current; if (!row || typeof ResizeObserver === "undefined") return; const observer = new ResizeObserver(() => { const slot = (row.contains(document.activeElement) ? document.activeElement?.parentElement : null) as HTMLElement | null; if (slot) setRing(current => (current.x === slot.offsetLeft && current.width === slot.offsetWidth ? current : { ...current, x: slot.offsetLeft, width: slot.offsetWidth, glide: false })); }); observer.observe(row); return () => observer.disconnect(); }, [scope]); // A new error nudges the row side to side once, so a rejected code reads as a response to the attempt. useEffect(() => { if (error && error !== lastError.current && !reduced && scope.current) animate(scope.current, { x: [0, -6, 5, -3, 2, 0] }, { duration: .36, ease: [...motionTokens.ease.standard] }); lastError.current = error; }, [error, reduced, animate, scope]); const updateAt = (index: number, raw: string) => { const next = values.slice(); const clean = sanitize(raw).slice(-1); next[index] = clean; onChange?.(next.join("")); if (clean && index < length - 1) focusAt(index + 1); }; const handleChange = (index: number, event: ChangeEvent) => { const raw = sanitize(event.target.value); if (raw.length <= 1) { updateAt(index, raw); return; } const next = values.slice(); raw.slice(0, length - index).split("").forEach((character, offset) => { next[index + offset] = character; }); onChange?.(next.join("")); focusAt(Math.min(index + raw.length, length - 1)); }; const handlePaste = (index: number, event: ClipboardEvent) => { event.preventDefault(); const pasted = sanitize(event.clipboardData.getData("text")).slice(0, length - index); if (!pasted) return; const next = values.slice(); pasted.split("").forEach((character, offset) => { next[index + offset] = character; }); onChange?.(next.join("")); focusAt(Math.min(index + pasted.length, length - 1)); }; const handleKeyDown = (index: number, event: KeyboardEvent) => { if (event.key === "ArrowLeft") { event.preventDefault(); focusAt(index - 1); } if (event.key === "ArrowRight") { event.preventDefault(); focusAt(index + 1); } if (event.key === "Backspace" && !values[index] && index > 0) { event.preventDefault(); const next = values.slice(); next[index - 1] = ""; onChange?.(next.join("")); focusAt(index - 1); } if (event.key === "Delete" && values[index]) { const next = values.slice(); next[index] = ""; onChange?.(next.join("")); } }; const handleFocus = (event: FocusEvent) => { const slot = event.currentTarget.parentElement as HTMLElement; setRing(current => ({ x: slot.offsetLeft, width: slot.offsetWidth, shown: true, glide: current.shown })); }; const handleBlur = (event: FocusEvent) => { if (!scope.current?.contains(event.relatedTarget as Node | null)) setRing(current => ({ ...current, shown: false, glide: false })); }; const glyphTransition = (index: number): Transition => reduced ? { duration: motionTokens.duration.instant } : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter], delay: fill.wave ? index * motionTokens.stagger.item : 0 }; return

{label}

{values.map((character, index) =>

{ inputRefs.current[index] = node; }} className={styles.input} aria-label={`${label}, digit ${index + 1} of ${length}`} aria-describedby={describedBy} aria-invalid={error ? true : undefined} value={character} data-filled={character ? "true" : undefined} maxLength={1} inputMode={inputMode} autoComplete={index === 0 ? "one-time-code" : "off"} disabled={disabled} onChange={(event) => handleChange(index, event)} onPaste={(event) => handlePaste(index, event)} onKeyDown={(event) => handleKeyDown(index, event)} onFocus={handleFocus} onBlur={handleBlur} /> {/* The input text is transparent; this copy of the digit rises into the slot and unblurs. */} {character ? : null}

)}

; }