@aortl/admin-react 0.3.0 → 0.5.0

package/dist/index.cjs

@@ -13,28 +13,49 @@ let _base_ui_react_field = require("@base-ui/react/field");
 let _base_ui_react_tabs = require("@base-ui/react/tabs");
 let _base_ui_react_tooltip = require("@base-ui/react/tooltip");
 let _base_ui_react_dialog = require("@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((0, clsx.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__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.clsx)("accordion", className),
+		className: cn("accordion", className),
 		...rest
 	});
 }
 function AccordionItem({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("details", {
-		className: (0, clsx.clsx)("accordion-item", className),
+		className: cn("accordion-item", className),
 		...rest
 	});
 }
 function AccordionSummary({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", {
-		className: (0, clsx.clsx)("accordion-summary", className),
+		className: cn("accordion-summary", className),
 		...rest
 	});
 }
 function AccordionContent({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.clsx)("accordion-content", className),
+		className: cn("accordion-content", className),
 		...rest
 	});
 }
@@ -45,10 +66,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__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.clsx)("admin-root", className),
-		...rest
+		className: cn("admin-root", className),
+		style: rootStyle,
+		...rest,
+		...theme !== void 0 && { "data-theme": theme }
 	});
 }
 //#endregion
@@ -74,7 +101,7 @@ function renderIcon(icon, size = 16) {
 function AlertRoot({ variant = "info", icon, title, description, className, role, children, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		role: role ?? (variant === "danger" || variant === "warning" ? "alert" : "status"),
-		className: (0, clsx.clsx)("alert", `alert-${variant}`, className),
+		className: cn(["alert", `alert-${variant}`], className),
 		...rest,
 		children: [
 			renderIcon(icon),
@@ -86,13 +113,13 @@ function AlertRoot({ variant = "info", icon, title, description, className, role
 }
 function AlertTitle({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
-		className: (0, clsx.clsx)("alert-title", className),
+		className: cn("alert-title", className),
 		...rest
 	});
 }
 function AlertDescription({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-		className: (0, clsx.clsx)("alert-description", className),
+		className: cn("alert-description", className),
 		...rest
 	});
 }
@@ -130,7 +157,11 @@ function AppShellRoot({ hasSidebar = false, hasFooter = false, mobileDrawerOpen,
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AppShellContext.Provider, {
 		value,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, clsx.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
@@ -139,7 +170,7 @@ function AppShellRoot({ hasSidebar = false, hasFooter = false, mobileDrawerOpen,
 }
 function AppShellMain({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("main", {
-		className: (0, clsx.clsx)("app-shell-main", className),
+		className: cn("app-shell-main", className),
 		...rest
 	});
 }
@@ -148,7 +179,11 @@ var AppShell = Object.assign(AppShellRoot, { Main: AppShellMain });
 //#region src/Badge.tsx
 function Badge({ variant = "neutral", size = "md", icon, className, children, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: (0, clsx.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]
 	});
@@ -157,26 +192,13 @@ function Badge({ variant = "neutral", size = "md", icon, className, children, ..
 //#region src/BrandTile.tsx
 function BrandTile({ monogram, icon, className, children, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: (0, clsx.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) => (0, clsx.clsx)(base, className(state));
-	return (0, clsx.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);
@@ -205,7 +227,7 @@ function Button({ variant = "primary", size = "md", fullWidth, loading, icon, ic
 function ButtonGroup({ orientation = "horizontal", role = "group", className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		role,
-		className: (0, clsx.clsx)("btn-group", orientation === "vertical" && "btn-group-vertical", className),
+		className: cn(["btn-group", orientation === "vertical" && "btn-group-vertical"], className),
 		...rest
 	});
 }
@@ -215,7 +237,7 @@ function BreadcrumbsRoot({ separator, className, children, "aria-label": ariaLab
 	const items = react.Children.toArray(children).filter(react.isValidElement);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
 		"aria-label": ariaLabel,
-		className: (0, clsx.clsx)("breadcrumbs", className),
+		className: cn("breadcrumbs", className),
 		...rest,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", { children: items.map((child, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [child, i < items.length - 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BreadcrumbSeparator, { children: separator }) : null] }, child.key ?? i)) })
 	});
@@ -224,7 +246,7 @@ function BreadcrumbItem(props) {
 	if (props.href !== void 0) {
 		const { className, current, icon, children, ...rest } = props;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
-			className: (0, clsx.clsx)("breadcrumb-item", className),
+			className: cn("breadcrumb-item", className),
 			"aria-current": current ? "page" : void 0,
 			...rest,
 			children: [renderIcon(icon, 14), children]
@@ -232,7 +254,7 @@ function BreadcrumbItem(props) {
 	}
 	const { className, current, icon, children, ...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: (0, clsx.clsx)("breadcrumb-item", className),
+		className: cn("breadcrumb-item", className),
 		"aria-current": current ? "page" : void 0,
 		...rest,
 		children: [renderIcon(icon, 14), children]
@@ -241,7 +263,7 @@ function BreadcrumbItem(props) {
 function BreadcrumbSeparator({ className, children, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		"aria-hidden": "true",
-		className: (0, clsx.clsx)("breadcrumb-separator", className),
+		className: cn("breadcrumb-separator", className),
 		...rest,
 		children
 	});
@@ -280,13 +302,13 @@ function FileInput({ variant = "bordered", inputSize = "md", className, ...rest
 //#region src/InputGroup.tsx
 function InputGroupRoot({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.clsx)("input-group", className),
+		className: cn("input-group", className),
 		...rest
 	});
 }
 function InputGroupAddon({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: (0, clsx.clsx)("input-group-addon", className),
+		className: cn("input-group-addon", className),
 		...rest
 	});
 }
@@ -371,10 +393,10 @@ function Pagination({ page, total, onPageChange, siblingCount = 1, boundaryCount
 	const next = nextIcon !== void 0 ? renderIcon(nextIcon, 16) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronRightIcon, {});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
 		"aria-label": ariaLabel,
-		className: (0, clsx.clsx)("pagination", className),
+		className: cn("pagination", className),
 		...rest,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", { children: items.map((item, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
-			className: "page-item",
+			className: cn("page-item", void 0),
 			children: renderItem ? renderItem(item) : defaultRender(item, onPageChange, prev, next)
 		}, paginationItemKey(item, i))) })
 	});
@@ -420,7 +442,7 @@ function defaultRender(item, onPageChange, prev, next) {
 	switch (item.type) {
 		case "previous": return /* @__PURE__ */ (0, react_jsx_runtime.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,
@@ -429,7 +451,7 @@ function defaultRender(item, onPageChange, prev, next) {
 		});
 		case "next": return /* @__PURE__ */ (0, react_jsx_runtime.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,
@@ -437,13 +459,13 @@ function defaultRender(item, onPageChange, prev, next) {
 			children: next
 		});
 		case "ellipsis": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "page-ellipsis",
+			className: cn("page-ellipsis", void 0),
 			"aria-hidden": "true",
 			children: "…"
 		});
 		case "page": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
-			className: (0, clsx.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),
@@ -455,7 +477,11 @@ function defaultRender(item, onPageChange, prev, next) {
 //#region src/Textarea.tsx
 function Textarea({ variant = "bordered", textareaSize = "md", className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
-		className: (0, clsx.clsx)("textarea", `textarea-${variant}`, textareaSize !== "md" && `textarea-${textareaSize}`, className),
+		className: cn([
+			"textarea",
+			`textarea-${variant}`,
+			textareaSize !== "md" && `textarea-${textareaSize}`
+		], className),
 		...rest
 	});
 }
@@ -517,7 +543,11 @@ function Progress({ value, max = 100, variant = "primary", size = "md", classNam
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("progress", {
 		value,
 		max,
-		className: (0, clsx.clsx)("progress", variant !== "primary" && `progress-${variant}`, size !== "md" && `progress-${size}`, className),
+		className: cn([
+			"progress",
+			variant !== "primary" && `progress-${variant}`,
+			size !== "md" && `progress-${size}`
+		], className),
 		...rest
 	});
 }
@@ -526,7 +556,7 @@ function Progress({ value, max = 100, variant = "primary", size = "md", classNam
 function Spinner({ size = "md", label = "Loading", className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("output", {
 		"aria-label": label,
-		className: (0, clsx.clsx)("spinner", size !== "md" && `spinner-${size}`, className),
+		className: cn(["spinner", size !== "md" && `spinner-${size}`], className),
 		...rest
 	});
 }
@@ -653,7 +683,11 @@ var Select = Object.assign(SelectRoot, {
 */
 function CardContainer({ bordered, compact, className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.clsx)("card", bordered && "card-bordered", compact && "card-compact", className),
+		className: cn([
+			"card",
+			bordered && "card-bordered",
+			compact && "card-compact"
+		], className),
 		...rest
 	});
 }
@@ -682,26 +716,26 @@ function CardRoot({ bordered, compact, icon, title, description, actions, classN
 }
 function CardBody({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.clsx)("card-body", className),
+		className: cn("card-body", className),
 		...rest
 	});
 }
 function CardTitle({ icon, className, children, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h3", {
-		className: (0, clsx.clsx)("card-title", className),
+		className: cn("card-title", className),
 		...rest,
 		children: [renderIcon(icon), children]
 	});
 }
 function CardDescription({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-		className: (0, clsx.clsx)("card-description", className),
+		className: cn("card-description", className),
 		...rest
 	});
 }
 function CardActions({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.clsx)("card-actions", className),
+		className: cn("card-actions", className),
 		...rest
 	});
 }
@@ -755,7 +789,7 @@ function DialogContainer({ open, onOpenChange, size = "md", closedby = "any", cl
 		value: { close: () => ref.current?.close() },
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dialog", {
 			ref,
-			className: (0, clsx.clsx)("dialog", size !== "md" && `dialog-${size}`, className),
+			className: cn(["dialog", size !== "md" && `dialog-${size}`], className),
 			closedby,
 			...rest,
 			children
@@ -764,32 +798,32 @@ function DialogContainer({ open, onOpenChange, size = "md", closedby = "any", cl
 }
 function DialogHeader({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.clsx)("dialog-header", className),
+		className: cn("dialog-header", className),
 		...rest
 	});
 }
 function DialogTitle({ icon, className, children, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h2", {
-		className: (0, clsx.clsx)("dialog-title", className),
+		className: cn("dialog-title", className),
 		...rest,
 		children: [renderIcon(icon), children]
 	});
 }
 function DialogDescription({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-		className: (0, clsx.clsx)("dialog-description", className),
+		className: cn("dialog-description", className),
 		...rest
 	});
 }
 function DialogBody({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.clsx)("dialog-body", className),
+		className: cn("dialog-body", className),
 		...rest
 	});
 }
 function DialogFooter({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.clsx)("dialog-footer", className),
+		className: cn("dialog-footer", className),
 		...rest
 	});
 }
@@ -797,7 +831,7 @@ function DialogCloseButton({ icon, className, children, onClick, type = "button"
 	const ctx = (0, react.useContext)(DialogContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type,
-		className: (0, clsx.clsx)("dialog-close", className),
+		className: cn("dialog-close", className),
 		"aria-label": ariaLabel,
 		onClick: (event) => {
 			onClick?.(event);
@@ -821,7 +855,7 @@ function DialogRoot({ icon, title, description, actions, dismissible = true, clo
 			showHeader ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogHeader, { children: [hasTitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogTitle, {
 				icon,
 				children: title
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "flex-1" }), dismissible ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogCloseButton, { "aria-label": closeLabel }) : null] }) : null,
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: cn("flex-1", void 0) }), dismissible ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogCloseButton, { "aria-label": closeLabel }) : null] }) : null,
 			description !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogDescription, { children: description }) : null,
 			children !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogBody, { children }) : null,
 			actions !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogFooter, { children: actions }) : null
