@aortl/admin-react 0.0.1 → 0.2.0

package/dist/index.mjs

@@ -1,44 +1,694 @@
-import { Button as Button$1 } from "@base-ui/react/button";
 import { clsx } from "clsx";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Children, Fragment as Fragment$1, createContext, createElement, isValidElement, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Button as Button$1 } from "@base-ui/react/button";
 import { Input as Input$1 } from "@base-ui/react/input";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+import { Radio as Radio$1 } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+import { Select as Select$1 } from "@base-ui/react/select";
 import { Field as Field$1 } from "@base-ui/react/field";
+import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+//#region src/Accordion.tsx
+function AccordionRoot({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("accordion", className),
+		...rest
+	});
+}
+function AccordionItem({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("details", {
+		className: clsx("accordion-item", className),
+		...rest
+	});
+}
+function AccordionSummary({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("summary", {
+		className: clsx("accordion-summary", className),
+		...rest
+	});
+}
+function AccordionContent({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("accordion-content", className),
+		...rest
+	});
+}
+var Accordion = Object.assign(AccordionRoot, {
+	Item: AccordionItem,
+	Summary: AccordionSummary,
+	Content: AccordionContent
+});
+//#endregion
+//#region src/AdminRoot.tsx
+function AdminRoot({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("admin-root", className),
+		...rest
+	});
+}
+//#endregion
+//#region src/icon.ts
+/**
+* Render an `IconProp` to a React node, defaulting to `size={16} aria-hidden`
+* when given a component reference.
+*
+* Anything that is not `null`/`undefined` and not already a React element is
+* treated as a component type — `createElement` accepts function components,
+* `forwardRef`s (e.g. `@tabler/icons-react`), `memo`, etc.
+*/
+function renderIcon(icon, size = 16) {
+	if (icon == null) return null;
+	if (isValidElement(icon)) return icon;
+	return createElement(icon, {
+		size,
+		"aria-hidden": true
+	});
+}
+//#endregion
+//#region src/Alert.tsx
+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),
+		...rest,
+		children: [
+			renderIcon(icon),
+			title !== void 0 ? /* @__PURE__ */ jsx(AlertTitle, { children: title }) : null,
+			description !== void 0 ? /* @__PURE__ */ jsx(AlertDescription, { children: description }) : null,
+			children
+		]
+	});
+}
+function AlertTitle({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("strong", {
+		className: clsx("alert-title", className),
+		...rest
+	});
+}
+function AlertDescription({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: clsx("alert-description", className),
+		...rest
+	});
+}
+var Alert = Object.assign(AlertRoot, {
+	Title: AlertTitle,
+	Description: AlertDescription
+});
+//#endregion
+//#region src/AppShell.tsx
+var AppShellContext = createContext(null);
+function useAppShell() {
+	return useContext(AppShellContext);
+}
+function AppShellRoot({ hasSidebar = false, hasFooter = false, mobileDrawerOpen, defaultMobileDrawerOpen = false, onMobileDrawerOpenChange, systemAccent, className, style, children, ...rest }) {
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultMobileDrawerOpen);
+	const isControlled = mobileDrawerOpen !== void 0;
+	const open = isControlled ? mobileDrawerOpen : uncontrolledOpen;
+	const value = useMemo(() => ({
+		mobileDrawerOpen: open,
+		setMobileDrawerOpen: (next) => {
+			if (!isControlled) setUncontrolledOpen(next);
+			onMobileDrawerOpenChange?.(next);
+		},
+		hasSidebar
+	}), [
+		open,
+		isControlled,
+		onMobileDrawerOpenChange,
+		hasSidebar
+	]);
+	const rootStyle = systemAccent !== void 0 ? {
+		...style,
+		"--color-system-accent": systemAccent
+	} : style;
+	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),
+			style: rootStyle,
+			...rest,
+			children
+		})
+	});
+}
+function AppShellMain({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("main", {
+		className: clsx("app-shell-main", className),
+		...rest
+	});
+}
+var AppShell = Object.assign(AppShellRoot, { Main: AppShellMain });
+//#endregion
+//#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),
+		...rest,
+		children: [renderIcon(icon, size === "sm" ? 10 : 12), children]
+	});
+}
+//#endregion
+//#region src/BrandTile.tsx
+function BrandTile({ monogram, icon, className, children, ...rest }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: clsx("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", block, className, type = "button", ...rest }) {
-	return /* @__PURE__ */ jsx(Button$1, {
+function Button({ variant = "primary", size = "md", fullWidth, loading, icon, iconTrailing, className, type = "button", disabled, children, ...rest }) {
+	const iconOnly = children == null && (icon != null || iconTrailing != null);
+	return /* @__PURE__ */ jsxs(Button$1, {
 		type,
-		className: clsx("btn", `btn-${variant}`, size !== "md" && `btn-${size}`, block && "btn-block", typeof className === "string" ? className : void 0),
+		disabled: disabled || loading,
+		"aria-busy": loading || void 0,
+		className: cn([
+			"btn",
+			`btn-${variant}`,
+			size !== "md" && `btn-${size}`,
+			fullWidth && "btn-full-width",
+			loading && "btn-loading",
+			iconOnly && "btn-square"
+		], className),
+		...rest,
+		children: [
+			loading ? null : renderIcon(icon),
+			children,
+			renderIcon(iconTrailing)
+		]
+	});
+}
+//#endregion
+//#region src/ButtonGroup.tsx
+function ButtonGroup({ orientation = "horizontal", role = "group", className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		role,
+		className: clsx("btn-group", orientation === "vertical" && "btn-group-vertical", className),
 		...rest
 	});
 }
 //#endregion
+//#region src/Breadcrumbs.tsx
+function BreadcrumbsRoot({ separator, className, children, "aria-label": ariaLabel = "Breadcrumb", ...rest }) {
+	const items = Children.toArray(children).filter(isValidElement);
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": ariaLabel,
+		className: clsx("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)) })
+	});
+}
+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),
+			"aria-current": current ? "page" : void 0,
+			...rest,
+			children: [renderIcon(icon, 14), children]
+		}) });
+	}
+	const { className, current, icon, children, ...rest } = props;
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("span", {
+		className: clsx("breadcrumb-item", className),
+		"aria-current": current ? "page" : void 0,
+		...rest,
+		children: [renderIcon(icon, 14), children]
+	}) });
+}
+function BreadcrumbSeparator({ className, children, ...rest }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: clsx("breadcrumb-separator", className),
+		...rest,
+		children
+	});
+}
+var Breadcrumbs = Object.assign(BreadcrumbsRoot, {
+	Item: BreadcrumbItem,
+	Separator: BreadcrumbSeparator
+});
+//#endregion
 //#region src/Input.tsx
 function Input({ variant = "bordered", inputSize = "md", className, type = "text", ...rest }) {
 	return /* @__PURE__ */ jsx(Input$1, {
 		type,
-		className: clsx("input", `input-${variant}`, inputSize !== "md" && `input-${inputSize}`, typeof className === "string" ? className : void 0),
+		className: cn([
+			"input",
+			`input-${variant}`,
+			inputSize !== "md" && `input-${inputSize}`
+		], className),
+		...rest
+	});
+}
+//#endregion
+//#region src/FileInput.tsx
+function FileInput({ variant = "bordered", inputSize = "md", className, ...rest }) {
+	return /* @__PURE__ */ jsx(Input$1, {
+		type: "file",
+		className: cn([
+			"file-input",
+			`file-input-${variant}`,
+			inputSize !== "md" && `file-input-${inputSize}`
+		], className),
+		...rest
+	});
+}
+//#endregion
+//#region src/InputGroup.tsx
+function InputGroupRoot({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("input-group", className),
+		...rest
+	});
+}
+function InputGroupAddon({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: clsx("input-group-addon", className),
 		...rest
 	});
 }
