@tangle-network/ui 11.17.0 → 11.20.0

package/dist/primitives/sheet.js

@@ -0,0 +1,70 @@
+"use client";
+import { focusRing } from "../lib/focus.js";
+import { cn } from "../lib/utils.js";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+//#region src/primitives/sheet.tsx
+/** A dialog that slides in from an edge: a mobile nav drawer or a side panel. */
+const Sheet = SheetPrimitive.Root;
+const SheetTrigger = SheetPrimitive.Trigger;
+const SheetClose = SheetPrimitive.Close;
+const SheetPortal = SheetPrimitive.Portal;
+const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Overlay, {
+	ref,
+	className: cn("fixed inset-0 z-50 bg-black/40", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
+	...props
+}));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+const sheetVariants = cva([
+	"fixed z-50 flex flex-col gap-4 border-border bg-card shadow-lg",
+	"data-[state=closed]:animate-out data-[state=open]:animate-in",
+	"data-[state=closed]:duration-200 data-[state=open]:duration-300 ease-out motion-reduce:animate-none"
+], {
+	variants: { side: {
+		right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+		left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+		top: "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+		bottom: "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
+	} },
+	defaultVariants: { side: "right" }
+});
+const SheetContent = React.forwardRef(({ className, children, side = "right", hideCloseButton = false, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(SheetPrimitive.Content, {
+	ref,
+	className: cn(sheetVariants({ side }), className),
+	...props,
+	children: [children, !hideCloseButton && /* @__PURE__ */ jsxs(SheetPrimitive.Close, {
+		className: cn("absolute top-4 right-4 rounded-sm text-muted-foreground opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none", focusRing),
+		children: [/* @__PURE__ */ jsx(X, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Close"
+		})]
+	})]
+})] }));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+const SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex flex-col gap-1.5 p-4 pr-10", className),
+	...props
+});
+SheetHeader.displayName = "SheetHeader";
+const SheetFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("mt-auto flex flex-col gap-2 p-4", className),
+	...props
+});
+SheetFooter.displayName = "SheetFooter";
+const SheetTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Title, {
+	ref,
+	className: cn("font-semibold text-base text-foreground leading-tight", className),
+	...props
+}));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+const SheetDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Description, {
+	ref,
+	className: cn("text-muted-foreground text-sm", className),
+	...props
+}));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+//#endregion
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger };

package/dist/primitives/slider.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+//#region src/primitives/slider.d.ts
+/**
+ * Range input with one thumb per value. A single value renders one thumb; an
+ * array of two renders a range. The thumbs are what assistive technology
+ * focuses, so the names go on them: `aria-label` / `aria-labelledby` name a
+ * single thumb, and `thumbLabels` names each thumb of a range.
+ */
+declare const Slider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & {
+  thumbLabels?: string[];
+} & React.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { Slider };

package/dist/primitives/slider.js

@@ -0,0 +1,37 @@
+"use client";
+import { focusRing } from "../lib/focus.js";
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+//#region src/primitives/slider.tsx
+/**
+* Range input with one thumb per value. A single value renders one thumb; an
+* array of two renders a range. The thumbs are what assistive technology
+* focuses, so the names go on them: `aria-label` / `aria-labelledby` name a
+* single thumb, and `thumbLabels` names each thumb of a range.
+*/
+const Slider = React.forwardRef(({ className, defaultValue, value, min = 0, max = 100, thumbLabels, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) => {
+	const values = Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min];
+	const single = values.length === 1;
+	return /* @__PURE__ */ jsxs(SliderPrimitive.Root, {
+		ref,
+		defaultValue,
+		value,
+		min,
+		max,
+		className: cn("relative flex w-full touch-none select-none items-center data-[disabled]:opacity-50", "data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(SliderPrimitive.Track, {
+			className: "relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1.5",
+			children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" })
+		}), values.map((_, index) => /* @__PURE__ */ jsx(SliderPrimitive.Thumb, {
+			"aria-label": thumbLabels?.[index] ?? (single ? ariaLabel : void 0),
+			"aria-labelledby": single && !thumbLabels?.[index] ? ariaLabelledBy : void 0,
+			className: cn("block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm transition-[box-shadow] disabled:pointer-events-none", focusRing)
+		}, index))]
+	});
+});
+Slider.displayName = SliderPrimitive.Root.displayName;
+//#endregion
+export { Slider };

