@bkstg/design-systems 1.0.0 → 1.0.1

package/tether/v1/react/Tabs.jsx

@@ -0,0 +1,80 @@
+import { useId, useLayoutEffect, useRef, useState } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <Tabs label="Settings" tabs={[{ id: "a", label: "Account", content: <p>…</p> }]} />
+ * variant: "underline" (default) | "pill". Controlled with value + onChange, or uncontrolled.
+ * Arrows, Home and End move between tabs; the indicator slides to the selected one.
+ */
+export function Tabs({ tabs, label, variant = "underline", value, defaultValue, onChange, className }) {
+  const base = useId();
+  const [inner, setInner] = useState(defaultValue ?? tabs.find((t) => !t.disabled)?.id);
+  const current = value ?? inner;
+  const refs = useRef({});
+  const indicator = useRef(null);
+  const listRef = useRef(null);
+
+  function choose(id, focus) {
+    if (value === undefined) setInner(id);
+    onChange?.(id);
+    if (focus) refs.current[id]?.focus();
+  }
+  function onKey(e, id) {
+    const on = tabs.filter((t) => !t.disabled);
+    const i = on.findIndex((t) => t.id === id);
+    const next = { ArrowRight: on[(i + 1) % on.length], ArrowLeft: on[(i - 1 + on.length) % on.length], Home: on[0], End: on[on.length - 1] }[e.key];
+    if (next) { e.preventDefault(); choose(next.id, true); }
+  }
+  useLayoutEffect(() => {
+    function move() {
+      const t = refs.current[current];
+      if (!t || !indicator.current) return;
+      indicator.current.style.setProperty("--x", `${t.offsetLeft}px`);
+      indicator.current.style.setProperty("--w", `${t.offsetWidth}px`);
+    }
+    move();
+    if (typeof ResizeObserver === "undefined" || !listRef.current) return undefined;
+    const ro = new ResizeObserver(move);
+    ro.observe(listRef.current);
+    return () => ro.disconnect();
+  }, [current, tabs]);
+
+  return (
+    <div className={cx("ui-tabs", variant === "pill" && "ui-tabs--pill", className)}>
+      <div className="ui-tablist" role="tablist" aria-label={label} ref={listRef}>
+        {tabs.map((t) => (
+          <button
+            key={t.id}
+            ref={(el) => { refs.current[t.id] = el; }}
+            type="button"
+            role="tab"
+            id={`${base}-tab-${t.id}`}
+            className="ui-tab"
+            aria-selected={t.id === current}
+            aria-controls={`${base}-panel-${t.id}`}
+            tabIndex={t.id === current ? 0 : -1}
+            disabled={t.disabled}
+            onClick={() => choose(t.id, false)}
+            onKeyDown={(e) => onKey(e, t.id)}
+          >
+            {t.label}
+          </button>
+        ))}
+        <span className="ui-tab-indicator" aria-hidden="true" ref={indicator} />
+      </div>
+      {tabs.map((t) => (
+        <div
+          key={t.id}
+          className="ui-tabpanel"
+          role="tabpanel"
+          id={`${base}-panel-${t.id}`}
+          aria-labelledby={`${base}-tab-${t.id}`}
+          tabIndex={0}
+          hidden={t.id !== current}
+        >
+          {t.content}
+        </div>
+      ))}
+    </div>
+  );
+}

package/tether/v1/react/Tag.jsx

