50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T36be,"use client"; import { useCallback, useEffect, useId, useImperativeHandle, useRef, useState, type ChangeEvent, type ClipboardEvent, type FocusEvent, type KeyboardEvent, } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; const CROSSFADE = { type: "spring", stiffness: 260, damping: 34, mass: 0.8 } as const; const EASE = [0.23, 1, 0.32, 1] as const; export type OtpMode = "numeric" | "alphanumeric"; const ALLOW: Record = { numeric: /^[0-9]$/, alphanumeric: /^[0-9a-zA-Z]$/, }; export type UseOtpInputOptions = { length?: number; mode?: OtpMode; defaultValue?: string; disabled?: boolean; onChange?: (value: string) => void; onComplete?: (value: string) => void; }; export type OtpCellProps = { ref: (el: HTMLInputElement | null) => void; value: string; disabled: boolean; type: "text"; inputMode: "numeric" | "text"; autoComplete: string; autoCorrect: "off"; autoCapitalize: "off"; spellCheck: false; onChange: (e: ChangeEvent) => void; onKeyDown: (e: KeyboardEvent) => void; onPaste: (e: ClipboardEvent) => void; onFocus: (e: FocusEvent) => void; onBlur: (e: FocusEvent) => void; }; export type UseOtpInputReturn = { chars: string[]; value: string; length: number; complete: boolean; focusedIndex: number; getCellProps: (index: number) => OtpCellProps; focusAt: (index: number) => void; clear: () => void; }; export function useOtpInput({ length = 6, mode = "numeric", defaultValue = "", disabled = false, onChange, onComplete, }: UseOtpInputOptions = {}): UseOtpInputReturn { const allow = ALLOW[mode]; const keep = useCallback( (text: string) => text .split("") .filter((c) => allow.test(c)) .join(""), [allow], ); const [chars, setChars] = useState(() => { const seed = defaultValue .split("") .filter((c) => ALLOW[mode].test(c)) .slice(0, length); return Array.from({ length }, (_, i) => seed[i] ?? ""); }); const [focusedIndex, setFocusedIndex] = useState(-1); const charsRef = useRef(chars); charsRef.current = chars; const refs = useRef<(HTMLInputElement | null)[]>([]); const changed = useRef(onChange); changed.current = onChange; const completed = useRef(onComplete); completed.current = onComplete; useEffect(() => { setChars((prev) => prev.length === length ? prev : Array.from({ length }, (_, i) => prev[i] ?? ""), ); refs.current.length = length; }, [length]); const commit = useCallback((next: string[]) => { charsRef.current = next; setChars(next); const value = next.join(""); changed.current?.(value); if (next.length > 0 && next.every((c) => c !== "")) completed.current?.(value); }, []); const focusAt = useCallback( (index: number) => { const el = refs.current[Math.max(0, Math.min(length - 1, index))]; if (!el) return; el.focus(); el.select(); }, [length], ); const fillFrom = useCallback( (index: number, text: string) => { const incoming = keep(text); if (incoming.length === 0) return; const next = [...charsRef.current]; let cursor = index; for (const c of incoming) { if (cursor >= length) break; next[cursor] = c; cursor += 1; } commit(next); focusAt(cursor); }, [commit, focusAt, keep, length], ); const clear = useCallback(() => { commit(Array.from({ length }, () => "")); focusAt(0); }, [commit, focusAt, length]); const getCellProps = useCallback( (index: number): OtpCellProps => ({ ref: (el) => { refs.current[index] = el; }, value: chars[index] ?? "", disabled, type: "text", inputMode: mode === "numeric" ? "numeric" : "text", autoComplete: index === 0 ? "one-time-code" : "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, onChange: (e) => { const previous = charsRef.current[index] ?? ""; const raw = e.currentTarget.value; const trimmed = raw.length > 1 && previous && raw.startsWith(previous) ? raw.slice(previous.length) : raw; const incoming = keep(trimmed); if (incoming.length === 0) { if (raw.length === 0 && previous) { const next = [...charsRef.current]; next[index] = ""; commit(next); } e.currentTarget.value = charsRef.current[index] ?? ""; return; } if (incoming.length === 1) { const next = [...charsRef.current]; next[index] = incoming; e.currentTarget.value = incoming; commit(next); if (index < length - 1) focusAt(index + 1); return; } fillFrom(index, incoming); }, onKeyDown: (e) => { if (e.key === "Backspace") { e.preventDefault(); const current = charsRef.current; const next = [...current]; if (current[index]) { next[index] = ""; commit(next); return; } if (index > 0) { next[index - 1] = ""; commit(next); focusAt(index - 1); } return; } if (e.key === "Delete") { e.preventDefault(); const next = [...charsRef.current]; next[index] = ""; commit(next); return; } if (e.key === "ArrowLeft") { e.preventDefault(); focusAt(index - 1); return; } if (e.key === "ArrowRight") { e.preventDefault(); focusAt(index + 1); return; } if (e.key === "Home") { e.preventDefault(); focusAt(0); return; } if (e.key === "End") { e.preventDefault(); focusAt(length - 1); } }, onPaste: (e) => { e.preventDefault(); const text = keep(e.clipboardData.getData("text")); fillFrom(text.length >= length ? 0 : index, text); }, onFocus: (e) => { e.currentTarget.select(); const firstEmpty = charsRef.current.findIndex((c) => c === ""); if (firstEmpty !== -1 && firstEmpty < index) { focusAt(firstEmpty); return; } setFocusedIndex(index); }, onBlur: (e) => { const to = e.relatedTarget as HTMLInputElement | null; if (to && refs.current.includes(to)) return; setFocusedIndex(-1); }, }), [chars, commit, disabled, fillFrom, focusAt, keep, length, mode], ); const value = chars.join(""); return { chars, value, length, complete: chars.length > 0 && chars.every((c) => c !== ""), focusedIndex, getCellProps, focusAt, clear, }; } export type OtpStatus = "idle" | "error" | "success"; export type OtpInputHandle = { clear: () => void; focus: () => void; }; export type OtpInputProps = { length?: number; mode?: OtpMode; defaultValue?: string; onChange?: (value: string) => void; onComplete?: (value: string) => void; status?: OtpStatus; errorMessage?: string; successMessage?: string; hint?: string; label?: string; groupEvery?: number; disabled?: boolean; autoFocus?: boolean; focusOnError?: boolean; className?: string; ref?: React.Ref; }; export function OtpInput({ length = 6, mode = "numeric", defaultValue = "", onChange, onComplete, status = "idle", errorMessage = "", successMessage = "", hint = "", label = "Verification code", groupEvery = 3, disabled = false, autoFocus = false, focusOnError = true, className = "", ref, }: OtpInputProps) { const reduced = useReducedMotion(); const statusId = useId(); const { chars, focusedIndex, getCellProps, focusAt, clear } = useOtpInput({ length, mode, defaultValue, disabled, onChange, onComplete, }); const wasError = useRef(false); const error = status === "error"; const success = status === "success"; useImperativeHandle( ref, () => ({ clear: () => { clear(); focusAt(0); }, focus: () => focusAt(0), }), [clear, focusAt], ); useEffect(() => { if (error && !wasError.current && focusOnError && !disabled) focusAt(0); wasError.current = error; }, [error, focusOnError, disabled, focusAt]); useEffect(() => { if (autoFocus && !disabled) focusAt(0); }, [autoFocus, disabled, focusAt]); const enter = reduced ? { duration: 0 } : { duration: 0.22, ease: EASE }; const swap = reduced ? { duration: 0 } : CROSSFADE; const hasStatus = hint.length > 0 || errorMessage.length > 0 || successMessage.length > 0; const message = error ? errorMessage : success ? successMessage : hint; const messageTone = error ? "text-red-600 dark:text-red-400" : success ? "text-emerald-600 dark:text-emerald-400" : "text-stone-500 dark:text-stone-400"; return (

{Array.from({ length }, (_, i) => { const char = chars[i] ?? ""; const active = focusedIndex === i; const gap = groupEvery > 0 && i > 0 && i % groupEvery === 0; return (

{char ? ( {char} ) : null} {active && !char && !disabled ? ( ) : null}

); })} {hasStatus && ( <>

{message}

{message} )}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@interior","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/interior/otp-input.tsx","content":"$52","type":"registry:ui","target":"components/interior/otp-input.tsx"}],"className":"h-[70svh] min-h-80"}]]}]