50: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 51:I[544296,["/_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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"],"ItemStyles"] 52:I[34002,["/_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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"],"CodeEditor"] 53: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 54:T3f7c,// Hairline UI · comparison-table · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { Price, PricingToggle } from "./pricing-toggle"; /* ───────────────────────────────────────────────────────── * COMPARISON TABLE: plans side by side, and one that stands out * * rest the recommended plan sits in a hairline column that * runs the height of the table * point move across the table and the column glides to the * plan under you with a little give, then settles * back when you leave * billing Monthly/Yearly is thrown to the choice and every * price rolls; the note under it slides the same way * groups each section folds open and shut to its height * phone one plan at a time: a switch is thrown to the plan * and its column slides in from the side you went * * Header stays at the top while the features scroll past. * ───────────────────────────────────────────────────────── */ export interface ComparisonPlan { id: string; name: string; /** Monthly price, or { monthly, yearly } per month; null for "Custom". */ price: number | { monthly: number; yearly: number } | null; description?: string; /** The column that's highlighted at rest. */ featured?: boolean; badge?: string; cta?: { label: string; href?: string; onClick?: () => void }; } export type ComparisonValue = boolean | string | number | null | undefined; export interface ComparisonRow { label: string; hint?: string; values: Record; } export interface ComparisonGroup { title: string; rows: ComparisonRow[]; /** Start folded. */ collapsed?: boolean; } export interface ComparisonTableProps extends React.HTMLAttributes { plans: ComparisonPlan[]; groups: ComparisonGroup[]; currency?: string; /** Shows a Monthly/Yearly switch, e.g. "Save 20%". */ yearlyBadge?: string; /** How far from the top the header sticks (e.g. under a fixed navbar). */ stickyTop?: number; } const EASE = "cubic-bezier(0.16,1,0.3,1)"; const THROW = "cubic-bezier(0.34,1.36,0.64,1)"; const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background"; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); function Cell({ value }: { value: ComparisonValue }) { if (value === true) return ( ); if (value === false || value === null || value === undefined) return ( ); return {value}; } export function ComparisonTable({ plans, groups, currency = "USD", yearlyBadge, stickyTop = 0, className = "", ...props }: ComparisonTableProps) { const reduced = useReducedMotion(); const id = React.useId(); const [billing, setBilling] = React.useState("monthly"); const [billingDir, setBillingDir] = React.useState(1); const [hover, setHover] = React.useState(null); const [selected, setSelected] = React.useState(() => Math.max(0, plans.findIndex((p) => p.featured))); const [dir, setDir] = React.useState(1); const [open, setOpen] = React.useState(() => groups.map((g) => !g.collapsed)); const [cols, setCols] = React.useState<{ left: number; width: number }[]>([]); const [ready, setReady] = React.useState(false); const headRefs = React.useRef<(HTMLDivElement | null)[]>([]); const headerRef = React.useRef(null); const [headerHeight, setHeaderHeight] = React.useState(0); const switchRefs = React.useRef<(HTMLButtonElement | null)[]>([]); const [thumb, setThumb] = React.useState({ left: 0, width: 0 }); const featured = plans.findIndex((p) => p.featured); const lit = hover ?? (featured >= 0 ? featured : null); const template = `minmax(9.5rem,1.35fr) repeat(${plans.length}, minmax(0,1fr))`; // Where each plan's column is, so the highlight can glide between them. React.useLayoutEffect(() => { const measure = () => { const next = headRefs.current.map((el) => ({ left: el?.offsetLeft ?? 0, width: el?.offsetWidth ?? 0 })); setCols((c) => (c.length === next.length && c.every((x, i) => x.left === next[i].left && x.width === next[i].width) ? c : next)); setHeaderHeight((h) => (h === headerRef.current?.offsetHeight ? h : (headerRef.current?.offsetHeight ?? 0))); }; measure(); const observer = new ResizeObserver(measure); headRefs.current.forEach((el) => el && observer.observe(el)); if (headerRef.current) observer.observe(headerRef.current); const frame = requestAnimationFrame(() => setReady(true)); return () => { observer.disconnect(); cancelAnimationFrame(frame); }; }, [plans.length]); // The phone switch's thumb. React.useLayoutEffect(() => { const el = switchRefs.current[selected]; if (el) setThumb((t) => (t.left === el.offsetLeft && t.width === el.offsetWidth ? t : { left: el.offsetLeft, width: el.offsetWidth })); }, [selected, plans.length]); const pick = (i: number) => { setDir(i >= selected ? 1 : -1); setSelected(i); }; const onMove = (e: React.PointerEvent) => { if (e.pointerType === "touch") return; const x = e.clientX - (e.currentTarget as HTMLElement).getBoundingClientRect().left; const i = cols.findIndex((c) => x >= c.left - 6 && x <= c.left + c.width + 6); setHover(i >= 0 ? i : null); }; const column = lit !== null ? cols[lit] : undefined; const glide = ready && !reduced ? `transform 520ms ${THROW}, width 420ms ${EASE}, opacity 300ms ${EASE}` : "none"; // On a phone only the chosen plan shows; it slides in from the side you went. const phone = (i: number) => (i === selected ? `max-sm:block ${dir > 0 ? "max-sm:animate-[ui-slide-from-right_360ms_cubic-bezier(0.16,1,0.3,1)_both]" : "max-sm:animate-[ui-slide-from-left_360ms_cubic-bezier(0.16,1,0.3,1)_both]"} motion-reduce:animate-none` : "max-sm:hidden"); const priceOf = (plan: ComparisonPlan) => (plan.price === null ? null : typeof plan.price === "number" ? plan.price : billing === "yearly" ? plan.price.yearly : plan.price.monthly); return (