+var InputGroup = Object.assign(InputGroupRoot, { Addon: InputGroupAddon });
+//#endregion
+//#region src/Pagination.tsx
+/**
+* Compute the items to render for a given `page` / `total`. Always returns:
+*   previous, ...numbers/ellipses, next
+* with `boundaryCount` items on each end and `siblingCount` items around `page`.
+* Pure: no React state, safe to call during render.
+*/
+function getPaginationItems({ page, total, siblingCount = 1, boundaryCount = 1 }) {
+	if (total <= 0) return [{
+		type: "previous",
+		page: 1,
+		disabled: true
+	}, {
+		type: "next",
+		page: 1,
+		disabled: true
+	}];
+	const clampedPage = Math.min(Math.max(1, page), total);
+	const items = [];
+	items.push({
+		type: "previous",
+		page: clampedPage - 1,
+		disabled: clampedPage === 1
+	});
+	const startPages = range(1, Math.min(boundaryCount, total));
+	const endPages = range(Math.max(total - boundaryCount + 1, boundaryCount + 1), total);
+	const siblingsStart = Math.max(Math.min(clampedPage - siblingCount, total - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+	const siblingsEnd = Math.min(Math.max(clampedPage + siblingCount, boundaryCount + siblingCount * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : total - 1);
+	const middle = [];
+	if (siblingsStart > boundaryCount + 2) middle.push("ellipsis-start");
+	else if (boundaryCount + 1 < total - boundaryCount) middle.push(boundaryCount + 1);
+	middle.push(...range(siblingsStart, siblingsEnd));
+	if (siblingsEnd < total - boundaryCount - 1) middle.push("ellipsis-end");
+	else if (total - boundaryCount > boundaryCount) middle.push(total - boundaryCount);
+	const seen = /* @__PURE__ */ new Set();
+	const pushNumber = (n) => {
+		if (n < 1 || n > total || seen.has(n)) return;
+		seen.add(n);
+		items.push({
+			type: "page",
+			page: n,
+			selected: n === clampedPage
+		});
+	};
+	for (const n of startPages) pushNumber(n);
+	for (const entry of middle) if (entry === "ellipsis-start") items.push({
+		type: "ellipsis",
+		key: "start"
+	});
+	else if (entry === "ellipsis-end") items.push({
+		type: "ellipsis",
+		key: "end"
+	});
+	else pushNumber(entry);
+	for (const n of endPages) pushNumber(n);
+	items.push({
+		type: "next",
+		page: clampedPage + 1,
+		disabled: clampedPage === total
+	});
+	return items;
+}
+function range(start, end) {
+	if (end < start) return [];
+	const out = [];
+	for (let i = start; i <= end; i++) out.push(i);
+	return out;
+}
+function Pagination({ page, total, onPageChange, siblingCount = 1, boundaryCount = 1, previousIcon, nextIcon, renderItem, className, "aria-label": ariaLabel = "Pagination", ...rest }) {
+	const items = getPaginationItems({
+		page,
+		total,
+		siblingCount,
+		boundaryCount
+	});
+	const prev = previousIcon !== void 0 ? renderIcon(previousIcon, 16) : /* @__PURE__ */ jsx(ChevronLeftIcon, {});
+	const next = nextIcon !== void 0 ? renderIcon(nextIcon, 16) : /* @__PURE__ */ jsx(ChevronRightIcon, {});
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": ariaLabel,
+		className: clsx("pagination", className),
+		...rest,
+		children: /* @__PURE__ */ jsx("ul", { children: items.map((item, i) => /* @__PURE__ */ jsx("li", {
+			className: "page-item",
+			children: renderItem ? renderItem(item) : defaultRender(item, onPageChange, prev, next)
+		}, paginationItemKey(item, i))) })
+	});
+}
+function ChevronLeftIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M15 6l-6 6 6 6" })
+	});
+}
+function ChevronRightIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M9 6l6 6-6 6" })
+	});
+}
+function paginationItemKey(item, index) {
+	switch (item.type) {
+		case "previous": return "previous";
+		case "next": return "next";
+		case "ellipsis": return `ellipsis-${item.key}`;
+		case "page": return `page-${item.page}`;
+		default: return `${index}`;
+	}
+}
+function defaultRender(item, onPageChange, prev, next) {
+	switch (item.type) {
+		case "previous": return /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "page-link",
+			"aria-label": "Previous page",
+			"aria-disabled": item.disabled || void 0,
+			disabled: item.disabled,
+			onClick: () => onPageChange(item.page),
+			children: prev
+		});
+		case "next": return /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "page-link",
+			"aria-label": "Next page",
+			"aria-disabled": item.disabled || void 0,
+			disabled: item.disabled,
+			onClick: () => onPageChange(item.page),
+			children: next
+		});
+		case "ellipsis": return /* @__PURE__ */ jsx("span", {
+			className: "page-ellipsis",
+			"aria-hidden": "true",
+			children: "…"
+		});
+		case "page": return /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: clsx("page-link", item.selected && "active"),
+			"aria-current": item.selected ? "page" : void 0,
+			"aria-label": `Page ${item.page}`,
+			onClick: () => onPageChange(item.page),
+			children: item.page
+		});
+	}
+}
+//#endregion
+//#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),
+		...rest
+	});
+}
+//#endregion
+//#region src/Checkbox.tsx
+function CheckboxRoot({ className, children, ...rest }) {
+	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
+		className: cn("checkbox", className),
+		...rest,
+		children: children ?? /* @__PURE__ */ jsx(CheckboxIndicator, { children: /* @__PURE__ */ jsx(CheckIcon$1, {}) })
+	});
+}
+function CheckboxIndicator({ className, ...rest }) {
+	return /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
+		className: cn("checkbox-indicator", className),
+		...rest
+	});
+}
+function CheckIcon$1() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		width: "100%",
+		height: "100%",
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+	});
+}
+var Checkbox = Object.assign(CheckboxRoot, { Indicator: CheckboxIndicator });
+//#endregion
+//#region src/Radio.tsx
+function RadioRoot({ className, children, ...rest }) {
+	return /* @__PURE__ */ jsx(Radio$1.Root, {
+		className: cn("radio", className),
+		...rest,
+		children: children ?? /* @__PURE__ */ jsx(RadioIndicator, {})
+	});
+}
+function RadioIndicator({ className, ...rest }) {
+	return /* @__PURE__ */ jsx(Radio$1.Indicator, {
+		className: cn("radio-indicator", className),
+		...rest
+	});
+}
+var Radio = Object.assign(RadioRoot, { Indicator: RadioIndicator });
+function RadioGroup({ orientation = "horizontal", className, ...rest }) {
+	return /* @__PURE__ */ jsx(RadioGroup$1, {
+		className: cn(["radio-group", orientation === "vertical" && "radio-group-vertical"], className),
+		...rest
+	});
+}
+//#endregion
+//#region src/Progress.tsx
+function Progress({ value, max = 100, variant = "primary", size = "md", className, ...rest }) {
+	return /* @__PURE__ */ jsx("progress", {
+		value,
+		max,
+		className: clsx("progress", variant !== "primary" && `progress-${variant}`, size !== "md" && `progress-${size}`, className),
+		...rest
+	});
+}
+//#endregion
+//#region src/Spinner.tsx
+function Spinner({ size = "md", label = "Loading", className, ...rest }) {
+	return /* @__PURE__ */ jsx("output", {
+		"aria-label": label,
+		className: clsx("spinner", size !== "md" && `spinner-${size}`, className),
+		...rest
+	});
+}
+//#endregion
+//#region src/Switch.tsx
+function SwitchRoot({ className, children, ...rest }) {
+	return /* @__PURE__ */ jsx(Switch$1.Root, {
+		className: cn("switch", className),
+		...rest,
+		children: children ?? /* @__PURE__ */ jsx(SwitchThumb, {})
+	});
+}
+function SwitchThumb({ className, ...rest }) {
+	return /* @__PURE__ */ jsx(Switch$1.Thumb, {
+		className: cn("switch-thumb", className),
+		...rest
+	});
+}
+var Switch = Object.assign(SwitchRoot, { Thumb: SwitchThumb });
+//#endregion
+//#region src/Select.tsx
+function SelectRoot(props) {
+	return /* @__PURE__ */ jsx(Select$1.Root, { ...props });
+}
+function SelectTrigger({ variant = "bordered", triggerSize = "md", className, ...rest }) {
+	return /* @__PURE__ */ jsx(Select$1.Trigger, {
+		className: cn([
+			"select",
+			`select-${variant}`,
+			triggerSize !== "md" && `select-${triggerSize}`
+		], className),
+		...rest
+	});
+}
+function SelectValue(props) {
+	return /* @__PURE__ */ jsx(Select$1.Value, { ...props });
+}
+function SelectIcon({ className, children, ...rest }) {
+	return /* @__PURE__ */ jsx(Select$1.Icon, {
+		className: cn("select-icon", className),
+		...rest,
+		children: children ?? /* @__PURE__ */ jsx(ChevronDownIcon, {})
+	});
+}
+function SelectPopup({ className, sideOffset = 4, children, ...rest }) {
+	return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, {
+		sideOffset,
+		children: /* @__PURE__ */ jsx(Select$1.Popup, {
+			className: cn("select-popup", className),
+			...rest,
+			children
+		})
+	}) });
+}
+function SelectItem({ className, ...rest }) {
+	return /* @__PURE__ */ jsx(Select$1.Item, {
+		className: cn("select-item", className),
+		...rest
+	});
+}
+function SelectItemText(props) {
+	return /* @__PURE__ */ jsx(Select$1.ItemText, { ...props });
+}
+function SelectItemIndicator({ className, children, ...rest }) {
+	return /* @__PURE__ */ jsx(Select$1.ItemIndicator, {
+		className: cn("select-item-indicator", className),
+		...rest,
+		children: children ?? /* @__PURE__ */ jsx(CheckIcon, {})
+	});
+}
+function SelectGroup(props) {
+	return /* @__PURE__ */ jsx(Select$1.Group, { ...props });
+}
+function SelectGroupLabel({ className, ...rest }) {
+	return /* @__PURE__ */ jsx(Select$1.GroupLabel, {
+		className: cn("select-group-label", className),
+		...rest
+	});
+}
+function CheckIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		width: "100%",
+		height: "100%",
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+	});
+}
+function ChevronDownIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		width: "100%",
+		height: "100%",
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+	});
+}
+var Select = Object.assign(SelectRoot, {
+	Trigger: SelectTrigger,
+	Value: SelectValue,
+	Icon: SelectIcon,
+	Popup: SelectPopup,
+	Item: SelectItem,
+	ItemText: SelectItemText,
+	ItemIndicator: SelectItemIndicator,
+	Group: SelectGroup,
+	GroupLabel: SelectGroupLabel
+});
 //#endregion
 //#region src/Card.tsx
