@bkstg/design-systems 1.0.0 → 1.0.1

package/tether/v1/react/Marketing.jsx

@@ -0,0 +1,161 @@
+import { useId, useState } from "react";
+import { cx } from "./cx.js";
+
+// Marketing sections. Each lays itself out by its own width (container queries in components.css), so it works in a
+// column as well as a full page. Content is yours: these take text, links and children, never images they invent.
+
+/** <Section alt eyebrow="Lineup" title="Three stages, one weekend" lead="…" center>{children}</Section> */
+export function Section({ eyebrow, title, lead, center = false, alt = false, as: H = "h2", children, className, ...rest }) {
+  return (
+    <section className={cx("ui-section", alt && "ui-section--alt", className)} {...rest}>
+      <div className="ui-section-inner">
+        {title ? (
+          <div className={cx("ui-section-head", center && "ui-section-head--center")}>
+            {eyebrow ? <span className="ui-eyebrow">{eyebrow}</span> : null}
+            <H className="ui-section-title">{title}</H>
+            {lead ? <p className="ui-section-lead">{lead}</p> : null}
+          </div>
+        ) : null}
+        {children}
+      </div>
+    </section>
+  );
+}
+
+/** <Media label="Crowd at the main stage" square />  an image's place until a real one goes in (role="img") */
+export function Media({ label, square = false, className }) {
+  return <div className={cx("ui-media", square && "ui-media--square", className)} role="img" aria-label={label}><span aria-hidden="true">Image</span></div>;
+}
+
+/** <SiteNav brand="BKSTG" links={[{ href: "/", label: "Lineup", current: true }]} actions={<Button variant="primary">Tickets</Button>} /> */
+export function SiteNav({ brand, brandMark, links, actions, label = "Main", className }) {
+  const [open, setOpen] = useState(false);
+  const id = useId();
+  return (
+    <header className={cx("ui-sitenav", className)}>
+      <div className="ui-sitenav-bar">
+        <a className="ui-sitenav-brand" href="/">{brandMark}{brand}</a>
+        <nav aria-label={label}><ul className="ui-sitenav-links">{links.map((l) => <li key={l.href}><a href={l.href} aria-current={l.current ? "page" : undefined}>{l.label}</a></li>)}</ul></nav>
+        <div className="ui-sitenav-actions">{actions}</div>
+        <button type="button" className="ui-btn ui-btn--icon ui-btn--ghost ui-sitenav-toggle" aria-expanded={open} aria-controls={id} aria-label={open ? "Close menu" : "Open menu"} onClick={() => setOpen((o) => !o)}>
+          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">{open ? <path d="M18 6 6 18M6 6l12 12" /> : <path d="M4 6h16M4 12h16M4 18h16" />}</svg>
+        </button>
+      </div>
+      <nav className="ui-sitenav-panel" id={id} aria-label={`${label}, menu`} hidden={!open}>
+        {links.map((l) => <a key={l.href} href={l.href} aria-current={l.current ? "page" : undefined}>{l.label}</a>)}
+        {actions}
+      </nav>
+    </header>
+  );
+}
+
+/** <Hero eyebrow="April 17–19" title="Spring 2026" lead="…" actions={<Button variant="primary">Get tickets</Button>} media={<Media label="…" />} /> */
+export function Hero({ eyebrow, title, lead, actions, media, center = false, className }) {
+  return (
+    <div className={cx("ui-hero", center ? "ui-hero--center" : media && "ui-hero--split", className)}>
+      <div className="ui-hero-text">
+        {eyebrow ? <span className="ui-eyebrow">{eyebrow}</span> : null}
+        <h1 className="ui-hero-title">{title}</h1>
+        {lead ? <p className="ui-hero-lead">{lead}</p> : null}
+        {actions ? <div className="ui-hero-actions">{actions}</div> : null}
+      </div>
+      {media}
+    </div>
+  );
+}
+
+/** <FeatureCard icon={<MusicIcon />} title="Live set times" text="…" /> */
+export function FeatureCard({ icon, title, text, children, className }) {
+  return <div className={cx("ui-mk-card", className)}>{icon ? <span className="ui-feature-icon" aria-hidden="true">{icon}</span> : null}<h3>{title}</h3>{text ? <p>{text}</p> : null}{children}</div>;
+}
+
+/** <Stats items={[{ value: "42K", label: "Fans", note: "Across three days" }]} /> */
+export function Stats({ items, className }) {
+  return <dl className={cx("ui-stats", className)}>{items.map((s) => <div key={s.label} className="ui-stat"><dt className="ui-stat-label">{s.label}</dt><dd className="ui-stat-value" style={{ margin: 0, order: -1 }}>{s.value}</dd>{s.note ? <dd className="ui-stat-note" style={{ margin: 0 }}>{s.note}</dd> : null}</div>)}</dl>;
+}
+
+/** <LogoCloud caption="Trusted by" logos={[<img … />, …]} /> */
+export function LogoCloud({ caption, logos, className }) {
+  return <div className={cx("ui-logocloud", className)}>{caption ? <p>{caption}</p> : null}<ul>{logos.map((l, i) => <li key={i}>{l}</li>)}</ul></div>;
+}
+
+/** <Testimonial quote="…" name="Grace Lee" role="Head of Production" avatar={<Avatar name="Grace Lee" />} large /> */
+export function Testimonial({ quote, name, role, avatar, large = false, className }) {
+  return <figure className={cx("ui-quote", large && "ui-quote--large", className)}><blockquote><p style={{ margin: 0 }}>{quote}</p></blockquote><figcaption>{avatar}<span><strong>{name}</strong>{role}</span></figcaption></figure>;
+}
+
+/** <TeamMember name="Ana Ruiz" role="Front of house" bio="…" media={<Media label="Ana Ruiz" square />} /> */
+export function TeamMember({ name, role, bio, media, className }) {
+  return <div className={cx("ui-person", className)}>{media}<h3>{name}</h3><p className="ui-person-role">{role}</p>{bio ? <p>{bio}</p> : null}</div>;
+}
+
+/** <PostCard href="/blog/x" title="…" excerpt="…" meta={<><Badge>News</Badge> · 4 min read</>} media={<Media label="…" />} /> */
+export function PostCard({ href, title, excerpt, meta, media, className }) {
+  return <a className={cx("ui-post", className)} href={href}>{media}<span className="ui-post-meta">{meta}</span><h3>{title}</h3>{excerpt ? <p>{excerpt}</p> : null}</a>;
+}
+
+/** <JobList jobs={[{ href: "/jobs/1", title: "Stage manager", team: "Production", tags: ["Seasonal", "San Diego"] }]} /> */
+export function JobList({ jobs, className }) {
+  return <ul className={cx("ui-jobs", className)}>{jobs.map((j) => <li key={j.href} className="ui-job"><div className="ui-job-title"><a href={j.href}>{j.title}</a><span>{j.team}</span></div><div className="ui-job-tags">{(j.tags || []).map((t) => <span key={t} className="ui-badge ui-badge--outline">{t}</span>)}</div></li>)}</ul>;
+}
+
+/** <FAQ items={[{ q: "Can I re-enter?", a: "Until 6 PM." }]} />  native <details>: no script needed */
+export function FAQ({ items, className }) {
+  return <div className={cx("ui-faq", className)}>{items.map((it, i) => <details key={i} open={it.open}><summary>{it.q}</summary><div>{it.a}</div></details>)}</div>;
+}
+
+/** <Plan name="VIP" price="$389" per="2 days" text="…" features={["…"]} featured badge="Most popular" action={<Button variant="primary">Choose VIP</Button>} /> */
+export function Plan({ name, badge, price, per, text, features, action, featured = false, className }) {
+  return (
+    <div className={cx("ui-plan", featured && "ui-plan--featured", className)}>
+      <h3>{name}{badge ? <span className="ui-badge ui-badge--brand">{badge}</span> : null}</h3>
+      <p className="ui-plan-price"><strong>{price}</strong>{per ? <span>{per}</span> : null}</p>
+      {text ? <p>{text}</p> : <p />}
+      <ul aria-label={`${name} includes`}>{features.map((f) => <li key={f}>{f}</li>)}</ul>
+      {action}
+    </div>
+  );
+}
+
+/** <CTABand title="See you in April" text="…" actions={<><Button>Lineup</Button><Button variant="primary">Get tickets</Button></>} /> */
+export function CTABand({ title, text, actions, className }) {
+  return <section className={cx("ui-cta-band", className)}><h2>{title}</h2>{text ? <p>{text}</p> : null}{actions ? <div className="ui-hero-actions">{actions}</div> : null}</section>;
+}
+
+/**
+ * <Newsletter title="Lineup news, first" text="…" onSubscribe={(email) => …} />
+ * A real form: the email field is required and typed, and the result is announced.
+ */
+export function Newsletter({ title, text, onSubscribe, note = "One email a month. Unsubscribe anytime.", className }) {
+  const id = useId();
+  const [done, setDone] = useState("");
+  return (
+    <div className={cx("ui-newsletter", className)}>
+      <div className="ui-section-head"><h2 className="ui-section-title">{title}</h2>{text ? <p className="ui-section-lead">{text}</p> : null}</div>
+      <form onSubmit={(e) => { e.preventDefault(); const v = new FormData(e.currentTarget).get("email"); onSubscribe?.(v); setDone(`Thanks. Check ${v} to confirm.`); e.currentTarget.reset(); }}>
+        <div className="ui-newsletter-row"><label className="ui-sr-only" htmlFor={id}>Email</label><input className="ui-input" id={id} name="email" type="email" required autoComplete="email" placeholder="you@example.com" /><button type="submit" className="ui-btn ui-btn--primary">Subscribe</button></div>
+        <small role="status">{done || note}</small>
+      </form>
+    </div>
+  );
+}
+
+/** <Prose>{article}</Prose>  long-form text: headings, lists, quotes and figures in a readable measure */
+export function Prose({ children, className }) {
+  return <div className={cx("ui-prose", className)}>{children}</div>;
+}
+
+/** <Footer brand="BKSTG" blurb="…" columns={[{ title: "Festival", links: [{ href: "/lineup", label: "Lineup" }] }]} legal="© 2026 …" /> */
+export function Footer({ brand, blurb, columns, legal, bottom, className }) {
+  return (
+    <footer className={cx("ui-footer", className)}>
+      <div className="ui-footer-inner">
+        <div className="ui-footer-top">
+          <div className="ui-footer-brand"><strong>{brand}</strong>{blurb ? <p>{blurb}</p> : null}</div>
+          {columns.map((c) => <nav key={c.title} aria-label={c.title}><h2>{c.title}</h2><ul>{c.links.map((l) => <li key={l.href}><a href={l.href}>{l.label}</a></li>)}</ul></nav>)}
+        </div>
+        <div className="ui-footer-bottom"><small>{legal}</small>{bottom}</div>
+      </div>
+    </footer>
+  );
+}

