{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"pricing-calculator","type":"registry:component","title":"Pricing calculator","description":"Itemizes your bill like an invoice and upgrades the plan the moment your team crosses a seat threshold.","author":"Yash Bavadiya ","dependencies":["motion"],"registryDependencies":["utils"],"files":[{"path":"components/pricing-calculator.tsx","type":"registry:component","content":"\"use client\";\n\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport {\n AnimatePresence,\n motion,\n useSpring,\n useTransform,\n type MotionValue,\n} from \"motion/react\";\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\";\nimport { cn } from \"@/lib/utils\";\n\nexport type Plan = {\n name: string;\n // The plan applies from this many seats up, until the next plan's minimum.\n minSeats: number;\n // Per seat, per month, before the yearly discount.\n seatPrice: number;\n};\n\ntype Billing = \"monthly\" | \"yearly\";\n\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\nconst BLUR_IN = {\n initial: { opacity: 0, y: 4, filter: \"blur(4px)\" },\n animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n exit: { opacity: 0, y: -2, filter: \"blur(2px)\" },\n};\n\nfunction planFor(plans: Plan[], seats: number) {\n let found = plans[0];\n for (const plan of plans) if (seats >= plan.minSeats) found = plan;\n return found;\n}\n\nfunction money(value: number, cents = true) {\n return value.toLocaleString(\"en-US\", {\n style: \"currency\",\n currency: \"USD\",\n minimumFractionDigits: cents ? 2 : 0,\n maximumFractionDigits: cents ? 2 : 0,\n });\n}\n\nexport function PricingCalculator({\n plans,\n maxSeats = 50,\n defaultSeats = 6,\n yearlyDiscount = 0.2,\n className,\n}: {\n // Cheapest per seat last; the first plan's price is the list price every\n // discount is measured against.\n plans: Plan[];\n maxSeats?: number;\n defaultSeats?: number;\n yearlyDiscount?: number;\n className?: string;\n}) {\n const reduceMotion = useReducedMotion() ?? false;\n const [seats, setSeats] = useState(defaultSeats);\n const [billing, setBilling] = useState(\"monthly\");\n const plan = planFor(plans, seats);\n const list = plans[0];\n\n // Why the plan is what it is, rewritten only when a threshold is crossed\n // so it reads as the reason for the change that just happened.\n const [note, setNote] = useState(() => initialNote(plans, plan));\n const lastPlan = useRef(plan);\n useEffect(() => {\n const before = lastPlan.current;\n if (before === plan) return;\n lastPlan.current = plan;\n const up = plan.minSeats > before.minSeats;\n setNote(\n up\n ? `${plan.name} from ${plan.minSeats} seats: every seat is now ${money(plan.seatPrice)}.`\n : `Under ${before.minSeats} seats, back to ${plan.name} at ${money(plan.seatPrice)}.`,\n );\n }, [plan]);\n\n const gross = seats * list.seatPrice;\n const volume = seats * (list.seatPrice - plan.seatPrice);\n const monthly = gross - volume;\n const yearlyCut = billing === \"yearly\" ? monthly * yearlyDiscount : 0;\n const total = monthly - yearlyCut;\n const hasVolume = plan !== list;\n const yearly = billing === \"yearly\";\n\n return (\n \n
\n
\n

Your team

\n {/* The wheels are boxes, so there is no shared baseline: the\n label sits on the bottom edge and 4px lifts it onto the\n digits' baseline. */}\n

\n {/* Rolls like the prices below, so the cause and the effect\n move the same way. */}\n \n \n {seats === 1 ? \"seat\" : \"seats\"}\n \n

\n
\n \n
\n\n
\n \n {/* A fixed slot, so the invoice below never shifts: one line where\n the notes fit on one, two on a phone. */}\n
\n \n \n {note}\n \n \n
\n
\n\n \n\n
\n \n \n \n
\n
\n Total\n
\n \n \n {yearly\n ? `Billed ${money(total * 12, false)} a year`\n : \"Billed monthly\"}\n \n \n
\n
\n
\n \n {money(monthly)}\n \n \n \n \n /mo\n
\n
\n
\n \n );\n}\n\nfunction initialNote(plans: Plan[], plan: Plan) {\n const next = plans[plans.indexOf(plan) + 1];\n return next\n ? `${next.name} pricing kicks in at ${next.minSeats} seats.`\n : `${plan.name} pricing applies from ${plan.minSeats} seats.`;\n}\n\nfunction Row({\n label,\n value,\n dim,\n reduceMotion,\n}: {\n label: string;\n value: number;\n dim?: boolean;\n reduceMotion: boolean;\n}) {\n return (\n \n
\n \n \n {label}\n \n \n
\n
\n \n
\n \n );\n}\n\n// The monthly price you'd have paid, crossed out by a line that draws across\n// it, left to right, the moment yearly billing is on.\nfunction Struck({\n show,\n reduceMotion,\n children,\n}: {\n show: boolean;\n reduceMotion: boolean;\n children: React.ReactNode;\n}) {\n return (\n \n {show && (\n \n was \n {children}\n \n \n )}\n \n );\n}\n\n// Every digit is its own wheel, keyed from the right so the cents stay the\n// cents as the number grows. Each wheel takes the short way round, so a 9\n// becoming a 0 rolls forward one notch instead of back through eight.\nfunction RollingMoney({\n value,\n reduceMotion,\n}: {\n value: number;\n reduceMotion: boolean;\n}) {\n const negative = value < -0.004;\n const text = money(Math.abs(value));\n const chars = [...text];\n return (\n \n {negative ? `minus ${text}` : text}\n \n {/* A real minus sign, kept as a static glyph that fades. */}\n \n −\n \n {chars.map((char, i) => {\n const fromRight = chars.length - 1 - i;\n return /\\d/.test(char) ? (\n \n ) : (\n \n {char}\n \n );\n })}\n \n \n );\n}\n\nfunction RollingCount({\n value,\n reduceMotion,\n}: {\n value: number;\n reduceMotion: boolean;\n}) {\n const chars = [...String(value)];\n return (\n \n {value}\n \n {chars.map((char, i) => (\n \n ))}\n \n \n );\n}\n\nfunction Digit({\n digit,\n reduceMotion,\n}: {\n digit: number;\n reduceMotion: boolean;\n}) {\n const target = useRef(digit);\n const position = useSpring(digit, { visualDuration: 0.35, bounce: 0.1 });\n\n useEffect(() => {\n const current = ((target.current % 10) + 10) % 10;\n const delta = ((digit - current + 15) % 10) - 5;\n target.current += delta;\n if (reduceMotion) position.jump(target.current);\n else position.set(target.current);\n }, [digit, reduceMotion, position]);\n\n return (\n \n {Array.from({ length: 10 }, (_, g) => (\n \n ))}\n \n );\n}\n\nfunction Glyph({\n glyph,\n position,\n}: {\n glyph: number;\n position: MotionValue;\n}) {\n // Each glyph sits within five slots of the position, so ten nodes make an\n // endless wheel; the jump from +5 to -5 happens out of sight.\n const transform = useTransform(position, (p) => {\n const offset = ((((glyph - p) % 10) + 15) % 10) - 5;\n return `translateY(${offset * 100}%)`;\n });\n return (\n \n {glyph}\n \n );\n}\n\nfunction PlanBadge({\n plan,\n rank,\n reduceMotion,\n}: {\n plan: Plan;\n rank: number;\n reduceMotion: boolean;\n}) {\n return (\n = 2 && \"bg-foreground text-background\",\n )}\n >\n \n Plan\n \n \n \n {plan.name}\n \n \n \n );\n}\n\nfunction SeatSlider({\n value,\n max,\n thresholds,\n onChange,\n reduceMotion,\n}: {\n value: number;\n max: number;\n thresholds: Plan[];\n onChange: (seats: number) => void;\n reduceMotion: boolean;\n}) {\n const id = useId();\n const at = (seats: number) => (seats - 1) / (max - 1);\n // The fill glides behind the thumb, so a keyboard step or a click on the\n // track travels instead of jumping.\n const fill = useSpring(at(value), { visualDuration: 0.2, bounce: 0 });\n useEffect(() => {\n if (reduceMotion) fill.jump(at(value));\n else fill.set(at(value));\n });\n const scaleX = fill;\n // The thumb's centre travels inside the track minus its own width, the\n // way a native range input places it.\n const left = useTransform(fill, (f) => `calc(${f * 100}% - ${f * 20}px)`);\n\n return (\n
\n \n
\n
\n \n
\n {thresholds.map((plan) => (\n = plan.minSeats ? \"bg-background\" : \"bg-muted-foreground/60\",\n )}\n style={{\n left: `calc(${at(plan.minSeats) * 100}% + ${10 - at(plan.minSeats) * 20}px)`,\n }}\n />\n ))}\n \n onChange(Number(e.target.value))}\n aria-valuetext={`${value} ${value === 1 ? \"seat\" : \"seats\"}`}\n className=\"peer absolute inset-0 h-full w-full cursor-pointer touch-pan-y appearance-none rounded-full opacity-0\"\n />\n \n
\n \n 1\n {thresholds.map((plan) => (\n = plan.minSeats && \"text-foreground\",\n )}\n style={{\n left: `calc(${at(plan.minSeats) * 100}% + ${10 - at(plan.minSeats) * 20}px)`,\n }}\n >\n {plan.minSeats} · {plan.name}\n \n ))}\n {max}\n
\n \n );\n}\n\nfunction BillingSwitch({\n value,\n onChange,\n discount,\n}: {\n value: Billing;\n onChange: (b: Billing) => void;\n discount: number;\n}) {\n const options: { id: Billing; label: string }[] = [\n { id: \"monthly\", label: \"Monthly\" },\n { id: \"yearly\", label: \"Yearly\" },\n ];\n return (\n {\n if (\n [\"ArrowLeft\", \"ArrowRight\", \"ArrowUp\", \"ArrowDown\"].includes(e.key)\n ) {\n e.preventDefault();\n const next = value === \"monthly\" ? \"yearly\" : \"monthly\";\n onChange(next);\n (\n e.currentTarget.querySelector(\n `[data-id=\"${next}\"]`,\n ) as HTMLElement | null\n )?.focus();\n }\n }}\n >\n \n {options.map((option) => {\n const active = option.id === value;\n return (\n onChange(option.id)}\n className={cn(\n \"relative flex touch-manipulation items-center justify-center gap-1.5 rounded-full text-[14px] font-medium outline-hidden transition-[color,scale] duration-150 ease-out focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-foreground active:scale-[0.96]\",\n active ? \"text-foreground\" : \"text-muted-foreground\",\n )}\n >\n {option.label}\n {option.id === \"yearly\" && (\n \n −{Math.round(discount * 100)}%\n \n )}\n \n );\n })}\n \n );\n}\n\nconst PLANS: Plan[] = [\n { name: \"Starter\", minSeats: 1, seatPrice: 12 },\n { name: \"Team\", minSeats: 10, seatPrice: 10 },\n { name: \"Business\", minSeats: 25, seatPrice: 8 },\n];\n\nexport default function PricingCalculatorDemo() {\n return ;\n}\n"},{"path":"hooks/use-reduced-motion.ts","type":"registry:hook","target":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n"}],"cssVars":{"light":{"shadow-raised":"0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 16px -6px oklch(0 0 0 / 0.12)","shadow-wheel":"inset 0 1px 2px oklch(0 0 0 / 0.08), inset 0 0 0 1px oklch(0 0 0 / 0.04)"},"dark":{"shadow-raised":"0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 16px -6px oklch(0 0 0 / 0.6)","shadow-wheel":"inset 0 1px 2px oklch(0 0 0 / 0.5), inset 0 0 0 1px oklch(1 0 0 / 0.04)"},"theme":{"shadow-raised":"var(--shadow-raised)","shadow-wheel":"var(--shadow-wheel)"}},"categories":["data"],"docs":"From ui lab: https://lab.xevrion.dev/lab/pricing-calculator"}