-function CardRoot({ bordered, compact, className, ...rest }) {
+/**
+* The bare `.card` container — no body, no title. Use this when you need to
+* compose the internals yourself (e.g. a media block above the body).
+*/
+function CardContainer({ bordered, compact, className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx("card", bordered && "card-bordered", compact && "card-compact", className),
 		...rest
 	});
 }
+/**
+* Standard card: a `.card` container with a single `.card-body` that lays out
+* an optional title (with icon), description, children, and actions. For
+* anything outside that shape, use `<Card.Container>` and compose by hand.
+*/
+function CardRoot({ bordered, compact, icon, title, description, actions, className, children, ...rest }) {
+	const hasTitle = icon !== void 0 || title !== void 0;
+	return /* @__PURE__ */ jsx(CardContainer, {
+		bordered,
+		compact,
+		className,
+		...rest,
+		children: /* @__PURE__ */ jsxs(CardBody, { children: [
+			hasTitle ? /* @__PURE__ */ jsx(CardTitle, {
+				icon,
+				children: title
+			}) : null,
+			description !== void 0 ? /* @__PURE__ */ jsx(CardDescription, { children: description }) : null,
+			children,
+			actions !== void 0 ? /* @__PURE__ */ jsx(CardActions, { children: actions }) : null
+		] })
+	});
+}
 function CardBody({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx("card-body", className),
 		...rest
 	});
 }
