@espressif/dashboard-ui-components 1.10.0 → 1.11.0

package/dist/components/scrollable-sections/scrollable-sections.js

@@ -0,0 +1,270 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../core/select.js";
+import { Tabs, TabsList, TabsTrigger } from "../../core/animate-ui/components/animate/tabs.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/scrollable-sections/scrollable-sections.tsx
+function extractTextLabel(children) {
+	if (typeof children === "string" || typeof children === "number") return String(children);
+	if (Array.isArray(children)) return children.map(extractTextLabel).join("");
+	if (React$1.isValidElement(children) && children.props && typeof children.props === "object" && children.props !== null && "children" in children.props) return extractTextLabel(children.props.children);
+	return "";
+}
+function isTabElement(node) {
+	return React$1.isValidElement(node) && node.type === ScrollableSectionsTab;
+}
+function partitionChildren(children) {
+	let tabsEl = null;
+	const contentEls = [];
+	React$1.Children.forEach(children, (child) => {
+		if (!React$1.isValidElement(child)) return;
+		if (child.type === ScrollableSectionsTabs) tabsEl = child;
+		else if (child.type === ScrollableSectionsContent) contentEls.push(child);
+	});
+	return {
+		tabsEl,
+		contentEls
+	};
+}
+var ScrollableSectionsContext = React$1.createContext(null);
+function useScrollableSections() {
+	const ctx = React$1.useContext(ScrollableSectionsContext);
+	if (!ctx) throw new Error("ScrollableSections subcomponents must be used within ScrollableSections.");
+	return ctx;
+}
+var SPY_IGNORE_MS = 480;
+var SPY_TOP_LEEWAY_PX = 12;
+function isVerticallyScrollable(el) {
+	const { overflowY } = window.getComputedStyle(el);
+	if (overflowY !== "auto" && overflowY !== "scroll" && overflowY !== "overlay") return false;
+	return el.scrollHeight > el.clientHeight + 1;
+}
+/** Nearest scrollports upward from `start` (inclusive), for scroll-spy listeners. */
+function getScrollableAncestors(start) {
+	const out = [];
+	let cur = start;
+	while (cur) {
+		if (isVerticallyScrollable(cur)) out.push(cur);
+		cur = cur.parentElement;
+	}
+	return out;
+}
+function dedupeScrollRoots(roots) {
+	const seen = /* @__PURE__ */ new Set();
+	const out = [];
+	for (const r of roots) {
+		if (seen.has(r)) continue;
+		seen.add(r);
+		out.push(r);
+	}
+	return out;
+}
+var DEFAULT_STICKY_TOP = "1rem";
+function ScrollableSectionsRoot({ className, children, defaultValue, scrollRootRef, stickyTop = DEFAULT_STICKY_TOP, style, ...rest }) {
+	const { tabsEl, contentEls } = partitionChildren(children);
+	const [tabsItems, setTabsItems] = React$1.useState([]);
+	const [sectionsVersion, bumpSections] = React$1.useReducer((n) => n + 1, 0);
+	const sectionsRef = React$1.useRef(/* @__PURE__ */ new Map());
+	const containerRef = React$1.useRef(null);
+	const mobileNavRef = React$1.useRef(null);
+	const ignoreSpyUntil = React$1.useRef(0);
+	const prefersReducedMotionRef = React$1.useRef(false);
+	const didDefaultScrollRef = React$1.useRef(false);
+	const [activeId, setActiveId] = React$1.useState(() => defaultValue ?? "");
+	React$1.useEffect(() => {
+		const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+		prefersReducedMotionRef.current = mq.matches;
+		const onChange = () => {
+			prefersReducedMotionRef.current = mq.matches;
+		};
+		mq.addEventListener("change", onChange);
+		return () => mq.removeEventListener("change", onChange);
+	}, []);
+	const safeActiveId = activeId && tabsItems.some((t) => t.id === activeId) ? activeId : tabsItems[0]?.id ?? "";
+	const selectSection = React$1.useCallback((id) => {
+		const el = sectionsRef.current.get(id);
+		if (!el) return;
+		const smooth = !prefersReducedMotionRef.current;
+		el.scrollIntoView({
+			behavior: smooth ? "smooth" : "auto",
+			block: "start"
+		});
+		setActiveId(id);
+		ignoreSpyUntil.current = Date.now() + SPY_IGNORE_MS;
+	}, []);
+	const registerSection = React$1.useCallback((id, el) => {
+		if (el) sectionsRef.current.set(id, el);
+		else sectionsRef.current.delete(id);
+		bumpSections();
+	}, []);
+	const setTabsItemsStable = React$1.useCallback((items) => {
+		setTabsItems(items);
+		setActiveId((prev) => {
+			if (items.length === 0) return prev;
+			if (prev && items.some((t) => t.id === prev)) return prev;
+			if (defaultValue && items.some((t) => t.id === defaultValue)) return defaultValue;
+			return items[0].id;
+		});
+	}, [defaultValue]);
+	React$1.useLayoutEffect(() => {
+		if (!defaultValue || didDefaultScrollRef.current) return;
+		const el = sectionsRef.current.get(defaultValue);
+		if (!el) return;
+		didDefaultScrollRef.current = true;
+		requestAnimationFrame(() => {
+			el.scrollIntoView({
+				block: "start",
+				behavior: "auto"
+			});
+			setActiveId(defaultValue);
+		});
+	}, [defaultValue, sectionsVersion]);
+	React$1.useEffect(() => {
+		const orderedIds = tabsItems.map((t) => t.id);
+		if (orderedIds.length === 0) return;
+		const updateActive = () => {
+			if (Date.now() < ignoreSpyUntil.current) return;
+			const bar = mobileNavRef.current;
+			const threshold = (bar && bar.offsetHeight > 0 ? bar.getBoundingClientRect().bottom : 0) + SPY_TOP_LEEWAY_PX;
+			let next = orderedIds[0];
+			for (const id of orderedIds) {
+				const el = sectionsRef.current.get(id);
+				if (!el) continue;
+				if (el.getBoundingClientRect().top <= threshold) next = id;
+			}
+			setActiveId((prev) => prev === next ? prev : next);
+		};
+		const scrollRoots = scrollRootRef ? [scrollRootRef.current ?? window] : dedupeScrollRoots([...getScrollableAncestors(containerRef.current), window]);
+		for (const target of scrollRoots) target.addEventListener("scroll", updateActive, { passive: true });
+		window.addEventListener("resize", updateActive, { passive: true });
+		updateActive();
+		return () => {
+			for (const target of scrollRoots) target.removeEventListener("scroll", updateActive);
+			window.removeEventListener("resize", updateActive);
+		};
+	}, [
+		tabsItems,
+		scrollRootRef,
+		sectionsVersion
+	]);
+	const contextValue = React$1.useMemo(() => ({
+		activeId: safeActiveId,
+		selectSection,
+		registerSection,
+		setTabsItems: setTabsItemsStable
+	}), [
+		safeActiveId,
+		selectSection,
+		registerSection,
+		setTabsItemsStable
+	]);
+	return /* @__PURE__ */ jsx(ScrollableSectionsContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: containerRef,
+			className: cn("flex flex-col gap-4 md:flex-row md:items-stretch md:gap-6", className),
+			style: {
+				...style,
+				"--espd-ss-sticky-top": stickyTop
+			},
+			...rest,
+			children: [tabsEl ? /* @__PURE__ */ jsx("div", {
+				className: "hidden md:flex md:w-[30%] md:max-w-[30%] md:shrink-0 md:flex-col md:items-start",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "md:sticky w-full max-w-full",
+					style: { top: stickyTop },
+					children: tabsEl
+				})
+			}) : null, /* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-4 md:w-[70%]",
+				children: [tabsItems.length > 0 && safeActiveId ? /* @__PURE__ */ jsx("div", {
+					ref: mobileNavRef,
+					className: "sticky z-10 bg-background pb-2 md:hidden",
+					style: { top: stickyTop },
+					children: /* @__PURE__ */ jsxs(Select, {
+						value: safeActiveId,
+						onValueChange: selectSection,
+						children: [/* @__PURE__ */ jsx(SelectTrigger, {
+							className: "w-full text-sm font-medium",
+							children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Section" })
+						}), /* @__PURE__ */ jsx(SelectContent, { children: tabsItems.map((item) => /* @__PURE__ */ jsx(SelectItem, {
+							value: item.id,
+							children: item.label
+						}, item.id)) })]
+					})
+				}) : null, /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-8",
+					children: contentEls
+				})]
+			})]
+		})
+	});
+}
+function ScrollableSectionsTabs({ className, children, ...rest }) {
+	const { activeId, selectSection, setTabsItems } = useScrollableSections();
+	const tabNodes = React$1.useMemo(() => React$1.Children.toArray(children).filter(isTabElement), [children]);
+	const items = React$1.useMemo(() => tabNodes.map((node) => {
+		const { id, label, children: tabChildren } = node.props;
+		return {
+			id,
+			label: label?.trim() || extractTextLabel(tabChildren).trim() || id
+		};
+	}), [tabNodes]);
+	React$1.useLayoutEffect(() => {
+		setTabsItems(items);
+	}, [items, setTabsItems]);
+	if (tabNodes.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: cn("rounded-lg border border-border p-2", className),
+		...rest
+	});
+	const tabValue = activeId && items.some((i) => i.id === activeId) ? activeId : items[0]?.id ?? "";
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("rounded-lg border border-border p-2", className),
+		...rest,
+		children: /* @__PURE__ */ jsx(Tabs, {
+			value: tabValue,
+			onValueChange: selectSection,
+			className: "gap-0",
+			children: /* @__PURE__ */ jsx(TabsList, {
+				className: cn("flex h-auto w-full flex-col items-stretch gap-2 rounded-md border-0 bg-transparent p-0"),
+				"aria-orientation": "vertical",
+				children: tabNodes.map((node) => {
+					const { id, label, className: tabClassName, children: tabChildren } = node.props;
+					const text = label?.trim() || extractTextLabel(tabChildren).trim() || id;
+					return /* @__PURE__ */ jsx(TabsTrigger, {
+						value: id,
+						type: "button",
+						className: cn("h-auto min-h-9 w-full min-w-0 flex-none justify-start py-2 text-left whitespace-normal", tabClassName),
+						children: tabChildren != null ? tabChildren : text
+					}, id);
+				})
+			})
+		})
+	});
+}
+function ScrollableSectionsTab(_props) {
+	return null;
+}
+function ScrollableSectionsContent({ id, className, children, ...rest }) {
+	const { registerSection } = useScrollableSections();
+	return /* @__PURE__ */ jsx("div", {
+		ref: React$1.useCallback((node) => {
+			registerSection(id, node);
+		}, [id, registerSection]),
+		id,
+		className: cn("scroll-mt-[calc(var(--espd-ss-sticky-top,1rem)+3rem)] md:scroll-mt-4", className),
+		...rest,
+		children
+	});
+}
+ScrollableSectionsTab.displayName = "ScrollableSections.Tab";
+ScrollableSectionsTabs.displayName = "ScrollableSections.Tabs";
+ScrollableSectionsContent.displayName = "ScrollableSections.Content";
+var ScrollableSections = Object.assign(ScrollableSectionsRoot, {
+	Tabs: ScrollableSectionsTabs,
+	Tab: ScrollableSectionsTab,
+	Content: ScrollableSectionsContent
+});
+//#endregion
+export { ScrollableSections };

