@tangle-network/ui 11.12.0 → 11.13.0

package/dist/primitives/progress.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+//#region src/primitives/progress.d.ts
+declare const Progress: React.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+  variant?: "default" | "sandbox";
+  showValue?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Progress };

package/dist/primitives/progress.js

@@ -0,0 +1,29 @@
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+//#region src/primitives/progress.tsx
+const Progress = React.forwardRef(({ className, value, variant = "default", showValue = false, ...props }, ref) => {
+	const indicatorVariants = {
+		default: "bg-primary",
+		sandbox: "bg-[image:var(--accent-gradient-strong)]"
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsx(ProgressPrimitive.Root, {
+			ref,
+			className: cn("relative h-2 w-full overflow-hidden rounded-full bg-muted", className),
+			...props,
+			children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, {
+				className: cn("h-full w-full flex-1 transition-all duration-300 ease-out", indicatorVariants[variant]),
+				style: { transform: `translateX(-${100 - (value || 0)}%)` }
+			})
+		}), showValue && /* @__PURE__ */ jsxs("span", {
+			className: "absolute -top-6 right-0 text-muted-foreground text-xs",
+			children: [value, "%"]
+		})]
+	});
+});
+Progress.displayName = ProgressPrimitive.Root.displayName;
+//#endregion
+export { Progress };

package/dist/primitives/segmented-control.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+//#region src/primitives/segmented-control.d.ts
+/**
+ * Visually lightweight segmented control for single-value selection.
+ *
+ * Uses role="radiogroup" / role="radio" because this is a value-selector
+ * with no associated panels — not a tab interface. Arrow keys navigate
+ * between options (with wrapping), Home/End jump to first/last.
+ *
+ * **Accessibility:** Provide either `aria-label` or `aria-labelledby` — the
+ * ARIA spec requires every radiogroup to have an accessible name. A dev-mode
+ * console warning fires when both are omitted.
+ *
+ * Design rules baked into the default variant:
+ *   - Only the SELECTED segment shows a surface colour + accent text.
+ *   - Unselected segments have NO background — they're plain-text labels
+ *     that darken on hover. This keeps the selected segment as the
+ *     single visual anchor instead of the whole group competing with
+ *     itself.
+ */
+export interface SegmentedControlOption<T extends string = string> {
+  value: T;
+  label: React.ReactNode;
+  /** Rendered right of the label, typically a count or status pill. */
+  adornment?: React.ReactNode;
+}
+export interface SegmentedControlProps<T extends string = string> extends Pick<React.HTMLAttributes<HTMLDivElement>, "id" | "className" | "aria-label" | "aria-labelledby"> {
+  value: T;
+  onValueChange: (value: T) => void;
+  options: SegmentedControlOption<T>[];
+  /**
+   * Layout:
+   *   - "row"   — horizontal pill bar (default, fits in a header region)
+   *   - "tabs"  — horizontal with a bottom border so the selected pill
+   *              reads as a classic tab (used on the Team page)
+   */
+  variant?: "row" | "tabs";
+}
+export declare function SegmentedControl<T extends string = string>({ value, onValueChange, options, variant, className, ...rest }: SegmentedControlProps<T>): React.JSX.Element;
+//#endregion

package/dist/primitives/segmented-control.js

