@aortl/admin-react 0.3.0 → 0.5.0

package/dist/index.mjs

@@ -12,28 +12,49 @@ import { Field as Field$1 } from "@base-ui/react/field";
 import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+//#region src/cn.ts
+/**
+* Every admin class name is prefixed so the bundle can coexist with a host
+* page's CSS without colliding on common names like `.btn` or `.card`. The
+* matching CSS lives in `@aortl/admin-css/admin.scoped.css` (built by
+* `wrap-scoped.mjs`), which carries the same prefix on every selector.
+*/
+var PREFIX = "_ao-";
+function prefixTokens(value) {
+	if (!value) return "";
+	return value.split(/\s+/).filter(Boolean).map((token) => `${PREFIX}${token}`).join(" ");
+}
+function join(...parts) {
+	return parts.filter(Boolean).join(" ");
+}
+function cn(base, className) {
+	const baseClasses = prefixTokens(clsx(base));
+	if (typeof className === "function") return (state) => join(baseClasses, className(state) ?? void 0);
+	return join(baseClasses, className);
+}
+//#endregion
 //#region src/Accordion.tsx
 function AccordionRoot({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("accordion", className),
+		className: cn("accordion", className),
 		...rest
 	});
 }
 function AccordionItem({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("details", {
-		className: clsx("accordion-item", className),
+		className: cn("accordion-item", className),
 		...rest
 	});
 }
 function AccordionSummary({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("summary", {
-		className: clsx("accordion-summary", className),
+		className: cn("accordion-summary", className),
 		...rest
 	});
 }
 function AccordionContent({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("accordion-content", className),
+		className: cn("accordion-content", className),
 		...rest
 	});
 }
@@ -44,10 +65,16 @@ var Accordion = Object.assign(AccordionRoot, {
 });
 //#endregion
 //#region src/AdminRoot.tsx
-function AdminRoot({ className, ...rest }) {
+function AdminRoot({ className, theme, systemAccent, style, ...rest }) {
+	const rootStyle = systemAccent !== void 0 ? {
+		...style,
+		"--color-system-accent": systemAccent
+	} : style;
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("admin-root", className),
-		...rest
+		className: cn("admin-root", className),
+		style: rootStyle,
+		...rest,
+		...theme !== void 0 && { "data-theme": theme }
 	});
 }
 //#endregion
