@vvedantb/ui 0.17.1 → 0.18.1

package/tokens/examples/tokens-moved/Fixture.tsx

@@ -0,0 +1,283 @@
+import { type ReactNode, useState } from "react";
+import { domAnimation, LazyMotion } from "motion/react";
+import { IconCheck, IconFile } from "@tabler/icons-react";
+import {
+  type ActivityStep,
+  ActivityTasks,
+  Avatar,
+  AvatarFallback,
+  BorderBeam,
+  Button,
+  CenteredSpinner,
+  KanbanBoard,
+  KanbanCard,
+  KanbanCards,
+  KanbanHeader,
+  KanbanProvider,
+  SortableListGroup,
+  SortableListHeader,
+  SortableListItem,
+  SortableListItems,
+  SortableListProvider,
+  ListRow,
+  LoadingState,
+  Markdown,
+  ModelPickerContent,
+  AgentPlan,
+  AgentPlanContent,
+  AgentPlanTrigger,
+  AgentPlanHeader,
+  AgentPlanTitle,
+  RefreshSpinIcon,
+  Spinner,
+  StatusDot,
+  type StatusTone,
+  Surface,
+  TestResult,
+  TestResults,
+  TestResultsContent,
+  TestResultsHeader,
+  TestResultsProgress,
+  TestResultsSummary,
+  TestSuite,
+  TestSuiteContent,
+  TestSuiteName,
+  TestSuiteStats,
+  TooltipProvider,
+  AgentTrace,
+  AgentTraceDescription,
+  AgentTraceIcon,
+  AgentTraceLine,
+  AgentTraceTitle,
+} from "../../../src";
+
+// The components moved in from eva, rendered on plain tokens.css
+// (no app variables, no compat layer) in a light and a dark pane. `?theme=light`
+// or `?theme=dark` shows one pane at full width for a screenshot.
+
+const tones: StatusTone[] = ["progress", "business-review", "code-review", "done", "cancelled", "active", "critical", "neutral"];
+
+const steps: ActivityStep[] = [
+  { type: "read", label: "Read file", detail: "src/ui/spinner.tsx", status: "complete" },
+  { type: "edit", label: "Edited file", detail: "src/ui/button.tsx", status: "complete" },
+  { type: "bash", label: "Ran command", detail: "pnpm test", status: "active" },
+];
+
+const models = [
+  { id: "opus", provider: "claude", label: "Opus" },
+  { id: "sonnet", provider: "claude", label: "Sonnet" },
+  { id: "gpt", provider: "codex", label: "GPT-5" },
+];
+
+const kanbanColumns = [
+  { id: "todo", name: "Todo" },
+  { id: "done", name: "Done" },
+];
+
+const kanbanData = [
+  { id: "k1", name: "Write the fixture", column: "todo" },
+  { id: "k2", name: "Screenshot it", column: "todo" },
+  { id: "k3", name: "Move the components", column: "done" },
+];
+
+const markdown = `## Markdown
+
+Text with \`inline code\`, a [link](https://example.com) and **bold**.
+
+- One
+- Two
+
+> [!NOTE]
+> A callout on tokens.css.
+
+\`\`\`ts
+const answer = 42;
+\`\`\`
+`;
+
+function Section({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <section className="space-y-3">
+      <h2 className="text-sm font-medium text-muted-foreground">{title}</h2>
+      {children}
+    </section>
+  );
+}
+
+function Pane({ dark }: { dark: boolean }) {
+  const [busy, setBusy] = useState(true);
+  const [model, setModel] = useState("opus");
+  return (
+    <div className={dark ? "dark" : ""}>
+      <main className="min-h-screen space-y-8 bg-background p-8 text-foreground">
+        <h1 className="text-lg font-semibold">{dark ? "Dark" : "Light"}</h1>
+
+        <Section title="Loaders">
+          <div className="flex flex-wrap items-center gap-4">
+            <Spinner />
+            <Spinner variant="circle" />
+            <Spinner variant="circle" size="sm" />
+            <Spinner variant="ring" />
+            <Button loading>Saving</Button>
+            <Button variant="ghost" size="icon" aria-label="Refresh" onClick={() => setBusy((b) => !b)}>
+              <RefreshSpinIcon busy={busy} />
+            </Button>
+          </div>
+          <div className="h-24 rounded-surface bg-card">
+            <CenteredSpinner label="Loading pane" />
+          </div>
+          <div className="flex flex-wrap items-center gap-6">
+            <LoadingState variant="Drive" />
+            <LoadingState variant="Dots" size="sm" />
+            <LoadingState variant="Orbit" iconOnly label="Working" />
+          </div>
+        </Section>
+
+        <Section title="ListRow, Surface, BorderBeam, Avatar, StatusDot">
+          <div className="grid max-w-md gap-2">
+            <ListRow accentClassName="bg-primary" onClick={() => {}} aria-label="Selected row" selected>
+              Selected row
+            </ListRow>
+            <ListRow onClick={() => {}} aria-label="Idle row">
+              Idle row (hover me)
+            </ListRow>
+          </div>
+          <Surface className="max-w-md">Surface, default density</Surface>
+          <div className="flex flex-wrap gap-4">
+            <BorderBeam active className="rounded-surface">
+              <div className="rounded-surface bg-card p-4">Mono beam</div>
+            </BorderBeam>
+            <BorderBeam active colorVariant="colorful" size="lg" className="rounded-surface">
+              <div className="rounded-surface bg-card p-4">Colourful beam</div>
+            </BorderBeam>
+          </div>
+          <div className="flex items-center gap-3">
+            <Avatar>
+              <AvatarFallback>VB</AvatarFallback>
+            </Avatar>
+            <Avatar className="h-7 w-7">
+              <AvatarFallback>A</AvatarFallback>
+            </Avatar>
+            {tones.map((tone) => (
+              <span key={tone} className="flex items-center gap-1 text-xs">
+                <StatusDot tone={tone} />
+                {tone}
+              </span>
+            ))}
+          </div>
+        </Section>
+
+        <Section title="Kanban and list">
+          <KanbanProvider columns={kanbanColumns} data={kanbanData} className="max-w-xl">
+            <div className="grid grid-cols-2 gap-3">
+              {kanbanColumns.map((column) => (
+                <KanbanBoard id={column.id} key={column.id}>
+                  <KanbanHeader>{column.name}</KanbanHeader>
+                  <KanbanCards id={column.id}>
+                    {(item) => (
+                      <KanbanCard key={item.id} id={item.id} className="p-2">
+                        {item.name}
+                      </KanbanCard>
+                    )}
+                  </KanbanCards>
+                </KanbanBoard>
+              ))}
+            </div>
+          </KanbanProvider>
+          <SortableListProvider onDragEnd={() => {}} className="max-w-md">
+            <SortableListGroup id="g1">
+              <SortableListHeader name="Planned" color="#3B7DD8" />
+              <SortableListItems>
+                <SortableListItem id="l1" name="First item" index={0} parent="g1" />
+                <SortableListItem id="l2" name="Second item" index={1} parent="g1" />
+              </SortableListItems>
+            </SortableListGroup>
+          </SortableListProvider>
+        </Section>
+
+        <Section title="Activity, trace, plan, test results">
+          <div className="max-w-xl">
+            <ActivityTasks steps={steps} isStreaming />
+          </div>
+          <AgentTrace className="max-w-xl">
+            <AgentTraceLine>
+              <AgentTraceIcon>
+                <IconFile />
+              </AgentTraceIcon>
+              <AgentTraceTitle>Read spinner.tsx</AgentTraceTitle>
+              <AgentTraceDescription>240 lines</AgentTraceDescription>
+            </AgentTraceLine>
+            <AgentTraceLine status="running">
+              <AgentTraceIcon>
+                <Spinner variant="circle" size="sm" decorative />
+              </AgentTraceIcon>
+              <AgentTraceTitle shimmer>Running tests</AgentTraceTitle>
+            </AgentTraceLine>
+            <AgentTraceLine status="error">
+              <AgentTraceTitle>Typecheck failed</AgentTraceTitle>
+            </AgentTraceLine>
+          </AgentTrace>
+          <AgentPlan defaultOpen className="max-w-xl">
+            <AgentPlanHeader>
+              <AgentPlanTitle>Move the spinners</AgentPlanTitle>
+              <AgentPlanTrigger />
+            </AgentPlanHeader>
+            <AgentPlanContent>
+              <p className="flex items-center gap-2 text-sm">
+                <IconCheck className="size-4" /> Snapshot first
+              </p>
+            </AgentPlanContent>
+          </AgentPlan>
+          <TestResults summary={{ passed: 8, failed: 1, skipped: 1, total: 10, duration: 1234 }} className="max-w-xl">
+            <TestResultsHeader>
+              <TestResultsSummary />
+            </TestResultsHeader>
+            <TestResultsProgress />
+            <TestResultsContent>
+              <TestSuite name="spinner" status="failed" defaultOpen>
+                <TestSuiteName />
+                <TestSuiteStats passed={2} failed={1} />
+                <TestSuiteContent>
+                  <TestResult name="renders the ring" status="passed" duration={12} />
+                  <TestResult name="keeps the circle colours" status="failed" duration={30} />
+                  <TestResult name="runs in a hidden tab" status="skipped" />
+                </TestSuiteContent>
+              </TestSuite>
+            </TestResultsContent>
+          </TestResults>
+        </Section>
+
+        <Section title="Model picker content">
+          <div className="max-w-md rounded-surface bg-popover text-popover-foreground">
+            <ModelPickerContent
+              value={model}
+              accountId={null}
+              options={models}
+              onSelect={(id) => setModel(id)}
+            />
+          </div>
+        </Section>
+
+        <Section title="Markdown">
+          <div className="max-w-xl">
+            <Markdown>{markdown}</Markdown>
+          </div>
+        </Section>
+      </main>
+    </div>
+  );
+}
+
+export function Fixture() {
+  const theme = new URLSearchParams(window.location.search).get("theme");
+  return (
+    <LazyMotion features={domAnimation}>
+      <TooltipProvider>
+        <div className={theme ? "" : "grid grid-cols-2"}>
+          {theme !== "dark" && <Pane dark={false} />}
+          {theme !== "light" && <Pane dark />}
+        </div>
+      </TooltipProvider>
+    </LazyMotion>
+  );
+}

