5f: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 60: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 61:T2f2f,"use client"; import { useEffect, useId, useRef, useState } from "react"; import { motion } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; type Status = "idle" | "checking" | "error" | "success"; const ICON_SWAP = { type: "spring", duration: 0.3, bounce: 0 } as const; const EASE_OUT = [0.23, 1, 0.32, 1] as const; // Long enough to register the red and the shake, short enough that retyping // never feels blocked. const ERROR_HOLD = 700; const SUCCESS_HOLD = 2000; // Slot geometry, in px: w-10 slots with gap-2 between them. const GAP = 8; const SLOT_STEP = 40 + GAP; // Keyframes suit both: the caret loops forever and the shake is a one-shot // that nothing interrupts. const CSS = ` @keyframes otp-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } @keyframes otp-shake { 0% { translate: 0; } 20% { translate: -6px; } 40% { translate: 5px; } 60% { translate: -3px; } 80% { translate: 1.5px; } 100% { translate: 0; } } .otp-caret { animation: otp-caret 1s infinite; } .otp-shake { animation: otp-shake 300ms cubic-bezier(0.23, 1, 0.32, 1); } @media (prefers-reduced-motion: reduce) { .otp-caret, .otp-shake { animation: none; } } `; export function OtpInput({ length = 6, onVerify, hint, label = "One-time code", autoFocus = false, className, }: { length?: number; onVerify: (code: string) => boolean | Promise; hint?: string; label?: string; autoFocus?: boolean; className?: string; }) { const reduceMotion = useReducedMotion(); const hintId = useId(); const inputRef = useRef(null); const timer = useRef>(undefined); const attempt = useRef(0); const [value, setValue] = useState(""); const [focused, setFocused] = useState(false); const [status, setStatus] = useState("idle"); useEffect(() => { const attempts = attempt; return () => { clearTimeout(timer.current); // Drops any verification that resolves after unmount. attempts.current++; }; }, []); // A code screen exists to take the code, so typing should work straight // away, and a digit typed after focus has wandered off to nothing brings // it back instead of being lost. Keys meant for another field are left // alone. useEffect(() => { // Inert copies, like the index preview, never take focus or keys. if (!autoFocus || inputRef.current?.closest("[inert]")) return; inputRef.current?.focus({ preventScroll: true }); const onKeyDown = (e: KeyboardEvent) => { if (!/^\d$/.test(e.key) || e.metaKey || e.ctrlKey || e.altKey) return; const current = document.activeElement; if (current && current !== document.body) return; inputRef.current?.focus({ preventScroll: true }); }; document.addEventListener("keydown", onKeyDown); return () => document.removeEventListener("keydown", onKeyDown); }, [autoFocus]); const reset = () => { setValue(""); setStatus("idle"); inputRef.current?.focus(); }; const verify = async (code: string) => { const id = ++attempt.current; setStatus("checking"); let ok = false; try { ok = await onVerify(code); } catch { // A failed check reads as a wrong code rather than a stuck input. } if (id !== attempt.current) return; setStatus(ok ? "success" : "error"); clearTimeout(timer.current); timer.current = setTimeout(reset, ok ? SUCCESS_HOLD : ERROR_HOLD); }; const onChange = (raw: string) => { const next = raw.replace(/\D/g, "").slice(0, length); setValue(next); if (next.length === length) verify(next); }; // Slots only fill left to right, so a click anywhere lands the caret at // the end. A real selection (like select all) is left alone. const keepCaretAtEnd = () => { const input = inputRef.current; if (!input || input.selectionStart !== input.selectionEnd) return; const end = input.value.length; if (input.selectionStart !== end) input.setSelectionRange(end, end); }; const locked = status !== "idle"; const active = focused && !locked ? Math.min(value.length, length - 1) : -1; return (

{/* The one real input sits over the slots with invisible text, so paste, SMS autofill, selection and backspace all stay native. */}

onChange(e.target.value)} onFocus={() => { setFocused(true); // The browser places the caret after focus fires. requestAnimationFrame(keepCaretAtEnd); }} onBlur={() => setFocused(false)} onSelect={keepCaretAtEnd} readOnly={locked} type="text" inputMode="numeric" autoComplete="one-time-code" pattern="\d*" maxLength={length} aria-label={label} aria-describedby={hint ? hintId : undefined} aria-invalid={status === "error"} spellCheck={false} // 16px text stops iOS from zooming the page on focus. className="absolute inset-0 z-10 cursor-text bg-transparent text-base text-transparent caret-transparent outline-hidden selection:bg-transparent" /> {Array.from({ length }, (_, i) => ( ))} {/* One focus ring for the whole code, gliding to the next slot as each digit lands, so the eye is led along instead of watching one box switch off and the next switch on. */} {/* The seal's single outline, drawn around where the slots end up, so it has no seams where the six boxes meet. It waits until the 320ms close is nearly done, or the slots would overhang it. */}

{/* All three messages share one grid cell, so swapping never shifts anything and the cell keeps the width of the longest. */}

{hint} Wrong code, try again Verified

{status === "success" ? "Code verified" : status === "error" ? "Wrong code. The field was cleared, try again." : ""}

); } function Message({ visible, children, }: { visible: boolean; children: React.ReactNode; }) { return ( {children} ); } function Slot({ char, caret, caretKey, status, offset, edge, reduceMotion, }: { char: string | undefined; caret: boolean; caretKey: number; status: Status; offset: number; edge: "start" | "middle" | "end"; reduceMotion: boolean | null; }) { // A verified code seals: the slots slide together into one bar, their // inner walls and corners dissolve, and the six boxes become one field. const sealed = status === "success"; return (

{char ? ( // Keyed by the digit so a replaced digit lifts in again. Deleting // unmounts it, so removals vanish with no exit. {char} ) : caret ? ( // Remounts on every keystroke so the caret restarts solid while // typing, like a native caret. ) : null}

); } export default function OtpInputDemo() { return ( code === "123456"} /> ); } 5e:["$","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"}]]}]}]]}],["$","$L5f",null,{"namespace":"@xevrion","registryDependencies":["utils"]}]]}],null]}],["$","$L60",null,{"files":[{"path":"components/otp-input.tsx","content":"$61","type":"registry:component"},{"path":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n","type":"registry:hook","target":"hooks/use-reduced-motion.ts"}],"className":"h-[70svh] min-h-80"}]]}]