@usetheo/ui 0.19.0 → 0.21.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/primitives/file-dropzone/file-dropzone.d.ts

@@ -0,0 +1,26 @@
+/**
+ * FileDropzone — drag-drop + file-picker primitive, dependency-free (HTML5
+ * DnD). The drag mechanics, the typed-rejection shape and the browser quirks
+ * are ported from the react-dropzone reference study (blueprint M5): nested
+ * dragenter/dragleave target counting, empty MIME type during drag (Chrome),
+ * and the all-or-nothing maxFiles rule.
+ *
+ * Boundary: this component SELECTS and VALIDATES files. Uploading (network,
+ * progress) belongs to the consumer — compose with `Progress` for that.
+ * Directory drops are out of scope (entries without a real File are skipped).
+ */
+import type { HTMLAttributes, ReactNode } from "react";
+import type { FileRejection, ValidateFilesOptions } from "./validate.js";
+export { matchesAccept, validateFiles, type FileDropzoneError, type FileDropzoneErrorCode, type FileRejection, type ValidateFilesOptions, } from "./validate.js";
+export type FileDropzoneState = "idle" | "drag-over" | "drag-reject" | "disabled";
+export interface FileDropzoneProps extends Omit<HTMLAttributes<HTMLDivElement>, "onDrop" | "children">, ValidateFilesOptions {
+    /** Accessible name for the dropzone (aria-label). */
+    label: string;
+    disabled?: boolean;
+    onFilesAccepted?: (files: File[]) => void;
+    onFilesRejected?: (rejections: FileRejection[]) => void;
+    /** Custom instructions content; defaults to a drag-or-click hint. */
+    instructions?: ReactNode;
+}
+declare const FileDropzone: import("react").ForwardRefExoticComponent<FileDropzoneProps & import("react").RefAttributes<HTMLDivElement>>;
+export { FileDropzone };

package/dist/components/primitives/file-dropzone/index.d.ts

@@ -0,0 +1 @@
+export { FileDropzone, matchesAccept, validateFiles, type FileDropzoneError, type FileDropzoneErrorCode, type FileDropzoneProps, type FileDropzoneState, type FileRejection, type ValidateFilesOptions, } from "./file-dropzone.js";

package/dist/components/primitives/file-dropzone/validate.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Pure validation core of FileDropzone — typed rejections, accept matching
+ * (MIME exact / wildcard / extension), size and collective count rules.
+ * Ported behaviors from the react-dropzone reference study (blueprint M5).
+ */
+export type FileDropzoneErrorCode = "file-invalid-type" | "file-too-large" | "file-too-small" | "too-many-files";
+export interface FileDropzoneError {
+    /** One of the four built-in codes, or a custom code from `validator`. */
+    code: FileDropzoneErrorCode | string;
+    message: string;
+}
+export interface FileRejection {
+    file: File;
+    errors: FileDropzoneError[];
+}
+export interface ValidateFilesOptions {
+    accept?: Record<string, string[]>;
+    maxSize?: number;
+    minSize?: number;
+    maxFiles?: number;
+    multiple?: boolean;
+    validator?: (file: File) => FileDropzoneError | FileDropzoneError[] | null;
+}
+/**
+ * Matches a file against an `accept` map ({mime: [ext...]}): exact MIME,
+ * `type/*` wildcard, or extension (case-insensitive). No accept → accepts
+ * everything. An empty `file.type` is accepted (Chrome reports "" for some
+ * types during drag) — real validation happens again on drop.
+ */
+export declare function matchesAccept(file: File, accept?: Record<string, string[]>): boolean;
+/**
+ * Validates files against accept/size/count rules plus an optional custom
+ * validator. Per-file errors accumulate; the maxFiles/multiple rule is
+ * COLLECTIVE and all-or-nothing: exceeding it rejects EVERY file with
+ * `too-many-files` (ported from the reference behavior).
+ */
+export declare function validateFiles(files: File[], options?: ValidateFilesOptions): {
+    accepted: File[];
+    rejections: FileRejection[];
+};