package/dist/primitives/theme-toggle.js

@@ -12,9 +12,17 @@ const namedModes = [
 		dark: "arena",
 		light: "arena-light"
 	},
+	{
+		dark: "super",
+		light: "super-light"
+	},
 	{
 		dark: "tangle-dark",
 		light: "tangle-light"
+	},
+	{
+		dark: "agents",
+		light: "agents-light"
 	}
 ];
 let preference;

package/dist/primitives/tooltip.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+//#region src/primitives/tooltip.d.ts
+declare function TooltipProvider({ delayDuration, skipDelayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element;
+declare namespace TooltipProvider {
+  var displayName: string;
+}
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Inverse-surface label for a control whose name is otherwise only an icon.
+ * It is supplementary: the trigger still needs its own accessible name.
+ */
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/primitives/tooltip.js

@@ -0,0 +1,32 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+//#region src/primitives/tooltip.tsx
+/**
+* Wrap an app (or a toolbar) once. The open delay applies to the first tooltip;
+* moving between triggers inside `skipDelayDuration` opens the next one at
+* once, which keeps an icon rail fast to scan.
+*/
+const TooltipProvider = ({ delayDuration = 400, skipDelayDuration = 300, ...props }) => /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
+	delayDuration,
+	skipDelayDuration,
+	...props
+});
+TooltipProvider.displayName = "TooltipProvider";
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+/**
+* Inverse-surface label for a control whose name is otherwise only an icon.
+* It is supplementary: the trigger still needs its own accessible name.
+*/
+const TooltipContent = React.forwardRef(({ className, sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
+	ref,
+	sideOffset,
+	className: cn("z-50 max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-md bg-foreground px-2.5 py-1.5 text-background text-xs leading-snug shadow-md", "data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "duration-150 ease-out motion-reduce:animate-none", className),
+	...props
+}) }));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+//#endregion
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/primitives.d.ts

@@ -2,6 +2,11 @@ import { Button, ButtonProps, buttonVariants } from "./primitives/button.js";
 import { ArtifactPane, ArtifactPaneProps } from "./primitives/artifact-pane.js";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardTitleProps } from "./primitives/card.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./primitives/dialog.js";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./primitives/alert-dialog.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./primitives/collapsible.js";
+import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./primitives/context-menu.js";
+import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from "./primitives/popover.js";
+import { Slider } from "./primitives/slider.js";
 import { Input, InputProps, Textarea, TextareaProps } from "./primitives/input.js";
 import { Badge, BadgeProps, badgeVariants } from "./primitives/badge.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./primitives/avatar.js";
@@ -12,6 +17,10 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "./primitives/tabs.js";
 import { SegmentedControl, SegmentedControlOption, SegmentedControlProps } from "./primitives/segmented-control.js";
 import { Progress } from "./primitives/progress.js";
 import { Switch } from "./primitives/switch.js";
+import { Checkbox } from "./primitives/checkbox.js";
+import { Separator } from "./primitives/separator.js";
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger } from "./primitives/sheet.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./primitives/tooltip.js";
 import { Skeleton, SkeletonCard, SkeletonTable } from "./primitives/skeleton.js";
 import { TextShimmer, TextShimmerProps } from "./primitives/text-shimmer.js";
 import { Toast, ToastContainer, ToastProvider, useToast } from "./primitives/toast.js";
@@ -36,4 +45,4 @@ import { IconTile, IconTileProps, initialsOf } from "./primitives/icon-tile.js";
 import { Metric, MetricProps, MetricStrip, MetricStripProps } from "./primitives/metric-strip.js";
 import { FilterField, FilterFieldProps, Toolbar, ToolbarProps } from "./primitives/toolbar.js";
 import { Logo, LogoProps, TangleKnot } from "@tangle-network/brand";
