@ctrl-ui/react 0.8.0

package/dist/blocks/settings.d.ts

@@ -0,0 +1,19 @@
+import { Button } from "../ui/button.js";
+import { SettingDefinition, SettingsControlProps, SettingsPageDefinition, SettingsSectionDefinition } from "./settings-data.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/blocks/settings.d.ts
+type SettingsBlockProps = Omit<ComponentProps<"div">, "children"> & {
+  pages: readonly SettingsPageDefinition[];
+  activePageId?: string;
+  defaultActivePageId?: string;
+  onActivePageChange?: (pageId: string) => void;
+  backAction?: ReactNode;
+  searchPlaceholder?: string;
+  layout?: "viewport" | "contained";
+};
+declare function SettingsBlock({ pages, activePageId, defaultActivePageId, onActivePageChange, backAction, searchPlaceholder, layout, className, style, ...props }: SettingsBlockProps): import("react").JSX.Element;
+declare function SettingsBackAction({ children, ...props }: Omit<ComponentProps<typeof Button>, "children"> & {
+  children?: ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+export { type SettingDefinition, SettingsBackAction, SettingsBlock, SettingsBlockProps, type SettingsControlProps, type SettingsPageDefinition, type SettingsSectionDefinition };

package/dist/blocks/settings.js

@@ -0,0 +1,282 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Button } from "../ui/button.js";
+import { ScrollArea } from "../ui/scroll-area.js";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "../ui/input-group.js";
+import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger, useSidebar } from "../ui/sidebar.js";
+import { Empty, 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 { useEffect, useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowLeftIcon, SearchIcon, XIcon } from "lucide-react";
+//#region src/blocks/settings.tsx
+function SettingsBlock({ pages, activePageId, defaultActivePageId, onActivePageChange, backAction, searchPlaceholder = "Search settings", layout = "viewport", className, style, ...props }) {
+	const [internalPageId, setInternalPageId] = useState(defaultActivePageId ?? pages[0]?.id);
+	const [query, setQuery] = useState("");
+	const [pendingTarget, setPendingTarget] = useState(null);
+	const instanceId = useId();
+	const requestedPageId = activePageId ?? internalPageId;
+	const currentPage = pages.find((page) => page.id === requestedPageId) ?? pages[0];
+	const results = searchSettings(pages, query);
+	function changePage(pageId) {
+		if (activePageId === void 0) setInternalPageId(pageId);
+		onActivePageChange?.(pageId);
+	}
+	const providerStyle = {
+		"--sidebar-width": "15.5rem",
+		...style
+	};
+	return /* @__PURE__ */ jsx(SidebarProvider, {
+		"data-settings-layout": layout,
+		className: cn("overflow-hidden bg-background text-foreground", layout === "viewport" ? "h-svh min-h-svh" : "relative h-full min-h-0", className),
+		style: providerStyle,
+		...props,
+		children: /* @__PURE__ */ jsx(SettingsShell, {
+			pages,
+			currentPage,
+			query,
+			results,
+			backAction,
+			searchPlaceholder,
+			contained: layout === "contained",
+			instanceId,
+			pendingTarget,
+			onPendingTargetChange: setPendingTarget,
+			onPageChange: changePage,
+			onQueryChange: setQuery
+		})
+	});
+}
+function SettingsShell({ pages, currentPage, query, results, backAction, searchPlaceholder, contained, instanceId, pendingTarget, onPendingTargetChange, onPageChange, onQueryChange }) {
+	const { setOpenMobile } = useSidebar();
+	useEffect(() => {
+		if (!pendingTarget || currentPage?.id !== pendingTarget.pageId) return;
+		const frame = requestAnimationFrame(() => {
+			const row = document.getElementById(pendingTarget.rowId);
+			const control = document.getElementById(pendingTarget.controlId);
+			row?.scrollIntoView({
+				block: "center",
+				behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth"
+			});
+			(control instanceof HTMLElement ? control : row)?.focus({ preventScroll: true });
+			onPendingTargetChange(null);
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [
+		currentPage?.id,
+		onPendingTargetChange,
+		pendingTarget
+	]);
+	function navigate(pageId) {
+		onPageChange(pageId);
+		setOpenMobile(false);
+	}
+	function openResult(result) {
+		const ids = settingDomIds(instanceId, result.page.id, result.section.id, result.setting.id);
+		onPendingTargetChange({
+			pageId: result.page.id,
+			rowId: ids.row,
+			controlId: ids.control
+		});
+		navigate(result.page.id);
+	}
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Sidebar, {
+		collapsible: "offcanvas",
+		className: contained ? "absolute! inset-y-0! h-full" : void 0,
+		children: [/* @__PURE__ */ jsxs(SidebarHeader, {
+			className: "gap-3 border-b border-sidebar-border p-3",
+			children: [backAction ? /* @__PURE__ */ jsx("div", {
+				className: "min-w-0",
+				children: backAction
+			}) : null, /* @__PURE__ */ jsx(SettingsSearch, {
+				value: query,
+				placeholder: searchPlaceholder,
+				onValueChange: onQueryChange
+			})]
+		}), /* @__PURE__ */ jsx(SidebarContent, { children: query.trim() ? /* @__PURE__ */ jsx(SettingsSearchNavigation, {
+			results,
+			onSelect: openResult
+		}) : /* @__PURE__ */ jsx(SettingsPageNavigation, {
+			pages,
+			activePageId: currentPage?.id,
+			onSelect: navigate
+		}) })]
+	}), /* @__PURE__ */ jsxs(SidebarInset, {
+		className: "h-full min-h-0 min-w-0",
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: "flex h-12 shrink-0 items-center gap-2 border-b px-3 md:hidden",
+			children: [/* @__PURE__ */ jsx(SidebarTrigger, {}), /* @__PURE__ */ jsx("span", {
+				className: "truncate text-label font-medium",
+				children: currentPage?.title ?? "Settings"
+			})]
+		}), /* @__PURE__ */ jsx(ScrollArea, {
+			className: "min-h-0 flex-1",
+			lockAxis: "x",
+			children: currentPage ? /* @__PURE__ */ jsx(SettingsPage, {
+				page: currentPage,
+				instanceId
+			}) : /* @__PURE__ */ jsx(SettingsEmpty, {
+				title: "No settings",
+				description: "Add a settings page to populate this space."
+			})
+		})]
+	})] });
+}
+function SettingsSearch({ value, placeholder, onValueChange }) {
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		size: "sm",
+		children: [
+			/* @__PURE__ */ jsx(InputGroupAddon, {
+				className: "pl-2.5",
+				children: /* @__PURE__ */ jsx(SearchIcon, {
+					className: "size-3.5",
+					"aria-hidden": "true"
+				})
+			}),
+			/* @__PURE__ */ jsx(InputGroupInput, {
+				type: "search",
+				"aria-label": placeholder,
+				placeholder,
+				value,
+				onChange: (event) => onValueChange(event.currentTarget.value)
+			}),
+			value ? /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "xs",
+				iconOnly: true,
+				"aria-label": "Clear settings search",
+				className: "mr-1",
+				onClick: () => onValueChange(""),
+				children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5" })
+			}) : null
+		]
+	});
+}
+function SettingsPageNavigation({ pages, activePageId, onSelect }) {
+	return /* @__PURE__ */ jsxs(SidebarGroup, { children: [/* @__PURE__ */ jsx(SidebarGroupLabel, { children: "Settings" }), /* @__PURE__ */ jsx(SidebarMenu, { children: pages.map((page) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+		size: "sm",
+		isActive: page.id === activePageId,
+		onClick: () => onSelect(page.id),
+		children: [page.icon, /* @__PURE__ */ jsx("span", { children: page.title })]
+	}) }, page.id)) })] });
+}
+function SettingsSearchNavigation({ results, onSelect }) {
+	if (results.length === 0) return /* @__PURE__ */ jsx(SettingsEmpty, {
+		title: "No matching settings",
+		description: "Try another name or keyword."
+	});
+	const groups = /* @__PURE__ */ new Map();
+	for (const result of results) {
+		const group = groups.get(result.page.id) ?? {
+			page: result.page,
+			results: []
+		};
+		group.results.push(result);
+		groups.set(result.page.id, group);
+	}
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+		className: "sr-only",
+		role: "status",
+		"aria-live": "polite",
+		children: [
+			results.length,
+			" ",
+			results.length === 1 ? "setting" : "settings",
+			" found"
+		]
+	}), [...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-[var(--control-h-sm)] py-1.5",
+		onClick: () => onSelect(result),
+		children: /* @__PURE__ */ jsx("span", { children: result.setting.title })
+	}) }, `${result.section.id}/${result.setting.id}`)) })] }, group.page.id))] });
+}
+function SettingsPage({ page, instanceId }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto flex w-full max-w-4xl flex-col gap-10 px-5 py-8 md:px-10 md:py-12",
+		children: [/* @__PURE__ */ jsx("h1", {
+			className: "text-heading font-semibold text-foreground text-balance",
+			children: page.title
+		}), page.sections.map((section) => /* @__PURE__ */ jsxs(FieldSet, {
+			className: "gap-3",
+			children: [/* @__PURE__ */ jsx(FieldLegend, {
+				className: "text-body font-semibold",
+				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, {
+					pageId: page.id,
+					sectionId: section.id,
+					setting,
+					instanceId,
+					separated: index > 0
+				}, setting.id))
+			})]
+		}, section.id))]
+	});
+}
+function SettingsRow({ pageId, sectionId, setting, instanceId, separated }) {
+	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, {
+		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)
+		})]
+	})] });
+}
+function SettingsEmpty({ title, description }) {
+	return /* @__PURE__ */ jsx(Empty, {
+		className: "min-h-40 gap-3 p-4",
+		children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+			/* @__PURE__ */ jsx(EmptyMedia, {
+				className: "mb-0 size-8",
+				children: /* @__PURE__ */ jsx(SearchIcon, { className: "size-4" })
+			}),
+			/* @__PURE__ */ jsx(EmptyTitle, { children: title }),
+			/* @__PURE__ */ jsx(EmptyDescription, { children: description })
+		] })
+	});
+}
+function settingDomIds(instanceId, pageId, sectionId, settingId) {
+	const base = [
+		instanceId,
+		pageId,
+		sectionId,
+		settingId
+	].map((value) => value.replace(/[^a-zA-Z0-9_-]/g, "-")).join("-");
+	return {
+		row: `${base}-row`,
+		control: `${base}-control`,
+		label: `${base}-label`,
+		description: `${base}-description`
+	};
+}
+function SettingsBackAction({ children = "Back to app", ...props }) {
+	return /* @__PURE__ */ jsxs(Button, {
+		variant: "quiet",
+		size: "sm",
+		className: "-ml-1 justify-start gap-2",
+		...props,
+		children: [/* @__PURE__ */ jsx(ArrowLeftIcon, { className: "size-4" }), children]
+	});
+}
+//#endregion
+export { SettingsBackAction, SettingsBlock };

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

