sid-ui 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sid-ui",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "packageManager": "bun@1.4.2",
   "description": "React components, tokens, and theme used by Joined products.",
   "repository": {

package/src/components/UptimeBar.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useState } from "react";
+
+/** How a day went: fine, degraded, down, or nothing measured yet. */
+export type UptimeTone = "up" | "degraded" | "down" | "none";
+
+export type UptimeDay = {
+  /** Shown as the tip's title, e.g. "Oct 11, 2026". */
+  label: string;
+  tone: UptimeTone;
+  /** One line per fact in the tip, e.g. "99.98% uptime", "Slow search". */
+  details?: string[];
+};
+
+const TONE_LABEL: Record<UptimeTone, string> = {
+  up: "No downtime",
+  degraded: "Degraded",
+  down: "Outage",
+  none: "No data",
+};
+
+/** Keeps the tip inside the bar near either end. */
+const EDGE_SHARE = 0.15;
+
+/**
+ * A status-page history: one slim bar per day, oldest on the left, coloured by how the
+ * day went. Each bar reads out its date and details on hover or focus.
+ */
+export function UptimeBar({
+  days,
+  label,
+  startLabel,
+  endLabel,
+  summary,
+}: {
+  days: UptimeDay[];
+  /** Accessible name for the row of days, e.g. "API uptime, last 90 days". */
+  label: string;
+  /** Under the left end, e.g. "90 days ago". */
+  startLabel?: string;
+  /** Under the right end, e.g. "Today". */
+  endLabel?: string;
+  /** Centered under the bars, e.g. "99.98% uptime". */
+  summary?: string;
+}) {
+  const [active, setActive] = useState<number | null>(null);
+  const align = (index: number) => {
+    const share = days.length > 1 ? index / (days.length - 1) : 0.5;
+    if (share < EDGE_SHARE) return "start";
+    if (share > 1 - EDGE_SHARE) return "end";
+    return "center";
+  };
+
+  return (
+    <div className="os-uptime">
+      <div className="os-uptime-days" role="group" aria-label={label}>
+        {days.map((day, index) => {
+          const details = day.details?.length ? day.details : [TONE_LABEL[day.tone]];
+          return (
+            <span
+              key={`${day.label}-${index}`}
+              className="os-uptime-day"
+              data-tone={day.tone}
+              tabIndex={0}
+              role="img"
+              aria-label={`${day.label}: ${details.join(", ")}`}
+              onPointerEnter={() => setActive(index)}
+              onPointerLeave={() => setActive(null)}
+              onFocus={() => setActive(index)}
+              onBlur={() => setActive(null)}
+            >
+              {active === index ? (
+                <span className="os-chart-tip" data-align={align(index)} role="presentation">
+                  <span className="os-chart-tip-title">{day.label}</span>
+                  {details.map((detail) => (
+                    <span key={detail} className="os-chart-tip-row">
+                      {detail}
+                    </span>
+                  ))}
+                </span>
+              ) : null}
+            </span>
+          );
+        })}
+      </div>
+      {startLabel || endLabel || summary ? (
+        <div className="os-uptime-axis">
+          <span>{startLabel}</span>
+          <span className="os-uptime-summary">{summary}</span>
+          <span>{endLabel}</span>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/index.ts

@@ -184,6 +184,8 @@ export { FunnelChart } from "./FunnelChart";
 export type { FunnelStage } from "./FunnelChart";
 export { HeatmapCalendar } from "./HeatmapCalendar";
 export type { HeatmapDay } from "./HeatmapCalendar";
+export { UptimeBar } from "./UptimeBar";
+export type { UptimeDay, UptimeTone } from "./UptimeBar";
 export { ChartLegend, CHART_TONES } from "./chartParts";
 export type { ChartTone, LegendItem } from "./chartParts";
 export { compactNumber } from "./chartMath";

package/src/styles/components/charts.css

@@ -657,3 +657,66 @@
     transition: none;
   }
 }
+
+/* ── UptimeBar ────────────────────────────────────────────────────── */
+
+.os-uptime {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.os-uptime-days {
+  display: flex;
+  height: var(--spacing-8);
+  gap: var(--spacing-0-5);
+}
+
+.os-uptime-day {
+  position: relative;
+  flex: 1 1 0;
+  min-width: 0;
+  border-radius: var(--radius-inner);
+  background: var(--color-data-categorical-green);
+  outline: none;
+}
+.os-uptime-day[data-tone="degraded"] {
+  background: var(--color-data-categorical-orange);
+}
+.os-uptime-day[data-tone="down"] {
+  background: var(--color-data-categorical-red);
+}
+.os-uptime-day[data-tone="none"] {
+  background: var(--color-background-muted);
+}
+.os-uptime-day:hover,
+.os-uptime-day:focus-visible {
+  box-shadow: 0 0 0 var(--spacing-0-5) var(--color-border-emphasized);
+}
+
+/* The tip sits above the hovered day, pulled inward at either end of the row. */
+.os-uptime-day .os-chart-tip {
+  inset: auto auto calc(100% + var(--spacing-2)) 50%;
+  transform: translateX(-50%);
+}
+.os-uptime-day .os-chart-tip[data-align="start"] {
+  left: 0;
+  transform: none;
+}
+.os-uptime-day .os-chart-tip[data-align="end"] {
+  right: 0;
+  left: auto;
+  transform: none;
+}
+
+.os-uptime-axis {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: var(--spacing-2);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+}
+.os-uptime-axis span:last-child {
+  text-align: end;
+}