@bkstg/design-systems 1.0.0 → 1.0.1

package/tether/v1/react/Checkbox.jsx

@@ -0,0 +1,32 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <Checkbox checked={on} onChange={(e) => setOn(e.target.checked)} hint="We send one a week.">Newsletter</Checkbox>
+ * A real checkbox: Space toggles it, its label is clickable, forms submit it.
+ * indeterminate shows the mixed state, for a "select all" box when only some are checked.
+ */
+export const Checkbox = forwardRef(function Checkbox({ children, hint, indeterminate = false, className, ...rest }, ref) {
+  const inner = useRef(null);
+  useImperativeHandle(ref, () => inner.current);
+  // indeterminate is a property, never an attribute, so it is set on the element; the browser then reports "mixed"
+  useEffect(() => { if (inner.current) inner.current.indeterminate = indeterminate; }, [indeterminate]);
+  const input = <input ref={inner} type="checkbox" className={cx("ui-check", className)} {...rest} />;
+  if (!children) return input;
+  return (
+    <label className="ui-check-row">
+      {input}
+      {hint ? <span className="ui-check-text">{children}<small>{hint}</small></span> : children}
+    </label>
+  );
+});
+
+/** <Choices legend="Notify me about">…checkboxes or radios…</Choices>: a fieldset, so the group has a name */
+export function Choices({ legend, children, className, ...rest }) {
+  return (
+    <fieldset className={cx("ui-choices", className)} {...rest}>
+      {legend ? <legend className="ui-label">{legend}</legend> : null}
+      {children}
+    </fieldset>
+  );
+}

package/tether/v1/react/CodeSnippet.jsx

@@ -0,0 +1,17 @@
+import { useState } from "react";
+import { cx } from "./cx.js";
+
+/** <CodeSnippet language="html" code={'<link rel="stylesheet" href="bkstg.css">'} /> A copy button copies the code. */
+export function CodeSnippet({ code, language, className }) {
+  const [said, setSaid] = useState("Copy");
+  const copy = () => navigator.clipboard?.writeText(code).then(() => setSaid("Copied"), () => setSaid("Copy failed")).finally(() => setTimeout(() => setSaid("Copy"), 2000));
+  return (
+    <figure className={cx("ui-code", className)}>
+      <figcaption className="ui-code-head">
+        <span className="ui-code-lang">{language}</span>
+        <button type="button" className="ui-btn ui-btn--sm ui-btn--ghost" onClick={copy}><span>{said}</span></button>
+      </figcaption>
+      <pre><code>{code}</code></pre>
+    </figure>
+  );
+}

package/tether/v1/react/ColorPicker.jsx

