@ctrl-ui/react 0.9.6 → 0.9.9

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

package/dist/blocks/theme-toggle.js

@@ -1,5 +1,6 @@
 "use client";
 import { Button } from "../ui/button.js";
+import { Text } from "../ui/typography.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
 import { Switch } from "../ui/switch.js";
 import { useId } from "react";
@@ -57,9 +58,12 @@ function ThemeSwitch({ value, onValueChange, onValue = "dark", offValue = "light
 		...props
 	});
 }
-function ThemeSegmentedSwitch({ value, onValueChange, options = defaultThemeOptions, showLabels = false, name, className, style, "aria-label": ariaLabel = "Theme", ...props }) {
+function ThemeSegmentedSwitch({ value, onValueChange, options = defaultThemeOptions, showLabels = false, disabled = false, name, className, style, "aria-label": ariaLabel = "Theme", ...props }) {
 	const generatedName = useId();
-	const choices = controlOptions(options);
+	const choices = controlOptions(options).map((option) => disabled ? {
+		...option,
+		disabled: true
+	} : option);
 	const currentValue = effectiveThemeValue(value, choices);
 	const indicatorStyle = {
 		"--_theme-switch-index": Math.max(0, choices.findIndex((option) => option.value === currentValue)),
@@ -68,6 +72,7 @@ function ThemeSegmentedSwitch({ value, onValueChange, options = defaultThemeOpti
 	return /* @__PURE__ */ jsxs("div", {
 		role: "radiogroup",
 		"aria-label": ariaLabel,
+		"aria-disabled": disabled || void 0,
 		"data-control-ui": "theme-toggle",
 		"data-control-family": "theme-toggle",
 		"data-slot": "root",
@@ -91,7 +96,7 @@ function ThemeSegmentedSwitch({ value, onValueChange, options = defaultThemeOpti
 				"data-control": "true",
 				"data-selected": selected ? "true" : void 0,
 				"data-disabled": option.disabled ? "true" : void 0,
-				className: classes("relative z-[1] inline-flex h-(--control-h-xs) cursor-pointer items-center justify-center gap-1.5 rounded-(--_theme-switch-radius) px-1.5 text-label font-medium transition-colors duration-(--duration-fast) ease-(--ease-standard) not-data-[disabled=true]:hover:text-foreground data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-(--disabled-opacity) data-[selected=true]:text-foreground", showLabels ? "min-w-20" : "w-(--control-h-xs)"),
+				className: classes("relative z-[1] inline-flex h-(--control-h-xs) cursor-pointer items-center justify-center gap-1.5 rounded-(--_theme-switch-radius) px-1.5 transition-colors duration-(--duration-fast) ease-(--ease-standard) not-data-[disabled=true]:hover:text-foreground data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-(--disabled-opacity) data-[selected=true]:text-foreground", showLabels ? "min-w-20" : "w-(--control-h-xs)"),
 				children: [
 					/* @__PURE__ */ jsx("input", {
 						type: "radio",
@@ -109,7 +114,11 @@ function ThemeSegmentedSwitch({ value, onValueChange, options = defaultThemeOpti
 						className: "size-3.5",
 						"aria-hidden": true
 					}),
-					showLabels ? /* @__PURE__ */ jsx("span", { children: option.label }) : null
+					showLabels ? /* @__PURE__ */ jsx(Text, {
+						size: "label",
+						weight: "medium",
+						children: option.label
+					}) : null
 				]
 			}, option.value);
 		})]

package/dist/hooks/use-mobile.d.ts

@@ -1,5 +1,5 @@
 //#region src/hooks/use-mobile.d.ts
 type Breakpoint = number | `--${string}`;
-/** True below `breakpoint`: px (Tailwind `md` by default) or a theme breakpoint token such as `--breakpoint-lg`, so JS and the matching Tailwind variant share one value. */
+/** True below `breakpoint`: px (Tailwind `md` by default) or a theme breakpoint token such as `--breakpoint-sidebar`, so JS and the matching Tailwind variant share one value. */
 export declare function useIsMobile(breakpoint?: Breakpoint): boolean;
 //#endregion

package/dist/hooks/use-mobile.js

@@ -24,7 +24,7 @@ function viewportStore(breakpoint) {
 function getServerViewportSnapshot() {
 	return false;
 }
-/** True below `breakpoint`: px (Tailwind `md` by default) or a theme breakpoint token such as `--breakpoint-lg`, so JS and the matching Tailwind variant share one value. */
+/** True below `breakpoint`: px (Tailwind `md` by default) or a theme breakpoint token such as `--breakpoint-sidebar`, so JS and the matching Tailwind variant share one value. */
 function useIsMobile(breakpoint = MOBILE_BREAKPOINT) {
 	const store = viewportStore(breakpoint);
 	return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerViewportSnapshot);

package/dist/knob-contracts/badge-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/badge-knobs.d.ts
-export declare const badgeKnobs: readonly ["--cui-badge-radius", "--cui-badge-background", "--cui-badge-foreground", "--cui-badge-border-color", "--cui-badge-font-size"];
+export declare const badgeKnobs: readonly ["--cui-badge-radius", "--cui-badge-background", "--cui-badge-foreground", "--cui-badge-border-color", "--cui-badge-border-width", "--cui-badge-font-size", "--cui-badge-font-weight"];
 export type BadgeKnobStyle = Partial<Record<(typeof badgeKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/badge-knobs.js

@@ -4,7 +4,9 @@ const badgeKnobs = [
 	"--cui-badge-background",
 	"--cui-badge-foreground",
 	"--cui-badge-border-color",
-	"--cui-badge-font-size"
+	"--cui-badge-border-width",
+	"--cui-badge-font-size",
+	"--cui-badge-font-weight"
 ];
 //#endregion
 export { badgeKnobs };

package/dist/knob-contracts/button-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/button-knobs.d.ts
-export declare const buttonKnobs: readonly ["--cui-button-radius", "--cui-button-gap", "--cui-button-icon", "--cui-button-height", "--cui-button-padding-inline", "--cui-button-icon-padding-inline", "--cui-button-font-size", "--cui-button-background", "--cui-button-background-image", "--cui-button-hover-background-image", "--cui-button-foreground", "--cui-button-hover-background", "--cui-button-hover-foreground", "--cui-button-press-background", "--cui-button-press-scale", "--cui-button-active-background", "--cui-button-active-foreground", "--cui-button-active-hover-background", "--cui-button-shadow", "--cui-button-hover-shadow", "--cui-button-press-shadow", "--cui-button-active-shadow", "--cui-button-open-background", "--cui-button-open-foreground", "--cui-button-open-shadow"];
+export declare const buttonKnobs: readonly ["--cui-button-radius", "--cui-button-gap", "--cui-button-icon", "--cui-button-height", "--cui-button-padding-inline", "--cui-button-icon-padding-inline", "--cui-button-font-size", "--cui-button-font-weight", "--cui-button-background", "--cui-button-background-image", "--cui-button-hover-background-image", "--cui-button-foreground", "--cui-button-hover-background", "--cui-button-hover-foreground", "--cui-button-press-background", "--cui-button-press-scale", "--cui-button-active-background", "--cui-button-active-foreground", "--cui-button-active-hover-background", "--cui-button-shadow", "--cui-button-hover-shadow", "--cui-button-press-shadow", "--cui-button-active-shadow", "--cui-button-open-background", "--cui-button-open-foreground", "--cui-button-open-shadow"];
 export type ButtonKnobStyle = Partial<Record<(typeof buttonKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/button-knobs.js

@@ -7,6 +7,7 @@ const buttonKnobs = [
 	"--cui-button-padding-inline",
 	"--cui-button-icon-padding-inline",
 	"--cui-button-font-size",
+	"--cui-button-font-weight",
 	"--cui-button-background",
 	"--cui-button-background-image",
 	"--cui-button-hover-background-image",

package/dist/knob-contracts/calendar-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/calendar-knobs.d.ts
-export declare const calendarKnobs: readonly ["--cui-calendar-day-radius", "--cui-calendar-today-background", "--cui-calendar-selected-background", "--cui-calendar-selected-foreground", "--cui-calendar-range-background"];
+export declare const calendarKnobs: readonly ["--cui-calendar-day-radius", "--cui-calendar-today-background", "--cui-calendar-selected-background", "--cui-calendar-selected-foreground", "--cui-calendar-range-background", "--cui-calendar-day-size", "--cui-calendar-cell-padding", "--cui-calendar-today-shadow", "--cui-calendar-weekend-foreground", "--cui-calendar-weekend-background", "--cui-calendar-caption-font-size", "--cui-calendar-caption-font-weight", "--cui-calendar-weekday-font-size"];
 export type CalendarKnobStyle = Partial<Record<(typeof calendarKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/calendar-knobs.js

@@ -4,7 +4,15 @@ const calendarKnobs = [
 	"--cui-calendar-today-background",
 	"--cui-calendar-selected-background",
 	"--cui-calendar-selected-foreground",
-	"--cui-calendar-range-background"
+	"--cui-calendar-range-background",
+	"--cui-calendar-day-size",
+	"--cui-calendar-cell-padding",
+	"--cui-calendar-today-shadow",
+	"--cui-calendar-weekend-foreground",
+	"--cui-calendar-weekend-background",
+	"--cui-calendar-caption-font-size",
+	"--cui-calendar-caption-font-weight",
+	"--cui-calendar-weekday-font-size"
 ];
 //#endregion
 export { calendarKnobs };

package/dist/knob-contracts/card-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/card-knobs.d.ts
-export declare const cardKnobs: readonly ["--cui-card-radius", "--cui-card-background", "--cui-card-border-color", "--cui-card-border-width", "--cui-card-shadow", "--cui-card-backdrop-filter"];
+export declare const cardKnobs: readonly ["--cui-card-radius", "--cui-card-background", "--cui-card-border-color", "--cui-card-border-width", "--cui-card-shadow", "--cui-card-backdrop-filter", "--cui-card-padding-block", "--cui-card-padding-inline", "--cui-card-gap", "--cui-card-title-font-size"];
 export type CardKnobStyle = Partial<Record<(typeof cardKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/card-knobs.js

@@ -5,7 +5,11 @@ const cardKnobs = [
 	"--cui-card-border-color",
 	"--cui-card-border-width",
 	"--cui-card-shadow",
-	"--cui-card-backdrop-filter"
+	"--cui-card-backdrop-filter",
+	"--cui-card-padding-block",
+	"--cui-card-padding-inline",
+	"--cui-card-gap",
+	"--cui-card-title-font-size"
 ];
 //#endregion
 export { cardKnobs };

package/dist/knob-contracts/choice-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/choice-knobs.d.ts
-export declare const choiceKnobs: readonly ["--cui-choice-radius", "--cui-choice-border-color", "--cui-choice-border-width", "--cui-choice-background", "--cui-choice-checked-background", "--cui-choice-checked-border-color", "--cui-choice-shadow"];
+export declare const choiceKnobs: readonly ["--cui-choice-size", "--cui-choice-radius", "--cui-choice-border-color", "--cui-choice-border-width", "--cui-choice-background", "--cui-choice-checked-background", "--cui-choice-checked-border-color", "--cui-choice-shadow"];
 export type ChoiceKnobStyle = Partial<Record<(typeof choiceKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/choice-knobs.js

@@ -1,5 +1,6 @@
 //#region src/knob-contracts/choice-knobs.ts
 const choiceKnobs = [
+	"--cui-choice-size",
 	"--cui-choice-radius",
 	"--cui-choice-border-color",
 	"--cui-choice-border-width",

package/dist/knob-contracts/collapsible-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/collapsible-knobs.d.ts
-export declare const collapsibleKnobs: readonly ["--cui-collapsible-trigger-radius", "--cui-collapsible-trigger-hover-background"];
+export declare const collapsibleKnobs: readonly ["--cui-collapsible-trigger-radius", "--cui-collapsible-trigger-hover-background", "--cui-collapsible-trigger-padding-inline"];
 export type CollapsibleKnobStyle = Partial<Record<(typeof collapsibleKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/collapsible-knobs.js

@@ -1,4 +1,8 @@
 //#region src/knob-contracts/collapsible-knobs.ts
-const collapsibleKnobs = ["--cui-collapsible-trigger-radius", "--cui-collapsible-trigger-hover-background"];
+const collapsibleKnobs = [
+	"--cui-collapsible-trigger-radius",
+	"--cui-collapsible-trigger-hover-background",
+	"--cui-collapsible-trigger-padding-inline"
+];
 //#endregion
 export { collapsibleKnobs };

package/dist/knob-contracts/emoji-picker-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/emoji-picker-knobs.d.ts
-export declare const emojiPickerKnobs: readonly ["--cui-emoji-picker-cell-size", "--cui-emoji-picker-height", "--cui-emoji-picker-cell-radius", "--cui-emoji-picker-glyph-size", "--cui-emoji-picker-active-background", "--cui-emoji-picker-header-background", "--cui-emoji-picker-header-foreground"];
+export declare const emojiPickerKnobs: readonly ["--cui-emoji-picker-cell-size", "--cui-emoji-picker-height", "--cui-emoji-picker-cell-radius", "--cui-emoji-picker-glyph-size", "--cui-emoji-picker-active-background", "--cui-emoji-picker-header-background", "--cui-emoji-picker-header-foreground", "--cui-emoji-picker-header-font-size", "--cui-emoji-picker-search-font-size"];
 export type EmojiPickerKnobStyle = Partial<Record<(typeof emojiPickerKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/emoji-picker-knobs.js

@@ -6,7 +6,9 @@ const emojiPickerKnobs = [
 	"--cui-emoji-picker-glyph-size",
 	"--cui-emoji-picker-active-background",
 	"--cui-emoji-picker-header-background",
-	"--cui-emoji-picker-header-foreground"
+	"--cui-emoji-picker-header-foreground",
+	"--cui-emoji-picker-header-font-size",
+	"--cui-emoji-picker-search-font-size"
 ];
 //#endregion
 export { emojiPickerKnobs };

package/dist/knob-contracts/field-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/field-knobs.d.ts
-export declare const fieldKnobs: readonly ["--cui-field-radius", "--cui-field-background", "--cui-field-hover-background", "--cui-field-affordance-background", "--cui-field-affordance-shadow", "--cui-field-affordance-foreground", "--cui-field-affordance-hover-background", "--cui-field-foreground", "--cui-field-border-color", "--cui-field-border-width", "--cui-field-shadow", "--cui-field-backdrop-filter", "--cui-field-height", "--cui-field-padding-inline", "--cui-field-font-size"];
+export declare const fieldKnobs: readonly ["--cui-field-legend-font-size", "--cui-field-legend-font-weight", "--cui-field-radius", "--cui-field-background", "--cui-field-hover-background", "--cui-field-affordance-background", "--cui-field-affordance-shadow", "--cui-field-affordance-foreground", "--cui-field-affordance-hover-background", "--cui-field-foreground", "--cui-field-border-color", "--cui-field-border-width", "--cui-field-shadow", "--cui-field-backdrop-filter", "--cui-field-height", "--cui-field-padding-inline", "--cui-field-font-size", "--cui-field-font-weight", "--cui-field-font-family", "--cui-field-group-radius", "--cui-field-group-background", "--cui-field-group-border-color", "--cui-field-group-border-width", "--cui-field-group-shadow", "--cui-field-group-padding-block", "--cui-field-group-padding-inline", "--cui-field-group-separator-color", "--cui-field-group-separator-inset", "--cui-field-label-font-size", "--cui-field-label-font-weight", "--cui-field-description-font-size"];
 export type FieldKnobStyle = Partial<Record<(typeof fieldKnobs)[number], string>>;
 //#endregion