{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"pricing-toggle","type":"registry:component","title":"Pricing toggle","description":"Each digit rolls to its new price on its own, and new digits grow in.","author":"Yash Bavadiya ","dependencies":["motion"],"registryDependencies":["utils"],"files":[{"path":"components/pricing-toggle.tsx","type":"registry:component","content":"\"use client\";\n\nimport { useId, useRef, useState } from \"react\";\nimport { LayoutGroup, motion } from \"motion/react\";\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\";\nimport { cn } from \"@/lib/utils\";\n\nexport type Billing = \"monthly\" | \"yearly\";\n\nexport type Plan = {\n name: string;\n blurb: string;\n monthly: number;\n yearly: number;\n features: string[];\n featured?: boolean;\n};\n\nconst EASE = \"ease-[cubic-bezier(0.23,1,0.32,1)]\";\nconst THUMB = { type: \"spring\", duration: 0.3, bounce: 0 } as const;\n// Longer than a usual UI move because a digit can travel up to nine places;\n// any faster and the roll reads as a flicker rather than counting.\nconst ROLL = { type: \"spring\", duration: 0.5, bounce: 0 } as const;\nconst OPTIONS: { value: Billing; label: string }[] = [\n { value: \"monthly\", label: \"Monthly\" },\n { value: \"yearly\", label: \"Yearly\" },\n];\n\nexport function BillingToggle({\n value,\n onChange,\n saving,\n}: {\n value: Billing;\n onChange: (value: Billing) => void;\n saving: string;\n}) {\n const reduceMotion = useReducedMotion();\n const group = useId();\n const buttons = useRef<(HTMLButtonElement | null)[]>([]);\n const yearly = value === \"yearly\";\n\n return (\n
\n \n {/* 4px of padding around 36px pills keeps the radii concentric: 22 = 18 + 4. */}\n
\n {OPTIONS.map((option, i) => {\n const checked = option.value === value;\n return (\n {\n buttons.current[i] = el;\n }}\n type=\"button\"\n role=\"radio\"\n aria-checked={checked}\n tabIndex={checked ? 0 : -1}\n onClick={() => onChange(option.value)}\n onKeyDown={(e) => {\n if (![\"ArrowLeft\", \"ArrowRight\", \"ArrowUp\", \"ArrowDown\"].includes(e.key)) return;\n e.preventDefault();\n const next = (i + 1) % OPTIONS.length;\n onChange(OPTIONS[next].value);\n buttons.current[next]?.focus();\n }}\n className={cn(\n \"relative h-9 touch-manipulation rounded-full px-4 text-sm font-medium outline-hidden transition-[scale,color] duration-150 ease-out select-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-foreground active:scale-[0.96] motion-reduce:transition-[color]\",\n checked ? \"text-foreground\" : \"text-muted-foreground hover:text-foreground\",\n )}\n >\n {checked && (\n \n )}\n {option.label}\n {option.value === \"yearly\" && , {saving}}\n \n );\n })}\n
\n \n {/* Hangs off the right edge out of flow, so it never nudges the toggle.\n Grows from its left edge, the side touching the option it describes. */}\n \n {saving}\n \n
\n );\n}\n\n// Rolls each digit to its new value in its own column, like an odometer.\n// Columns are keyed by place value, so \"9\" to \"86\" keeps the ones column and\n// grows a tens column beside it.\nexport function RollingNumber({ value, className }: { value: number; className?: string }) {\n const digits = String(Math.round(Math.abs(value)));\n // Holds every column this number has ever needed, so a column that is no\n // longer used can still shrink away instead of vanishing.\n const [slots, setSlots] = useState(digits.length);\n if (digits.length > slots) setSlots(digits.length);\n // Columns present on first render just appear; only later ones grow in.\n const [initialSlots] = useState(digits.length);\n\n return (\n \n {Array.from({ length: slots }, (_, i) => {\n const place = slots - 1 - i;\n const index = digits.length - 1 - place;\n return (\n = 0 ? Number(digits[index]) : null}\n grow={place >= initialSlots}\n />\n );\n })}\n \n );\n}\n\nfunction DigitColumn({ digit, grow }: { digit: number | null; grow: boolean }) {\n const reduceMotion = useReducedMotion();\n // A column on its way out keeps showing its last digit while it shrinks.\n const [shown, setShown] = useState(digit ?? 0);\n if (digit !== null && digit !== shown) setShown(digit);\n const present = digit !== null;\n\n return (\n \n \n {Array.from({ length: 10 }, (_, n) => (\n \n {n}\n \n ))}\n \n \n );\n}\n\nexport function PricingTable({\n plans,\n saving = \"Save 20%\",\n defaultBilling = \"monthly\",\n className,\n}: {\n plans: Plan[];\n saving?: string;\n defaultBilling?: Billing;\n className?: string;\n}) {\n const [billing, setBilling] = useState(defaultBilling);\n const yearly = billing === \"yearly\";\n\n return (\n
\n \n
\n {plans.map((plan) => {\n const price = yearly ? plan.yearly : plan.monthly;\n return (\n \n
\n

{plan.name}

\n {plan.featured && Popular}\n
\n

{plan.blurb}

\n\n {/* Bottom-aligned rather than baseline: the clipped digit columns have\n no text baseline of their own. */}\n

\n \n ${price} per {yearly ? \"year\" : \"month\"}\n \n \n $\n \n \n {/* Both suffixes share one grid cell, so swapping them never\n moves the price. */}\n {/* 5px lifts the small suffix onto the digits' baseline. */}\n \n {([\"/mo\", \"/yr\"] as const).map((suffix) => {\n const on = (suffix === \"/yr\") === yearly;\n return (\n \n {suffix}\n \n );\n })}\n \n

\n\n
    \n {plan.features.map((feature) => (\n
  • \n \n \n \n {feature}\n
    • \n ))}\n
\n\n \n Choose {plan.name}\n \n
\n );\n })}\n
\n \n );\n}\n\nconst PLANS: Plan[] = [\n {\n name: \"Starter\",\n blurb: \"For side projects.\",\n monthly: 9,\n yearly: 86,\n features: [\"3 projects\", \"Basic analytics\", \"Email support\"],\n },\n {\n name: \"Pro\",\n blurb: \"For growing products.\",\n monthly: 24,\n yearly: 230,\n features: [\"Unlimited projects\", \"Full analytics\", \"Priority support\"],\n featured: true,\n },\n {\n name: \"Team\",\n blurb: \"For whole companies.\",\n monthly: 59,\n yearly: 566,\n features: [\"Everything in Pro\", \"Shared workspaces\", \"SSO and audit log\"],\n },\n];\n\nexport default function PricingToggleDemo() {\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)"},"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)"},"theme":{"shadow-raised":"var(--shadow-raised)"}},"categories":["inputs"],"docs":"From ui lab: https://lab.xevrion.dev/lab/pricing-toggle"}