@bkstg/design-systems 1.0.0 → 1.0.1

package/tether/latest/motion.js

@@ -0,0 +1,168 @@
+// motion.js: the kit's animation engine. Plain script, no library, no build: the browser's own Web Animations API
+// and an IntersectionObserver. Load it after the markup (or with defer). Nothing here is required: without it, every
+// element simply shows.
+//
+// No-code use: put attributes on any element.
+//   data-reveal="fade-up"        an entrance (see PRESETS); plays when it scrolls into view
+//   data-reveal-trigger="load"   …or on load, or "hover" (plays each time the pointer arrives)
+//   data-reveal-duration="500"   ms; default the --dur-slow token
+//   data-reveal-delay="100"      ms
+//   data-reveal-ease="enter"     standard | enter | exit, or any CSS easing; default the --ease-enter token
+//   data-reveal-distance="24"    px of travel; default the --motion-distance token
+//   data-reveal-stagger="60"     ms between children (each child animates in turn); default none
+//   data-reveal-split="words"    words | chars | lines: split the text and stagger the pieces (the words are still
+//                                read as one sentence: the original text stays as the element's accessible name)
+//   data-reveal-repeat           replay every time it comes into view (default: once)
+//   data-count-to="18240"        a number that counts up from 0 (data-count-prefix, -suffix, -decimals)
+//
+// Colin's Motion setting decides how much plays: html[data-motion="full"] everything; "calm" short opacity-only fades,
+// counters land on their number; "still", or the device's reduce-motion setting, nothing moves and everything shows.
+//
+// window.UIMotion = { init(scope), play(el), keyframes(preset, opts), level(), PRESETS } for the workbench playground.
+(function () {
+  "use strict";
+  var root = document.documentElement;
+  var reduce = window.matchMedia ? matchMedia("(prefers-reduced-motion: reduce)") : null;
+  function level() {
+    if (reduce && reduce.matches) return "still";
+    var m = root.getAttribute("data-motion");
+    return m === "still" || m === "calm" ? m : "full";
+  }
+  function token(name, fallback) { var v = getComputedStyle(root).getPropertyValue(name).trim(); return v || fallback; }
+  function ms(v, fallback) { if (v == null || v === "") return fallback; var n = parseFloat(v); return /ms$/.test(v) || !/s$/.test(v) ? n : n * 1000; }
+  var EASE = { standard: "--ease-standard", enter: "--ease-enter", exit: "--ease-exit" };
+  function easing(v) { return EASE[v] ? token(EASE[v], "ease") : v || token("--ease-enter", "ease-out"); }
+
+  // Each preset: the "from" state; every animation ends on the element's own resting state
+  var PRESETS = {
+    "fade":        function (d) { return { opacity: 0 }; },
+    "fade-up":     function (d) { return { opacity: 0, transform: "translateY(" + d + "px)" }; },
+    "fade-down":   function (d) { return { opacity: 0, transform: "translateY(" + -d + "px)" }; },
+    "slide-left":  function (d) { return { opacity: 0, transform: "translateX(" + d * 2 + "px)" }; },
+    "slide-right": function (d) { return { opacity: 0, transform: "translateX(" + -d * 2 + "px)" }; },
+    "scale":       function (d) { return { opacity: 0, transform: "scale(.92)" }; },
+    "blur":        function (d) { return { opacity: 0, filter: "blur(12px)" }; },
+    "wipe-up":     function (d) { return { clipPath: "inset(100% 0 0 0)" }; },
+    "wipe-right":  function (d) { return { clipPath: "inset(0 100% 0 0)" }; },
+    "iris":        function (d) { return { clipPath: "circle(0% at 50% 50%)" }; },
+    "zoom-out":    function (d) { return { opacity: 0, transform: "scale(1.12)" }; },
+    "rise":        function (d) { return { opacity: 0, transform: "translateY(110%)" }; }
+  };
+  var REST = { opacity: 1, transform: "none", filter: "blur(0)", clipPath: { "wipe-up": "inset(0 0 0 0)", "wipe-right": "inset(0 0 0 0)", iris: "circle(75% at 50% 50%)" } };
+  /** keyframes for a preset at a level: Calm keeps only the fade; Still has none */
+  function keyframes(preset, opts) {
+    opts = opts || {};
+    var lvl = opts.level || level(), from = (PRESETS[preset] || PRESETS.fade)(opts.distance != null ? opts.distance : parseFloat(token("--motion-distance", "16")));
+    if (lvl === "still") return null;
+    if (lvl === "calm") from = { opacity: 0 };
+    var to = {};
+    Object.keys(from).forEach(function (k) { to[k] = k === "clipPath" ? REST.clipPath[preset] : REST[k]; });
+    if (lvl === "calm" && from.opacity === undefined) return null;
+    return [from, to];
+  }
+  function timing(el, opts, i) {
+    var lvl = (opts && opts.level) || level();
+    var dur = ms(el.getAttribute("data-reveal-duration"), ms(token("--dur-slow", "500ms")));
+    return {
+      duration: lvl === "calm" ? Math.min(dur, ms(token("--dur-base", "250ms"))) : dur,
+      delay: ms(el.getAttribute("data-reveal-delay"), 0) + (i || 0) * ms(el.getAttribute("data-reveal-stagger"), ms(token("--motion-stagger", "60ms"))),
+      easing: easing(el.getAttribute("data-reveal-ease")), fill: "both"
+    };
+  }
+
+  // split text into words, characters or lines; the original sentence stays the accessible name
+  function split(el, how) {
+    if (el._uiSplit === how) return el._uiParts;
+    var text = el._uiText || (el._uiText = el.textContent.trim());
+    el.setAttribute("aria-label", text);
+    var tokens = how === "chars" ? Array.from(text) : text.split(/(\s+)/);
+    el.innerHTML = "";
+    var parts = [];
+    tokens.forEach(function (t) {
+      if (/^\s+$/.test(t)) { el.appendChild(document.createTextNode(t)); return; }
+      var wrap = document.createElement("span"); wrap.className = "ui-split"; wrap.setAttribute("aria-hidden", "true");
+      var inner = document.createElement("span"); inner.className = "ui-split-in"; inner.textContent = t;
+      wrap.appendChild(inner); el.appendChild(wrap); parts.push(inner);
+    });
+    if (how === "lines") {
+      // group words that share a line, so each line rises as one
+      var lines = [], top = null;
+      parts.forEach(function (p) { var y = p.parentNode.offsetTop; if (y !== top) { lines.push([]); top = y; } lines[lines.length - 1].push(p); });
+      parts = lines.map(function (ws) { return { line: ws }; });
+    }
+    el._uiSplit = how; el._uiParts = parts;
+    return parts;
+  }
+
+  function animateOne(target, preset, t, opts) {
+    var k = keyframes(preset, opts);
+    if (!k || !target.animate) return null;
+    return target.animate(k, t);
+  }
+  /** play an element's entrance now; returns its animations */
+  function play(el, opts) {
+    opts = opts || {};
+    var preset = opts.preset || el.getAttribute("data-reveal") || "fade-up", lvl = opts.level || level(), anims = [];
+    el.getAnimations && el.getAnimations().forEach(function (a) { a.cancel(); });
+    var how = el.getAttribute("data-reveal-split"), kids;
+    if (how) {
+      var parts = split(el, how);
+      parts.forEach(function (p, i) {
+        (p.line || [p]).forEach(function (w) { var a = animateOne(w, preset === "fade-up" && how !== "chars" ? "rise" : preset, timing(el, opts, i), { level: lvl, distance: opts.distance }); if (a) anims.push(a); });
+      });
+    } else if (el.hasAttribute("data-reveal-stagger")) {
+      kids = Array.prototype.slice.call(el.children);
+      kids.forEach(function (c, i) { var a = animateOne(c, preset, timing(el, opts, i), { level: lvl, distance: opts.distance }); if (a) anims.push(a); });
+    } else {
+      var a = animateOne(el, preset, timing(el, opts, 0), { level: lvl, distance: opts.distance }); if (a) anims.push(a);
+    }
+    el.setAttribute("data-revealed", "");
+    return anims;
+  }
+
+  // counters: count from 0 to the number, eased; Calm and Still show the number at once
+  function count(el) {
+    var to = parseFloat(el.getAttribute("data-count-to")), dec = +(el.getAttribute("data-count-decimals") || 0);
+    var pre = el.getAttribute("data-count-prefix") || "", suf = el.getAttribute("data-count-suffix") || "";
+    var show = function (n) { el.textContent = pre + n.toLocaleString(undefined, { minimumFractionDigits: dec, maximumFractionDigits: dec }) + suf; };
+    if (isNaN(to)) return;
+    el.setAttribute("aria-label", pre + to.toLocaleString(undefined, { minimumFractionDigits: dec, maximumFractionDigits: dec }) + suf);
+    if (level() !== "full") { show(to); return; }
+    var dur = ms(el.getAttribute("data-reveal-duration"), ms(token("--dur-slow", "500ms")) * 2.4), t0 = null;
+    function step(t) { if (t0 === null) t0 = t; var p = Math.min(1, (t - t0) / dur), e = 1 - Math.pow(1 - p, 3); show(to * e); if (p < 1) requestAnimationFrame(step); }
+    requestAnimationFrame(step);
+    el.setAttribute("data-revealed", "");
+  }
+
+  var io = "IntersectionObserver" in window ? new IntersectionObserver(function (entries) {
+    entries.forEach(function (en) {
+      var el = en.target;
+      if (en.isIntersecting) {
+        if (el.hasAttribute("data-count-to")) count(el); else play(el);
+        if (!el.hasAttribute("data-reveal-repeat")) io.unobserve(el);
+      } else if (el.hasAttribute("data-reveal-repeat") && !el.hasAttribute("data-count-to")) {
+        var k = keyframes(el.getAttribute("data-reveal") || "fade-up");
+        if (k && el.animate) el.animate([k[0], k[0]], { duration: 1, fill: "both" });
+      }
+    });
+  }, { rootMargin: "0px 0px -10% 0px", threshold: 0.15 }) : null;
+
+  function init(scope) {
+    scope = scope || document;
+    Array.prototype.forEach.call(scope.querySelectorAll("[data-reveal], [data-count-to]"), function (el) {
+      if (el._uiMotion) return;
+      el._uiMotion = true;
+      var trig = el.getAttribute("data-reveal-trigger") || "scroll";
+      if (level() === "still" && !el.hasAttribute("data-count-to")) { el.setAttribute("data-revealed", ""); return; }
+      if (trig === "load") { el.hasAttribute("data-count-to") ? count(el) : play(el); }
+      else if (trig === "hover") { el.addEventListener("pointerenter", function () { play(el); }); el.setAttribute("data-revealed", ""); }
+      else if (io) io.observe(el);
+      else { el.hasAttribute("data-count-to") ? count(el) : play(el); }
+    });
+  }
+  // until it is ready, an element waiting to reveal is hidden; if the script never runs, nothing is hidden
+  root.classList.add("ui-motion-ready");
+  window.UIMotion = { init: init, play: play, keyframes: keyframes, level: level, PRESETS: Object.keys(PRESETS) };
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", function () { init(); });
+  else init();
+})();