package/tether/v1/react/Menu.jsx

@@ -0,0 +1,76 @@
+import { useEffect, useId, useRef, useState } from "react";
+import { cx } from "./cx.js";
+
+const CHEVRON = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>;
+
+/**
+ * <Menu label="Options" items={[
+ *   { label: "Edit", icon: <PencilIcon />, hint: "⌘E", onSelect: edit },
+ *   { separator: true },
+ *   { label: "Delete", danger: true, onSelect: remove } ]} />
+ * The menu button pattern: Enter, Space or ArrowDown opens on the first item, ArrowUp on the last; arrows,
+ * Home and End move; a letter jumps; Escape closes and focus returns to the button. A { heading } item labels a section.
+ */
+export function Menu({ label, items, align, buttonClassName, className }) {
+  const id = useId();
+  const [open, setOpen] = useState(false);
+  const [flip, setFlip] = useState(false);
+  const btn = useRef(null), menu = useRef(null), start = useRef("first");
+  const enabled = () => [...(menu.current?.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])') || [])];
+
+  useEffect(() => {
+    if (!open) return;
+    const list = enabled();
+    (start.current === "last" ? list[list.length - 1] : list[0])?.focus();
+    setFlip(align === "end" || (menu.current && menu.current.getBoundingClientRect().right > window.innerWidth - 8));
+    const outside = (e) => { if (!menu.current?.contains(e.target) && !btn.current?.contains(e.target)) setOpen(false); };
+    document.addEventListener("mousedown", outside);
+    return () => document.removeEventListener("mousedown", outside);
+  }, [open]);
+
+  function close(back) { setOpen(false); if (back) btn.current?.focus(); }
+  function onButtonKey(e) {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") { e.preventDefault(); start.current = e.key === "ArrowUp" ? "last" : "first"; setOpen(true); }
+  }
+  function onMenuKey(e) {
+    const list = enabled(), i = list.indexOf(document.activeElement);
+    let next = null;
+    if (e.key === "ArrowDown") next = list[(i + 1) % list.length];
+    else if (e.key === "ArrowUp") next = list[(i - 1 + list.length) % list.length];
+    else if (e.key === "Home") next = list[0];
+    else if (e.key === "End") next = list[list.length - 1];
+    else if (e.key === "Escape") { e.preventDefault(); return close(true); }
+    else if (e.key === "Tab") return close(false);
+    else if (e.key.length === 1 && /\S/.test(e.key)) {
+      const order = [...list.slice(i + 1), ...list.slice(0, i + 1)];
+      next = order.find((x) => x.textContent.trim().toLowerCase().startsWith(e.key.toLowerCase())) || null;
+    }
+    if (next) { e.preventDefault(); next.focus(); }
+  }
+
+  return (
+    <span className={cx("ui-menu-wrap", className)} data-align={flip ? "end" : undefined}>
+      <button
+        ref={btn} type="button" className={cx("ui-btn ui-menu-trigger", buttonClassName)}
+        aria-haspopup="menu" aria-expanded={open} aria-controls={id}
+        onClick={() => { start.current = "first"; setOpen((o) => !o); }} onKeyDown={onButtonKey}
+      >
+        {label}{CHEVRON}
+      </button>
+      <div ref={menu} id={id} className="ui-menu" role="menu" aria-label={typeof label === "string" ? label : undefined} hidden={!open} onKeyDown={onMenuKey}>
+        {items.map((it, i) => it.separator ? <div key={i} className="ui-menu-sep" role="separator" />
+          : it.heading ? <div key={i} className="ui-menu-label" role="presentation">{it.heading}</div>
+          : (
+            <button
+              key={i} type="button" role="menuitem" tabIndex={-1}
+              className={cx("ui-menu-item", it.danger && "ui-menu-item--danger")}
+              aria-disabled={it.disabled || undefined}
+              onClick={() => { if (it.disabled) return; it.onSelect?.(); close(true); }}
+            >
+              {it.icon}{it.label}{it.hint ? <span className="ui-menu-hint" aria-hidden="true">{it.hint}</span> : null}
+            </button>
+          ))}
+      </div>
+    </span>
+  );
+}