@@ -0,0 +1,35 @@
+import { useId } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <ColorPicker label="Stage color" value={color} onChange={setColor} swatches={["#c6f135", "#4f46e5", "#db2777"]} />
+ * Swatches (a radio group: arrows move), the browser's own picker, and a hex field, all in step.
+ */
+export function ColorPicker({ label, value, onChange, swatches = [], className }) {
+  const id = useId();
+  const valid = /^#[0-9a-f]{6}$/i.test(value || "");
+  return (
+    <div className={cx("ui-colorpick", className)}>
+      <span className="ui-label" id={`${id}-l`}>{label}</span>
+      {swatches.length ? (
+        <div className="ui-swatches" role="radiogroup" aria-labelledby={`${id}-l`}
+          onKeyDown={(e) => {
+            const i = swatches.findIndex((s) => s.toLowerCase() === (value || "").toLowerCase());
+            const n = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 0;
+            if (n) { e.preventDefault(); const next = swatches[(i + n + swatches.length) % swatches.length]; onChange?.(next); e.currentTarget.querySelectorAll(".ui-swatch")[swatches.indexOf(next)]?.focus(); }
+          }}>
+          {swatches.map((s, i) => {
+            const on = s.toLowerCase() === (value || "").toLowerCase();
+            return <button key={s} type="button" role="radio" className="ui-swatch" style={{ background: s }} aria-label={s} aria-checked={on}
+              tabIndex={on || (!swatches.some((x) => x.toLowerCase() === (value || "").toLowerCase()) && i === 0) ? 0 : -1} onClick={() => onChange?.(s)} />;
+          })}
+        </div>
+      ) : null}
+      <div className="ui-colorpick-row">
+        <input type="color" aria-label={`${label}, picker`} value={valid ? value : "#000000"} onChange={(e) => onChange?.(e.target.value)} />
+        <input type="text" className="ui-input" aria-label={`${label}, hex`} defaultValue={value} key={value} maxLength={7} spellCheck={false}
+          aria-invalid={!valid || undefined} onChange={(e) => { const v = e.target.value.trim(); if (/^#?[0-9a-f]{6}$/i.test(v)) onChange?.(v[0] === "#" ? v : `#${v}`); }} />
+      </div>
+    </div>
+  );
+}

package/tether/v1/react/CommandMenu.jsx

@@ -0,0 +1,54 @@
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { cx } from "./cx.js";
+
+const SEARCH = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>;
+
+/**
+ * <CommandMenu open={open} onOpenChange={setOpen} groups={[{ label: "Go to", items: [{ id: "lineup", label: "Lineup", icon, hint: "G L", keywords: "artists", onRun }] }]} />
+ * A dialog with a search box over a list: type to filter, arrows to move, Enter to run. ⌘K or Ctrl+K opens it.
+ */
+export function CommandMenu({ open, onOpenChange, groups, placeholder = "Type a command or search…", className }) {
+  const id = useId(), dlg = useRef(null), input = useRef(null);
+  const [q, setQ] = useState(""), [active, setActive] = useState(0);
+  useEffect(() => {
+    const key = (e) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); onOpenChange?.(!open); } };
+    document.addEventListener("keydown", key);
+    return () => document.removeEventListener("keydown", key);
+  }, [open, onOpenChange]);
+  useEffect(() => {
+    const d = dlg.current; if (!d) return;
+    if (open && !d.open) { setQ(""); setActive(0); d.showModal(); input.current?.focus(); }
+    if (!open && d.open) d.close();
+  }, [open]);
+  const shown = useMemo(() => groups.map((g) => ({ ...g, items: g.items.filter((it) => !q || `${it.label} ${it.keywords || ""}`.toLowerCase().includes(q.toLowerCase())) })).filter((g) => g.items.length), [groups, q]);
+  const flat = shown.flatMap((g) => g.items);
+  const run = (it) => { if (!it) return; onOpenChange?.(false); it.onRun?.(); };
+  function onKey(e) {
+    if (e.key === "ArrowDown") { e.preventDefault(); setActive((a) => (a + 1) % Math.max(flat.length, 1)); }
+    else if (e.key === "ArrowUp") { e.preventDefault(); setActive((a) => (a - 1 + flat.length) % Math.max(flat.length, 1)); }
+    else if (e.key === "Enter") { e.preventDefault(); run(flat[active]); }
+  }
+  let n = -1;
+  return (
+    <dialog ref={dlg} className={cx("ui-dialog ui-command", className)} aria-label="Command menu" onClose={() => onOpenChange?.(false)} onClick={(e) => { if (e.target === dlg.current) onOpenChange?.(false); }}>
+      <div className="ui-command-search">{SEARCH}
+        <input ref={input} role="combobox" aria-expanded="true" aria-controls={`${id}-list`} aria-autocomplete="list" aria-label="Search commands"
+          aria-activedescendant={flat[active] ? `${id}-${flat[active].id}` : undefined} placeholder={placeholder} value={q}
+          onChange={(e) => { setQ(e.target.value); setActive(0); }} onKeyDown={onKey} />
+      </div>
+      <div className="ui-command-list" id={`${id}-list`} role="listbox" aria-label="Commands">
+        {shown.map((g) => (
+          <div key={g.label} role="group" aria-label={g.label}>
+            <div className="ui-command-group" aria-hidden="true">{g.label}</div>
+            {g.items.map((it) => { n += 1; const me = n; return (
+              <div key={it.id} id={`${id}-${it.id}`} role="option" className="ui-command-item" aria-selected={me === active}
+                onMouseMove={() => setActive(me)} onClick={() => run(it)}>{it.icon}{it.label}{it.hint ? <kbd>{it.hint}</kbd> : null}</div>
+            ); })}
+          </div>
+        ))}
+        {!flat.length ? <p className="ui-command-empty">Nothing matches "{q}".</p> : null}
+      </div>
+      <div className="ui-command-foot" aria-hidden="true"><span><kbd className="ui-kbd">↑</kbd> <kbd className="ui-kbd">↓</kbd> move</span><span><kbd className="ui-kbd">↵</kbd> run</span><span><kbd className="ui-kbd">esc</kbd> close</span></div>
+    </dialog>
+  );
+}