package/tether/latest/react/ActivityFeed.jsx

@@ -0,0 +1,18 @@
+import { Avatar } from "./Avatar.jsx";
+
+/**
+ * <ActivityFeed label="Recent activity" items={[{ id, name: "Grace Lee", action: "approved the poster", time: "2h ago" }]} />
+ */
+export function ActivityFeed({ label, items = [], className }) {
+  return (
+    <ul className={["ui-feed", className].filter(Boolean).join(" ")} aria-label={label}>
+      {items.map((it) => (
+        <li key={it.id} className="ui-feed-item">
+          <Avatar name={it.name} size="sm" />
+          <p className="ui-feed-text"><strong>{it.name}</strong> {it.action}</p>
+          <span className="ui-feed-time">{it.time}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}

package/tether/latest/react/Alert.jsx

@@ -0,0 +1,28 @@
+import { cx } from "./cx.js";
+
+const ICONS = {
+  info: <><circle cx="12" cy="12" r="10" /><path d="M12 16v-4M12 8h.01" /></>,
+  ok: <><circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" /></>,
+  warn: <><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /><path d="M12 9v4M12 17h.01" /></>,
+  critical: <><circle cx="12" cy="12" r="10" /><path d="m15 9-6 6M9 9l6 6" /></>,
+};
+
+/**
+ * <Alert tone="warn" title="Set times move Thursday">Check the schedule before you publish.</Alert>
+ * tone: "info" (default) | "ok" | "warn" | "critical". Critical uses role="alert" (announced at once),
+ * the others role="status". onClose adds a close button.
+ */
+export function Alert({ tone = "info", title, children, onClose, closeLabel = "Dismiss", className }) {
+  return (
+    <div className={cx("ui-alert", tone !== "info" && `ui-alert--${tone}`, className)} role={tone === "critical" ? "alert" : "status"}>
+      <svg className="ui-alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{ICONS[tone] || ICONS.info}</svg>
+      {title ? <p className="ui-alert-title">{title}</p> : null}
+      {children ? <p className="ui-alert-body">{children}</p> : null}
+      {onClose ? (
+        <button type="button" className="ui-alert-close" aria-label={closeLabel} onClick={onClose}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/tether/latest/react/Annotations.jsx

@@ -0,0 +1,24 @@
+import { useState } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <Annotations notes={[{ x: "12%", y: "16%", title: "One primary action", text: "…" }]}>{the design}</Annotations>
+ * Numbered pins over the design, each a button that lights up its note in the list beside it.
+ */
+export function Annotations({ notes, children, label = "Notes", className }) {
+  const [on, setOn] = useState(null);
+  return (
+    <div className={cx("ui-annot", className)}>
+      <div className="ui-annot-canvas">
+        {children}
+        {notes.map((n, i) => (
+          <button key={i} type="button" className="ui-annot-pin" aria-pressed={on === i} aria-label={`Note ${i + 1}: ${n.title}`}
+            style={{ left: n.x, top: n.y }} onClick={() => setOn(on === i ? null : i)}>{i + 1}</button>
+        ))}
+      </div>
+      <ol className="ui-annot-notes" aria-label={label}>
+        {notes.map((n, i) => <li key={i} data-active={on === i ? "" : undefined}><strong>{n.title}</strong><span>{n.text}</span></li>)}
+      </ol>
+    </div>
+  );
+}

package/tether/latest/react/AppShell.jsx

@@ -0,0 +1,87 @@
+import { useEffect, useId, useRef, useState } from "react";
+import { cx } from "./cx.js";
+
+const NARROW = 720; // keep in step with the @container query in components.css
+const Icon = ({ d }) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{d}</svg>;
+const PANEL = <Icon d={<><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M9 3v18" /></>} />;
+const MENU = <Icon d={<path d="M4 6h16M4 12h16M4 18h16" />} />;
+const CHEV = <Icon d={<path d="m6 9 6 6 6-6" />} />;
+
+/**
+ * The app sidebar with a flyout, after the BKSTG workbench's own. Wide, it collapses to an icon rail; under
+ * 720px it slides over the page as a drawer (Escape or a tap outside closes it).
+ * <AppShell brand="BKSTG" title="Overview" label="Main" items={[
+ *   { href: "/", label: "Overview", icon: <HomeIcon />, current: true },
+ *   { href: "/lineup", label: "Lineup", icon: <MusicIcon />, count: 24 },
+ *   { label: "Production", icon: <TruckIcon />, open: true, items: [{ href: "/stages", label: "Stages" }] },
+ *   { heading: "Departments" },
+ *   { href: "/booking", label: "Booking", icon: <MicIcon /> },
+ * ]} footer={[{ href: "/settings", label: "Settings", icon: <GearIcon /> }]}>…the page…</AppShell>
+ */
+export function AppShell({ brand, title, label = "Main", items = [], footer = [], defaultCollapsed = false, children, className }) {
+  const id = useId().replace(/:/g, ""), sbId = `sb-${id}`;
+  const root = useRef(null), side = useRef(null), opener = useRef(null);
+  const [narrow, setNarrow] = useState(false);
+  const [open, setOpen] = useState(!defaultCollapsed);
+  const [groups, setGroups] = useState(() => new Set(items.filter((it) => it.items && it.open).map((it) => it.label)));
+  useEffect(() => {
+    if (!root.current || typeof ResizeObserver === "undefined") return undefined;
+    const ro = new ResizeObserver(([e]) => { const n = e.contentRect.width <= NARROW; setNarrow(n); if (n) setOpen(false); });
+    ro.observe(root.current);
+    return () => ro.disconnect();
+  }, []);
+  useEffect(() => {
+    if (!(narrow && open)) return undefined;
+    side.current?.querySelector(".ui-sidebar-toggle, .ui-sidebar-item")?.focus();
+    const key = (e) => { if (e.key === "Escape") { setOpen(false); opener.current?.focus(); } };
+    const tap = (e) => { if (side.current && !side.current.contains(e.target) && !opener.current?.contains(e.target)) setOpen(false); };
+    document.addEventListener("keydown", key); document.addEventListener("mousedown", tap);
+    return () => { document.removeEventListener("keydown", key); document.removeEventListener("mousedown", tap); };
+  }, [narrow, open]);
+  const toggleGroup = (name) => {
+    if (!open && !narrow) { setOpen(true); setGroups((s) => new Set(s).add(name)); return; }
+    setGroups((s) => { const n = new Set(s); n.has(name) ? n.delete(name) : n.add(name); return n; });
+  };
+  const link = (it, sub) => (
+    <a key={it.href + it.label} className="ui-sidebar-item" href={it.href} title={sub ? undefined : it.label} aria-current={it.current ? "page" : undefined}>
+      {it.icon ? <span aria-hidden="true" style={{ display: "contents" }}>{it.icon}</span> : null}
+      <span className="ui-sidebar-label">{it.label}</span>
+      {it.count != null ? <span className="ui-sidebar-count">{it.count}</span> : null}
+    </a>
+  );
+  const entry = (it) => {
+    if (it.heading) return <p key={"h-" + it.heading} className="ui-sidebar-head">{it.heading}</p>;
+    if (!it.items) return link(it);
+    const bodyId = `${sbId}-${it.label.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`, isOpen = groups.has(it.label) && (open || narrow);
+    return (
+      <div key={"g-" + it.label} className="ui-sidebar-group">
+        <button type="button" className="ui-sidebar-item" aria-expanded={isOpen} aria-controls={bodyId} title={it.label} onClick={() => toggleGroup(it.label)}>
+          {it.icon ? <span aria-hidden="true" style={{ display: "contents" }}>{it.icon}</span> : null}
+          <span className="ui-sidebar-label">{it.label}</span><span className="ui-sidebar-chev">{CHEV}</span>
+        </button>
+        <div className="ui-sidebar-group-body" id={bodyId} hidden={!isOpen}>{it.items.map((s) => link(s, true))}</div>
+      </div>
+    );
+  };
+  const toggleLabel = narrow ? "Close menu" : open ? "Collapse sidebar" : "Expand sidebar";
+  return (
+    <div ref={root} className={cx("ui-app", className)}>
+      <nav ref={side} className="ui-sidebar" id={sbId} data-state={open ? "expanded" : "collapsed"} aria-label={label}>
+        <div className="ui-sidebar-top">
+          {brand ? <span className="ui-sidebar-brand">{brand}</span> : null}
+          <button type="button" className="ui-sidebar-toggle" aria-controls={sbId} aria-expanded={open} aria-label={toggleLabel}
+            onClick={() => { setOpen(!open); if (open && narrow) opener.current?.focus(); }}>{PANEL}</button>
+        </div>
+        {items.map(entry)}
+        {footer.length ? <div className="ui-sidebar-foot">{footer.map((it) => link(it))}</div> : null}
+      </nav>
+      <div className="ui-app-main">
+        <div className="ui-app-bar">
+          <button ref={opener} type="button" className="ui-sidebar-open" aria-controls={sbId} aria-expanded={open} aria-label="Open menu" onClick={() => setOpen(true)}>{MENU}</button>
+          {title ? <strong>{title}</strong> : null}
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}

package/tether/latest/react/Avatar.jsx

@@ -0,0 +1,19 @@
+import { cx } from "./cx.js";
+
+/**
+ * <Avatar name="Grace Lee" src={url} size="lg" online />
+ * Without src, shows initials. name is the accessible name either way.
+ */
+export function Avatar({ name, src, size = "md", online = false, className }) {
+  const initials = (name || "").split(/\s+/).filter(Boolean).slice(0, 2).map(w => w[0].toUpperCase()).join("");
+  return (
+    <span className={cx("ui-avatar", size !== "md" && `ui-avatar--${size}`, className)} role="img" aria-label={name + (online ? ", online" : "")}>
+      {src ? <img src={src} alt="" /> : <span aria-hidden="true">{initials}</span>}
+      {online ? <span className="ui-avatar-status" aria-hidden="true" /> : null}
+    </span>
+  );
+}
+
+export function AvatarGroup({ label, className, children }) {
+  return <span className={cx("ui-avatar-group", className)} role="group" aria-label={label}>{children}</span>;
+}

package/tether/latest/react/Badge.jsx

@@ -0,0 +1,14 @@
+import { cx } from "./cx.js";
+
+/**
+ * <Badge tone="ok" dot>Live</Badge>
+ * tone: "neutral" (default) | "ok" | "warn" | "critical" | "brand" | "outline"
+ */
+export function Badge({ tone = "neutral", dot = false, className, children, ...rest }) {
+  return (
+    <span className={cx("ui-badge", tone !== "neutral" && `ui-badge--${tone}`, className)} {...rest}>
+      {dot ? <span className="ui-badge-dot" aria-hidden="true" /> : null}
+      {children}
+    </span>
+  );
+}

package/tether/latest/react/Banner.jsx

@@ -0,0 +1,17 @@
+import { cx } from "./cx.js";
+
+const X = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>;
+
+/**
+ * <Banner tone="fill" link={{ href: "/schedule", label: "Open the schedule" }} onClose={hide}>Set times are live.</Banner>
+ * tone: default (inverted) | "fill" | "subtle"; card puts it in a rounded box. A named region, so it can be found.
+ */
+export function Banner({ children, tone, card = false, link, onClose, label = "Announcement", className }) {
+  return (
+    <div className={cx("ui-banner", tone && `ui-banner--${tone}`, card && "ui-banner--card", className)} role="region" aria-label={label}>
+      <span>{children}</span>
+      {link ? <a href={link.href}>{link.label}</a> : null}
+      {onClose ? <button type="button" className="ui-banner-close" aria-label={`Dismiss ${label.toLowerCase()}`} onClick={onClose}>{X}</button> : null}
+    </div>
+  );
+}

package/tether/latest/react/Breadcrumbs.jsx

@@ -0,0 +1,23 @@
+import { cx } from "./cx.js";
+
+/**
+ * <Breadcrumbs items={[{ href: "/", label: "Home", icon: <HomeIcon /> }, { href: "/events", label: "Events" }, { label: "Spring 2026" }]} />
+ * The last item is the current page: plain text with aria-current="page", never a link.
+ */
+export function Breadcrumbs({ items, label = "Breadcrumb", className }) {
+  return (
+    <nav className={cx("ui-breadcrumb", className)} aria-label={label}>
+      <ol>
+        {items.map((it, i) => {
+          const last = i === items.length - 1;
+          return (
+            <li key={i}>
+              {last ? <span aria-current="page">{it.icon}{it.label}</span>
+                : <a href={it.href} aria-label={it.icon && !it.label ? it.ariaLabel : undefined}>{it.icon}{it.label}</a>}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

package/tether/latest/react/Button.jsx

@@ -0,0 +1,31 @@
+import { forwardRef } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <Button variant="primary" size="sm">Save</Button>
+ * variant: "secondary" (default) | "primary" | "ghost" | "destructive" | "link"
+ * size:    "md" (default) | "sm" | "lg" | "icon"   (icon needs an aria-label)
+ * loading: shows a spinner, sets aria-busy, blocks clicks
+ * Same markup and classes as the HTML version; the look lives in components.css.
+ */
+export const Button = forwardRef(function Button(
+  { variant = "secondary", size = "md", loading = false, className, type = "button", children, ...rest },
+  ref
+) {
+  return (
+    <button
+      ref={ref}
+      type={type}
+      aria-busy={loading || undefined}
+      className={cx(
+        "ui-btn",
+        variant !== "secondary" && `ui-btn--${variant}`,
+        size !== "md" && `ui-btn--${size}`,
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+});

package/tether/latest/react/ButtonGroup.jsx

@@ -0,0 +1,29 @@
+import { cx } from "./cx.js";
+
+/**
+ * <ButtonGroup label="View" value={view} onChange={setView} items={[
+ *   { value: "list", label: "List" }, { value: "board", label: "Board" } ]} />
+ * One pressed at a time. With multiple, value is an array and each button toggles on its own.
+ * Each button reports its state with aria-pressed.
+ */
+export function ButtonGroup({ label, items, value, onChange, multiple = false, className }) {
+  const on = (v) => (multiple ? (value || []).includes(v) : value === v);
+  function press(v) {
+    if (!onChange) return;
+    if (!multiple) return onChange(v);
+    const list = value || [];
+    onChange(list.includes(v) ? list.filter((x) => x !== v) : [...list, v]);
+  }
+  return (
+    <div className={cx("ui-btngroup", className)} role="group" aria-label={label}>
+      {items.map((it) => (
+        <button
+          key={it.value} type="button" className="ui-btngroup-item" disabled={it.disabled}
+          aria-pressed={on(it.value)} aria-label={it.ariaLabel} onClick={() => press(it.value)}
+        >
+          {it.icon}{it.label}
+        </button>
+      ))}
+    </div>
+  );
+}

package/tether/latest/react/Calendar.jsx

@@ -0,0 +1,57 @@
+import { useEffect, useRef, useState } from "react";
+import { cx } from "./cx.js";
+
+const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+const DOW = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], DOW_LONG = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+export const toIso = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+export const fromIso = (s) => { const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s || ""); return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null; };
+const Arrow = ({ d }) => <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d={d} /></svg>;
+
+/**
+ * <Calendar value="2026-04-18" onChange={setDate} events={["2026-04-11"]} />
+ * A month as a grid: arrows move a day, Page Up/Down a month, Home/End the week. Dates are "YYYY-MM-DD" strings.
+ */
+export function Calendar({ value, onChange, events = [], today = new Date(), autoFocus = false, label, className }) {
+  const [cursor, setCursor] = useState(() => fromIso(value) || today);
+  const focus = useRef(autoFocus), grid = useRef(null);
+  useEffect(() => { if (focus.current) grid.current?.querySelector('[tabindex="0"]')?.focus(); focus.current = false; });
+  const y = cursor.getFullYear(), mo = cursor.getMonth(), start = new Date(y, mo, 1 - new Date(y, mo, 1).getDay());
+  const move = (days, months) => { focus.current = true; setCursor((c) => (months ? new Date(c.getFullYear(), c.getMonth() + months, Math.min(c.getDate(), 28)) : new Date(c.getFullYear(), c.getMonth(), c.getDate() + days))); };
+  function onKey(e) {
+    const m = { ArrowLeft: [-1], ArrowRight: [1], ArrowUp: [-7], ArrowDown: [7], Home: [-cursor.getDay()], End: [6 - cursor.getDay()], PageUp: [0, -1], PageDown: [0, 1] }[e.key];
+    if (m) { e.preventDefault(); move(m[0], m[1]); }
+  }
+  const titleId = `cal-${y}-${mo}`;
+  return (
+    <div className={cx("ui-calendar", className)}>
+      <div className="ui-calendar-head">
+        <button type="button" className="ui-btn ui-btn--sm ui-btn--icon ui-btn--ghost" aria-label="Previous month" onClick={() => setCursor(new Date(y, mo - 1, 1))}><Arrow d="m15 18-6-6 6-6" /></button>
+        <h3 className="ui-calendar-title" id={titleId} aria-live="polite">{`${MONTHS[mo]} ${y}`}</h3>
+        <button type="button" className="ui-btn ui-btn--sm ui-btn--icon ui-btn--ghost" aria-label="Next month" onClick={() => setCursor(new Date(y, mo + 1, 1))}><Arrow d="m9 18 6-6-6-6" /></button>
+      </div>
+      <table role="grid" aria-labelledby={titleId} aria-label={label} ref={grid} onKeyDown={onKey}>
+        <thead><tr>{DOW.map((d, i) => <th key={d} scope="col" abbr={DOW_LONG[i]}>{d}</th>)}</tr></thead>
+        <tbody>
+          {Array.from({ length: 6 }, (_, w) => (
+            <tr key={w}>
+              {Array.from({ length: 7 }, (_, d) => {
+                const day = new Date(start.getFullYear(), start.getMonth(), start.getDate() + w * 7 + d), s = toIso(day), ev = events.includes(s);
+                return (
+                  <td key={s} role="gridcell">
+                    <button
+                      type="button" className="ui-day" tabIndex={s === toIso(cursor) ? 0 : -1}
+                      aria-label={`${DOW_LONG[day.getDay()]}, ${MONTHS[day.getMonth()]} ${day.getDate()}${ev ? ", has events" : ""}`}
+                      aria-current={s === toIso(today) ? "date" : undefined} aria-selected={s === value}
+                      data-outside={day.getMonth() !== mo ? "" : undefined} data-event={ev ? "" : undefined}
+                      onClick={() => { setCursor(day); onChange?.(s); }}
+                    >{day.getDate()}</button>
+                  </td>
+                );
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/tether/latest/react/CardHeader.jsx

@@ -0,0 +1,14 @@
+import { cx } from "./cx.js";
+
+/** <CardHeader title="Ticket sales" badge={<Badge>Live</Badge>} description="Updated every minute." actions={<Button size="sm">Export</Button>} /> */
+export function CardHeader({ title, badge, description, actions, as: H = "h3", className }) {
+  return (
+    <div className={cx("ui-cardhead", className)}>
+      <div className="ui-cardhead-text">
+        <H className="ui-cardhead-title">{title}{badge}</H>
+        {description ? <p className="ui-cardhead-desc">{description}</p> : null}
+      </div>
+      {actions ? <div className="ui-cardhead-actions">{actions}</div> : null}
+    </div>
+  );
+}

package/tether/latest/react/Chart.jsx

@@ -0,0 +1,42 @@
+import { createElement, useEffect, useRef, useState } from "react";
+import { chartNodes, toReact, animate, motionLevel, showTip, hideTip } from "../charts-core.mjs";
+import { cx } from "./cx.js";
+
+/**
+ * The kit's charts in React: the same geometry as charts.js (charts-core.mjs), so both draw the same chart.
+ * <Chart type="bar" label="Monthly expenses" labels={["Jan", "Feb"]} values={[4200, 7100]} prefix="$" />
+ * <Chart type="bar" stacked label="File transfer" labels={months} series={[{ name: "Desktop", values }, { name: "Mobile", values }]} />
+ * <Chart type="donut" label="Leads by source" center="Leads" labels={sources} values={counts} />
+ * <Chart type="ring" label="Target reached" value={48} center="of target" />
+ * type: bar | line | area | donut | pie | spark | ring | meter.  horizontal, stacked (bar); bars (spark); max (ring, meter);
+ * prefix, suffix, decimals; tone good | warn | neg for one series that means good or bad.
+ * animate={false} when Motion (or anything else) plays it in instead.
+ * Draws at its real width, plays in once when it scrolls into view (as far as the motion level allows), and keeps a
+ * data table for screen readers.
+ */
+export function Chart({ type, label = "Chart", labels = [], values, series, stacked = false, horizontal = false, bars = false, value, max,
+  prefix = "", suffix = "", decimals = 0, tone = "", center = "", height, animate: play = true, className }) {
+  const ref = useRef(null);
+  const [width, setWidth] = useState(600);
+  const spec = { type, label, labels, series: series || (values ? [{ name: label, values }] : []), stacked, horizontal, bars, tone, center,
+    prefix, suffix, decimals, value, max: max ?? (type === "ring" ? 100 : undefined) };
+  useEffect(() => {
+    const fig = ref.current; if (!fig || typeof ResizeObserver !== "function") return undefined;
+    const ro = new ResizeObserver(([e]) => { const w = Math.round(e.contentRect.width); setWidth(prev => Math.abs(w - prev) > 8 ? w : prev); });
+    ro.observe(fig);
+    return () => ro.disconnect();
+  }, []);
+  useEffect(() => {
+    const fig = ref.current; if (!play || !fig || typeof IntersectionObserver !== "function") return undefined;
+    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { io.disconnect(); animate(fig, motionLevel()); } }, { threshold: 0.25 });
+    io.observe(fig);
+    return () => io.disconnect();
+  }, []);
+  const h = height ?? (type === "spark" ? 40 : 220);
+  return (
+    <figure ref={ref} className={cx("ui-viz", `ui-viz--${type}`, horizontal && "ui-viz--horizontal", className)} aria-label={label}
+      onPointerMove={e => showTip(ref.current, spec, e)} onPointerLeave={() => hideTip(ref.current)}>
+      {toReact(chartNodes(spec, width, h), createElement)}
+    </figure>
+  );
+}

package/tether/latest/react/Chat.jsx

@@ -0,0 +1,34 @@
+import { useEffect, useRef, useState } from "react";
+import { cx } from "./cx.js";
+
+const SEND = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m22 2-7 20-4-9-9-4z" /><path d="M22 2 11 13" /></svg>;
+const initials = (n) => n.split(" ").map((w) => w[0]).join("").slice(0, 2);
+
+/**
+ * <Chat label="Production chat" messages={[{ id: 1, from: "Grace Lee", text: "Doors at noon?", time: "9:41" }, { id: 2, mine: true, text: "Yes.", time: "9:42" }]} onSend={send} />
+ * Messages read out as they arrive (role="log"). Enter sends, Shift+Enter adds a line.
+ */
+export function Chat({ label, messages, onSend, placeholder = "Write a message", className }) {
+  const [text, setText] = useState("");
+  const log = useRef(null);
+  useEffect(() => { if (log.current) log.current.scrollTop = log.current.scrollHeight; }, [messages.length]);
+  const send = () => { const t = text.trim(); if (!t) return; onSend?.(t); setText(""); };
+  return (
+    <section className={cx("ui-chat", className)} aria-label={label}>
+      <ol className="ui-chat-log" role="log" aria-live="polite" ref={log}>
+        {messages.map((m) => (
+          <li key={m.id} className={cx("ui-msg", m.mine && "ui-msg--out")}>
+            {!m.mine ? <span className="ui-avatar ui-avatar--sm" role="img" aria-label={m.from}><span aria-hidden="true">{initials(m.from)}</span></span> : null}
+            <div className="ui-msg-bubble">{m.text}</div>
+            <span className="ui-msg-meta">{m.mine ? "You" : m.from} · {m.time}</span>
+          </li>
+        ))}
+      </ol>
+      <div className="ui-chat-compose">
+        <textarea className="ui-input" rows={1} aria-label="Message" placeholder={placeholder} value={text} onChange={(e) => setText(e.target.value)}
+          onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) { e.preventDefault(); send(); } }} />
+        <button type="button" className="ui-btn ui-btn--primary ui-btn--icon" aria-label="Send" onClick={send}>{SEND}</button>
+      </div>
+    </section>
+  );
+}