package/tether/v1/react/Metric.jsx

@@ -0,0 +1,28 @@
+import { cx } from "./cx.js";
+
+/**
+ * <Metric label="Tickets sold" value="18,880" change="+7.4%" />   change starting with "-" reads as down.
+ * <Metric label="Refund requests" value="12" change="-2.0%" goodWhen="down" />   for numbers where less is better.
+ * The arrow is decoration; the change is spoken as "up 7.4%, better" or "down 2%, better"; its color says good or bad.
+ */
+export function Metric({ label, value, change, goodWhen = "up", className }) {
+  const down = typeof change === "string" && change.trim().startsWith("-");
+  const good = down === (goodWhen === "down");
+  const amount = change ? change.replace(/^[+-]/, "") : "";
+  return (
+    <div className={cx("ui-metric", className)}>
+      <span className="ui-metric-label">{label}</span>
+      <span className="ui-metric-row">
+        <span className="ui-metric-value">{value}</span>
+        {change ? (
+          <span className={cx("ui-metric-delta", down && "ui-metric-delta--down", good ? "ui-metric-delta--good" : "ui-metric-delta--bad")}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              {down ? <path d="M7 7l10 10M17 7v10H7" /> : <path d="M7 17 17 7M7 7h10v10" />}
+            </svg>
+            <span className="ui-sr-only">{down ? "down" : "up"} </span>{amount}<span className="ui-sr-only">, {good ? "better" : "worse"}</span>
+          </span>
+        ) : null}
+      </span>
+    </div>
+  );
+}

