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:T5130,"use client"; import * as React from "react"; import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion, useTransform, type MotionValue } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface WalletCard { id: string; label: string; kind: "physical" | "virtual"; holder: string; number: string; expiry: string; cvc: string; spent: number; limit: number; frozen?: boolean; gradient: [string, string]; controls: { online: boolean; contactless: boolean; atm: boolean; abroad: boolean }; transactions: { merchant: string; category: string; amount: number; when: string }[]; } export interface CardWalletPanelProps { cards?: WalletCard[]; currency?: string; onFreeze?: (id: string, frozen: boolean) => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", text: "#F5F4F1", muted: "rgba(245,244,241,0.62)", faint: "rgba(245,244,241,0.36)", card: "#121212", well: "rgba(255,255,255,0.04)", border: "rgba(255,255,255,0.08)", track: "rgba(255,255,255,0.1)", on: "#F5F4F1", onText: "#0A0A0A", green: "#4ADE80", amber: "#FBBF24", ice: "#7DD3FC", ring: "rgba(245,244,241,0.6)" }, light: { bg: "#FAFAF8", text: "#0A0A0A", muted: "rgba(10,10,10,0.62)", faint: "rgba(10,10,10,0.4)", card: "#FFFFFF", well: "rgba(10,10,10,0.035)", border: "rgba(10,10,10,0.09)", track: "rgba(10,10,10,0.1)", on: "#0A0A0A", onText: "#FAFAF8", green: "#16A34A", amber: "#B45309", ice: "#0284C7", ring: "rgba(10,10,10,0.5)" }, }; const T = (merchant: string, category: string, amount: number, when: string) => ({ merchant, category, amount, when }); const CARDS: WalletCard[] = [ { id: "main", label: "Everyday", kind: "physical", holder: "LENA HARTMANN", number: "9481 1832 7710 4821", expiry: "09/29", cvc: "318", spent: 1240, limit: 2500, gradient: ["#1E1B4B", "#7C3AED"], controls: { online: true, contactless: true, atm: true, abroad: false }, transactions: [T("Kornblume Bakery", "Food", 8.4, "Today"), T("Velo Rides", "Transport", 3.2, "Today"), T("Marktplatz Grocer", "Groceries", 64.9, "Yesterday"), T("Lumen Cinema", "Leisure", 24, "Nov 3")], }, { id: "subs", label: "Subscriptions", kind: "virtual", holder: "LENA HARTMANN", number: "9472 6604 0198 2207", expiry: "02/28", cvc: "904", spent: 86, limit: 150, gradient: ["#064E3B", "#14B8A6"], controls: { online: true, contactless: false, atm: false, abroad: true }, transactions: [T("Wavelength Music", "Subscriptions", 10.99, "Nov 1"), T("Cloudnest Storage", "Subscriptions", 2.99, "Oct 28"), T("Newsline Daily", "Subscriptions", 7.5, "Oct 25")], }, { id: "travel", label: "Travel", kind: "physical", holder: "LENA HARTMANN", number: "9416 2290 5531 0066", expiry: "11/27", cvc: "527", spent: 0, limit: 3000, frozen: true, gradient: ["#431407", "#F97316"], controls: { online: true, contactless: true, atm: true, abroad: true }, transactions: [T("Skyline Air", "Travel", 212, "Sep 14"), T("Harbor Hotel Lisbon", "Travel", 386.4, "Sep 12")], }, ]; const CONTROLS: { k: keyof WalletCard["controls"]; label: string; hint: string }[] = [ { k: "online", label: "Online payments", hint: "Shops, apps and subscriptions" }, { k: "contactless", label: "Contactless", hint: "Tap to pay in stores" }, { k: "atm", label: "ATM withdrawals", hint: "Cash from any machine" }, { k: "abroad", label: "Payments abroad", hint: "Outside your home country" }, ]; function Mark() { return ( ); } export function CardWalletPanel({ cards: initial = CARDS, currency = "€", onFreeze, theme = "dark", className }: CardWalletPanelProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [cards, setCards] = React.useState(initial); const [active, setActive] = React.useState(initial[0]?.id ?? ""); const [flipped, setFlipped] = React.useState(false); const [copied, setCopied] = React.useState(false); const [creating, setCreating] = React.useState(false); const timers = React.useRef[]>([]); // Faces swap by angle (not only backface-visibility) so WebKit never shows the mirrored side. const rot = useMotionValue(0); const frontOpacity = useTransform(rot, (r): number => (r < 90 ? 1 : 0)); const backOpacity = useTransform(rot, (r): number => (r >= 90 ? 1 : 0)); React.useEffect(() => { const c = animate(rot, flipped ? 180 : 0, reduce ? { duration: 0 } : { type: "spring", stiffness: 160, damping: 20 }); return () => c.stop(); }, [flipped, reduce, rot]); React.useEffect(() => { const list = timers.current; return () => list.forEach(clearTimeout); }, []); React.useEffect(() => { if (!flipped) return; const t = setTimeout(() => setFlipped(false), 8000); return () => clearTimeout(t); }, [flipped, active]); React.useEffect(() => { if (!copied) return; const t = setTimeout(() => setCopied(false), 1400); return () => clearTimeout(t); }, [copied]); const card = cards.find((c) => c.id === active) ?? cards[0]; const money = (n: number, dec = false) => `${currency}${n.toLocaleString("en-US", { minimumFractionDigits: dec ? 2 : 0, maximumFractionDigits: dec ? 2 : 0 })}`; const update = (patch: Partial) => setCards((list) => list.map((c) => (c.id === card.id ? { ...c, ...patch } : c))); const select = (id: string) => { setActive(id); setFlipped(false); }; const create = () => { setCreating(true); timers.current.push( setTimeout( () => { const n = cards.length + 1; const id = `v${n}`; setCards((list) => [ ...list, { id, label: `Virtual ${n}`, kind: "virtual", holder: "LENA HARTMANN", number: `9500 ${String(1000 + n * 731).slice(0, 4)} 3381 ${String(4000 + n * 97).slice(0, 4)}`, expiry: "11/29", cvc: String(200 + n * 37).slice(0, 3), spent: 0, limit: 500, gradient: ["#172554", "#3B82F6"], controls: { online: true, contactless: false, atm: false, abroad: false }, transactions: [] }, ]); setActive(id); setFlipped(false); setCreating(false); }, reduce ? 0 : 700, ), ); }; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.card } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const btn = cn("flex h-9 flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-lg border text-[12.5px] font-medium disabled:cursor-not-allowed disabled:opacity-40", focus); const pct = Math.min(1, card.spent / card.limit); const masked = `•••• ${card.number.slice(-4)}`; const face = (c: WalletCard, back: boolean, opacity: MotionValue) => ( {back ? (

Card details {c.number} Expires {c.expiry} CVC {c.cvc}

) : (

nexora {c.kind}

)} ); return (

Cards

{cards.length} cards · {cards.filter((c) => c.frozen).length} frozen

{cards.map((c) => ( select(c.id)} className={cn("flex shrink-0 cursor-pointer items-center gap-2.5 rounded-xl border py-2 pr-3.5 pl-2", focus)} style={{ borderColor: c.id === card.id ? p.ring.replace(/[\d.]+\)$/, "0.45)") : p.border, background: c.id === card.id ? p.well : "transparent", color: p.text, ...ring }}> {c.label} •• {c.number.slice(-4)} ))}

{/* Card visual */}

{face(card, false, frontOpacity)} {face(card, true, backOpacity)} {card.frozen && ( ❄ Frozen )}

{card.frozen ? "Payments are blocked until you unfreeze this card." : flipped ? `Details hide automatically · ${masked}` : `${card.label} · ${card.kind === "virtual" ? "online only" : "in your wallet"}`}

{/* Controls */}

Spent this month {money(card.spent)} of {money(card.limit)}

0.8 ? p.amber : p.green }} />

Monthly limit update({ limit: Number(e.target.value) })} aria-valuetext={money(card.limit)} className="h-1 min-w-0 flex-1 cursor-pointer" style={{ accentColor: p.on }} /> {money(card.limit)}

{CONTROLS.map((c, i) => { const on = card.controls[c.k]; return (

0 && "border-t")} style={{ borderColor: p.border }}> {c.label} {c.hint}

); })}

Recent on this card

{card.transactions.length ? (

{t.merchant} {t.category} · {t.when} −{money(t.amount, true)}

) : (

No payments yet. Use this card for online purchases and subscriptions.

)}

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