@@ -0,0 +1,57 @@
+"use client";
+import { focusRing, focusRingInset } from "../lib/focus.js";
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/segmented-control.tsx
+function SegmentedControl({ value, onValueChange, options, variant = "row", className, ...rest }) {
+	if (typeof process !== "undefined" && process?.env?.NODE_ENV !== "production" && !rest["aria-label"] && !rest["aria-labelledby"]) console.warn("[SegmentedControl] role=\"radiogroup\" requires either aria-label or aria-labelledby for accessibility.");
+	const optionRefs = React.useRef(/* @__PURE__ */ new Map());
+	const hasMatch = options.some((o) => o.value === value);
+	const handleKeyDown = (e) => {
+		if (options.length === 0) return;
+		let idx = options.findIndex((o) => o.value === value);
+		if (idx === -1) idx = 0;
+		let next;
+		if (e.key === "ArrowRight" || e.key === "ArrowDown") next = (idx + 1) % options.length;
+		else if (e.key === "ArrowLeft" || e.key === "ArrowUp") next = (idx - 1 + options.length) % options.length;
+		else if (e.key === "Home") next = 0;
+		else if (e.key === "End") next = options.length - 1;
+		if (next !== void 0) {
+			e.preventDefault();
+			if (options[next].value !== value) onValueChange(options[next].value);
+			optionRefs.current.get(options[next].value)?.focus();
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		role: "radiogroup",
+		id: rest.id,
+		"aria-label": rest["aria-label"],
+		"aria-labelledby": rest["aria-labelledby"],
+		onKeyDown: handleKeyDown,
+		className: cn("flex gap-1", variant === "row" && "flex-wrap items-center rounded-lg border border-border bg-card p-1", variant === "tabs" && "flex-nowrap items-end border-b border-border pb-0 overflow-x-auto", className),
+		children: options.map((option, i) => {
+			const active = option.value === value;
+			return /* @__PURE__ */ jsxs("button", {
+				ref: (el) => {
+					if (el) optionRefs.current.set(option.value, el);
+					else optionRefs.current.delete(option.value);
+				},
+				type: "button",
+				role: "radio",
+				"aria-checked": active,
+				tabIndex: active || !hasMatch && i === 0 ? 0 : -1,
+				onClick: () => {
+					if (!active) onValueChange(option.value);
+				},
+				className: cn("relative inline-flex items-center gap-2 whitespace-nowrap text-sm transition-[color,background-color,border-color,box-shadow]", variant === "row" && ["rounded-md px-3 py-1.5", focusRing], variant === "tabs" && ["rounded-none border-b-2 -mb-px px-4 py-2", focusRingInset], active ? variant === "row" ? "border border-transparent bg-[var(--accent-surface)] text-[var(--accent-text)] font-semibold" : "border-[var(--accent-text)] text-[var(--accent-text)] font-semibold" : variant === "row" ? "border border-transparent text-muted-foreground hover:text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"),
+				children: [/* @__PURE__ */ jsx("span", { children: option.label }), option.adornment && /* @__PURE__ */ jsx("span", {
+					className: cn("text-xs", active ? "text-[var(--accent-text)]/80" : "text-muted-foreground"),
+					children: option.adornment
+				})]
+			}, option.value);
+		})
+	});
+}
+//#endregion
+export { SegmentedControl };

package/dist/primitives/select.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+//#region src/primitives/select.d.ts
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/primitives/select.js

@@ -0,0 +1,74 @@
+"use client";
+import { focusField } from "../lib/focus.js";
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+//#region src/primitives/select.tsx
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
+	ref,
+	className: cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-card px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", focusField, className),
+	...props,
+	children: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" })
+	})]
+}));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, {
+	ref,
+	className: cn("flex cursor-default items-center justify-center py-1", className),
+	...props,
+	children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
+}));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, {
+	ref,
+	className: cn("flex cursor-default items-center justify-center py-1", className),
+	...props,
+	children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+}));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(SelectPrimitive.Content, {
+	ref,
+	className: cn("data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-card text-foreground shadow-[var(--shadow-card)] data-[state=closed]:animate-out data-[state=open]:animate-in", position === "popper" && "data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1", className),
+	position,
+	...props,
+	children: [
+		/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+		/* @__PURE__ */ jsx(SelectPrimitive.Viewport, {
+			className: cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),
+			children
+		}),
+		/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+	]
+}) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Label, {
+	ref,
+	className: cn("px-2 py-1.5 font-semibold text-sm", className),
+	...props
+}));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
+	ref,
+	className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none focus:bg-muted/50 focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+	...props,
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center",
+		children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) })
+	}), /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })]
+}));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Separator, {
+	ref,
+	className: cn("-mx-1 my-1 h-px bg-border", className),
+	...props
+}));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+//#endregion
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/primitives/sidebar-drop-zone.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+//#region src/primitives/sidebar-drop-zone.d.ts
+export interface SidebarDropZoneProps {
+  /** Called with dropped files */
+  onDrop: (files: File[]) => void;
+  /** Accepted file types (e.g. ".pdf,.csv") */
+  accept?: string;
+  /** Whether drop zone is active */
+  disabled?: boolean;
+  /** Title shown in the drop zone */
+  title?: string;
+  /** Description shown below the title */
+  description?: string;
+  /** Custom icon (replaces default upload icon) */
+  icon?: ReactNode;
+  /** Always visible (not just on drag). Useful as a persistent upload area. */
+  persistent?: boolean;
+  className?: string;
+}
+export declare function SidebarDropZone({ onDrop, accept, disabled, title, description, icon, persistent, className }: SidebarDropZoneProps): import("react").JSX.Element;
+//#endregion

package/dist/primitives/sidebar-drop-zone.js

