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:T426d,"use client"; import * as React from "react"; import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion, useTransform } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface SelectionOption { id: string; title: string; description: string; icon: string; // SVG path price?: number; badge?: string; } export interface SelectionGroup { id: string; title: string; hint: string; max?: number; options: SelectionOption[]; } export interface CheckboxSelectionCardsProps { groups?: SelectionGroup[]; defaultSelected?: string[]; onContinue?: (selected: string[], monthlyTotal: number) => Promise | 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", sel: "#171A20", border: "rgba(255,255,255,0.09)", accent: "#60A5FA", on: "#F5F4F1", onText: "#0A0A0A", green: "#4ADE80", amber: "#FBBF24", ring: "rgba(245,244,241,0.6)", chip: "rgba(255,255,255,0.06)" }, light: { bg: "#FAFAF8", text: "#0A0A0A", muted: "rgba(10,10,10,0.62)", faint: "rgba(10,10,10,0.42)", card: "#FFFFFF", sel: "#F2F6FF", border: "rgba(10,10,10,0.1)", accent: "#2563EB", on: "#0A0A0A", onText: "#FAFAF8", green: "#15803D", amber: "#B45309", ring: "rgba(10,10,10,0.5)", chip: "rgba(10,10,10,0.05)" }, }; const GROUPS: SelectionGroup[] = [ { id: "addons", title: "Add-ons", hint: "Billed monthly, cancel any time", options: [ { id: "analytics", title: "Advanced analytics", description: "Funnels, cohorts and retention charts.", icon: "M4 20V10m6 10V4m6 16v-7m4 7H2", price: 19 }, { id: "sso", title: "Single sign-on", description: "SAML and OIDC for your whole team.", icon: "M6 11h12v10H6zM8 11V8a4 4 0 0 1 8 0v3", price: 29, badge: "Team" }, { id: "audit", title: "Audit log", description: "Every change, searchable for a year.", icon: "M8 4h11v16H8zM5 8h3M5 12h3M5 16h3M11 9h5M11 13h5", price: 9 }, { id: "backups", title: "Hourly backups", description: "Restore to any hour in the last 30 days.", icon: "M4 12a8 8 0 1 0 2.3-5.7L4 8.5M4 4v4.5h4.5M12 8v4l3 2", price: 15 }, { id: "support", title: "Priority support", description: "Replies within one business hour.", icon: "M4 13a8 8 0 0 1 16 0v4a2 2 0 0 1-2 2h-1v-6h3M4 13v4a2 2 0 0 0 2 2h1v-6H4", price: 39 }, { id: "domains", title: "Custom domains", description: "Serve your portal from your own domain.", icon: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM3 12h18M12 3c2.5 2.5 3.8 5.5 3.8 9s-1.3 6.5-3.8 9c-2.5-2.5-3.8-5.5-3.8-9S9.5 5.5 12 3Z", price: 5 }, ], }, { id: "topics", title: "What will you track?", hint: "Pick up to 3 so we can set up your first dashboards", max: 3, options: [ { id: "revenue", title: "Revenue", description: "MRR, churn and expansion.", icon: "M12 3v18M17 7.5C17 5.6 14.8 4 12 4S7 5.6 7 7.5 9.2 11 12 11s5 1.5 5 3.5S14.8 18 12 18s-5-1.6-5-3.5" }, { id: "product", title: "Product usage", description: "Active users and feature adoption.", icon: "M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM16.5 13v7M13 16.5h7" }, { id: "marketing", title: "Marketing", description: "Campaigns, sources and signups.", icon: "M4 10v4l12 5V5L4 10Zm12 0h2a2 2 0 0 1 0 4h-2M7 15l1.5 5" }, { id: "sales", title: "Sales pipeline", description: "Deals, stages and win rate.", icon: "M3 5h18l-7 8v6l-4-2v-4L3 5Z" }, { id: "supportq", title: "Support queue", description: "Tickets, response and resolution time.", icon: "M4 5h16v11H8l-4 4V5Z" }, { id: "ops", title: "Operations", description: "Uptime, incidents and costs.", icon: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm7.4-3a7.4 7.4 0 0 0-.1-1.2l2-1.6-2-3.4-2.4 1a7.5 7.5 0 0 0-2-1.2L14.5 3h-4l-.4 2.6a7.5 7.5 0 0 0-2 1.2l-2.4-1-2 3.4 2 1.6a7.4 7.4 0 0 0 0 2.4l-2 1.6 2 3.4 2.4-1a7.5 7.5 0 0 0 2 1.2l.4 2.6h4l.4-2.6a7.5 7.5 0 0 0 2-1.2l2.4 1 2-3.4-2-1.6c.1-.4.1-.8.1-1.2Z" }, ], }, ]; export function CheckboxSelectionCards({ groups = GROUPS, defaultSelected = ["analytics", "revenue"], onContinue, theme = "dark", className }: CheckboxSelectionCardsProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [selected, setSelected] = React.useState(defaultSelected); const [limitHit, setLimitHit] = React.useState(null); const [status, setStatus] = React.useState<"idle" | "busy" | "done">("idle"); const timer = React.useRef | null>(null); const all = groups.flatMap((g) => g.options.map((o) => ({ ...o, group: g }))); const total = all.filter((o) => selected.includes(o.id)).reduce((s, o) => s + (o.price ?? 0), 0); const mv = useMotionValue(total); const shown = useTransform(mv, (x) => `$${Math.round(x)}`); React.useEffect(() => { const c = animate(mv, total, { duration: reduce ? 0 : 0.4, ease: [0.22, 1, 0.36, 1] }); return () => c.stop(); }, [total, mv, reduce]); React.useEffect(() => { if (!limitHit) return; const t = setTimeout(() => setLimitHit(null), 2400); return () => clearTimeout(t); }, [limitHit]); React.useEffect( () => () => { if (timer.current) clearTimeout(timer.current); }, [], ); const toggle = (g: SelectionGroup, id: string) => { const on = selected.includes(id); const count = g.options.filter((o) => selected.includes(o.id)).length; if (!on && g.max && count >= g.max) { setLimitHit(g.id); return; } setSelected((s) => (on ? s.filter((x) => x !== id) : [...s, id])); }; const setGroup = (g: SelectionGroup, on: boolean) => { const ids = g.options.map((o) => o.id); setSelected((s) => (on ? [...s.filter((x) => !ids.includes(x)), ...ids] : s.filter((x) => !ids.includes(x)))); }; const submit = () => { if (!selected.length || status !== "idle") return; setStatus("busy"); const done = () => setStatus("done"); const r = onContinue?.(selected, total); if (r instanceof Promise) r.then(done, () => setStatus("idle")); else timer.current = setTimeout(done, reduce ? 0 : 900); }; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.bg } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const check = (on: boolean, mixed = false) => ( ); if (status === "done") return (

Workspace ready

{selected.length} choices saved{total ? `, $${total}/mo in add-ons` : ""}. Your dashboards for {all.filter((o) => o.group.max && selected.includes(o.id)).map((o) => o.title.toLowerCase()).join(", ") || "your data"} are being built.

); return (

Step 2 of 3

Customize your workspace

Choose what you need now. Everything can be changed later in settings.

{groups.map((g) => { const count = g.options.filter((o) => selected.includes(o.id)).length; const full = !!g.max && count >= g.max; return (

{g.title}

{limitHit === g.id ? `You can pick up to ${g.max}. Unselect one to choose another.` : g.hint}

{g.max ? ( {count} / {g.max} selected ) : ( { if (el) el.indeterminate = count > 0 && count < g.options.length; }} onChange={() => setGroup(g, count !== g.options.length)} /> {check(count === g.options.length, count > 0 && count < g.options.length)} Select all )}

{g.options.map((o) => { const on = selected.includes(o.id); const locked = full && !on; return ( toggle(g, o.id)} aria-describedby={`${uid}-${o.id}-d`} aria-disabled={locked || undefined} /> {o.title} {o.badge && ( {o.badge} )} {o.description} {o.price !== undefined && ( +${o.price}/mo )} {check(on)} ); })}

); })}

{/* Summary */}

{all .filter((o) => selected.includes(o.id)) .map((o) => ( {o.title} ))}

Nothing selected yet

Add-ons {shown} /mo

); } export default CheckboxSelectionCards; 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/checkbox-selection-cards/checkbox-selection-cards.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]