package/tether/v1/react/DatePicker.jsx

@@ -0,0 +1,34 @@
+import { useEffect, useRef, useState } from "react";
+import { cx } from "./cx.js";
+import { Calendar, fromIso } from "./Calendar.jsx";
+
+const CAL = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4M8 2v4M3 10h18" /></svg>;
+
+/**
+ * <DatePicker label="Show date" value={date} onChange={setDate} placeholder="Pick a date" />
+ * A button showing the date; it opens a calendar under it. A choice, Escape or a click outside closes it.
+ */
+export function DatePicker({ value, onChange, placeholder = "Pick a date", label, className }) {
+  const [open, setOpen] = useState(false);
+  const root = useRef(null), btn = useRef(null);
+  useEffect(() => {
+    if (!open) return undefined;
+    const out = (e) => { if (!root.current?.contains(e.target)) setOpen(false); };
+    document.addEventListener("mousedown", out);
+    return () => document.removeEventListener("mousedown", out);
+  }, [open]);
+  const d = fromIso(value);
+  return (
+    <div ref={root} className={cx("ui-datepicker", className)} onKeyDown={(e) => { if (e.key === "Escape" && open) { e.stopPropagation(); setOpen(false); btn.current?.focus(); } }}>
+      <button ref={btn} type="button" className="ui-input ui-datepicker-btn" aria-haspopup="dialog" aria-expanded={open} aria-label={label ? `${label}: ${d ? d.toDateString() : "none"}` : undefined}
+        data-empty={d ? undefined : ""} onClick={() => setOpen((o) => !o)}>
+        {CAL}<span>{d ? d.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric", year: "numeric" }) : placeholder}</span>
+      </button>
+      {open ? (
+        <div className="ui-datepicker-pop" role="dialog" aria-label={label || "Choose a date"}>
+          <Calendar value={value} autoFocus onChange={(s) => { onChange?.(s); setOpen(false); btn.current?.focus(); }} />
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/tether/v1/react/DeviceFrame.jsx

@@ -0,0 +1,12 @@
+import { cx } from "./cx.js";
+
+/** <DeviceFrame kind="browser" | "laptop" | "phone" caption="Ticketing, desktop"><img src="…" alt="…" /></DeviceFrame> */
+export function DeviceFrame({ kind = "browser", caption, children, className }) {
+  return (
+    <figure className={cx("ui-device", `ui-device--${kind}`, className)}>
+      {kind === "browser" ? <div className="ui-device-chrome" aria-hidden="true"><i /><i /><i /><span /></div> : null}
+      <div className="ui-device-screen">{children}</div>
+      {caption ? <figcaption>{caption}</figcaption> : null}
+    </figure>
+  );
+}

package/tether/v1/react/Dialog.jsx

@@ -0,0 +1,43 @@
+import { useEffect, useId, useRef } from "react";
+
+/**
+ * <Dialog open={open} onClose={() => setOpen(false)} title="Delete file?" description="…" footer={…}>…</Dialog>
+ * A native <dialog> opened as a modal: the page behind is inert, Escape closes it, focus returns
+ * to what opened it, and a click on the backdrop closes it.
+ */
+export function Dialog({ open, onClose, title, description, footer, children, closeLabel = "Close" }) {
+  const ref = useRef(null);
+  const opener = useRef(null);
+  const titleId = useId();
+  const descId = useId();
+
+  useEffect(() => {
+    const d = ref.current;
+    if (!d) return;
+    if (open && !d.open) { opener.current = document.activeElement; d.showModal(); }
+    if (!open && d.open) d.close();
+  }, [open]);
+
+  return (
+    <dialog
+      ref={ref}
+      className="ui-dialog"
+      aria-labelledby={titleId}
+      aria-describedby={description ? descId : undefined}
+      onClose={() => { onClose?.(); opener.current?.focus?.(); }}
+      onClick={(e) => { if (e.target === ref.current) ref.current.close(); }}
+    >
+      <div className="ui-dialog-head">
+        <div style={{ flex: 1 }}>
+          <h2 className="ui-dialog-title" id={titleId}>{title}</h2>
+          {description ? <p className="ui-dialog-desc" id={descId}>{description}</p> : null}
+        </div>
+        <button type="button" className="ui-dialog-close" aria-label={closeLabel} onClick={() => ref.current?.close()}>
+          <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>
+      </div>
+      {children ? <div className="ui-dialog-body">{children}</div> : null}
+      {footer ? <div className="ui-dialog-foot">{footer}</div> : null}
+    </dialog>
+  );
+}

package/tether/v1/react/Divider.jsx

@@ -0,0 +1,10 @@
+import { cx } from "./cx.js";
+
+/**
+ * <Divider />  a plain rule
+ * <Divider>or</Divider>  a rule with a word or a button in the middle; align="start" puts it near the left
+ */
+export function Divider({ children, align, className }) {
+  if (!children) return <hr className={cx("ui-divider", className)} />;
+  return <div className={cx("ui-divider", align === "start" && "ui-divider--start", className)} role="separator">{children}</div>;
+}

package/tether/v1/react/Editor.jsx

@@ -0,0 +1,85 @@
+import { useEffect, useId, useRef, useState } from "react";
+import { cx } from "./cx.js";
+
+const i = (d) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{d}</svg>;
+export const EDITOR_TOOLS = [
+  { cmd: "bold", label: "Bold", icon: i(<path d="M6 4h8a4 4 0 0 1 0 8H6zM6 12h9a4 4 0 0 1 0 8H6z" />) },
+  { cmd: "italic", label: "Italic", icon: i(<path d="M19 4h-9M14 20H5M15 4 9 20" />) },
+  { cmd: "underline", label: "Underline", icon: i(<path d="M6 4v6a6 6 0 0 0 12 0V4M4 20h16" />) },
+  { sep: true },
+  { cmd: "insertUnorderedList", label: "Bulleted list", icon: i(<path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />) },
+  { cmd: "insertOrderedList", label: "Numbered list", icon: i(<path d="M10 6h11M10 12h11M10 18h11M4 6h1v4M4 10h2M6 18H4c0-1 2-2 2-3s-1-1.5-2-1" />) },
+  { cmd: "formatBlock", label: "Quote", icon: i(<path d="M3 21c3 0 7-1 7-8V5H3v7h4c0 3-1 5-4 5zM14 21c3 0 7-1 7-8V5h-7v7h4c0 3-1 5-4 5z" />) },
+  { sep: true },
+  { cmd: "removeFormat", label: "Clear formatting", press: false, icon: i(<path d="M4 7V4h16v3M5 20h6M13 4 8 20M15 15l5 5M20 15l-5 5" />) }
+];
+
+/**
+ * <Editor label="Announcement" defaultValue="<p>Doors at noon.</p>" onChange={(html) => setDraft(html)} />
+ * A toolbar over an editable area, using the browser's editing commands, so ⌘B, ⌘I, ⌘U and undo work.
+ * The HTML it hands back is whatever the browser produced: clean it on the server before you store or show it.
+ */
+export function Editor({ label, defaultValue = "", placeholder = "Write something…", onChange, className }) {
+  const id = useId();
+  const area = useRef(null), bar = useRef(null);
+  const [on, setOn] = useState({});
+  const [words, setWords] = useState(0);
+  const [focus, setFocus] = useState(0);
+
+  function sync() {
+    const next = {};
+    for (const t of EDITOR_TOOLS) if (t.cmd && t.press !== false) {
+      try { next[t.cmd] = t.cmd === "formatBlock" ? /blockquote/i.test(document.queryCommandValue("formatBlock")) : document.queryCommandState(t.cmd); } catch { next[t.cmd] = false; }
+    }
+    setOn(next);
+    setWords((area.current?.textContent.trim().split(/\s+/).filter(Boolean) || []).length);
+  }
+  useEffect(() => {
+    if (area.current) area.current.innerHTML = defaultValue;
+    sync();
+    const sel = () => { if (area.current?.contains(document.getSelection()?.anchorNode)) sync(); };
+    document.addEventListener("selectionchange", sel);
+    return () => document.removeEventListener("selectionchange", sel);
+  }, []);
+
+  function run(t) {
+    area.current?.focus();
+    if (t.cmd === "formatBlock") document.execCommand("formatBlock", false, on.formatBlock ? "p" : "blockquote");
+    else document.execCommand(t.cmd, false, null);
+    sync(); onChange?.(area.current.innerHTML);
+  }
+  const tools = EDITOR_TOOLS.filter((t) => !t.sep);
+  function onBarKey(e) {
+    const n = tools.length;
+    const to = e.key === "ArrowRight" ? (focus + 1) % n : e.key === "ArrowLeft" ? (focus - 1 + n) % n : e.key === "Home" ? 0 : e.key === "End" ? n - 1 : null;
+    if (to === null) return;
+    e.preventDefault(); setFocus(to);
+    bar.current?.querySelectorAll(".ui-editor-tool")[to]?.focus();
+  }
+
+  let k = -1;
+  return (
+    <div className={cx("ui-editor", className)}>
+      <div ref={bar} className="ui-editor-toolbar" role="toolbar" aria-label={`${label} formatting`} aria-controls={id} onKeyDown={onBarKey}>
+        {EDITOR_TOOLS.map((t, n) => {
+          if (t.sep) return <span key={n} className="ui-editor-sep" aria-hidden="true" />;
+          k += 1;
+          const me = k;
+          return (
+            <button
+              key={n} type="button" className="ui-editor-tool" aria-label={t.label} tabIndex={me === focus ? 0 : -1}
+              aria-pressed={t.press === false ? undefined : !!on[t.cmd]}
+              onMouseDown={(e) => e.preventDefault()} onClick={() => { setFocus(me); run(t); }}
+            >{t.icon}</button>
+          );
+        })}
+      </div>
+      <div
+        ref={area} id={id} className="ui-editor-area" contentEditable role="textbox" aria-multiline="true" aria-label={label}
+        data-placeholder={placeholder} suppressContentEditableWarning
+        onInput={() => { sync(); onChange?.(area.current.innerHTML); }}
+      />
+      <div className="ui-editor-foot"><span>{words} {words === 1 ? "word" : "words"}</span></div>
+    </div>
+  );
+}

package/tether/v1/react/EmptyState.jsx

@@ -0,0 +1,13 @@
+import { cx } from "./cx.js";
+
+/** <EmptyState icon={<SearchIcon />} title="No sets match" text="Try another stage or clear the search." actions={<Button>Clear search</Button>} /> */
+export function EmptyState({ icon, title, text, actions, as: H = "h3", className }) {
+  return (
+    <div className={cx("ui-empty", className)}>
+      {icon ? <span className="ui-empty-icon" aria-hidden="true">{icon}</span> : null}
+      <H className="ui-empty-title">{title}</H>
+      {text ? <p className="ui-empty-text">{text}</p> : null}
+      {actions ? <div className="ui-empty-actions">{actions}</div> : null}
+    </div>
+  );
+}

package/tether/v1/react/Field.jsx

@@ -0,0 +1,32 @@
+import { forwardRef, useId } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <Field label="Email" hint="We never share it." error={err}> wraps any one control,
+ * wiring the label, the hint and the error to it for screen readers.
+ * <Input /> and <Textarea /> are the bare controls.
+ */
+export function Field({ label, hint, error, children, className }) {
+  const id = useId();
+  const hintId = hint ? `${id}-hint` : undefined;
+  const errorId = error ? `${id}-error` : undefined;
+  const control = typeof children === "function"
+    ? children({ id, "aria-describedby": [hintId, errorId].filter(Boolean).join(" ") || undefined, "aria-invalid": error ? true : undefined })
+    : children;
+  return (
+    <div className={cx("ui-field", className)}>
+      {label ? <label className="ui-label" htmlFor={id}>{label}</label> : null}
+      {control}
+      {hint ? <span className="ui-hint" id={hintId}>{hint}</span> : null}
+      {error ? <span className="ui-error" id={errorId}>{error}</span> : null}
+    </div>
+  );
+}
+
+export const Input = forwardRef(function Input({ className, ...rest }, ref) {
+  return <input ref={ref} className={cx("ui-input", className)} {...rest} />;
+});
+
+export const Textarea = forwardRef(function Textarea({ className, ...rest }, ref) {
+  return <textarea ref={ref} className={cx("ui-input", className)} {...rest} />;
+});

package/tether/v1/react/FileUpload.jsx

@@ -0,0 +1,38 @@
+import { useId, useState } from "react";
+import { cx } from "./cx.js";
+
+const UP = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" /></svg>;
+const FILE = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" /></svg>;
+const X = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>;
+const size = (n) => (n < 1024 ? `${n} B` : n < 1048576 ? `${(n / 1024).toFixed(1)} KB` : `${(n / 1048576).toFixed(1)} MB`);
+
+/**
+ * <FileUpload hint="PDF or images, up to 10 MB" accept=".pdf,image/*" files={files} onChange={setFiles} />
+ * A drop zone that is also a file button (keyboard and screen readers get the real input), and the chosen files.
+ * It only collects files: uploading them is the app's job.
+ */
+export function FileUpload({ files = [], onChange, accept, multiple = true, hint, className }) {
+  const id = useId();
+  const [drag, setDrag] = useState(false);
+  const add = (list) => onChange?.([...files, ...Array.from(list)]);
+  return (
+    <div className={className}>
+      <label className={cx("ui-dropzone", drag && "is-drag")} htmlFor={id}
+        onDragOver={(e) => { e.preventDefault(); setDrag(true); }} onDragLeave={() => setDrag(false)}
+        onDrop={(e) => { e.preventDefault(); setDrag(false); add(e.dataTransfer.files); }}>
+        <span className="ui-dropzone-icon">{UP}</span>
+        <span><strong>Click to upload</strong> or drag and drop</span>
+        {hint ? <small>{hint}</small> : null}
+        <input id={id} type="file" accept={accept} multiple={multiple} onChange={(e) => { add(e.target.files); e.target.value = ""; }} />
+      </label>
+      {files.length ? (
+        <ul className="ui-files" aria-label="Chosen files">
+          {files.map((f, i) => (
+            <li key={`${f.name}-${i}`} className="ui-file">{FILE}<span className="ui-file-name">{f.name}</span><span className="ui-file-size">{size(f.size)}</span>
+              <button type="button" className="ui-tag-remove" aria-label={`Remove ${f.name}`} onClick={() => onChange?.(files.filter((_, j) => j !== i))}>{X}</button></li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
+}

package/tether/v1/react/Filters.jsx

@@ -0,0 +1,19 @@
+import { cx } from "./cx.js";
+
+/** <Chip pressed={on} onClick={toggle}>Main</Chip>  a toggle that shows its state with aria-pressed */
+export function Chip({ pressed = false, children, className, ...rest }) {
+  return <button type="button" className={cx("ui-chip", className)} aria-pressed={pressed} {...rest}>{children}</button>;
+}
+
+/**
+ * <FilterBar label="Filter sets" search={<Input type="search" ... />} chips={<>…Chips…</>} active={<TagList>…</TagList>} />
+ * A labelled group: search and chips on one row, the active filters (removable tags) under it.
+ */
+export function FilterBar({ label, search, chips, active, className }) {
+  return (
+    <div className={cx("ui-filters", className)} role="group" aria-label={label}>
+      <div className="ui-filters-row">{search}{chips}</div>
+      {active}
+    </div>
+  );
+}

package/tether/v1/react/Infographics.jsx

@@ -0,0 +1,54 @@
+import { cx } from "./cx.js";
+
+/**
+ * <Compare label="Tickets sold, this year against last" items={[{ label: "This year", value: 18880 }, { label: "Last year", value: 16740 }]} />
+ * The first item is the one that matters; the bars share one scale; the difference is written out.
+ * format(n) turns a number into text (default: 18,880).
+ */
+export function Compare({ label, items, format = n => Number(n).toLocaleString("en-US"), className }) {
+  const max = Math.max(...items.map(i => i.value), 1), [a, b] = items;
+  const diff = b ? a.value - b.value : 0, pct = b && b.value ? Math.round(Math.abs(diff) / b.value * 1000) / 10 : 0;
+  return (
+    <div className={cx("ui-compare", className)} role="group" aria-label={label}>
+      {items.map(it => (
+        <div className="ui-compare-row" key={it.label}>
+          <span className="ui-compare-label">{it.label}</span>
+          <span className="ui-compare-bar" aria-hidden="true"><span style={{ "--value": `${Math.round(it.value / max * 100)}%` }} /></span>
+          <strong className="ui-compare-value">{format(it.value)}</strong>
+        </div>
+      ))}
+      {b ? <p className="ui-compare-diff">{diff === 0 ? `The same as ${b.label.toLowerCase()}` : `${format(Math.abs(diff))} (${pct}%) ${diff > 0 ? "more" : "less"} than ${b.label.toLowerCase()}`}</p> : null}
+    </div>
+  );
+}
+
+const STATE_WORD = { done: "Done", current: "In progress", upcoming: "Upcoming" };
+/**
+ * <Timeline label="Campaign" items={[{ title: "Kickoff", text: "Direction agreed", time: "Jan 14", state: "done" }]} />
+ * state: done | current | upcoming. The state is written, not only shown by the dot.
+ */
+export function Timeline({ label, items, className }) {
+  return (
+    <ol className={cx("ui-timeline", className)} aria-label={label}>
+      {items.map(it => (
+        <li className="ui-timeline-item" data-state={it.state || "upcoming"} key={it.title} aria-current={it.state === "current" ? "step" : undefined}>
+          <span className="ui-timeline-dot" aria-hidden="true" />
+          <div>
+            <p className="ui-timeline-title">{it.title}<span className={cx("ui-badge", it.state === "done" ? "ui-badge--ok" : it.state === "current" ? "ui-badge--brand" : "ui-badge--outline")}>{STATE_WORD[it.state || "upcoming"]}</span></p>
+            {it.text ? <p className="ui-timeline-text">{it.text}</p> : null}
+            {it.time ? <span className="ui-timeline-time">{it.time}</span> : null}
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+}
+
+/** <StatGrid label="This week" items={[{ label: "Active projects", value: "9", note: "+2 since Monday" }]} /> */
+export function StatGrid({ label, items, className }) {
+  return (
+    <dl className={cx("ui-statgrid", className)} aria-label={label}>
+      {items.map(it => <div key={it.label}><dt>{it.label}</dt><dd>{it.value}</dd>{it.note ? <small>{it.note}</small> : null}</div>)}
+    </dl>
+  );
+}

package/tether/v1/react/InlineCTA.jsx

@@ -0,0 +1,14 @@
+import { cx } from "./cx.js";
+
+/** <InlineCTA title="Invite your crew" body="Everyone gets the run of show on their phone." actions={<Button variant="primary">Invite</Button>} tone="fill" /> */
+export function InlineCTA({ title, body, actions, tone, as: H = "h3", className }) {
+  return (
+    <section className={cx("ui-cta", tone === "fill" && "ui-cta--fill", className)}>
+      <div className="ui-cta-text">
+        <H className="ui-cta-title">{title}</H>
+        {body ? <p className="ui-cta-body">{body}</p> : null}
+      </div>
+      {actions ? <div className="ui-cta-actions">{actions}</div> : null}
+    </section>
+  );
+}

package/tether/v1/react/LineChart.jsx

@@ -0,0 +1,23 @@
+import { cx } from "./cx.js";
+
+/**
+ * <LineChart label="Tickets sold per month" values={[120, 180, 160]} labels={["Jan", "Feb", "Mar"]} />
+ * The SVG stretches to its box; the values are the chart's text alternative (role="img" + aria-label).
+ */
+export function LineChart({ label, values = [], labels = [], className }) {
+  if (values.length < 2) return null;
+  const w = 600, h = 200, pad = 6;
+  const max = Math.max(...values), min = Math.min(...values), span = max - min || 1;
+  const pts = values.map((v, i) => [(i * w) / (values.length - 1), pad + (h - 2 * pad) * (1 - (v - min) / span)]);
+  const line = pts.map((p, i) => `${i ? "L" : "M"}${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(" ");
+  return (
+    <div className={cx("ui-chart", className)} role="img" aria-label={`${label}: ${values.map((v, i) => (labels[i] ? `${labels[i]} ${v}` : v)).join(", ")}`}>
+      <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" aria-hidden="true">
+        {[0.25, 0.5, 0.75].map((f) => <line key={f} className="ui-chart-grid" x1="0" x2={w} y1={h * f} y2={h * f} vectorEffect="non-scaling-stroke" />)}
+        <path className="ui-chart-area" d={`${line} L${w} ${h} L0 ${h} Z`} />
+        <path className="ui-chart-line" d={line} vectorEffect="non-scaling-stroke" />
+      </svg>
+      {labels.length ? <div className="ui-chart-axis" aria-hidden="true">{labels.map((l) => <span key={l}>{l}</span>)}</div> : null}
+    </div>
+  );
+}