{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"checkout","type":"registry:block","title":"Checkout","description":"A one-page checkout whose steps stack into a receipt: contact, address, delivery and your payment element, then Place order turns into the order number.","author":"Hairline UI","dependencies":["lucide-react"],"registryDependencies":["https://hairlineui.com/r/input.json?as=dependency","https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/select.json?as=dependency","https://hairlineui.com/r/status-button.json?as=dependency","https://hairlineui.com/r/text-morph.json?as=dependency"],"files":[{"path":"registry/checkout.tsx","type":"registry:component","content":"// Hairline UI · checkout · MIT License\n// Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components\n\n\"use client\";\n\nimport * as React from \"react\";\nimport { Lock } from \"lucide-react\";\nimport { Input } from \"./input\";\nimport { NumberRoll } from \"./number-roll\";\nimport { Select } from \"./select\";\nimport { StatusButton, type ActionStatus } from \"./status-button\";\nimport { TextMorph } from \"./text-morph\";\nimport { EASE_THROW, INTERACTION_FOCUS, INTERACTION_PRESS, useInteractionReducedMotion } from \"./ui-interaction-motion\";\n\n/* ─────────────────────────────────────────────────────────\n * CHECKOUT: steps that stack into a receipt\n *\n * steps contact, shipping, delivery and payment on one\n * surface; the step you're on is open, a rail of light\n * runs down the numbers as you finish them\n * stack a finished step folds into one line under its title\n * (\"Iris Okafor, 12 Elm Street, Leeds · Change\") with\n * a check drawn in its number\n * delivery speeds show the day they arrive; the total on the\n * lit summary rolls when you switch\n * placed Place order goes Placing order → your order number,\n * and the steps lock\n *\n * Payment is your provider's: put its element (Stripe's Payment\n * Element, PayPal buttons, anything) in the `payment` slot, so this\n * block never sees card data. onPlaceOrder gets the order; resolve\n * with { number } to show it, throw an Error to say why not.\n * ───────────────────────────────────────────────────────── */\n\nexport interface CheckoutLine {\n id: string;\n name: string;\n /** e.g. \"Sand · M\". */\n detail?: string;\n quantity: number;\n /** Unit price, major units. */\n price: number;\n image?: string;\n icon?: React.ReactNode;\n}\n\nexport interface CheckoutAddress {\n name: string;\n line1: string;\n line2: string;\n city: string;\n postcode: string;\n country: string;\n}\n\nexport interface CheckoutDelivery {\n id: string;\n label: string;\n /** e.g. \"Royal Mail Tracked\". */\n detail?: string;\n price: number;\n /** Days from today it arrives: one number, or the earliest and latest. */\n days: number | [number, number];\n}\n\nexport interface CheckoutOrder {\n email: string;\n address: CheckoutAddress;\n delivery: CheckoutDelivery;\n lines: CheckoutLine[];\n subtotal: number;\n discount: number;\n shipping: number;\n tax: number;\n total: number;\n}\n\nexport interface CheckoutProps {\n lines: CheckoutLine[];\n deliveries: CheckoutDelivery[];\n /** Off the subtotal, major units. */\n discount?: number;\n /** Tax rate on the goods and delivery, e.g. 0.2 for 20%. */\n taxRate?: number;\n countries?: { value: string; label: string }[];\n defaultEmail?: string;\n defaultAddress?: Partial;\n /** Your payment provider's element, shown in the payment step. */\n payment?: React.ReactNode;\n /** Place the order; resolve with { number } to show it, throw an Error to say why not. */\n onPlaceOrder: (order: CheckoutOrder) => Promise;\n currency?: string;\n locale?: string;\n className?: string;\n}\n\ntype Step = \"contact\" | \"shipping\" | \"delivery\" | \"payment\";\nconst STEPS: { id: Step; title: string }[] = [\n { id: \"contact\", title: \"Contact\" },\n { id: \"shipping\", title: \"Shipping address\" },\n { id: \"delivery\", title: \"Delivery\" },\n { id: \"payment\", title: \"Payment\" },\n];\nconst COUNTRIES = [\n { value: \"US\", label: \"United States\" },\n { value: \"GB\", label: \"United Kingdom\" },\n { value: \"CA\", label: \"Canada\" },\n { value: \"DE\", label: \"Germany\" },\n { value: \"FR\", label: \"France\" },\n { value: \"AU\", label: \"Australia\" },\n { value: \"IN\", label: \"India\" },\n];\nconst EMAIL = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\nconst EASE = \"cubic-bezier(0.16,1,0.3,1)\";\nconst DAY = 86_400_000;\n\nconst subscribeNothing = () => () => {};\n/** False on the server and while hydrating: text is formatted in one fixed locale until then, so the server's and the visitor's never disagree. */\nconst useHydrated = () => React.useSyncExternalStore(subscribeNothing, () => true, () => false);\n\nconst mix = (color: string, amount: number, into = \"transparent\") => `color-mix(in oklab, ${color} ${amount}%, ${into})`;\nconst SUMMARY: React.CSSProperties = {\n backgroundColor: \"var(--primary)\",\n backgroundImage: `radial-gradient(120% 70% 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 INVERSE: React.CSSProperties = { background: \"var(--primary-foreground)\", color: \"var(--primary)\", boxShadow: `inset 0 -1px 0 ${mix(\"black\", 8)}` };\n\nfunction tint(seed: string): React.CSSProperties {\n let h = 0;\n for (const c of seed) h = (h * 31 + c.charCodeAt(0)) >>> 0;\n const chart = `var(--chart-${(h % 5) + 1}, var(--primary))`;\n return { background: mix(chart, 22, \"var(--primary-foreground)\"), color: mix(chart, 80, \"black\") };\n}\n\nconst money = (currency: string, n: number): Intl.NumberFormatOptions => ({ style: \"currency\", currency, minimumFractionDigits: n % 1 ? 2 : 0, maximumFractionDigits: 2 });\nconst round = (n: number) => Math.round(n * 100) / 100;\n\n/** A fold that keeps its children laid out, so its height eases open and shut. */\nfunction Fold({ open, reduced, children }: { open: boolean; reduced: boolean; children: React.ReactNode }) {\n return (\n
\n
\n {children}\n
\n
\n );\n}\n\nexport function Checkout({\n lines,\n deliveries,\n discount = 0,\n taxRate = 0,\n countries = COUNTRIES,\n defaultEmail = \"\",\n defaultAddress,\n payment,\n onPlaceOrder,\n currency = \"USD\",\n locale,\n className = \"\",\n}: CheckoutProps) {\n const reduced = useInteractionReducedMotion();\n const hydrated = useHydrated();\n const baseId = React.useId();\n const [step, setStep] = React.useState(\"contact\");\n const [done, setDone] = React.useState>(() => new Set());\n const [email, setEmail] = React.useState(defaultEmail);\n const [address, setAddress] = React.useState({ name: \"\", line1: \"\", line2: \"\", city: \"\", postcode: \"\", country: countries[0]?.value ?? \"\", ...defaultAddress });\n const [deliveryId, setDeliveryId] = React.useState(null);\n const [errors, setErrors] = React.useState>>({});\n const [place, setPlace] = React.useState<{ status: ActionStatus; number?: string; error?: string }>({ status: \"idle\" });\n const [today, setToday] = React.useState(null);\n const [said, setSaid] = React.useState(\"\");\n const bodies = React.useRef(new Map());\n\n React.useEffect(() => {\n const frame = requestAnimationFrame(() => setToday(Date.now()));\n return () => cancelAnimationFrame(frame);\n }, []);\n\n const delivery = deliveries.find((d) => d.id === deliveryId) ?? null;\n const subtotal = round(lines.reduce((n, l) => n + l.price * l.quantity, 0));\n const off = Math.min(discount, subtotal);\n const shipping = delivery?.price ?? 0;\n const tax = round((subtotal - off + shipping) * taxRate);\n const total = round(subtotal - off + shipping + tax);\n const placed = place.status === \"success\";\n const busy = place.status === \"pending\" || placed;\n const index = STEPS.findIndex((s) => s.id === step);\n const ready = done.has(\"contact\") && done.has(\"shipping\") && done.has(\"delivery\");\n\n const fmt = (n: number) => money(currency, n);\n const loc = locale ?? (hydrated ? undefined : \"en-US\");\n const cash = (n: number) => new Intl.NumberFormat(loc, fmt(n)).format(n);\n const arrives = (d: CheckoutDelivery) => {\n if (today === null) return \"\";\n const [a, b] = Array.isArray(d.days) ? d.days : [d.days, d.days];\n const day = new Intl.DateTimeFormat(loc, { weekday: \"short\", day: \"numeric\", month: \"short\" });\n return a === b ? `Arrives ${day.format(today + a * DAY)}` : `Arrives ${day.formatRange(today + a * DAY, today + b * DAY)}`;\n };\n const country = countries.find((c) => c.value === address.country)?.label ?? address.country;\n const summaries: Record = {\n contact: email,\n shipping: [address.name, address.line1, address.line2, `${address.city} ${address.postcode}`.trim(), country].filter(Boolean).join(\", \"),\n delivery: delivery ? `${delivery.label} · ${delivery.price ? cash(delivery.price) : \"Free\"}` : \"\",\n payment: \"\",\n };\n\n const open = (s: Step) => {\n if (busy) return;\n setStep(s);\n window.setTimeout(() => bodies.current.get(s)?.querySelector(\"input,button[role=radio],button\")?.focus({ preventScroll: true }), reduced ? 0 : 320);\n };\n\n const finish = (s: Step) => {\n if (s === \"contact\") {\n const problem = EMAIL.test(email.trim()) ? undefined : email.trim() ? \"That email doesn’t look right\" : \"Add your email\";\n setErrors({ email: problem });\n if (problem) return;\n }\n if (s === \"shipping\") {\n const need: (keyof CheckoutAddress)[] = [\"name\", \"line1\", \"city\", \"postcode\"];\n const problems = Object.fromEntries(need.filter((k) => !address[k].trim()).map((k) => [k, \"Required\"]));\n setErrors(problems);\n if (Object.keys(problems).length) return;\n }\n if (s === \"delivery\" && !delivery) return;\n setDone((d) => new Set([...d, s]));\n const next = STEPS.find((x, i) => i > STEPS.findIndex((y) => y.id === s) && !done.has(x.id))?.id ?? \"payment\";\n setSaid(`${STEPS.find((x) => x.id === s)?.title} saved.`);\n open(next);\n };\n\n const placeOrder = async () => {\n if (!ready || !delivery || busy) return;\n setPlace({ status: \"pending\" });\n try {\n const result = await onPlaceOrder({ email: email.trim(), address, delivery, lines, subtotal, discount: off, shipping, tax, total });\n const number = result && typeof result === \"object\" && \"number\" in result ? String((result as { number: unknown }).number) : undefined;\n setPlace({ status: \"success\", number });\n setSaid(number ? `Order ${number} placed.` : \"Order placed.\");\n } catch (e) {\n setPlace({ status: \"error\", error: e instanceof Error && e.message ? e.message : \"Couldn’t place the order. Try again.\" });\n }\n };\n\n const field = (k: keyof CheckoutAddress, label: string, autoComplete: string, extra?: Partial>) => (\n {\n setAddress((a) => ({ ...a, [k]: v }));\n if (errors[k]) setErrors((e) => ({ ...e, [k]: undefined }));\n }}\n {...extra}\n />\n );\n\n const next = `inline-flex h-10 cursor-pointer items-center justify-center rounded-full bg-primary px-5 text-[13.5px] font-medium text-primary-foreground hover:bg-primary/90 disabled:cursor-default disabled:opacity-45 ${INTERACTION_PRESS} ${INTERACTION_FOCUS}`;\n\n return (\n
\n {/* Its natural width where the parent sizes to its content, without forcing it on narrow screens. */}\n
\n
\n

\n Checkout\n

\n
\n {/* Flat: the steps, finished ones stacked as one line each. */}\n
    \n {/* The rail of light down the numbers, as far as you've got. */}\n \n \n {STEPS.map((s, i) => {\n const isOn = s.id === step;\n const isDone = done.has(s.id) && !isOn;\n const reachable = isDone || i <= index || STEPS.slice(0, i).every((p) => done.has(p.id));\n return (\n
  1. \n \n {isDone ? (\n \n \n \n ) : (\n i + 1\n )}\n \n
    \n

    {s.title}

    \n {isDone && !placed && (\n \n )}\n
    \n {/* The finished step, as a line of the receipt. */}\n \n

    {summaries[s.id]}

    \n     \n \n {\n if (el) bodies.current.set(s.id, el);\n }}\n className=\"pb-1 pt-3\"\n >\n {s.id === \"contact\" && (\n {\n e.preventDefault();\n finish(\"contact\");\n }}\n >\n {\n setEmail(v);\n if (errors.email) setErrors((e) => ({ ...e, email: undefined }));\n }}\n className=\"@[480px]:flex-1\"\n />\n \n \n )}\n {s.id === \"shipping\" && (\n {\n e.preventDefault();\n finish(\"shipping\");\n }}\n >\n
    {field(\"name\", \"Full name\", \"name\")}
    \n
    {field(\"line1\", \"Address\", \"address-line1\")}
    \n
    {field(\"line2\", \"Apartment, suite (optional)\", \"address-line2\")}
    \n {field(\"city\", \"City\", \"address-level2\")}\n {field(\"postcode\", \"Postcode\", \"postal-code\")}\n
    \n