package/tether/v1/react/PageHeader.jsx

@@ -0,0 +1,22 @@
+import { cx } from "./cx.js";
+
+/**
+ * <PageHeader breadcrumbs={<Breadcrumbs items={...} />} title="Spring 2026" description="Three stages, two days."
+ *   actions={<><Button>Share</Button><Button variant="primary">Publish</Button></>} tabs={<Tabs ... />} />
+ * The page's one h1.
+ */
+export function PageHeader({ breadcrumbs, title, description, actions, tabs, className }) {
+  return (
+    <header className={cx("ui-pagehead", className)}>
+      {breadcrumbs}
+      <div className="ui-pagehead-row">
+        <div className="ui-pagehead-text">
+          <h1 className="ui-pagehead-title">{title}</h1>
+          {description ? <p className="ui-pagehead-desc">{description}</p> : null}
+        </div>
+        {actions ? <div className="ui-pagehead-actions">{actions}</div> : null}
+      </div>
+      {tabs}
+    </header>
+  );
+}

package/tether/v1/react/Pagination.jsx

@@ -0,0 +1,32 @@
+import { cx } from "./cx.js";
+
+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>;
+
+/** The page numbers to show: always the first and last, the current one and its neighbors, gaps as null */
+export function pageList(page, count) {
+  const want = new Set([1, count, page - 1, page, page + 1].filter((n) => n >= 1 && n <= count));
+  const out = [];
+  [...want].sort((a, b) => a - b).forEach((n, i, all) => { if (i && n - all[i - 1] > 1) out.push(null); out.push(n); });
+  return out;
+}
+
+/**
+ * <Pagination page={page} count={12} onChange={setPage} />
+ * Previous and Next, then the numbers; in a narrow container the numbers give way to "Page 2 of 12".
+ */
+export function Pagination({ page, count, onChange, label = "Pagination", className }) {
+  const go = (n) => () => onChange?.(n);
+  return (
+    <nav className={cx("ui-pagination", className)} aria-label={label}>
+      <button type="button" className="ui-btn ui-btn--sm" onClick={go(page - 1)} disabled={page <= 1}>{ARROW("m15 18-6-6 6-6")}Previous</button>
+      <ul className="ui-pagination-pages">
+        {pageList(page, count).map((n, i) => (
+          <li key={i}>{n === null ? <span className="ui-page-gap" aria-hidden="true">…</span>
+            : <button type="button" className="ui-page" aria-current={n === page ? "page" : undefined} aria-label={`Page ${n}`} onClick={go(n)}>{n}</button>}</li>
+        ))}
+      </ul>
+      <span className="ui-pagination-info" aria-live="polite">{`Page ${page} of ${count}`}</span>
+      <button type="button" className="ui-btn ui-btn--sm" onClick={go(page + 1)} disabled={page >= count}>Next{ARROW("m9 18 6-6-6-6")}</button>
+    </nav>
+  );
+}