package/tokens/examples/tokens-moved/README.md

@@ -0,0 +1,20 @@
+# tokens-moved fixture
+
+Renders the components that moved in from eva on plain `tokens.css`, with no app variables and no compat layer, so they can be screenshotted in light and dark:
+
+- Loaders: `Spinner` (icon, `circle`, `ring`), `Button loading`, `RefreshSpinIcon`, `CenteredSpinner`, `LoadingState` (`Drive`, `Dots`, `Orbit`).
+- `ListRow` (selected and idle), `Surface`, `BorderBeam` (mono and colourful), `Avatar`, `StatusDot` (every tone).
+- Kanban and sortable list.
+- `ActivityTasks`, `AgentTrace`, `AgentPlan`, `TestResults`.
+- `ModelPickerContent`.
+- `Markdown`.
+
+`styles.css` imports `tokens.css`, `border-beam.css` and `markdown.css`. The page shows a light pane and a dark pane side by side. Add `?theme=light` or `?theme=dark` to show one pane at full width.
+
+Run it from this folder (it is not a workspace member, and React resolves from the parent `packages/ui` install):
+
+```sh
+pnpm install --ignore-workspace && pnpm dev
+```
+
+`Fixture.tsx` is not part of the package typecheck. To check it: `npx tsc -p tokens/examples/tokens-moved/tsconfig.json` from `packages/ui` (only `vite.config.ts` fails until this folder is installed).

