@blurrow/ui 0.1.0 → 0.2.0

package/dist/registry/StatCard.tsx

@@ -0,0 +1,256 @@
+"use client";
+
+import React, { useEffect, useId, useRef, useState } from "react";
+import { CardShell } from "./CardShell";
+
+type StatTheme = "light" | "dark";
+type DeltaDirection = "up" | "down" | "neutral";
+
+interface StatCardProps {
+  label: string;
+  value: number;
+  prefix?: string;
+  suffix?: string;
+  decimals?: number;
+  delta?: { value: string; direction: DeltaDirection };
+  hint?: string;
+  sparkline?: number[];
+  icon?: React.ReactNode;
+  theme?: StatTheme;
+  className?: string;
+}
+
+function useAnimatedNumber(target: number, duration: number) {
+  const [v, setV] = useState(0);
+  const prevRef = useRef(0);
+
+  useEffect(() => {
+    const from = prevRef.current;
+    const delta = target - from;
+    if (delta === 0) return;
+    // Reduced motion: show the number, skip the count
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      prevRef.current = target;
+      const id = requestAnimationFrame(() => setV(target));
+      return () => cancelAnimationFrame(id);
+    }
+    const start = performance.now();
+    let raf = 0;
+    const tick = (now: number) => {
+      const t = Math.min(1, (now - start) / duration);
+      const eased = 1 - Math.pow(1 - t, 3);
+      setV(from + delta * eased);
+      if (t < 1) {
+        raf = requestAnimationFrame(tick);
+      } else {
+        prevRef.current = target;
+      }
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [target, duration]);
+
+  return v;
+}
+
+function Sparkline({ data, dark }: { data: number[]; dark?: boolean }) {
+  const uid = useId();
+  if (data.length < 2) return null;
+  const W = 120;
+  const H = 44;
+  const P = 6;
+  const max = Math.max(...data);
+  const min = Math.min(...data);
+  const range = max - min || 1;
+  const step = (W - P * 2) / (data.length - 1);
+
+  const pts = data.map((d, i) => {
+    const x = P + i * step;
+    const y = H - P - ((d - min) / range) * (H - P * 2);
+    return [x, y] as const;
+  });
+
+  const line = pts
+    .map(([x, y], i) => `${i === 0 ? "M" : "L"}${x.toFixed(1)},${y.toFixed(1)}`)
+    .join(" ");
+  // The fill runs off both edges of the face so it reads as part of the surface
+  const area = `M0,${pts[0][1].toFixed(1)} ${line.replace(/^M/, "L")} L${W},${pts[pts.length - 1][1].toFixed(1)} L${W},${H} L0,${H} Z`;
+
+  const stroke = dark ? "#ffffff" : "#171717";
+  const gradId = `spark-fade-${uid.replace(/:/g, "")}`;
+  const [lx, ly] = pts[pts.length - 1];
+
+  return (
+    <div
+      aria-hidden
+      className="relative h-14"
+      // Fades in from the left so the line arrives rather than starts at a hard edge
+      style={{
+        maskImage: "linear-gradient(90deg, transparent 0%, #000 18%)",
+        WebkitMaskImage: "linear-gradient(90deg, transparent 0%, #000 18%)",
+      }}
+    >
+      <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" className="absolute inset-0 w-full h-full overflow-visible">
+        <defs>
+          <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor={stroke} stopOpacity={dark ? 0.2 : 0.08} />
+            <stop offset="100%" stopColor={stroke} stopOpacity="0" />
+          </linearGradient>
+        </defs>
+        <path d={area} fill={`url(#${gradId})`} />
+        <path
+          d={line}
+          fill="none"
+          stroke={stroke}
+          strokeOpacity={dark ? 0.85 : 0.9}
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          vectorEffect="non-scaling-stroke"
+        />
+      </svg>
+      {/* The latest value, as a dot — drawn in HTML so it stays round when the SVG stretches */}
+      <span
+        className="absolute w-[7px] h-[7px] rounded-full -translate-x-1/2 -translate-y-1/2"
+        style={{
+          left: `${(lx / W) * 100}%`,
+          top: `${(ly / H) * 100}%`,
+          background: stroke,
+          boxShadow: dark ? "0 0 0 3px rgba(255,255,255,0.14)" : "0 0 0 3px rgba(17,17,17,0.08)",
+        }}
+      />
+    </div>
+  );
+}
+
+const deltaTone: Record<DeltaDirection, { light: string; dark: string; label: string }> = {
+  up: { light: "text-emerald-700", dark: "text-emerald-400", label: "up" },
+  down: { light: "text-red-600", dark: "text-red-400", label: "down" },
+  neutral: { light: "text-neutral-600", dark: "text-neutral-300", label: "unchanged" },
+};
+
+function DeltaArrow({ direction }: { direction: DeltaDirection }) {
+  const d =
+    direction === "up" ? "M12 19V5m0 0l-6 6m6-6l6 6" : direction === "down" ? "M12 5v14m0 0l-6-6m6 6l6-6" : "M5 12h14m0 0l-6-6m6 6l-6 6";
+  return (
+    <svg aria-hidden width="10" height="10" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" d={d} />
+    </svg>
+  );
+}
+
+/* Built on CardShell; the trend line bleeds off the bottom of the face
+   like a chart on a screen.                                            */
+export function StatCard({
+  label,
+  value,
+  prefix = "",
+  suffix = "",
+  decimals = 0,
+  delta,
+  hint,
+  sparkline,
+  icon,
+  theme = "light",
+  className = "",
+}: StatCardProps) {
+  const animated = useAnimatedNumber(value, 900);
+  const dark = theme === "dark";
+
+  const formatter = new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  });
+  const finalText = `${prefix}${formatter.format(value)}${suffix}`;
+
+  const badge = delta && (
+    <span
+      aria-label={`${deltaTone[delta.direction].label} ${delta.value}`}
+      className={[
+        "inline-flex items-center gap-1 h-6 px-2 rounded-[7px] text-[12px] font-medium tabular-nums shrink-0",
+        dark ? deltaTone[delta.direction].dark : deltaTone[delta.direction].light,
+      ].join(" ")}
+      style={{
+        background: dark ? "var(--tile-dark)" : "var(--face-light)",
+        boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-light-shadow)",
+      }}
+    >
+      <DeltaArrow direction={delta.direction} />
+      {delta.value}
+    </span>
+  );
+
+  /* Label and change share the top line — what it is, and which way it's
+     going. The number carries the card; the hint qualifies it in a
+     quieter voice right underneath.                                     */
+  return (
+    <CardShell theme={theme} className={className}>
+      <div className="px-6 pt-5 flex items-center justify-between gap-3 min-h-11">
+        <div className="flex items-center gap-2.5 min-w-0">
+          {icon && (
+            <div
+              aria-hidden
+              className={[
+                "w-7 h-7 rounded-[9px] flex items-center justify-center shrink-0",
+                dark ? "text-neutral-100" : "text-neutral-600",
+              ].join(" ")}
+              style={{
+                background: dark ? "var(--tile-dark)" : "var(--face-light)",
+                boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-light-shadow)",
+              }}
+            >
+              {icon}
+            </div>
+          )}
+          <p
+            className={[
+              "text-[14px] font-medium tracking-[-0.01em] truncate",
+              dark ? "text-neutral-300" : "text-neutral-700",
+            ].join(" ")}
+          >
+            {label}
+          </p>
+        </div>
+        {badge}
+      </div>
+
+      {/* Screen readers get the final value once, not every frame of the count */}
+      <p className="sr-only">{finalText}</p>
+      <p
+        aria-hidden
+        className={[
+          "px-6 mt-5 text-[44px] font-semibold tabular-nums tracking-[-0.045em] leading-none",
+          dark ? "text-white" : "text-neutral-900",
+        ].join(" ")}
+      >
+        {prefix}
+        {formatter.format(animated)}
+        {/* Units are context, not the headline — set them smaller and quieter */}
+        {suffix && (
+          <span
+            className={[
+              "ml-1 text-[17px] font-medium tracking-[-0.01em]",
+              dark ? "text-neutral-500" : "text-neutral-400",
+            ].join(" ")}
+          >
+            {suffix.trim()}
+          </span>
+        )}
+      </p>
+      {hint && (
+        <p className={["px-6 mt-2.5 text-[13px] truncate", dark ? "text-neutral-500" : "text-neutral-500"].join(" ")}>
+          {hint}
+        </p>
+      )}
+
+      {/* The trend line bleeds to the face's edges, like a chart on a screen */}
+      {sparkline && sparkline.length > 1 ? (
+        <div className="mt-auto pt-6">
+          <Sparkline data={sparkline} dark={dark} />
+        </div>
+      ) : (
+        <div className="pb-6" />
+      )}
+    </CardShell>
+  );
+}