@@ -73,7 +100,7 @@ function renderIcon(icon, size = 16) {
 function AlertRoot({ variant = "info", icon, title, description, className, role, children, ...rest }) {
 	return /* @__PURE__ */ jsxs("div", {
 		role: role ?? (variant === "danger" || variant === "warning" ? "alert" : "status"),
-		className: clsx("alert", `alert-${variant}`, className),
+		className: cn(["alert", `alert-${variant}`], className),
 		...rest,
 		children: [
 			renderIcon(icon),
@@ -85,13 +112,13 @@ function AlertRoot({ variant = "info", icon, title, description, className, role
 }
 function AlertTitle({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("strong", {
-		className: clsx("alert-title", className),
+		className: cn("alert-title", className),
 		...rest
 	});
 }
 function AlertDescription({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("p", {
-		className: clsx("alert-description", className),
+		className: cn("alert-description", className),
 		...rest
 	});
 }
@@ -129,7 +156,11 @@ function AppShellRoot({ hasSidebar = false, hasFooter = false, mobileDrawerOpen,
 	return /* @__PURE__ */ jsx(AppShellContext.Provider, {
 		value,
 		children: /* @__PURE__ */ jsx("div", {
-			className: clsx("app-shell", hasSidebar && "app-shell-with-sidebar", hasFooter && "app-shell-with-footer", className),
+			className: cn([
+				"app-shell",
+				hasSidebar && "app-shell-with-sidebar",
+				hasFooter && "app-shell-with-footer"
+			], className),
 			style: rootStyle,
 			...rest,
 			children
@@ -138,7 +169,7 @@ function AppShellRoot({ hasSidebar = false, hasFooter = false, mobileDrawerOpen,
 }
 function AppShellMain({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("main", {
-		className: clsx("app-shell-main", className),
+		className: cn("app-shell-main", className),
 		...rest
 	});
 }
@@ -147,7 +178,11 @@ var AppShell = Object.assign(AppShellRoot, { Main: AppShellMain });
 //#region src/Badge.tsx
 function Badge({ variant = "neutral", size = "md", icon, className, children, ...rest }) {
 	return /* @__PURE__ */ jsxs("span", {
-		className: clsx("badge", `badge-${variant}`, size !== "md" && `badge-${size}`, className),
+		className: cn([
+			"badge",
+			`badge-${variant}`,
+			size !== "md" && `badge-${size}`
+		], className),
 		...rest,
 		children: [renderIcon(icon, size === "sm" ? 10 : 12), children]
 	});
@@ -156,26 +191,13 @@ function Badge({ variant = "neutral", size = "md", icon, className, children, ..
 //#region src/BrandTile.tsx
 function BrandTile({ monogram, icon, className, children, ...rest }) {
 	return /* @__PURE__ */ jsx("span", {
-		className: clsx("brand-tile", className),
+		className: cn("brand-tile", className),
 		"aria-hidden": true,
 		...rest,
 		children: icon ? renderIcon(icon, 14) : children ?? monogram
 	});
 }
 //#endregion
-//#region src/cn.ts
-/**
-* className merger that preserves Base UI's render-prop className form.
-*
-* Base UI components accept `className: string | ((state) => string | undefined)`. The plain
-* `clsx()` path is correct for strings, but a function form has to be deferred
-* until Base UI invokes it with the component state.
-*/
-function cn(base, className) {
-	if (typeof className === "function") return (state) => clsx(base, className(state));
-	return clsx(base, className);
-}
-//#endregion
 //#region src/Button.tsx
 function Button({ variant = "primary", size = "md", fullWidth, loading, icon, iconTrailing, className, type = "button", disabled, children, ...rest }) {
 	const iconOnly = children == null && (icon != null || iconTrailing != null);
@@ -204,7 +226,7 @@ function Button({ variant = "primary", size = "md", fullWidth, loading, icon, ic
 function ButtonGroup({ orientation = "horizontal", role = "group", className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
 		role,
-		className: clsx("btn-group", orientation === "vertical" && "btn-group-vertical", className),
+		className: cn(["btn-group", orientation === "vertical" && "btn-group-vertical"], className),
 		...rest
 	});
 }
@@ -214,7 +236,7 @@ function BreadcrumbsRoot({ separator, className, children, "aria-label": ariaLab
 	const items = Children.toArray(children).filter(isValidElement);
 	return /* @__PURE__ */ jsx("nav", {
 		"aria-label": ariaLabel,
-		className: clsx("breadcrumbs", className),
+		className: cn("breadcrumbs", className),
 		...rest,
 		children: /* @__PURE__ */ jsx("ol", { children: items.map((child, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [child, i < items.length - 1 ? /* @__PURE__ */ jsx(BreadcrumbSeparator, { children: separator }) : null] }, child.key ?? i)) })
 	});
@@ -223,7 +245,7 @@ function BreadcrumbItem(props) {
 	if (props.href !== void 0) {
 		const { className, current, icon, children, ...rest } = props;
 		return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
-			className: clsx("breadcrumb-item", className),
+			className: cn("breadcrumb-item", className),
 			"aria-current": current ? "page" : void 0,
 			...rest,
 			children: [renderIcon(icon, 14), children]
@@ -231,7 +253,7 @@ function BreadcrumbItem(props) {
 	}
 	const { className, current, icon, children, ...rest } = props;
 	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("span", {
-		className: clsx("breadcrumb-item", className),
+		className: cn("breadcrumb-item", className),
 		"aria-current": current ? "page" : void 0,
 		...rest,
 		children: [renderIcon(icon, 14), children]
@@ -240,7 +262,7 @@ function BreadcrumbItem(props) {
 function BreadcrumbSeparator({ className, children, ...rest }) {
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
-		className: clsx("breadcrumb-separator", className),
+		className: cn("breadcrumb-separator", className),
 		...rest,
 		children
 	});
@@ -279,13 +301,13 @@ function FileInput({ variant = "bordered", inputSize = "md", className, ...rest
 //#region src/InputGroup.tsx
 function InputGroupRoot({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("input-group", className),
+		className: cn("input-group", className),
 		...rest
 	});
 }
 function InputGroupAddon({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("span", {
-		className: clsx("input-group-addon", className),
+		className: cn("input-group-addon", className),
 		...rest
 	});
 }
@@ -370,10 +392,10 @@ function Pagination({ page, total, onPageChange, siblingCount = 1, boundaryCount
 	const next = nextIcon !== void 0 ? renderIcon(nextIcon, 16) : /* @__PURE__ */ jsx(ChevronRightIcon, {});
 	return /* @__PURE__ */ jsx("nav", {
 		"aria-label": ariaLabel,
-		className: clsx("pagination", className),
+		className: cn("pagination", className),
 		...rest,
 		children: /* @__PURE__ */ jsx("ul", { children: items.map((item, i) => /* @__PURE__ */ jsx("li", {
-			className: "page-item",
+			className: cn("page-item", void 0),
 			children: renderItem ? renderItem(item) : defaultRender(item, onPageChange, prev, next)
 		}, paginationItemKey(item, i))) })
 	});
@@ -419,7 +441,7 @@ function defaultRender(item, onPageChange, prev, next) {
 	switch (item.type) {
 		case "previous": return /* @__PURE__ */ jsx("button", {
 			type: "button",
-			className: "page-link",
+			className: cn("page-link", void 0),
 			"aria-label": "Previous page",
 			"aria-disabled": item.disabled || void 0,
 			disabled: item.disabled,
@@ -428,7 +450,7 @@ function defaultRender(item, onPageChange, prev, next) {
 		});
 		case "next": return /* @__PURE__ */ jsx("button", {
 			type: "button",
-			className: "page-link",
+			className: cn("page-link", void 0),
 			"aria-label": "Next page",
 			"aria-disabled": item.disabled || void 0,
 			disabled: item.disabled,
@@ -436,13 +458,13 @@ function defaultRender(item, onPageChange, prev, next) {
 			children: next
 		});
 		case "ellipsis": return /* @__PURE__ */ jsx("span", {
-			className: "page-ellipsis",
+			className: cn("page-ellipsis", void 0),
 			"aria-hidden": "true",
 			children: "…"
 		});
 		case "page": return /* @__PURE__ */ jsx("button", {
 			type: "button",
-			className: clsx("page-link", item.selected && "active"),
+			className: cn(["page-link", item.selected && "active"], void 0),
 			"aria-current": item.selected ? "page" : void 0,
 			"aria-label": `Page ${item.page}`,
 			onClick: () => onPageChange(item.page),
@@ -454,7 +476,11 @@ function defaultRender(item, onPageChange, prev, next) {
 //#region src/Textarea.tsx
 function Textarea({ variant = "bordered", textareaSize = "md", className, ...rest }) {
 	return /* @__PURE__ */ jsx("textarea", {
-		className: clsx("textarea", `textarea-${variant}`, textareaSize !== "md" && `textarea-${textareaSize}`, className),
+		className: cn([
+			"textarea",
+			`textarea-${variant}`,
+			textareaSize !== "md" && `textarea-${textareaSize}`
+		], className),
 		...rest
 	});
 }
@@ -516,7 +542,11 @@ function Progress({ value, max = 100, variant = "primary", size = "md", classNam
 	return /* @__PURE__ */ jsx("progress", {
 		value,
 		max,
-		className: clsx("progress", variant !== "primary" && `progress-${variant}`, size !== "md" && `progress-${size}`, className),
+		className: cn([
+			"progress",
+			variant !== "primary" && `progress-${variant}`,
+			size !== "md" && `progress-${size}`
+		], className),
 		...rest
 	});
 }
@@ -525,7 +555,7 @@ function Progress({ value, max = 100, variant = "primary", size = "md", classNam
 function Spinner({ size = "md", label = "Loading", className, ...rest }) {
 	return /* @__PURE__ */ jsx("output", {
 		"aria-label": label,
-		className: clsx("spinner", size !== "md" && `spinner-${size}`, className),
+		className: cn(["spinner", size !== "md" && `spinner-${size}`], className),
 		...rest
 	});
 }
@@ -652,7 +682,11 @@ var Select = Object.assign(SelectRoot, {
 */
 function CardContainer({ bordered, compact, className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("card", bordered && "card-bordered", compact && "card-compact", className),
+		className: cn([
+			"card",
+			bordered && "card-bordered",
+			compact && "card-compact"
+		], className),
 		...rest
 	});
 }
@@ -681,26 +715,26 @@ function CardRoot({ bordered, compact, icon, title, description, actions, classN
 }
 function CardBody({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("card-body", className),
+		className: cn("card-body", className),
 		...rest
 	});
 }
 function CardTitle({ icon, className, children, ...rest }) {
 	return /* @__PURE__ */ jsxs("h3", {
-		className: clsx("card-title", className),
+		className: cn("card-title", className),
 		...rest,
 		children: [renderIcon(icon), children]
 	});
 }
 function CardDescription({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("p", {
-		className: clsx("card-description", className),
+		className: cn("card-description", className),
 		...rest
 	});
 }
 function CardActions({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("card-actions", className),
+		className: cn("card-actions", className),
 		...rest
 	});
 }
@@ -754,7 +788,7 @@ function DialogContainer({ open, onOpenChange, size = "md", closedby = "any", cl
 		value: { close: () => ref.current?.close() },
 		children: /* @__PURE__ */ jsx("dialog", {
 			ref,
-			className: clsx("dialog", size !== "md" && `dialog-${size}`, className),
+			className: cn(["dialog", size !== "md" && `dialog-${size}`], className),
 			closedby,
 			...rest,
 			children
@@ -763,32 +797,32 @@ function DialogContainer({ open, onOpenChange, size = "md", closedby = "any", cl
 }
 function DialogHeader({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("dialog-header", className),
+		className: cn("dialog-header", className),
 		...rest
 	});
 }
 function DialogTitle({ icon, className, children, ...rest }) {
 	return /* @__PURE__ */ jsxs("h2", {
-		className: clsx("dialog-title", className),
+		className: cn("dialog-title", className),
 		...rest,
 		children: [renderIcon(icon), children]
 	});
 }
 function DialogDescription({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("p", {
-		className: clsx("dialog-description", className),
+		className: cn("dialog-description", className),
 		...rest
 	});
 }
 function DialogBody({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("dialog-body", className),
+		className: cn("dialog-body", className),
 		...rest
 	});
 }
 function DialogFooter({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("dialog-footer", className),
+		className: cn("dialog-footer", className),
 		...rest
 	});
 }
@@ -796,7 +830,7 @@ function DialogCloseButton({ icon, className, children, onClick, type = "button"
 	const ctx = useContext(DialogContext);
 	return /* @__PURE__ */ jsx("button", {
 		type,
-		className: clsx("dialog-close", className),
+		className: cn("dialog-close", className),
 		"aria-label": ariaLabel,
 		onClick: (event) => {
 			onClick?.(event);
@@ -820,7 +854,7 @@ function DialogRoot({ icon, title, description, actions, dismissible = true, clo
 			showHeader ? /* @__PURE__ */ jsxs(DialogHeader, { children: [hasTitle ? /* @__PURE__ */ jsx(DialogTitle, {
 				icon,
 				children: title
-			}) : /* @__PURE__ */ jsx("span", { className: "flex-1" }), dismissible ? /* @__PURE__ */ jsx(DialogCloseButton, { "aria-label": closeLabel }) : null] }) : null,
+			}) : /* @__PURE__ */ jsx("span", { className: cn("flex-1", void 0) }), dismissible ? /* @__PURE__ */ jsx(DialogCloseButton, { "aria-label": closeLabel }) : null] }) : null,
 			description !== void 0 ? /* @__PURE__ */ jsx(DialogDescription, { children: description }) : null,
 			children !== void 0 ? /* @__PURE__ */ jsx(DialogBody, { children }) : null,
 			actions !== void 0 ? /* @__PURE__ */ jsx(DialogFooter, { children: actions }) : null
@@ -872,26 +906,26 @@ var Field = Object.assign(FieldRoot, {
 //#region src/Footer.tsx
 function FooterRoot({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("footer", {
-		className: clsx("footer", className),
+		className: cn("footer", className),
 		...rest
 	});
 }
 function FooterLinks({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("footer-links", className),
+		className: cn("footer-links", className),
 		...rest
 	});
 }
 function FooterLink({ className, children, ...rest }) {
 	return /* @__PURE__ */ jsx("a", {
-		className: clsx("footer-link", className),
+		className: cn("footer-link", className),
 		...rest,
 		children
 	});
 }
 function FooterMeta({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("footer-meta", className),
+		className: cn("footer-meta", className),
 		...rest
 	});
 }
@@ -904,20 +938,20 @@ var Footer = Object.assign(FooterRoot, {
 //#region src/Menu.tsx
 function MenuRoot({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("details", {
-		className: clsx("menu", className),
+		className: cn("menu", className),
 		...rest
 	});
 }
 function MenuTrigger({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("summary", {
-		className: clsx("menu-trigger", className),
+		className: cn("menu-trigger", className),
 		...rest
 	});
 }
 function MenuPopup({ className, role = "menu", ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
 		role,
-		className: clsx("menu-popup", className),
+		className: cn("menu-popup", className),
 		...rest
 	});
 }
@@ -926,7 +960,7 @@ function MenuItem(props) {
 		const { className, role = "menuitem", icon, children, ...rest } = props;
 		return /* @__PURE__ */ jsxs("a", {
 			role,
-			className: clsx("menu-item", className),
+			className: cn("menu-item", className),
 			...rest,
 			children: [renderIcon(icon), children]
 		});
@@ -935,27 +969,27 @@ function MenuItem(props) {
 	return /* @__PURE__ */ jsxs("button", {
 		type,
 		role,
-		className: clsx("menu-item", className),
+		className: cn("menu-item", className),
 		...rest,
 		children: [renderIcon(icon), children]
 	});
 }
 function MenuSeparator({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("hr", {
-		className: clsx("menu-separator", className),
+		className: cn("menu-separator", className),
 		...rest
 	});
 }
 function MenuGroup({ className, role = "group", ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
 		role,
-		className: clsx("menu-group", className),
+		className: cn("menu-group", className),
 		...rest
 	});
 }
 function MenuGroupLabel({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("menu-group-label", className),
+		className: cn("menu-group-label", className),
 		...rest
 	});
 }
@@ -971,25 +1005,25 @@ var Menu = Object.assign(MenuRoot, {
 //#region src/Navbar.tsx
 function NavbarRoot({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("header", {
-		className: clsx("navbar", className),
+		className: cn("navbar", className),
 		...rest
 	});
 }
 function NavbarBrand({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("navbar-brand", className),
+		className: cn("navbar-brand", className),
 		...rest
 	});
 }
 function NavbarItems({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("nav", {
-		className: clsx("navbar-items", className),
+		className: cn("navbar-items", className),
 		...rest
 	});
 }
 function NavbarItem({ active, icon, className, children, ...rest }) {
 	return /* @__PURE__ */ jsxs("a", {
-		className: clsx("navbar-item", className),
+		className: cn("navbar-item", className),
 		"aria-current": active ? "page" : void 0,
 		...rest,
 		children: [renderIcon(icon), children]
@@ -1000,14 +1034,14 @@ function NavbarDropdown({ label, className, children, ...rest }) {
 		className,
 		...rest,
 		children: [/* @__PURE__ */ jsx(Menu.Trigger, {
-			className: "navbar-item",
+			className: cn("navbar-item", void 0),
 			children: label
 		}), /* @__PURE__ */ jsx(Menu.Popup, { children })]
 	});
 }
 function NavbarActions({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("navbar-actions", className),
+		className: cn("navbar-actions", className),
 		...rest
 	});
 }
@@ -1019,7 +1053,7 @@ function NavbarMobileToggle({ label = "Open menu", className, type = "button", .
 		"aria-label": label,
 		"aria-expanded": open,
 		onClick: () => shell?.setMobileDrawerOpen(!open),
-		className: clsx("navbar-mobile-toggle", className),
+		className: cn("navbar-mobile-toggle", className),
 		...rest
 	});
 }
@@ -1120,38 +1154,44 @@ var Tooltip = Object.assign(TooltipShorthand, {
 //#region src/Table.tsx
 function TableRoot({ striped, bordered, relaxed, sticky, className, ...rest }) {
 	return /* @__PURE__ */ jsx("table", {
-		className: clsx("table", striped && "table-striped", bordered && "table-bordered", relaxed && "table-relaxed", sticky && "table-sticky", className),
+		className: cn([
+			"table",
+			striped && "table-striped",
+			bordered && "table-bordered",
+			relaxed && "table-relaxed",
+			sticky && "table-sticky"
+		], className),
 		...rest
 	});
 }
 function TableHead({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("thead", {
-		className: clsx(className),
+		className,
 		...rest
 	});
 }
 function TableBody({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("tbody", {
-		className: clsx(className),
+		className,
 		...rest
 	});
 }
 function TableFoot({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("tfoot", {
-		className: clsx(className),
+		className,
 		...rest
 	});
 }
 function TableRow({ selected, asLink, className, ...rest }) {
 	return /* @__PURE__ */ jsx("tr", {
-		className: clsx(asLink && "table-row-link", className),
+		className: cn(asLink && "table-row-link", className),
 		"data-selected": selected || void 0,
 		...rest
 	});
 }
 function TableHeaderCell({ align, gutter, className, scope, ...rest }) {
 	return /* @__PURE__ */ jsx("th", {
-		className: clsx("table-header-cell", gutter && "table-cell-gutter", className),
+		className: cn(["table-header-cell", gutter && "table-cell-gutter"], className),
 		"data-align": align && align !== "left" ? align : void 0,
 		scope: scope ?? "col",
 		...rest
@@ -1159,7 +1199,11 @@ function TableHeaderCell({ align, gutter, className, scope, ...rest }) {
 }
 function TableCell({ align, gutter, numeric, className, ...rest }) {
 	return /* @__PURE__ */ jsx("td", {
-		className: clsx("table-cell", gutter && "table-cell-gutter", numeric && "table-cell-numeric", className),
+		className: cn([
+			"table-cell",
+			gutter && "table-cell-gutter",
+			numeric && "table-cell-numeric"
+		], className),
 		"data-align": align && align !== "left" ? align : void 0,
 		...rest
 	});
@@ -1185,14 +1229,14 @@ function SidebarRoot({ collapsed, defaultCollapsed, onCollapsedChange, drawerLab
 			onCollapsedChange
 		},
 		children: [/* @__PURE__ */ jsx("aside", {
-			className: clsx("sidebar", className),
+			className: cn("sidebar", className),
 			...rest,
 			children: drawerOpen ? null : children
 		}), shell ? /* @__PURE__ */ jsx(Dialog$1.Root, {
 			open: drawerOpen,
 			onOpenChange: (open) => shell.setMobileDrawerOpen(open),
-			children: /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [/* @__PURE__ */ jsx(Dialog$1.Backdrop, { className: "sidebar-drawer-backdrop" }), /* @__PURE__ */ jsx(Dialog$1.Popup, {
-				className: "sidebar-drawer",
+			children: /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [/* @__PURE__ */ jsx(Dialog$1.Backdrop, { className: cn("sidebar-drawer-backdrop", void 0) }), /* @__PURE__ */ jsx(Dialog$1.Popup, {
+				className: cn("sidebar-drawer", void 0),
 				"aria-label": drawerLabel,
 				onClick: (event) => {
 					if (event.target.closest("a, [data-drawer-close]")) shell.setMobileDrawerOpen(false);
@@ -1204,31 +1248,31 @@ function SidebarRoot({ collapsed, defaultCollapsed, onCollapsedChange, drawerLab
 }
 function SidebarHeader({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("sidebar-header", className),
+		className: cn("sidebar-header", className),
 		...rest
 	});
 }
 function SidebarNav({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("nav", {
-		className: clsx("sidebar-nav", className),
+		className: cn("sidebar-nav", className),
 		...rest
 	});
 }
 function SidebarGroup({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("sidebar-group", className),
+		className: cn("sidebar-group", className),
 		...rest
 	});
 }
 function SidebarGroupLabel({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("sidebar-group-label", className),
+		className: cn("sidebar-group-label", className),
 		...rest
 	});
 }
 function SidebarItem({ active, icon, badge, className, children, ...rest }) {
 	return /* @__PURE__ */ jsxs("a", {
-		className: clsx("sidebar-item", className),
+		className: cn("sidebar-item", className),
 		"aria-current": active ? "page" : void 0,
 		...rest,
 		children: [
@@ -1241,19 +1285,19 @@ function SidebarItem({ active, icon, badge, className, children, ...rest }) {
 function SidebarIcon({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": true,
-		className: clsx("sidebar-icon", className),
+		className: cn("sidebar-icon", className),
 		...rest
 	});
 }
 function SidebarLabel({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("span", {
-		className: clsx("sidebar-label", className),
+		className: cn("sidebar-label", className),
 		...rest
 	});
 }
 function SidebarBadge({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("span", {
-		className: clsx("sidebar-badge", className),
+		className: cn("sidebar-badge", className),
 		...rest
 	});
 }
@@ -1263,7 +1307,7 @@ function SidebarCollapsible({ icon, label, trigger, children, className, open, d
 	const isOpen = isControlled ? open : internalOpen;
 	const triggerContent = trigger ?? /* @__PURE__ */ jsxs(Fragment, { children: [icon != null ? /* @__PURE__ */ jsx(SidebarIcon, { children: renderIcon(icon) }) : null, label !== void 0 ? /* @__PURE__ */ jsx(SidebarLabel, { children: label }) : null] });
 	return /* @__PURE__ */ jsxs("details", {
-		className: clsx("sidebar-collapsible", className),
+		className: cn("sidebar-collapsible", className),
 		open: isOpen,
 		onToggle: (event) => {
 			const next = event.currentTarget.open;
@@ -1272,17 +1316,17 @@ function SidebarCollapsible({ icon, label, trigger, children, className, open, d
 		},
 		...rest,
 		children: [/* @__PURE__ */ jsx("summary", {
-			className: "sidebar-collapsible-trigger",
+			className: cn("sidebar-collapsible-trigger", void 0),
 			children: triggerContent
 		}), /* @__PURE__ */ jsx("div", {
-			className: "sidebar-collapsible-panel",
+			className: cn("sidebar-collapsible-panel", void 0),
 			children
 		})]
 	});
 }
 function SidebarSubItem({ active, icon, badge, className, children, ...rest }) {
 	return /* @__PURE__ */ jsxs("a", {
-		className: clsx("sidebar-subitem", className),
+		className: cn("sidebar-subitem", className),
 		"aria-current": active ? "page" : void 0,
 		...rest,
 		children: [
@@ -1294,7 +1338,7 @@ function SidebarSubItem({ active, icon, badge, className, children, ...rest }) {
 }
 function SidebarFooter({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("sidebar-footer", className),
+		className: cn("sidebar-footer", className),
 		...rest
 	});
 }
@@ -1303,18 +1347,18 @@ function SidebarCollapseToggle({ label = "Toggle sidebar", className, children,
 	const controlledChecked = ctx?.collapsed;
 	const isControlled = controlledChecked !== void 0;
 	return /* @__PURE__ */ jsxs("label", {
-		className: clsx("sidebar-collapse-toggle", className),
+		className: cn("sidebar-collapse-toggle", className),
 		...rest,
 		children: [
 			/* @__PURE__ */ jsx("input", {
 				type: "checkbox",
-				className: "sidebar-toggle",
+				className: cn("sidebar-toggle", void 0),
 				"aria-label": label,
 				...isControlled ? { checked: controlledChecked } : { defaultChecked: ctx?.defaultCollapsed },
 				onChange: (event) => ctx?.onCollapsedChange?.(event.currentTarget.checked)
 			}),
 			/* @__PURE__ */ jsx("span", {
-				className: "sr-only",
+				className: cn("sr-only", void 0),
 				children: label
 			}),
 			children