@@ -873,26 +907,26 @@ var Field = Object.assign(FieldRoot, {
 //#region src/Footer.tsx
 function FooterRoot({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
-		className: (0, clsx.clsx)("footer", className),
+		className: cn("footer", className),
 		...rest
 	});
 }
 function FooterLinks({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.clsx)("footer-links", className),
+		className: cn("footer-links", className),
 		...rest
 	});
 }
 function FooterLink({ className, children, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-		className: (0, clsx.clsx)("footer-link", className),
+		className: cn("footer-link", className),
 		...rest,
 		children
 	});
 }
 function FooterMeta({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.clsx)("footer-meta", className),
+		className: cn("footer-meta", className),
 		...rest
 	});
 }
@@ -905,20 +939,20 @@ var Footer = Object.assign(FooterRoot, {
 //#region src/Menu.tsx
 function MenuRoot({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("details", {
-		className: (0, clsx.clsx)("menu", className),
+		className: cn("menu", className),
 		...rest
 	});
 }
 function MenuTrigger({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", {
-		className: (0, clsx.clsx)("menu-trigger", className),
+		className: cn("menu-trigger", className),
 		...rest
 	});
 }
 function MenuPopup({ className, role = "menu", ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		role,
-		className: (0, clsx.clsx)("menu-popup", className),
+		className: cn("menu-popup", className),
 		...rest
 	});
 }
@@ -927,7 +961,7 @@ function MenuItem(props) {
 		const { className, role = "menuitem", icon, children, ...rest } = props;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
 			role,
-			className: (0, clsx.clsx)("menu-item", className),
+			className: cn("menu-item", className),
 			...rest,
 			children: [renderIcon(icon), children]
 		});