@@ -0,0 +1,88 @@
+import { cn } from "../lib/utils.js";
+import { useCallback, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Upload } from "lucide-react";
+//#region src/primitives/sidebar-drop-zone.tsx
+/**
+* SidebarDropZone — compact scoped drop zone for sidebar panels and narrow containers.
+*
+* Unlike the full-window DropZone, this renders as an inline element
+* that can be placed inside sidebar panels, file trees, or any container.
+* Shows a subtle drop target when files are dragged over it.
+*
+* Usage:
+*   <SidebarPanelContent>
+*     <FileTree ... />
+*     <SidebarDropZone onDrop={uploadToWorkspace} title="Upload to workspace" />
+*   </SidebarPanelContent>
+*/
+function SidebarDropZone({ onDrop, accept, disabled, title = "Drop files here", description, icon, persistent = false, className }) {
+	const [dragOver, setDragOver] = useState(false);
+	const counter = useRef(0);
+	const isAccepted = useCallback((file) => {
+		if (!accept) return true;
+		const extensions = accept.split(",").map((ext) => ext.trim().toLowerCase());
+		const fileName = file.name.toLowerCase();
+		return extensions.some((ext) => fileName.endsWith(ext));
+	}, [accept]);
+	const handleDragEnter = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if (disabled) return;
+		counter.current++;
+		if (e.dataTransfer?.types.includes("Files")) setDragOver(true);
+	}, [disabled]);
+	const handleDragLeave = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		counter.current--;
+		if (counter.current === 0) setDragOver(false);
+	}, []);
+	const handleDragOver = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if (!disabled) e.dataTransfer.dropEffect = "copy";
+	}, [disabled]);
+	const handleDrop = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		counter.current = 0;
+		setDragOver(false);
+		if (disabled) return;
+		const allFiles = Array.from(e.dataTransfer?.files || []);
+		const accepted = accept ? allFiles.filter(isAccepted) : allFiles;
+		if (accepted.length > 0) onDrop(accepted);
+	}, [
+		disabled,
+		accept,
+		isAccepted,
+		onDrop
+	]);
+	const isVisible = persistent || dragOver;
+	return /* @__PURE__ */ jsx("div", {
+		onDragEnter: handleDragEnter,
+		onDragLeave: handleDragLeave,
+		onDragOver: handleDragOver,
+		onDrop: handleDrop,
+		className: cn("rounded-lg border-2 border-dashed transition-all duration-150", isVisible ? "p-4" : "p-0 border-transparent", dragOver ? "border-[var(--brand-cool,hsl(var(--ring)))] bg-[var(--accent-surface-soft)]" : persistent ? "border-[var(--border-subtle,hsl(var(--border)))] bg-transparent hover:border-[var(--border-default,hsl(var(--border)))] hover:bg-[var(--bg-hover,hsl(var(--accent)))]" : "", disabled && "opacity-50 pointer-events-none", className),
+		children: isVisible && /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center gap-2 text-center",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: cn("flex h-8 w-8 items-center justify-center rounded-lg transition-colors", dragOver ? "bg-[var(--brand-cool,hsl(var(--primary)))]/15 text-[var(--brand-cool,hsl(var(--primary)))]" : "text-[var(--text-muted,hsl(var(--muted-foreground)))]"),
+					children: icon ?? /* @__PURE__ */ jsx(Upload, { className: "h-4 w-4" })
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: cn("text-xs font-medium", dragOver ? "text-[var(--text-primary,hsl(var(--foreground)))]" : "text-[var(--text-muted,hsl(var(--muted-foreground)))]"),
+					children: title
+				}),
+				description && /* @__PURE__ */ jsx("p", {
+					className: "text-[10px] text-[var(--text-muted,hsl(var(--muted-foreground)))]",
+					children: description
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { SidebarDropZone };

package/dist/primitives/skeleton.d.ts

@@ -0,0 +1,10 @@
+//#region src/primitives/skeleton.d.ts
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+declare function SkeletonCard({ className }: {
+  className?: string;
+}): import("react").JSX.Element;
+declare function SkeletonTable({ rows }: {
+  rows?: number;
+}): import("react").JSX.Element;
+//#endregion
+export { Skeleton, SkeletonCard, SkeletonTable };

package/dist/primitives/skeleton.js

@@ -0,0 +1,50 @@
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/skeleton.tsx
+function Skeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("animate-pulse rounded-lg bg-muted/50", className),
+		...props
+	});
+}
+function SkeletonCard({ className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-4 rounded-xl border border-border bg-card p-6", className),
+		children: [
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-2 pt-4",
+				children: [
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-full" }),
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-5/6" }),
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-4/6" })
+				]
+			})
+		]
+	});
+}
+function SkeletonTable({ rows = 5 }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex gap-4 border-border border-b pb-2",
+			children: [
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/4" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/4" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/4" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/4" })
+			]
+		}), Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-4",
+			children: [
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/4" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/4" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/4" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/4" })
+			]
+		}, i))]
+	});
+}
+//#endregion
+export { Skeleton, SkeletonCard, SkeletonTable };

