sid-ui 0.1.2 → 0.2.0

package/src/components/Notification.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { Glyph } from "./Glyph";
+import { useId, type ReactNode } from "react";
 
-import type { ReactNode } from "react";
+import { Glyph } from "./Glyph";
 
 /** Accent on the unread mark. The title always says what happened. */
 export type NotificationTone = "accent" | "success" | "warning" | "danger" | "neutral";
@@ -16,7 +16,13 @@ export interface NotificationProps {
   time?: ReactNode;
   /** Leading visual — an avatar or an icon. */
   start?: ReactNode;
-  /** A next step, such as a button or a link. */
+  /** A small icon pinned to the corner of `start`, tinted by `tone` — what kind of event this is. */
+  badge?: ReactNode;
+  /** Rich detail under the description: a quoted comment, a file, an amount. Keep it non-interactive. */
+  preview?: ReactNode;
+  /** Buttons under the copy, such as Accept and Decline. */
+  actions?: ReactNode;
+  /** A trailing next step, such as a button or a link. */
   action?: ReactNode;
   /** Draws the unread mark. Read items stay quiet. */
   unread?: boolean;
@@ -34,6 +40,19 @@ export interface NotificationListProps {
   label?: string;
   /** Title and actions above the list, such as “Mark all read”. */
   header?: ReactNode;
+  /** Shown in place of the rows when there are none. */
+  empty?: ReactNode;
+}
+
+export interface NotificationGroupProps {
+  /** The section title, such as “Today” or “Earlier”. */
+  label: ReactNode;
+  children: ReactNode;
+}
+
+function hasItems(children: ReactNode) {
+  const filled = (child: ReactNode) => child != null && child !== false;
+  return Array.isArray(children) ? children.some(filled) : filled(children);
 }
 
 /** A feed of things that happened — unread marks, times, and optional actions. */
@@ -41,23 +60,66 @@ export function NotificationList({
   children,
   label = "Notifications",
   header,
+  empty,
 }: NotificationListProps) {
+  const showEmpty = empty != null && !hasItems(children);
   return (
     <section className="os-notes" aria-label={header ? undefined : label}>
       {header && <div className="os-notes-header">{header}</div>}
-      <ul className="os-notes-list" aria-label={header ? label : undefined}>
+      {showEmpty ? (
+        <div className="os-notes-empty">{empty}</div>
+      ) : (
+        <ul className="os-notes-list" aria-label={header ? label : undefined}>
+          {children}
+        </ul>
+      )}
+    </section>
+  );
+}
+
+export interface NotificationIconProps {
+  /** An Icon or Glyph. */
+  icon: ReactNode;
+  tone?: NotificationTone;
+}
+
+/** A tinted round icon for `start` when the event comes from the system, not a person. */
+export function NotificationIcon({ icon, tone = "accent" }: NotificationIconProps) {
+  return (
+    <span className={`os-note-icon os-note-icon-${tone}`} aria-hidden>
+      {icon}
+    </span>
+  );
+}
+
+/** A labelled run of notifications inside a NotificationList — “Today”, “This week”. */
+export function NotificationGroup({ label, children }: NotificationGroupProps) {
+  const id = useId();
+  return (
+    <li className="os-note-group">
+      <div className="os-note-group-label" id={id}>
+        {label}
+      </div>
+      <ul className="os-notes-list" aria-labelledby={id}>
         {children}
       </ul>
-    </section>
+    </li>
   );
 }
 
-/** One item in a notification feed. Unread items announce themselves; the title carries the meaning. */
+/**
+ * One item in a notification feed. Unread items announce themselves; the title carries the
+ * meaning. With `href` or `onClick` the whole row is the target, while `actions`, `action`,
+ * and the dismiss button stay separately clickable.
+ */
 export function Notification({
   title,
   description,
   time,
   start,
+  badge,
+  preview,
+  actions,
   action,
   unread = false,
   tone = "accent",
@@ -66,39 +128,58 @@ export function Notification({
   onDismiss,
   dismissLabel = "Dismiss",
 }: NotificationProps) {
-  const body = (
+  const label = (
     <>
-      <span
-        className={["os-note-mark", unread && `os-note-tone-${tone}`].filter(Boolean).join(" ")}
-        aria-hidden
-      />
-      <span className={start ? "os-note-start" : "os-note-start os-note-start-empty"}>{start}</span>
-      <span className="os-note-body">
-        <span className="os-note-title">{title}</span>
-        {description != null && <span className="os-note-description">{description}</span>}
-      </span>
-      {time != null && <span className="os-note-time">{time}</span>}
+      {unread && <span className="os-sr">Unread. </span>}
+      {title}
     </>
   );
 
   return (
-    <li className={["os-note", unread && "os-note-unread"].filter(Boolean).join(" ")}>
-      {href ? (
-        <a className="os-note-main" href={href}>
-          {body}
-          {unread && <span className="os-sr">Unread. </span>}
-        </a>
-      ) : onClick ? (
-        <button type="button" className="os-note-main" onClick={onClick}>
-          {body}
-          {unread && <span className="os-sr">Unread. </span>}
-        </button>
-      ) : (
-        <div className="os-note-main">
-          {body}
-          {unread && <span className="os-sr">Unread. </span>}
-        </div>
-      )}
+    <li
+      className={[
+        "os-note",
+        unread && "os-note-unread",
+        (href || onClick) && "os-note-interactive",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <div className="os-note-main">
+        <span
+          className={["os-note-mark", unread && `os-note-tone-${tone}`].filter(Boolean).join(" ")}
+          aria-hidden
+        />
+        {start != null && (
+          <span className="os-note-start">
+            {start}
+            {badge != null && (
+              <span className={`os-note-badge os-note-badge-${tone}`} aria-hidden>
+                {badge}
+              </span>
+            )}
+          </span>
+        )}
+        <span className="os-note-body">
+          <span className="os-note-title">
+            {href ? (
+              <a className="os-note-hit" href={href}>
+                {label}
+              </a>
+            ) : onClick ? (
+              <button type="button" className="os-note-hit" onClick={onClick}>
+                {label}
+              </button>
+            ) : (
+              label
+            )}
+          </span>
+          {description != null && <span className="os-note-description">{description}</span>}
+          {preview != null && <span className="os-note-preview">{preview}</span>}
+          {actions != null && <span className="os-note-actions">{actions}</span>}
+        </span>
+        {time != null && <span className="os-note-time">{time}</span>}
+      </div>
       {action && <span className="os-note-action">{action}</span>}
       {onDismiss && (
         <button

package/src/components/NotificationTrigger.tsx

@@ -12,26 +12,49 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 
-import { Glyph } from "./Glyph";
+import { Button } from "./Action";
+import { Glyph, type GlyphName } from "./Glyph";
 
 import type { NotificationTone } from "./Notification";
 
 /** Where a triggered notification sits. Logical start/end mirror under RTL. */
 export type NotificationPosition = "topStart" | "topEnd" | "bottomStart" | "bottomEnd";
 
+/** A button on a triggered notification. Clicking it runs `onClick`, then dismisses. */
+export interface NotificationAction {
+  label: string;
+  onClick: () => void;
+  variant?: "primary" | "secondary" | "ghost";
+}
+
 export interface ShowNotificationOptions {
   title: ReactNode;
   description?: ReactNode;
   tone?: NotificationTone;
   /** Corner of the viewport. */
   position?: NotificationPosition;
-  /** How long it stays. 0 keeps it until dismissed. */
+  /** How long it stays. 0 keeps it until dismissed. Hovering or focusing the card pauses it. */
   duration?: number;
+  /** Leading visual in place of the tone icon — an avatar or a thumbnail. */
+  start?: ReactNode;
+  /** Replaces the tone's default icon. */
+  icon?: ReactNode;
+  /** Up to two buttons under the copy, such as Undo or View. */
+  actions?: NotificationAction[];
+  /** Draws the time left as a bar along the bottom edge. Defaults to true when it times out. */
+  showProgress?: boolean;
 }
 
 export type NotificationDismiss = () => void;
 
 const POSITIONS: NotificationPosition[] = ["topStart", "topEnd", "bottomStart", "bottomEnd"];
+const TONE_GLYPH: Record<NotificationTone, GlyphName> = {
+  accent: "info",
+  success: "check",
+  warning: "alert",
+  danger: "alertCircle",
+  neutral: "bell",
+};
 const DEFAULT_DURATION_MS = 5000;
 const DEFAULT_POSITION: NotificationPosition = "topEnd";
 /** Matches --duration-slow, so the card finishes its exit before it unmounts. */
@@ -44,6 +67,10 @@ interface Notice {
   tone: NotificationTone;
   position: NotificationPosition;
   duration: number;
+  start?: ReactNode;
+  icon?: ReactNode;
+  actions: NotificationAction[];
+  showProgress: boolean;
   leaving: boolean;
 }
 
@@ -91,6 +118,10 @@ export function NotificationViewport({ children }: { children: ReactNode }) {
         tone: options.tone ?? "accent",
         position: options.position ?? DEFAULT_POSITION,
         duration: options.duration ?? DEFAULT_DURATION_MS,
+        start: options.start,
+        icon: options.icon,
+        actions: (options.actions ?? []).slice(0, 2),
+        showProgress: options.showProgress ?? true,
         leaving: false,
       };
       setItems((all) => [notice, ...all]);
@@ -208,12 +239,7 @@ function NotificationCard({
   onRemove: () => void;
 }) {
   const titleId = useId();
-
-  useEffect(() => {
-    if (item.duration === 0 || item.leaving) return;
-    const timer = window.setTimeout(onDismiss, item.duration);
-    return () => window.clearTimeout(timer);
-  }, [item.duration, item.leaving, onDismiss]);
+  const timed = item.duration > 0;
 
   useEffect(() => {
     if (!item.leaving) return;
@@ -230,7 +256,13 @@ function NotificationCard({
         role={item.tone === "danger" ? "alert" : "status"}
         aria-labelledby={titleId}
       >
-        <span className="os-note-card-mark" aria-hidden />
+        {item.start != null ? (
+          <span className="os-note-card-start">{item.start}</span>
+        ) : (
+          <span className="os-note-card-icon" aria-hidden>
+            {item.icon ?? <Glyph name={TONE_GLYPH[item.tone]} />}
+          </span>
+        )}
         <span className="os-note-card-copy">
           <span className="os-note-card-title" id={titleId}>
             {item.title}
@@ -238,10 +270,40 @@ function NotificationCard({
           {item.description != null && (
             <span className="os-note-card-description">{item.description}</span>
           )}
+          {item.actions.length > 0 && (
+            <span className="os-note-card-actions">
+              {item.actions.map((action, index) => (
+                <Button
+                  key={action.label}
+                  label={action.label}
+                  size="sm"
+                  variant={action.variant ?? (index === 0 ? "secondary" : "ghost")}
+                  onClick={() => {
+                    action.onClick();
+                    onDismiss();
+                  }}
+                />
+              ))}
+            </span>
+          )}
         </span>
         <button type="button" className="os-note-dismiss" aria-label="Dismiss" onClick={onDismiss}>
           <Glyph name="close" />
         </button>
+        {/* The bar is the timer: it pauses with the card on hover or focus, and its end dismisses. */}
+        {timed && !item.leaving && (
+          <span
+            className={[
+              "os-note-card-progress",
+              !item.showProgress && "os-note-card-progress-hidden",
+            ]
+              .filter(Boolean)
+              .join(" ")}
+            style={{ animationDuration: `${item.duration}ms` }}
+            onAnimationEnd={onDismiss}
+            aria-hidden
+          />
+        )}
       </div>
     </div>
   );

package/src/components/RadarChart.tsx

@@ -0,0 +1,220 @@
+"use client";
+
+import { useRef, useState, type KeyboardEvent } from "react";
+
+import { niceTicks, polarPoint, polygonPath } from "./chartMath";
+import {
+  ChartLegend,
+  ChartTable,
+  ChartTip,
+  defaultFormat,
+  toneAt,
+  type ChartTone,
+} from "./chartParts";
+import { useElementWidth } from "./Responsive";
+
+export type RadarSeries = {
+  label: string;
+  /** One per axis, in axis order. */
+  values: number[];
+  tone?: ChartTone;
+};
+
+const DEFAULT_SIZE = 420;
+/** Room around the web for axis names. */
+const LABEL_ROOM = 64;
+
+/**
+ * Several measures of a few things at once — a skill profile, a product comparison. Each axis
+ * runs from the center out; each series is a filled shape. Hover or arrow through the axes to
+ * read every series on one axis.
+ */
+export function RadarChart({
+  axes,
+  series,
+  label,
+  max,
+  levels = 4,
+  size = DEFAULT_SIZE,
+  shape = "polygon",
+  formatValue = defaultFormat,
+  hasLegend,
+}: {
+  /** Axis names, clockwise from twelve o'clock. Three or more. */
+  axes: string[];
+  series: RadarSeries[];
+  /** Accessible name for the chart. */
+  label: string;
+  /** The value at the rim. Defaults to a clean number above the largest value. */
+  max?: number;
+  /** Rings in the web. */
+  levels?: number;
+  /** The largest the chart grows to, in px. It shrinks to fit narrow frames. */
+  size?: number;
+  /** polygon draws a straight-edged web; circle draws round rings. */
+  shape?: "polygon" | "circle";
+  formatValue?: (value: number) => string;
+  /** Defaults to on for two or more series. */
+  hasLegend?: boolean;
+}) {
+  const frame = useRef<HTMLDivElement>(null);
+  const width = useElementWidth(frame);
+  const [active, setActive] = useState<number | null>(null);
+
+  const side = Math.max(0, Math.min(size, width));
+  const center = side / 2;
+  const radius = Math.max(0, center - LABEL_ROOM);
+  const largest = Math.max(0, ...series.flatMap((s) => s.values));
+  const ticks = niceTicks(largest, levels);
+  const rim = max ?? ticks[ticks.length - 1];
+  const rings = max ? Array.from({ length: levels + 1 }, (_, i) => (max / levels) * i) : ticks;
+  const n = axes.length;
+  const toned = series.map((item, index) => ({ ...item, tone: toneAt(index, item.tone) }));
+  const showLegend = hasLegend ?? series.length > 1;
+  const at = (axis: number, value: number) =>
+    polarPoint(center, center, rim > 0 ? (Math.max(0, value) / rim) * radius : 0, axis / n);
+
+  const onKey = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (n === 0) return;
+    if (["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"].includes(event.key)) {
+      event.preventDefault();
+      const step = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : -1;
+      setActive((current) => ((current ?? -step) + step + n) % n);
+    } else if (event.key === "Escape") {
+      setActive(null);
+    }
+  };
+
+  const tipPoint = active === null ? null : polarPoint(center, center, radius + 8, active / n);
+
+  return (
+    <div className="os-chart os-radar">
+      {showLegend ? (
+        <ChartLegend items={toned.map((item) => ({ label: item.label, tone: item.tone }))} />
+      ) : null}
+      <div
+        ref={frame}
+        className="os-chart-frame os-radar-frame"
+        style={{ height: side || size }}
+        tabIndex={0}
+        role="group"
+        aria-label={`${label}. Use the arrow keys to read each axis.`}
+        onKeyDown={onKey}
+        onBlur={() => setActive(null)}
+      >
+        {side > 0 ? (
+          <svg
+            width={side}
+            height={side}
+            className="os-chart-svg"
+            aria-hidden
+            onPointerLeave={() => setActive(null)}
+          >
+            {rings.slice(1).map((ring) => {
+              const r = rim > 0 ? (ring / rim) * radius : 0;
+              return shape === "circle" ? (
+                <circle key={ring} className="os-radar-ring" cx={center} cy={center} r={r} />
+              ) : (
+                <path
+                  key={ring}
+                  className="os-radar-ring"
+                  d={polygonPath(axes.map((_, i) => polarPoint(center, center, r, i / n)))}
+                />
+              );
+            })}
+            {rings.slice(1).map((ring) => (
+              <text
+                key={`t-${ring}`}
+                className="os-chart-axis os-radar-tick"
+                x={center + 4}
+                y={center - (rim > 0 ? (ring / rim) * radius : 0)}
+                dy="-0.3em"
+              >
+                {formatValue(ring)}
+              </text>
+            ))}
+            {axes.map((name, i) => {
+              const end = polarPoint(center, center, radius, i / n);
+              const labelAt = polarPoint(center, center, radius + 14, i / n);
+              const anchor =
+                Math.abs(labelAt.x - center) < 4 ? "middle" : labelAt.x > center ? "start" : "end";
+              return (
+                <g key={name} data-active={active === i || undefined}>
+                  <line
+                    className="os-radar-spoke"
+                    x1={center}
+                    y1={center}
+                    x2={end.x}
+                    y2={end.y}
+                  />
+                  <text
+                    className="os-radar-label"
+                    x={labelAt.x}
+                    y={labelAt.y}
+                    textAnchor={anchor}
+                    dy={labelAt.y < center - radius * 0.7 ? "-0.2em" : labelAt.y > center + radius * 0.7 ? "0.9em" : "0.35em"}
+                  >
+                    {name}
+                  </text>
+                </g>
+              );
+            })}
+            {toned.map((item, s) => {
+              const points = axes.map((_, i) => at(i, item.values[i] ?? 0));
+              return (
+                <g
+                  key={item.label}
+                  data-tone={item.tone}
+                  className="os-radar-series"
+                  style={{ animationDelay: `${s * 120}ms`, transformOrigin: `${center}px ${center}px` }}
+                >
+                  <path className="os-radar-shape" d={polygonPath(points)} />
+                  {points.map((point, i) => (
+                    <circle
+                      key={axes[i]}
+                      className="os-radar-dot"
+                      cx={point.x}
+                      cy={point.y}
+                      r={active === i ? 5 : 3}
+                    />
+                  ))}
+                </g>
+              );
+            })}
+            {/* One wedge per axis catches the pointer anywhere in its slice. */}
+            {axes.map((name, i) => {
+              const a = polarPoint(center, center, radius + LABEL_ROOM, (i - 0.5) / n);
+              const b = polarPoint(center, center, radius + LABEL_ROOM, (i + 0.5) / n);
+              return (
+                <path
+                  key={`hit-${name}`}
+                  className="os-chart-hit"
+                  d={`M${center},${center}L${a.x},${a.y}L${b.x},${b.y}Z`}
+                  onPointerEnter={() => setActive(i)}
+                />
+              );
+            })}
+          </svg>
+        ) : null}
+        {active !== null && tipPoint ? (
+          <ChartTip
+            title={axes[active]}
+            left={tipPoint.x + (side - width < 0 ? (width - side) / 2 : 0)}
+            top={tipPoint.y}
+            align={tipPoint.x < center - 4 ? "end" : tipPoint.x > center + 4 ? "start" : "center"}
+            rows={toned.map((item) => ({
+              label: item.label,
+              value: formatValue(item.values[active] ?? 0),
+              tone: item.tone,
+            }))}
+          />
+        ) : null}
+      </div>
+      <ChartTable
+        caption={label}
+        headers={["", ...series.map((item) => item.label)]}
+        rows={axes.map((axis, i) => [axis, ...series.map((item) => formatValue(item.values[i] ?? 0))])}
+      />
+    </div>
+  );
+}