package/dist/registry/Steps.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+
+interface StepItem {
+  label: string;
+  description?: string;
+}
+
+interface StepsProps {
+  steps: StepItem[];
+  current: number;
+  className?: string;
+}
+
+function CheckIcon() {
+  return (
+    <svg
+      width="13"
+      height="13"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.75"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}
+
+/* Upcoming steps are sunken (not yet filled in), done and current steps
+   are dark raised faces; the current one also wears a soft halo. Each step owns an equal column, so labels get
+   real width instead of being squeezed under a 32px circle.           */
+export function Steps({ steps, current, className = "" }: StepsProps) {
+  return (
+    <ol className={["flex items-start", className].filter(Boolean).join(" ")}>
+      {steps.map((step, i) => {
+        const isCompleted = i < current;
+        const isCurrent = i === current;
+        const reached = isCompleted || isCurrent;
+        const isLast = i === steps.length - 1;
+
+        return (
+          <li
+            key={i}
+            aria-current={isCurrent ? "step" : undefined}
+            className="relative flex-1 min-w-0 flex flex-col items-center text-center"
+          >
+            {/* One groove per gap, running between the two circles' edges
+                (columns are equal, so the next centre is exactly 100% away) */}
+            {!isLast && (
+              <span
+                aria-hidden
+                className="absolute top-[15px] h-1 -translate-y-1/2 rounded-full overflow-hidden"
+                style={{
+                  left: "calc(50% + 25px)",
+                  width: "calc(100% - 50px)",
+                  background: "var(--well)",
+                  boxShadow: "var(--well-shadow)",
+                }}
+              >
+                <span
+                  className="block h-full rounded-full origin-left transition-transform duration-500 ease-[var(--ease-out-soft)]"
+                  style={{
+                    background: "var(--face-dark)",
+                    transform: isCompleted ? "scaleX(1)" : "scaleX(0)",
+                  }}
+                />
+              </span>
+            )}
+
+            <span
+              className={[
+                "relative w-[30px] h-[30px] rounded-full flex items-center justify-center text-[12.5px] font-semibold tabular-nums shrink-0",
+                "transition-[box-shadow,color] duration-300",
+                reached ? "text-white" : "text-neutral-400",
+              ].join(" ")}
+              style={{
+                background: reached ? "var(--face-dark)" : "var(--field)",
+                boxShadow: isCurrent
+                  ? "var(--face-dark-shadow), 0 0 0 4px rgba(17,17,17,0.06), 0 0 0 5px rgba(17,17,17,0.03)"
+                  : reached
+                    ? "var(--face-dark-shadow)"
+                    : "var(--field-shadow)",
+              }}
+            >
+              {isCompleted ? <CheckIcon /> : i + 1}
+              <span className="sr-only">{isCompleted ? " (completed)" : ""}</span>
+            </span>
+
+            <span className="mt-3 px-1.5 flex flex-col gap-0.5">
+              <span
+                className={[
+                  "text-[13px] font-medium leading-tight transition-colors duration-200",
+                  reached ? "text-neutral-900" : "text-neutral-500",
+                ].join(" ")}
+              >
+                {step.label}
+              </span>
+              {step.description && (
+                <span className="text-[12px] text-neutral-400 leading-snug">{step.description}</span>
+              )}
+            </span>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

package/dist/registry/Table.tsx

@@ -0,0 +1,121 @@
+import React from "react";
+
+interface Column<T> {
+  key: keyof T | string;
+  label: string;
+  align?: "left" | "right" | "center";
+  render?: (value: unknown, row: T) => React.ReactNode;
+  width?: string;
+}
+
+interface TableProps<T extends Record<string, unknown>> {
+  columns: Column<T>[];
+  rows: T[];
+  title?: string;
+  description?: string;
+  className?: string;
+  onRowClick?: (row: T) => void;
+}
+
+const alignClass = (align?: "left" | "right" | "center") =>
+  align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left";
+
+/* Title and column headers live in the bezel; rows sit on the raised face. */
+export function Table<T extends Record<string, unknown>>({
+  columns,
+  rows,
+  title,
+  description,
+  className = "",
+  onRowClick,
+}: TableProps<T>) {
+  return (
+    <div
+      className={["w-full rounded-[18px] p-1.5", title || description ? "pt-0" : "", className].join(" ")}
+      style={{ background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" }}
+    >
+      {(title || description) && (
+        <div className="px-3.5 pt-3.5 pb-3">
+          {title && <p className="text-[13px] font-semibold text-neutral-900 tracking-[-0.01em]">{title}</p>}
+          {description && <p className="text-[12px] text-neutral-500 mt-0.5">{description}</p>}
+        </div>
+      )}
+
+      <div
+        className="bg-white rounded-[13px] overflow-x-auto scroll-thin"
+        style={{ boxShadow: "var(--panel-face-shadow)" }}
+      >
+        <table className="w-full text-left border-collapse">
+          {title && <caption className="sr-only">{title}</caption>}
+          <thead>
+            <tr className="border-b border-neutral-100">
+              {columns.map((col) => (
+                <th
+                  key={String(col.key)}
+                  scope="col"
+                  style={col.width ? { width: col.width } : undefined}
+                  className={[
+                    "px-4 pt-3 pb-2.5 text-[12px] font-medium text-neutral-500 lowercase whitespace-nowrap",
+                    alignClass(col.align),
+                  ].join(" ")}
+                >
+                  {col.label}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row, ri) => (
+              <tr
+                key={ri}
+                onClick={() => onRowClick?.(row)}
+                // Clickable rows are reachable and operable from the keyboard too
+                tabIndex={onRowClick ? 0 : undefined}
+                onKeyDown={
+                  onRowClick
+                    ? (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          onRowClick(row);
+                        }
+                      }
+                    : undefined
+                }
+                className={[
+                  "border-b border-neutral-100 last:border-0 transition-colors duration-100",
+                  onRowClick
+                    ? "cursor-pointer hover:bg-neutral-50 focus-visible:bg-neutral-50 outline-none focus-visible:shadow-[inset_2px_0_0_#171717]"
+                    : "",
+                ].join(" ")}
+              >
+                {columns.map((col, ci) => {
+                  const val = row[col.key as keyof T] as unknown;
+                  return (
+                    <td
+                      key={String(col.key)}
+                      className={[
+                        "px-4 py-3 text-[13px]",
+                        ci === 0 ? "font-medium text-neutral-900" : "text-neutral-600 tabular-nums",
+                        alignClass(col.align),
+                      ].join(" ")}
+                    >
+                      {col.render ? col.render(val, row) : String(val ?? "")}
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+            {rows.length === 0 && (
+              <tr>
+                <td colSpan={columns.length} className="px-5 py-12 text-center">
+                  <p className="text-[13px] font-medium text-neutral-700">nothing here yet</p>
+                  <p className="text-[12px] text-neutral-500 mt-0.5">rows will show up here once there are some.</p>
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

package/dist/registry/TableOfContents.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+
+export interface TocItem {
+  key: string;
+  label: string;
+  level: 1 | 2 | 3;
+}
+
+interface TableOfContentsProps {
+  items: TocItem[];
+  activeKey?: string;
+  defaultActiveKey?: string;
+  onSelect?: (key: string) => void;
+  className?: string;
+}
+
+const indent: Record<1 | 2 | 3, number> = { 1: 16, 2: 28, 3: 40 };
+
+/* A hairline track runs down the left edge; a slim dark marker glides
+   along it to the active heading. Nothing else moves — the active label
+   just darkens.                                                       */
+export function TableOfContents({
+  items,
+  activeKey,
+  defaultActiveKey,
+  onSelect,
+  className = "",
+}: TableOfContentsProps) {
+  const [internal, setInternal] = useState(defaultActiveKey ?? items[0]?.key ?? "");
+  const current = activeKey !== undefined ? activeKey : internal;
+  const refs = useRef<Record<string, HTMLButtonElement | null>>({});
+  const [marker, setMarker] = useState<{ top: number; height: number } | null>(null);
+  const [ready, setReady] = useState(false);
+
+  const measure = () => {
+    const el = refs.current[current];
+    setMarker(el ? { top: el.offsetTop, height: el.offsetHeight } : null);
+  };
+
+  useLayoutEffect(() => {
+    measure();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [current]);
+
+  useEffect(() => {
+    // Only animate moves after the first placement
+    const id = requestAnimationFrame(() => setReady(true));
+    return () => cancelAnimationFrame(id);
+  }, []);
+
+  const handleSelect = (key: string) => {
+    setInternal(key);
+    onSelect?.(key);
+  };
+
+  const slide = ready ? "top 360ms var(--ease-out-soft), height 360ms var(--ease-out-soft)" : "none";
+
+  return (
+    <nav
+      aria-label="On this page"
+      className={["rounded-[18px] p-1.5", className].filter(Boolean).join(" ")}
+      style={{ background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" }}
+    >
+      <div
+        className="bg-white rounded-[13px] px-5 pt-4 pb-4"
+        style={{ boxShadow: "var(--panel-face-shadow)" }}
+      >
+        <p aria-hidden className="text-[12px] font-medium text-neutral-400 mb-3">
+          on this page
+        </p>
+
+        <div className="relative">
+          <span aria-hidden className="absolute left-0 top-0 bottom-0 w-px bg-neutral-900/[0.08]" />
+          {marker && (
+            <span
+              aria-hidden
+              className="absolute -left-[0.5px] w-[2px] rounded-full bg-neutral-900"
+              style={{ top: marker.top + 6, height: marker.height - 12, transition: slide }}
+            />
+          )}
+
+          {items.map((item) => {
+            const isActive = current === item.key;
+            return (
+              <button
+                key={item.key}
+                ref={(el) => {
+                  refs.current[item.key] = el;
+                }}
+                type="button"
+                onClick={() => handleSelect(item.key)}
+                aria-current={isActive ? "location" : undefined}
+                className={[
+                  // Weight stays fixed so the active item doesn't reflow its line
+                  "relative block w-full text-left py-1.5 text-[13px] leading-5 rounded-[6px] cursor-pointer",
+                  "transition-colors duration-200 outline-none",
+                  "focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-neutral-900",
+                  isActive
+                    ? "text-neutral-900 font-medium"
+                    : item.level === 1
+                      ? "text-neutral-600 hover:text-neutral-900"
+                      : "text-neutral-400 hover:text-neutral-700",
+                ].join(" ")}
+                style={{ paddingLeft: indent[item.level] }}
+              >
+                {item.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </nav>
+  );
+}