sid-ui 0.1.2 → 0.2.0

package/src/components/RadialBarChart.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { useState, type CSSProperties } from "react";
+
+import { ChartTable, defaultFormat, toneAt, type ChartTone } from "./chartParts";
+
+export type RadialBarDatum = {
+  label: string;
+  value: number;
+  /** The value that closes the ring. */
+  max: number;
+  tone?: ChartTone;
+};
+
+const DEFAULT_SIZE = 200;
+/** A gauge spans three quarters of a turn, open at the bottom. */
+const GAUGE_SWEEP = 0.75;
+
+/**
+ * Progress toward goals as rings. `rings` nests one ring per measure, like activity rings;
+ * `gauge` draws the first measure as an open three-quarter dial. Rings sweep in on first paint
+ * and the center reads the hovered ring.
+ */
+export function RadialBarChart({
+  data,
+  label,
+  variant = "rings",
+  size = DEFAULT_SIZE,
+  thickness,
+  formatValue = defaultFormat,
+  hasLegend = true,
+}: {
+  data: RadialBarDatum[];
+  /** Accessible name for the chart. */
+  label: string;
+  variant?: "rings" | "gauge";
+  size?: number;
+  /** Ring width in px. Defaults to a share of the size. */
+  thickness?: number;
+  formatValue?: (value: number) => string;
+  hasLegend?: boolean;
+}) {
+  const [active, setActive] = useState<number | null>(null);
+  const toned = data.map((d, index) => ({ ...d, tone: toneAt(index, d.tone) }));
+  const shown = variant === "gauge" ? toned.slice(0, 1) : toned;
+  const stroke = thickness ?? Math.max(8, Math.round(size * (variant === "gauge" ? 0.1 : 0.075)));
+  const gap = Math.round(stroke * 0.3);
+  const center = size / 2;
+  const share = (d: RadialBarDatum) => (d.max > 0 ? Math.min(1, Math.max(0, d.value / d.max)) : 0);
+  const focus = toned[active ?? 0];
+
+  return (
+    <div className="os-radial">
+      <div
+        className="os-radial-figure"
+        style={{ width: size, height: size }}
+        role="img"
+        aria-label={`${label}: ${data
+          .map((d) => `${d.label} ${formatValue(d.value)} of ${formatValue(d.max)}`)
+          .join(", ")}`}
+      >
+        <svg width={size} height={size} aria-hidden>
+          {shown.map((d, index) => {
+            const r = center - stroke / 2 - index * (stroke + gap);
+            if (r <= 0) return null;
+            const sweep = variant === "gauge" ? GAUGE_SWEEP : 1;
+            const rotate = variant === "gauge" ? 135 : -90;
+            return (
+              <g
+                key={d.label}
+                data-tone={d.tone}
+                data-dim={active !== null && active !== index ? true : undefined}
+                className="os-radial-ring"
+                transform={`rotate(${rotate} ${center} ${center})`}
+                onPointerEnter={() => setActive(index)}
+                onPointerLeave={() => setActive(null)}
+              >
+                <circle
+                  className="os-radial-track"
+                  cx={center}
+                  cy={center}
+                  r={r}
+                  strokeWidth={stroke}
+                  pathLength={1}
+                  strokeDasharray={`${sweep} 1`}
+                />
+                <circle
+                  className="os-radial-bar"
+                  cx={center}
+                  cy={center}
+                  r={r}
+                  strokeWidth={stroke}
+                  pathLength={1}
+                  style={
+                    {
+                      "--os-radial-to": `${share(d) * sweep} 1`,
+                      animationDelay: `${index * 110}ms`,
+                    } as CSSProperties
+                  }
+                />
+              </g>
+            );
+          })}
+        </svg>
+        <div className="os-radial-center" aria-hidden>
+          <strong>
+            {variant === "gauge"
+              ? `${Math.round(share(focus) * 100)}%`
+              : formatValue(focus.value)}
+          </strong>
+          <span>
+            {variant === "gauge"
+              ? focus.label
+              : `${focus.label} · ${Math.round(share(focus) * 100)}%`}
+          </span>
+        </div>
+      </div>
+      {hasLegend ? (
+        <ul className="os-radial-legend" aria-hidden>
+          {shown.map((d, index) => (
+            <li
+              key={d.label}
+              data-active={active === index || undefined}
+              onPointerEnter={() => setActive(index)}
+              onPointerLeave={() => setActive(null)}
+            >
+              <span className="os-chart-key" data-tone={d.tone} />
+              <span className="os-radial-name">{d.label}</span>
+              <strong>{formatValue(d.value)}</strong>
+              <span className="os-radial-of">/ {formatValue(d.max)}</span>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      <ChartTable
+        caption={label}
+        headers={["", "Value", "Goal", "Progress"]}
+        rows={data.map((d) => [
+          d.label,
+          formatValue(d.value),
+          formatValue(d.max),
+          `${Math.round(share(d) * 100)}%`,
+        ])}
+      />
+    </div>
+  );
+}

package/src/components/Rating.tsx

@@ -1,9 +1,12 @@
 "use client";
 
-import { useState } from "react";
+import { useRef, useState, type KeyboardEvent, type MouseEvent } from "react";
 
 export const RATING_MAX = 5;
 
+/** The mark that repeats: gold stars by default, rose hearts for likes and favorites. */
+export type RatingIcon = "star" | "heart";
+
 export interface RatingProps {
   value: number;
   onChange?: (value: number) => void;
@@ -14,9 +17,40 @@ export interface RatingProps {
   /** Hides the numeric score. The marks still expose it to assistive tech. */
   showValue?: boolean;
   caption?: string;
+  icon?: RatingIcon;
+  /** Lets a click on the left half of a mark pick a half, and arrow keys step by halves. */
+  allowHalf?: boolean;
 }
 
-/** A star score. The number is always written next to the marks. */
+const PATHS: Record<RatingIcon, string> = {
+  star: "M12 2.6l2.9 5.9 6.5.95-4.7 4.6 1.1 6.45L12 17.45 6.2 20.5l1.1-6.45-4.7-4.6 6.5-.95z",
+  heart:
+    "M12 20.6s-7.6-4.55-9.35-9.4C1.5 8.05 3.55 4.4 7.15 4.4c2.05 0 3.6 1.1 4.85 2.75C13.25 5.5 14.8 4.4 16.85 4.4c3.6 0 5.65 3.65 4.5 6.8-1.75 4.85-9.35 9.4-9.35 9.4z",
+};
+
+function Mark({ icon, fill }: { icon: RatingIcon; fill: number }) {
+  return (
+    <>
+      <svg className="os-rating-mark-base" viewBox="0 0 24 24" aria-hidden>
+        <path d={PATHS[icon]} />
+      </svg>
+      <span className="os-rating-mark-fill" style={{ width: `${fill * 100}%` }}>
+        <svg viewBox="0 0 24 24" aria-hidden>
+          <path d={PATHS[icon]} />
+        </svg>
+      </span>
+    </>
+  );
+}
+
+function format(value: number) {
+  return Number.isInteger(value) ? String(value) : value.toFixed(1);
+}
+
+/**
+ * A score in stars or hearts. Read-only values can be fractional — 4.3 fills 4.3 marks — and the
+ * number is written beside them unless `showValue` is off.
+ */
 export function Rating({
   value,
   onChange,
@@ -26,50 +60,105 @@ export function Rating({
   label = "Rating",
   showValue = true,
   caption,
+  icon = "star",
+  allowHalf = false,
 }: RatingProps) {
   const [hover, setHover] = useState<number | null>(null);
+  // Bumps on every pick so the chosen mark replays its pop.
+  const [popped, setPopped] = useState<{ mark: number; key: number } | null>(null);
+  const marks = useRef<Array<HTMLButtonElement | null>>([]);
   const shown = hover ?? value;
   const interactive = Boolean(onChange) && !readOnly;
+  const step = allowHalf ? 0.5 : 1;
+
+  const pick = (next: number) => {
+    const clamped = Math.max(step, Math.min(max, next));
+    onChange?.(clamped);
+    setPopped((p) => ({ mark: Math.ceil(clamped), key: (p?.key ?? 0) + 1 }));
+  };
+
+  const pointerValue = (mark: number, event: MouseEvent<HTMLButtonElement>) => {
+    if (!allowHalf) return mark;
+    const box = event.currentTarget.getBoundingClientRect();
+    const fromStart = document.dir === "rtl" ? box.right - event.clientX : event.clientX - box.left;
+    return fromStart < box.width / 2 ? mark - 0.5 : mark;
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const keys: Record<string, number> = {
+      ArrowRight: step,
+      ArrowUp: step,
+      ArrowLeft: -step,
+      ArrowDown: -step,
+    };
+    if (event.key in keys) {
+      event.preventDefault();
+      const next = Math.max(step, Math.min(max, (value || 0) + keys[event.key]));
+      pick(next);
+      marks.current[Math.ceil(next) - 1]?.focus();
+    } else if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      const next = event.key === "Home" ? step : max;
+      pick(next);
+      marks.current[Math.ceil(next) - 1]?.focus();
+    }
+  };
+
+  const focusMark = Math.max(1, Math.ceil(value || 1));
 
   return (
-    <div className={`os-rating os-rating-${size}`}>
+    <div className={`os-rating os-rating-${size} os-rating-${icon}`}>
       <div
-        className="os-rating-stars"
+        className="os-rating-marks"
         role={interactive ? "radiogroup" : "img"}
-        aria-label={interactive ? label : `${label}, ${value} of ${max}`}
+        aria-label={interactive ? label : `${label}, ${format(value)} of ${max}`}
         onMouseLeave={() => setHover(null)}
+        onKeyDown={interactive ? onKeyDown : undefined}
       >
         {Array.from({ length: max }, (_, index) => {
-          const star = index + 1;
-          const filled = shown >= star;
+          const mark = index + 1;
+          const fill = Math.max(0, Math.min(1, shown - index));
+          const pop = popped?.mark === mark;
           if (!interactive) {
             return (
-              <span key={star} className={filled ? "os-star os-star-on" : "os-star"} aria-hidden>
-                ★
+              <span key={mark} className="os-rating-mark" aria-hidden>
+                <Mark icon={icon} fill={fill} />
               </span>
             );
           }
           return (
             <button
-              key={star}
+              key={mark}
+              ref={(node) => {
+                marks.current[index] = node;
+              }}
               type="button"
               role="radio"
-              aria-checked={value === star}
-              aria-label={`${star} of ${max}`}
-              className={filled ? "os-star os-star-on" : "os-star"}
-              onMouseEnter={() => setHover(star)}
-              onFocus={() => setHover(star)}
-              onBlur={() => setHover(null)}
-              onClick={() => onChange?.(star)}
+              aria-checked={Math.ceil(value) === mark}
+              aria-label={`${mark} of ${max}`}
+              tabIndex={mark === focusMark ? 0 : -1}
+              className={[
+                "os-rating-mark",
+                hover != null && mark <= Math.ceil(hover) && "os-rating-mark-preview",
+                pop && "os-rating-mark-pop",
+              ]
+                .filter(Boolean)
+                .join(" ")}
+              onMouseMove={(event) => setHover(pointerValue(mark, event))}
+              onFocus={() => setHover(null)}
+              onClick={(event) => pick(pointerValue(mark, event))}
             >
-              ★
+              {/* Re-keyed on each pick so the pop replays without remounting the button. */}
+              <span key={pop ? popped.key : 0} className="os-rating-mark-inner">
+                <Mark icon={icon} fill={fill} />
+              </span>
             </button>
           );
         })}
       </div>
       {showValue && (
         <span className="os-rating-value">
-          {value} / {max}
+          {format(value)} / {max}
         </span>
       )}
       {caption && <span className="os-rating-caption">{caption}</span>}

package/src/components/ScatterChart.tsx

@@ -0,0 +1,267 @@
+"use client";
+
+import { useRef, useState, type KeyboardEvent, type PointerEvent } from "react";
+
+import { linearScale, niceDomain } from "./chartMath";
+import {
+  ChartLegend,
+  ChartTable,
+  ChartTip,
+  defaultFormat,
+  toneAt,
+  type ChartTone,
+} from "./chartParts";
+import { useElementWidth } from "./Responsive";
+
+export type ScatterPoint = {
+  x: number;
+  y: number;
+  /** Gives the point an area — a bubble chart. */
+  size?: number;
+  /** Names the point in the readout. */
+  label?: string;
+};
+
+export type ScatterSeries = {
+  label: string;
+  points: ScatterPoint[];
+  tone?: ChartTone;
+};
+
+const MARGIN = { top: 16, right: 16, bottom: 44, left: 52 };
+const DEFAULT_HEIGHT = 320;
+const DOT = 5;
+/** Bubble radii in px, smallest to largest value. */
+const BUBBLE: [number, number] = [6, 26];
+/** How close the pointer must come to a point to read it. */
+const SNAP = 40;
+
+/**
+ * Two measures against each other, one dot per item — or a bubble whose area is a third.
+ * The nearest point to the pointer lights up and reads out; the others fade. Optional mean
+ * lines split the plot into quadrants.
+ */
+export function ScatterChart({
+  series,
+  label,
+  xLabel,
+  yLabel,
+  height = DEFAULT_HEIGHT,
+  formatX = defaultFormat,
+  formatY = defaultFormat,
+  formatSize = defaultFormat,
+  sizeLabel = "Size",
+  hasMeanLines = false,
+  hasLegend,
+}: {
+  series: ScatterSeries[];
+  /** Accessible name for the chart. */
+  label: string;
+  /** Axis titles. */
+  xLabel: string;
+  yLabel: string;
+  height?: number;
+  formatX?: (value: number) => string;
+  formatY?: (value: number) => string;
+  formatSize?: (value: number) => string;
+  /** Names the bubble size in the readout. */
+  sizeLabel?: string;
+  /** Dashed lines at the mean of x and y, for a four-quadrant read. */
+  hasMeanLines?: boolean;
+  hasLegend?: boolean;
+}) {
+  const frame = useRef<HTMLDivElement>(null);
+  const width = useElementWidth(frame);
+  const [active, setActive] = useState<{ s: number; p: number } | null>(null);
+
+  const all = series.flatMap((s) => s.points);
+  const xTicks = niceDomain(Math.min(...all.map((p) => p.x)), Math.max(...all.map((p) => p.x)), 5);
+  const yTicks = niceDomain(Math.min(...all.map((p) => p.y)), Math.max(...all.map((p) => p.y)), 4);
+  const sizes = all.map((p) => p.size ?? 0);
+  const maxSize = Math.max(0, ...sizes);
+  const plotW = Math.max(0, width - MARGIN.left - MARGIN.right);
+  const plotH = Math.max(0, height - MARGIN.top - MARGIN.bottom);
+  const x = linearScale([xTicks[0], xTicks[xTicks.length - 1]], [MARGIN.left, MARGIN.left + plotW]);
+  const y = linearScale([yTicks[0], yTicks[yTicks.length - 1]], [MARGIN.top + plotH, MARGIN.top]);
+  // Area, not radius, carries the value.
+  const r = (size?: number) =>
+    size == null || maxSize === 0
+      ? DOT
+      : BUBBLE[0] + (BUBBLE[1] - BUBBLE[0]) * Math.sqrt(Math.max(0, size) / maxSize);
+  const toned = series.map((item, index) => ({ ...item, tone: toneAt(index, item.tone) }));
+  const showLegend = hasLegend ?? series.length > 1;
+  const flat = toned.flatMap((s, si) => s.points.map((p, pi) => ({ s: si, p: pi, point: p })));
+  const meanX = all.reduce((sum, p) => sum + p.x, 0) / Math.max(1, all.length);
+  const meanY = all.reduce((sum, p) => sum + p.y, 0) / Math.max(1, all.length);
+
+  const onMove = (event: PointerEvent<SVGRectElement>) => {
+    const box = event.currentTarget.ownerSVGElement?.getBoundingClientRect();
+    if (!box) return;
+    const px = event.clientX - box.left;
+    const py = event.clientY - box.top;
+    let best: { s: number; p: number } | null = null;
+    let distance = SNAP;
+    for (const item of flat) {
+      const d = Math.hypot(x(item.point.x) - px, y(item.point.y) - py) - r(item.point.size) / 2;
+      if (d < distance) {
+        distance = d;
+        best = { s: item.s, p: item.p };
+      }
+    }
+    setActive(best);
+  };
+
+  const onKey = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (flat.length === 0) return;
+    if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+      event.preventDefault();
+      const order = [...flat].sort((a, b) => a.point.x - b.point.x);
+      const at = active ? order.findIndex((o) => o.s === active.s && o.p === active.p) : -1;
+      const step = event.key === "ArrowRight" ? 1 : -1;
+      const next = order[(at + step + order.length) % order.length];
+      setActive({ s: next.s, p: next.p });
+    } else if (event.key === "Escape") {
+      setActive(null);
+    }
+  };
+
+  const focus = active ? toned[active.s].points[active.p] : null;
+  const focusX = focus ? x(focus.x) : 0;
+  const focusY = focus ? y(focus.y) : 0;
+  const tipAlign = focusX < width / 3 ? "start" : focusX > (width * 2) / 3 ? "end" : "center";
+
+  return (
+    <div className="os-chart">
+      {showLegend ? (
+        <ChartLegend items={toned.map((item) => ({ label: item.label, tone: item.tone }))} />
+      ) : null}
+      <div
+        ref={frame}
+        className="os-chart-frame"
+        style={{ height }}
+        tabIndex={0}
+        role="group"
+        aria-label={`${label}. Use the arrow keys to read each point.`}
+        onKeyDown={onKey}
+        onBlur={() => setActive(null)}
+      >
+        {width > 0 ? (
+          <svg width={width} height={height} className="os-chart-svg" aria-hidden>
+            {yTicks.map((tick) => (
+              <g key={`y-${tick}`}>
+                <line
+                  className="os-chart-grid"
+                  x1={MARGIN.left}
+                  x2={MARGIN.left + plotW}
+                  y1={y(tick)}
+                  y2={y(tick)}
+                />
+                <text className="os-chart-axis" x={MARGIN.left - 8} y={y(tick)} dy="0.32em" textAnchor="end">
+                  {formatY(tick)}
+                </text>
+              </g>
+            ))}
+            {xTicks.map((tick) => (
+              <g key={`x-${tick}`}>
+                <line
+                  className="os-chart-grid"
+                  x1={x(tick)}
+                  x2={x(tick)}
+                  y1={MARGIN.top}
+                  y2={MARGIN.top + plotH}
+                />
+                <text className="os-chart-axis" x={x(tick)} y={MARGIN.top + plotH + 18} textAnchor="middle">
+                  {formatX(tick)}
+                </text>
+              </g>
+            ))}
+            <text
+              className="os-chart-axis-title"
+              x={MARGIN.left + plotW / 2}
+              y={height - 4}
+              textAnchor="middle"
+            >
+              {xLabel}
+            </text>
+            <text
+              className="os-chart-axis-title"
+              transform={`translate(14 ${MARGIN.top + plotH / 2}) rotate(-90)`}
+              textAnchor="middle"
+            >
+              {yLabel}
+            </text>
+            {hasMeanLines ? (
+              <g className="os-scatter-mean">
+                <line x1={x(meanX)} x2={x(meanX)} y1={MARGIN.top} y2={MARGIN.top + plotH} />
+                <line x1={MARGIN.left} x2={MARGIN.left + plotW} y1={y(meanY)} y2={y(meanY)} />
+              </g>
+            ) : null}
+            {focus ? (
+              <g className="os-scatter-guide">
+                <line x1={focusX} x2={focusX} y1={focusY} y2={MARGIN.top + plotH} />
+                <line x1={MARGIN.left} x2={focusX} y1={focusY} y2={focusY} />
+              </g>
+            ) : null}
+            {toned.map((item, si) => (
+              <g key={item.label} data-tone={item.tone}>
+                {item.points.map((point, pi) => {
+                  const on = active?.s === si && active.p === pi;
+                  return (
+                    <circle
+                      key={pi}
+                      className="os-scatter-dot"
+                      data-bubble={point.size != null || undefined}
+                      data-active={on || undefined}
+                      data-dim={active && !on ? true : undefined}
+                      cx={x(point.x)}
+                      cy={y(point.y)}
+                      r={r(point.size)}
+                      style={{ animationDelay: `${Math.min(600, (si * item.points.length + pi) * 18)}ms` }}
+                    />
+                  );
+                })}
+              </g>
+            ))}
+            <rect
+              className="os-chart-hit"
+              x={MARGIN.left}
+              y={MARGIN.top}
+              width={plotW}
+              height={plotH}
+              onPointerMove={onMove}
+              onPointerLeave={() => setActive(null)}
+            />
+          </svg>
+        ) : null}
+        {focus && active ? (
+          <ChartTip
+            title={focus.label ?? toned[active.s].label}
+            left={focusX + (tipAlign === "start" ? 14 : tipAlign === "end" ? -14 : 0)}
+            top={
+              focusY < MARGIN.top + plotH / 2
+                ? focusY + r(focus.size) + 12
+                : Math.max(0, focusY - r(focus.size) - (focus.size != null ? 92 : 76))
+            }
+            align={tipAlign}
+            rows={[
+              { label: xLabel, value: formatX(focus.x), tone: toned[active.s].tone },
+              { label: yLabel, value: formatY(focus.y) },
+              ...(focus.size != null ? [{ label: sizeLabel, value: formatSize(focus.size) }] : []),
+            ]}
+          />
+        ) : null}
+      </div>
+      <ChartTable
+        caption={label}
+        headers={["Series", "Point", xLabel, yLabel, ...(maxSize > 0 ? [sizeLabel] : [])]}
+        rows={flat.map(({ s, point }) => [
+          toned[s].label,
+          point.label ?? "",
+          formatX(point.x),
+          formatY(point.y),
+          ...(maxSize > 0 ? [point.size != null ? formatSize(point.size) : ""] : []),
+        ])}
+      />
+    </div>
+  );
+}

package/src/components/StatusIndicator.tsx

@@ -0,0 +1,52 @@
+import type { ReactNode } from "react";
+
+import type { StatusDotVariant } from "@astryxdesign/core/StatusDot";
+
+export type StatusIndicatorSize = "sm" | "md" | "lg";
+
+/** plain is a dot and words; soft and outline wrap them in a pill. */
+export type StatusIndicatorAppearance = "plain" | "soft" | "outline";
+
+export interface StatusIndicatorProps {
+  /** Same variants as StatusDot. */
+  variant: StatusDotVariant;
+  /** The visible status, such as “Operational”. It is also what assistive tech reads. */
+  label: ReactNode;
+  /** Quieter text after the label — a time, a count, a percentage. */
+  detail?: ReactNode;
+  size?: StatusIndicatorSize;
+  appearance?: StatusIndicatorAppearance;
+  /** A ripple around the dot for live or urgent states. Still under reduced motion. */
+  isPulsing?: boolean;
+}
+
+/**
+ * A status dot with its words beside it. Use it wherever a dot would otherwise need a
+ * hand-built row — service lists, table cells, presence, headers.
+ */
+export function StatusIndicator({
+  variant,
+  label,
+  detail,
+  size = "md",
+  appearance = "plain",
+  isPulsing = false,
+}: StatusIndicatorProps) {
+  return (
+    <span
+      className={[
+        "os-status",
+        `os-status-${variant}`,
+        `os-status-${size}`,
+        `os-status-${appearance}`,
+        isPulsing && "os-status-pulsing",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <span className="os-status-dot" aria-hidden />
+      <span className="os-status-label">{label}</span>
+      {detail != null && <span className="os-status-detail">{detail}</span>}
+    </span>
+  );
+}