@dowel-ui/react 0.5.0 → 0.8.0

package/src/components/uptime-matrix/uptime-matrix.tsx

@@ -0,0 +1,443 @@
+"use client";
+
+// Ported from amicro "System Uptime Matrix" (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  useRef,
+  useState,
+  type ComponentPropsWithRef,
+  type FocusEvent,
+  type KeyboardEvent,
+} from "react";
+
+import {
+  DitherCanvas,
+  ditherFill,
+  DitherTable,
+  drift,
+  hash2,
+  makePath,
+  tokenToCss,
+  traceRoundedRect,
+  type DitherDraw,
+} from "@/components/dither-canvas";
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/*
+ * A status history drawn in dithered tiles — amicro's 90-day uptime matrix.
+ * Each day is a tall tile coloured by state: success, warning and destructive
+ * are the right tokens here, because the colour *is* the state. Colour is not
+ * the only cue: degraded tiles are striped, outages drawn solid, and every
+ * state is named in the legend, the readout and the table.
+ *
+ * Over the canvas sits an APG grid with one roving tab stop. Arrows move a day
+ * (Up/Down a row when the tiles wrap into `columns`), Home/End go to the row's
+ * ends, Ctrl+Home/End to the first and last day, Escape hides the readout. Each
+ * cell's text is its readout. Days run left to right in every direction, as
+ * the canvas draws them.
+ */
+
+export const uptimeMatrixVariants = cva("flex flex-col gap-2", {
+  variants: {
+    size: {
+      sm: "[--uptime-matrix-height:1.25rem]",
+      md: "[--uptime-matrix-height:1.75rem]",
+      lg: "[--uptime-matrix-height:2.5rem]",
+    },
+  },
+  defaultVariants: { size: "md" },
+});
+
+export type UptimeStatus = "operational" | "degraded" | "outage" | "unknown";
+
+export interface UptimeDay {
+  /** The day's name, e.g. a date. */
+  label: string;
+  status: UptimeStatus;
+  /** Uptime that day, in percent. */
+  uptime?: number;
+  /** A note for the readout, e.g. the incident. */
+  note?: string;
+}
+
+export interface UptimeMatrixProps
+  extends
+    Omit<ComponentPropsWithRef<"div">, "children">,
+    VariantProps<typeof uptimeMatrixVariants> {
+  days: readonly UptimeDay[];
+  /** What the matrix shows. Names the image, the grid and the data table. */
+  label: string;
+  /** Replaces the generated summary in the image's accessible name. */
+  description?: string;
+  /** Tiles per row. Default: every day in one row. */
+  columns?: number;
+  /** Names for each state (translate here). */
+  statusLabels?: Partial<Record<UptimeStatus, string>>;
+  formatUptime?: (percent: number) => string;
+  /** Show the state legend with counts. */
+  showLegend?: boolean;
+  /** Show the first and last day under the tiles. */
+  showAxis?: boolean;
+  /** Replace the axis labels, e.g. "90 days ago" and "Today". */
+  startLabel?: string;
+  endLabel?: string;
+  /** Show the data table. It is always present for assistive technology. */
+  showTable?: boolean;
+  animate?: boolean;
+  /** Cell pitch in CSS pixels. Default 2: tiles are thin. */
+  cell?: number;
+  /** The day whose readout shows (controlled); null hides it. */
+  activeIndex?: number | null;
+  defaultActiveIndex?: number | null;
+  onActiveIndexChange?: (index: number | null) => void;
+  /** Data table headers. */
+  dayLabel?: string;
+  statusLabel?: string;
+  uptimeLabel?: string;
+  noteLabel?: string;
+}
+
+/** Gap between tiles in CSS pixels. */
+export const UPTIME_GAP = 2;
+
+export const UPTIME_STATUSES: readonly UptimeStatus[] = [
+  "operational",
+  "degraded",
+  "outage",
+  "unknown",
+];
+
+/** The state token for each status. */
+export const UPTIME_COLORS: Readonly<Record<UptimeStatus, string>> = {
+  operational: "success",
+  degraded: "warning",
+  outage: "destructive",
+  unknown: "muted-foreground",
+};
+
+const DEFAULT_LABELS: Record<UptimeStatus, string> = {
+  operational: "Operational",
+  degraded: "Degraded",
+  outage: "Outage",
+  unknown: "No data",
+};
+
+/** The day a grid key moves to, or null when the key is not a grid key. */
+export function dayFromKey(
+  key: string,
+  ctrl: boolean,
+  index: number,
+  count: number,
+  columns: number,
+): number | null {
+  const last = count - 1;
+  const clampTo = (value: number) => Math.min(last, Math.max(0, value));
+  const rowStart = index - (index % columns);
+  switch (key) {
+    case "ArrowRight":
+      return clampTo(index + 1);
+    case "ArrowLeft":
+      return clampTo(index - 1);
+    case "ArrowDown":
+      return index + columns <= last ? index + columns : index;
+    case "ArrowUp":
+      return index - columns >= 0 ? index - columns : index;
+    case "Home":
+      return ctrl ? 0 : rowStart;
+    case "End":
+      return ctrl ? last : clampTo(rowStart + columns - 1);
+    default:
+      return null;
+  }
+}
+
+export function UptimeMatrix({
+  days,
+  label,
+  description,
+  columns,
+  statusLabels,
+  formatUptime = (percent) => `${String(Math.round(percent * 100) / 100)}%`,
+  showLegend = true,
+  showAxis = true,
+  startLabel,
+  endLabel,
+  size,
+  showTable = false,
+  animate = true,
+  cell = 2,
+  activeIndex,
+  defaultActiveIndex = null,
+  onActiveIndexChange,
+  dayLabel = "Day",
+  statusLabel = "Status",
+  uptimeLabel = "Uptime",
+  noteLabel = "Note",
+  className,
+  ...props
+}: UptimeMatrixProps) {
+  const [uncontrolled, setUncontrolled] = useState<number | null>(defaultActiveIndex);
+  const [focusIndex, setFocusIndex] = useState(0);
+  const gridRef = useRef<HTMLDivElement>(null);
+  const active = activeIndex !== undefined ? activeIndex : uncontrolled;
+  const count = days.length;
+  const perRow = Math.max(1, Math.min(count, columns ?? count));
+  const rowCount = Math.ceil(count / perRow);
+  const names = { ...DEFAULT_LABELS, ...statusLabels };
+
+  const setActive = (next: number | null) => {
+    if (next === active) return;
+    if (activeIndex === undefined) setUncontrolled(next);
+    onActiveIndexChange?.(next);
+  };
+
+  const draw: DitherDraw = (ctx, frame) => {
+    const { width, height, time } = frame;
+    if (count === 0) return;
+    const tileWidth = (width - UPTIME_GAP * (perRow - 1)) / perRow;
+    const tileHeight = (height - UPTIME_GAP * (rowCount - 1)) / rowCount;
+    if (tileWidth <= 0 || tileHeight <= 0) return;
+    const step = frame.cell;
+    days.forEach((day, i) => {
+      const x = (i % perRow) * (tileWidth + UPTIME_GAP);
+      const y = Math.floor(i / perRow) * (tileHeight + UPTIME_GAP);
+      const hot = active === i;
+      const dim = active !== null && !hot;
+      const status = day.status;
+      ditherFill(ctx, {
+        clip: makePath((sink) => {
+          traceRoundedRect(sink, x, y, tileWidth, tileHeight, Math.min(2, tileWidth / 2));
+        }),
+        bounds: { x, y, width: tileWidth, height: tileHeight },
+        cell: step,
+        color: frame.color(UPTIME_COLORS[status]),
+        alpha: (status === "unknown" ? 0.35 : 0.85) * (dim ? 0.55 : 1),
+        density: (cx, cy) => {
+          const base = (0.3 + 0.4 * drift(cx, cy, time * 1.2)) * (0.8 + 0.4 * hash2(cx, cy));
+          if (status === "outage") return base + 0.3;
+          // Degraded: diagonal stripes, so the state reads without its colour.
+          if (status === "degraded" && Math.floor((cx + cy) / (step * 2)) % 2 === 0)
+            return base * 0.35;
+          return base + (hot ? 0.2 : 0);
+        },
+      });
+    });
+  };
+
+  const describe = (i: number) => {
+    const day = days[i];
+    if (!day) return "";
+    const uptime =
+      day.uptime !== undefined
+        ? `, ${formatUptime(day.uptime)} ${uptimeLabel.toLowerCase()}`
+        : "";
+    const note = day.note ? `. ${day.note}` : "";
+    return `${day.label}: ${names[day.status]}${uptime}${note}`;
+  };
+
+  const counts = UPTIME_STATUSES.map(
+    (status) => [status, days.filter((day) => day.status === status).length] as const,
+  );
+  const measured = days.filter((day) => day.uptime !== undefined);
+  const average =
+    measured.length > 0
+      ? measured.reduce((sum, day) => sum + (day.uptime ?? 0), 0) / measured.length
+      : null;
+  const summary =
+    description ??
+    (count === 0
+      ? "No data."
+      : `${String(count)} days: ${counts
+          .filter(([, n]) => n > 0)
+          .map(([status, n]) => `${String(n)} ${names[status].toLowerCase()}`)
+          .join(", ")}.` +
+        (average !== null
+          ? ` Average ${uptimeLabel.toLowerCase()} ${formatUptime(average)}.`
+          : ""));
+
+  const roving = Math.min(focusIndex, Math.max(0, count - 1));
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "Escape") {
+      if (active !== null) {
+        event.preventDefault();
+        setActive(null);
+      }
+      return;
+    }
+    const next = dayFromKey(event.key, event.ctrlKey || event.metaKey, roving, count, perRow);
+    if (next === null) return;
+    event.preventDefault();
+    gridRef.current?.querySelector<HTMLElement>(`[data-index="${String(next)}"]`)?.focus();
+  };
+
+  const onBlur = (event: FocusEvent<HTMLDivElement>) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) setActive(null);
+  };
+
+  const gap = `${String(UPTIME_GAP)}px`;
+  const rowsOf = Array.from({ length: rowCount }, (_, r) =>
+    days.slice(r * perRow, (r + 1) * perRow).map((day, c) => ({ day, index: r * perRow + c })),
+  );
+  const activeX = active !== null ? ((active % perRow) + 0.5) / perRow : 0;
+  const shift =
+    active !== null && (active % perRow === 0 || activeX < 0.15)
+      ? "0%"
+      : active !== null && (active % perRow === perRow - 1 || activeX > 0.85)
+        ? "-100%"
+        : "-50%";
+  const withUptime = measured.length > 0;
+  const withNote = days.some((day) => day.note);
+
+  return (
+    <div
+      data-slot="uptime-matrix"
+      {...props}
+      className={cn(uptimeMatrixVariants({ size }), className)}
+    >
+      <div className="flex flex-col gap-1.5" style={{ direction: "ltr" }}>
+        <div
+          data-slot="uptime-matrix-plot"
+          className="relative"
+          style={{
+            height: `calc(var(--uptime-matrix-height) * ${String(Math.max(1, rowCount))} + ${String(
+              UPTIME_GAP * Math.max(0, rowCount - 1),
+            )}px)`,
+          }}
+        >
+          <div role="img" aria-label={`${label}: ${summary}`} className="size-full">
+            <DitherCanvas draw={draw} animate={animate} cell={cell} />
+          </div>
+          {count > 0 && (
+            <div
+              ref={gridRef}
+              role="grid"
+              // Focusable only by script, so the one roving cell stays the tab stop.
+              tabIndex={-1}
+              aria-label={label}
+              className="absolute inset-0 flex flex-col"
+              style={{ gap }}
+              onKeyDown={onKeyDown}
+              onBlur={onBlur}
+              onPointerLeave={(event) => {
+                if (!event.currentTarget.contains(document.activeElement)) setActive(null);
+              }}
+            >
+              {rowsOf.map((row, r) => (
+                <div
+                  key={r}
+                  role="row"
+                  className="grid flex-1"
+                  style={{
+                    gap,
+                    gridTemplateColumns: `repeat(${String(perRow)}, minmax(0, 1fr))`,
+                  }}
+                >
+                  {row.map(({ day, index }) => (
+                    <div
+                      key={`${day.label}-${String(index)}`}
+                      role="gridcell"
+                      data-index={index}
+                      data-status={day.status}
+                      data-active={active === index || undefined}
+                      tabIndex={roving === index ? 0 : -1}
+                      className={cn("rounded-xs", focusRing)}
+                      onPointerEnter={() => {
+                        setActive(index);
+                      }}
+                      onFocus={() => {
+                        setFocusIndex(index);
+                        setActive(index);
+                      }}
+                    >
+                      <span className="sr-only">{describe(index)}</span>
+                    </div>
+                  ))}
+                </div>
+              ))}
+            </div>
+          )}
+          {active !== null && days[active] && (
+            <div
+              aria-hidden
+              data-slot="uptime-matrix-readout"
+              className="pointer-events-none absolute z-10 rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs whitespace-nowrap text-popover-foreground shadow-md"
+              style={{
+                left: `${String(activeX * 100)}%`,
+                top: `${String((Math.floor(active / perRow) / rowCount) * 100)}%`,
+                transform: `translate(${shift}, calc(-100% - 0.375rem))`,
+              }}
+            >
+              <p className="font-medium">{days[active].label}</p>
+              <p className="flex items-center gap-1.5 text-muted-foreground">
+                <span
+                  className="size-2 rounded-full"
+                  style={{ background: tokenToCss(UPTIME_COLORS[days[active].status]) }}
+                />
+                {names[days[active].status]}
+                {days[active].uptime !== undefined && (
+                  <span className="tabular-nums">· {formatUptime(days[active].uptime)}</span>
+                )}
+              </p>
+              {days[active].note && (
+                <p className="text-muted-foreground">{days[active].note}</p>
+              )}
+            </div>
+          )}
+        </div>
+        {showAxis && count > 0 && (
+          <div
+            aria-hidden
+            data-slot="uptime-matrix-axis"
+            className="flex justify-between gap-3 font-mono text-2xs text-muted-foreground"
+          >
+            <span>{startLabel ?? days[0]?.label}</span>
+            {average !== null && (
+              <span className="tabular-nums">
+                {formatUptime(average)} {uptimeLabel.toLowerCase()}
+              </span>
+            )}
+            <span>{endLabel ?? days[count - 1]?.label}</span>
+          </div>
+        )}
+      </div>
+      {showLegend && (
+        <ul
+          data-slot="uptime-matrix-legend"
+          aria-label={`${label} legend`}
+          className="flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted-foreground"
+        >
+          {counts
+            .filter(([status, n]) => status !== "unknown" || n > 0)
+            .map(([status, n]) => (
+              <li key={status} className="flex items-center gap-1.5">
+                <span
+                  aria-hidden
+                  className="size-2.5 rounded-xs"
+                  style={{ background: tokenToCss(UPTIME_COLORS[status]) }}
+                />
+                {names[status]} <span className="tabular-nums">{n}</span>
+              </li>
+            ))}
+        </ul>
+      )}
+      <DitherTable
+        caption={label}
+        columns={[
+          dayLabel,
+          statusLabel,
+          ...(withUptime ? [uptimeLabel] : []),
+          ...(withNote ? [noteLabel] : []),
+        ]}
+        rows={days.map((day) => [
+          day.label,
+          names[day.status],
+          ...(withUptime ? [day.uptime !== undefined ? formatUptime(day.uptime) : ""] : []),
+          ...(withNote ? [day.note ?? ""] : []),
+        ])}
+        visible={showTable}
+      />
+    </div>
+  );
+}

