{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pricing-toggle", "type": "registry:ui", "title": "Pricing Toggle", "description": "Pricing cards with a monthly / yearly switch, digit-rolling prices, savings badges and Intl currency formatting.", "author": "WANSTUDIO ", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/pricing-toggle.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\n\nexport type BillingPeriod = \"monthly\" | \"yearly\";\n\nexport interface PricingPlan {\n id: string;\n name: string;\n /** One line under the plan name. */\n description?: string;\n /** Price per month when billed monthly. */\n monthly: number;\n /** Price per year when billed yearly. */\n yearly: number;\n features: string[];\n /** Call-to-action label. */\n cta: string;\n /** Turns the call to action into a link. */\n href?: string;\n /** Emphasise this plan (accent border, filled button, badge). */\n highlighted?: boolean;\n /** Badge text for a highlighted plan. Defaults to \"Popular\". */\n badge?: string;\n}\n\nexport interface PricingToggleProps\n extends Omit, \"defaultValue\" | \"onChange\" | \"children\"> {\n plans: PricingPlan[];\n /** Selected billing period (controlled). */\n billing?: BillingPeriod;\n /** Initial billing period (uncontrolled). */\n defaultBilling?: BillingPeriod;\n onBillingChange?: (billing: BillingPeriod) => void;\n /** ISO 4217 currency code. */\n currency?: string;\n /** BCP 47 locale used by Intl.NumberFormat. */\n locale?: string;\n /** With yearly billing, show the monthly equivalent or the yearly total as the big number. */\n yearlyDisplay?: \"perMonth\" | \"perYear\";\n /** How long each digit takes to roll, in ms. */\n rollDuration?: number;\n /** Show “Save X%” badges when yearly billing is selected. */\n showSavings?: boolean;\n /** Called when a plan's call to action is pressed (buttons only, not links). */\n onSelectPlan?: (plan: PricingPlan, billing: BillingPeriod) => void;\n /** Labels for the billing switch. */\n monthlyLabel?: string;\n yearlyLabel?: string;\n /** Highlight, toggle thumb and focus colour. */\n accent?: string;\n}\n\nconst DIGITS = [\"0\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\"];\nconst ROW = 1.15; // em — line box of one digit\n\nfunction subscribeReducedMotion(callback: () => void) {\n const mq = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n mq.addEventListener(\"change\", callback);\n return () => mq.removeEventListener(\"change\", callback);\n}\n\nfunction usePrefersReducedMotion() {\n return React.useSyncExternalStore(\n subscribeReducedMotion,\n () => window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches,\n () => false,\n );\n}\n\n/** One digit wheel. A CSS transition rolls it from whatever it showed before — never from zero. */\nfunction DigitWheel({ digit, duration }: { digit: number; duration: number }) {\n return (\n \n 0\n \n {DIGITS.map((d) => (\n \n {d}\n \n ))}\n \n \n );\n}\n\n/**\n * Splits a formatted number into keyed tokens. Integer digits are keyed by their position from the\n * right, so “29” → “290” keeps the 9 and 2 wheels (they roll) and only adds a new one.\n */\nfunction tokens(formatter: Intl.NumberFormat, value: number) {\n const parts = formatter.formatToParts(value);\n const integerDigits = parts.filter((p) => p.type === \"integer\").reduce((n, p) => n + p.value.length, 0);\n let seenInteger = 0;\n let fraction = 0;\n const counts: Record = {};\n const out: { key: string; char: string; digit: boolean }[] = [];\n for (const part of parts) {\n if (part.type === \"integer\" || part.type === \"fraction\") {\n for (const char of part.value) {\n const isDigit = char >= \"0\" && char <= \"9\";\n const key = part.type === \"integer\" ? `i${integerDigits - seenInteger++}` : `f${fraction++}`;\n out.push({ key, char, digit: isDigit });\n }\n } else {\n // Separators are keyed by the digit position that follows them; other literals by order of appearance.\n const n = (counts[part.type] = (counts[part.type] ?? 0) + 1);\n const key = part.type === \"group\" ? `g${integerDigits - seenInteger}` : `${part.type}${n}`;\n out.push({ key, char: part.value, digit: false });\n }\n }\n return out;\n}\n\nfunction RollingPrice({ value, formatter, duration }: { value: number; formatter: Intl.NumberFormat; duration: number }) {\n return (\n \n {tokens(formatter, value).map((t) =>\n t.digit ? : {t.char},\n )}\n \n );\n}\n\nfunction CheckIcon() {\n return (\n \n \n \n );\n}\n\n/**\n * Pricing cards with a monthly / yearly switch. Prices roll digit by digit from their previous value,\n * per-plan savings badges spring in for yearly billing, and a polite live region announces the new prices.\n */\nexport function PricingToggle({\n plans,\n billing: billingProp,\n defaultBilling = \"monthly\",\n onBillingChange,\n currency = \"USD\",\n locale = \"en-US\",\n yearlyDisplay = \"perMonth\",\n rollDuration = 600,\n showSavings = true,\n onSelectPlan,\n monthlyLabel = \"Monthly\",\n yearlyLabel = \"Yearly\",\n accent = \"#FF7448\",\n className = \"\",\n style,\n ...props\n}: PricingToggleProps) {\n const id = React.useId();\n const reduceMotion = usePrefersReducedMotion();\n const [internal, setInternal] = React.useState(defaultBilling);\n const billing = billingProp ?? internal;\n const yearly = billing === \"yearly\";\n const duration = reduceMotion ? 0 : rollDuration;\n const radioRefs = React.useRef<(HTMLButtonElement | null)[]>([]);\n\n const select = (next: BillingPeriod) => {\n if (next === billing) return;\n if (billingProp === undefined) setInternal(next);\n onBillingChange?.(next);\n };\n\n /** Formatter per amount: whole numbers without decimals, others with the currency's usual digits. */\n const format = React.useMemo(() => {\n const make = (digits?: number) => {\n try {\n return new Intl.NumberFormat(locale, {\n style: \"currency\",\n currency,\n ...(digits === undefined ? {} : { minimumFractionDigits: digits, maximumFractionDigits: digits }),\n });\n } catch {\n return new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency: \"USD\" });\n }\n };\n const base = make();\n const whole = make(0);\n return (amount: number) => (Number.isInteger(amount) ? whole : base);\n }, [currency, locale]);\n\n const amountFor = (plan: PricingPlan) => {\n if (!yearly) return plan.monthly;\n return yearlyDisplay === \"perMonth\" ? Math.round((plan.yearly / 12) * 100) / 100 : plan.yearly;\n };\n const periodFor = () => (!yearly || yearlyDisplay === \"perMonth\" ? \"/mo\" : \"/yr\");\n const savingFor = (plan: PricingPlan) =>\n plan.monthly > 0 ? Math.round((1 - plan.yearly / (plan.monthly * 12)) * 100) : 0;\n const bestSaving = Math.max(0, ...plans.map(savingFor));\n\n const spoken = (plan: PricingPlan) => {\n const amount = amountFor(plan);\n const text = format(amount).format(amount);\n if (!yearly) return `${text} per month`;\n const saving = showSavings && savingFor(plan) > 0 ? `, saving ${savingFor(plan)}%` : \"\";\n return yearlyDisplay === \"perMonth\"\n ? `${text} per month, billed yearly at ${format(plan.yearly).format(plan.yearly)}${saving}`\n : `${text} per year${saving}`;\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (![\"ArrowLeft\", \"ArrowRight\", \"ArrowUp\", \"ArrowDown\", \"Home\", \"End\"].includes(event.key)) return;\n event.preventDefault();\n const next: BillingPeriod =\n event.key === \"Home\" ? \"monthly\" : event.key === \"End\" ? \"yearly\" : billing === \"monthly\" ? \"yearly\" : \"monthly\";\n radioRefs.current[next === \"monthly\" ? 0 : 1]?.focus();\n select(next);\n };\n\n const focusRing =\n \"outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-[var(--pt-accent)]\";\n const springy = reduceMotion ? { duration: 0 } : { type: \"spring\" as const, stiffness: 420, damping: 32, mass: 0.8 };\n\n return (\n
\n {/* Billing period: a two-option radio group with a sliding thumb. */}\n \n {([\"monthly\", \"yearly\"] as const).map((period, i) => {\n const checked = billing === period;\n return (\n {\n radioRefs.current[i] = el;\n }}\n type=\"button\"\n role=\"radio\"\n aria-checked={checked}\n tabIndex={checked ? 0 : -1}\n onClick={() => select(period)}\n className={`relative inline-flex h-9 items-center gap-2 rounded-full px-4 text-sm font-medium tracking-tight transition-colors duration-200 ${focusRing} ${\n checked ? \"text-zinc-950 dark:text-white\" : \"text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100\"\n }`}\n >\n {checked && (\n \n )}\n {period === \"monthly\" ? monthlyLabel : yearlyLabel}\n {period === \"yearly\" && showSavings && bestSaving > 0 && (\n \n −{bestSaving}%\n \n )}\n \n );\n })}\n
\n\n
    \n {plans.map((plan) => {\n const amount = amountFor(plan);\n const saving = savingFor(plan);\n const highlighted = plan.highlighted;\n const ctaClass = `mt-6 inline-flex h-10 w-full items-center justify-center rounded-lg text-sm font-medium tracking-tight transition-colors duration-150 ${focusRing} ${\n highlighted\n ? \"bg-[var(--pt-accent)] text-zinc-950 hover:brightness-95\"\n : \"border border-zinc-900/15 bg-white text-zinc-900 hover:bg-zinc-50 dark:border-white/15 dark:bg-white/[0.04] dark:text-zinc-100 dark:hover:bg-white/[0.08]\"\n }`;\n return (\n
  • \n \n
    \n

    \n {plan.name}\n

    \n {highlighted && (\n \n {plan.badge ?? \"Popular\"}\n \n )}\n
    \n {plan.description &&

    {plan.description}

    }\n\n
    \n \n \n \n \n {periodFor()}\n \n {spoken(plan)}\n
    \n
    \n

    \n {yearly ? (yearlyDisplay === \"perMonth\" ? `Billed ${format(plan.yearly).format(plan.yearly)} yearly` : \"Billed yearly\") : \"Billed monthly\"}\n

    \n \n {yearly && showSavings && saving > 0 && (\n \n Save {saving}%\n \n )}\n \n
    \n\n
      \n {plan.features.map((feature) => (\n
    • \n \n \n \n {feature}\n
      • \n ))}\n
    \n\n
    \n {plan.href ? (\n \n {plan.cta}\n \n ) : (\n \n )}\n
    \n \n
    • \n );\n })}\n
\n\n {/* Announces the new prices after the billing period changes (initial content is not read out). */}\n

\n {`${yearly ? yearlyLabel : monthlyLabel} billing. ${plans.map((plan) => `${plan.name}: ${spoken(plan)}.`).join(\" \")}`}\n

\n \n );\n}\n", "type": "registry:ui" } ], "categories": [ "cards" ], "docs": "Documentation: https://wancraft.my/components/pricing-toggle" }