-function CardTitle({ className, children, ...rest }) {
-	return /* @__PURE__ */ jsx("h3", {
+function CardTitle({ icon, className, children, ...rest }) {
+	return /* @__PURE__ */ jsxs("h3", {
 		className: clsx("card-title", className),
 		...rest,
-		children
+		children: [renderIcon(icon), children]
 	});
 }
 function CardDescription({ className, ...rest }) {
@@ -54,34 +704,161 @@ function CardActions({ className, ...rest }) {
 	});
 }
 var Card = Object.assign(CardRoot, {
+	Container: CardContainer,
 	Body: CardBody,
 	Title: CardTitle,
 	Description: CardDescription,
 	Actions: CardActions
 });
 //#endregion
+//#region src/Dialog.tsx
+var DialogContext = createContext(null);
+function DefaultCloseIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
+	});
+}
+/**
+* The bare `<dialog>` primitive — no opinions about header, body, or footer.
+* Use this when the default `<Dialog>` layout doesn't fit (custom header,
+* media block, multi-step content).
+*/
+function DialogContainer({ open, onOpenChange, size = "md", closedby = "any", className, children, ...rest }) {
+	const ref = useRef(null);
+	const onOpenChangeRef = useRef(onOpenChange);
+	onOpenChangeRef.current = onOpenChange;
+	useEffect(() => {
+		const el = ref.current;
+		if (!el || open === void 0) return;
+		if (open && !el.open) el.showModal();
+		else if (!open && el.open) el.close();
+	}, [open]);
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const handleClose = () => onOpenChangeRef.current?.(false);
+		el.addEventListener("close", handleClose);
+		return () => el.removeEventListener("close", handleClose);
+	}, []);
+	return /* @__PURE__ */ jsx(DialogContext.Provider, {
+		value: { close: () => ref.current?.close() },
+		children: /* @__PURE__ */ jsx("dialog", {
+			ref,
+			className: clsx("dialog", size !== "md" && `dialog-${size}`, className),
+			closedby,
+			...rest,
+			children
+		})
+	});
+}
+function DialogHeader({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("dialog-header", className),
+		...rest
+	});
+}
+function DialogTitle({ icon, className, children, ...rest }) {
+	return /* @__PURE__ */ jsxs("h2", {
+		className: clsx("dialog-title", className),
+		...rest,
+		children: [renderIcon(icon), children]
+	});
+}
+function DialogDescription({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: clsx("dialog-description", className),
+		...rest
+	});
+}
+function DialogBody({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("dialog-body", className),
+		...rest
+	});
+}
+function DialogFooter({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("dialog-footer", className),
+		...rest
+	});
+}
+function DialogCloseButton({ icon, className, children, onClick, type = "button", "aria-label": ariaLabel = "Close", ...rest }) {
+	const ctx = useContext(DialogContext);
+	return /* @__PURE__ */ jsx("button", {
+		type,
+		className: clsx("dialog-close", className),
+		"aria-label": ariaLabel,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) ctx?.close();
+		},
+		...rest,
+		children: children ?? (icon !== void 0 ? renderIcon(icon) : /* @__PURE__ */ jsx(DefaultCloseIcon, {}))
+	});
+}
+/**
+* Standard modal: a `<dialog>` with an opinionated header / body / footer
+* layout driven by shorthand props. For anything outside that shape, use
+* `<Dialog.Container>` and compose by hand.
+*/
+function DialogRoot({ icon, title, description, actions, dismissible = true, closeLabel = "Close", children, ...containerProps }) {
+	const hasTitle = title !== void 0 || icon !== void 0;
+	const showHeader = hasTitle || dismissible;
+	return /* @__PURE__ */ jsxs(DialogContainer, {
+		...containerProps,
+		children: [
+			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,
+			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
+		]
+	});
+}
+var Dialog = Object.assign(DialogRoot, {
+	Container: DialogContainer,
+	Header: DialogHeader,
+	Title: DialogTitle,
+	Description: DialogDescription,
+	Body: DialogBody,
+	Footer: DialogFooter,
+	CloseButton: DialogCloseButton
+});
+//#endregion
 //#region src/Field.tsx
 function FieldRoot({ className, ...rest }) {
 	return /* @__PURE__ */ jsx(Field$1.Root, {
-		className: clsx("field", typeof className === "string" ? className : void 0),
+		className: cn("field", className),
 		...rest
 	});
 }
