@blurrow/ui 0.1.0 → 0.2.1

package/dist/registry/Spinner.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+type SpinnerSize = "sm" | "md" | "lg";
+
+interface SpinnerProps {
+  size?: SpinnerSize | number;
+  /** Read out to screen readers; the spinner is silent without it */
+  label?: string;
+  className?: string;
+}
+
+const SIZES: Record<SpinnerSize, number> = { sm: 14, md: 18, lg: 24 };
+
+/* A short arc chasing round a faint ring. It takes the text colour, so
+   inside a primary button it's light and on the page it's ink.       */
+export function Spinner({ size = "md", label, className = "" }: SpinnerProps) {
+  const px = typeof size === "number" ? size : SIZES[size];
+  return (
+    <span
+      role={label ? "status" : undefined}
+      aria-label={label}
+      aria-hidden={label ? undefined : true}
+      className={["inline-flex shrink-0", className].join(" ")}
+      style={{ width: px, height: px }}
+    >
+      <svg viewBox="0 0 24 24" width={px} height={px} fill="none" className="animate-spin">
+        <circle cx="12" cy="12" r="9.5" stroke="currentColor" strokeWidth="2.5" opacity="0.18" />
+        <path d="M21.5 12a9.5 9.5 0 0 0-9.5-9.5" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
+      </svg>
+    </span>
+  );
+}

package/dist/registry/SpotlightCard.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import { CardShell } from "./CardShell";
+
+interface SpotlightCardProps {
+  title: string;
+  subtitle?: string;
+  eyebrow?: string;
+  icon?: React.ReactNode;
+  actions?: React.ReactNode;
+  children?: React.ReactNode;
+  theme?: "light" | "dark";
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+const paddingBySize: Record<NonNullable<SpotlightCardProps["size"]>, string> = {
+  // Feature cards pad 32px whatever their size; only the type scales
+  sm: "p-6",
+  md: "p-8",
+  lg: "p-8",
+};
+
+const titleSizeBySize: Record<
+  NonNullable<SpotlightCardProps["size"]>,
+  string
+> = {
+  sm: "text-[20px]",
+  md: "text-[26px]",
+  lg: "text-[34px]",
+};
+
+export function SpotlightCard({
+  title,
+  subtitle,
+  eyebrow,
+  icon,
+  actions,
+  children,
+  theme = "dark",
+  size = "md",
+  className = "",
+}: SpotlightCardProps) {
+  const dark = theme === "dark";
+
+  return (
+    /* Built on CardShell: icon at the top of the face, words and actions
+       settled at the bottom — the same rhythm as Card and QuoteCard. */
+    <CardShell as="article" theme={theme} className={className}>
+      {/* Headline sits low on the face, so tall cards breathe above it, not below */}
+      <div className={["relative flex-1 flex flex-col gap-3", paddingBySize[size]].join(" ")}>
+        {icon && (
+          <div
+            className={[
+              "w-9 h-9 rounded-[11px] flex items-center justify-center mb-auto",
+              dark ? "text-white" : "text-ink-soft",
+            ].join(" ")}
+            style={{
+              background: dark ? "var(--tile-dark)" : "var(--tile)",
+              boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-shadow)",
+            }}
+          >
+            {icon}
+          </div>
+        )}
+
+        {eyebrow && (
+          <p
+            className={[
+              // Without an icon above to push it down, the copy still sits low
+              icon ? "pt-8" : "mt-auto",
+              "text-[14px] font-medium tracking-[-0.01em]",
+              dark ? "text-neutral-400" : "text-ink-muted",
+            ].join(" ")}
+          >
+            {eyebrow}
+          </p>
+        )}
+
+        <h3
+          className={[
+            titleSizeBySize[size],
+            !icon && !eyebrow ? "mt-auto" : "",
+            "font-medium leading-[1.12] tracking-[-0.03em] text-balance",
+            dark ? "text-white" : "text-ink",
+          ].join(" ")}
+        >
+          {title}
+        </h3>
+
+        {subtitle && (
+          <p
+            className={[
+              "text-[15px] leading-[1.6] max-w-lg text-pretty",
+              dark ? "text-neutral-400" : "text-ink-body",
+            ].join(" ")}
+          >
+            {subtitle}
+          </p>
+        )}
+
+        {children}
+        {actions && <div className="pt-4 flex items-center gap-2">{actions}</div>}
+      </div>
+    </CardShell>
+  );
+}