package/src/index.ts

@@ -21,11 +21,13 @@ export * from "./components/ai-tool";
 export * from "./components/alert";
 export * from "./components/avatar";
 export * from "./components/badge";
+export * from "./components/breadcrumb";
 export * from "./components/button";
 export * from "./components/calendar";
 export * from "./components/card";
 export * from "./components/checkbox";
 export * from "./components/code-block";
+export * from "./components/collapsible";
 export * from "./components/combobox";
 export * from "./components/command";
 export * from "./components/confirm-typed";
@@ -33,6 +35,7 @@ export * from "./components/cron-editor";
 export * from "./components/data-table";
 export * from "./components/date-picker";
 export * from "./components/dialog";
+export * from "./components/direction";
 export * from "./components/diff-viewer";
 export * from "./components/dns-record";
 export * from "./components/drawer";
@@ -56,6 +59,7 @@ export * from "./components/select";
 export * from "./components/separator";
 export * from "./components/session-expiry";
 export * from "./components/sheet";
+export * from "./components/sidebar";
 export * from "./components/shortcut-recorder";
 export * from "./components/skeleton";
 export * from "./components/slider";
@@ -66,8 +70,118 @@ export * from "./components/table";
 export * from "./components/tabs";
 export * from "./components/tags-input";
 export * from "./components/time-range-picker";