package/dist/components/search-box/search-box.js

@@ -0,0 +1,54 @@
+import { cn } from "../../utils/cn.js";
+import { Button } from "../button/button.js";
+import { outlineSearchShellClasses, searchFieldContainerSizeClasses, searchFieldIconSizeClasses, searchFieldInputTextClasses } from "../search-field-shell.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Search, X } from "lucide-react";
+//#region src/components/search-box/search-box.tsx
+function SearchBox({ placeholder, onSearch, onClear, onValueChange, size = "default", className }) {
+	const [value, setValue] = useState("");
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter") onSearch(value.trim());
+	};
+	const handleClear = () => {
+		setValue("");
+		onValueChange?.("");
+		onClear();
+	};
+	const handleValueChange = (nextValue) => {
+		setValue(nextValue);
+		onValueChange?.(nextValue);
+	};
+	const iconSize = searchFieldIconSizeClasses[size];
+	const trailingBtnClass = "h-auto w-auto p-0 m-0 shrink-0";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(outlineSearchShellClasses, "flex w-full items-center gap-2 rounded-md", "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 ring-offset-background", searchFieldContainerSizeClasses[size], className),
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "text",
+			value,
+			onChange: (e) => handleValueChange(e.target.value),
+			onKeyDown: handleKeyDown,
+			placeholder,
+			className: cn("flex-1 min-w-0 bg-transparent outline-none placeholder:text-muted-foreground", searchFieldInputTextClasses[size])
+		}), value ? /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			size,
+			fullWidth: false,
+			onClick: handleClear,
+			"aria-label": "Clear search",
+			startIcon: /* @__PURE__ */ jsx(X, { className: iconSize }),
+			className: trailingBtnClass
+		}) : /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			size,
+			fullWidth: false,
+			disabled: true,
+			startIcon: /* @__PURE__ */ jsx(Search, { className: cn(iconSize, "text-muted-foreground") }),
+			className: trailingBtnClass
+		})]
+	});
+}
+//#endregion
+export { SearchBox as default };