package/tokens/examples/tokens-moved/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>tokens-moved fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/tokens/examples/tokens-moved/main.tsx

@@ -0,0 +1,6 @@
+import { createRoot } from "react-dom/client";
+import { Fixture } from "./Fixture";
+import "./styles.css";
+
+const root = document.getElementById("root");
+if (root) createRoot(root).render(<Fixture />);

package/tokens/examples/tokens-moved/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "tokens-moved-fixture",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "4.3.3",
+    "tailwindcss": "4.3.3",
+    "vite": "^7.0.0"
+  }
+}

package/tokens/examples/tokens-moved/styles.css

@@ -0,0 +1,12 @@
+@import "tailwindcss";
+@import "../../src/tokens.css";
+@import "../../src/css/border-beam.css";
+@import "../../src/css/markdown.css";
+@source "../../../src/**/*.{ts,tsx}";
+@source "./*.tsx";
+
+/* Plain tokens.css: no app variables, no compat layer. */
+body {
+  margin: 0;
+  font-family: var(--font-sans, system-ui, sans-serif);
+}

package/tokens/examples/tokens-moved/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "isolatedModules": true
+  },
+  "include": ["*.ts", "*.tsx"]
+}

package/tokens/examples/tokens-moved/vite.config.ts

@@ -0,0 +1,11 @@
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+
+// React, react-dom and the @vvedantb/ui peers resolve from packages/ui/node_modules
+// (this folder sits inside that package), so the fixture installs only the build tools.
+export default defineConfig({
+  plugins: [tailwindcss()],
+  esbuild: { jsx: "automatic" },
+  resolve: { dedupe: ["react", "react-dom"] },
+  server: { fs: { allow: ["../../.."] } },
+});