-export { ArtifactPane, type ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, CATEGORY_TONES, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, Chip, type ChipProps, CodeBlock, type CodeBlockProps, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Logo, type LogoProps, Metric, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Progress, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, Toolbar, type ToolbarProps, type UploadFile, UploadProgress, type UploadProgressProps, badgeVariants, buttonVariants, initialsOf, toneFor, useTheme, useToast };
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, ArtifactPane, type ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, CATEGORY_TONES, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Logo, type LogoProps, Metric, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, badgeVariants, buttonVariants, initialsOf, toneFor, useTheme, useToast };

package/dist/primitives.js

@@ -2,6 +2,11 @@ import { Button, buttonVariants } from "./primitives/button.js";
 import { Heading } from "./primitives/heading.js";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./primitives/card.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./primitives/dialog.js";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./primitives/alert-dialog.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./primitives/collapsible.js";
+import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./primitives/context-menu.js";
+import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from "./primitives/popover.js";
+import { Slider } from "./primitives/slider.js";
 import { Label } from "./primitives/label.js";
 import { Input, Textarea } from "./primitives/input.js";
 import { Badge, badgeVariants } from "./primitives/badge.js";
@@ -13,6 +18,10 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "./primitives/tabs.js";
 import { SegmentedControl } from "./primitives/segmented-control.js";
 import { Progress } from "./primitives/progress.js";
 import { Switch } from "./primitives/switch.js";
+import { Checkbox } from "./primitives/checkbox.js";
+import { Separator } from "./primitives/separator.js";
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger } from "./primitives/sheet.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./primitives/tooltip.js";
 import { Skeleton, SkeletonCard, SkeletonTable } from "./primitives/skeleton.js";
 import { TextShimmer } from "./primitives/text-shimmer.js";
 import { ToastContainer, ToastProvider, useToast } from "./primitives/toast.js";
@@ -36,4 +45,4 @@ import { IconTile, initialsOf } from "./primitives/icon-tile.js";
 import { Metric, MetricStrip } from "./primitives/metric-strip.js";
 import { FilterField, Toolbar } from "./primitives/toolbar.js";
 import { Logo, TangleKnot } from "@tangle-network/brand";