package/tether/v1/react/Progress.jsx

@@ -0,0 +1,26 @@
+import { cx } from "./cx.js";
+
+/**
+ * <Progress value={62} label="Uploading" />   0 to 100
+ * <Progress label="Loading" />                 no value: indeterminate
+ * label is required: it is the progress bar's accessible name.
+ */
+export function Progress({ value, label, showValue = true, className }) {
+  const known = typeof value === "number";
+  const v = known ? Math.max(0, Math.min(100, value)) : undefined;
+  return (
+    <div className={className}>
+      {showValue ? <div className="ui-progress-label"><span>{label}</span>{known ? <span>{Math.round(v)}%</span> : null}</div> : null}
+      <div
+        className={cx("ui-progress", !known && "ui-progress--indeterminate")}
+        role="progressbar"
+        aria-label={label}
+        aria-valuemin={known ? 0 : undefined}
+        aria-valuemax={known ? 100 : undefined}
+        aria-valuenow={known ? Math.round(v) : undefined}
+      >
+        <div className="ui-progress-bar" style={known ? { "--value": `${v}%` } : undefined} />
+      </div>
+    </div>
+  );
+}

package/tether/v1/react/RadioGroup.jsx

@@ -0,0 +1,27 @@
+import { useId } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <RadioGroup legend="Ticket type" value={type} onChange={setType} options={[
+ *   { value: "ga", label: "General admission", hint: "Both days" }, { value: "vip", label: "VIP" } ]} />
+ * Native radios in a fieldset: the arrow keys move the choice, Tab leaves the group.
+ */
+export function RadioGroup({ legend, name, value, defaultValue, onChange, options, className }) {
+  const auto = useId();
+  const group = name || auto;
+  return (
+    <fieldset className={cx("ui-choices", className)}>
+      {legend ? <legend className="ui-label">{legend}</legend> : null}
+      {options.map((o) => (
+        <label key={o.value} className="ui-check-row">
+          <input
+            type="radio" className="ui-radio" name={group} value={o.value} disabled={o.disabled}
+            {...(value !== undefined ? { checked: value === o.value } : { defaultChecked: defaultValue === o.value })}
+            onChange={(e) => onChange?.(e.target.value, e)}
+          />
+          {o.hint ? <span className="ui-check-text">{o.label}<small>{o.hint}</small></span> : o.label}
+        </label>
+      ))}
+    </fieldset>
+  );
+}

