@tangle-network/ui 11.39.0 → 11.40.0

package/dist/primitives/settings.js

@@ -0,0 +1,316 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { Card, CardFooter, CardTitle } from "./card.js";
+import { Label } from "./label.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { InfoTip } from "./info-tip.js";
+import { fieldMessageId } from "./field.js";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CircleAlert, Ellipsis, Lock } from "lucide-react";
+//#region src/primitives/settings.tsx
+const SCROLL_OFFSET = "scroll-mt-[calc(var(--shell-header-height)_+_1rem)]";
+const DIVIDED = "not-first:border-t not-first:border-[color:var(--border-subtle)]";
+const ERROR_TEXT = "text-[color:var(--surface-danger-text)]";
+function ErrorLine({ id, className, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		role: "alert",
+		className: cn("flex items-start gap-1.5 text-sm leading-5 [overflow-wrap:anywhere]", ERROR_TEXT, className),
+		children: [/* @__PURE__ */ jsx(CircleAlert, {
+			"aria-hidden": "true",
+			className: "mt-0.5 size-4 shrink-0"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "min-w-0",
+			children
+		})]
+	});
+}
+function LockLine({ id, className, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: cn("flex items-start gap-1.5 text-sm leading-5 text-muted-foreground [overflow-wrap:anywhere]", className),
+		children: [/* @__PURE__ */ jsx(Lock, {
+			"aria-hidden": "true",
+			className: "mt-0.5 size-4 shrink-0"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "min-w-0",
+			children
+		})]
+	});
+}
+const ROW_COLUMNS = {
+	inline: "grid-cols-[minmax(0,1fr)_minmax(13rem,20rem)] @max-[34rem]/settings-section:grid-cols-1",
+	compact: "grid-cols-[minmax(0,1fr)_auto]",
+	stacked: "grid-cols-1"
+};
+const ROW_CONTROL = {
+	inline: "justify-end @max-[34rem]/settings-section:flex-col @max-[34rem]/settings-section:items-stretch",
+	compact: "justify-end",
+	stacked: "flex-col items-stretch"
+};
+/** Point the row's own control at the row's message without changing anything else about it. */
+function describeControl(children, htmlFor, messageId, invalid) {
+	if (!htmlFor || !messageId || !React.isValidElement(children) || children.props.id !== htmlFor) return children;
+	const ids = new Set([...(children.props["aria-describedby"] ?? "").split(/\s+/), messageId].filter(Boolean));
+	return React.cloneElement(children, {
+		"aria-describedby": [...ids].join(" "),
+		...invalid && children.props["aria-invalid"] === void 0 ? { "aria-invalid": true } : {}
+	});
+}
+/**
+* One setting: its label, an optional consequence line and its control. The
+* label carries the save status after it; an error or a lock reason replaces
+* the description. Rows inside a {@link SettingsSection} are divided by a
+* hairline and stack when the card is narrower than 34rem.
+*/
+function SettingsRow({ id, label, description, info, htmlFor, status, error, onRetry, layout = "inline", disabledReason, children }) {
+	const messageId = htmlFor ? fieldMessageId(htmlFor) : void 0;
+	const control = describeControl(children, htmlFor, error != null || disabledReason != null || description != null ? messageId : void 0, error != null);
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		"data-layout": layout,
+		className: cn("grid min-w-0 items-center gap-x-8 gap-y-3 px-5 py-4 @max-[34rem]/settings-section:px-4", SCROLL_OFFSET, DIVIDED, ROW_COLUMNS[layout]),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-5 flex-wrap items-center gap-x-2 gap-y-1",
+				children: [
+					htmlFor ? /* @__PURE__ */ jsx(Label, {
+						htmlFor,
+						className: "leading-5 text-foreground",
+						children: label
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "font-medium text-sm leading-5 text-foreground",
+						children: label
+					}),
+					info != null && /* @__PURE__ */ jsx(InfoTip, {
+						label,
+						children: info
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"aria-live": "polite",
+						className: "inline-flex items-center gap-1 text-sm leading-5 text-muted-foreground",
+						children: status
+					})
+				]
+			}), error != null ? /* @__PURE__ */ jsxs(ErrorLine, {
+				id: messageId,
+				className: "mt-0.5",
+				children: [error, onRetry && /* @__PURE__ */ jsxs(Fragment$1, { children: [" ", /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "bare",
+					onClick: onRetry,
+					className: "rounded-sm font-medium text-[var(--accent-text)] underline-offset-4 hover:underline",
+					children: "Retry"
+				})] })]
+			}) : disabledReason != null ? /* @__PURE__ */ jsx(LockLine, {
+				id: messageId,
+				className: "mt-0.5",
+				children: disabledReason
+			}) : description != null && /* @__PURE__ */ jsx("div", {
+				id: messageId,
+				className: "mt-0.5 text-sm leading-5 text-muted-foreground [overflow-wrap:anywhere]",
+				children: description
+			})]
+		}), control != null && control !== false && /* @__PURE__ */ jsx("div", {
+			className: cn("flex min-w-0 items-center gap-2", ROW_CONTROL[layout]),
+			children: control
+		})]
+	});
+}
+/**
+* One settings card: a 16px title with optional description, info tip and
+* actions, then its rows and lists, then an optional footer. The card is the
+* width container its rows and lists respond to.
+*/
+function SettingsSection({ id, title, description, info, actions, tone = "default", footer, children }) {
+	const titleId = `${id}-title`;
+	const danger = tone === "danger";
+	return /* @__PURE__ */ jsxs(Card, {
+		id,
+		role: "region",
+		"aria-labelledby": titleId,
+		"data-tone": tone,
+		className: cn("@container/settings-section min-w-0", SCROLL_OFFSET, danger && "border-[color:var(--surface-danger-border)]"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between gap-4 px-5 py-4 @max-[34rem]/settings-section:flex-wrap @max-[34rem]/settings-section:px-4",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1.5",
+						children: [/* @__PURE__ */ jsx(CardTitle, {
+							as: "h2",
+							id: titleId,
+							className: cn("leading-6 [overflow-wrap:anywhere]", danger && ERROR_TEXT),
+							children: title
+						}), info != null && /* @__PURE__ */ jsx(InfoTip, {
+							label: title,
+							children: info
+						})]
+					}), description != null && /* @__PURE__ */ jsx("div", {
+						className: "mt-0.5 text-sm leading-5 text-muted-foreground [overflow-wrap:anywhere]",
+						children: description
+					})]
+				}), actions != null && /* @__PURE__ */ jsx("div", {
+					className: "flex shrink-0 flex-wrap items-center gap-2",
+					children: actions
+				})]
+			}),
+			children,
+			footer != null && /* @__PURE__ */ jsx(CardFooter, {
+				className: "justify-between gap-3 rounded-b-[inherit] border-t border-[color:var(--border-subtle)] bg-muted px-5 py-3 text-sm leading-5 [&:not(:first-child)]:pt-3 @max-[34rem]/settings-section:px-4",
+				children: footer
+			})
+		]
+	});
+}
+const LIST_SLOTS = [
+	"leading",
+	"main",
+	"status",
+	"action",
+	"menu"
+];
+const LENGTH = /^[\d.]+(?:px|rem|em|ch)$/;
+function listTracks(columns, narrow) {
+	const tracks = LIST_SLOTS.flatMap((slot) => {
+		if (slot === "main") return [[slot, columns.main ?? "minmax(0,1fr)"]];
+		const width = columns[slot];
+		if (!width || narrow && slot === "status") return [];
+		return [[slot, narrow && slot === "action" ? "auto" : width]];
+	});
+	const pad = narrow ? "1rem" : "1.25rem";
+	return tracks.map(([slot, width], index) => {
+		return `[${slot}] ${(index === 0 || index === tracks.length - 1) && LENGTH.test(width) ? `calc(${width} + ${pad})` : width}`;
+	}).join(" ");
+}
+const SettingsListContext = React.createContext({});
+/**
+* Comparable rows whose status and action columns line up across items (CSS
+* subgrid). Below 34rem each item becomes two lines: the title and meta with
+* its action on the right, then the state under them at full width.
+*/
+function SettingsList({ columns, children, "aria-label": ariaLabel }) {
+	const style = {
+		"--settings-list-columns": listTracks(columns, false),
+		"--settings-list-columns-narrow": listTracks(columns, true)
+	};
+	return /* @__PURE__ */ jsx(SettingsListContext.Provider, {
+		value: columns,
+		children: /* @__PURE__ */ jsx("ul", {
+			role: "list",
+			"aria-label": ariaLabel,
+			style,
+			className: cn("grid min-w-0 gap-x-4 [grid-template-columns:var(--settings-list-columns)] @max-[34rem]/settings-section:[grid-template-columns:var(--settings-list-columns-narrow)]", DIVIDED),
+			children
+		})
+	});
+}
+function ItemMenu({ items, titleId }) {
+	const triggerId = React.useId();
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "icon",
+			id: triggerId,
+			"aria-label": "More actions",
+			"aria-labelledby": `${triggerId} ${titleId}`,
+			children: /* @__PURE__ */ jsx(Ellipsis, { "aria-hidden": "true" })
+		})
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align: "end",
+		className: "min-w-44 max-w-72",
+		children: items.map((item) => {
+			const unavailable = item.disabledReason != null;
+			return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				"aria-disabled": unavailable || void 0,
+				onSelect: (event) => {
+					if (unavailable) event.preventDefault();
+					else item.onSelect();
+				},
+				className: cn("flex-col items-start gap-0.5 leading-5", item.tone === "danger" && !unavailable && cn(ERROR_TEXT, "focus:text-[color:var(--surface-danger-text)]"), unavailable && "cursor-not-allowed text-muted-foreground focus:text-muted-foreground"),
+				children: [/* @__PURE__ */ jsx("span", { children: item.label }), unavailable && /* @__PURE__ */ jsx(LockLine, { children: item.disabledReason })]
+			}, item.label);
+		})
+	})] });
+}
+const NARROW_STATUS = "@max-[34rem]/settings-section:col-start-[main] @max-[34rem]/settings-section:col-end-[-1] @max-[34rem]/settings-section:row-start-2 @max-[34rem]/settings-section:mt-2";
+/**
+* One item in a {@link SettingsList}; each slot goes to the list's column of
+* that name. Without a status column the state follows the meta, and without
+* a menu column the ⋯ menu ends the action cell.
+*/
+function SettingsListItem({ leading, title, meta, status, error, action, menu }) {
+	const columns = React.useContext(SettingsListContext);
+	const titleId = React.useId();
+	const reasonId = `${titleId}-reason`;
+	const locked = action?.disabledReason != null;
+	const menuNode = menu && menu.length > 0 ? /* @__PURE__ */ jsx(ItemMenu, {
+		items: menu,
+		titleId
+	}) : null;
+	const actionButton = action && /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "outline",
+		"aria-disabled": locked || void 0,
+		"aria-describedby": locked ? reasonId : void 0,
+		onClick: locked ? void 0 : action.onSelect,
+		children: action.label
+	});
+	const actionCell = (actionButton || menuNode && !columns.menu) && /* @__PURE__ */ jsxs(Fragment$1, { children: [actionButton, !columns.menu && menuNode] });
+	return /* @__PURE__ */ jsxs("li", {
+		className: cn("col-span-full grid grid-cols-subgrid items-center px-5 py-3 @max-[34rem]/settings-section:px-4", DIVIDED),
+		children: [
+			leading != null && /* @__PURE__ */ jsx("div", {
+				className: "col-start-[leading] row-start-1 flex",
+				children: leading
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "col-start-[main] row-start-1 min-w-0",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						id: titleId,
+						className: "font-medium text-sm leading-5 text-foreground [overflow-wrap:anywhere] [&_a]:rounded-sm [&_a]:text-foreground [&_a]:underline-offset-4 [&_a:hover]:underline [&_a:focus-visible]:outline-2 [&_a:focus-visible]:outline-offset-2 [&_a:focus-visible]:outline-[var(--focus-border)]",
+						children: title
+					}),
+					meta != null && /* @__PURE__ */ jsx("div", {
+						className: "text-sm leading-5 text-muted-foreground [overflow-wrap:anywhere]",
+						children: meta
+					}),
+					status != null && !columns.status && /* @__PURE__ */ jsx("div", {
+						className: "mt-1 text-sm leading-5 text-muted-foreground",
+						children: status
+					}),
+					locked && /* @__PURE__ */ jsx(LockLine, {
+						id: reasonId,
+						className: "mt-1",
+						children: action?.disabledReason
+					})
+				]
+			}),
+			error != null && /* @__PURE__ */ jsx(ErrorLine, {
+				className: "col-start-[main] row-start-2 mt-1 @max-[34rem]/settings-section:col-end-[-1] @max-[34rem]/settings-section:row-start-3",
+				children: error
+			}),
+			status != null && columns.status && /* @__PURE__ */ jsx("div", {
+				className: cn("col-start-[status] row-start-1 min-w-0 text-sm leading-5 text-muted-foreground", NARROW_STATUS),
+				children: status
+			}),
+			actionCell && /* @__PURE__ */ jsx("div", {
+				className: "col-start-[action] row-start-1 flex min-w-0 items-center justify-end gap-1",
+				children: actionCell
+			}),
+			menuNode && columns.menu && /* @__PURE__ */ jsx("div", {
+				className: "col-start-[menu] row-start-1 flex justify-end",
+				children: menuNode
+			})
+		]
+	});
+}
+//#endregion
+export { SettingsList, SettingsListItem, SettingsRow, SettingsSection };

