{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"subscription","type":"registry:block","title":"Subscription","description":"A billing page in one card: the plan with a ring through its billing period, usage, card and invoices, and a cancel that offers a pause first.","author":"Hairline UI","dependencies":["lucide-react"],"registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/segmented-control.json?as=dependency","https://hairlineui.com/r/status-button.json?as=dependency","https://hairlineui.com/r/text-morph.json?as=dependency","https://hairlineui.com/r/textarea.json?as=dependency"],"files":[{"path":"registry/subscription.tsx","type":"registry:component","content":"// Hairline UI · subscription · MIT License\n// Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components\n\n\"use client\";\n\nimport * as React from \"react\";\nimport { ArrowDownToLine, ChevronLeft } from \"lucide-react\";\nimport { Faces, FACES_MORPH } from \"./faces\";\nimport { NumberRoll } from \"./number-roll\";\nimport { SegmentedControl } from \"./segmented-control\";\nimport { StatusButton, type ActionStatus } from \"./status-button\";\nimport { Textarea } from \"./textarea\";\nimport { TextMorph } from \"./text-morph\";\nimport { EASE_THROW, INTERACTION_FOCUS, INTERACTION_PRESS, useInteractionReducedMotion } from \"./ui-interaction-motion\";\n\n/* ─────────────────────────────────────────────────────────\n * SUBSCRIPTION: a plan you can see through to its next bill\n *\n * plan the lit card holds the plan, its price and a ring\n * that fills through the billing period, the days left\n * in its middle; under it usage, the card on file and\n * invoices, all flat\n * pause Cancel plan turns the lower half into \"Pause\n * instead?\": pick one, two or three months and the date\n * billing resumes rolls to match\n * cancel only past the offer, a reason and a note, then\n * Cancel subscription; the card says when it ends\n * resume a paused or ending plan offers Resume in place\n *\n * Billing is yours: pass the plan, status, period and usage from\n * your provider, and do the work in onPause, onCancel, onResume and\n * onUpdateCard (open your provider's portal there). Throw an Error\n * and its message shows where it happened.\n * ───────────────────────────────────────────────────────── */\n\nexport type SubscriptionStatus = \"active\" | \"trialing\" | \"past_due\" | \"paused\" | \"canceling\";\n\nexport interface SubscriptionPlan {\n name: string;\n /** Per interval, major units. */\n price: number;\n interval: \"month\" | \"year\";\n seats?: number;\n}\n\nexport interface SubscriptionUsage {\n id: string;\n label: string;\n used: number;\n limit: number;\n /** e.g. \"runs\", \"GB\". */\n unit?: string;\n}\n\nexport interface SubscriptionCard {\n /** e.g. \"Visa\". */\n brand: string;\n last4: string;\n expMonth: number;\n expYear: number;\n}\n\nexport interface SubscriptionInvoice {\n id: string;\n date: Date | string | number;\n amount: number;\n status: \"paid\" | \"open\" | \"failed\";\n /** A PDF or hosted invoice page. */\n url?: string;\n}\n\nexport interface SubscriptionProps {\n plan: SubscriptionPlan;\n status: SubscriptionStatus;\n periodStart: Date | string | number;\n /** When it renews, or ends while canceling. */\n periodEnd: Date | string | number;\n /** When billing resumes, while paused. */\n resumesAt?: Date | string | number;\n usage?: SubscriptionUsage[];\n card?: SubscriptionCard;\n invoices?: SubscriptionInvoice[];\n /** Open your provider's portal (or a form) to change the card. */\n onUpdateCard?: () => Promise;\n /** Go to your plans, e.g. the Pricing plans block. */\n onChangePlan?: () => void;\n /** Pause billing for this many months; shows the offer before cancelling. */\n onPause?: (months: number) => Promise;\n onCancel?: (reason: string, comment: string) => Promise;\n /** Undo a pause or a cancel that hasn't ended yet. */\n onResume?: () => Promise;\n pauseMonths?: number[];\n reasons?: string[];\n currency?: string;\n locale?: string;\n className?: string;\n}\n\nconst EASE = \"cubic-bezier(0.16,1,0.3,1)\";\nconst DAY = 86_400_000;\nconst PAUSE = [1, 2, 3];\nconst REASONS = [\"Too expensive\", \"Not using it enough\", \"Missing a feature\", \"Switching to another tool\", \"Something else\"];\nconst NONE: never[] = [];\nconst subscribeNothing = () => () => {};\n/** False on the server and while hydrating, so dates are written once, in the visitor's own zone. */\nconst useHydrated = () => React.useSyncExternalStore(subscribeNothing, () => true, () => false);\n\nconst mix = (color: string, amount: number, into = \"transparent\") => `color-mix(in oklab, ${color} ${amount}%, ${into})`;\nconst LIT: React.CSSProperties = {\n backgroundColor: \"var(--primary)\",\n backgroundImage: `radial-gradient(120% 90% at 100% 0%, ${mix(\"var(--primary-foreground)\", 22)} 0%, transparent 55%), linear-gradient(175deg, transparent 40%, ${mix(\"black\", 24)} 100%)`,\n boxShadow: `inset 0 1px 0 ${mix(\"var(--primary-foreground)\", 36)}, inset 0 0 0 1px ${mix(\"var(--primary-foreground)\", 12)}`,\n};\nconst CARD: React.CSSProperties = {\n backgroundImage: `linear-gradient(180deg, var(--card), ${mix(\"var(--card)\", 95, \"var(--foreground)\")})`,\n boxShadow: `0 0 0 1px var(--border), inset 0 1px 0 ${mix(\"var(--background)\", 85)}`,\n};\nconst ACTION: React.CSSProperties = {\n backgroundImage: `linear-gradient(180deg, ${mix(\"var(--primary-foreground)\", 16)}, transparent 60%)`,\n boxShadow: `inset 0 1px 0 ${mix(\"var(--primary-foreground)\", 32)}, inset 0 0 0 1px ${mix(\"black\", 10)}`,\n};\nconst errorOf = (e: unknown, fallback: string) => (e instanceof Error && e.message ? e.message : fallback);\nconst addMonths = (t: number, m: number) => {\n const d = new Date(t);\n d.setMonth(d.getMonth() + m);\n return d.getTime();\n};\n\n/** The billing period as a ring: how far through it you are, the days left in the middle. */\nfunction PeriodRing({ share, days, dim, reduced }: { share: number; days: number | null; dim: boolean; reduced: boolean }) {\n const r = 22;\n const c = 2 * Math.PI * r;\n return (\n \n \n \n \n {/* Fine ticks round the ring, one per week of the period. */}\n {Array.from({ length: 12 }, (_, i) => (\n \n ))}\n \n \n {days === null ? \"–\" : }\n {days === 1 ? \"day\" : \"days\"}\n \n \n );\n}\n\nexport function Subscription({\n plan,\n status,\n periodStart,\n periodEnd,\n resumesAt,\n usage = NONE,\n card,\n invoices = NONE,\n onUpdateCard,\n onChangePlan,\n onPause,\n onCancel,\n onResume,\n pauseMonths = PAUSE,\n reasons = REASONS,\n currency = \"USD\",\n locale,\n className = \"\",\n}: SubscriptionProps) {\n const reduced = useInteractionReducedMotion();\n const hydrated = useHydrated();\n const baseId = React.useId();\n const loc = locale ?? (hydrated ? undefined : \"en-US\");\n const [now, setNow] = React.useState(null);\n const [ready, setReady] = React.useState(false);\n const [step, setStep] = React.useState<0 | 1 | 2>(0);\n const [months, setMonths] = React.useState(pauseMonths[Math.min(1, pauseMonths.length - 1)] ?? 1);\n const [reason, setReason] = React.useState(null);\n const [comment, setComment] = React.useState(\"\");\n const [act, setAct] = React.useState<{ kind: \"pause\" | \"cancel\" | \"resume\" | \"card\" | null; status: ActionStatus; error?: string }>({ kind: null, status: \"idle\" });\n const [said, setSaid] = React.useState(\"\");\n const faceRefs = React.useRef<(HTMLElement | null)[]>([]);\n\n React.useEffect(() => {\n const frame = requestAnimationFrame(() => {\n setNow(Date.now());\n setReady(true);\n });\n return () => cancelAnimationFrame(frame);\n }, []);\n\n const start = new Date(periodStart).getTime();\n const end = new Date(periodEnd).getTime();\n const share = now === null ? 0 : Math.min(1, Math.max(0, (now - start) / (end - start)));\n // While paused the ring counts down to when billing comes back, not to the old renewal.\n const until = status === \"paused\" && resumesAt !== undefined ? new Date(resumesAt).getTime() : end;\n const daysLeft = now === null ? null : Math.max(0, Math.ceil((until - now) / DAY));\n const date = (t: Date | string | number) => (hydrated ? new Intl.DateTimeFormat(loc, { month: \"short\", day: \"numeric\", year: new Date(t).getFullYear() !== new Date(now ?? end).getFullYear() ? \"numeric\" : undefined }).format(new Date(t)) : \"\");\n const money = (n: number) => new Intl.NumberFormat(loc, { style: \"currency\", currency, minimumFractionDigits: n % 1 ? 2 : 0, maximumFractionDigits: 2 }).format(n);\n const resumeAt = addMonths(end, months);\n const busy = act.status === \"pending\" || act.status === \"success\";\n\n const state =\n status === \"paused\"\n ? `Paused until ${date(resumesAt ?? end)}`\n : status === \"canceling\"\n ? `Ends ${date(end)}`\n : status === \"trialing\"\n ? `Trial ends ${date(end)}`\n : status === \"past_due\"\n ? \"Payment failed\"\n : `Renews ${date(end)}`;\n\n const go = (s: 0 | 1 | 2) => {\n if (busy) return;\n setStep(s);\n setAct({ kind: null, status: \"idle\" });\n // Focus follows once the surface is mostly turned.\n window.setTimeout(() => faceRefs.current[s]?.focus({ preventScroll: true }), reduced ? 0 : FACES_MORPH / 2);\n };\n\n const run = async (kind: \"pause\" | \"cancel\" | \"resume\" | \"card\", fn: (() => Promise) | undefined, done: string) => {\n if (!fn || busy) return;\n setAct({ kind, status: \"pending\" });\n try {\n await fn();\n setAct({ kind, status: \"success\" });\n setSaid(done);\n window.setTimeout(\n () => {\n if (kind !== \"card\") setStep(0);\n setAct({ kind: null, status: \"idle\" });\n },\n kind === \"card\" ? 1200 : reduced ? 600 : 900,\n );\n } catch (e) {\n setAct({ kind, status: \"error\", error: errorOf(e, \"That didn’t go through. Try again.\") });\n }\n };\n\n const st = (kind: \"pause\" | \"cancel\" | \"resume\" | \"card\") => (act.kind === kind ? act.status : \"idle\");\n const ghost = `inline-flex h-10 cursor-pointer items-center justify-center rounded-full px-4 text-[13.5px] font-medium ${INTERACTION_PRESS} ${INTERACTION_FOCUS}`;\n const ending = status === \"paused\" || status === \"canceling\";\n\n return (\n
\n {/* Its natural width where the parent sizes to its content, without forcing it on narrow screens. */}\n
\n
\n {/* The one lit surface: the plan, and the ring of its billing period. */}\n
\n
\n
\n

Your plan

\n

\n {plan.name}\n {plan.seats ? · {plan.seats} seats : null}\n

\n

\n \n \n \n /{plan.interval === \"year\" ? \"yr\" : \"mo\"}\n

\n
\n \n
\n

\n \n {hydrated ? state : \" \"}\n

\n
\n\n {/* Flat: the details, or the way out, which always offers a pause first. */}\n \n {\n faceRefs.current[0] = el;\n }}\n tabIndex={-1}\n className=\"px-2 pb-1 pt-1 outline-none\"\n >\n {usage.length > 0 && (\n
\n {usage.map((u) => {\n const pct = Math.min(1, u.used / u.limit);\n const hot = pct >= 0.9;\n return (\n
\n
\n {u.label}\n \n / {new Intl.NumberFormat(loc).format(u.limit)}\n {u.unit ? ` ${u.unit}` : \"\"}\n \n
\n
\n \n
\n
\n );\n })}\n
\n )}\n\n {card && (\n
\n \n {card.brand.slice(0, 4)}\n \n \n \n {card.brand} •••• {card.last4}\n \n \n Expires {String(card.expMonth).padStart(2, \"0\")}/{String(card.expYear).slice(-2)}\n \n \n {onUpdateCard && (\n void run(\"card\", onUpdateCard, \"Opened the payment page.\")}\n className=\"-mr-1 shrink-0 text-foreground\"\n />\n )}\n
\n )}\n {act.kind === \"card\" && act.error && (\n

\n {act.error}\n

\n )}\n\n {invoices.length > 0 && (\n
\n

Invoices

\n
    \n {invoices.slice(0, 3).map((inv) => (\n
  • \n {date(inv.date)}\n \n {inv.status === \"paid\" ? \"Paid\" : inv.status === \"open\" ? \"Open\" : \"Failed\"}\n \n {money(inv.amount)}\n {inv.url ? (\n \n \n \n ) : (\n \n )}\n
    • \n ))}\n
\n
\n )}\n\n
\n {ending && onResume ? (\n void run(\"resume\", onResume, \"Your plan is back on.\")}\n className=\"h-10 flex-1 text-[13.5px]\"\n style={st(\"resume\") === \"error\" ? undefined : ACTION}\n />\n ) : (\n onChangePlan && (\n \n )\n )}\n {!ending && (onPause || onCancel) && (\n \n )}\n
\n {act.kind === \"resume\" && act.error && (\n

\n {act.error}\n

\n )}\n
\n\n {/* Before you go: a pause, with the date it all comes back. */}\n {\n faceRefs.current[1] = el;\n }}\n tabIndex={-1}\n role=\"group\"\n aria-labelledby={`${baseId}-pause`}\n className=\"px-3 pb-1.5 pt-3.5 outline-none\"\n >\n

\n Pause instead?\n

\n

Keep everything as it is and pick up where you left off. You won’t be charged while it’s paused.

\n setMonths(Number(v))}\n options={pauseMonths.map((m) => ({ value: String(m), label: m === 1 ? \"1 month\" : `${m} months` }))}\n />\n

\n Billing resumes on {hydrated ? date(resumeAt) : \" \"}\n

\n void run(\"pause\", onPause && (() => onPause(months)), `Paused for ${months} months.`)}\n className=\"mt-3.5 h-11 w-full text-[14.5px]\"\n style={st(\"pause\") === \"error\" ? undefined : ACTION}\n />\n {act.kind === \"pause\" && act.error && (\n

\n {act.error}\n

\n )}\n
\n \n {onCancel && (\n \n )}\n
\n
\n\n {/* Cancel: a reason, then the end date. */}\n {\n faceRefs.current[2] = el;\n }}\n tabIndex={-1}\n role=\"group\"\n aria-labelledby={`${baseId}-cancel`}\n className=\"px-3 pb-1.5 pt-3 outline-none\"\n >\n
\n \n

\n Why are you leaving?\n

\n
\n
\n {reasons.map((r) => {\n const on = r === reason;\n return (\n setReason(r)}\n className={`h-8 cursor-pointer rounded-full px-3 text-[12.5px] ${INTERACTION_PRESS} ${INTERACTION_FOCUS} ${on ? \"bg-primary/[0.08] font-medium text-primary shadow-[inset_0_0_0_1.5px_var(--primary)]\" : \"text-foreground shadow-[inset_0_0_0_1px_var(--border)] hover:bg-accent\"}`}\n style={{ transition: reduced ? \"none\" : `box-shadow 260ms ${EASE_THROW}, background-color 200ms` }}\n >\n {r}\n \n );\n })}\n
\n