@@ -936,27 +970,27 @@ function MenuItem(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		type,
 		role,
-		className: (0, clsx.clsx)("menu-item", className),
+		className: cn("menu-item", className),
 		...rest,
 		children: [renderIcon(icon), children]
 	});
 }
 function MenuSeparator({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", {
-		className: (0, clsx.clsx)("menu-separator", className),
+		className: cn("menu-separator", className),
 		...rest
 	});
 }
 function MenuGroup({ className, role = "group", ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		role,
-		className: (0, clsx.clsx)("menu-group", className),
+		className: cn("menu-group", className),
 		...rest
 	});
 }
 function MenuGroupLabel({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.clsx)("menu-group-label", className),
+		className: cn("menu-group-label", className),
 		...rest
 	});
 }
@@ -972,25 +1006,25 @@ var Menu = Object.assign(MenuRoot, {
 //#region src/Navbar.tsx
 function NavbarRoot({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
-		className: (0, clsx.clsx)("navbar", className),
+		className: cn("navbar", className),
 		...rest
 	});
 }
 function NavbarBrand({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.clsx)("navbar-brand", className),
+		className: cn("navbar-brand", className),
 		...rest
 	});
 }
 function NavbarItems({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
-		className: (0, clsx.clsx)("navbar-items", className),
+		className: cn("navbar-items", className),
 		...rest
 	});
 }
 function NavbarItem({ active, icon, className, children, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
-		className: (0, clsx.clsx)("navbar-item", className),
+		className: cn("navbar-item", className),
 		"aria-current": active ? "page" : void 0,
 		...rest,
 		children: [renderIcon(icon), children]
@@ -1001,14 +1035,14 @@ function NavbarDropdown({ label, className, children, ...rest }) {
 		className,
 		...rest,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Menu.Trigger, {
-			className: "navbar-item",
+			className: cn("navbar-item", void 0),
 			children: label
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Menu.Popup, { children })]
 	});
 }
 function NavbarActions({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.clsx)("navbar-actions", className),
+		className: cn("navbar-actions", className),
 		...rest
 	});
 }