package/dist/index.d.ts

@@ -48,6 +48,8 @@ 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 { FileDropzone, matchesAccept, validateFiles, type FileDropzoneError, type FileDropzoneErrorCode, type FileDropzoneProps, type FileDropzoneState, type FileRejection, type ValidateFilesOptions, } from "./components/primitives/file-dropzone/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,312 @@ 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";
+
+// src/components/primitives/file-dropzone/validate.ts
+function matchesAccept(file, accept) {
+  const entries = Object.entries(accept ?? {});
+  if (entries.length === 0) return true;
+  if (file.type === "") {
+    const exts = entries.flatMap(([, e]) => e);
+    if (exts.length === 0) return true;
+    return exts.some((ext) => file.name.toLowerCase().endsWith(ext.toLowerCase()));
+  }
+  return entries.some(([mime, exts]) => {
+    if (mime === file.type) return true;
+    if (mime.endsWith("/*") && file.type.startsWith(mime.slice(0, -1))) return true;
+    return exts.some((ext) => file.name.toLowerCase().endsWith(ext.toLowerCase()));
+  });
+}
+function acceptedExtensions(accept) {
+  const exts = Object.values(accept).flat();
+  return exts.length > 0 ? exts.join(", ") : Object.keys(accept).join(", ");
+}
+function validateFiles(files, options = {}) {
+  const { accept, maxSize, minSize, maxFiles, multiple = true, validator } = options;
+  const accepted = [];
+  const rejections = [];
+  for (const file of files) {
+    const errors = [];
+    if (accept && !matchesAccept(file, accept)) {
+      errors.push({
+        code: "file-invalid-type",
+        message: `File type must be one of ${acceptedExtensions(accept)}`
+      });
+    }
+    if (maxSize !== void 0 && file.size > maxSize) {
+      errors.push({ code: "file-too-large", message: `File is larger than ${maxSize} bytes` });
+    }
+    if (minSize !== void 0 && file.size < minSize) {
+      errors.push({ code: "file-too-small", message: `File is smaller than ${minSize} bytes` });
+    }
+    const custom = validator?.(file);
+    if (custom) errors.push(...Array.isArray(custom) ? custom : [custom]);
+    if (errors.length > 0) {
+      rejections.push({ file, errors });
+    } else {
+      accepted.push(file);
+    }
+  }
+  const tooMany = !multiple && accepted.length > 1 || maxFiles !== void 0 && maxFiles >= 1 && accepted.length > maxFiles;
+  if (tooMany) {
+    const limit = !multiple ? 1 : maxFiles;
+    for (const file of accepted) {
+      rejections.push({
+        file,
+        errors: [{ code: "too-many-files", message: `Too many files \u2014 at most ${limit} allowed` }]
+      });
+    }
+    accepted.length = 0;
+  }
+  return { accepted, rejections };
+}
+function hasFiles(event) {
+  return Array.from(event.dataTransfer?.types ?? []).includes("Files");
+}
+var FileDropzone = forwardRef(
+  ({
+    label,
+    disabled = false,
+    accept,
+    maxSize,
+    minSize,
+    maxFiles,
+    multiple = true,
+    validator,
+    onFilesAccepted,
+    onFilesRejected,
+    instructions,
+    className,
+    ...props
+  }, ref) => {
+    const dragTargetsRef = useRef([]);
+    const inputRef = useRef(null);
+    const [dragState, setDragState] = useState("idle");
+    const [rejections, setRejections] = useState([]);
+    const validateOptions = {
+      accept,
+      maxSize,
+      minSize,
+      maxFiles,
+      multiple,
+      validator
+    };
+    const processFiles = (files) => {
+      if (files.length === 0) return;
+      const result = validateFiles(files, validateOptions);
+      setRejections(result.rejections);
+      if (result.accepted.length > 0) onFilesAccepted?.(result.accepted);
+      if (result.rejections.length > 0) onFilesRejected?.(result.rejections);
+    };
+    const openPicker = () => {
+      const input = inputRef.current;
+      if (!input || disabled) return;
+      input.value = "";
+      input.click();
+    };
+    const onKeyDown = (event) => {
+      if (event.target !== event.currentTarget) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        openPicker();
+      }
+    };
+    const onDragEnter = (event) => {
+      event.preventDefault();
+      if (disabled || !hasFiles(event)) return;
+      dragTargetsRef.current = [...dragTargetsRef.current, event.target];
+      const items = Array.from(event.dataTransfer?.items ?? []).filter(
+        (item) => item.kind === "file"
+      );
+      const reject = accept !== void 0 && items.length > 0 && items.some(
+        (item) => item.type !== "" && !matchesAccept(
+          new File([], item.getAsFile?.()?.name ?? "", { type: item.type }),
+          accept
+        )
+      );
+      setDragState(reject ? "drag-reject" : "drag-over");
+    };
+    const onDragOver = (event) => {
+      event.preventDefault();
+      if (event.dataTransfer) {
+        try {
+          event.dataTransfer.dropEffect = "copy";
+        } catch {
+        }
+      }
+    };
+    const onDragLeave = (event) => {
+      event.preventDefault();
+      const root = event.currentTarget;
+      const targets = dragTargetsRef.current.filter((t) => root.contains(t));
+      const idx = targets.indexOf(event.target);
+      if (idx !== -1) targets.splice(idx, 1);
+      dragTargetsRef.current = targets;
+      if (targets.length === 0) setDragState("idle");
+    };
+    const onDrop = (event) => {
+      event.preventDefault();
+      dragTargetsRef.current = [];
+      setDragState("idle");
+      if (disabled || !hasFiles(event)) return;
+      processFiles(Array.from(event.dataTransfer?.files ?? []));
+    };
+    const state = disabled ? "disabled" : dragState;
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slot": "file-dropzone",
+          "data-state": state,
+          ref,
+          role: "button",
+          "aria-label": label,
+          "aria-disabled": disabled || void 0,
+          tabIndex: disabled ? void 0 : 0,
+          onClick: () => openPicker(),
+          onKeyDown,
+          onDragEnter,
+          onDragOver,
+          onDragLeave,
+          onDrop,
+          className: cn(
+            "flex min-h-24 cursor-pointer flex-col items-center justify-center gap-1 rounded-md border border-border border-dashed p-4 text-center",
+            state === "drag-over" && "border-primary bg-primary/5",
+            state === "drag-reject" && "border-destructive bg-destructive/5",
+            state === "disabled" && "cursor-not-allowed opacity-50",
+            className
+          ),
+          ...props,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "file-dropzone-instructions",
+              className: "text-body-sm text-muted-foreground",
+              children: instructions ?? "Drag files here or click to browse."
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          "data-slot": "file-dropzone-input",
+          ref: inputRef,
+          type: "file",
+          "aria-hidden": "true",
+          tabIndex: -1,
+          multiple,
+          accept: accept ? Object.entries(accept).flatMap(([m, e]) => [m, ...e]).join(",") : void 0,
+          disabled,
+          className: "sr-only",
+          onChange: (event) => processFiles(Array.from(event.target.files ?? []))
+        }
+      ),
+      rejections.length > 0 && /* @__PURE__ */ jsx(
+        "ul",
+        {
+          "data-slot": "file-dropzone-rejections",
+          className: "space-y-0.5 text-destructive text-label",
+          children: rejections.map((r) => /* @__PURE__ */ jsxs("li", { children: [
+            r.file.name,
+            " \u2014 ",
+            r.errors.map((e) => e.message).join("; ")
+          ] }, r.file.name))
+        }
+      )
+    ] });
+  }
+);
+FileDropzone.displayName = "FileDropzone";
 var MetricsPanel = forwardRef(
   ({ className, title, description, metrics, columns, ...props }, ref) => /* @__PURE__ */ jsxs(
     "div",
@@ -5469,4 +5775,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, FileDropzone, 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, matchesAccept, niceMax, seriesPath, sheetVariants, useStickToBottom, useToast, validateFiles };

package/package.json

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