package/dist/primitives/switch.js

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 //#region src/primitives/switch.tsx
 const Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SwitchPrimitives.Root, {
-	className: cn("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 shadow-sm transition-[background-color,border-color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-transparent data-[state=checked]:bg-[var(--accent-text)] data-[state=unchecked]:border-muted-foreground data-[state=unchecked]:bg-transparent", focusRing, className),
+	className: cn("relative pointer-coarse:before:absolute pointer-coarse:before:-inset-x-1.5 pointer-coarse:before:-inset-y-3.5 pointer-coarse:before:content-['']", "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 shadow-sm transition-[background-color,border-color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-transparent data-[state=checked]:bg-[var(--accent-text)] data-[state=unchecked]:border-muted-foreground data-[state=unchecked]:bg-transparent", focusRing, className),
 	...props,
 	ref,
 	children: /* @__PURE__ */ jsx(SwitchPrimitives.Thumb, { className: cn("pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-[translate,background-color] data-[state=checked]:translate-x-4 data-[state=checked]:bg-card data-[state=unchecked]:translate-x-0 data-[state=unchecked]:bg-muted-foreground") })

package/dist/primitives.d.ts

@@ -16,7 +16,7 @@ import { Calendar, CalendarDate, CalendarProps, formatCalendarDate, localToday,
 import { DatePicker, DatePickerProps } from "./primitives/date-picker.js";
 import { TimeSelect, TimeSelectProps } from "./primitives/time-select.js";
 import { Badge, BadgeProps, badgeVariants } from "./primitives/badge.js";
-import { Avatar, AvatarFallback, AvatarImage } from "./primitives/avatar.js";
+import { Avatar, AvatarFallback, AvatarImage, AvatarProps } from "./primitives/avatar.js";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./primitives/dropdown-menu.js";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./primitives/select.js";
 import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableProps, TableRow } from "./primitives/table.js";
@@ -44,6 +44,8 @@ import { InlineCode, InlineCodeProps } from "./primitives/code-block.js";
 import { ThemeToggle, useTheme } from "./primitives/theme-toggle.js";
 import { Heading, HeadingProps, HeadingVariant } from "./primitives/heading.js";
 import { PageShell, PageShellProps } from "./primitives/page-shell.js";
+import { Field, FieldProps, fieldMessageId } from "./primitives/field.js";
+import { SettingsList, SettingsListAction, SettingsListColumns, SettingsListItem, SettingsListItemProps, SettingsListMenuItem, SettingsListProps, SettingsRow, SettingsRowLayout, SettingsRowProps, SettingsSection, SettingsSectionProps } from "./primitives/settings.js";
 import { PageHeader, PageHeaderProps } from "./primitives/page-header.js";
 import { Alert, AlertDescription, AlertProps, AlertTitle, AlertTone } from "./primitives/alert.js";
 import { Pagination, PaginationProps } from "./primitives/pagination.js";
@@ -54,4 +56,4 @@ import { Wizard, WizardProps, WizardStep, WizardStepProps } from "./primitives/w
 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 { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, ArtifactPane, type ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, CATEGORY_TONES, Calendar, type CalendarDate, type CalendarProps, 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, DatePicker, type DatePickerProps, 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, HelpText, type HelpTextProps, 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, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, 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, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, Wizard, type WizardProps, WizardStep, type WizardStepProps, badgeVariants, buttonVariants, formatCalendarDate, initialsOf, localToday, parseCalendarDate, toneFor, useTheme, useToast };
+export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, ArtifactPane, type ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, CATEGORY_TONES, Calendar, type CalendarDate, type CalendarProps, 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, DatePicker, type DatePickerProps, 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, Field, type FieldProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, 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, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsList, type SettingsListAction, type SettingsListColumns, SettingsListItem, type SettingsListItemProps, type SettingsListMenuItem, type SettingsListProps, SettingsRow, type SettingsRowLayout, type SettingsRowProps, SettingsSection, type SettingsSectionProps, 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, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, Wizard, type WizardProps, WizardStep, type WizardStepProps, badgeVariants, buttonVariants, fieldMessageId, formatCalendarDate, initialsOf, localToday, parseCalendarDate, toneFor, useTheme, useToast };

