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:T4d5b,"use client"; import * as React from "react"; import { AnimatePresence, animate, 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 UsageMeter { label: string; used: number; limit: number; unit?: string; } export interface PaymentCard { id: string; brand: string; last4: string; expires: string; } export interface BillingSummaryCardProps { plan?: string; /** Price per seat per month on monthly billing. */ seatPrice?: number; /** Discount for annual billing, 0–1. */ annualDiscount?: number; seats?: number; /** Seats included before extra seats are charged (shown as used in the seats meter). */ seatsUsed?: number; usage?: UsageMeter[]; /** Usage-based charge on the next invoice. */ usageCharge?: number; renews?: string; cards?: PaymentCard[]; currency?: string; onChange?: (state: { cycle: "monthly" | "annual"; seats: number; card: string }) => void; onCancel?: () => 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", inner: "#171717", border: "rgba(255,255,255,0.09)", chip: "rgba(255,255,255,0.06)", track: "rgba(255,255,255,0.08)", on: "#F5F4F1", onText: "#0A0A0A", green: "#4ADE80", amber: "#FBBF24", red: "#F87171", accent: "#FB923C", 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", inner: "#FAFAF8", border: "rgba(10,10,10,0.09)", chip: "rgba(10,10,10,0.05)", track: "rgba(10,10,10,0.07)", on: "#0A0A0A", onText: "#FAFAF8", green: "#15803D", amber: "#B45309", red: "#DC2626", accent: "#EA580C", ring: "rgba(10,10,10,0.5)" }, }; const DEFAULT_USAGE: UsageMeter[] = [ { label: "Storage", used: 412, limit: 500, unit: "GB" }, { label: "API requests", used: 2.84, limit: 5, unit: "M" }, { label: "Automation runs", used: 9640, limit: 10000 }, ]; const DEFAULT_CARDS: PaymentCard[] = [ { id: "visa", brand: "Visa", last4: "4242", expires: "08/28" }, { id: "mc", brand: "Mastercard", last4: "5100", expires: "02/27" }, ]; function Num({ value, currency, reduce }: { value: number; currency: string; reduce: boolean }) { const ref = React.useRef(null); const from = React.useRef(value); const fmt = (v: number) => `${currency}${v.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`; React.useEffect(() => { const fmt = (v: number) => `${currency}${v.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`; const el = ref.current; if (!el) return; if (reduce) { el.textContent = fmt(value); from.current = value; return; } const c = animate(from.current, value, { duration: 0.5, ease: [0.22, 1, 0.36, 1], onUpdate: (v) => (el.textContent = fmt(v)) }); from.current = value; return () => c.stop(); }, [value, currency, reduce]); return {fmt(value)}; } // A neutral card glyph; the brand is shown as text, never as a logo. function brandMark(brand: string) { return ( {brand.slice(0, 4)} ); } export function BillingSummaryCard({ plan = "Business", seatPrice = 24, annualDiscount = 0.2, seats: seatsProp = 20, seatsUsed = 18, usage = DEFAULT_USAGE, usageCharge = 38.4, renews = "1 Dec 2026", cards = DEFAULT_CARDS, currency = "$", onChange, onCancel, theme = "dark", className }: BillingSummaryCardProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [cycle, setCycle] = React.useState<"monthly" | "annual">("monthly"); const [seats, setSeats] = React.useState(seatsProp); const [card, setCard] = React.useState(cards[0]?.id ?? ""); const [cardsOpen, setCardsOpen] = React.useState(false); const [cancelStep, setCancelStep] = React.useState<0 | 1 | 2>(0); const [saved, setSaved] = React.useState(null); const perSeat = cycle === "annual" ? seatPrice * (1 - annualDiscount) : seatPrice; const base = perSeat * seats * (cycle === "annual" ? 12 : 1); const subtotal = base + usageCharge; const tax = subtotal * 0.19; const totalDue = subtotal + tax; const yearlySaving = seatPrice * annualDiscount * seats * 12; const changed = cycle !== "monthly" || seats !== seatsProp || card !== cards[0]?.id; const stateKey = `${cycle}-${seats}-${card}`; const current = cards.find((c) => c.id === card) ?? cards[0]; const money = (n: number) => `${currency}${n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`; const focusFirst = React.useCallback((el: HTMLButtonElement | null) => el?.focus({ preventScroll: true }), []); 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 meter = (m: UsageMeter) => { const pct = Math.min(100, (m.used / m.limit) * 100); const color = pct >= 95 ? p.red : pct >= 80 ? p.amber : p.on; const fmt = (n: number) => (Number.isInteger(n) ? n.toLocaleString("en-US") : n.toFixed(2)); return (

{m.label} {fmt(m.used)} {m.unit ? ` ${m.unit}` : ""} / {fmt(m.limit)}{m.unit ? ` ${m.unit}` : ""}

{pct >= 80 && (

{pct >= 95 ? "Almost at your limit. Extra usage is billed per unit." : `${Math.round(pct)}% used`}

)}

); }; return (

{/* Plan + usage */}

Current plan

{plan} Active

Renews on {renews}

{(["monthly", "annual"] as const).map((c) => ( ))}

per seat / month

{cycle === "annual" && ( You save {money(yearlySaving)} a year )}

{/* Seats */}

Seats

seats ? p.red : p.faint }}> {seatsUsed} in use{seatsUsed > seats ? ` · remove ${seatsUsed - seats} members first` : ` · ${seats - seatsUsed} free`}

{seats}

Usage this cycle

{usage.map(meter)}

{/* Invoice + payment */}

Next invoice · {renews}

{seats} seats × {money(perSeat)} {cycle === "annual" ? " × 12" : ""}: {money(base)}
Usage overage: {money(usageCharge)}
VAT 19%: {money(tax)}
Total: {money(totalDue)}

Payment method

{cardsOpen && ( Choose a card

{cards.map((c) => ( setCard(c.id)} className="h-3.5 w-3.5" style={{ accentColor: p.on }} /> {brandMark(c.brand)} •••• {c.last4} · {c.expires} ))}

)}

{cancelStep === 0 ? ( setCancelStep(1)} className={cn("h-9 cursor-pointer rounded-lg border-0 bg-transparent text-[13px]", focus)} style={{ color: p.muted, ...ring }}> Cancel subscription ) : cancelStep === 1 ? ( ) : ( Cancelled. Access ends on {renews}.{" "} )}

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