{yearlyBadge && ( { setBillingDir(v === "yearly" ? 1 : -1); setBilling(v); }} options={[ { value: "monthly", label: "Monthly" }, { value: "yearly", label: "Yearly", badge: yearlyBadge }, ]} /> )} {/* Phones: one plan at a time. */}

{plans.map((p, i) => ( ))}

setHover(null)}> {/* The column that runs the height of the table and glides between plans: this part under the header… */} {/* Plan headers, kept in view while the features scroll by. */}

{/* …and this part in the header, gliding in step, so the column reads as one even while the header sticks. */}

Feature

{plans.map((plan, i) => { const amount = priceOf(plan); return (

{ headRefs.current[i] = el; }} role="columnheader" aria-label={plan.name} className={`relative px-4 pb-5 pt-5 max-sm:col-span-2 max-sm:px-0 ${phone(i)}`} >

{plan.name} {plan.badge && {plan.badge}}

{plan.description &&

{plan.description}

}

{amount === null ? (

Custom

) : ( )}

{plan.cta && ( { if (plan.cta?.onClick) { e.preventDefault(); plan.cta.onClick(); } }} className={`relative mt-4 flex h-9 items-center justify-center rounded-full text-[13px] font-medium transition-[background-color,color,box-shadow] duration-300 ${FOCUS} ${ plan.featured ? "bg-primary text-primary-foreground hover:bg-primary/90" : "text-foreground shadow-[inset_0_0_0_1px_var(--border)] hover:bg-accent" }`} > {plan.cta.label} )}

); })}

{groups.map((group, g) => { const isOpen = open[g]; const groupId = `${id}-g${g}`; return (

{group.rows.map((row) => (

{row.label} {row.hint && {row.hint}}

{plans.map((plan, i) => (

))}

); })} {/* Closes the column at the bottom. */}

); } 4f:["$","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":[null,["$","$L50",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/pricing-toggle.json?as=dependency"]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes ui-slide-from-right {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateX(8px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: none;\n\t}\n}\n\n@keyframes ui-slide-from-left {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateX(-8px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: none;\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/comparison-table.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]