package/tether/v1/react/Reveal.jsx

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * <Reveal effect="fade-up" stagger={60}>…</Reveal>  the kit's own engine (motion.js, no library) from React.
+ * Load motion.js once in the app. Props mirror the no-code attributes: effect, trigger ("scroll" | "load" | "hover"),
+ * duration, delay, ease, distance, stagger, split ("words" | "chars" | "lines"), repeat. It follows the visitor's
+ * reduce-motion setting and the system's Motion level. For app-style animation (layout, gestures, exit), use Motion.
+ */
+export function Reveal({ as: As = "div", effect = "fade-up", trigger, duration, delay, ease, distance, stagger, split, repeat, children, ...rest }) {
+  const ref = useRef(null);
+  useEffect(() => { if (ref.current && window.UIMotion) window.UIMotion.init(ref.current.parentElement || document); }, []);
+  return (
+    <As ref={ref} data-reveal={effect} data-reveal-trigger={trigger} data-reveal-duration={duration} data-reveal-delay={delay}
+      data-reveal-ease={ease} data-reveal-distance={distance} data-reveal-stagger={stagger} data-reveal-split={split}
+      data-reveal-repeat={repeat ? "" : undefined} {...rest}>{children}</As>
+  );
+}

package/tether/v1/react/SectionHeader.jsx

@@ -0,0 +1,24 @@
+import { cx } from "./cx.js";
+
+/** <SectionHeader title="Team" description="Who can see and change this event." actions={<Button size="sm">Invite</Button>} /> */
+export function SectionHeader({ title, description, actions, as: H = "h2", className }) {
+  return (
+    <div className={cx("ui-sectionhead", className)}>
+      <div className="ui-sectionhead-text">
+        <H className="ui-sectionhead-title">{title}</H>
+        {description ? <p className="ui-sectionhead-desc">{description}</p> : null}
+      </div>
+      {actions ? <div className="ui-sectionhead-actions">{actions}</div> : null}
+    </div>
+  );
+}
+
+/** <SectionFooter note="Last saved 2 minutes ago" actions={<><Button>Cancel</Button><Button variant="primary">Save</Button></>} /> */
+export function SectionFooter({ note, actions, className }) {
+  return (
+    <div className={cx("ui-sectionfoot", className)}>
+      {note ? <p className="ui-sectionfoot-note">{note}</p> : null}
+      {actions ? <div className="ui-sectionfoot-actions">{actions}</div> : null}
+    </div>
+  );
+}

package/tether/v1/react/Select.jsx

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <Select value={v} onChange={...} options={[{ value: "a", label: "A" }]} />
+ * A native <select>: the phone's own picker, full keyboard support, works in forms.
+ */
+export const Select = forwardRef(function Select({ options = [], className, children, ...rest }, ref) {
+  return (
+    <span className={cx("ui-select", className)}>
+      <select ref={ref} className="ui-input" {...rest}>
+        {options.map((o) => (
+          <option key={o.value} value={o.value} disabled={o.disabled}>{o.label}</option>
+        ))}
+        {children}
+      </select>
+    </span>
+  );
+});

package/tether/v1/react/Sheet.jsx