package/dist/primitives.js

@@ -42,6 +42,8 @@ import { CodeBlock, CopyButton } from "./markdown/code-block.js";
 import { InlineCode } from "./primitives/code-block.js";
 import { ThemeToggle, useTheme } from "./primitives/theme-toggle.js";
 import { PageShell } from "./primitives/page-shell.js";
+import { Field, fieldMessageId } from "./primitives/field.js";
+import { SettingsList, SettingsListItem, SettingsRow, SettingsSection } from "./primitives/settings.js";
 import { PageHeader } from "./primitives/page-header.js";
 import { Alert, AlertDescription, AlertTitle } from "./primitives/alert.js";
 import { Pagination } from "./primitives/pagination.js";
@@ -54,4 +56,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 { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, Calendar, 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, DatePicker, 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, HelpText, IconTile, InlineCode, Input, Label, Logo, Metric, MetricStrip, PageHeader, PageShell, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, 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, TimeSelect, ToastContainer, ToastProvider, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, Wizard, WizardStep, badgeVariants, buttonVariants, formatCalendarDate, initialsOf, localToday, parseCalendarDate, toneFor, useTheme, useToast };
+export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, Calendar, 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, DatePicker, 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, Field, FilterField, Heading, HelpText, IconTile, InlineCode, Input, Label, Logo, Metric, MetricStrip, PageHeader, PageShell, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsList, SettingsListItem, SettingsRow, SettingsSection, 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, TimeSelect, ToastContainer, ToastProvider, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, Wizard, WizardStep, badgeVariants, buttonVariants, fieldMessageId, formatCalendarDate, initialsOf, localToday, parseCalendarDate, toneFor, useTheme, useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.39.0",
+  "version": "11.40.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -165,7 +165,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.25.1",
+    "@tangle-network/brand": "^1.26.0",
     "@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/presentation.ts