package/dist/primitives/stat-card.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+//#region src/primitives/stat-card.d.ts
+export interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: "default" | "sandbox";
+  title: string;
+  value: string | number;
+  subtitle?: string;
+  icon?: React.ReactNode;
+  trend?: {
+    value: number;
+    label?: string;
+  };
+}
+declare const StatCard: React.ForwardRefExoticComponent<StatCardProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { StatCard };

package/dist/primitives/stat-card.js

@@ -0,0 +1,60 @@
+import { cn } from "../lib/utils.js";
+import { Card } from "./card.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/stat-card.tsx
+const StatCard = React.forwardRef(({ className, variant = "default", title, value, subtitle, icon, trend, ...props }, ref) => {
+	const iconColors = {
+		default: "text-muted-foreground",
+		sandbox: "text-[var(--accent-text)]"
+	};
+	const trendColors = {
+		positive: "text-[var(--surface-success-text)]",
+		negative: "text-[var(--surface-danger-text)]",
+		neutral: "text-muted-foreground"
+	};
+	const trendStatus = trend ? trend.value > 0 ? "positive" : trend.value < 0 ? "negative" : "neutral" : null;
+	return /* @__PURE__ */ jsx(Card, {
+		ref,
+		variant,
+		className: cn("p-6", className),
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start justify-between",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "space-y-1",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-sm",
+						children: title
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "font-bold text-3xl tracking-tight",
+						children: value
+					}),
+					subtitle && /* @__PURE__ */ jsx("p", {
+						className: "text-[var(--text-dim)] text-xs",
+						children: subtitle
+					}),
+					trend && trendStatus && /* @__PURE__ */ jsxs("div", {
+						className: cn("flex items-center gap-1 text-sm", trendColors[trendStatus]),
+						children: [
+							trend.value > 0 ? "↑" : trend.value < 0 ? "↓" : "→",
+							/* @__PURE__ */ jsxs("span", { children: [Math.abs(trend.value), "%"] }),
+							trend.label && /* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground",
+								children: trend.label
+							})
+						]
+					})
+				]
+			}), icon && /* @__PURE__ */ jsx("div", {
+				className: cn("rounded-lg bg-muted/50 p-2", variant === "sandbox" && "bg-[var(--accent-surface-soft)]", iconColors[variant]),
+				children: icon
+			})]
+		})
+	});
+});
+StatCard.displayName = "StatCard";
+//#endregion
+export { StatCard };

package/dist/primitives/status-pill.d.ts

@@ -0,0 +1,44 @@
+import * as React from "react";
+//#region src/primitives/status-pill.d.ts
+/**
+ * A run/resource state, told three ways at once.
+ *
+ * Status is the one place a console cannot afford to speak in colour alone: a
+ * red dot and a green dot are the same dot to roughly one man in twelve, and
+ * identical in a greyscale print or a screenshot pasted into a ticket. So every
+ * pill carries all three channels — a GLYPH whose silhouette differs per tone,
+ * the tone's COLOUR, and the state's own LABEL as text.
+ *
+ * The glyphs are chosen to survive at 8px and to differ in outline rather than
+ * in fill: a ring reads as "still open", a solid disc as "settled", a slashed
+ * disc as "stopped". Two states never share one silhouette.
+ *
+ * Each tone draws its fill, border and text from ONE matched token triple.
+ * That pairing is the whole point: a status colour is solved against its own
+ * background, and nothing guarantees it against an arbitrary one. A component
+ * that always brings its own background cannot be placed onto a plane that
+ * breaks it.
+ */
+export type StatusTone = "success" | "warning" | "danger" | "info" | "neutral" | "running";
+export interface StatusPillProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+  tone: StatusTone;
+  children: React.ReactNode;
+  /**
+   * Drops the fill and border, leaving a toned GLYPH beside a label in the
+   * inherited body colour.
+   *
+   * The label deliberately does not keep the tone. Every status text token
+   * clears the 4.5:1 body floor on the page canvas — a gate holds them there —
+   * but in light the margin is thin (4.51:1 for warning, 4.54:1 for success),
+   * and the canvas is only one of the planes a caller can put a pill on. The
+   * glyph keeps the tone instead because a glyph is non-text content against a
+   * 3:1 floor, so the tone still reads with room to spare on any plane.
+   *
+   * For a control that supplies its own surface (a chip, a selected row).
+   */
+  bare?: boolean;
+  size?: "sm" | "md";
+}
+declare const StatusPill: React.ForwardRefExoticComponent<StatusPillProps & React.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { StatusPill };