@@ -0,0 +1,25 @@
+import { useEffect, useId, useRef } from "react";
+import { cx } from "./cx.js";
+
+const X = <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>;
+
+/**
+ * <Sheet open={open} onClose={() => setOpen(false)} title="Set details" footer={<Button onClick={save}>Save</Button>}>…</Sheet>
+ * A slide-out panel on the right: a modal dialog, so focus stays inside; Escape and the backdrop close it.
+ */
+export function Sheet({ open, onClose, title, children, footer, className }) {
+  const ref = useRef(null), id = useId();
+  useEffect(() => {
+    const d = ref.current; if (!d) return;
+    if (open && !d.open) d.showModal();
+    if (!open && d.open) d.close();
+  }, [open]);
+  return (
+    <dialog ref={ref} className={cx("ui-sheet", className)} aria-labelledby={`${id}-t`} onClose={onClose} onClick={(e) => { if (e.target === ref.current) onClose?.(); }}>
+      <div className="ui-sheet-head"><h2 className="ui-sheet-title" id={`${id}-t`}>{title}</h2>
+        <button type="button" className="ui-dialog-close" aria-label="Close" onClick={onClose}>{X}</button></div>
+      <div className="ui-sheet-body">{children}</div>
+      {footer ? <div className="ui-sheet-foot">{footer}</div> : null}
+    </dialog>
+  );
+}

package/tether/v1/react/SideNav.jsx

