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:T4aaa,"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 Step = "checking" | "form" | "saving" | "done" | "expired" | "sent"; export interface ResetPasswordCardProps { email?: string; linkState?: "valid" | "expired"; /** Seconds left before the link expires. */ expiresIn?: number; minLength?: number; onReset?: (password: string, signOutOthers: boolean) => Promise | void; onRequestLink?: (email: string) => Promise | void; onContinue?: () => void; 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", chip: "rgba(255,255,255,0.05)", 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", chip: "rgba(10,10,10,0.05)", error: "#E5484D", ok: "#1F9D5C", warn: "#B7791F", ring: "rgba(10,10,10,0.5)" }, }; const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/; const clock = (s: number) => `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`; export function ResetPasswordCard({ email: email0 = "lena@nexora.io", linkState = "valid", expiresIn = 1752, minLength = 10, onReset, onRequestLink, onContinue, theme = "dark", className }: ResetPasswordCardProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [step, setStep] = React.useState("checking"); const [pw, setPw] = React.useState(""); const [confirm, setConfirm] = React.useState(""); const [show, setShow] = React.useState(false); const [signOut, setSignOut] = React.useState(true); const [touched, setTouched] = React.useState(false); const [left, setLeft] = React.useState(expiresIn); const [redirect, setRedirect] = React.useState(3); const [email, setEmail] = React.useState(email0); const [cooldown, setCooldown] = React.useState(0); const timer = React.useRef | null>(null); // Pretend to check the token, then show the right screen. React.useEffect(() => { const t = setTimeout(() => setStep(linkState === "valid" ? "form" : "expired"), reduce ? 0 : 700); return () => clearTimeout(t); }, [linkState, reduce]); React.useEffect(() => { const id = setInterval(() => { setLeft((s) => Math.max(0, s - 1)); setCooldown((s) => Math.max(0, s - 1)); }, 1000); return () => clearInterval(id); }, []); React.useEffect(() => { if (step !== "form" || left > 0) return; const t = setTimeout(() => setStep("expired"), 0); return () => clearTimeout(t); }, [step, left]); React.useEffect(() => { if (step !== "done") return; if (redirect === 0) { onContinue?.(); return; } const t = setTimeout(() => setRedirect((r) => r - 1), 1000); return () => clearTimeout(t); }, [step, redirect, onContinue]); React.useEffect( () => () => { if (timer.current) clearTimeout(timer.current); }, [], ); const rules = [ { id: "len", label: `${minLength}+ characters`, ok: pw.length >= minLength }, { id: "case", label: "Upper & lower case", ok: /[a-z]/.test(pw) && /[A-Z]/.test(pw) }, { id: "num", label: "A number", ok: /\d/.test(pw) }, { id: "sym", label: "A symbol", ok: /[^A-Za-z0-9]/.test(pw) }, ]; const passed = rules.filter((r) => r.ok).length; const strong = passed >= 3 && rules[0].ok; const matches = confirm.length > 0 && confirm === pw; const canSave = strong && matches; const run = (fn: (() => Promise | void) | undefined, done: () => void, ms = 800) => { const r = fn?.(); if (r instanceof Promise) r.then(done, () => setStep((s) => (s === "saving" ? "form" : s))); else timer.current = setTimeout(done, reduce ? 0 : ms); }; const save = () => { setTouched(true); if (!canSave || step !== "form") return; setStep("saving"); run(onReset && (() => onReset(pw, signOut)), () => { setRedirect(3); setStep("done"); }); }; const requestLink = () => { if (!EMAIL.test(email) || cooldown > 0) return; setCooldown(30); run(onRequestLink && (() => onRequestLink(email)), () => setStep("sent"), 600); }; 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("mt-5 flex h-11 w-full cursor-pointer items-center justify-center gap-2 rounded-xl border-0 text-[14px] font-semibold disabled:cursor-not-allowed disabled:opacity-40", focus); const fieldWrap = "flex h-11 items-center rounded-xl border pr-1 pl-3.5 focus-within:border-[var(--f)]"; // Enter-only: screens swap instantly and the new one fades up. const fade = { initial: reduce ? false : { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.2 } } as const; const tile = (path: string, color: string) => ( ); const eye = ( ); return (

{step === "checking" && (

Checking your reset link…

)} {(step === "form" || step === "saving") && ( { e.preventDefault(); save(); }} > {tile("M7 11V8a5 5 0 0 1 10 0v3M5 11h14v10H5zM12 15v2", p.text)}

Set a new password

for {email0}

New password

setPw(e.target.value)} autoComplete="new-password" aria-describedby={`${uid}-rules`} aria-invalid={touched && !strong} disabled={step === "saving"} className="h-full min-w-0 flex-1 border-0 bg-transparent text-[14px] outline-none" style={{ color: p.text }} /> {eye}

{r.ok ? "✓" : "·"} {r.label} {r.ok ? " met" : " not met"}

Confirm password

setConfirm(e.target.value)} autoComplete="new-password" aria-describedby={`${uid}-match`} aria-invalid={touched && !matches} disabled={step === "saving"} className="h-full min-w-0 flex-1 border-0 bg-transparent text-[14px] outline-none" style={{ color: p.text }} /> {matches && ( )}

{matches ? "Passwords match" : confirm ? (pw.startsWith(confirm) ? "Keep typing…" : "Doesn't match the new password") : "Type it again to make sure"}

setSignOut(e.target.checked)} className="mt-0.5 h-4 w-4 cursor-pointer" style={{ accentColor: p.primary }} /> Sign out of all other devices Recommended if you think someone else knows your password.

This link expires in {clock(left)}

)} {step === "done" && (

Password updated

{signOut ? "Other devices have been signed out. " : ""} {redirect > 0 ? `Signing you in in ${redirect}…` : "You're signed in."}

)} {(step === "expired" || step === "sent") && ( {step === "expired" ? tile("M12 7v5l3 2M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z", p.warn) : tile("M3 7l9 6 9-6M3 6h18v12H3z", p.ok)}

{step === "expired" ? "This link has expired" : "Check your email"}

{step === "expired" ? ( "Reset links work for 30 minutes and only once. Send yourself a new one." ) : ( <> We sent a new link to {email}. It works for 30 minutes. )}

{step === "expired" ? ( ) : ( <>

{i + 1} {s}

{cooldown > 0 ? ( Resend in {clock(cooldown)} ) : ( )}

)} )}

← Back to sign in

); } export default ResetPasswordCard; 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/reset-password-card/reset-password-card.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]