package/dist/components/search-field-shell.js

@@ -0,0 +1,24 @@
+//#region src/components/search-field-shell.ts
+/** Matches `buttonVariants` outline surface (border, bg, shadow, hover). */
+var outlineSearchShellClasses = "border border-input bg-background transition-colors hover:bg-accent hover:text-accent-foreground";
+var searchFieldContainerSizeClasses = {
+	default: "h-9 px-4 py-2 text-sm",
+	sm: "h-8 px-3 text-xs",
+	lg: "h-10 px-8 text-sm"
+};
+/**
+* Text size of the search `<input>` itself. 16px below `md`, like `Input`: iOS Safari zooms the
+* page into any focused field whose text is smaller than 16px.
+*/
+var searchFieldInputTextClasses = {
+	default: "text-base md:text-sm",
+	sm: "text-base md:text-xs",
+	lg: "text-base md:text-sm"
+};
+var searchFieldIconSizeClasses = {
+	default: "h-4 w-4",
+	sm: "h-3 w-3",
+	lg: "h-4 w-4"
+};
+//#endregion
+export { outlineSearchShellClasses, searchFieldContainerSizeClasses, searchFieldIconSizeClasses, searchFieldInputTextClasses };

package/dist/components/selectable-card-list/checkbox-card-list.js