@@ -0,0 +1,37 @@
+import { cx } from "./cx.js";
+
+/**
+ * <SideNav label="Main" brand={<Logo />} items={[{ href: "/", label: "Overview", icon: <HomeIcon />, current: true, count: 8 }]}
+ *          footer={[...]} user={{ name: "Sean Marshall", email: "…" }} />
+ * The current page gets aria-current="page". Icons are decoration (aria-hidden); the label names the link.
+ */
+export function SideNav({ label = "Main", brand, items = [], footer = [], user, children, className }) {
+  const list = (links) => (
+    <ul className="ui-sidenav-list">
+      {links.map((it) => (
+        <li key={it.href + it.label}>
+          <a className="ui-sidenav-link" href={it.href} aria-current={it.current ? "page" : undefined}>
+            {it.icon ? <span aria-hidden="true">{it.icon}</span> : null}
+            {it.label}
+            {it.count != null ? <span className="ui-badge">{it.count}</span> : null}
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+  return (
+    <nav className={cx("ui-sidenav", className)} aria-label={label}>
+      {brand ? <div className="ui-sidenav-brand">{brand}</div> : null}
+      {list(items)}
+      <div className="ui-sidenav-spacer" />
+      {footer.length ? list(footer) : null}
+      {children}
+      {user ? (
+        <div className="ui-sidenav-user">
+          <span className="ui-avatar ui-avatar--sm" aria-hidden="true">{user.name.split(" ").map((w) => w[0]).join("").slice(0, 2)}</span>
+          <span><strong>{user.name}</strong>{user.email ? <small>{user.email}</small> : null}</span>
+        </div>
+      ) : null}
+    </nav>
+  );
+}

package/tether/v1/react/Skeleton.jsx

@@ -0,0 +1,16 @@
+import { cx } from "./cx.js";
+
+/**
+ * <Skeleton width="60%" height="1rem" />  <Skeleton circle width={40} height={40} />
+ * A placeholder while content loads. Hidden from screen readers: announce loading elsewhere (a Spinner,
+ * or aria-busy on the region). Carries .ambient so the Calm motion level stops the shimmer.
+ */
+export function Skeleton({ width, height, circle = false, className, style }) {
+  return (
+    <span
+      className={cx("ui-skeleton", circle && "ui-skeleton--circle", "ambient", className)}
+      aria-hidden="true"
+      style={{ width, height, ...style }}
+    />
+  );
+}

package/tether/v1/react/Slider.jsx

@@ -0,0 +1,27 @@
+import { useId, useState } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <Slider label="Capacity" min={0} max={5000} step={100} value={cap} onChange={setCap} format={(v) => `${v} people`} />
+ * A native range input: arrow keys, Page Up/Down, Home and End all work. The value is shown beside the label
+ * and spoken through aria-valuetext when format is given.
+ */
+export function Slider({ label, min = 0, max = 100, step = 1, value, defaultValue, onChange, format, scale, className, ...rest }) {
+  const id = useId();
+  const [own, setOwn] = useState(defaultValue ?? min);
+  const v = value ?? own;
+  const pct = ((v - min) / (max - min || 1)) * 100;
+  const text = format ? format(v) : Number(v).toLocaleString();
+  return (
+    <div className={className}>
+      {label ? <div className="ui-slider-head"><label className="ui-label" htmlFor={id}>{label}</label><output htmlFor={id}>{text}</output></div> : null}
+      <input
+        id={id} type="range" className="ui-slider" min={min} max={max} step={step} value={v}
+        aria-valuetext={format ? text : undefined} style={{ "--value": `${pct}%` }}
+        onChange={(e) => { const n = Number(e.target.value); setOwn(n); onChange?.(n, e); }}
+        {...rest}
+      />
+      {scale ? <div className="ui-slider-scale" aria-hidden="true">{scale.map((s) => <span key={s}>{s}</span>)}</div> : null}
+    </div>
+  );
+}

package/tether/v1/react/Spinner.jsx

@@ -0,0 +1,14 @@
+import { cx } from "./cx.js";
+
+/**
+ * <Spinner label="Loading results" size="sm" />
+ * role="status" so a screen reader announces the label; the ring itself is decoration.
+ */
+export function Spinner({ label = "Loading", size = "md", className }) {
+  return (
+    <span role="status" className={className}>
+      <span className={cx("ui-spinner", size !== "md" && `ui-spinner--${size}`)} aria-hidden="true" />
+      <span className="ui-sr-only">{label}</span>
+    </span>
+  );
+}

package/tether/v1/react/Steps.jsx

@@ -0,0 +1,22 @@
+import { cx } from "./cx.js";
+
+/**
+ * <Steps current={1} steps={[{ label: "Details", desc: "Name and dates" }, { label: "Stages" }, { label: "Publish" }]} />
+ * Steps before current are complete, current is marked aria-current="step". vertical stacks them.
+ */
+export function Steps({ steps, current = 0, vertical = false, label = "Progress", className }) {
+  return (
+    <ol className={cx("ui-steps", vertical && "ui-steps--vertical", className)} aria-label={label}>
+      {steps.map((s, i) => {
+        const state = i < current ? "complete" : i === current ? "current" : "upcoming";
+        return (
+          <li key={i} className="ui-step" data-state={state} aria-current={state === "current" ? "step" : undefined}>
+            <span className="ui-step-marker" aria-hidden="true" />
+            <span className="ui-step-label">{s.label}{state === "complete" ? <span className="ui-sr-only"> (done)</span> : null}</span>
+            {s.desc ? <span className="ui-step-desc">{s.desc}</span> : null}
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

package/tether/v1/react/Switch.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <Switch checked={on} onChange={(e) => setOn(e.target.checked)}>Notifications</Switch>
+ * A real checkbox with role="switch": Space toggles it, forms submit it.
+ */
+export const Switch = forwardRef(function Switch({ children, className, ...rest }, ref) {
+  const input = <input ref={ref} type="checkbox" role="switch" className={cx("ui-switch", className)} {...rest} />;
+  return children ? <label className="ui-switch-row">{input}{children}</label> : input;
+});

package/tether/v1/react/Table.jsx

@@ -0,0 +1,24 @@
+import { cx } from "./cx.js";
+
+/**
+ * <Table caption="Upcoming set times" columns={[{ key: "artist", label: "Artist", strong: true }, { key: "time", label: "Time", numeric: true }]} rows={rows} />
+ * A real <table> with a caption and column headers, in a wrapper that scrolls sideways on narrow screens.
+ * A cell can be a string or a React node (a Badge, for example). rows need an id.
+ */
+export function Table({ caption, columns = [], rows = [], className }) {
+  return (
+    <div className={cx("ui-table-wrap", className)}>
+      <table className="ui-table">
+        {caption ? <caption>{caption}</caption> : null}
+        <thead><tr>{columns.map((c) => <th key={c.key} scope="col" className={c.numeric ? "ui-num" : undefined}>{c.label}</th>)}</tr></thead>
+        <tbody>
+          {rows.map((r) => (
+            <tr key={r.id}>
+              {columns.map((c) => <td key={c.key} className={cx(c.strong && "ui-table-strong", c.numeric && "ui-num") || undefined}>{r[c.key]}</td>)}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}