@usetheo/ui 0.19.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/index.d.ts

@@ -48,6 +48,7 @@ export { PinInput, type PinInputProps } from "./components/primitives/pin-input/
 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';
@@ -4539,6 +4539,95 @@ var TrendChart = forwardRef(
   }
 );
 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",
@@ -5469,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, TrendChart, UpdateBanner, avatarVariants, badgeVariants, buttonVariants, cn, computePageRange, isNearBottom, linScale, niceMax, seriesPath, 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.19.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).",