@@ -0,0 +1,85 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { TooltipProvider } from "../../core/animate-ui/components/animate/tooltip.js";
+import { Checkbox } from "../../core/checkbox/motion-checkbox.js";
+import { FormFieldMirrors, SelectableCardListElementIndicator, SelectableCardListRowContent, controlAriaLabel, sizeStyles } from "./selectable-card-list-shared.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/selectable-card-list/checkbox-card-list.tsx
+function CheckboxCardList(props) {
+	const { data, value, onChange, size, className, ariaLabel, ariaLabelledBy, name, form, element = "auto" } = props;
+	const s = sizeStyles[size];
+	const useNativeControl = element === "auto";
+	const isRowSelected = (id) => value.includes(id);
+	const handleChecked = (id, state) => {
+		const on = state === true;
+		const cur = new Set(value);
+		if (on) cur.add(id);
+		else cur.delete(id);
+		onChange([...cur]);
+	};
+	return /* @__PURE__ */ jsx(TooltipProvider, {
+		openDelay: 300,
+		closeDelay: 100,
+		children: /* @__PURE__ */ jsxs("div", {
+			role: "group",
+			className: cn("flex flex-col", s.listGap, className),
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			children: [/* @__PURE__ */ jsx(FormFieldMirrors, {
+				name,
+				form,
+				value,
+				multiple: true
+			}), data.map((item) => {
+				const selected = isRowSelected(item.id);
+				const aria = controlAriaLabel(item);
+				const rowClassName = cn("flex cursor-pointer items-center rounded-lg border-2 bg-card text-left transition-colors", selected ? "border-primary" : "border-border", s.rowPad, s.gap, item.disabled && "cursor-not-allowed opacity-50", !item.disabled && !selected && "hover:bg-accent/10 hover:border-primary/20");
+				const rowContent = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: cn("flex min-w-0 flex-1 items-center", s.gap),
+					children: /* @__PURE__ */ jsx(SelectableCardListRowContent, {
+						item,
+						selected,
+						s
+					})
+				}), useNativeControl ? /* @__PURE__ */ jsx(Checkbox, {
+					checked: selected,
+					disabled: item.disabled,
+					onCheckedChange: (c) => handleChecked(item.id, c),
+					"aria-label": aria,
+					className: cn("shrink-0", s.indicator)
+				}) : /* @__PURE__ */ jsx(SelectableCardListElementIndicator, {
+					element,
+					selected,
+					size,
+					disabled: item.disabled
+				})] });
+				if (useNativeControl) return /* @__PURE__ */ jsx("label", {
+					className: rowClassName,
+					children: rowContent
+				}, item.id);
+				return /* @__PURE__ */ jsx("div", {
+					role: "checkbox",
+					"aria-checked": selected,
+					"aria-disabled": item.disabled ? true : void 0,
+					"aria-label": aria,
+					tabIndex: item.disabled ? -1 : 0,
+					className: rowClassName,
+					onClick: () => {
+						if (item.disabled) return;
+						handleChecked(item.id, !selected);
+					},
+					onKeyDown: (e) => {
+						if (item.disabled) return;
+						if (e.key === " " || e.key === "Enter") {
+							e.preventDefault();
+							handleChecked(item.id, !selected);
+						}
+					},
+					children: rowContent
+				}, item.id);
+			})]
+		})
+	});
+}
+//#endregion
+export { CheckboxCardList };

