62: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"] 63: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"] 64:T4d93,"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } type Method = "sms" | "app" | "email"; export interface OtpVerificationBlockProps { phone?: string; email?: string; length?: number; /** Return true when the code is right. Defaults to comparing with demoCode. */ onVerify?: (code: string, method: Method, trustDevice: boolean) => Promise | boolean; onResend?: (method: Method) => void; demoCode?: string; recoveryCode?: string; maxAttempts?: number; resendSeconds?: number; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", text: "#F5F4F1", muted: "rgba(245,244,241,0.55)", faint: "rgba(245,244,241,0.3)", panel: "#0E0E0E", border: "rgba(255,255,255,0.1)", field: "rgba(255,255,255,0.03)", fieldBorder: "rgba(255,255,255,0.12)", focus: "rgba(245,244,241,0.85)", primary: "#F5F4F1", onPrimary: "#0A0A0A", seg: "rgba(255,255,255,0.05)", error: "#FF7A6B", ok: "#3FBF7F", ring: "rgba(245,244,241,0.6)" }, light: { bg: "#F4F4F1", text: "#0A0A0A", muted: "rgba(10,10,10,0.55)", faint: "rgba(10,10,10,0.3)", panel: "#FFFFFF", border: "rgba(10,10,10,0.1)", field: "#FFFFFF", fieldBorder: "rgba(10,10,10,0.16)", focus: "rgba(10,10,10,0.85)", primary: "#0A0A0A", onPrimary: "#FFFFFF", seg: "rgba(10,10,10,0.05)", error: "#E5484D", ok: "#1F9D5C", ring: "rgba(10,10,10,0.5)" }, }; const METHODS: { id: Method; label: string }[] = [ { id: "sms", label: "Text message" }, { id: "app", label: "Authenticator" }, { id: "email", label: "Email" }, ]; const mask = (v: string, kind: "phone" | "email") => (kind === "phone" ? `•••• ${v.replace(/\D/g, "").slice(-4)}` : v.replace(/^(.)(.*)(@.*)$/, (_, a: string, b: string, c: string) => `${a}${"•".repeat(Math.min(6, b.length))}${c}`)); const clock = (s: number) => `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`; export function OtpVerificationBlock({ phone = "+49 151 2234 4821", email = "lena@nexora.io", length = 6, onVerify, onResend, demoCode = "428617", recoveryCode = "4F7Q-2KXM", maxAttempts = 3, resendSeconds = 30, theme = "dark", className }: OtpVerificationBlockProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [method, setMethod] = React.useState("sms"); const [digits, setDigits] = React.useState(() => Array(length).fill("")); const [status, setStatus] = React.useState<"idle" | "checking" | "error" | "locked" | "done">("idle"); const [attempts, setAttempts] = React.useState(0); const [resendLeft, setResendLeft] = React.useState(resendSeconds); const [lockLeft, setLockLeft] = React.useState(0); const [appTick, setAppTick] = React.useState(0); const [trust, setTrust] = React.useState(true); const [recovery, setRecovery] = React.useState(false); const [recoveryText, setRecoveryText] = React.useState(""); const [toast, setToast] = React.useState(null); const [shake, setShake] = React.useState(0); const boxes = React.useRef<(HTMLInputElement | null)[]>([]); const timer = React.useRef | null>(null); // One clock drives the resend cooldown, the lockout and the authenticator ring. React.useEffect(() => { if (status === "done") return; const id = setInterval(() => { setResendLeft((s) => Math.max(0, s - 1)); setLockLeft((s) => Math.max(0, s - 1)); setAppTick((t) => (t + 1) % 30); }, 1000); return () => clearInterval(id); }, [status]); React.useEffect(() => { if (status === "locked" && lockLeft === 0) { const t = setTimeout(() => { setStatus("idle"); setAttempts(0); boxes.current[0]?.focus(); }, 0); return () => clearTimeout(t); } }, [status, lockLeft]); React.useEffect(() => { if (!toast) return; const t = setTimeout(() => setToast(null), 2200); return () => clearTimeout(t); }, [toast]); React.useEffect( () => () => { if (timer.current) clearTimeout(timer.current); }, [], ); const reset = (focus = true) => { setDigits(Array(length).fill("")); if (focus) requestAnimationFrame(() => boxes.current[0]?.focus()); }; const verify = async (code: string) => { setStatus("checking"); const ok = onVerify ? await onVerify(code, method, trust) : await new Promise((resolve) => { timer.current = setTimeout(() => resolve(code === demoCode || code === recoveryCode), reduce ? 0 : 750); }); if (ok) { setStatus("done"); return; } const n = attempts + 1; setAttempts(n); setShake((s) => s + 1); if (n >= maxAttempts) { setStatus("locked"); setLockLeft(30); reset(false); } else { setStatus("error"); reset(); } }; const fill = (start: number, chars: string) => { const clean = chars.replace(/\D/g, "").slice(0, length - start); if (!clean) return; const next = [...digits]; [...clean].forEach((c, i) => (next[start + i] = c)); setDigits(next); if (status === "error") setStatus("idle"); const end = Math.min(start + clean.length, length - 1); boxes.current[end]?.focus(); if (next.every(Boolean)) void verify(next.join("")); }; const onKey = (i: number, e: React.KeyboardEvent) => { if (e.key === "Backspace") { e.preventDefault(); const next = [...digits]; if (next[i]) next[i] = ""; else if (i > 0) { next[i - 1] = ""; boxes.current[i - 1]?.focus(); } setDigits(next); } else if (e.key === "ArrowLeft" && i > 0) boxes.current[i - 1]?.focus(); else if (e.key === "ArrowRight" && i < length - 1) boxes.current[i + 1]?.focus(); }; const switchMethod = (m: Method) => { setMethod(m); setRecovery(false); if (status === "error") setStatus("idle"); reset(); if (m !== "app") setResendLeft(resendSeconds); }; const resend = () => { setResendLeft(resendSeconds); setToast(`New code sent to ${method === "sms" ? mask(phone, "phone") : mask(email, "email")}`); onResend?.(method); reset(); }; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.panel } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const busy = status === "checking"; const locked = status === "locked"; const left = maxAttempts - attempts; const sentTo = method === "sms" ? mask(phone, "phone") : method === "email" ? mask(email, "email") : null; const recoveryOk = /^[A-Z0-9]{4}-[A-Z0-9]{4}$/.test(recoveryText.trim().toUpperCase()); return (

{status === "done" ? (

You're verified

{trust ? "We won't ask for a code on this device for 30 days." : "We'll ask for a code next time you sign in."}

) : (

Two-step verification

{recovery ? "Enter one of the recovery codes you saved when you set up two-step verification." : sentTo ? ( <> Enter the {length}-digit code we sent to {sentTo}. ) : ( "Open your authenticator app and enter the current code for Nexora." )}

{!recovery && (

{METHODS.map((m) => ( ))}

)} {recovery ? ( ) : ( {digits.map((d, i) => ( {i === length / 2 && ( )} { boxes.current[i] = el; }} value={d} onChange={(e) => fill(i, e.target.value.slice(-1) || "")} onPaste={(e) => { e.preventDefault(); fill(0, e.clipboardData.getData("text")); }} onKeyDown={(e) => onKey(i, e)} onFocus={(e) => e.currentTarget.select()} inputMode="numeric" autoComplete={i === 0 ? "one-time-code" : "off"} maxLength={1} disabled={busy || locked} aria-label={`Digit ${i + 1}`} aria-invalid={status === "error"} className="h-12 w-full min-w-0 rounded-xl border text-center text-[20px] font-semibold tabular-nums transition-colors outline-none focus:border-[var(--f)] disabled:opacity-60 @[400px]:h-14" style={{ borderColor: status === "error" ? p.error : d ? p.focus : p.fieldBorder, background: p.field, color: p.text, ["--f" as string]: p.focus, caretColor: p.text }} /> ))} )}

{busy ? ( Checking code… ) : locked ? ( Too many attempts. Try again in {clock(lockLeft)}. ) : status === "error" ? ( That code didn't work. {left} {left === 1 ? "attempt" : "attempts"} left. ) : !recovery && method === "app" ? ( Codes refresh every 30 seconds · {30 - appTick}s left ) : ( Demo code: {demoCode.slice(0, 3)} {demoCode.slice(3)} )}

setTrust(e.target.checked)} className="h-4 w-4 cursor-pointer" style={{ accentColor: p.primary }} /> Trust this device for 30 days

{recovery ? ( ) : method === "app" ? ( No code? Check your app's clock. ) : resendLeft > 0 ? ( Resend code in {clock(resendLeft)} ) : ( )} {!recovery && ( )}

)} {toast && ( {toast} )}

); } export default OtpVerificationBlock; 61:["$","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"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L62",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"registry/new-york/otp-verification-block/otp-verification-block.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]