+export * from "./components/textarea";
 export * from "./components/toast";
 export * from "./components/tooltip";
+export * from "./components/dots-loader";
+export * from "./components/ring-loader";
+export * from "./components/bar-loader";
+export * from "./components/shape-loader";
+export * from "./components/text-loader";
+export * from "./components/grid-loader";
+export * from "./components/morph-button";
+export * from "./components/effect-button";
+export * from "./components/magnetic-button";
+export * from "./components/dot-morph-button";
+export * from "./components/focus-blur-links";
+export * from "./components/copy-button";
+export * from "./components/text-effect";
+export * from "./components/text-swap";
+export * from "./components/shimmer-text";
+export * from "./components/scramble-text";
+export * from "./components/typewriter-text";
+export * from "./components/scroll-reveal-text";
+export * from "./components/number-flow";
+export * from "./components/card-spread";
+export * from "./components/carousel-3d";
+export * from "./components/time-stack";
+export * from "./components/expandable-cards";
+export * from "./components/glow-card";
+export * from "./components/photo-stack";
+export * from "./components/card-stack";
+export * from "./components/book";
+export * from "./components/product-card";
+export * from "./components/marquee";
+export * from "./components/reviews-carousel";
+export * from "./components/invite-carousel";
+export * from "./components/swipe-carousel";
+export * from "./components/image-accordion";
+export * from "./components/tilt-card";
+export * from "./components/dither-canvas";
+export * from "./components/dither-donut";
+export * from "./components/dither-bar";
+export * from "./components/dither-area";
+export * from "./components/dither-line";
+export * from "./components/dither-heatmap";
+export * from "./components/dither-gauge";
+export * from "./components/dither-scatter";
+export * from "./components/dither-funnel";
+export * from "./components/dither-meter";
+export * from "./components/uptime-matrix";
+export * from "./components/avatar-group";
+export * from "./components/app-stack";
+export * from "./components/contribution-graph";
+export * from "./components/star-count";
+export * from "./components/notification-badge";
+export * from "./components/switchboard-card";
+export * from "./components/island";
+export * from "./components/morph-surface";
+export * from "./components/gooey-popover";
+export * from "./components/rich-popover";
+export * from "./components/comment-bubble";
+export * from "./components/account-menu";
+export * from "./components/exposure-slider";
+export * from "./components/scrubber";
+export * from "./components/image-selector";
+export * from "./components/image-metadata";
+export * from "./components/photo-tabs";
+export * from "./components/social-selector";
+export * from "./components/expandable-list";
+export * from "./components/otp-input";
+export * from "./components/stepper";
+export * from "./components/context-menu";
+export * from "./components/tweet-card";
+export * from "./components/cursor-follow";
+export * from "./components/gradient-orb";
+export * from "./components/orb-face";
+export * from "./components/pixel-avatar";
+export * from "./components/ai-loader";
+export * from "./components/ai-suggestions";
+export * from "./components/ai-branch";
+export * from "./components/ai-artifact";
+export * from "./components/shader-transition";
+export * from "./components/magnetic-select";
+export * from "./components/aspect-morph";
+export * from "./components/create-menu";
+export * from "./components/radial-menu";
+export * from "./components/canvas-toolbar";
+export * from "./components/goo-tabs";
+export * from "./components/assignee-picker";
+export * from "./components/selection-list";
+export * from "./components/browser-tabs";
+export * from "./components/action-node";
+export * from "./components/goo-ball";
+export * from "./components/glass-bubble";
+export * from "./components/drag-stepper";
+export * from "./components/slosh-slider";
+export * from "./components/reorder-list";
+export * from "./components/magnify-dock";
+export * from "./components/range-dial";
+export * from "./components/folding-frame";
+export * from "./components/slide-to-confirm";
+export * from "./components/pull-to-refresh";
+export * from "./components/todo-tower";
+export * from "./components/palette-generator";
+export * from "./components/inline-confirm";
+export * from "./components/liquid-toggle";
+export * from "./components/animated-checklist";
+export * from "./components/now-playing";
+export * from "./components/notify-button";
+export * from "./components/tick-progress";
+export * from "./components/escape-button";
+export * from "./components/expanding-search";
+export * from "./components/dial";
+export * from "./components/command-bar";
 
 export { cn } from "./lib/utils";
 export * from "./lib/styles";

package/src/lib/styles.ts

@@ -24,3 +24,19 @@ export const invalidStyles =
 /** Sizes any icon rendered as a direct child of a control. */
 export const iconSlot =
   "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+
+/**
+ * Mirrors an icon that points along the reading direction.
+ *
+ * A chevron meaning "forward" points right in English and left in Arabic.
+ * Logical CSS does not help here: the glyph is drawn, not laid out, so the
+ * class list mirrors the box while the arrow inside it goes on pointing the
+ * wrong way. The result is a fully mirrored page whose "next" button points
+ * back the way you came.
+ *
+ * Only for icons whose meaning is directional. A chevron pointing *down* to
+ * open a select means down in every language, and flipping it horizontally
+ * would be flipping a thing that was never sided. Nor is a tick, a cross or a
+ * spinner.
+ */
+export const mirrorForDirection = "rtl:-scale-x-100";