package/dist/components/selectable-card-list/radio-card-list.js

@@ -0,0 +1,99 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { TooltipProvider } from "../../core/animate-ui/components/animate/tooltip.js";
+import { Radio, RadioGroup } from "../../core/animate-ui/components/base/radio.js";
+import { FormFieldMirrors, SelectableCardListElementIndicator, SelectableCardListRowContent, controlAriaLabel, sizeStyles } from "./selectable-card-list-shared.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/selectable-card-list/radio-card-list.tsx
+function RadioCardListRows({ data, value, onChange, size, element, s }) {
+	const useNativeControl = element === "auto";
+	return data.map((item) => {
+		const selected = value === item.id;
+		const aria = controlAriaLabel(item);
+		const rowClassName = cn("flex cursor-pointer items-center rounded-lg border-2 bg-card text-left transition-colors", selected ? "border-primary" : "border-border", s.rowPad, s.gap, item.disabled && "cursor-not-allowed opacity-50", !item.disabled && !selected && "hover:bg-accent/10 hover:border-primary/20");
+		const rowContent = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: cn("flex min-w-0 flex-1 items-center", s.gap),
+			children: /* @__PURE__ */ jsx(SelectableCardListRowContent, {
+				item,
+				selected,
+				s
+			})
+		}), useNativeControl ? /* @__PURE__ */ jsx(Radio, {
+			value: item.id,
+			disabled: item.disabled,
+			className: cn("shrink-0", s.indicator),
+			"aria-label": aria
+		}) : /* @__PURE__ */ jsx(SelectableCardListElementIndicator, {
+			element,
+			selected,
+			size,
+			disabled: item.disabled
+		})] });
+		if (useNativeControl) return /* @__PURE__ */ jsx("label", {
+			className: rowClassName,
+			children: rowContent
+		}, item.id);
+		return /* @__PURE__ */ jsx("div", {
+			role: "radio",
+			"aria-checked": selected,
+			"aria-disabled": item.disabled ? true : void 0,
+			"aria-label": aria,
+			tabIndex: item.disabled ? -1 : 0,
+			className: rowClassName,
+			onClick: () => {
+				if (item.disabled) return;
+				onChange(item.id);
+			},
+			onKeyDown: (e) => {
+				if (item.disabled) return;
+				if (e.key === " " || e.key === "Enter") {
+					e.preventDefault();
+					onChange(item.id);
+				}
+			},
+			children: rowContent
+		}, item.id);
+	});
+}
+function RadioCardList({ data, value, onChange, size, className, ariaLabel, ariaLabelledBy, name, form, element = "auto" }) {
+	const s = sizeStyles[size];
+	return /* @__PURE__ */ jsx(TooltipProvider, {
+		openDelay: 300,
+		closeDelay: 100,
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FormFieldMirrors, {
+			name,
+			form,
+			value,
+			multiple: false
+		}), element === "auto" ? /* @__PURE__ */ jsx(RadioGroup, {
+			value,
+			onValueChange: (v) => onChange(String(v)),
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			className: cn("flex flex-col", s.listGap, className),
+			children: /* @__PURE__ */ jsx(RadioCardListRows, {
+				data,
+				value,
+				onChange,
+				size,
+				element,
+				s
+			})
+		}) : /* @__PURE__ */ jsx("div", {
+			role: "radiogroup",
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			className: cn("flex flex-col", s.listGap, className),
+			children: /* @__PURE__ */ jsx(RadioCardListRows, {
+				data,
+				value,
+				onChange,
+				size,
+				element,
+				s
+			})
+		})] })
+	});
+}
+//#endregion
+export { RadioCardList };