-function FieldLabel({ className, ...rest }) {
+function FieldLabel({ className, required, ...rest }) {
 	return /* @__PURE__ */ jsx(Field$1.Label, {
-		className: clsx("field-label", typeof className === "string" ? className : void 0),
+		"data-required": required ? "" : void 0,
+		className: cn("field-label", className),
 		...rest
 	});
 }
 function FieldDescription({ className, ...rest }) {
 	return /* @__PURE__ */ jsx(Field$1.Description, {
-		className: clsx("field-description", typeof className === "string" ? className : void 0),
+		className: cn("field-description", className),
 		...rest
 	});
 }
 function FieldError({ className, ...rest }) {
 	return /* @__PURE__ */ jsx(Field$1.Error, {
-		className: clsx("field-error", typeof className === "string" ? className : void 0),
+		className: cn("field-error", className),
 		...rest
 	});
 }
@@ -91,6 +868,431 @@ var Field = Object.assign(FieldRoot, {
 	Error: FieldError
 });
 //#endregion
-export { Button, Card, Field, Input };
+//#region src/Footer.tsx
+function FooterRoot({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("footer", {
+		className: clsx("footer", className),
+		...rest
+	});
+}
+function FooterLinks({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("footer-links", className),
+		...rest
+	});
+}
+function FooterLink({ className, children, ...rest }) {
+	return /* @__PURE__ */ jsx("a", {
+		className: clsx("footer-link", className),
+		...rest,
+		children
+	});
+}
+function FooterMeta({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("footer-meta", className),
+		...rest
+	});
+}
+var Footer = Object.assign(FooterRoot, {
+	Links: FooterLinks,
+	Link: FooterLink,
+	Meta: FooterMeta
+});
+//#endregion
+//#region src/Menu.tsx
+function MenuRoot({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("details", {
+		className: clsx("menu", className),
+		...rest
+	});
+}
+function MenuTrigger({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("summary", {
+		className: clsx("menu-trigger", className),
+		...rest
+	});
+}
+function MenuPopup({ className, role = "menu", ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		role,
+		className: clsx("menu-popup", className),
+		...rest
+	});
+}
+function MenuItem(props) {
+	if (props.href !== void 0) {
+		const { className, role = "menuitem", icon, children, ...rest } = props;
+		return /* @__PURE__ */ jsxs("a", {
+			role,
+			className: clsx("menu-item", className),
+			...rest,
+			children: [renderIcon(icon), children]
+		});
+	}
+	const { className, type = "button", role = "menuitem", icon, children, ...rest } = props;
+	return /* @__PURE__ */ jsxs("button", {
+		type,
+		role,
+		className: clsx("menu-item", className),
+		...rest,
+		children: [renderIcon(icon), children]
+	});
+}
+function MenuSeparator({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("hr", {
+		className: clsx("menu-separator", className),
+		...rest
+	});
+}
+function MenuGroup({ className, role = "group", ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		role,
+		className: clsx("menu-group", className),
+		...rest
+	});
+}
+function MenuGroupLabel({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("menu-group-label", className),
+		...rest
+	});
+}
+var Menu = Object.assign(MenuRoot, {
+	Trigger: MenuTrigger,
+	Popup: MenuPopup,
+	Item: MenuItem,
+	Separator: MenuSeparator,
+	Group: MenuGroup,
+	GroupLabel: MenuGroupLabel
+});
+//#endregion
+//#region src/Navbar.tsx
+function NavbarRoot({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("header", {
+		className: clsx("navbar", className),
+		...rest
+	});
+}
+function NavbarBrand({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("navbar-brand", className),
+		...rest
+	});
+}
+function NavbarItems({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("nav", {
+		className: clsx("navbar-items", className),
+		...rest
+	});
+}
+function NavbarItem({ active, icon, className, children, ...rest }) {
+	return /* @__PURE__ */ jsxs("a", {
+		className: clsx("navbar-item", className),
+		"aria-current": active ? "page" : void 0,
+		...rest,
+		children: [renderIcon(icon), children]
+	});
+}
+function NavbarDropdown({ label, className, children, ...rest }) {
+	return /* @__PURE__ */ jsxs(Menu, {
+		className,
+		...rest,
+		children: [/* @__PURE__ */ jsx(Menu.Trigger, {
+			className: "navbar-item",
+			children: label
+		}), /* @__PURE__ */ jsx(Menu.Popup, { children })]
+	});
+}
+function NavbarActions({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("navbar-actions", className),
+		...rest
+	});
+}
+function NavbarMobileToggle({ label = "Open menu", className, type = "button", ...rest }) {
+	const shell = useAppShell();
+	const open = shell?.mobileDrawerOpen ?? false;
+	return /* @__PURE__ */ jsx("button", {
+		type,
+		"aria-label": label,
+		"aria-expanded": open,
+		onClick: () => shell?.setMobileDrawerOpen(!open),
+		className: clsx("navbar-mobile-toggle", className),
+		...rest
+	});
+}
+var Navbar = Object.assign(NavbarRoot, {
+	Brand: NavbarBrand,
+	Items: NavbarItems,
+	Item: NavbarItem,
+	Dropdown: NavbarDropdown,
+	Actions: NavbarActions,
+	MobileToggle: NavbarMobileToggle
+});
+//#endregion
+//#region src/Tabs.tsx
+function TabsRoot({ variant = "bordered", size = "md", fullWidth = false, className, ...rest }) {
+	return /* @__PURE__ */ jsx(Tabs$1.Root, {
+		className: cn([
+			"tabs",
+			`tabs-${variant}`,
+			size !== "md" && `tabs-${size}`,
+			fullWidth && "tabs-full-width"
+		], className),
+		...rest
+	});
+}
+function TabsList({ className, ...rest }) {
+	return /* @__PURE__ */ jsx(Tabs$1.List, {
+		className: cn("tab-list", className),
+		...rest
+	});
+}
+function TabsTab({ className, ...rest }) {
+	return /* @__PURE__ */ jsx(Tabs$1.Tab, {
+		className: cn("tab", className),
+		...rest
+	});
+}
+function TabsPanel({ className, ...rest }) {
+	return /* @__PURE__ */ jsx(Tabs$1.Panel, {
+		className: cn("tab-panel", className),
+		...rest
+	});
+}
+function TabsIndicator({ className, ...rest }) {
+	return /* @__PURE__ */ jsx(Tabs$1.Indicator, {
+		className: cn("tab-indicator", className),
+		...rest
+	});
+}
+var Tabs = Object.assign(TabsRoot, {
+	List: TabsList,
+	Tab: TabsTab,
+	Panel: TabsPanel,
+	Indicator: TabsIndicator
+});
+//#endregion
+//#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),
+		...rest
+	});
+}
+function TableHead({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("thead", {
+		className: clsx(className),
+		...rest
+	});
+}
+function TableBody({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("tbody", {
+		className: clsx(className),
+		...rest
+	});
+}
+function TableFoot({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("tfoot", {
+		className: clsx(className),
+		...rest
+	});
+}
+function TableRow({ selected, asLink, className, ...rest }) {
+	return /* @__PURE__ */ jsx("tr", {
+		className: clsx(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),
+		"data-align": align && align !== "left" ? align : void 0,
+		scope: scope ?? "col",
+		...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),
+		"data-align": align && align !== "left" ? align : void 0,
+		...rest
+	});
+}
+var Table = Object.assign(TableRoot, {
+	Head: TableHead,
+	Body: TableBody,
+	Foot: TableFoot,
+	Row: TableRow,
+	HeaderCell: TableHeaderCell,
+	Cell: TableCell
+});
+//#endregion
+//#region src/Sidebar.tsx
+var SidebarContext = createContext(null);
+function SidebarRoot({ collapsed, defaultCollapsed, onCollapsedChange, drawerLabel = "Navigation", className, children, ...rest }) {
+	const shell = useAppShell();
+	const drawerOpen = shell?.mobileDrawerOpen ?? false;
+	return /* @__PURE__ */ jsxs(SidebarContext.Provider, {
+		value: {
+			collapsed,
+			defaultCollapsed,
+			onCollapsedChange
+		},
+		children: [/* @__PURE__ */ jsx("aside", {
+			className: clsx("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",
+				"aria-label": drawerLabel,
+				onClick: (event) => {
+					if (event.target.closest("a, [data-drawer-close]")) shell.setMobileDrawerOpen(false);
+				},
+				children
+			})] })
+		}) : null]
+	});
+}
+function SidebarHeader({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("sidebar-header", className),
+		...rest
+	});
+}
+function SidebarNav({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("nav", {
+		className: clsx("sidebar-nav", className),
+		...rest
+	});
+}
+function SidebarGroup({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("sidebar-group", className),
+		...rest
+	});
+}
+function SidebarGroupLabel({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("sidebar-group-label", className),
+		...rest
+	});
+}
+function SidebarItem({ active, icon, badge, className, children, ...rest }) {
+	return /* @__PURE__ */ jsxs("a", {
+		className: clsx("sidebar-item", className),
+		"aria-current": active ? "page" : void 0,
+		...rest,
+		children: [
+			icon != null ? /* @__PURE__ */ jsx(SidebarIcon, { children: renderIcon(icon) }) : null,
+			children !== void 0 ? /* @__PURE__ */ jsx(SidebarLabel, { children }) : null,
+			badge !== void 0 ? /* @__PURE__ */ jsx(SidebarBadge, { children: badge }) : null
+		]
+	});
+}
+function SidebarIcon({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: clsx("sidebar-icon", className),
+		...rest
+	});
+}
+function SidebarLabel({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: clsx("sidebar-label", className),
+		...rest
+	});
+}
+function SidebarBadge({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: clsx("sidebar-badge", className),
+		...rest
+	});
+}
+function SidebarCollapsible({ icon, label, trigger, children, className, open, defaultOpen, onOpenChange, ...rest }) {
+	const isControlled = open !== void 0;
+	const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+	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),
+		open: isOpen,
+		onToggle: (event) => {
+			const next = event.currentTarget.open;
+			if (!isControlled) setInternalOpen(next);
+			onOpenChange?.(next);
+		},
+		...rest,
+		children: [/* @__PURE__ */ jsx("summary", {
+			className: "sidebar-collapsible-trigger",
+			children: triggerContent
+		}), /* @__PURE__ */ jsx("div", {
+			className: "sidebar-collapsible-panel",
+			children
+		})]
+	});
+}
+function SidebarSubItem({ active, icon, badge, className, children, ...rest }) {
+	return /* @__PURE__ */ jsxs("a", {
+		className: clsx("sidebar-subitem", className),
+		"aria-current": active ? "page" : void 0,
+		...rest,
+		children: [
+			icon != null ? /* @__PURE__ */ jsx(SidebarIcon, { children: renderIcon(icon) }) : null,
+			children,
+			badge !== void 0 ? /* @__PURE__ */ jsx(SidebarBadge, { children: badge }) : null
+		]
+	});
+}
+function SidebarFooter({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("sidebar-footer", className),
+		...rest
+	});
+}
+function SidebarCollapseToggle({ label = "Toggle sidebar", className, children, ...rest }) {
+	const ctx = useContext(SidebarContext);
+	const controlledChecked = ctx?.collapsed;
+	const isControlled = controlledChecked !== void 0;
+	return /* @__PURE__ */ jsxs("label", {
+		className: clsx("sidebar-collapse-toggle", className),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				type: "checkbox",
+				className: "sidebar-toggle",
+				"aria-label": label,
+				...isControlled ? { checked: controlledChecked } : { defaultChecked: ctx?.defaultCollapsed },
+				onChange: (event) => ctx?.onCollapsedChange?.(event.currentTarget.checked)
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: label
+			}),
+			children
+		]
+	});
+}
+var Sidebar = Object.assign(SidebarRoot, {
+	Header: SidebarHeader,
+	Nav: SidebarNav,
+	Group: SidebarGroup,
+	GroupLabel: SidebarGroupLabel,
+	Item: SidebarItem,
+	Icon: SidebarIcon,
+	Label: SidebarLabel,
+	Badge: SidebarBadge,
+	Collapsible: SidebarCollapsible,
+	SubItem: SidebarSubItem,
+	Footer: SidebarFooter,
+	CollapseToggle: SidebarCollapseToggle
+});
+//#endregion
+export { Accordion, AdminRoot, Alert, AppShell, Badge, BrandTile, Breadcrumbs, Button, ButtonGroup, Card, Checkbox, Dialog, Field, FileInput, Footer, Input, InputGroup, Menu, Navbar, Pagination, Progress, Radio, RadioGroup, Select, Sidebar, Spinner, Switch, Table, Tabs, Textarea, getPaginationItems, useAppShell };
 
 //# sourceMappingURL=index.mjs.map