@usetheo/ui 0.18.0 → 0.20.0

package/dist/components/composites/stepper/index.d.ts

@@ -0,0 +1 @@
+export { Stepper, deriveSteps, type StepStatus, type StepperProps, type StepperStepData, } from "./stepper.js";

package/dist/components/composites/stepper/stepper.d.ts

@@ -0,0 +1,47 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/**
+ * Stepper — multi-step pipeline progress, promoted from the theo-cloud
+ * dashboard build-timeline (production). Read-only by design: steps are NOT
+ * clickable (pipeline visualization, not a wizard). 100% controlled — live
+ * updates (SSE/polling) belong to the consumer.
+ *
+ * Contract: step `id`s MUST be unique (React keys); at most ONE step should
+ * be `active` (`aria-current="step"` is emitted per active step as-is).
+ * A `label` is required — it names the pipeline for screen readers.
+ *
+ *   <Stepper label="Build pipeline" steps={[
+ *     { id: "queued", label: "Queued", status: "done" },
+ *     { id: "build", label: "Building", status: "active" },
+ *   ]} />
+ *
+ * For the simple "wizard position" case, derive the array from an index:
+ *   <Stepper label="Onboarding" steps={deriveSteps(defs, activeIndex)} />
+ */
+export type StepStatus = "pending" | "active" | "done" | "failed";
+export interface StepperStepData {
+    /** Unique key for the step (consumer contract: no duplicates). */
+    id: string;
+    label: string;
+    /** For failed steps, pass the failure cause here — it is read by screen readers inside the same item (F-dom-3). */
+    description?: string;
+    status: StepStatus;
+    /** Optional slot — prefer `<Timestamp value={...} />` from this library. */
+    timestamp?: ReactNode;
+    /** Optional slot rendered ONLY when status === "failed" (the action belongs to the consumer). */
+    retry?: ReactNode;
+}
+export interface StepperProps extends HTMLAttributes<HTMLOListElement> {
+    /** Accessible name for the pipeline (aria-label of the list). */
+    label: string;
+    steps: StepperStepData[];
+    /** @default "vertical" — both production cases (build/ingest) are vertical. */
+    orientation?: "vertical" | "horizontal";
+}
+/**
+ * Pure helper for the simple index-driven case: steps before `activeIndex`
+ * are done, the step at it is active, later ones are pending. Out-of-range
+ * indexes are safe: past the end → all done; negative → all pending.
+ */
+export declare function deriveSteps(defs: Array<Pick<StepperStepData, "id" | "label" | "description">>, activeIndex: number): StepperStepData[];
+declare const Stepper: import("react").ForwardRefExoticComponent<StepperProps & import("react").RefAttributes<HTMLOListElement>>;
+export { Stepper };

package/dist/components/composites/trend-chart/index.d.ts

@@ -0,0 +1 @@
+export { linScale, niceMax, seriesPath, TrendChart, type TrendChartProps, type TrendPoint, type TrendSeries, } from "./trend-chart.js";

package/dist/components/composites/trend-chart/trend-chart.d.ts