package/dist/components/selectable-card-list/selectable-card-list-shared.js

@@ -0,0 +1,135 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { IconAvatar } from "../icon-avatar/icon-avatar.js";
+import { TruncatedLineWithTooltip } from "../truncated-line-with-tooltip/truncated-line-with-tooltip.js";
+import { cloneElement, isValidElement } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Check, X } from "lucide-react";
+//#region src/components/selectable-card-list/selectable-card-list-shared.tsx
+var sizeStyles = {
+	sm: {
+		rowPad: "p-3",
+		gap: "gap-2",
+		primary: "text-xs font-semibold text-foreground",
+		secondary: "text-xs text-muted-foreground",
+		icon: "h-[18px] w-[18px] shrink-0 items-center justify-center",
+		indicator: "size-3.5",
+		avatar: 36,
+		listGap: "gap-3"
+	},
+	default: {
+		rowPad: "p-4",
+		gap: "gap-3",
+		primary: "text-sm font-semibold text-foreground",
+		secondary: "text-sm text-muted-foreground",
+		icon: "h-6 w-6 shrink-0 items-center justify-center",
+		indicator: "size-4",
+		avatar: 44,
+		listGap: "gap-4"
+	},
+	lg: {
+		rowPad: "p-6",
+		gap: "gap-4",
+		primary: "text-base font-semibold text-foreground",
+		secondary: "text-sm text-muted-foreground",
+		icon: "h-8 w-8 shrink-0 items-center justify-center",
+		indicator: "size-5",
+		avatar: 52,
+		listGap: "gap-5"
+	}
+};
+function primaryTooltipContent(item) {
+	if (typeof item.primaryText === "string") return item.primaryText;
+	if ("ariaLabel" in item) return item.ariaLabel;
+	return null;
+}
+function iconSized(icon, iconClass) {
+	if (icon == null) return null;
+	if (isValidElement(icon)) {
+		const el = icon;
+		return cloneElement(el, { className: cn(el.props.className, iconClass) });
+	}
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex items-center justify-center", iconClass),
+		children: icon
+	});
+}
+function controlAriaLabel(item) {
+	if ("ariaLabel" in item) return item.ariaLabel;
+}
+/** ~25% larger than `sizeStyles[*].indicator` (3.5 / 4 / 5 → 17.5px / 20px / 25px). */
+var iconIndicatorClass = {
+	sm: "size-[17.5px]",
+	default: "size-5",
+	lg: "size-[25px]"
+};
+/** Decorative switch for selectable rows — not interactive; row `onClick` / keyboard toggles selection. */
+function SelectableCardSwitchVisual({ checked, disabled, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		"data-state": checked ? "checked" : "unchecked",
+		className: cn("pointer-events-none relative inline-flex h-5 w-8 shrink-0 items-center rounded-full border border-transparent px-px shadow-xs", checked ? "justify-end bg-primary" : "justify-start bg-input dark:bg-input/80", disabled && "opacity-50", className),
+		children: /* @__PURE__ */ jsx("span", { className: cn("pointer-events-none block size-4 rounded-full bg-background ring-0", checked ? "dark:bg-primary-foreground" : "dark:bg-foreground") })
+	});
+}
+function SelectableCardListElementIndicator({ element, selected, size, disabled }) {
+	if (element === "switch") return /* @__PURE__ */ jsx(SelectableCardSwitchVisual, {
+		checked: selected,
+		disabled
+	});
+	const Icon = selected ? Check : X;
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex shrink-0 items-center justify-center", selected ? "text-success" : "text-error", iconIndicatorClass[size]),
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsx(Icon, {
+			className: "size-full",
+			strokeWidth: 2.5
+		})
+	});
+}
+function FormFieldMirrors({ name, form, value, multiple }) {
+	if (name == null || name === "") return null;
+	if (multiple) return /* @__PURE__ */ jsx("div", {
+		className: "hidden",
+		"aria-hidden": true,
+		children: value.map((id) => /* @__PURE__ */ jsx("input", {
+			type: "hidden",
+			name,
+			value: id,
+			form
+		}, id))
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "hidden",
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsx("input", {
+			type: "hidden",
+			name,
+			value,
+			form
+		})
+	});
+}
+function SelectableCardListRowContent({ item, selected, s }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		className: "flex shrink-0 items-center justify-center",
+		children: /* @__PURE__ */ jsx(IconAvatar, {
+			size: s.avatar,
+			color: selected ? "primary" : "gray",
+			children: iconSized(item.icon, s.icon)
+		})
+	}), /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 flex-1 flex-col gap-0.5",
+		children: [/* @__PURE__ */ jsx(TruncatedLineWithTooltip, {
+			className: s.primary,
+			tooltipContent: primaryTooltipContent(item),
+			children: item.primaryText
+		}), item.secondaryText != null ? /* @__PURE__ */ jsx(TruncatedLineWithTooltip, {
+			className: s.secondary,
+			tooltipContent: item.secondaryText,
+			children: item.secondaryText
+		}) : null]
+	})] });
+}
+//#endregion
+export { FormFieldMirrors, SelectableCardListElementIndicator, SelectableCardListRowContent, SelectableCardSwitchVisual, controlAriaLabel, iconSized, sizeStyles };