@@ -18,6 +18,8 @@ export const buttonVariants = cva(
           `bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.97] ${ixControl}`,
         outline:
           `border border-border bg-card hover:bg-muted active:scale-[0.97] text-foreground ${ixControl}`,
+        "destructive-outline":
+          `border border-[var(--surface-danger-border)] bg-card hover:bg-[var(--surface-danger-bg)] active:scale-[0.97] text-[var(--surface-danger-text)] ${ixControl}`,
         secondary:
           `bg-muted border border-border text-foreground hover:bg-muted/80 active:scale-[0.97] ${ixControl}`,
         ghost:

package/src/primitives/avatar.tsx

@@ -2,14 +2,19 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import * as React from "react";
 import { cn } from "../lib/utils";
 
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
+const AVATAR_SIZES = { sm: "h-8 w-8", md: "h-10 w-10" } as const;
+
+export interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
+  /** sm 32px (a list row beside a two-line name), md 40px (default). */
+  size?: keyof typeof AVATAR_SIZES;
+}
+
+const Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(({ className, size = "md", ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}
     className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      "relative flex shrink-0 overflow-hidden rounded-full",
+      AVATAR_SIZES[size],
       className,
     )}
     {...props}

package/src/primitives/button.tsx

@@ -36,7 +36,8 @@ function buttonClassName(
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "sandbox" | "bare" | null;
+  /** `destructive-outline` is a destructive action at rest, such as "Delete project…", whose confirmation uses `destructive`. */
+  variant?: "default" | "destructive" | "destructive-outline" | "outline" | "secondary" | "ghost" | "link" | "sandbox" | "bare" | null;
   /** sm 32px, default/md 36px (`--control-height`), lg 44px; icon sizes are squares on the same heights. */
   size?: "default" | "md" | "sm" | "lg" | "xl" | "display" | "icon" | "icon-sm" | "icon-lg" | "compact" | "touch" | null;
   asChild?: boolean;

package/src/primitives/field.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { CircleAlert } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { InfoTip } from "./info-tip";
+import { Label } from "./label";
+
+export interface FieldProps {
+  label: string;
+  /** The control's id; the label targets it. */
+  htmlFor: string;
+  /** Help that explains what the setting does, shown from an info button. */
+  info?: React.ReactNode;
+  /** One short sentence the person needs to fill the field in. */
+  hint?: React.ReactNode;
+  /** A validation error. The control should set `aria-invalid` and reference {@link fieldMessageId}. */
+  error?: React.ReactNode;
+  /** A non-error status, such as a check that passed. */
+  status?: React.ReactNode;
+  /** Trailing content in the label row, such as a "Use default" action. */
+  aside?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+/** The id of a field's hint, error, or status line, for the control's `aria-describedby`. */
+export function fieldMessageId(htmlFor: string): string {
+  return `${htmlFor}-message`;
+}
+
+/**
+ * A labelled form field: the label (with an optional info tip and a trailing
+ * aside) above the control, and one message line under it. Every line is
+ * 14px; an error replaces the status and the hint and is announced.
+ */
+export function Field({ label, htmlFor, info, hint, error, status, aside, children }: FieldProps) {
+  const message = error ?? status ?? hint;
+  return (
+    <div className="min-w-0 space-y-2">
+      <div className="flex min-h-6 items-center justify-between gap-2">
+        <span className="flex min-w-0 items-center gap-1.5">
+          <Label htmlFor={htmlFor} className="leading-6 text-foreground">{label}</Label>
+          {info && <InfoTip label={label}>{info}</InfoTip>}
+        </span>
+        {aside}
+      </div>
+      {children}
+      {message && (
+        <div
+          id={fieldMessageId(htmlFor)}
+          role={error ? "alert" : undefined}
+          className={cn(
+            "text-sm leading-6 [overflow-wrap:anywhere]",
+            error ? "flex items-start gap-1.5 text-[var(--surface-danger-text)]" : "text-muted-foreground",
+          )}
+        >
+          {error && <CircleAlert aria-hidden="true" className="mt-1 size-4 shrink-0" />}
+          {error ? <span className="min-w-0">{message}</span> : message}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/primitives/index.ts

@@ -79,6 +79,7 @@ export { Badge, badgeVariants } from "./badge";
 export type { BadgeProps } from "./badge";
 
 export { Avatar, AvatarImage, AvatarFallback } from "./avatar";
+export type { AvatarProps } from "./avatar";
 
 export {
   DropdownMenu,
@@ -199,6 +200,21 @@ export type { HeadingProps, HeadingVariant } from "./heading";
 export { PageShell } from "./page-shell";
 export type { PageShellProps } from "./page-shell";
 
+export { Field, fieldMessageId } from "./field";
+export type { FieldProps } from "./field";
+
+export { SettingsList, SettingsListItem, SettingsRow, SettingsSection } from "./settings";
+export type {
+  SettingsListAction,
+  SettingsListColumns,
+  SettingsListItemProps,
+  SettingsListMenuItem,
+  SettingsListProps,
+  SettingsRowLayout,
+  SettingsRowProps,
+  SettingsSectionProps,
+} from "./settings";
+
 export { PageHeader } from "./page-header";
 export type { PageHeaderProps } from "./page-header";
 

package/src/primitives/info-tip.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Info } from "lucide-react";
+import * as React from "react";
+import { Button } from "./button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
+
+/**
+ * An info button beside a label, for help that explains a setting. It opens
+ * on hover and keyboard focus and toggles on tap. The glyph stays 20px; on a
+ * coarse pointer a transparent 44px hit area surrounds it. It brings its own
+ * provider, so a row or field works in an app that never mounted one.
+ */
+export function InfoTip({ label, children }: { label: string; children: React.ReactNode }) {
+  const [open, setOpen] = React.useState(false);
+  // Radix closes a tooltip on every trigger press and click; a tap or click toggles it instead.
+  const openAtPress = React.useRef(false);
+  return (
+    <TooltipProvider delayDuration={150}>
+      <Tooltip open={open} onOpenChange={setOpen}>
+        <TooltipTrigger asChild>
+          <Button
+            type="button"
+            variant="bare"
+            aria-label={`About ${label}`}
+            onPointerDown={() => { openAtPress.current = open; }}
+            onClick={(event) => {
+              event.preventDefault();
+              setOpen(event.detail === 0 ? !open : !openAtPress.current);
+            }}
+            className="relative inline-flex size-5 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:text-foreground pointer-coarse:before:absolute pointer-coarse:before:-inset-3 pointer-coarse:before:content-['']"
+          >
+            <Info aria-hidden="true" className="size-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="top" className="max-w-72 text-sm leading-5">{children}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}