@@ -0,0 +1,44 @@
+import type { HTMLAttributes } from "react";
+/**
+ * TrendChart — multi-series time-trend chart in pure SVG (no chart lib —
+ * keeps the registry copy-pasteable). Promoted from the theo-cloud dashboard
+ * (production since M51, with the M76 sparse-marker and M90 ragged-series
+ * lessons pinned by tests).
+ *
+ * Input contract: `y` values are expected finite and >= 0 (latency, counts);
+ * non-finite points are skipped in the line and read as "—" in the table;
+ * gaps are modeled by OMITTING the point (the a11y table reads each value
+ * under its own period — never positionally). Points are connected in the
+ * order given; sort by `x` upstream. Series `color` is any CSS color — prefer
+ * theme tokens (e.g. `var(--primary)`).
+ *
+ *   <TrendChart title="Latency" valueFormatter={(v) => `${v}ms`}
+ *               series={[{ name: "p50", color: "var(--primary)", points }]} />
+ */
+export interface TrendPoint {
+    /** X in the series' own units (bucket index or epoch-ms); scaled linearly. */
+    x: number;
+    /** Y value for this point. */
+    y: number;
+}
+export interface TrendSeries {
+    name: string;
+    /** CSS color for the line + legend swatch (prefer theme tokens). */
+    color: string;
+    points: TrendPoint[];
+}
+/** Linear scale mapping a value in `domain` to `range`. A zero-width domain maps everything to r0. */
+export declare function linScale(domain: [number, number], range: [number, number]): (v: number) => number;
+/** A clean upper Y bound ≥ max(values). Returns 0 when there is no positive value. */
+export declare function niceMax(values: number[]): number;
+/** SVG path `d` for a polyline over the given scales. Non-finite points are skipped. */
+export declare function seriesPath(points: TrendPoint[], xScale: (x: number) => number, yScale: (y: number) => number): string;
+export interface TrendChartProps extends HTMLAttributes<HTMLElement> {
+    title: string;
+    series: TrendSeries[];
+    height?: number;
+    /** Formats y-axis labels and table cells (tremor vocabulary). */
+    valueFormatter?: (v: number) => string;
+}
+declare const TrendChart: import("react").ForwardRefExoticComponent<TrendChartProps & import("react").RefAttributes<HTMLElement>>;
+export { TrendChart };

package/dist/index.d.ts

@@ -47,6 +47,8 @@ export { ActionBar, type ActionBarProps } from "./components/primitives/action-b
 export { PinInput, type PinInputProps } from "./components/primitives/pin-input/index.js";
 export { DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, } from "./components/composites/data-table/index.js";
 export { PageShell, type PageShellProps } from "./components/composites/page-shell/index.js";
+export { linScale, niceMax, seriesPath, TrendChart, type TrendChartProps, type TrendPoint, type TrendSeries, } from "./components/composites/trend-chart/index.js";
+export { Stepper, deriveSteps, type StepStatus, type StepperProps, type StepperStepData, } from "./components/composites/stepper/index.js";
 export { MetricsPanel, type Metric } from "./components/primitives/metrics-panel/index.js";
 export { SocialAuthRow, type SocialProvider, } from "./components/primitives/social-auth-row/index.js";
 export { LoginSplit } from "./components/primitives/login-split/index.js";

package/dist/index.js

@@ -4,7 +4,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { forwardRef, useState, useRef, useEffect, useCallback, createContext, useId, useMemo, Children, isValidElement, cloneElement, Fragment as Fragment$1, useContext, createElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Check, X, Copy, Loader2, ArrowUpCircle, AlertCircle, ChevronDown, ChevronUp, Minus, Circle, ChevronRight, ChevronsUpDown, TrendingDown, TrendingUp, ArrowUpRight, TriangleAlert, CheckCircle2, Info, ChevronsLeft, ChevronLeft, ChevronsRight, Search, Filter, GitCommit, GitBranch, Activity, Plus, Lock, EyeOff, Eye, Trash2, GitPullRequest, Server, ExternalLink, Globe, ShieldCheck, ShieldX, Clock, RotateCcw, ArrowDownLeft, MoreHorizontal } from 'lucide-react';
+import { Check, X, Copy, Loader2, ArrowUpCircle, AlertCircle, ChevronDown, ChevronUp, Minus, Circle, ChevronRight, ChevronsUpDown, TrendingDown, TrendingUp, ArrowUpRight, TriangleAlert, CheckCircle2, Info, ChevronsLeft, ChevronLeft, ChevronsRight, Search, Filter, CircleDashed, GitCommit, GitBranch, Activity, Plus, Lock, EyeOff, Eye, Trash2, GitPullRequest, Server, ExternalLink, Globe, ShieldCheck, ShieldX, Clock, RotateCcw, ArrowDownLeft, MoreHorizontal } from 'lucide-react';
 import { Command, useCommandState } from 'cmdk';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -4378,6 +4378,256 @@ var PageShell = forwardRef(
   }
 );
 PageShell.displayName = "PageShell";
