{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"order-status","type":"registry:block","title":"Order status","description":"An order’s route with a parcel riding it: stops light as it passes, the arrival day rolls, and the carrier’s scans slide in.","author":"Hairline UI","dependencies":["lucide-react"],"registryDependencies":["https://hairlineui.com/r/copy-button.json?as=dependency","https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/status-button.json?as=dependency","https://hairlineui.com/r/text-morph.json?as=dependency"],"files":[{"path":"registry/order-status.tsx","type":"registry:component","content":"// Hairline UI · order-status · MIT License\n// Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components\n\n\"use client\";\n\nimport * as React from \"react\";\nimport { ArrowUpRight, Package } from \"lucide-react\";\nimport { CopyButton } from \"./copy-button\";\nimport { NumberRoll } from \"./number-roll\";\nimport { StatusButton, type ActionStatus } from \"./status-button\";\nimport { TextMorph } from \"./text-morph\";\nimport { useRowMotion } from \"./use-row-motion\";\nimport { EASE_THROW, INTERACTION_FOCUS, useInteractionReducedMotion } from \"./ui-interaction-motion\";\n\n/* ─────────────────────────────────────────────────────────\n * ORDER STATUS: the parcel on its route\n *\n * route the lit card carries the order's route, Ordered →\n * Packed → Shipped → Out for delivery → Delivered, as a\n * hairline; a parcel rides it to where the order is\n * and every stop it passes lights as it goes by\n * arriving the day it arrives is large; when the date moves the\n * weekday morphs and the day rolls\n * events the carrier's scans, newest first; a new one slides\n * in at the top\n * cancel before it ships, Cancel order asks once, then goes\n * Cancelling → Cancelled and the route dims\n *\n * The order is yours: pass status, eta and events from your\n * database or the carrier's webhook (a refetch, a poll or a\n * socket); onCancel does the cancelling.\n * ───────────────────────────────────────────────────────── */\n\nexport type OrderStage = \"ordered\" | \"packed\" | \"shipped\" | \"out\" | \"delivered\";\n\nexport interface OrderEvent {\n id: string;\n at: Date | string | number;\n title: string;\n /** Where it happened, e.g. \"Leeds depot\". */\n place?: string;\n}\n\nexport interface OrderStatusProps {\n /** Shown as \"Order #HL-2048\". */\n number: string;\n status: OrderStage | \"cancelled\";\n /** When it's expected; when it arrived once delivered. */\n eta?: Date | string | number;\n /** e.g. \"by 9pm\", after the date. */\n window?: string;\n /** Where it's going, one line. */\n address?: string;\n carrier?: string;\n tracking?: string;\n trackingUrl?: string;\n /** Newest first. */\n events?: OrderEvent[];\n /** Offered until the order ships; throw an Error to say why not. */\n onCancel?: () => Promise;\n /** Events shown before Show all. */\n visibleEvents?: number;\n locale?: string;\n className?: string;\n}\n\nconst STAGES: { id: OrderStage; label: string; short: string }[] = [\n { id: \"ordered\", label: \"Order placed\", short: \"Ordered\" },\n { id: \"packed\", label: \"Packed\", short: \"Packed\" },\n { id: \"shipped\", label: \"Shipped\", short: \"Shipped\" },\n { id: \"out\", label: \"Out for delivery\", short: \"Out\" },\n { id: \"delivered\", label: \"Delivered\", short: \"Delivered\" },\n];\nconst EASE = \"cubic-bezier(0.16,1,0.3,1)\";\nconst RIDE = 1100;\nconst NONE: OrderEvent[] = [];\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 CARD_LIT: React.CSSProperties = {\n backgroundColor: \"var(--primary)\",\n backgroundImage: `radial-gradient(120% 80% at 0% 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};\n\nexport function OrderStatus({\n number,\n status,\n eta,\n window: timeWindow,\n address,\n carrier,\n tracking,\n trackingUrl,\n events = NONE,\n onCancel,\n visibleEvents = 3,\n locale,\n className = \"\",\n}: OrderStatusProps) {\n const reduced = useInteractionReducedMotion();\n // Dates depend on the visitor's locale and time zone, so they're written once the block is in the browser.\n const hydrated = useHydrated();\n const baseId = React.useId();\n const [cancel, setCancel] = React.useState<{ status: ActionStatus; confirm: boolean; error?: string }>({ status: \"idle\", confirm: false });\n const [expanded, setExpanded] = React.useState(false);\n const listRef = React.useRef(null);\n const ghostRef = React.useRef(null);\n\n const cancelled = status === \"cancelled\" || cancel.status === \"success\";\n const at = Math.max(0, STAGES.findIndex((s) => s.id === status));\n const stage = cancelled ? null : STAGES[at];\n const progress = at / (STAGES.length - 1);\n\n // Where the parcel set off from, so stops light up as it passes them, not all at once.\n const [from, setFrom] = React.useState(at);\n const [seenAt, setSeenAt] = React.useState(at);\n if (at !== seenAt) {\n setFrom(seenAt);\n setSeenAt(at);\n }\n const passDelay = (i: number) => (reduced || at <= from || i <= from ? 0 : ((i - from) / (at - from)) * RIDE * 0.85);\n\n const fmt = React.useMemo(\n () => ({\n weekday: new Intl.DateTimeFormat(locale, { weekday: \"long\" }),\n month: new Intl.DateTimeFormat(locale, { month: \"short\" }),\n time: new Intl.DateTimeFormat(locale, { hour: \"numeric\", minute: \"2-digit\" }),\n day: new Intl.DateTimeFormat(locale, { day: \"numeric\", month: \"short\" }),\n }),\n [locale],\n );\n const etaDate = eta !== undefined && hydrated ? new Date(eta) : null;\n\n const rows = expanded ? events : events.slice(0, visibleEvents);\n const ranks = React.useMemo(() => new Map(events.map((e, i) => [e.id, i])), [events]);\n useRowMotion(listRef, { reduced, ranks, ghosts: ghostRef });\n\n const canCancel = Boolean(onCancel) && (cancel.status === \"success\" || (!cancelled && (status === \"ordered\" || status === \"packed\")));\n const cancelOrder = async () => {\n if (!onCancel || cancel.status === \"pending\") return;\n if (!cancel.confirm) return setCancel({ status: \"idle\", confirm: true });\n setCancel({ status: \"pending\", confirm: true });\n try {\n await onCancel();\n setCancel({ status: \"success\", confirm: true });\n } catch (e) {\n setCancel({ status: \"error\", confirm: true, error: e instanceof Error && e.message ? e.message : \"Couldn’t cancel. Try again.\" });\n }\n };\n\n React.useEffect(() => {\n if (!cancel.confirm || cancel.status !== \"idle\") return;\n const timer = window.setTimeout(() => setCancel({ status: \"idle\", confirm: false }), 4000);\n return () => window.clearTimeout(timer);\n }, [cancel]);\n\n const headline = cancelled ? \"Cancelled\" : status === \"delivered\" ? \"Delivered\" : \"Arriving\";\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 arrival and the route. */}\n
\n
\n

\n Order #{number}\n

\n \n {cancelled ? \"Cancelled\" : (stage?.label ?? \"\")}\n \n
\n\n

\n {headline}\n

\n

\n {etaDate && !cancelled ? (\n <>\n {fmt.weekday.format(etaDate)}\n \n \n \n {fmt.month.format(etaDate)}\n \n ) : (\n {cancelled ? \"Not on its way\" : hydrated ? \"Date to follow\" : \" \"}\n )}\n

\n {(timeWindow || address) && !cancelled && (\n

\n {[status === \"delivered\" ? null : timeWindow, address ? `to ${address}` : null].filter(Boolean).join(\" · \")}\n

\n )}\n\n {/* The route: stops on a hairline, the parcel riding to where the order is. */}\n
\n
\n \n \n
    \n {STAGES.map((s, i) => {\n const lit = !cancelled && i <= at;\n return (\n
  1. \n {`${s.label}${lit ? (i === at ? \", current\" : \", done\") : \"\"}`}\n \n
    2. \n );\n })}\n
\n {/* The parcel rides the right edge of a full-width layer that slides in from the left: one composited transform,\n and nothing past the card's right edge to scroll to. */}\n \n \n \n \n \n
\n
\n {STAGES.map((s, i) => (\n \n {s.short}\n \n ))}\n
\n
\n
\n\n {/* Flat: tracking, the scans, and Cancel while it can be. */}\n {(carrier || tracking) && (\n
\n {carrier ?? \"Tracking\"}\n {tracking && {tracking}}\n {tracking && }\n {trackingUrl && (\n \n Track\n \n \n )}\n
\n )}\n\n {events.length > 0 && (\n
\n
\n

Updates

\n {events.length > visibleEvents && (\n \n )}\n
\n
\n
\n
    \n {rows.map((e, i) => {\n const when = new Date(e.at);\n return (\n
  1. \n \n {i < rows.length - 1 && }\n \n {e.title}\n {e.place && {e.place}}\n \n \n {hydrated ? fmt.day.format(when) : \"\"}\n {hydrated ? fmt.time.format(when) : \"\"}\n \n
    2. \n );\n })}\n
\n
\n
\n )}\n\n {canCancel && (\n
\n void cancelOrder()}\n className={`h-9 px-4 text-[13px] ${cancel.confirm && cancel.status === \"idle\" ? \"text-red-600 hover:text-red-600 dark:text-red-400 dark:hover:text-red-400\" : \"\"}`}\n />\n {cancel.error && (\n

\n {cancel.error}\n

\n )}\n
\n )}\n
\n
\n );\n}\n\nexport default OrderStatus;\n"},{"path":"registry/ui-interaction-motion.ts","type":"registry:component","content":"// Hairline UI · order-status · MIT License\n// Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components\n\n'use client';\n\nimport * as React from 'react';\n\nexport const EASE_OUT = 'cubic-bezier(0.16, 1, 0.3, 1)';\nexport const EASE_SETTLE = 'cubic-bezier(0.22, 1.18, 0.36, 1)';\n/** Thrown things (indicators, thumbs): a slight overshoot on transform only. */\nexport const EASE_THROW = 'cubic-bezier(0.34, 1.36, 0.64, 1)';\n/**\n * The press every button primitive shares: a 3% give that eases in and settles back.\n * Tailwind v4's scale-* writes the `scale` property, so `scale` has to be in the list\n * or the press snaps.\n */\nexport const INTERACTION_PRESS =\n 'transition-[background-color,color,box-shadow,opacity,scale] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] active:scale-[0.97] motion-reduce:transition-none motion-reduce:active:scale-100';\nexport const INTERACTION_FOCUS ='focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background';\n\nconst query = '(prefers-reduced-motion: reduce)';\nconst subscribe = (notify: () => void) => {\n const media = window.matchMedia(query);\n media.addEventListener('change', notify);\n return () => media.removeEventListener('change', notify);\n};\nexport const useInteractionReducedMotion = () => React.useSyncExternalStore(subscribe, () => window.matchMedia(query).matches, () => false);\n\nexport function useInteractionActivity() {\n const ref = React.useRef(null);\n const [visible, setVisible] = React.useState(false);\n const [hidden, setHidden] = React.useState(false);\n React.useEffect(() => {\n const el = ref.current;\n if (!el) return;\n const observer = new IntersectionObserver(([entry]) => setVisible(entry.isIntersecting));\n observer.observe(el);\n const visibility = () => setHidden(document.hidden);\n visibility(); document.addEventListener('visibilitychange', visibility);\n return () => { observer.disconnect(); document.removeEventListener('visibilitychange', visibility); };\n }, []);\n return { ref, active: visible && !hidden };\n}\n\nexport function interactionIcon(on: boolean, reduced: boolean): React.CSSProperties {\n return { opacity: on ? 1 : 0, transform: on ? 'none' : 'scale(0.6)', filter: on ? 'blur(0px)' : 'blur(3px)', transition: reduced ? 'none' : `opacity 220ms ${EASE_OUT}, transform 380ms ${EASE_OUT}, filter 220ms ${EASE_OUT}` };\n}\n\n/** Sample recent movement rather than averaging a long drag and losing its release velocity. */\nexport type PointerSample = { x: number; time: number };\nexport function samplePointer(samples: PointerSample[], x: number, time: number) {\n samples.push({ x, time });\n while (samples.length > 2 && time - samples[0].time > 100) samples.shift();\n}\nexport function releaseVelocity(samples: PointerSample[], now: number) {\n if (samples.length < 2 || now - samples[samples.length - 1].time > 100) return 0;\n const first = samples[0], last = samples[samples.length - 1];\n return (last.x - first.x) / Math.max(1, last.time - first.time);\n}\n\n/** Smooth Apple/rational rubber-band curve: continuous exponential-like resistance without linear kinks. */\nexport function rubberBand(overshoot: number, dimension = 320, constant = 0.55): number {\n const d = dimension || 320;\n const abs = Math.abs(overshoot);\n return Math.sign(overshoot) * (1 - 1 / ((abs * constant) / d + 1)) * d;\n}\n\n/** Projects resting travel from release velocity (velocity in px/ms; time in seconds). */\nexport function projectInertia(distance: number, velocity: number, time = 0.12): number {\n return distance + velocity * 1000 * time;\n}\n\n/** Smooths incoming release velocity toward a boundary so springs don't slam or clip into walls. */\nexport function softenVelocity(velocity: number, distanceToTarget: number, factor = 10): number {\n const maxAllowed = Math.abs(distanceToTarget) * factor;\n return Math.sign(velocity) * Math.min(Math.abs(velocity), maxAllowed);\n}\n\n/** A damped spring sampled by WAAPI: tuned for organic lightness with a hint of life (3% breath). */\nexport function springFrames(\n from: number,\n to: number,\n velocity = 0,\n duration = 480,\n config: { omega?: number; damping?: number; steps?: number } = {},\n) {\n const { omega = 16, damping = 0.74, steps = 36 } = config;\n const damped = omega * Math.sqrt(Math.max(0.001, 1 - damping * damping));\n const displacement = from - to;\n const coefficient = (velocity * 1000 + damping * omega * displacement) / damped;\n return Array.from({ length: steps + 1 }, (_, i) => {\n const t = (i / steps) * (duration / 1000);\n const value = to + Math.exp(-damping * omega * t) * (displacement * Math.cos(damped * t) + coefficient * Math.sin(damped * t));\n return { value: i === steps ? to : value, offset: i / steps };\n });\n}\n\n"},{"path":"registry/use-row-motion.ts","type":"registry:component","content":"// Hairline UI · order-status · MIT License\n// Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components\n\n\"use client\";\n\nimport * as React from \"react\";\n\n/* ─────────────────────────────────────────────────────────\n * ROW MOTION: rows that keep their place on screen\n *\n * glide after any render (a sort, a filter, new data from\n * the server) every row that moved glides from its\n * old place to its new one. Glides are additive, so\n * a change that lands mid-glide adds its own offset\n * instead of restarting anything\n * travel a row that sorts onto the page slides in from the\n * side where it ranked before; one that sorts off\n * slides out toward its new rank\n * enter a row that's new to the list fades in where it\n * lands while the rows below glide clear of it\n * leave a row that's gone folds away where it stood. Its\n * copy is the row's own element, detached by React\n * and moved into a layer React never renders into,\n * so a leaving row costs no render at all\n * stagger a sort can ask for the rows to set off one after\n * another, top first\n *\n * Positions are layout offsets (transforms ignored), kept after\n * every render and whenever the list changes size (a row\n * opening its detail), so they're never stale. Rows are found\n * by data-row-id; ranks are their places in the whole sorted\n * list, not just the page.\n * ───────────────────────────────────────────────────────── */\n\ntype Seen = { top: number; height: number; el: HTMLElement };\n\nconst EASE = \"cubic-bezier(0.16,1,0.3,1)\";\nconst GLIDE = 480;\n\nexport function useRowMotion(\n container: React.RefObject,\n { reduced, resetKey, ranks, ghosts }: { reduced: boolean; resetKey?: string | number; ranks: ReadonlyMap; ghosts: React.RefObject },\n) {\n const seen = React.useRef(new Map());\n const lastRanks = React.useRef(ranks);\n const lastKey = React.useRef(resetKey);\n const staggerNext = React.useRef(false);\n\n const read = React.useCallback(() => {\n const out = new Map();\n container.current?.querySelectorAll(\"[data-row-id]\").forEach((el) => out.set(el.dataset.rowId!, { top: el.offsetTop, height: el.offsetHeight, el }));\n return out;\n }, [container]);\n\n /** The row React just removed, back on screen where it stood, leaving: sliding toward where it went, or folding. */\n const leave = (was: Seen, dy: number) => {\n const layer = ghosts.current;\n const el = was.el;\n if (!layer || el.isConnected) return;\n // No getAnimations() here (it flushes style for the whole page): the exit below is added last and replaces any\n // glide still on the element.\n el.removeAttribute(\"data-row-id\");\n el.removeAttribute(\"tabindex\");\n el.setAttribute(\"aria-hidden\", \"true\");\n el.inert = true;\n Object.assign(el.style, { position: \"absolute\", left: \"0\", right: \"0\", top: `${was.top}px`, height: `${was.height}px`, margin: \"0\", overflow: \"hidden\" });\n layer.appendChild(el);\n const a = el.animate(\n dy\n ? [\n { transform: \"translateY(0px)\", opacity: 1, filter: \"blur(0px)\" },\n { transform: `translateY(${dy}px)`, opacity: 0, filter: \"blur(3px)\" },\n ]\n : [\n { opacity: 1, transform: \"none\", filter: \"blur(0px)\" },\n { opacity: 0, transform: \"scale(0.985)\", filter: \"blur(4px)\" },\n ],\n { duration: dy ? 360 : 280, easing: EASE, fill: \"forwards\" },\n );\n a.onfinish = a.oncancel = () => el.remove();\n };\n\n React.useLayoutEffect(() => {\n const el = container.current;\n if (!el) return;\n const before = seen.current;\n const after = read();\n const prevRanks = lastRanks.current;\n seen.current = after;\n lastRanks.current = ranks;\n const stagger = staggerNext.current;\n staggerNext.current = false;\n if (lastKey.current !== resetKey) {\n // A different page: the caller slides the whole body; nothing glides and nothing folds.\n lastKey.current = resetKey;\n return;\n }\n if (reduced || !before.size) return;\n\n // A typical row's height. Rows that come onto or leave the page only hint at the way they went (a row and a\n // quarter at most), so the list never shows holes while they travel.\n const heights = [...after.values()].map((b) => b.height).sort((a, b) => a - b);\n const rowH = heights[Math.floor(heights.length / 2)] ?? 48;\n const clamp = (dy: number) => Math.max(-rowH * 1.25, Math.min(rowH * 1.25, dy));\n\n let order = 0;\n after.forEach((now, id) => {\n const row = now.el;\n const was = before.get(id);\n const delay = stagger ? Math.min(order++ * 16, 200) : 0;\n if (was) {\n const dy = was.top - now.top;\n if (Math.abs(dy) < 0.5) return;\n row.animate([{ transform: `translateY(${dy}px)`, zIndex: 1 }, { transform: \"translateY(0px)\", zIndex: 1 }], { duration: GLIDE, delay, easing: EASE, composite: \"add\", fill: \"backwards\" });\n return;\n }\n const from = prevRanks.get(id);\n const to = ranks.get(id);\n if (from !== undefined && to !== undefined) {\n // It ranked somewhere off the page: it comes in from that side.\n row.animate(\n [\n { transform: `translateY(${clamp((from - to) * rowH)}px)`, opacity: 0, filter: \"blur(3px)\" },\n { transform: \"translateY(0px)\", opacity: 1, filter: \"blur(0px)\" },\n ],\n { duration: GLIDE, delay: delay / 2, easing: EASE, fill: \"backwards\" },\n );\n return;\n }\n row.animate(\n [\n { opacity: 0, filter: \"blur(4px)\" },\n { opacity: 1, filter: \"blur(0px)\" },\n ],\n { duration: 420, delay: 90, easing: EASE, fill: \"backwards\" },\n );\n });\n\n // Still in the list, just not on this page: its copy slides toward where it went. Gone for good: it folds.\n before.forEach((was, id) => {\n if (after.has(id)) return;\n const from = prevRanks.get(id);\n const to = ranks.get(id);\n leave(was, from !== undefined && to !== undefined ? clamp((to - from) * rowH) || rowH : 0);\n });\n });\n\n // The list changed size without a render of ours (a detail opening by transition): keep the positions true.\n React.useEffect(() => {\n const el = container.current;\n if (!el) return;\n const observer = new ResizeObserver(() => {\n seen.current = read();\n });\n observer.observe(el);\n return () => observer.disconnect();\n }, [container, read]);\n\n return {\n /** The next change (a sort) sets the rows off one after another. */\n stagger: () => {\n staggerNext.current = true;\n },\n };\n}\n"}],"css":{"@keyframes ui-col-in":{"from":{"max-width":"0","opacity":"0"},"to":{"max-width":"1em","opacity":"1"}},"@keyframes ui-col-out":{"from":{"max-width":"1em","opacity":"1"},"to":{"max-width":"0","opacity":"0"}}},"docs":"Docs and live preview: https://hairlineui.com/ui/order-status. MIT licensed: https://hairlineui.com/license#components","meta":{"license":"MIT"}}