@@ -0,0 +1,43 @@
+import { Button } from "../ui/button.js";
+import { DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { Switch } from "../ui/switch.js";
+import { ComponentProps, ComponentType } from "react";
+//#region src/blocks/theme-toggle.d.ts
+type ThemeMode = "light" | "dark" | "system";
+type ThemeToggleOption = {
+  value: ThemeMode;
+  label: string;
+  icon: ComponentType<{
+    className?: string;
+    "aria-hidden"?: boolean;
+  }>;
+  disabled?: boolean;
+};
+type ThemeControlProps = {
+  value: ThemeMode;
+  onValueChange: (value: ThemeMode) => void;
+  options?: readonly ThemeToggleOption[];
+};
+type ThemeToggleProps = Omit<ComponentProps<typeof Button>, "value" | "onChange"> & ThemeControlProps & {
+  showLabel?: boolean;
+  showLabels?: boolean;
+};
+type ThemeSwitchProps = Omit<ComponentProps<typeof Switch>, "checked" | "defaultChecked" | "onCheckedChange" | "value"> & {
+  value: ThemeMode;
+  onValueChange: (value: ThemeMode) => void;
+  onValue?: ThemeMode;
+  offValue?: ThemeMode;
+};
+type ThemeSegmentedSwitchProps = Omit<ComponentProps<"div">, "onChange"> & ThemeControlProps & {
+  name?: string;
+  showLabels?: boolean;
+};
+type ThemeDropdownProps = Omit<ComponentProps<typeof DropdownMenuTrigger>, "children" | "value" | "onChange"> & ThemeControlProps & {
+  label?: string;
+};
+declare function ThemeSwitch({ value, onValueChange, onValue, offValue, checkedIcon, uncheckedIcon, "aria-label": ariaLabel, ...props }: ThemeSwitchProps): import("react").JSX.Element;
+declare function ThemeSegmentedSwitch({ value, onValueChange, options, showLabels, name, className, style, "aria-label": ariaLabel, ...props }: ThemeSegmentedSwitchProps): import("react").JSX.Element;
+declare function ThemeToggle({ value, onValueChange, options, showLabel, showLabels, className, onClick, "aria-label": ariaLabel, ...props }: ThemeToggleProps): import("react").JSX.Element;
+declare function ThemeDropdown({ value, onValueChange, options, label, className, "aria-label": ariaLabel, ...props }: ThemeDropdownProps): import("react").JSX.Element;
+//#endregion
+export { ThemeDropdown, ThemeDropdownProps, ThemeMode, ThemeSegmentedSwitch, ThemeSegmentedSwitchProps, ThemeSwitch, ThemeSwitchProps, ThemeToggle, ThemeToggleOption, ThemeToggleProps };

package/dist/blocks/theme-toggle.js

@@ -0,0 +1,180 @@
+"use client";
+import { Button } from "../ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { Switch } from "../ui/switch.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
+//#region src/blocks/theme-toggle.tsx
+const systemThemeOption = {
+	value: "system",
+	label: "System",
+	icon: MonitorIcon
+};
+const defaultThemeOptions = [
+	{
+		value: "light",
+		label: "Light",
+		icon: SunIcon
+	},
+	{
+		value: "dark",
+		label: "Dark",
+		icon: MoonIcon
+	},
+	systemThemeOption
+];
+const defaultSwitchCheckedIcon = /* @__PURE__ */ jsx(MoonIcon, {});
+const defaultSwitchUncheckedIcon = /* @__PURE__ */ jsx(SunIcon, {});
+function classes(...values) {
+	return values.filter(Boolean).join(" ");
+}
+function enabledOptions(options) {
+	return options.filter((option) => !option.disabled);
+}
+function controlOptions(options) {
+	return options.length > 0 ? options : defaultThemeOptions;
+}
+function currentThemeOption(value, options) {
+	return options.find((option) => option.value === value) ?? defaultThemeOptions.find((option) => option.value === value) ?? systemThemeOption;
+}
+function effectiveThemeValue(value, options) {
+	if (options.some((option) => option.value === value)) return value;
+	return enabledOptions(options)[0]?.value ?? options[0]?.value ?? "system";
+}
+function nextThemeValue(value, options) {
+	const available = enabledOptions(options);
+	if (available.length === 0) return value;
+	return available[(available.findIndex((option) => option.value === value) + 1) % available.length]?.value ?? available[0]?.value ?? value;
+}
+function ThemeSwitch({ value, onValueChange, onValue = "dark", offValue = "light", checkedIcon, uncheckedIcon, "aria-label": ariaLabel, ...props }) {
+	return /* @__PURE__ */ jsx(Switch, {
+		checked: value === onValue,
+		checkedIcon: checkedIcon ?? defaultSwitchCheckedIcon,
+		uncheckedIcon: uncheckedIcon ?? defaultSwitchUncheckedIcon,
+		onCheckedChange: (checked) => onValueChange(checked ? onValue : offValue),
+		"aria-label": ariaLabel ?? "Dark mode",
+		...props
+	});
+}
+function ThemeSegmentedSwitch({ value, onValueChange, options = defaultThemeOptions, showLabels = false, name, className, style, "aria-label": ariaLabel = "Theme", ...props }) {
+	const generatedName = useId();
+	const choices = controlOptions(options);
+	const currentValue = effectiveThemeValue(value, choices);
+	const activeIndex = Math.max(0, choices.findIndex((option) => option.value === currentValue));
+	const indicatorStyle = {
+		width: `calc((100% - 0.25rem) / ${choices.length})`,
+		transform: `translateX(${activeIndex * 100}%)`
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		role: "radiogroup",
+		"aria-label": ariaLabel,
+		className: classes("relative isolate inline-flex h-7 w-fit shrink-0 rounded-full border border-border bg-foreground/8 p-0.5 text-muted-foreground shadow-inner", className),
+		style,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "pointer-events-none absolute inset-y-0.5 left-0.5 rounded-full bg-background shadow-sm transition-transform duration-[var(--duration-base)] ease-[var(--ease-emphasized)]",
+			style: indicatorStyle
+		}), choices.map((option) => {
+			const selected = option.value === currentValue;
+			const Icon = option.icon;
+			return /* @__PURE__ */ jsxs("label", {
+				"data-selected": selected ? "true" : void 0,
+				"data-disabled": option.disabled ? "true" : void 0,
+				className: classes("relative z-[1] inline-flex h-6 cursor-pointer items-center justify-center gap-1.5 rounded-full px-1.5 text-xs font-medium outline-none transition-[color,scale] duration-[var(--duration-fast)] ease-[var(--ease-standard)] hover:text-foreground has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-foreground/25 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-45 data-[selected=true]:text-foreground active:scale-95", showLabels ? "min-w-20" : "w-7"),
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						type: "radio",
+						name: name ?? generatedName,
+						value: option.value,
+						checked: selected,
+						disabled: option.disabled,
+						"aria-label": option.label,
+						className: "sr-only",
+						onChange: (event) => {
+							if (event.currentTarget.checked) onValueChange(option.value);
+						}
+					}),
+					/* @__PURE__ */ jsx(Icon, {
+						className: "size-3.5",
+						"aria-hidden": true
+					}),
+					showLabels ? /* @__PURE__ */ jsx("span", { children: option.label }) : null
+				]
+			}, option.value);
+		})]
+	});
+}
+function ThemeToggle({ value, onValueChange, options = defaultThemeOptions, showLabel, showLabels, className, onClick, "aria-label": ariaLabel, ...props }) {
+	const current = currentThemeOption(value, options);
+	const Icon = current.icon;
+	const visibleLabel = showLabel ?? showLabels ?? false;
+	return /* @__PURE__ */ jsxs(Button, {
+		variant: "surface",
+		size: "sm",
+		className: classes("gap-2", className),
+		"aria-label": ariaLabel ?? `Theme: ${current.label}`,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) onValueChange(nextThemeValue(value, options));
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx(Icon, {
+			className: "size-3.5",
+			"aria-hidden": true
+		}), visibleLabel ? /* @__PURE__ */ jsx("span", { children: current.label }) : null]
+	});
+}
+function ThemeDropdown({ value, onValueChange, options = defaultThemeOptions, label = "Theme", className, "aria-label": ariaLabel, ...props }) {
+	const current = currentThemeOption(value, options);
+	const CurrentIcon = current.icon;
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+		"aria-label": ariaLabel ?? label,
+		className: classes("min-w-36 gap-2", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(CurrentIcon, {
+				className: "size-3.5",
+				"aria-hidden": true
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate",
+				children: current.label
+			}),
+			/* @__PURE__ */ jsx(ChevronDownIcon, {
+				className: "size-3 text-muted-foreground",
+				"aria-hidden": true
+			})
+		]
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		className: "min-w-40",
+		children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: label }), options.map((option) => {
+			const selected = option.value === value;
+			const Icon = option.icon;
+			return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				disabled: option.disabled,
+				onClick: () => onValueChange(option.value),
+				children: [
+					/* @__PURE__ */ jsx(Icon, {
+						className: "size-3.5",
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate",
+						children: option.label
+					}),
+					selected ? /* @__PURE__ */ jsx(CheckIcon, {
+						className: "size-3.5",
+						"aria-hidden": true
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "size-3.5",
+						"aria-hidden": true
+					})
+				]
+			}, option.value);
+		})]
+	})] });
+}
+//#endregion
+export { ThemeDropdown, ThemeSegmentedSwitch, ThemeSwitch, ThemeToggle };

