61: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"] 62: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"] 63:T43cf,"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)); } export interface VerifyEmailCardProps { email?: string; sender?: string; /** Return true once the address is verified. The demo says no the first time. */ onCheck?: () => Promise | boolean; onResend?: (email: string) => Promise | void; onChangeEmail?: (email: string) => Promise | void; onContinue?: () => void; resendSeconds?: number; maxResends?: 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", well: "rgba(255,255,255,0.04)", env: "#1A1A1A", envLine: "rgba(255,255,255,0.18)", paper: "#F5F4F1", error: "#FF7A6B", ok: "#3FBF7F", warn: "#F5C451", 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", well: "rgba(10,10,10,0.03)", env: "#EDEDEA", envLine: "rgba(10,10,10,0.18)", paper: "#FFFFFF", error: "#E5484D", ok: "#1F9D5C", warn: "#B7791F", ring: "rgba(10,10,10,0.5)" }, }; const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/; const mask = (e: string) => e.replace(/^(.)(.*)(@.*)$/, (_, a: string, b: string, c: string) => `${a}${"•".repeat(Math.min(5, Math.max(1, b.length)))}${c}`); const clock = (s: number) => `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`; const CONFETTI = Array.from({ length: 14 }, (_, i) => ({ a: (i / 14) * Math.PI * 2, d: 46 + (i % 3) * 14, c: ["#60A5FA", "#3FBF7F", "#F5C451", "#F472B6"][i % 4] })); export function VerifyEmailCard({ email: email0 = "lena@nexora.io", sender = "noreply@nexora.io", onCheck, onResend, onChangeEmail, onContinue, resendSeconds = 30, maxResends = 3, theme = "dark", className }: VerifyEmailCardProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [email, setEmail] = React.useState(email0); const [status, setStatus] = React.useState<"waiting" | "checking" | "notyet" | "verified">("waiting"); const [checks, setChecks] = React.useState(0); const [cooldown, setCooldown] = React.useState(resendSeconds); const [sent, setSent] = React.useState(1); const [editing, setEditing] = React.useState(false); const [draft, setDraft] = React.useState(email0); const [tips, setTips] = React.useState(false); const [toast, setToast] = React.useState(null); const timer = React.useRef | null>(null); const focusSelect = React.useCallback((el: HTMLInputElement | null) => { el?.focus({ preventScroll: true }); el?.select(); }, []); React.useEffect(() => { if (status === "verified") return; const id = setInterval(() => setCooldown((s) => Math.max(0, s - 1)), 1000); return () => clearInterval(id); }, [status]); React.useEffect(() => { if (!toast) return; const t = setTimeout(() => setToast(null), 2400); return () => clearTimeout(t); }, [toast]); React.useEffect( () => () => { if (timer.current) clearTimeout(timer.current); }, [], ); const check = async () => { setStatus("checking"); const n = checks + 1; setChecks(n); const ok = onCheck ? await onCheck() : await new Promise((resolve) => { timer.current = setTimeout(() => resolve(n >= 2), reduce ? 0 : 900); }); setStatus(ok ? "verified" : "notyet"); }; const resend = async () => { if (cooldown > 0 || sent >= maxResends) return; await onResend?.(email); setSent((s) => s + 1); setCooldown(resendSeconds); setToast(`Sent again to ${mask(email)}`); }; const saveEmail = async () => { if (!EMAIL.test(draft) || draft === email) return; await onChangeEmail?.(draft); setEmail(draft); setEditing(false); setSent(1); setCooldown(resendSeconds); setStatus("waiting"); setToast(`Link sent to ${mask(draft)}`); }; 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 primary = cn("flex h-11 w-full cursor-pointer items-center justify-center gap-2 rounded-xl border-0 text-[14px] font-semibold disabled:cursor-wait", focus); const secondary = cn("flex h-11 w-full cursor-pointer items-center justify-center gap-2 rounded-xl border bg-transparent text-[14px] font-medium no-underline", focus); const link = cn("cursor-pointer rounded border-0 bg-transparent p-0 text-[13px] underline underline-offset-2 disabled:cursor-default disabled:no-underline", focus); return (

{status === "verified" ? ( {!reduce && CONFETTI.map((c, i) => (

Email verified

{email} is confirmed. Your account is ready.

) : ( {/* Envelope */}

Verify your email

{editing ? ( { e.preventDefault(); void saveEmail(); }} > New email address setDraft(e.target.value)} onKeyDown={(e) => e.key === "Escape" && setEditing(false)} autoComplete="email" aria-invalid={!!draft && !EMAIL.test(draft)} className={cn("mt-1.5 h-11 w-full rounded-xl border px-3.5 text-[14px]", focus)} style={{ borderColor: draft && !EMAIL.test(draft) ? p.error : p.fieldBorder, background: p.field, color: p.text, ...ring }} />

) : ( We sent a link to {mask(email)}.{" "}
Click it to activate your account. )} {!editing && (

Open email app

)}

{status === "notyet" && !editing && ( Not verified yet. Open the newest email and click Verify email, then try again. )}

Didn't get it? {sent >= maxResends ? ( Resend limit reached, try again in an hour ) : cooldown > 0 ? ( Resend in {clock(cooldown)} ) : ( )}

{tips && ( {[`Check spam, promotions and other folders for ${sender}.`, "Emails can take a minute or two to arrive.", `Add ${sender} to your contacts, then resend.`, "Company inboxes sometimes filter new senders. Ask IT or use a personal address."].map((t) => (

{t}

))} )}

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

); } export default VerifyEmailCard; 60:["$","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"}]]}]}]]}],["$","$L61",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/new-york/verify-email-card/verify-email-card.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]