-export { ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Chip, CodeBlock, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FilterField, Heading, IconTile, InlineCode, Input, Label, Logo, Metric, MetricStrip, PageHeader, PageShell, Progress, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatusPill, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ToastContainer, ToastProvider, Toolbar, UploadProgress, badgeVariants, buttonVariants, initialsOf, toneFor, useTheme, useToast };
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FilterField, Heading, IconTile, InlineCode, Input, Label, Logo, Metric, MetricStrip, PageHeader, PageShell, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ToastContainer, ToastProvider, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, badgeVariants, buttonVariants, initialsOf, toneFor, useTheme, useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.17.0",
+  "version": "11.20.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -116,16 +116,23 @@
   "dependencies": {
     "@pierre/theme": "1.1.0",
     "@pierre/trees": "1.0.0-beta.6",
+    "@radix-ui/react-alert-dialog": "^1.1.23",
     "@radix-ui/react-avatar": "^1.2.6",
+    "@radix-ui/react-checkbox": "^1.3.11",
     "@radix-ui/react-collapsible": "^1.1.20",
+    "@radix-ui/react-context-menu": "^2.3.7",
     "@radix-ui/react-dialog": "^1.1.23",
     "@radix-ui/react-dropdown-menu": "^2.1.24",
     "@radix-ui/react-label": "^2.1.15",
+    "@radix-ui/react-popover": "^1.1.23",
     "@radix-ui/react-progress": "^1.1.16",
     "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-separator": "^1.1.15",
+    "@radix-ui/react-slider": "^1.4.7",
     "@radix-ui/react-slot": "^1.3.3",
     "@radix-ui/react-switch": "^1.3.7",
     "@radix-ui/react-tabs": "^1.1.21",
+    "@radix-ui/react-tooltip": "^1.2.16",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "github-slugger": "^2.0.0",
@@ -142,7 +149,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.11.0",
+    "@tangle-network/brand": "^1.15.1",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

package/src/primitives/alert-dialog.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { buttonVariants } from "./button";
+
+/**
+ * A dialog that interrupts for a decision. Unlike `Dialog` it has no close
+ * button and ignores outside clicks; Escape and `AlertDialogCancel` dismiss it.
+ * Radix focuses `AlertDialogCancel` on open, so a destructive action is never
+ * under the Enter key when the dialog appears.
+ */
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/40",
+      "data-[state=closed]:animate-out data-[state=open]:animate-in",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg",
+        "gap-4 rounded-lg border border-border bg-card p-6 text-foreground shadow-lg duration-200 outline-hidden",
+        "data-[state=closed]:animate-out data-[state=open]:animate-in",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "motion-reduce:animate-none",
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col gap-2 text-center sm:text-left", className)} {...props} />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("font-semibold text-lg leading-snug [overflow-wrap:anywhere]", className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-muted-foreground text-sm [overflow-wrap:anywhere]", className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+/**
+ * The confirming action. `tone="destructive"` paints it with the danger fill;
+ * the default is the primary button.
+ */
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & {
+    tone?: "default" | "destructive";
+  }
+>(({ className, tone = "default", ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants({ variant: tone === "destructive" ? "destructive" : "default" }), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/src/primitives/checkbox-separator-sheet-tooltip.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Info } from 'lucide-react'
+import { Button } from './button'
+import { Checkbox } from './checkbox'
+import { Label } from './label'
+import { Separator } from './separator'
+import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from './sheet'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip'
+
+const meta: Meta = {
+  title: 'Primitives/Checkbox, Separator, Sheet, Tooltip',
+  parameters: { layout: 'centered' },
+}
+
+export default meta
+type Story = StoryObj
+
+export const Checkboxes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      {[
+        { id: 'a', label: 'Record a video of every run', checked: true },
+        { id: 'b', label: 'Retry failed steps once', checked: false },
+        { id: 'c', label: 'Select every suite in this workspace', checked: 'indeterminate' as const },
+        { id: 'd', label: 'Disabled until billing is set up', checked: false, disabled: true },
+      ].map((row) => (
+        <div key={row.id} className="flex items-center gap-2">
+          <Checkbox id={row.id} defaultChecked={row.checked} disabled={row.disabled} />
+          <Label htmlFor={row.id}>{row.label}</Label>
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+export const Separators: Story = {
+  render: () => (
+    <div className="w-72 text-sm">
+      <p>Account</p>
+      <Separator className="my-3" />
+      <div className="flex h-5 items-center gap-3">
+        <span>Runs</span>
+        <Separator orientation="vertical" />
+        <span>Suites</span>
+        <Separator orientation="vertical" />
+        <span>Settings</span>
+      </div>
+    </div>
+  ),
+}
+
+export const Sheets: Story = {
+  render: () => (
+    <div className="flex gap-2">
+      {(['left', 'right', 'bottom'] as const).map((side) => (
+        <Sheet key={side}>
+          <SheetTrigger asChild>
+            <Button variant="outline">Open {side}</Button>
+          </SheetTrigger>
+          <SheetContent side={side}>
+            <SheetHeader>
+              <SheetTitle>Run assistant</SheetTitle>
+              <SheetDescription>Ask why a step failed or what to test next.</SheetDescription>
+            </SheetHeader>
+            <SheetFooter>
+              <Button>Send</Button>
+            </SheetFooter>
+          </SheetContent>
+        </Sheet>
+      ))}
+    </div>
+  ),
+}
+
+export const Tooltips: Story = {
+  render: () => (
+    <TooltipProvider>
+      <div className="flex gap-2">
+        {['Runs', 'Test suites', 'A much longer label that wraps at the maximum tooltip width'].map((label) => (
+          <Tooltip key={label}>
+            <TooltipTrigger asChild>
+              <Button size="icon" variant="ghost" aria-label={label}>
+                <Info className="size-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{label}</TooltipContent>
+          </Tooltip>
+        ))}
+      </div>
+    </TooltipProvider>
+  ),
+}

package/src/primitives/checkbox-separator-sheet-tooltip.test.tsx

@@ -0,0 +1,107 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { Checkbox } from "./checkbox";
+import { Label } from "./label";
+import { Separator } from "./separator";
+import { Sheet, SheetContent, SheetDescription, SheetTitle, SheetTrigger } from "./sheet";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
+
+describe("Checkbox", () => {
+  it("toggles from its label and exposes checkbox state", () => {
+    render(
+      <>
+        <Checkbox id="notify" />
+        <Label htmlFor="notify">Email me</Label>
+      </>,
+    );
+    const box = screen.getByRole("checkbox", { name: "Email me" });
+    expect(box).toHaveAttribute("aria-checked", "false");
+    fireEvent.click(screen.getByText("Email me"));
+    expect(box).toHaveAttribute("aria-checked", "true");
+  });
+
+  it("reports the indeterminate state as mixed", () => {
+    render(<Checkbox aria-label="Select all" checked="indeterminate" />);
+    expect(screen.getByRole("checkbox", { name: "Select all" })).toHaveAttribute(
+      "aria-checked",
+      "mixed",
+    );
+  });
+
+  it("draws the dash for an uncontrolled indeterminate box too", () => {
+    const { container } = render(<Checkbox aria-label="Some" defaultChecked="indeterminate" />);
+    expect(screen.getByRole("checkbox")).toHaveAttribute("aria-checked", "mixed");
+    const dash = container.querySelector("svg.lucide-minus");
+    const tick = container.querySelector("svg.lucide-check");
+    expect(dash?.getAttribute("class")).toContain("group-data-[state=indeterminate]/checkbox:block");
+    expect(tick?.getAttribute("class")).toContain("group-data-[state=indeterminate]/checkbox:hidden");
+    expect(screen.getByRole("checkbox")).toHaveAttribute("data-state", "indeterminate");
+  });
+
+  it("paints with tokens, never palette utilities", () => {
+    render(<Checkbox aria-label="Agree" defaultChecked />);
+    const cls = screen.getByRole("checkbox").className;
+    expect(cls).toContain("data-[state=checked]:bg-primary");
+    expect(cls).not.toMatch(/\b(?:bg|text|border)-(?:slate|zinc|gray|neutral|blue|green|red|amber|emerald)-\d/);
+  });
+});
+
+describe("Separator", () => {
+  it("is hidden from assistive technology unless it is semantic", () => {
+    const { container, rerender } = render(<Separator />);
+    expect(container.firstElementChild).toHaveAttribute("role", "none");
+    rerender(<Separator decorative={false} orientation="vertical" />);
+    const rule = screen.getByRole("separator");
+    expect(rule).toHaveAttribute("aria-orientation", "vertical");
+    expect(rule.className).toContain("w-px");
+  });
+});
+
+describe("Sheet", () => {
+  it("opens as a labelled dialog and closes from its close button", async () => {
+    render(
+      <Sheet>
+        <SheetTrigger>Open chat</SheetTrigger>
+        <SheetContent side="left">
+          <SheetTitle>Assistant</SheetTitle>
+          <SheetDescription>Ask about this run.</SheetDescription>
+        </SheetContent>
+      </Sheet>,
+    );
+    fireEvent.click(screen.getByText("Open chat"));
+    const dialog = await screen.findByRole("dialog", { name: "Assistant" });
+    expect(dialog.className).toContain("slide-in-from-left");
+    fireEvent.click(screen.getByRole("button", { name: "Close" }));
+    await waitFor(() => expect(screen.queryByRole("dialog")).not.toBeInTheDocument());
+  });
+
+  it("can hide its close button", async () => {
+    render(
+      <Sheet defaultOpen>
+        <SheetContent hideCloseButton>
+          <SheetTitle>Filters</SheetTitle>
+          <SheetDescription>Narrow the list.</SheetDescription>
+        </SheetContent>
+      </Sheet>,
+    );
+    await screen.findByRole("dialog", { name: "Filters" });
+    expect(screen.queryByRole("button", { name: "Close" })).not.toBeInTheDocument();
+  });
+});
+
+describe("Tooltip", () => {
+  it("shows its label when the trigger receives keyboard focus", async () => {
+    const user = userEvent.setup();
+    render(
+      <TooltipProvider delayDuration={0}>
+        <Tooltip>
+          <TooltipTrigger aria-label="Runs">R</TooltipTrigger>
+          <TooltipContent>Runs</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>,
+    );
+    await user.tab();
+    expect(await screen.findByRole("tooltip")).toHaveTextContent("Runs");
+  });
+});