package/dist/registry/Stat.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+
+interface StatProps {
+  value: number | string;
+  label: string;
+  prefix?: string;
+  suffix?: string;
+  trend?: string;
+  className?: string;
+}
+
+function useCountUp(target: number, duration = 800) {
+  const [count, setCount] = useState(0);
+  const raf = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      raf.current = requestAnimationFrame(() => setCount(target));
+      return () => { if (raf.current) cancelAnimationFrame(raf.current); };
+    }
+    let start: number | null = null;
+    const step = (now: number) => {
+      if (!start) start = now;
+      const p = Math.min((now - start) / duration, 1);
+      setCount(Math.round((1 - Math.pow(1 - p, 3)) * target));
+      if (p < 1) raf.current = requestAnimationFrame(step);
+    };
+    raf.current = requestAnimationFrame(step);
+    return () => { if (raf.current) cancelAnimationFrame(raf.current); };
+  }, [target, duration]);
+
+  return count;
+}
+
+export function Stat({ value, label, prefix = "", suffix = "", trend, className = "" }: StatProps) {
+  const isNum = typeof value === "number";
+  const counted = useCountUp(isNum ? (value as number) : 0);
+  const displayed = isNum ? counted : value;
+
+  return (
+    <div className={["flex flex-col gap-0.5", className].join(" ")}>
+      <div className="flex items-baseline gap-1.5">
+        <span
+          className="text-[32px] font-semibold text-ink leading-none tabular-nums"
+          style={{ letterSpacing: "-0.03em" }}
+        >
+          {prefix}{displayed}{suffix}
+        </span>
+        {trend && (
+          <span className="text-[12px] text-ink-muted font-medium">{trend}</span>
+        )}
+      </div>
+      <span className="text-[12px] text-ink-muted">{label}</span>
+    </div>
+  );
+}
+
+interface StatRowProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function StatRow({ children, className = "" }: StatRowProps) {
+  const arr = React.Children.toArray(children);
+  return (
+    <div className={["grid grid-cols-2 gap-6 sm:flex sm:divide-x sm:divide-line-strong sm:gap-0", className].join(" ")}>
+      {arr.map((child, i) => (
+        <div
+          key={i}
+          className={[
+            "min-w-0",
+            i === 0 ? "sm:pr-6" : i === arr.length - 1 ? "sm:pl-6" : "sm:px-6",
+          ].join(" ")}
+        >
+          {child}
+        </div>
+      ))}
+    </div>
+  );
+}

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 ? "var(--spark-dark)" : "var(--spark)";
+  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%, black 18%)",
+        WebkitMaskImage: "linear-gradient(90deg, transparent 0%, black 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%" style={{ stopColor: stroke }} stopOpacity={dark ? 0.2 : 0.08} />
+            <stop offset="100%" style={{ stopColor: stroke }} stopOpacity="0" />
+          </linearGradient>
+        </defs>
+        <path d={area} fill={`url(#${gradId})`} />
+        <path
+          d={line}
+          fill="none"
+          style={{ 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 var(--spark-dark-halo)" : "0 0 0 3px var(--spark-halo)",
+        }}
+      />
+    </div>
+  );
+}
+
+const deltaTone: Record<DeltaDirection, { light: string; dark: string; label: string }> = {
+  up: { light: "text-success", dark: "text-emerald-400", label: "up" },
+  down: { light: "text-danger", dark: "text-red-400", label: "down" },
+  neutral: { light: "text-ink-body", 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(--tile)",
+        boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-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-ink-body",
+              ].join(" ")}
+              style={{
+                background: dark ? "var(--tile-dark)" : "var(--tile)",
+                boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-shadow)",
+              }}
+            >
+              {icon}
+            </div>
+          )}
+          <p
+            className={[
+              "text-[14px] font-medium tracking-[-0.01em] truncate",
+              dark ? "text-neutral-300" : "text-ink-label",
+            ].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-ink",
+        ].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-ink-faint",
+            ].join(" ")}
+          >
+            {suffix.trim()}
+          </span>
+        )}
+      </p>
+      {hint && (
+        <p className={["px-6 mt-2.5 text-[13px] truncate", dark ? "text-neutral-500" : "text-ink-muted"].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-inverse)",
+                    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-ink-inverse" : "text-ink-faint",
+              ].join(" ")}
+              style={{
+                background: reached ? "var(--face-inverse)" : "var(--field)",
+                boxShadow: isCurrent
+                  ? "var(--face-inverse-shadow), var(--halo)"
+                  : reached
+                    ? "var(--face-inverse-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-ink" : "text-ink-muted",
+                ].join(" ")}
+              >
+                {step.label}
+              </span>
+              {step.description && (
+                <span className="text-[12px] text-ink-faint leading-snug">{step.description}</span>
+              )}
+            </span>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}