@ctrl-ui/react 0.9.5 → 0.9.8

package/dist/blocks/design-canvas.js

@@ -7,12 +7,12 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/
 import { Drawer, DrawerContent, DrawerTitle } from "../ui/drawer.js";
 import { createDesignCanvasLayer, designCanvasFillColor, drawnDesignCanvasBounds } from "./design-canvas-data.js";
 import { DesignCanvasInspector } from "./design-canvas-inspector.js";
+import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator } from "../ui/toolbar.js";
 import { InfiniteCanvas, InfiniteCanvasContent, InfiniteCanvasControls, InfiniteCanvasItem } from "../ui/infinite-canvas.js";
 import { ResizableFloatingPanel } from "../ui/resizable.js";
-import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator } from "../ui/toolbar.js";
 import { useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CircleIcon, FrameIcon, LayersIcon, MousePointer2Icon, SlidersHorizontalIcon, SquareIcon, TypeIcon } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CircleIcon, FrameIcon, HandIcon, LayersIcon, MousePointer2Icon, SlidersHorizontalIcon, SquareIcon, TypeIcon } from "lucide-react";
 //#region src/blocks/design-canvas.tsx
 const TOOLS = [
 	{
@@ -21,6 +21,12 @@ const TOOLS = [
 		shortcut: "V",
 		icon: /* @__PURE__ */ jsx(MousePointer2Icon, {})
 	},
+	{
+		tool: "hand",
+		label: "Hand",
+		shortcut: "H",
+		icon: /* @__PURE__ */ jsx(HandIcon, {})
+	},
 	{
 		tool: "frame",
 		label: "Frame",
@@ -47,10 +53,10 @@ const TOOLS = [
 	}
 ];
 const LAYER_ICONS = {
-	frame: /* @__PURE__ */ jsx(FrameIcon, {}),
-	rectangle: /* @__PURE__ */ jsx(SquareIcon, {}),
-	ellipse: /* @__PURE__ */ jsx(CircleIcon, {}),
-	text: /* @__PURE__ */ jsx(TypeIcon, {})
+	frame: /* @__PURE__ */ jsx(FrameIcon, { className: "text-muted-foreground" }),
+	rectangle: /* @__PURE__ */ jsx(SquareIcon, { className: "text-muted-foreground" }),
+	ellipse: /* @__PURE__ */ jsx(CircleIcon, { className: "text-muted-foreground" }),
+	text: /* @__PURE__ */ jsx(TypeIcon, { className: "text-muted-foreground" })
 };
 const NUDGE_DIRECTIONS = {
 	ArrowLeft: {
@@ -99,6 +105,7 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 	const currentLayers = layers ?? internalLayers;
 	const currentSelectedLayerId = selectedLayerId === void 0 ? internalSelectedLayerId : selectedLayerId;
 	const selectedLayer = currentLayers.find((layer) => layer.id === currentSelectedLayerId);
+	const drawingKind = tool === "move" || tool === "hand" ? null : tool;
 	function changeLayers(next) {
 		if (layers === void 0) setInternalLayers(next);
 		onLayersChange?.(next);
@@ -139,7 +146,7 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 	}
 	function beginDrawOrDeselect(event) {
 		if (event.defaultPrevented || event.target !== event.currentTarget) return;
-		if (tool === "move") {
+		if (!drawingKind) {
 			selectLayer(null);
 			return;
 		}
@@ -148,7 +155,7 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 		event.currentTarget.setPointerCapture(event.pointerId);
 		const point = worldPointAt(event);
 		setDraft({
-			kind: tool,
+			kind: drawingKind,
 			pointerId: event.pointerId,
 			start: point,
 			end: point,
@@ -200,7 +207,7 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 			setDraft(null);
 			setTool("move");
 			selectLayer(null);
-		} else if (event.key === "Enter" && tool !== "move" && event.target === event.currentTarget) addLayerAtViewportCenter(tool, event.currentTarget);
+		} else if (event.key === "Enter" && drawingKind && event.target === event.currentTarget) addLayerAtViewportCenter(drawingKind, event.currentTarget);
 		else if (!selectedLayer || !editLayerWithKey(selectedLayer, event)) return;
 		event.preventDefault();
 	}
@@ -226,7 +233,8 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 					transformRef.current = next;
 				},
 				"data-tool": tool,
-				className: cn("size-full", tool !== "move" && "cursor-crosshair"),
+				panOnDrag: tool === "hand" ? "anywhere" : "background",
+				className: cn("size-full", drawingKind && "cursor-crosshair"),
 				style: {
 					"--cui-infinite-canvas-radius": "0px",
 					"--cui-infinite-canvas-border-color": "transparent",
@@ -238,7 +246,7 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 				onPointerCancel: cancelDraft,
 				onKeyDown: handleShortcut,
 				children: [/* @__PURE__ */ jsxs(InfiniteCanvasContent, {
-					className: cn(tool !== "move" && "[&>*]:pointer-events-none"),
+					className: cn(tool !== "move" && "pointer-events-none"),
 					children: [currentLayers.map((layer) => /* @__PURE__ */ jsx(DesignCanvasLayerNode, {
 						layer,
 						selected: layer.id === currentSelectedLayerId,
@@ -280,7 +288,6 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 				onOpenChange: setLayersOpen,
 				children: /* @__PURE__ */ jsx(DrawerContent, {
 					side: "left",
-					className: "gap-0 p-0",
 					children: /* @__PURE__ */ jsx(DesignCanvasPanel, {
 						label: layersLabel,
 						title: layersLabel,
@@ -295,7 +302,6 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 				onOpenChange: setPropertiesOpen,
 				children: /* @__PURE__ */ jsx(DrawerContent, {
 					side: "right",
-					className: "gap-0 p-0",
 					children: /* @__PURE__ */ jsx(DesignCanvasPanel, {
 						label: propertiesLabel,
 						title: propertiesTitle,
@@ -345,24 +351,27 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 	});
 }
 function DesignCanvasPanel({ label, title, inDrawer = false, children }) {
-	const titleClassName = "flex h-11 shrink-0 items-center border-b px-3";
-	const titleText = /* @__PURE__ */ jsx("span", {
-		className: "truncate",
-		title,
-		children: title
-	});
 	return /* @__PURE__ */ jsxs("aside", {
 		"aria-label": label,
 		className: "flex min-h-0 flex-1 flex-col",
-		children: [inDrawer ? /* @__PURE__ */ jsx(DrawerTitle, {
-			className: `${titleClassName} text-caption font-medium`,
-			children: titleText
-		}) : /* @__PURE__ */ jsx(Heading, {
-			level: 2,
-			size: "caption",
-			weight: "medium",
-			className: titleClassName,
-			children: titleText
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex h-11 shrink-0 items-center border-b px-3",
+			children: inDrawer ? /* @__PURE__ */ jsx(DrawerTitle, {
+				className: "truncate",
+				title,
+				style: {
+					"--cui-popup-title-font-size": "var(--text-caption)",
+					"--cui-popup-title-font-weight": "var(--font-weight-medium)"
+				},
+				children: title
+			}) : /* @__PURE__ */ jsx(Heading, {
+				level: 2,
+				size: "caption",
+				weight: "medium",
+				className: "truncate",
+				title,
+				children: title
+			})
 		}), /* @__PURE__ */ jsx(ScrollArea, {
 			className: "min-h-0 flex-1",
 			children
@@ -377,7 +386,8 @@ function DesignCanvasLayerList({ layers, selectedLayerId, onSelect }) {
 			size: "sm",
 			active: layer.id === selectedLayerId,
 			"aria-pressed": layer.id === selectedLayerId,
-			className: "w-full justify-start [&_svg]:size-3.5 [&_svg]:text-muted-foreground",
+			className: "w-full justify-start",
+			style: { "--cui-button-icon": "calc(var(--spacing) * 3.5)" },
 			onClick: () => onSelect(layer.id),
 			children: [LAYER_ICONS[layer.kind], /* @__PURE__ */ jsx("span", {
 				className: "truncate",
@@ -399,7 +409,6 @@ function DesignCanvasLayerNode({ layer, selected, onSelect, onKeyDown, onLayerCh
 		"aria-pressed": interactive ? selected : void 0,
 		"aria-keyshortcuts": interactive ? LAYER_KEY_SHORTCUTS : void 0,
 		"data-selected": selected || void 0,
-		className: "outline-primary data-selected:outline-2",
 		style: {
 			width: layer.width,
 			height: layer.height,
@@ -434,15 +443,21 @@ function DesignCanvasLayerNode({ layer, selected, onSelect, onKeyDown, onLayerCh
 					borderRadius: layer.kind === "ellipse" ? "50%" : layer.cornerRadius
 				}
 			}),
-			selected ? /* @__PURE__ */ jsxs(Text, {
-				size: "micro",
-				className: "absolute inset-x-0 top-full mx-auto mt-1.5 w-max rounded-sm bg-primary px-1 whitespace-nowrap text-primary-foreground tabular-nums",
-				children: [
-					layer.width,
-					" × ",
-					layer.height
-				]
-			}) : null
+			selected ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "absolute inset-0 outline-2 outline-primary"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "absolute inset-x-0 top-full mx-auto mt-1.5 flex w-max rounded-sm bg-primary px-1 whitespace-nowrap text-primary-foreground",
+				children: /* @__PURE__ */ jsxs(Text, {
+					size: "micro",
+					numeric: true,
+					children: [
+						layer.width,
+						" × ",
+						layer.height
+					]
+				})
+			})] }) : null
 		]
 	});
 }
@@ -452,8 +467,7 @@ function DesignCanvasToolbarButton({ label, hint, pressed, children, ...props })
 			...props,
 			"aria-label": label,
 			iconOnly: true,
-			"aria-pressed": pressed,
-			"data-pressed": pressed ? "" : void 0
+			"aria-pressed": pressed
 		}),
 		children
 	}), /* @__PURE__ */ jsx(TooltipContent, { children: hint })] });

package/dist/blocks/discussion.js

@@ -70,7 +70,7 @@ function DiscussionComposer({ label, placeholder, submitLabel = "Post", secondar
 			error ? /* @__PURE__ */ jsx(Text, {
 				as: "p",
 				role: "alert",
-				className: "px-3",
+				className: "mx-3",
 				children: error
 			}) : null,
 			/* @__PURE__ */ jsxs(ChatComposerToolbar, { children: [/* @__PURE__ */ jsx(Text, {

package/dist/blocks/file-explorer.js

@@ -70,7 +70,8 @@ function FileExplorerBlock({ locations, activeLocationId, defaultActiveLocationI
 		layout,
 		persistOpen,
 		keyboardShortcut,
-		className: cn("bg-background text-foreground", !contained && "h-svh overflow-hidden", className),
+		surface: "background",
+		className: cn(!contained && "h-svh overflow-hidden", className),
 		style: providerStyle,
 		...props,
 		children: [/* @__PURE__ */ jsx(FileExplorerSidebar, {
@@ -147,7 +148,7 @@ function FileExplorerSidebar({ locations, activeLocationId, sidebarTop, sidebarF
 		collapsible: "offcanvas",
 		children: [
 			sidebarTop ? /* @__PURE__ */ jsx(SidebarHeader, {
-				className: "min-h-11 justify-center px-3",
+				className: "min-h-11 justify-center",
 				children: sidebarTop
 			}) : null,
 			/* @__PURE__ */ jsx(SidebarContent, { children: groups.map((group) => /* @__PURE__ */ jsxs(SidebarGroup, { children: [group.label ? /* @__PURE__ */ jsx(SidebarGroupLabel, { children: group.label }) : null, /* @__PURE__ */ jsx(SidebarMenu, { children: group.items.map((location) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
@@ -214,13 +215,10 @@ function FileExplorerHeader({ location, headingLevel, breadcrumbs, query, search
 					size: "sm",
 					className: "flex-[0_1_9rem] @xl/explorer:flex-[0_0_12rem]",
 					children: [
-						/* @__PURE__ */ jsx(InputGroupAddon, {
-							className: "ps-2",
-							children: /* @__PURE__ */ jsx(SearchIcon, {
-								className: "size-3.5",
-								"aria-hidden": "true"
-							})
-						}),
+						/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(SearchIcon, {
+							className: "size-3.5",
+							"aria-hidden": "true"
+						}) }),
 						/* @__PURE__ */ jsx(Input, {
 							type: "search",
 							"aria-label": searchLabel,
@@ -388,7 +386,7 @@ function FileExplorerColumns({ columns, selectedEntry, selectedPath, headingLeve
 				}) : /* @__PURE__ */ jsx(Text, {
 					size: "label",
 					weight: "medium",
-					className: "min-w-0 truncate px-1",
+					className: "mx-1 min-w-0 truncate",
 					children: activeColumn?.label
 				}), /* @__PURE__ */ jsxs(Drawer, { children: [/* @__PURE__ */ jsx(DrawerTrigger, {
 					render: /* @__PURE__ */ jsx(Button, {
@@ -401,7 +399,11 @@ function FileExplorerColumns({ columns, selectedEntry, selectedPath, headingLeve
 				}), /* @__PURE__ */ jsx(DrawerContent, { children: selectedEntry ? /* @__PURE__ */ jsx(DrawerBody, { children: /* @__PURE__ */ jsx(FileExplorerPreviewContent, {
 					entry: selectedEntry,
 					title: /* @__PURE__ */ jsx(DrawerTitle, {
-						className: "mt-4 max-w-full truncate text-heading-4",
+						className: "mt-4 max-w-full truncate",
+						style: {
+							"--cui-popup-title-font-size": "var(--text-heading-4)",
+							"--cui-popup-title-line-height": "var(--text-heading-4--line-height)"
+						},
 						children: selectedEntry.name
 					})
 				}) }) : null })] })]
@@ -457,7 +459,8 @@ function FileExplorerColumnView({ column, optionRef, onSelect, onOpen, onOptionK
 	const groups = groupFileExplorerItems(column.entries);
 	const tabStopId = column.selectedId ?? groups[0]?.items[0]?.id;
 	if (column.entries.length === 0) return /* @__PURE__ */ jsx(Empty, {
-		className: "h-full rounded-none",
+		className: "h-full",
+		style: { "--cui-empty-radius": "0px" },
 		children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
 			/* @__PURE__ */ jsx(EmptyMedia, { children: /* @__PURE__ */ jsx(FolderIcon, {}) }),
 			/* @__PURE__ */ jsx(EmptyTitle, { children: "Empty folder" }),
@@ -483,7 +486,7 @@ function FileExplorerColumnView({ column, optionRef, onSelect, onOpen, onOptionK
 						variant: "quiet",
 						size: "sm",
 						active: isSelected,
-						className: "w-full justify-start gap-2 px-2 text-start",
+						className: "w-full justify-start gap-2 text-start",
 						title: entry.name,
 						onClick: () => onSelect(entry),
 						onDoubleClick: () => onOpen(entry),
@@ -515,7 +518,7 @@ function FileExplorerColumnView({ column, optionRef, onSelect, onOpen, onOptionK
 						size: "caption",
 						weight: "semibold",
 						tone: "muted",
-						className: "mb-1 px-2",
+						className: "mx-2 mb-1",
 						children: group.label
 					}), options]
 				}, group.label) : /* @__PURE__ */ jsx("div", {
@@ -529,7 +532,8 @@ function FileExplorerColumnView({ column, optionRef, onSelect, onOpen, onOptionK
 }
 function FileExplorerPreview({ entry, headingLevel }) {
 	if (!entry) return /* @__PURE__ */ jsx(Empty, {
-		className: "h-full rounded-none",
+		className: "h-full",
+		style: { "--cui-empty-radius": "0px" },
 		children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
 			/* @__PURE__ */ jsx(EmptyMedia, { children: /* @__PURE__ */ jsx(FileIcon, {}) }),
 			/* @__PURE__ */ jsx(EmptyTitle, { children: "Select an item" }),
@@ -569,14 +573,19 @@ function FileExplorerPreviewContent({ entry, title, className }) {
 				children: entry.description
 			}) : null,
 			entry.details && entry.details.length > 0 ? /* @__PURE__ */ jsx("dl", {
-				className: "mt-6 grid w-full grid-cols-[auto_1fr] gap-x-4 gap-y-2 border-t border-border/70 pt-4 text-start text-caption",
+				className: "mt-6 grid w-full grid-cols-[auto_1fr] gap-x-4 gap-y-2 border-t border-border/70 pt-4 text-start",
 				children: entry.details.map((detail) => /* @__PURE__ */ jsxs("div", {
 					className: "contents",
-					children: [/* @__PURE__ */ jsx("dt", {
-						className: "text-muted-foreground",
+					children: [/* @__PURE__ */ jsx(Text, {
+						as: "dt",
+						size: "caption",
+						tone: "muted",
 						children: detail.label
-					}), /* @__PURE__ */ jsx("dd", {
-						className: "min-w-0 truncate text-end text-foreground",
+					}), /* @__PURE__ */ jsx(Text, {
+						as: "dd",
+						size: "caption",
+						tone: "foreground",
+						className: "min-w-0 truncate text-end",
 						children: detail.value
 					})]
 				}, detail.label))
@@ -593,7 +602,8 @@ function FileExplorerSearchResults({ label, status, clearSearchLabel, results, o
 	const [activeIndex, setActiveIndex] = useState(0);
 	const tabStop = Math.min(activeIndex, results.length - 1);
 	if (results.length === 0) return /* @__PURE__ */ jsxs(Empty, {
-		className: "h-full rounded-none",
+		className: "h-full",
+		style: { "--cui-empty-radius": "0px" },
 		children: [/* @__PURE__ */ jsxs(EmptyHeader, { children: [
 			/* @__PURE__ */ jsx(EmptyMedia, { children: /* @__PURE__ */ jsx(SearchIcon, {}) }),
 			/* @__PURE__ */ jsx(EmptyTitle, { children: status }),
@@ -632,7 +642,8 @@ function FileExplorerSearchResults({ label, status, clearSearchLabel, results, o
 				as: "div",
 				size: "caption",
 				tone: "muted",
-				className: "mb-2 px-2 tabular-nums",
+				numeric: true,
+				className: "mx-2 mb-2",
 				children: status
 			}), /* @__PURE__ */ jsx("div", {
 				role: "listbox",
@@ -647,7 +658,7 @@ function FileExplorerSearchResults({ label, status, clearSearchLabel, results, o
 					tabIndex: index === tabStop ? 0 : -1,
 					variant: "quiet",
 					size: "lg",
-					className: "h-auto w-full justify-start gap-3 px-3 py-2 text-start",
+					className: "h-auto min-h-12 w-full justify-start gap-3 text-start",
 					onClick: () => onSelect(result),
 					onDoubleClick: () => onOpen(result.entry, result.path),
 					onFocus: () => setActiveIndex(index),
@@ -679,39 +690,47 @@ function FileExplorerStatusBar({ breadcrumbs, selectedEntry }) {
 	const itemCount = selectedEntry?.children?.length ?? 0;
 	const itemLabel = itemCount === 1 ? "1 item" : `${itemCount} items`;
 	return /* @__PURE__ */ jsxs("footer", {
-		className: "flex h-8 shrink-0 items-center gap-3 border-t border-border/70 px-3 text-micro text-muted-foreground",
-		children: [/* @__PURE__ */ jsx("span", {
+		className: "flex h-8 shrink-0 items-center gap-3 border-t border-border/70 px-3",
+		children: [/* @__PURE__ */ jsx(Text, {
+			size: "micro",
+			tone: "muted",
 			className: "min-w-0 flex-1 truncate",
 			title: path,
 			children: path
-		}), /* @__PURE__ */ jsx("span", {
-			className: "shrink-0 tabular-nums",
+		}), /* @__PURE__ */ jsx(Text, {
+			size: "micro",
+			tone: "muted",
+			numeric: true,
+			className: "shrink-0",
 			children: selectedEntry?.kind === "folder" ? itemLabel : selectedEntry?.name ?? "No selection"
 		})]
 	});
 }
 function FileExplorerAddressBar({ breadcrumbs, onSelect }) {
-	return /* @__PURE__ */ jsx(Breadcrumb, {
-		"aria-label": "Current folder",
+	return /* @__PURE__ */ jsx("div", {
 		className: "min-w-0 overflow-hidden px-1",
-		children: /* @__PURE__ */ jsx(BreadcrumbList, {
-			className: "min-w-0 flex-nowrap overflow-hidden",
-			children: breadcrumbs.map((breadcrumb, index) => {
-				const isCurrent = index === breadcrumbs.length - 1;
-				return /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 ? /* @__PURE__ */ jsx(BreadcrumbSeparator, {}) : null, /* @__PURE__ */ jsx(BreadcrumbItem, {
-					className: "min-w-0",
-					children: isCurrent ? /* @__PURE__ */ jsx(BreadcrumbPage, {
-						className: "min-w-0 truncate",
-						title: breadcrumb.label,
-						children: breadcrumb.label
-					}) : /* @__PURE__ */ jsx(BreadcrumbLink, {
-						render: /* @__PURE__ */ jsx("button", { type: "button" }),
-						className: "min-w-0 truncate",
-						title: breadcrumb.label,
-						onClick: () => onSelect(breadcrumb),
-						children: breadcrumb.label
-					})
-				})] }, `${breadcrumb.id}:${breadcrumb.path.join("/")}`);
+		children: /* @__PURE__ */ jsx(Breadcrumb, {
+			"aria-label": "Current folder",
+			className: "min-w-0",
+			children: /* @__PURE__ */ jsx(BreadcrumbList, {
+				className: "min-w-0 flex-nowrap overflow-hidden",
+				children: breadcrumbs.map((breadcrumb, index) => {
+					const isCurrent = index === breadcrumbs.length - 1;
+					return /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 ? /* @__PURE__ */ jsx(BreadcrumbSeparator, {}) : null, /* @__PURE__ */ jsx(BreadcrumbItem, {
+						className: "min-w-0",
+						children: isCurrent ? /* @__PURE__ */ jsx(BreadcrumbPage, {
+							className: "min-w-0 truncate",
+							title: breadcrumb.label,
+							children: breadcrumb.label
+						}) : /* @__PURE__ */ jsx(BreadcrumbLink, {
+							render: /* @__PURE__ */ jsx("button", { type: "button" }),
+							className: "min-w-0 truncate",
+							title: breadcrumb.label,
+							onClick: () => onSelect(breadcrumb),
+							children: breadcrumb.label
+						})
+					})] }, `${breadcrumb.id}:${breadcrumb.path.join("/")}`);
+				})
 			})
 		})
 	});

package/dist/blocks/settings.js

@@ -12,7 +12,7 @@ import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
 import { Input } from "../ui/input.js";
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
 import { searchSettings } from "./settings-data.js";
-import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet } from "../ui/field.js";
+import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSet } from "../ui/field.js";
 import { useEffect, useId, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowLeftIcon, SearchIcon, XIcon } from "lucide-react";
@@ -35,7 +35,8 @@ function SettingsBlock({ pages, activePageId, defaultActivePageId, onActivePageC
 	};
 	return /* @__PURE__ */ jsx(SidebarProvider, {
 		layout,
-		className: cn("bg-background text-foreground", layout === "viewport" && "h-svh overflow-hidden", className),
+		surface: "background",
+		className: cn(layout === "viewport" && "h-svh overflow-hidden", className),
 		style: providerStyle,
 		...props,
 		children: /* @__PURE__ */ jsx(SettingsShell, {
@@ -95,7 +96,8 @@ function SettingsShell({ pages, currentPage, query, results, backAction, searchP
 		/* @__PURE__ */ jsxs(Sidebar, {
 			collapsible: "offcanvas",
 			children: [/* @__PURE__ */ jsxs(SidebarHeader, {
-				className: "gap-3 border-b border-sidebar-border p-3",
+				divider: true,
+				className: "gap-3",
 				children: [backAction ? /* @__PURE__ */ jsx("div", {
 					className: "min-w-0",
 					children: backAction
@@ -144,13 +146,10 @@ function SettingsSearch({ value, label, placeholder, onValueChange }) {
 	return /* @__PURE__ */ jsxs(InputGroup, {
 		size: "sm",
 		children: [
-			/* @__PURE__ */ jsx(InputGroupAddon, {
-				className: "ps-2.5",
-				children: /* @__PURE__ */ jsx(SearchIcon, {
-					className: "size-3.5",
-					"aria-hidden": "true"
-				})
-			}),
+			/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(SearchIcon, {
+				className: "size-3.5",
+				"aria-hidden": "true"
+			}) }),
 			/* @__PURE__ */ jsx(Input, {
 				type: "search",
 				"aria-label": label,
@@ -203,7 +202,6 @@ function SettingsSearchNavigation({ results, onSelect, onClear }) {
 	}
 	return /* @__PURE__ */ jsx(Fragment$1, { children: [...groups.values()].map((group) => /* @__PURE__ */ jsxs(SidebarGroup, { children: [/* @__PURE__ */ jsxs(SidebarGroupLabel, { children: [group.page.icon, /* @__PURE__ */ jsx("span", { children: group.page.title })] }), /* @__PURE__ */ jsx(SidebarMenu, { children: group.results.map((result) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, {
 		size: "sm",
-		className: "h-auto min-h-(--control-h-sm) py-1.5",
 		onClick: () => onSelect(result),
 		children: /* @__PURE__ */ jsx("span", {
 			title: result.setting.title,
@@ -222,58 +220,56 @@ function SettingsPage({ page, instanceId }) {
 		}), page.sections.map((section) => /* @__PURE__ */ jsxs(FieldSet, {
 			className: "gap-3",
 			children: [/* @__PURE__ */ jsx(FieldLegend, {
-				className: "text-body font-semibold",
+				variant: "section",
 				children: section.title
 			}), /* @__PURE__ */ jsx(FieldGroup, {
-				className: "gap-0 overflow-hidden rounded-[var(--radius-lg)] border bg-card",
-				children: section.settings.map((setting, index) => /* @__PURE__ */ jsx(SettingsRow, {
+				variant: "card",
+				children: section.settings.map((setting) => /* @__PURE__ */ jsx(SettingsRow, {
 					pageId: page.id,
 					sectionId: section.id,
 					setting,
-					instanceId,
-					separated: index > 0
+					instanceId
 				}, setting.id))
 			})]
 		}, section.id))]
 	});
 }
-function SettingsRow({ pageId, sectionId, setting, instanceId, separated }) {
+function SettingsRow({ pageId, sectionId, setting, instanceId }) {
 	const ids = settingDomIds(instanceId, pageId, sectionId, setting.id);
 	const controlProps = {
 		id: ids.control,
 		"aria-labelledby": ids.label,
 		"aria-describedby": setting.description ? ids.description : void 0
 	};
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [separated ? /* @__PURE__ */ jsx(FieldSeparator, {}) : null, /* @__PURE__ */ jsxs(Field, {
+	return /* @__PURE__ */ jsx("div", {
 		id: ids.row,
-		orientation: "responsive",
 		tabIndex: -1,
-		className: "scroll-m-8 gap-3 p-4 outline-none transition-colors duration-[var(--duration-fast)] focus:bg-foreground/4 focus-within:bg-foreground/4",
-		children: [/* @__PURE__ */ jsxs(FieldContent, { children: [/* @__PURE__ */ jsx(FieldLabel, {
-			id: ids.label,
-			htmlFor: ids.control,
-			className: "leading-snug",
-			children: setting.title
-		}), setting.description ? /* @__PURE__ */ jsx(FieldDescription, {
-			id: ids.description,
-			children: setting.description
-		}) : null] }), /* @__PURE__ */ jsx("div", {
-			className: "flex shrink-0 items-center",
-			children: setting.renderControl(controlProps)
-		})]
-	})] });
+		className: "scroll-m-8 outline-none transition-colors duration-[var(--duration-fast)] focus:bg-foreground/4 focus-within:bg-foreground/4",
+		children: /* @__PURE__ */ jsxs(Field, {
+			orientation: "responsive",
+			className: "gap-3",
+			children: [/* @__PURE__ */ jsxs(FieldContent, { children: [/* @__PURE__ */ jsx(FieldLabel, {
+				id: ids.label,
+				htmlFor: ids.control,
+				children: setting.title
+			}), setting.description ? /* @__PURE__ */ jsx(FieldDescription, {
+				id: ids.description,
+				children: setting.description
+			}) : null] }), /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center",
+				children: setting.renderControl(controlProps)
+			})]
+		})
+	});
 }
 function SettingsEmpty({ title, description, action }) {
 	return /* @__PURE__ */ jsxs(Empty, {
-		className: "min-h-40 gap-3 p-4",
+		className: "min-h-40",
 		children: [/* @__PURE__ */ jsxs(EmptyHeader, { children: [
-			/* @__PURE__ */ jsx(EmptyMedia, {
-				className: "mb-0 size-8",
-				children: /* @__PURE__ */ jsx(SearchIcon, {
-					className: "size-4",
-					"aria-hidden": "true"
-				})
-			}),
+			/* @__PURE__ */ jsx(EmptyMedia, { children: /* @__PURE__ */ jsx(SearchIcon, {
+				className: "size-4",
+				"aria-hidden": "true"
+			}) }),
 			/* @__PURE__ */ jsx(EmptyTitle, { children: title }),
 			/* @__PURE__ */ jsx(EmptyDescription, { children: description })
 		] }), action ? /* @__PURE__ */ jsx(EmptyContent, { children: action }) : null]

package/dist/blocks/team-chat.js

@@ -7,7 +7,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function TeamChatBlock({ sidebar, children, thread, threadLabel = "Thread", className, ...props }) {
 	const threadIsOpen = thread !== void 0 && thread !== null;
 	return /* @__PURE__ */ jsxs(SidebarProvider, {
-		className: cn("bg-background text-foreground", className),
+		surface: "background",
+		className,
 		...props,
 		children: [sidebar, /* @__PURE__ */ jsxs(SidebarInset, {
 			className: "@container/team-chat flex h-full min-h-0 min-w-0 flex-row",

package/dist/blocks/theme-toggle.d.ts

@@ -31,12 +31,13 @@ export type ThemeSwitchProps = Omit<ComponentProps<typeof Switch>, "checked" | "
 export type ThemeSegmentedSwitchProps = Omit<ComponentProps<"div">, "onChange"> & ThemeControlProps & {
   name?: string;
   showLabels?: boolean;
+  disabled?: boolean;
 };
 export type ThemeDropdownProps = Omit<ComponentProps<typeof DropdownMenuTrigger>, "children" | "value" | "onChange"> & ThemeControlProps & {
   label?: string;
 };
 export declare function ThemeSwitch({ value, onValueChange, onValue, offValue, checkedIcon, uncheckedIcon, "aria-label": ariaLabel, ...props }: ThemeSwitchProps): import("react").JSX.Element;
-export declare function ThemeSegmentedSwitch({ value, onValueChange, options, showLabels, name, className, style, "aria-label": ariaLabel, ...props }: ThemeSegmentedSwitchProps): import("react").JSX.Element;
+export declare function ThemeSegmentedSwitch({ value, onValueChange, options, showLabels, disabled, name, className, style, "aria-label": ariaLabel, ...props }: ThemeSegmentedSwitchProps): import("react").JSX.Element;
 export declare function ThemeToggle({ value, onValueChange, options, showLabel, showLabels, className, onClick, "aria-label": ariaLabel, ...props }: ThemeToggleProps): import("react").JSX.Element;
 export declare function ThemeDropdown({ value, onValueChange, options, label, className, "aria-label": ariaLabel, ...props }: ThemeDropdownProps): import("react").JSX.Element;
 //#endregion