package/dist/primitives/status-pill.js

@@ -0,0 +1,119 @@
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/status-pill.tsx
+const TONE_SURFACE = {
+	success: "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)] border-[var(--surface-success-border)]",
+	warning: "bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)] border-[var(--surface-warning-border)]",
+	danger: "bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)] border-[var(--surface-danger-border)]",
+	info: "bg-[var(--surface-info-bg)] text-[var(--surface-info-text)] border-[var(--surface-info-border)]",
+	running: "bg-[var(--surface-info-bg)] text-[var(--surface-info-text)] border-[var(--surface-info-border)]",
+	neutral: "bg-[var(--surface-neutral-bg)] text-[var(--surface-neutral-text)] border-[var(--surface-neutral-border)]"
+};
+/**
+* The text tier alone, for `bare`. Declared rather than recovered from
+* `TONE_SURFACE` by string search: picking the `text-` class out of that string
+* silently yields `undefined` the moment the triple gains a second `text-`
+* utility, and an undefined class removes the tone from the one channel `bare`
+* has left — the glyph — with nothing to signal that it happened.
+*/
+const TONE_TEXT = {
+	success: "text-[var(--surface-success-text)]",
+	warning: "text-[var(--surface-warning-text)]",
+	danger: "text-[var(--surface-danger-text)]",
+	info: "text-[var(--surface-info-text)]",
+	running: "text-[var(--surface-info-text)]",
+	neutral: "text-[var(--surface-neutral-text)]"
+};
+/**
+* One glyph per silhouette. `currentColor` throughout so the mark inherits the
+* tone's text colour and can never drift from the label beside it.
+*/
+function ToneGlyph({ tone }) {
+	const common = {
+		viewBox: "0 0 8 8",
+		className: "size-2 shrink-0"
+	};
+	switch (tone) {
+		case "success": return /* @__PURE__ */ jsx("svg", {
+			...common,
+			"aria-hidden": "true",
+			fill: "currentColor",
+			children: /* @__PURE__ */ jsx("circle", {
+				cx: "4",
+				cy: "4",
+				r: "3.25"
+			})
+		});
+		case "danger": return /* @__PURE__ */ jsxs("svg", {
+			...common,
+			"aria-hidden": "true",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: "4",
+				cy: "4",
+				r: "3.1",
+				fill: "currentColor",
+				opacity: "0.35"
+			}), /* @__PURE__ */ jsx("path", {
+				d: "M1.9 6.1 6.1 1.9",
+				strokeLinecap: "round"
+			})]
+		});
+		case "warning": return /* @__PURE__ */ jsx("svg", {
+			...common,
+			"aria-hidden": "true",
+			fill: "currentColor",
+			children: /* @__PURE__ */ jsx("path", { d: "M4 0.6 7.7 7.1H0.3z" })
+		});
+		case "running": return /* @__PURE__ */ jsx("svg", {
+			...common,
+			"aria-hidden": "true",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.75",
+			children: /* @__PURE__ */ jsx("circle", {
+				cx: "4",
+				cy: "4",
+				r: "2.9"
+			})
+		});
+		case "info": return /* @__PURE__ */ jsx("svg", {
+			...common,
+			"aria-hidden": "true",
+			fill: "currentColor",
+			children: /* @__PURE__ */ jsx("rect", {
+				x: "0.9",
+				y: "0.9",
+				width: "6.2",
+				height: "6.2",
+				rx: "1.2"
+			})
+		});
+		default: return /* @__PURE__ */ jsx("svg", {
+			...common,
+			"aria-hidden": "true",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.75",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M1 4h6",
+				strokeLinecap: "round"
+			})
+		});
+	}
+}
+const StatusPill = React.forwardRef(({ className, tone, children, bare = false, size = "sm", ...props }, ref) => /* @__PURE__ */ jsxs("span", {
+	ref,
+	className: cn("inline-flex items-center gap-1.5 whitespace-nowrap rounded-full font-medium", size === "sm" ? "px-2 py-0.5 text-xs" : "px-2.5 py-1 text-sm", bare ? "border border-transparent bg-transparent px-0" : cn("border", TONE_SURFACE[tone]), className),
+	...props,
+	children: [/* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex", bare && TONE_TEXT[tone]),
+		children: /* @__PURE__ */ jsx(ToneGlyph, { tone })
+	}), children]
+}));
+StatusPill.displayName = "StatusPill";
+//#endregion
+export { StatusPill };

package/dist/primitives/switch.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+//#region src/primitives/switch.d.ts
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Switch };