{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"status-bars","type":"registry:component","title":"Status bars","description":"A status page that reads at a glance: ninety days a service drawn up bar by bar, one card that glides between them, and incidents whose updates open in as they're posted.","author":"Hairline UI","dependencies":[],"registryDependencies":["https://hairlineui.com/r/text-morph.json?as=dependency","https://hairlineui.com/r/number-roll.json?as=dependency"],"files":[{"path":"registry/status-bars.tsx","type":"registry:component","content":"// Hairline UI · status-bars · MIT License\n// Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components\n\n\"use client\";\n\nimport * as React from \"react\";\nimport { NumberRoll } from \"./number-roll\";\nimport { RelativeTime, type DateLike } from \"./relative-time\";\nimport { TextMorph } from \"./text-morph\";\n\n/* ─────────────────────────────────────────────────────────\n * STATUS BARS: a status page that reads at a glance\n *\n * overall one line says how things are; it morphs when a\n * service changes (\"All systems operational\" →\n * \"Some systems degraded\") and its dot changes\n * colour with it\n * days ninety days a service, a bar a day, drawn up\n * from the baseline left to right; thirty on a\n * narrow card\n * read point at a day (or arrow along with the keys) and\n * one card glides from bar to bar above them, saying\n * what happened that day\n * incidents an open incident shows its updates newest first;\n * a new update opens in on top and the status pill\n * morphs (Investigating → Identified → Monitoring →\n * Resolved). Past incidents fold behind a toggle\n *\n * Everything is props: feed it from your own checks or from\n * Better Stack, Instatus or Atlassian Statuspage.\n * ───────────────────────────────────────────────────────── */\n\nexport type { DateLike };\nexport type ServiceStatus = \"operational\" | \"degraded\" | \"major\" | \"maintenance\";\nexport type DayStatus = \"operational\" | \"degraded\" | \"major\" | \"maintenance\" | \"none\";\n\nexport interface StatusDay {\n /** \"2026-10-14\". */\n date: string;\n status: DayStatus;\n /** Minutes the service was degraded or down that day. */\n minutes?: number;\n /** Incident titles that touched this day. */\n incidents?: string[];\n}\n\nexport interface StatusService {\n id: string;\n name: string;\n status: ServiceStatus;\n /** Uptime over the days shown, as a percentage. */\n uptime?: number;\n /** Oldest first; the last is today. */\n days: StatusDay[];\n}\n\nexport type IncidentStage = \"investigating\" | \"identified\" | \"monitoring\" | \"resolved\";\n\nexport interface StatusIncident {\n id: string;\n title: string;\n impact: \"minor\" | \"major\" | \"maintenance\";\n stage: IncidentStage;\n /** Newest first. */\n updates: { id: string; at: DateLike; stage: IncidentStage; message: string }[];\n /** Names of affected services. */\n services?: string[];\n}\n\nexport interface StatusBarsProps extends Omit, \"title\"> {\n services: StatusService[];\n incidents?: StatusIncident[];\n updatedAt?: DateLike;\n title?: string;\n}\n\nconst EASE = \"cubic-bezier(0.16,1,0.3,1)\";\nconst FOCUS = \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40\";\nconst BAR: Record = {\n operational: \"bg-emerald-500/80\",\n degraded: \"bg-amber-500\",\n major: \"bg-red-500\",\n maintenance: \"bg-foreground/35\",\n none: \"bg-muted shadow-[inset_0_0_0_1px_var(--border)]\",\n};\nconst WORD: Record = { operational: \"Operational\", degraded: \"Degraded\", major: \"Outage\", maintenance: \"Maintenance\" };\nconst WORD_TONE: Record = {\n operational: \"text-emerald-600 dark:text-emerald-400\",\n degraded: \"text-amber-700 dark:text-amber-400\",\n major: \"text-red-600 dark:text-red-400\",\n maintenance: \"text-muted-foreground\",\n};\nconst STAGES: Record = { investigating: \"Investigating\", identified: \"Identified\", monitoring: \"Monitoring\", resolved: \"Resolved\" };\nconst NONE: StatusIncident[] = [];\n\nconst reducedQuery = \"(prefers-reduced-motion: reduce)\";\nconst subscribeReduced = (onChange: () => void) => {\n const query = window.matchMedia(reducedQuery);\n query.addEventListener(\"change\", onChange);\n return () => query.removeEventListener(\"change\", onChange);\n};\nconst useReducedMotion = () =>\n React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false);\n\nconst DAYS = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\nconst MONTHS = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\nconst dayLabel = (iso: string) => {\n const [y, m, d] = iso.split(\"-\").map(Number);\n const t = new Date(y, m - 1, d);\n return `${DAYS[t.getDay()]} ${d} ${MONTHS[m - 1]}`;\n};\nconst span = (min: number) => (min < 60 ? `${min} min` : `${Math.floor(min / 60)} h${min % 60 ? ` ${min % 60} min` : \"\"}`);\nconst said = (d: StatusDay) =>\n d.status === \"none\"\n ? \"No data\"\n : d.status === \"operational\"\n ? \"No incidents\"\n : d.status === \"maintenance\"\n ? `Maintenance${d.minutes ? ` for ${span(d.minutes)}` : \"\"}`\n : `${d.status === \"major\" ? \"Down\" : \"Degraded\"}${d.minutes ? ` for ${span(d.minutes)}` : \"\"}`;\n\nfunction overall(services: StatusService[]) {\n if (services.some((s) => s.status === \"major\")) return { text: \"Major outage\", tone: \"major\" as const };\n if (services.some((s) => s.status === \"degraded\")) return { text: \"Some systems degraded\", tone: \"degraded\" as const };\n if (services.some((s) => s.status === \"maintenance\")) return { text: \"Maintenance in progress\", tone: \"maintenance\" as const };\n return { text: \"All systems operational\", tone: \"operational\" as const };\n}\n\n/** A sentence that changes by lifting the old one out and the new one in. */\nfunction Line({ text, className = \"\", reduced }: { text: string; className?: string; reduced: boolean }) {\n const [shown, setShown] = React.useState(text);\n const [old, setOld] = React.useState<{ k: number; t: string }[]>([]);\n const key = React.useRef(0);\n const ref = React.useRef(null);\n if (text !== shown) {\n if (!reduced) setOld((o) => [...o, { k: ++key.current, t: shown }]);\n setShown(text);\n }\n React.useLayoutEffect(() => {\n if (!reduced && old.length) ref.current?.animate([{ opacity: 0, transform: \"translateY(0.3em)\", filter: \"blur(4px)\" }, { opacity: 1, transform: \"none\", filter: \"blur(0px)\" }], { duration: 420, delay: 80, easing: EASE, fill: \"backwards\" });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [shown]);\n return (\n \n \n {shown}\n \n {old.map((o) => (\n setOld((all) => all.filter((x) => x.k !== o.k))} />\n ))}\n \n );\n}\n\nfunction Gone({ text, onDone }: { text: string; onDone: () => void }) {\n const ref = React.useRef(null);\n React.useLayoutEffect(() => {\n const a = ref.current?.animate([{ opacity: 1, filter: \"blur(0px)\" }, { opacity: 0, transform: \"translateY(-0.3em)\", filter: \"blur(4px)\" }], { duration: 220, easing: EASE, fill: \"forwards\" });\n if (a) a.onfinish = onDone;\n return () => a?.cancel();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n return (\n \n {text}\n \n );\n}\n\nfunction Service({ s, reduced }: { s: StatusService; reduced: boolean }) {\n const id = React.useId();\n const barsRef = React.useRef(null);\n const cardRef = React.useRef(null);\n const [active, setActive] = React.useState(null);\n const [place, setPlace] = React.useState({ x: 0, ready: false });\n const [keyed, setKeyed] = React.useState(false);\n const [spoken, setSpoken] = React.useState(\"\");\n const last = s.days.length - 1;\n\n // The bars draw up from the baseline, left to right, once.\n React.useLayoutEffect(() => {\n if (reduced) return;\n barsRef.current?.querySelectorAll(\"[data-bar]\").forEach((b, i) =>\n b.animate([{ transform: \"scaleY(0)\" }, { transform: \"none\" }], { duration: 520, delay: 60 + i * 5, easing: EASE, fill: \"backwards\" }),\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // The card glides to sit over the day, kept inside the row.\n React.useLayoutEffect(() => {\n if (active === null) return;\n const bars = barsRef.current;\n const card = cardRef.current;\n const bar = bars?.querySelector(`[data-bar=\"${active}\"]`);\n if (!bars || !card || !bar) return;\n const center = bar.offsetLeft + bar.offsetWidth / 2;\n const x = Math.max(0, Math.min(bars.offsetWidth - card.offsetWidth, center - card.offsetWidth / 2));\n setPlace((p) => (p.x === x && p.ready ? p : { x, ready: true }));\n }, [active]);\n\n const day = active === null ? null : s.days[active];\n const move = (to: number) => {\n const visible = [...(barsRef.current?.querySelectorAll(\"[data-bar]\") ?? [])].filter((b) => b.offsetParent !== null).map((b) => Number(b.dataset.bar));\n const first = visible[0] ?? 0;\n const i = Math.max(first, Math.min(last, to));\n setActive(i);\n setKeyed(true);\n const d = s.days[i];\n setSpoken(`${dayLabel(d.date)}: ${said(d)}${d.incidents?.length ? `. ${d.incidents.join(\". \")}` : \"\"}`);\n };\n\n return (\n
\n
\n

\n \n {s.name}\n \n \n {WORD[s.status]}\n \n

\n {s.uptime !== undefined && (\n

\n uptime\n

\n )}\n
\n\n
\n {/* One card for every day: it glides between bars instead of a tooltip per bar. */}\n \n {day && (\n <>\n

{dayLabel(day.date)}

\n

{said(day)}

\n {day.incidents?.map((t) => (\n

\n {t}\n

\n ))}\n \n )}\n
\n\n {\n const bar = (e.target as HTMLElement).closest(\"[data-bar]\");\n if (bar) {\n setKeyed(false);\n setActive(Number(bar.dataset.bar));\n }\n }}\n onPointerLeave={() => !keyed && setActive(null)}\n onBlur={() => setActive(null)}\n onKeyDown={(e) => {\n const at = active ?? last;\n if (e.key === \"ArrowLeft\") move(at - 1);\n else if (e.key === \"ArrowRight\") move(at + 1);\n else if (e.key === \"Home\") move(0);\n else if (e.key === \"End\") move(last);\n else if (e.key === \"Escape\") return setActive(null);\n else return;\n e.preventDefault();\n }}\n onFocus={() => active === null && move(last)}\n className={`flex h-8 items-stretch gap-[2px] rounded-[4px] ${FOCUS} focus-visible:ring-offset-2 focus-visible:ring-offset-background`}\n >\n {s.days.map((d, i) => (\n \n ))}\n
\n \n {`${s.name} is ${WORD[s.status].toLowerCase()}. Arrow keys read each day.`}\n \n \n {keyed ? spoken : \"\"}\n \n \n\n
\n \n {Math.min(30, s.days.length)} days ago\n {s.days.length} days ago\n \n Today\n
\n \n );\n}\n\nfunction Incident({ inc, reduced, open, onToggle }: { inc: StatusIncident; reduced: boolean; open: boolean; onToggle?: () => void }) {\n const seen = React.useRef(new Set(inc.updates.map((u) => u.id)));\n const listRef = React.useRef(null);\n // A new update opens in on top.\n React.useLayoutEffect(() => {\n const fresh = inc.updates.filter((u) => !seen.current.has(u.id));\n fresh.forEach((u) => seen.current.add(u.id));\n if (reduced || !fresh.length) return;\n for (const u of fresh) {\n const el = listRef.current?.querySelector(`[data-update=\"${CSS.escape(u.id)}\"]`);\n el?.animate([{ opacity: 0, transform: \"translateY(-6px)\", filter: \"blur(4px)\" }, { opacity: 1, transform: \"none\", filter: \"blur(0px)\" }], { duration: 460, easing: EASE });\n }\n }, [inc.updates, reduced]);\n const tick = inc.stage === \"resolved\" ? \"bg-emerald-500\" : inc.impact === \"major\" ? \"bg-red-500\" : inc.impact === \"minor\" ? \"bg-amber-500\" : \"bg-foreground/35\";\n const updates = open ? inc.updates : inc.updates.slice(0, 1);\n return (\n
\n \n
\n

{inc.title}

\n \n {STAGES[inc.stage]}\n \n
\n {inc.services?.length ?

{inc.services.join(\", \")}

: null}\n
    \n {updates.map((u) => (\n
  1. \n \n {STAGES[u.stage]}\n \n \n

    {u.message}

    \n
    2. \n ))}\n
\n {onToggle && inc.updates.length > 1 && (\n \n )}\n
\n );\n}\n\nexport function StatusBars({ services, incidents = NONE, updatedAt, title = \"Status\", className = \"\", ...props }: StatusBarsProps) {\n const reduced = useReducedMotion();\n const [showPast, setShowPast] = React.useState(false);\n const [openPast, setOpenPast] = React.useState(null);\n const now = overall(services);\n const active = incidents.filter((i) => i.stage !== \"resolved\");\n const past = incidents.filter((i) => i.stage === \"resolved\");\n const dot = { operational: \"bg-emerald-500\", degraded: \"bg-amber-500\", major: \"bg-red-500\", maintenance: \"bg-foreground/40\" }[now.tone];\n\n return (\n
\n
\n

\n \n \n {now.tone !== \"operational\" && !reduced && }\n \n {title}: \n \n

\n {updatedAt !== undefined && (\n

\n \n

\n )}\n
\n\n {active.length > 0 && (\n
\n {active.map((inc) => (\n \n ))}\n
\n )}\n\n
\n {services.map((s) => (\n \n ))}\n
\n\n {past.length > 0 && (\n
\n setShowPast((v) => !v)}\n className={`-ml-2 inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-full px-2 text-[12px] font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${FOCUS}`}\n >\n {showPast ? \"Hide past incidents\" : \"Past incidents\"}\n \n \n \n \n
\n
\n
\n {past.map((inc) => (\n setOpenPast((o) => (o === inc.id ? null : inc.id))} />\n ))}\n
\n
\n
\n
\n )}\n
\n );\n}\n"},{"path":"registry/relative-time.tsx","type":"registry:component","content":"// Hairline UI · status-bars · MIT License\n// Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components\n\n\"use client\";\n\nimport * as React from \"react\";\nimport { NumberRoll } from \"./number-roll\";\nimport { TextMorph } from \"./text-morph\";\n\n/* ─────────────────────────────────────────────────────────\n * RELATIVE TIME: \"2 min ago\" that keeps itself true\n *\n * tick it re-renders only when the words would change:\n * on the next minute under an hour, the next hour\n * under a day; nothing runs between\n * roll the number rolls up (\"2 min\" → \"3 min\") and the\n * unit morphs when it changes (\"59 min\" → \"1 h\")\n * date past a week it settles on the date (\"12 Sep\")\n *\n * Until it's mounted it renders the date, so the server and the\n * first paint agree; the hover title is always the full time.\n * ───────────────────────────────────────────────────────── */\n\nexport type DateLike = Date | string | number;\n\nexport interface RelativeTimeProps extends Omit, \"children\"> {\n date: DateLike;\n /** Said before the time, e.g. \"Last used\". */\n prefix?: string;\n /** Under a minute. */\n justNow?: string;\n locales?: string | string[];\n}\n\nconst MINUTE = 60_000;\nconst HOUR = 60 * MINUTE;\nconst DAY = 24 * HOUR;\n\nexport const toTime = (d: DateLike) => (d instanceof Date ? d.getTime() : typeof d === \"number\" ? d : new Date(d).getTime());\n\nconst MONTHS = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\n\n/** \"12 Sep\", with the year when it isn't this one; pass locales to use the browser's own format. */\nexport function formatDate(d: DateLike, locales?: string | string[]) {\n const t = new Date(toTime(d));\n const sameYear = t.getFullYear() === new Date().getFullYear();\n if (locales) return t.toLocaleDateString(locales, sameYear ? { day: \"numeric\", month: \"short\" } : { day: \"numeric\", month: \"short\", year: \"numeric\" });\n return `${t.getDate()} ${MONTHS[t.getMonth()]}${sameYear ? \"\" : ` ${t.getFullYear()}`}`;\n}\n\ntype Parts = { n: number | null; unit: string; next: number };\n\nfunction parts(at: number, now: number, justNow: string, locales?: string | string[]): Parts {\n const ago = Math.max(0, now - at);\n if (ago < MINUTE) return { n: null, unit: justNow, next: MINUTE - ago };\n if (ago < HOUR) return { n: Math.floor(ago / MINUTE), unit: \"min ago\", next: MINUTE - (ago % MINUTE) };\n if (ago < DAY) {\n const h = Math.floor(ago / HOUR);\n return { n: h, unit: h === 1 ? \"hour ago\" : \"hours ago\", next: HOUR - (ago % HOUR) };\n }\n if (ago < 7 * DAY) {\n const d = Math.floor(ago / DAY);\n return { n: d, unit: d === 1 ? \"day ago\" : \"days ago\", next: DAY - (ago % DAY) };\n }\n return { n: null, unit: formatDate(at, locales), next: 0 };\n}\n\nconst subscribeMounted = () => () => {};\n\nexport function RelativeTime({ date, prefix, justNow = \"just now\", locales, className = \"\", ...props }: RelativeTimeProps) {\n const at = toTime(date);\n const mounted = React.useSyncExternalStore(subscribeMounted, () => true, () => false);\n const [now, setNow] = React.useState(() => Date.now());\n const p = parts(at, mounted ? now : at + 8 * DAY, justNow, locales);\n\n // One timer, set for the moment the words change.\n React.useEffect(() => {\n if (!mounted || !p.next) return;\n const timer = window.setTimeout(() => setNow(Date.now()), p.next + 50);\n return () => window.clearTimeout(timer);\n }, [mounted, p.next, now]);\n\n React.useEffect(() => setNow(Date.now()), [at]);\n\n const iso = new Date(at).toISOString();\n return (\n \n {prefix && {prefix} }\n {/* Remounted once on the client, so the first real words appear without a morph. */}\n \n \n );\n}\n\nfunction Words({ n, unit }: { n: number | null; unit: string }) {\n return (\n <>\n \n \n \n \n \n \n \n {unit}\n \n );\n}\n"}],"css":{"@keyframes ui-ping":{"from":{"transform":"scale(1)","opacity":"0.55"},"to":{"transform":"scale(2.6)","opacity":"0"}}},"docs":"Docs and live preview: https://hairlineui.com/ui/status-bars. MIT licensed: https://hairlineui.com/license#components","meta":{"license":"MIT"}}