@@ -0,0 +1,34 @@
+import { useRef } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <TagList label="Genres">{genres.map(g => <Tag key={g} onRemove={() => drop(g)}>{g}</Tag>)}</TagList>
+ * With onRemove, a tag shows a remove button labelled "Remove <text>". After a removal, focus moves to the
+ * next remove button, or the previous one, or the list, so a keyboard user is never dropped.
+ */
+export function TagList({ label, className, children }) {
+  return <div className={cx("ui-tags", className)} role="group" aria-label={label} tabIndex={-1}>{children}</div>;
+}
+
+export function Tag({ children, onRemove, removeLabel, className, ...rest }) {
+  const ref = useRef(null);
+  function remove() {
+    const list = ref.current?.parentElement;
+    const all = list ? [...list.querySelectorAll(".ui-tag-remove")] : [];
+    const i = all.indexOf(ref.current?.querySelector(".ui-tag-remove"));
+    const next = all[i + 1] || all[i - 1] || list;
+    onRemove();
+    // after React removes this tag
+    requestAnimationFrame(() => next?.isConnected ? next.focus() : list?.focus());
+  }
+  return (
+    <span ref={ref} className={cx("ui-tag", className)} {...rest}>
+      {children}
+      {onRemove ? (
+        <button type="button" className="ui-tag-remove" aria-label={removeLabel || `Remove ${typeof children === "string" ? children : "tag"}`} onClick={remove}>
+          <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>
+        </button>
+      ) : null}
+    </span>
+  );
+}

package/tether/v1/react/Tooltip.jsx

@@ -0,0 +1,25 @@
+import { cloneElement, useId, useState } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <Tooltip text="Copy link"><button aria-label="Copy">…</button></Tooltip>
+ * Shows on hover and keyboard focus, after --tooltip-delay. Escape hides it until the pointer or focus leaves.
+ * side: "top" (default) | "bottom". The child must be focusable.
+ */
+export function Tooltip({ text, side = "top", children, className }) {
+  const id = useId();
+  const [dismissed, setDismissed] = useState(false);
+  const child = cloneElement(children, { "aria-describedby": id });
+  return (
+    <span
+      className={cx("ui-tooltip-wrap", dismissed && "is-dismissed", className)}
+      data-side={side === "bottom" ? "bottom" : undefined}
+      onKeyDown={(e) => { if (e.key === "Escape") setDismissed(true); }}
+      onMouseLeave={() => setDismissed(false)}
+      onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) setDismissed(false); }}
+    >
+      {child}
+      <span role="tooltip" id={id} className="ui-tooltip">{text}</span>
+    </span>
+  );
+}

package/tether/v1/react/Tree.jsx

@@ -0,0 +1,41 @@
+import { useRef, useState } from "react";
+import { cx } from "./cx.js";
+
+/**
+ * <Tree label="Files" items={[{ id: "a", label: "Artwork", icon, children: [{ id: "a1", label: "Poster.pdf" }] }]} selected={id} onSelect={setId} />
+ * Up and Down move, Right opens or steps in, Left closes or steps out, Home and End, Enter selects. One tab stop.
+ */
+export function Tree({ label, items, selected, onSelect, defaultOpen = [], className }) {
+  const [open, setOpen] = useState(() => new Set(defaultOpen));
+  const [focus, setFocus] = useState(selected || items[0]?.id);
+  const root = useRef(null);
+  const visible = [];
+  const walk = (list, parent) => list.forEach((it) => { visible.push({ it, parent }); if (it.children && open.has(it.id)) walk(it.children, it.id); });
+  walk(items, null);
+  const go = (id) => { setFocus(id); requestAnimationFrame(() => root.current?.querySelector(`[data-id="${id}"]`)?.focus()); };
+  const toggle = (id, on) => setOpen((s) => { const n = new Set(s); (on ?? !n.has(id)) ? n.add(id) : n.delete(id); return n; });
+  function onKey(e) {
+    const i = visible.findIndex((v) => v.it.id === focus), cur = visible[i]; if (!cur) return;
+    const has = !!cur.it.children, isOpen = open.has(cur.it.id);
+    const k = e.key;
+    if (k === "ArrowDown" && visible[i + 1]) go(visible[i + 1].it.id);
+    else if (k === "ArrowUp" && visible[i - 1]) go(visible[i - 1].it.id);
+    else if (k === "Home") go(visible[0].it.id);
+    else if (k === "End") go(visible[visible.length - 1].it.id);
+    else if (k === "ArrowRight" && has) { if (!isOpen) toggle(cur.it.id, true); else go(cur.it.children[0].id); }
+    else if (k === "ArrowLeft") { if (has && isOpen) toggle(cur.it.id, false); else if (cur.parent) go(cur.parent); }
+    else if (k === "Enter" || k === " ") { onSelect?.(cur.it.id); if (has) toggle(cur.it.id); }
+    else return;
+    e.preventDefault();
+  }
+  const render = (list, level) => list.map((it) => (
+    <li key={it.id} data-id={it.id} role="treeitem" aria-level={level} aria-selected={it.id === selected} aria-expanded={it.children ? open.has(it.id) : undefined}
+      tabIndex={it.id === focus ? 0 : -1}>
+      <div className="ui-tree-row" onClick={() => { setFocus(it.id); onSelect?.(it.id); if (it.children) toggle(it.id); }}>
+        {it.children ? <span className="ui-tree-caret" aria-hidden="true" /> : <span className="ui-tree-leaf" aria-hidden="true" />}{it.icon}{it.label}
+      </div>
+      {it.children ? <ul role="group">{render(it.children, level + 1)}</ul> : null}
+    </li>
+  ));
+  return <ul ref={root} className={cx("ui-tree", className)} role="tree" aria-label={label} onKeyDown={onKey}>{render(items, 1)}</ul>;
+}

