51: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"] 52: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"] 53:T3e93,// Hairline UI · pricing-calculator · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { NumberRoll } from "./number-roll"; import { PricingToggle } from "./pricing-toggle"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * PRICING CALCULATOR: drag to your size, watch the price * * drag the thumb follows your finger; the fill and a * value bubble ride with it and the price rolls as * you go * jump click the track (or tap a mark) and the thumb is * thrown there with a little give * tiers crossing a mark morphs the plan's name and lights * the mark; the button's words follow * contact past the last tier the price folds away and the * line becomes "Let's talk" * yearly with a discount, a Monthly/Yearly switch rolls every * figure to its yearly price * * Bring your own formula: price(value) and plan(value). A real * slider: arrow keys, Page Up/Down, Home and End. * ───────────────────────────────────────────────────────── */ export interface CalculatorMark { value: number; label: string; } export interface PricingCalculatorProps extends Omit, "onChange"> { min: number; max: number; step?: number; value?: number; defaultValue?: number; onValueChange?: (value: number) => void; /** Monthly price for a value, before any yearly discount. */ price: (value: number) => number; /** The plan a value falls in, e.g. "Growth". */ plan?: (value: number) => string; /** Ticks along the track, e.g. where tiers change. */ marks?: CalculatorMark[]; /** What's being counted, e.g. "monthly active users". */ unit?: string; /** Intl.NumberFormat options for the value, e.g. { notation: "compact" }. */ valueFormat?: Intl.NumberFormatOptions; currency?: string; /** Locale for every figure, e.g. "en-US". Set it when the page is rendered on a server, so both sides format alike. */ locales?: string | string[]; /** Evenly spaced orders of magnitude, for ranges like 1,000 to 1,000,000. */ scale?: "linear" | "log"; /** At or above this, show "Let's talk" instead of a price. */ contactFrom?: number; /** e.g. 0.2 shows a Monthly/Yearly switch with "Save 20%". */ yearlyDiscount?: number; /** The button under the price; its words follow the plan. */ cta?: { label: (plan: string) => string; contactLabel?: string; onClick?: (value: number, plan: string, billing: "monthly" | "yearly") => void }; label?: string; } const EASE = "cubic-bezier(0.16,1,0.3,1)"; const THROW = "cubic-bezier(0.34,1.36,0.64,1)"; const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background"; 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 PricingCalculator({ min, max, step = 1, value: valueProp, defaultValue, onValueChange, price, plan = () => "", marks = [], unit = "", valueFormat, currency = "USD", locales, scale = "linear", contactFrom, yearlyDiscount, cta, label = "Usage", className = "", ...props }: PricingCalculatorProps) { const reduced = useReducedMotion(); const id = React.useId(); const [own, setOwn] = React.useState(defaultValue ?? min); const value = valueProp ?? own; const [billing, setBilling] = React.useState<"monthly" | "yearly">("monthly"); const [dragging, setDragging] = React.useState(false); const [thrown, setThrown] = React.useState(false); const trackRef = React.useRef(null); const thumbRef = React.useRef(null); const pointer = React.useRef(null); // Value ↔ position along the track, linear or by orders of magnitude. const toRatio = React.useCallback( (v: number) => { if (scale === "log" && min > 0) return (Math.log(v) - Math.log(min)) / (Math.log(max) - Math.log(min)); return (v - min) / (max - min); }, [scale, min, max] ); const fromRatio = React.useCallback( (r: number) => { const c = Math.min(1, Math.max(0, r)); const raw = scale === "log" && min > 0 ? Math.exp(Math.log(min) + c * (Math.log(max) - Math.log(min))) : min + c * (max - min); // On a log scale, round to a step that suits the size (1,000s near 10k, 10,000s near 100k). const s = scale === "log" ? Math.max(step, 10 ** Math.max(0, Math.floor(Math.log10(raw)) - 1)) : step; return Math.min(max, Math.max(min, Math.round(raw / s) * s)); }, [scale, min, max, step] ); const set = (next: number) => { const v = Math.min(max, Math.max(min, next)); if (valueProp === undefined) setOwn(v); onValueChange?.(v); }; const fromPointer = (clientX: number) => { const track = trackRef.current; if (!track) return value; const r = track.getBoundingClientRect(); return fromRatio((clientX - r.left) / r.width); }; const onPointerDown = (e: React.PointerEvent) => { if (e.button !== 0) return; e.preventDefault(); pointer.current = e.pointerId; (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId); thumbRef.current?.focus({ preventScroll: true }); // A press away from the thumb throws it there; a press on it starts a drag. const onThumb = (e.target as HTMLElement).closest("[data-thumb]"); setThrown(!onThumb); setDragging(Boolean(onThumb)); set(fromPointer(e.clientX)); }; const onPointerMove = (e: React.PointerEvent) => { if (pointer.current !== e.pointerId) return; if (!dragging) { setThrown(false); setDragging(true); } set(fromPointer(e.clientX)); }; const onPointerUp = (e: React.PointerEvent) => { if (pointer.current !== e.pointerId) return; pointer.current = null; setDragging(false); }; const onKeyDown = (e: React.KeyboardEvent) => { const r = toRatio(value); const nudge = (d: number) => { // Each press moves at least one visible step, even where a log scale is coarse. const next = fromRatio(r + d); return next === value ? value + Math.sign(d) * step : next; }; const moves: Record number> = { ArrowRight: () => nudge(0.01), ArrowUp: () => nudge(0.01), ArrowLeft: () => nudge(-0.01), ArrowDown: () => nudge(-0.01), PageUp: () => nudge(0.1), PageDown: () => nudge(-0.1), Home: () => min, End: () => max, }; if (!(e.key in moves)) return; e.preventDefault(); setThrown(e.key === "Home" || e.key === "End" || e.key.startsWith("Page")); set(moves[e.key]()); }; const ratio = Math.min(1, Math.max(0, toRatio(value))); const contact = contactFrom !== undefined && value >= contactFrom; const planName = plan(value); const discount = billing === "yearly" && yearlyDiscount ? yearlyDiscount : 0; const monthly = price(value) * (1 - discount); const currencyFormat = React.useMemo(() => ({ style: "currency", currency, maximumFractionDigits: 0 }), [currency]); const valueText = new Intl.NumberFormat(locales, valueFormat).format(value); const moveTransition = reduced || dragging ? "none" : thrown ? `transform 520ms ${THROW}` : `transform 220ms ${EASE}`; const fillTransition = reduced || dragging ? "none" : thrown ? `transform 520ms ${THROW}` : `transform 220ms ${EASE}`; return (