package/dist/chat-composer-attachment.d.ts

@@ -0,0 +1,55 @@
+import { ButtonKnobStyle } from "./knob-contracts/button-knobs.js";
+import { Button } from "./ui/button.js";
+import { ChatComposerAttachmentKnobStyle } from "./knob-contracts/chat-composer-attachment-knobs.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/chat-composer-attachment.d.ts
+type ChatComposerAttachmentKind = "image" | "pdf" | "spreadsheet" | "document" | "archive" | "audio" | "video" | "file";
+type ChatComposerAttachmentStatus = "idle" | "uploading" | "uploaded" | "error";
+type ChatComposerAttachmentVariant = "auto" | "preview" | "file";
+type ChatComposerAttachmentsProps = ComponentProps<"div"> & {
+  label?: string;
+  viewportClassName?: string;
+} & {
+  style?: CSSProperties & ChatComposerAttachmentKnobStyle;
+};
+declare function ChatComposerAttachments({ label, className, viewportClassName, children, ...props }: ChatComposerAttachmentsProps): import("react").JSX.Element;
+type ChatComposerAttachmentProps = Omit<ComponentProps<"li">, "style"> & {
+  name: string;
+  type?: string;
+  description?: ReactNode;
+  status?: ChatComposerAttachmentStatus;
+  progress?: number;
+  previewUrl?: string;
+  kind?: ChatComposerAttachmentKind;
+  variant?: ChatComposerAttachmentVariant;
+  onRemove?: () => void;
+  removeLabel?: string;
+  style?: CSSProperties & ChatComposerAttachmentKnobStyle;
+};
+declare function ChatComposerAttachment({ name, type, description, status, progress: progressInput, previewUrl, kind, variant, onRemove, removeLabel, className, children, role, "aria-label": ariaLabel, ...props }: ChatComposerAttachmentProps): import("react").JSX.Element;
+type ChatComposerAttachmentPreviewProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ChatComposerAttachmentKnobStyle;
+};
+declare function ChatComposerAttachmentPreview({ className, children, ...props }: ChatComposerAttachmentPreviewProps): import("react").JSX.Element;
+type ChatComposerAttachmentContentProps = ComponentProps<"div"> & {
+  style?: CSSProperties & ChatComposerAttachmentKnobStyle;
+};
+declare function ChatComposerAttachmentContent({ className, ...props }: ChatComposerAttachmentContentProps): import("react").JSX.Element;
+type ChatComposerAttachmentTitleProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ChatComposerAttachmentKnobStyle;
+};
+declare function ChatComposerAttachmentTitle({ className, children, ...props }: ChatComposerAttachmentTitleProps): import("react").JSX.Element;
+type ChatComposerAttachmentDescriptionProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ChatComposerAttachmentKnobStyle;
+};
+declare function ChatComposerAttachmentDescription({ className, children, ...props }: ChatComposerAttachmentDescriptionProps): import("react").JSX.Element;
+type ChatComposerAttachmentRemoveProps = Omit<ComponentProps<typeof Button>, "style"> & {
+  style?: CSSProperties & ButtonKnobStyle & ChatComposerAttachmentKnobStyle;
+};
+declare function ChatComposerAttachmentRemove({ className, onClick, children, "aria-label": ariaLabel, ...props }: ChatComposerAttachmentRemoveProps): import("react").JSX.Element | null;
+type ChatComposerAttachmentProgressProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ChatComposerAttachmentKnobStyle;
+};
+declare function ChatComposerAttachmentProgress({ className, children, style, ...props }: ChatComposerAttachmentProgressProps): import("react").JSX.Element | null;
+//#endregion
+export { ChatComposerAttachment, ChatComposerAttachmentContent, ChatComposerAttachmentContentProps, ChatComposerAttachmentDescription, ChatComposerAttachmentDescriptionProps, ChatComposerAttachmentKind, ChatComposerAttachmentPreview, ChatComposerAttachmentPreviewProps, ChatComposerAttachmentProgress, ChatComposerAttachmentProgressProps, ChatComposerAttachmentProps, ChatComposerAttachmentRemove, ChatComposerAttachmentRemoveProps, ChatComposerAttachmentStatus, ChatComposerAttachmentTitle, ChatComposerAttachmentTitleProps, ChatComposerAttachmentVariant, ChatComposerAttachments, ChatComposerAttachmentsProps };