package/tether/v1/react/VideoPlayer.jsx

@@ -0,0 +1,57 @@
+import { useEffect, useRef, useState } from "react";
+import { cx } from "./cx.js";
+
+const PLAY = <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 4.5v15a1 1 0 0 0 1.5.86l12.5-7.5a1 1 0 0 0 0-1.72L8.5 3.64A1 1 0 0 0 7 4.5Z" /></svg>;
+const PAUSE = <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="6" y="4" width="4" height="16" rx="1" /><rect x="14" y="4" width="4" height="16" rx="1" /></svg>;
+const o = { fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
+const SOUND = <svg viewBox="0 0 24 24" {...o} aria-hidden="true"><path d="M11 5 6 9H2v6h4l5 4V5Z" /><path d="M15.5 8.5a5 5 0 0 1 0 7M19 5a10 10 0 0 1 0 14" /></svg>;
+const MUTED = <svg viewBox="0 0 24 24" {...o} aria-hidden="true"><path d="M11 5 6 9H2v6h4l5 4V5Z" /><path d="m22 9-6 6M16 9l6 6" /></svg>;
+const FULL = <svg viewBox="0 0 24 24" {...o} aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3" /></svg>;
+const clock = (s) => { s = Math.max(0, Math.floor(s || 0)); return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`; };
+
+/**
+ * <VideoPlayer label="Day 1 recap" sources={[{ src: "/recap.mp4", type: "video/mp4" }]} poster="/recap.jpg"
+ *   captions={{ src: "/recap.vtt", lang: "en" }} />
+ * A native <video> with the kit's controls: play and pause, seek, mute, full screen; k or Space plays and pauses.
+ * A video with speech needs captions (WCAG 1.2.2): pass a WebVTT file.
+ */
+export function VideoPlayer({ label, sources, poster, captions, muted = false, className }) {
+  const root = useRef(null), v = useRef(null), idle = useRef(null);
+  const [s, setS] = useState({ playing: false, muted, t: 0, d: 0, idle: false });
+  const paint = () => { const el = v.current; if (el) setS((p) => ({ ...p, playing: !el.paused, muted: el.muted, t: el.currentTime, d: el.duration || 0 })); };
+  useEffect(() => {
+    const el = v.current;
+    const evs = ["play", "pause", "timeupdate", "loadedmetadata", "volumechange", "ended"];
+    evs.forEach((n) => el.addEventListener(n, paint));
+    return () => { evs.forEach((n) => el.removeEventListener(n, paint)); clearTimeout(idle.current); };
+  }, []);
+  const toggle = () => { const el = v.current; if (el.paused) el.play(); else el.pause(); };
+  const wake = () => { setS((p) => ({ ...p, idle: false })); clearTimeout(idle.current); idle.current = setTimeout(() => setS((p) => ({ ...p, idle: true })), 2000); };
+  const pct = s.d ? (s.t / s.d) * 100 : 0;
+
+  return (
+    <div
+      ref={root} className={cx("ui-video", className)} role="group" aria-label={label}
+      data-playing={s.playing ? "" : undefined} data-idle={s.idle ? "" : undefined}
+      onPointerMove={wake} onFocus={wake}
+      onKeyDown={(e) => { if (e.target.closest("button, input")) return; if (e.key === " " || e.key === "k") { e.preventDefault(); toggle(); } }}
+    >
+      <video ref={v} poster={poster} muted={muted} playsInline preload="metadata" onClick={toggle} tabIndex={-1}>
+        {sources.map((x) => <source key={x.src} src={x.src} type={x.type} />)}
+        {captions ? <track kind="captions" src={captions.src} srcLang={captions.lang || "en"} label={captions.label || "English"} default /> : null}
+      </video>
+      <button type="button" className="ui-video-big" aria-label="Play" tabIndex={s.playing ? -1 : 0} onClick={toggle}>{PLAY}</button>
+      <div className="ui-video-bar">
+        <button type="button" className="ui-video-btn" aria-label={s.playing ? "Pause" : "Play"} onClick={toggle}>{s.playing ? PAUSE : PLAY}</button>
+        <input
+          type="range" className="ui-slider" aria-label="Seek" min={0} max={Math.round(s.d * 10) || 0} value={Math.round(s.t * 10)}
+          aria-valuetext={`${clock(s.t)} of ${clock(s.d)}`} style={{ "--value": `${pct}%` }}
+          onChange={(e) => { v.current.currentTime = e.target.value / 10; }}
+        />
+        <span className="ui-video-time">{clock(s.t)} / {clock(s.d)}</span>
+        <button type="button" className="ui-video-btn" aria-label={s.muted ? "Unmute" : "Mute"} onClick={() => { v.current.muted = !v.current.muted; }}>{s.muted ? MUTED : SOUND}</button>
+        <button type="button" className="ui-video-btn" aria-label="Full screen" onClick={() => (document.fullscreenElement ? document.exitFullscreen() : root.current.requestFullscreen?.())}>{FULL}</button>
+      </div>
+    </div>
+  );
+}

package/tether/v1/react/cx.js

@@ -0,0 +1,4 @@
+// Join class names, skipping empty ones.
+export function cx(...names) {
+  return names.filter(Boolean).join(" ");
+}

package/tether/v1/react/index.js

@@ -0,0 +1,59 @@
+// React versions of the kit's components. They render the same ui- classes as the HTML versions,
+// so both read one stylesheet: import tokens.css and components.css once, at the app's root.
+export { Button } from "./Button.jsx";
+export { Field, Input, Textarea } from "./Field.jsx";
+export { Select } from "./Select.jsx";
+export { Switch } from "./Switch.jsx";
+export { Tabs } from "./Tabs.jsx";
+export { Dialog } from "./Dialog.jsx";
+export { Badge } from "./Badge.jsx";
+export { Tag, TagList } from "./Tag.jsx";
+export { Avatar, AvatarGroup } from "./Avatar.jsx";
+export { Tooltip } from "./Tooltip.jsx";
+export { Progress } from "./Progress.jsx";
+export { Spinner } from "./Spinner.jsx";
+export { Skeleton } from "./Skeleton.jsx";
+export { Alert } from "./Alert.jsx";
+export { SideNav } from "./SideNav.jsx";
+export { AppShell } from "./AppShell.jsx";
+export { Chart } from "./Chart.jsx";
+export { Compare, Timeline, StatGrid } from "./Infographics.jsx";
+export { Metric } from "./Metric.jsx";
+export { LineChart } from "./LineChart.jsx";
+export { Table } from "./Table.jsx";
+export { ActivityFeed } from "./ActivityFeed.jsx";
+// base controls
+export { Checkbox, Choices } from "./Checkbox.jsx";
+export { RadioGroup } from "./RadioGroup.jsx";
+export { ButtonGroup } from "./ButtonGroup.jsx";
+export { Menu } from "./Menu.jsx";
+export { Slider } from "./Slider.jsx";
+export { Editor, EDITOR_TOOLS } from "./Editor.jsx";
+export { VideoPlayer } from "./VideoPlayer.jsx";
+// app components
+export { Breadcrumbs } from "./Breadcrumbs.jsx";
+export { CardHeader } from "./CardHeader.jsx";
+export { Divider } from "./Divider.jsx";
+export { EmptyState } from "./EmptyState.jsx";
+export { InlineCTA } from "./InlineCTA.jsx";
+export { PageHeader } from "./PageHeader.jsx";
+export { Pagination, pageList } from "./Pagination.jsx";
+export { Steps } from "./Steps.jsx";
+export { SectionHeader, SectionFooter } from "./SectionHeader.jsx";
+export { Calendar, toIso, fromIso } from "./Calendar.jsx";
+export { DatePicker } from "./DatePicker.jsx";
+export { CodeSnippet } from "./CodeSnippet.jsx";
+export { ColorPicker } from "./ColorPicker.jsx";
+export { CommandMenu } from "./CommandMenu.jsx";
+export { FileUpload } from "./FileUpload.jsx";
+export { Chip, FilterBar } from "./Filters.jsx";
+export { Chat } from "./Chat.jsx";
+export { Sheet } from "./Sheet.jsx";
+export { Tree } from "./Tree.jsx";
+// marketing sections
+export { Section, Media, SiteNav, Hero, FeatureCard, Stats, LogoCloud, Testimonial, TeamMember, PostCard, JobList, FAQ, Plan, CTABand, Newsletter, Prose, Footer } from "./Marketing.jsx";
+// shared assets and utility
+export { Banner } from "./Banner.jsx";
+export { DeviceFrame } from "./DeviceFrame.jsx";
+export { Annotations } from "./Annotations.jsx";
+export { Reveal } from "./Reveal.jsx";

package/tether/v1/system.json

@@ -0,0 +1,44 @@
+{
+  "name": "Tether",
+  "base": "shadcn",
+  "themes": {
+    "dark": "backstage",
+    "light": "backstage-light"
+  },
+  "mode": "light",
+  "texture": "off",
+  "shape": "standard",
+  "type": "dm",
+  "motion": "full",
+  "tokens": {},
+  "colors": {
+    "dark": {
+      "--p": "#171c1c",
+      "--s": "#1d2525",
+      "--acc": "#99b8b8",
+      "--pos": "#99b8b8",
+      "--fill": "#99b8b8",
+      "--bar-a": "#179915",
+      "--bar-b": "#77c176",
+      "--data-2": "#d4d7cb"
+    },
+    "light": {
+      "--i": "#232220",
+      "--l": "#E5DDD5",
+      "--p": "#fafaf9",
+      "--s": "#f5f2f0",
+      "--i2": "#4b4a49",
+      "--i3": "#525151",
+      "--mid": "#c0cece",
+      "--fill": "#657272",
+      "--bar-a": "#8fcc75",
+      "--bar-b": "#2f8d07",
+      "--field": "#fafaf9",
+      "--top-a": "#fafaf9",
+      "--card-a": "#fafaf9",
+      "--card-b": "#fafaf9",
+      "--data-2": "#2d2d2d",
+      "--on-fill": "#fafaf9"
+    }
+  }
+}