+function linScale(domain, range) {
+  const [d0, d1] = domain;
+  const [r0, r1] = range;
+  const span = d1 - d0;
+  return (v) => span === 0 ? r0 : r0 + (v - d0) / span * (r1 - r0);
+}
+function niceMax(values) {
+  const m = Math.max(0, ...values.filter((v) => Number.isFinite(v)));
+  if (m <= 0) return 0;
+  const pow = 10 ** Math.floor(Math.log10(m));
+  return Math.ceil(m / pow) * pow;
+}
+function seriesPath(points, xScale, yScale) {
+  const finite = points.filter((p) => Number.isFinite(p.y));
+  if (finite.length === 0) return "";
+  return finite.map((p, i) => `${i === 0 ? "M" : "L"}${xScale(p.x).toFixed(2)},${yScale(p.y).toFixed(2)}`).join(" ");
+}
+var VIEW_W = 600;
+var PAD = { top: 8, right: 8, bottom: 4, left: 40 };
+var SPARSE_MARKER_MAX = 5;
+var TrendChart = forwardRef(
+  ({ title, series, height = 180, valueFormatter = (v) => String(v), className, ...props }, ref) => {
+    const allPoints = series.flatMap((s) => s.points);
+    const hasData = allPoints.some((p) => Number.isFinite(p.y));
+    if (!hasData) {
+      return /* @__PURE__ */ jsxs(
+        "figure",
+        {
+          "data-slot": "trend-chart",
+          ref,
+          className: cn("space-y-1", className),
+          "aria-label": `${title} \u2014 no data`,
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx("figcaption", { className: "font-semibold text-label-caps text-muted-foreground uppercase", children: title }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-slot": "trend-chart-empty",
+                className: "flex items-center justify-center rounded-md border border-dashed text-body-sm text-muted-foreground",
+                style: { height },
+                children: "No data in this time range."
+              }
+            )
+          ]
+        }
+      );
+    }
+    const xs = allPoints.map((p) => p.x);
+    const xMin = Math.min(...xs);
+    const xMax = Math.max(...xs);
+    const yMax = niceMax(allPoints.map((p) => p.y)) || 1;
+    const axisXs = Array.from(new Set(allPoints.map((p) => p.x))).sort((a, b) => a - b);
+    const yByX = series.map((s) => new Map(s.points.map((p) => [p.x, p.y])));
+    const xScale = linScale([xMin, xMax], [PAD.left, VIEW_W - PAD.right]);
+    const yScale = linScale([0, yMax], [height - PAD.bottom, PAD.top]);
+    return /* @__PURE__ */ jsxs("figure", { "data-slot": "trend-chart", ref, className: cn("space-y-1", className), ...props, children: [
+      /* @__PURE__ */ jsx("figcaption", { className: "font-semibold text-label-caps text-muted-foreground uppercase", children: title }),
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          viewBox: `0 0 ${VIEW_W} ${height}`,
+          preserveAspectRatio: "none",
+          role: "img",
+          "aria-label": `${title} trend`,
+          className: "w-full",
+          style: { height },
+          children: [
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: PAD.left,
+                y1: height - PAD.bottom,
+                x2: VIEW_W - PAD.right,
+                y2: height - PAD.bottom,
+                className: "stroke-border",
+                strokeWidth: 1
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: PAD.left,
+                y1: PAD.top,
+                x2: VIEW_W - PAD.right,
+                y2: PAD.top,
+                className: "stroke-border/50",
+                strokeWidth: 1,
+                strokeDasharray: "2 3"
+              }
+            ),
+            /* @__PURE__ */ jsx("text", { x: 4, y: PAD.top + 8, className: "fill-muted-foreground text-[10px]", children: valueFormatter(yMax) }),
+            /* @__PURE__ */ jsx("text", { x: 4, y: height - PAD.bottom, className: "fill-muted-foreground text-[10px]", children: "0" }),
+            series.map((s) => /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  "data-slot": "trend-chart-line",
+                  "data-series": s.name,
+                  d: seriesPath(s.points, xScale, yScale),
+                  fill: "none",
+                  stroke: s.color,
+                  strokeWidth: 1.5,
+                  children: /* @__PURE__ */ jsx("title", { children: s.name })
+                }
+              ),
+              s.points.length < SPARSE_MARKER_MAX ? s.points.filter((p) => Number.isFinite(p.y)).map((p, i) => /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  "data-slot": "trend-chart-dot",
+                  cx: xScale(p.x),
+                  cy: yScale(p.y),
+                  r: 2.5,
+                  fill: s.color,
+                  children: /* @__PURE__ */ jsx("title", { children: s.name })
+                },
+                `${s.name}-${p.x}-${i}`
+              )) : null
+            ] }, s.name))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "ul",
+        {
+          "data-slot": "trend-chart-legend",
+          className: "flex flex-wrap gap-3 text-body-sm text-muted-foreground",
+          children: series.map((s) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "inline-block h-2 w-2 rounded-sm",
+                style: { backgroundColor: s.color }
+              }
+            ),
+            s.name
+          ] }, s.name))
+        }
+      ),
+      /* @__PURE__ */ jsxs("table", { "data-slot": "trend-chart-table", className: "sr-only", children: [
+        /* @__PURE__ */ jsxs("caption", { children: [
+          title,
+          " \u2014 data table"
+        ] }),
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", { children: "Point" }),
+          series.map((s) => /* @__PURE__ */ jsx("th", { children: s.name }, s.name))
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: axisXs.map((x, i) => /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("td", { children: i + 1 }),
+          series.map((s, si) => {
+            const y = yByX[si]?.get(x);
+            return /* @__PURE__ */ jsx("td", { children: y !== void 0 && Number.isFinite(y) ? valueFormatter(y) : "\u2014" }, s.name);
+          })
+        ] }, x)) })
+      ] })
+    ] });
+  }
+);
+TrendChart.displayName = "TrendChart";
+function deriveSteps(defs, activeIndex) {
+  return defs.map((def, i) => ({
+    ...def,
+    status: i < activeIndex ? "done" : i === activeIndex ? "active" : "pending"
+  }));
+}
+var ICON = {
+  done: Check,
+  active: Loader2,
+  failed: X,
+  pending: CircleDashed
+};
+var ICON_TONE = {
+  done: "text-success",
+  active: "animate-spin text-primary",
+  failed: "text-destructive",
+  pending: "text-muted-foreground"
+};
+var LABEL_TONE = {
+  done: "font-medium text-foreground",
+  active: "font-semibold text-primary",
+  failed: "font-semibold text-destructive",
+  pending: "font-medium text-muted-foreground"
+};
+var SR_STATE_TEXT = {
+  done: " \u2014 completed",
+  active: null,
+  failed: " \u2014 failed",
+  pending: " \u2014 not started"
+};
+var Stepper = forwardRef(
+  ({ label, steps, orientation = "vertical", className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "ol",
+    {
+      "data-slot": "stepper",
+      "data-orientation": orientation,
+      ref,
+      "aria-label": label,
+      className: cn(
+        orientation === "horizontal" ? "flex flex-wrap gap-x-6 gap-y-3" : "space-y-3",
+        className
+      ),
+      ...props,
+      children: steps.map((s) => {
+        const status = Object.hasOwn(ICON, s.status) ? s.status : "pending";
+        const Icon2 = ICON[status];
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            "data-slot": "stepper-step",
+            "data-state": status,
+            "aria-current": status === "active" ? "step" : void 0,
+            className: "flex items-start gap-3",
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full border border-border",
+                  "data-slot": "stepper-icon",
+                  children: /* @__PURE__ */ jsx(Icon2, { className: cn("size-3", ICON_TONE[status]) })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxs(
+                  "p",
+                  {
+                    "data-slot": "stepper-label",
+                    title: s.label,
+                    className: cn("truncate text-body-sm", LABEL_TONE[status]),
+                    children: [
+                      s.label,
+                      SR_STATE_TEXT[status] && /* @__PURE__ */ jsx("span", { className: "sr-only", children: SR_STATE_TEXT[status] })
+                    ]
+                  }
+                ),
+                s.description && /* @__PURE__ */ jsx("p", { className: "text-label text-muted-foreground", children: s.description }),
+                s.timestamp && /* @__PURE__ */ jsx("p", { "data-slot": "stepper-timestamp", className: "text-label text-muted-foreground", children: s.timestamp }),
+                status === "failed" && s.retry && /* @__PURE__ */ jsx("div", { "data-slot": "stepper-retry", className: "mt-1", children: s.retry })
+              ] })
+            ]
+          },
+          s.id
+        );
+      })
+    }
+  )
+);
+Stepper.displayName = "Stepper";
 var MetricsPanel = forwardRef(
   ({ className, title, description, metrics, columns, ...props }, ref) => /* @__PURE__ */ jsxs(
     "div",
@@ -5308,4 +5558,4 @@ function CommandPalette({
   ] }) });
 }
 