{/* The plan's name morphs as you cross a tier. */}

{contact ? "Enterprise" : planName}

/mo Let’s talk

{contact ? "Volume pricing, SSO and a named contact" : discount ? `${new Intl.NumberFormat(locales, currencyFormat).format(Math.round(monthly * 12))} billed yearly` : "Billed monthly, cancel anytime"}

{yearlyDiscount ? ( setBilling(v as "monthly" | "yearly")} options={[ { value: "monthly", label: "Monthly" }, { value: "yearly", label: "Yearly", badge: `Save ${Math.round(yearlyDiscount * 100)}%` }, ]} /> ) : null}

{/* The slider. */}

{marks.map((m) => { const r = toRatio(m.value); const passed = value >= m.value; return ( ); })} {/* The thumb, with the value riding above it. The rider ends at the thumb and hangs off to the left, so it never widens the page the way a box pushed right would. */}

{/* Centred over the thumb mid-track, leaning inwards at the ends so it never leaves the track. */}

{marks.length > 0 && (

{marks.map((m) => ( ))}

)}

{cta && (

)}

{contact ? "Contact sales for this size" : `${planName} plan`}

); } 50:["$","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,["$","$L51",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/text-morph.json?as=dependency","https://hairlineui.com/r/pricing-toggle.json?as=dependency"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/pricing-calculator.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]