package/tokens/src/css/border-beam.css

@@ -0,0 +1,116 @@
+/*
+ * @vvedantb/ui/tokens/css/border-beam.css: the `.beam-*` rules for
+ * <BorderBeam/>, a hairline of light that travels around a surface while
+ * something runs. Opt-in: neither tokens.css nor index.css imports it.
+ *
+ *   @import "@vvedantb/ui/tokens/css/border-beam.css";
+ *
+ * Set on :root, the wrapper or any ancestor to change (defaults shown):
+ *   --beam-color: color-mix(in oklab, var(--color-foreground) 75%, transparent)
+ *   --beam-progress-color: var(--color-warning)
+ *   --beam-colorful-from: var(--color-primary)
+ *   --beam-colorful-to: var(--color-primary)
+ *
+ * The overlay is inset -1px: its wrapper owns the radius, the beam inherits
+ * it, and the child's opaque background hides the gradient's interior so
+ * only the ring reads.
+ *
+ * The conic gradient's angle is not animated: a registered custom property
+ * cannot run on the compositor, so it would repaint every frame. The ring
+ * spins an oversized `from 0deg` square under a static rounded clip via
+ * `rotate`, a cached-texture compositor animation. The square is sized to
+ * its clip's diagonal (`hypot()` of the container units the clip exposes).
+ *
+ * Named `beam-*`, not `border-beam-*`: tailwind-merge reads a `border-`
+ * prefix as a border-colour utility and would drop the class.
+ *
+ * No blur halo: a live `filter: blur()` on a spinning conic gradient keeps
+ * the GPU busy for as long as the beam runs.
+ *
+ * Paused while the tab is hidden (`html[data-page-hidden]`), inside a
+ * parked `aria-hidden` subtree, or off screen (`[data-anim-offscreen]`);
+ * `ensureRuntimeVisibility` and `useAnimOffscreenRef` set those attributes.
+ */
+
+@keyframes beam-rotate {
+  to {
+    rotate: 1turn;
+  }
+}
+
+.beam-root {
+  --beam-duration: 3s;
+  --beam-spread: 12%;
+  --beam-stops:
+    transparent 0%,
+    var(--beam-color, color-mix(in oklab, var(--color-foreground) 75%, transparent)) var(--beam-spread),
+    transparent calc(var(--beam-spread) * 2);
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+/* Static rounded clip over the spinning square. `container-type: size`
+ * gives the square `cqw`/`cqh` for its diagonal. */
+.beam {
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  overflow: hidden;
+  container-type: size;
+}
+
+/* Spinning gradient square, centred on the clip and sized to its diagonal.
+ * +12px of slack so the padding box stays covered. */
+.beam::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: calc(hypot(100cqw, 100cqh) + 12px);
+  aspect-ratio: 1;
+  translate: -50% -50%;
+  background-image: conic-gradient(from 0deg, var(--beam-stops));
+  animation: beam-rotate var(--beam-duration) linear infinite;
+}
+
+.beam-sm {
+  --beam-duration: 2.4s;
+  --beam-spread: 8%;
+}
+
+.beam-lg {
+  --beam-duration: 3.6s;
+  --beam-spread: 18%;
+}
+
+.beam-progress {
+  --beam-stops:
+    transparent 0%,
+    var(--beam-progress-color, var(--color-warning)) var(--beam-spread),
+    transparent calc(var(--beam-spread) * 2);
+}
+
+.beam-colorful {
+  --beam-stops:
+    transparent 0%,
+    var(--beam-colorful-from, var(--color-primary)) calc(var(--beam-spread) * 0.5),
+    color-mix(
+        in oklab,
+        var(--beam-colorful-from, var(--color-primary)),
+        var(--beam-colorful-to, var(--color-primary))
+      )
+      var(--beam-spread),
+    var(--beam-colorful-to, var(--color-primary)) calc(var(--beam-spread) * 1.5),
+    transparent calc(var(--beam-spread) * 2);
+}
+
+/* `:not([data-anim-chrome])`: the beam overlay is itself `aria-hidden`
+ * (decorative), which must not count as a parked subtree. */
+html[data-page-hidden] .beam::before,
+[aria-hidden="true"]:not([data-anim-chrome]) .beam::before,
+[data-anim-offscreen] .beam::before {
+  animation-play-state: paused;
+}