@@ -1020,7 +1054,7 @@ function NavbarMobileToggle({ label = "Open menu", className, type = "button", .
 		"aria-label": label,
 		"aria-expanded": open,
 		onClick: () => shell?.setMobileDrawerOpen(!open),
-		className: (0, clsx.clsx)("navbar-mobile-toggle", className),
+		className: cn("navbar-mobile-toggle", className),
 		...rest
 	});
 }
@@ -1121,38 +1155,44 @@ var Tooltip = Object.assign(TooltipShorthand, {
 //#region src/Table.tsx
 function TableRoot({ striped, bordered, relaxed, sticky, className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
-		className: (0, clsx.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__ */ (0, react_jsx_runtime.jsx)("thead", {
-		className: (0, clsx.clsx)(className),
+		className,
 		...rest
 	});
 }
 function TableBody({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
-		className: (0, clsx.clsx)(className),
+		className,
 		...rest
 	});
 }
 function TableFoot({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tfoot", {
-		className: (0, clsx.clsx)(className),
+		className,
 		...rest
 	});
 }
 function TableRow({ selected, asLink, className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
-		className: (0, clsx.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__ */ (0, react_jsx_runtime.jsx)("th", {
-		className: (0, clsx.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
@@ -1160,7 +1200,11 @@ function TableHeaderCell({ align, gutter, className, scope, ...rest }) {
 }
 function TableCell({ align, gutter, numeric, className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-		className: (0, clsx.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
 	});
@@ -1186,14 +1230,14 @@ function SidebarRoot({ collapsed, defaultCollapsed, onCollapsedChange, drawerLab
 			onCollapsedChange
 		},
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
-			className: (0, clsx.clsx)("sidebar", className),
+			className: cn("sidebar", className),
 			...rest,
 			children: drawerOpen ? null : children
 		}), shell ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Root, {
 			open: drawerOpen,
 			onOpenChange: (open) => shell.setMobileDrawerOpen(open),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_dialog.Dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Backdrop, { className: "sidebar-drawer-backdrop" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Popup, {
-				className: "sidebar-drawer",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_dialog.Dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Backdrop, { className: cn("sidebar-drawer-backdrop", void 0) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Popup, {
+				className: cn("sidebar-drawer", void 0),
 				"aria-label": drawerLabel,
 				onClick: (event) => {
 					if (event.target.closest("a, [data-drawer-close]")) shell.setMobileDrawerOpen(false);
@@ -1205,31 +1249,31 @@ function SidebarRoot({ collapsed, defaultCollapsed, onCollapsedChange, drawerLab
 }
 function SidebarHeader({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.clsx)("sidebar-header", className),
+		className: cn("sidebar-header", className),
 		...rest
 	});
 }
 function SidebarNav({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
-		className: (0, clsx.clsx)("sidebar-nav", className),
+		className: cn("sidebar-nav", className),
 		...rest
 	});
 }
 function SidebarGroup({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.clsx)("sidebar-group", className),
+		className: cn("sidebar-group", className),
 		...rest
 	});
 }
 function SidebarGroupLabel({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.clsx)("sidebar-group-label", className),
+		className: cn("sidebar-group-label", className),
 		...rest
 	});
 }
 function SidebarItem({ active, icon, badge, className, children, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
-		className: (0, clsx.clsx)("sidebar-item", className),
+		className: cn("sidebar-item", className),
 		"aria-current": active ? "page" : void 0,
 		...rest,
 		children: [
@@ -1242,19 +1286,19 @@ function SidebarItem({ active, icon, badge, className, children, ...rest }) {
 function SidebarIcon({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		"aria-hidden": true,
-		className: (0, clsx.clsx)("sidebar-icon", className),
+		className: cn("sidebar-icon", className),
 		...rest
 	});
 }
 function SidebarLabel({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: (0, clsx.clsx)("sidebar-label", className),
+		className: cn("sidebar-label", className),
 		...rest
 	});
 }
 function SidebarBadge({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: (0, clsx.clsx)("sidebar-badge", className),
+		className: cn("sidebar-badge", className),
 		...rest
 	});
 }
@@ -1264,7 +1308,7 @@ function SidebarCollapsible({ icon, label, trigger, children, className, open, d
 	const isOpen = isControlled ? open : internalOpen;
 	const triggerContent = trigger ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [icon != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarIcon, { children: renderIcon(icon) }) : null, label !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarLabel, { children: label }) : null] });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
-		className: (0, clsx.clsx)("sidebar-collapsible", className),
+		className: cn("sidebar-collapsible", className),
 		open: isOpen,
 		onToggle: (event) => {
 			const next = event.currentTarget.open;
@@ -1273,17 +1317,17 @@ function SidebarCollapsible({ icon, label, trigger, children, className, open, d
 		},
 		...rest,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", {
-			className: "sidebar-collapsible-trigger",
+			className: cn("sidebar-collapsible-trigger", void 0),
 			children: triggerContent
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "sidebar-collapsible-panel",
+			className: cn("sidebar-collapsible-panel", void 0),
 			children
 		})]
 	});
 }
 function SidebarSubItem({ active, icon, badge, className, children, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
-		className: (0, clsx.clsx)("sidebar-subitem", className),
+		className: cn("sidebar-subitem", className),
 		"aria-current": active ? "page" : void 0,
 		...rest,
 		children: [
@@ -1295,7 +1339,7 @@ function SidebarSubItem({ active, icon, badge, className, children, ...rest }) {
 }
 function SidebarFooter({ className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.clsx)("sidebar-footer", className),
+		className: cn("sidebar-footer", className),
 		...rest
 	});
 }
@@ -1304,18 +1348,18 @@ function SidebarCollapseToggle({ label = "Toggle sidebar", className, children,
 	const controlledChecked = ctx?.collapsed;
 	const isControlled = controlledChecked !== void 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-		className: (0, clsx.clsx)("sidebar-collapse-toggle", className),
+		className: cn("sidebar-collapse-toggle", className),
 		...rest,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "sr-only",
+				className: cn("sr-only", void 0),
 				children: label
 			}),
 			children