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:T1b29,// Hairline UI · pricing-toggle · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { NumberRoll } from "./number-roll"; /* ───────────────────────────────────────────────────────── * PRICING TOGGLE: monthly or yearly, and every price rolls * * toggle the thumb slides and resizes to the chosen option * with a little give; the labels trade colour * badge "Save 20%" sits inside Yearly and lights up in * your brand colour when it's chosen * prices Price rolls each figure to its new amount, and the * billing line crossfades in the direction you went * * PricingToggle is the control; Price is the number. Use them * together across your plan columns. * ───────────────────────────────────────────────────────── */ export interface BillingOption { value: string; label: string; /** e.g. "Save 20%". */ badge?: string; } export interface PricingToggleProps extends Omit, "onChange"> { value: string; onValueChange: (value: string) => void; options?: BillingOption[]; label?: string; } export interface PriceProps extends React.HTMLAttributes { amount: number; currency?: string; locales?: string | string[]; /** e.g. "/mo"; hidden for free plans. */ period?: string; /** A line under the price, e.g. "$288 billed yearly". */ note?: string; /** Which way the toggle moved (1 or -1), so the note slides with it. */ direction?: number; /** Classes for the figure, e.g. its size. */ numberClassName?: string; } const BILLING: BillingOption[] = [ { value: "monthly", label: "Monthly" }, { value: "yearly", label: "Yearly", badge: "Save 20%" }, ]; // A little give at the end of the slide, so the thumb feels like it was thrown, not placed. const THROW = "cubic-bezier(0.34,1.36,0.64,1)"; const EASE = "cubic-bezier(0.23,1,0.32,1)"; const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; 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); export function PricingToggle({ value, onValueChange, options = BILLING, label = "Billing period", className = "", ...props }: PricingToggleProps) { const reduced = useReducedMotion(); const refs = React.useRef<(HTMLButtonElement | null)[]>([]); const [thumb, setThumb] = React.useState({ left: 0, width: 0, ready: false }); const active = Math.max(0, options.findIndex((o) => o.value === value)); React.useLayoutEffect(() => { const measure = () => { const el = refs.current[active]; if (!el) return; const left = el.offsetLeft; const width = el.offsetWidth; setThumb((t) => (t.left === left && t.width === width ? t : { left, width, ready: t.width > 0 })); }; measure(); const observer = new ResizeObserver(measure); refs.current.forEach((el) => el && observer.observe(el)); return () => observer.disconnect(); }, [active, options]); const onKeyDown = (e: React.KeyboardEvent) => { if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return; e.preventDefault(); const next = (active + (e.key === "ArrowRight" ? 1 : -1) + options.length) % options.length; onValueChange(options[next].value); refs.current[next]?.focus(); }; return (

{options.map((option, i) => { const selected = i === active; return ( ); })}

); } export function Price({ amount, currency = "USD", locales, period = "/mo", note, direction = 1, numberClassName = "text-[40px] font-medium leading-[1.15] tracking-[-0.03em] text-foreground", className = "", ...props }: PriceProps) { const format = React.useMemo( () => ({ style: "currency", currency, maximumFractionDigits: amount % 1 ? 2 : 0, minimumFractionDigits: amount % 1 ? 2 : 0 }), [currency, amount] ); return (

{amount > 0 && period && {period}}

{note !== undefined && (

0 ? 100 : -100}%` } as React.CSSProperties} > {note}

)}

); } 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/number-roll.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-note-in {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(var(--ui-from));\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: none;\n\t}\n}\n\n@keyframes ui-col-in {\n\tfrom {\n\t\tmax-width: 0;\n\t\topacity: 0;\n\t}\n\tto {\n\t\tmax-width: 1em;\n\t\topacity: 1;\n\t}\n}\n\n@keyframes ui-col-out {\n\tfrom {\n\t\tmax-width: 1em;\n\t\topacity: 1;\n\t}\n\tto {\n\t\tmax-width: 0;\n\t\topacity: 0;\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/pricing-toggle.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]