-export { AccountMenu, ActionBar, Alert, Avatar, BadgeWithDot as Badge, Breadcrumb, Button, Card, Checkbox, CodeBlock, Combobox, CommandPalette, ConfirmDialog, CopyButton, DangerZone, DataTable, DeploymentRow, DescriptionList, Dialog, DomainConfig, DropdownMenu, EmptyState, EnvVarEditor, FormField, Input, JsonViewer, Label, LoginSplit, MetricCard, MetricsPanel, PageShell, Pagination, PinInput, PlanBadge, PreviewEnvCard, Progress, ProjectCard, RadioGroup, RollbackUI, ScrollArea, Select, Sheet, Sidebar, Skeleton, Slider, SocialAuthRow, StatTile, StatusDot, StatusIndicator, Switch, Table, Tabs, TaskHeader, Textarea, Timestamp, Toast, Toaster, TooltipWithStatics as Tooltip, TopNav, UpdateBanner, avatarVariants, badgeVariants, buttonVariants, cn, computePageRange, isNearBottom, sheetVariants, useStickToBottom, useToast };
+export { AccountMenu, ActionBar, Alert, Avatar, BadgeWithDot as Badge, Breadcrumb, Button, Card, Checkbox, CodeBlock, Combobox, CommandPalette, ConfirmDialog, CopyButton, DangerZone, DataTable, DeploymentRow, DescriptionList, Dialog, DomainConfig, DropdownMenu, EmptyState, EnvVarEditor, FormField, Input, JsonViewer, Label, LoginSplit, MetricCard, MetricsPanel, PageShell, Pagination, PinInput, PlanBadge, PreviewEnvCard, Progress, ProjectCard, RadioGroup, RollbackUI, ScrollArea, Select, Sheet, Sidebar, Skeleton, Slider, SocialAuthRow, StatTile, StatusDot, StatusIndicator, Stepper, Switch, Table, Tabs, TaskHeader, Textarea, Timestamp, Toast, Toaster, TooltipWithStatics as Tooltip, TopNav, TrendChart, UpdateBanner, avatarVariants, badgeVariants, buttonVariants, cn, computePageRange, deriveSteps, isNearBottom, linScale, niceMax, seriesPath, sheetVariants, useStickToBottom, useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usetheo/ui",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "type": "module",
   "license": "Apache-2.0",
   "description": "Violet Forge design system — generic React components + primitives (the non-AI foundation of @theokit/ui).",