@aortl/admin-react 0.20.1 → 0.21.0

package/dist/index.mjs

@@ -1,8 +1,8 @@
 import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Children, Fragment as Fragment$1, createContext, createElement, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+import { Children, Fragment as Fragment$1, createContext, createElement, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Button as Button$1 } from "@base-ui/react/button";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
 import { Toggle } from "@base-ui/react/toggle";
 import { Input as Input$1 } from "@base-ui/react/input";
 import { NumberField } from "@base-ui/react/number-field";
@@ -76,30 +76,6 @@ var Accordion = Object.assign(AccordionRoot, {
 */
 var PortalContainerContext = createContext(null);
 //#endregion
-//#region src/AdminRoot.tsx
-function AdminRoot({ className, theme, systemAccent, style, ref, ...rest }) {
-	const rootStyle = systemAccent !== void 0 ? {
-		...style,
-		"--color-system-accent": systemAccent
-	} : style;
-	const portalRef = useRef(null);
-	const setRef = useCallback((node) => {
-		portalRef.current = node;
-		if (typeof ref === "function") ref(node);
-		else if (ref) ref.current = node;
-	}, [ref]);
-	return /* @__PURE__ */ jsx(PortalContainerContext.Provider, {
-		value: portalRef,
-		children: /* @__PURE__ */ jsx("div", {
-			ref: setRef,
-			className: cn("admin-root", className),
-			style: rootStyle,
-			...rest,
-			...theme !== void 0 && { "data-theme": theme }
-		})
-	});
-}
-//#endregion
 //#region src/icon.ts
 /**
 * Render an `IconProp`, defaulting component references to `size="1em"
@@ -115,226 +91,6 @@ function renderIcon(icon, size = "1em") {
 	});
 }
 //#endregion
-//#region src/Alert.tsx
-function DismissIcon() {
-	return /* @__PURE__ */ jsxs("svg", {
-		width: "1em",
-		height: "1em",
-		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" })]
-	});
-}
-function AlertRoot({ variant, icon, title, description, action, onDismiss, dismissLabel = "Dismiss", classNames, className, role, children, ...rest }) {
-	return /* @__PURE__ */ jsxs("div", {
-		role: role ?? (variant === "danger" || variant === "warning" ? "alert" : "status"),
-		className: cn(["alert", `alert-${variant}`], className),
-		...rest,
-		children: [
-			renderIcon(icon),
-			title !== void 0 ? /* @__PURE__ */ jsx(AlertTitle, {
-				className: classNames?.title,
-				children: title
-			}) : null,
-			description !== void 0 ? /* @__PURE__ */ jsx(AlertDescription, {
-				className: classNames?.description,
-				children: description
-			}) : null,
-			children,
-			action !== void 0 ? /* @__PURE__ */ jsx(AlertAction, {
-				className: classNames?.action,
-				children: action
-			}) : null,
-			onDismiss ? /* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: cn("alert-dismiss", classNames?.dismiss),
-				"aria-label": dismissLabel,
-				onClick: onDismiss,
-				children: /* @__PURE__ */ jsx(DismissIcon, {})
-			}) : null
-		]
-	});
-}
-function AlertTitle({ className, ...rest }) {
-	return /* @__PURE__ */ jsx("strong", {
-		className: cn("alert-title", className),
-		...rest
-	});
-}
-function AlertDescription({ className, ...rest }) {
-	return /* @__PURE__ */ jsx("p", {
-		className: cn("alert-description", className),
-		...rest
-	});
-}
-function AlertAction({ className, ...rest }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("alert-action", className),
-		...rest
-	});
-}
-var Alert = Object.assign(AlertRoot, {
-	Title: AlertTitle,
-	Description: AlertDescription,
-	Action: AlertAction
-});
-//#endregion
-//#region src/AppShell.tsx
-var AppShellContext = createContext(null);
-function useAppShell() {
-	return useContext(AppShellContext);
-}
-function AppShellRoot({ hasSidebar = 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: cn(["app-shell", hasSidebar && "app-shell-with-sidebar"], className),
-			style: rootStyle,
-			...rest,
-			children
-		})
-	});
-}
-function AppShellMain({ className, ...rest }) {
-	return /* @__PURE__ */ jsx("main", {
-		className: cn("app-shell-main", className),
-		...rest
-	});
-}
-var AppShell = Object.assign(AppShellRoot, { Main: AppShellMain });
-//#endregion
-//#region src/Badge.tsx
-function RemoveIcon() {
-	return /* @__PURE__ */ jsxs("svg", {
-		width: "1em",
-		height: "1em",
-		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" })]
-	});
-}
-function Badge({ variant = "neutral", size = "md", icon, soft = false, onRemove, removeLabel = "Remove", className, children, ...rest }) {
-	return /* @__PURE__ */ jsxs("span", {
-		className: cn([
-			"badge",
-			variant !== "neutral" && `badge-${variant}`,
-			size !== "md" && `badge-${size}`,
-			soft && "badge-soft"
-		], className),
-		...rest,
-		children: [
-			renderIcon(icon),
-			children,
-			onRemove ? /* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: cn("badge-remove", void 0),
-				"aria-label": removeLabel,
-				onClick: onRemove,
-				children: /* @__PURE__ */ jsx(RemoveIcon, {})
-			}) : null
-		]
-	});
-}
-//#endregion
-//#region src/BrandTile.tsx
-/**
-* Brand/system mark for the navbar — monogram, icon, or shop logo. Precedence
-* is `src` > `icon` > `monogram`. Monogram/icon tiles are `aria-hidden`; image
-* tiles expose `alt` to assistive tech instead.
-*/
-function BrandTile({ variant = "solid", size = "md", monogram, icon, src, alt = "", className, children, ...rest }) {
-	const classes = cn([
-		"brand-tile",
-		variant !== "solid" && `brand-tile-${variant}`,
-		size === "lg" && "brand-tile-lg"
-	], className);
-	if (src) return /* @__PURE__ */ jsx("span", {
-		className: classes,
-		...rest,
-		children: /* @__PURE__ */ jsx("img", {
-			src,
-			alt
-		})
-	});
-	return /* @__PURE__ */ jsx("span", {
-		className: classes,
-		"aria-hidden": true,
-		...rest,
-		children: icon ? renderIcon(icon) : children ?? monogram
-	});
-}
-//#endregion
-//#region src/Avatar.tsx
-/**
-* Image avatar with an initials fallback. Initials show until the image loads
-* (and again, React-only, if it errors); the vanilla CSS layers the `<img>`
-* over the initials instead.
-*/
-function Avatar({ src, alt, initials, size = "md", shape = "circle", className, children, ...rest }) {
-	const fallback = children ?? initials;
-	return /* @__PURE__ */ jsxs(Avatar$1.Root, {
-		className: cn([
-			"avatar",
-			size !== "md" && `avatar-${size}`,
-			shape === "square" && "avatar-square"
-		], className),
-		...rest,
-		children: [fallback !== void 0 ? /* @__PURE__ */ jsx(Avatar$1.Fallback, { children: fallback }) : null, src !== void 0 ? /* @__PURE__ */ jsx(Avatar$1.Image, {
-			src,
-			alt
-		}) : null]
-	});
-}
-/** Overlapping stack of avatars; later children paint on top. `max` caps the visible count. */
-function AvatarGroup({ max, size = "md", className, children, ...rest }) {
-	const items = Children.toArray(children);
-	const overflow = max !== void 0 && items.length > max ? items.length - max : 0;
-	const visible = overflow > 0 ? items.slice(0, max) : items;
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("avatar-group", className),
-		...rest,
-		children: [visible, overflow > 0 ? /* @__PURE__ */ jsxs("span", {
-			className: cn([
-				"avatar",
-				size !== "md" && `avatar-${size}`,
-				"avatar-more"
-			], void 0),
-			"aria-label": `+${overflow} more`,
-			children: ["+", overflow]
-		}) : null]
-	});
-}
-//#endregion
 //#region src/hotkey-parse.ts
 var MOD_ORDER = [
 	"ctrl",
@@ -569,50 +325,561 @@ function useHotkey(keys, handler, options) {
 	return derived;
 }
 /**
-* `useHotkey` bound to a rendered element: the chord dispatches a native
-* `.click()`, so `onClick` fires, `type="submit"` submits, an anchor
-* navigates. Returns `setRef` to pass as the element's ref; it latches the
-* element and forwards `ref`.
+* `useHotkey` bound to a rendered element: the chord dispatches a native
+* `.click()`, so `onClick` fires, `type="submit"` submits, an anchor
+* navigates. Returns `setRef` to pass as the element's ref; it latches the
+* element and forwards `ref`.
+*/
+function useHotkeyClick(keys, ref, options) {
+	const elementRef = useRef(null);
+	const setRef = useCallback((node) => {
+		elementRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	return {
+		...useHotkey(keys, () => elementRef.current?.click(), options),
+		setRef
+	};
+}
+//#endregion
+//#region src/Button.tsx
+function Button({ variant = "default", size = "md", fullWidth, loading, icon, iconTrailing, hotkey, className, type = "button", disabled, children, onClick, ref, ...rest }) {
+	const { ariaKeyShortcuts, primaryChord, setRef } = useHotkeyClick(hotkey, ref, { enabled: !disabled && !loading });
+	const iconOnly = children == null && (icon != null || iconTrailing != null);
+	return /* @__PURE__ */ jsxs(Button$1, {
+		ref: setRef,
+		onClick,
+		type,
+		disabled: disabled || loading,
+		"aria-busy": loading || void 0,
+		"aria-keyshortcuts": ariaKeyShortcuts,
+		className: cn([
+			"btn",
+			variant !== "default" && `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),
+			primaryChord !== void 0 ? /* @__PURE__ */ jsx(Kbd, { keys: primaryChord }) : null
+		]
+	});
+}
+//#endregion
+//#region src/dialog-internal.ts
+var DialogContext = createContext(null);
+/**
+* Drives a native `<dialog>` from a controlled `open` prop, shared by `<Dialog>`
+* and `<Drawer>`: merges the consumer ref, calls `showModal()` / `close()` on
+* change, and reports closes (Esc, backdrop, form submit) via `onOpenChange`.
+* Returns `ref` for the portal container context.
+*/
+function useDialogElement(open, onOpenChange, consumerRef) {
+	const ref = useRef(null);
+	const onOpenChangeRef = useRef(onOpenChange);
+	onOpenChangeRef.current = onOpenChange;
+	const setRef = useCallback((node) => {
+		ref.current = node;
+		if (typeof consumerRef === "function") consumerRef(node);
+		else if (consumerRef) consumerRef.current = node;
+	}, [consumerRef]);
+	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 {
+		setRef,
+		ctx: { close: () => ref.current?.close() },
+		ref
+	};
+}
+//#endregion
+//#region src/Dialog.tsx
+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 — for layouts the default `<Dialog>` doesn't fit. */
+function DialogContainer({ open, onOpenChange, size = "md", closedby = "any", className, children, ref: consumerRef, ...rest }) {
+	const { setRef, ctx, ref } = useDialogElement(open, onOpenChange, consumerRef);
+	return /* @__PURE__ */ jsx(DialogContext.Provider, {
+		value: ctx,
+		children: /* @__PURE__ */ jsx(PortalContainerContext.Provider, {
+			value: ref,
+			children: /* @__PURE__ */ jsx("dialog", {
+				ref: setRef,
+				className: cn(["dialog", size !== "md" && `dialog-${size}`], className),
+				closedby,
+				...rest,
+				children
+			})
+		})
+	});
+}
+function DialogHeader({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("dialog-header", className),
+		...rest
+	});
+}
+function DialogTitle({ icon, className, children, ...rest }) {
+	return /* @__PURE__ */ jsxs("h2", {
+		className: cn("dialog-title", className),
+		...rest,
+		children: [renderIcon(icon), children]
+	});
+}
+function DialogDescription({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("dialog-description", className),
+		...rest
+	});
+}
+function DialogBody({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("dialog-body", className),
+		...rest
+	});
+}
+function DialogFooter({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("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: cn("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 with shorthand-driven header/body/footer. For other shapes, compose `<Dialog.Container>` by hand. */
+function DialogRoot({ icon, title, description, actions, dismissible = true, closeLabel = "Close", classNames, children, ...containerProps }) {
+	const hasTitle = title !== void 0 || icon !== void 0;
+	const showHeader = hasTitle || dismissible;
+	return /* @__PURE__ */ jsxs(DialogContainer, {
+		...containerProps,
+		children: [
+			showHeader ? /* @__PURE__ */ jsxs(DialogHeader, {
+				className: classNames?.header,
+				children: [hasTitle ? /* @__PURE__ */ jsx(DialogTitle, {
+					icon,
+					className: classNames?.title,
+					children: title
+				}) : null, dismissible ? /* @__PURE__ */ jsx(DialogCloseButton, {
+					"aria-label": closeLabel,
+					className: classNames?.close
+				}) : null]
+			}) : null,
+			description !== void 0 ? /* @__PURE__ */ jsx(DialogDescription, {
+				className: classNames?.description,
+				children: description
+			}) : null,
+			children !== void 0 ? /* @__PURE__ */ jsx(DialogBody, {
+				className: classNames?.body,
+				children
+			}) : null,
+			actions !== void 0 ? /* @__PURE__ */ jsx(DialogFooter, {
+				className: classNames?.footer,
+				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/useConfirm.tsx
+var ConfirmContext = createContext(null);
+/**
+* Returns `confirm(options)`, an async `window.confirm`: it opens a confirmation
+* dialog and resolves `true` on Confirm, `false` on Cancel, Esc, or when the
+* hosting `<AdminRoot>` unmounts. Calls made while a dialog is open queue and
+* open in call order. The function identity is stable.
+*
+* @throws When called outside `<AdminRoot>`, which hosts the dialog.
+*/
+function useConfirm() {
+	const confirm = useContext(ConfirmContext);
+	if (confirm === null) throw new Error("useConfirm() must be called inside <AdminRoot>, which hosts the dialog.");
+	return confirm;
+}
+/**
+* Hosts `useConfirm()` for its subtree: queues requests FIFO and renders the
+* head of the queue as a dialog, nothing while idle. Rendered by `<AdminRoot>`.
+*/
+function ConfirmHost({ children }) {
+	const [queue, setQueue] = useState([]);
+	const pending = useRef(/* @__PURE__ */ new Set());
+	const nextId = useRef(0);
+	const confirm = useCallback((options) => new Promise((resolve) => {
+		const entry = {
+			id: nextId.current++,
+			options,
+			resolve
+		};
+		pending.current.add(entry);
+		setQueue((q) => [...q, entry]);
+	}), []);
+	const settle = useCallback((entry, confirmed) => {
+		if (pending.current.delete(entry)) entry.resolve(confirmed);
+		setQueue((q) => q.filter((e) => e !== entry));
+	}, []);
+	useEffect(() => {
+		const set = pending.current;
+		return () => {
+			for (const entry of set) entry.resolve(false);
+			set.clear();
+			setQueue([]);
+		};
+	}, []);
+	const current = queue[0];
+	return /* @__PURE__ */ jsxs(ConfirmContext.Provider, {
+		value: confirm,
+		children: [children, current !== void 0 ? /* @__PURE__ */ jsx(ConfirmDialog, {
+			options: current.options,
+			onSettle: (confirmed) => settle(current, confirmed)
+		}, current.id) : null]
+	});
+}
+function ConfirmDialog({ options, onSettle }) {
+	const { title, description, confirmLabel = "Confirm", cancelLabel = "Cancel", variant = "default" } = options;
+	const danger = variant === "danger";
+	const dialogRef = useRef(null);
+	const initialFocusRef = useRef(null);
+	const confirmed = useRef(false);
+	const titleId = useId();
+	const descriptionId = useId();
+	useEffect(() => {
+		initialFocusRef.current?.focus();
+	}, []);
+	const answer = (value) => {
+		confirmed.current = value;
+		dialogRef.current?.close();
+	};
+	return /* @__PURE__ */ jsxs(Dialog.Container, {
+		ref: dialogRef,
+		open: true,
+		onOpenChange: (open) => {
+			if (!open) onSettle(confirmed.current);
+		},
+		size: "sm",
+		closedby: "closerequest",
+		role: "alertdialog",
+		"aria-labelledby": titleId,
+		"aria-describedby": description !== void 0 ? descriptionId : void 0,
+		children: [
+			/* @__PURE__ */ jsx(Dialog.Header, { children: /* @__PURE__ */ jsx(Dialog.Title, {
+				id: titleId,
+				children: title
+			}) }),
+			description !== void 0 ? /* @__PURE__ */ jsx(Dialog.Description, {
+				id: descriptionId,
+				children: description
+			}) : null,
+			/* @__PURE__ */ jsxs(Dialog.Footer, { children: [/* @__PURE__ */ jsx(Button, {
+				ref: danger ? initialFocusRef : void 0,
+				variant: "ghost",
+				onClick: () => answer(false),
+				children: cancelLabel
+			}), /* @__PURE__ */ jsx(Button, {
+				ref: danger ? void 0 : initialFocusRef,
+				variant: danger ? "danger" : "primary",
+				onClick: () => answer(true),
+				children: confirmLabel
+			})] })
+		]
+	});
+}
+//#endregion
+//#region src/AdminRoot.tsx
+function AdminRoot({ className, theme, systemAccent, style, ref, children, ...rest }) {
+	const rootStyle = systemAccent !== void 0 ? {
+		...style,
+		"--color-system-accent": systemAccent
+	} : style;
+	const portalRef = useRef(null);
+	const setRef = useCallback((node) => {
+		portalRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	return /* @__PURE__ */ jsx(PortalContainerContext.Provider, {
+		value: portalRef,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: setRef,
+			className: cn("admin-root", className),
+			style: rootStyle,
+			...rest,
+			...theme !== void 0 && { "data-theme": theme },
+			children: /* @__PURE__ */ jsx(ConfirmHost, { children })
+		})
+	});
+}
+//#endregion
+//#region src/Alert.tsx
+function DismissIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "1em",
+		height: "1em",
+		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" })]
+	});
+}
+function AlertRoot({ variant, icon, title, description, action, onDismiss, dismissLabel = "Dismiss", classNames, className, role, children, ...rest }) {
+	return /* @__PURE__ */ jsxs("div", {
+		role: role ?? (variant === "danger" || variant === "warning" ? "alert" : "status"),
+		className: cn(["alert", `alert-${variant}`], className),
+		...rest,
+		children: [
+			renderIcon(icon),
+			title !== void 0 ? /* @__PURE__ */ jsx(AlertTitle, {
+				className: classNames?.title,
+				children: title
+			}) : null,
+			description !== void 0 ? /* @__PURE__ */ jsx(AlertDescription, {
+				className: classNames?.description,
+				children: description
+			}) : null,
+			children,
+			action !== void 0 ? /* @__PURE__ */ jsx(AlertAction, {
+				className: classNames?.action,
+				children: action
+			}) : null,
+			onDismiss ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cn("alert-dismiss", classNames?.dismiss),
+				"aria-label": dismissLabel,
+				onClick: onDismiss,
+				children: /* @__PURE__ */ jsx(DismissIcon, {})
+			}) : null
+		]
+	});
+}
+function AlertTitle({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("strong", {
+		className: cn("alert-title", className),
+		...rest
+	});
+}
+function AlertDescription({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("alert-description", className),
+		...rest
+	});
+}
+function AlertAction({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("alert-action", className),
+		...rest
+	});
+}
+var Alert = Object.assign(AlertRoot, {
+	Title: AlertTitle,
+	Description: AlertDescription,
+	Action: AlertAction
+});
+//#endregion
+//#region src/AppShell.tsx
+var AppShellContext = createContext(null);
+function useAppShell() {
+	return useContext(AppShellContext);
+}
+function AppShellRoot({ hasSidebar = 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: cn(["app-shell", hasSidebar && "app-shell-with-sidebar"], className),
+			style: rootStyle,
+			...rest,
+			children
+		})
+	});
+}
+function AppShellMain({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("main", {
+		className: cn("app-shell-main", className),
+		...rest
+	});
+}
+var AppShell = Object.assign(AppShellRoot, { Main: AppShellMain });
+//#endregion
+//#region src/Badge.tsx
+function RemoveIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "1em",
+		height: "1em",
+		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" })]
+	});
+}
+function Badge({ variant = "neutral", size = "md", icon, soft = false, onRemove, removeLabel = "Remove", className, children, ...rest }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn([
+			"badge",
+			variant !== "neutral" && `badge-${variant}`,
+			size !== "md" && `badge-${size}`,
+			soft && "badge-soft"
+		], className),
+		...rest,
+		children: [
+			renderIcon(icon),
+			children,
+			onRemove ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cn("badge-remove", void 0),
+				"aria-label": removeLabel,
+				onClick: onRemove,
+				children: /* @__PURE__ */ jsx(RemoveIcon, {})
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/BrandTile.tsx
+/**
+* Brand/system mark for the navbar — monogram, icon, or shop logo. Precedence
+* is `src` > `icon` > `monogram`. Monogram/icon tiles are `aria-hidden`; image
+* tiles expose `alt` to assistive tech instead.
+*/
+function BrandTile({ variant = "solid", size = "md", monogram, icon, src, alt = "", systemAccent, className, style, children, ...rest }) {
+	const tileStyle = systemAccent !== void 0 ? {
+		...style,
+		"--color-system-accent": systemAccent
+	} : style;
+	const classes = cn([
+		"brand-tile",
+		variant !== "solid" && `brand-tile-${variant}`,
+		size === "lg" && "brand-tile-lg"
+	], className);
+	if (src) return /* @__PURE__ */ jsx("span", {
+		className: classes,
+		style: tileStyle,
+		...rest,
+		children: /* @__PURE__ */ jsx("img", {
+			src,
+			alt
+		})
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: classes,
+		style: tileStyle,
+		"aria-hidden": true,
+		...rest,
+		children: icon ? renderIcon(icon) : children ?? monogram
+	});
+}
+//#endregion
+//#region src/Avatar.tsx
+/**
+* Image avatar with an initials fallback. Initials show until the image loads
+* (and again, React-only, if it errors); the vanilla CSS layers the `<img>`
+* over the initials instead.
 */
-function useHotkeyClick(keys, ref, options) {
-	const elementRef = useRef(null);
-	const setRef = useCallback((node) => {
-		elementRef.current = node;
-		if (typeof ref === "function") ref(node);
-		else if (ref) ref.current = node;
-	}, [ref]);
-	return {
-		...useHotkey(keys, () => elementRef.current?.click(), options),
-		setRef
-	};
-}
-//#endregion
-//#region src/Button.tsx
-function Button({ variant = "default", size = "md", fullWidth, loading, icon, iconTrailing, hotkey, className, type = "button", disabled, children, onClick, ref, ...rest }) {
-	const { ariaKeyShortcuts, primaryChord, setRef } = useHotkeyClick(hotkey, ref, { enabled: !disabled && !loading });
-	const iconOnly = children == null && (icon != null || iconTrailing != null);
-	return /* @__PURE__ */ jsxs(Button$1, {
-		ref: setRef,
-		onClick,
-		type,
-		disabled: disabled || loading,
-		"aria-busy": loading || void 0,
-		"aria-keyshortcuts": ariaKeyShortcuts,
+function Avatar({ src, alt, initials, size = "md", shape = "circle", className, children, ...rest }) {
+	const fallback = children ?? initials;
+	return /* @__PURE__ */ jsxs(Avatar$1.Root, {
 		className: cn([
-			"btn",
-			variant !== "default" && `btn-${variant}`,
-			size !== "md" && `btn-${size}`,
-			fullWidth && "btn-full-width",
-			loading && "btn-loading",
-			iconOnly && "btn-square"
+			"avatar",
+			size !== "md" && `avatar-${size}`,
+			shape === "square" && "avatar-square"
 		], className),
 		...rest,
-		children: [
-			loading ? null : renderIcon(icon),
-			children,
-			renderIcon(iconTrailing),
-			primaryChord !== void 0 ? /* @__PURE__ */ jsx(Kbd, { keys: primaryChord }) : null
-		]
+		children: [fallback !== void 0 ? /* @__PURE__ */ jsx(Avatar$1.Fallback, { children: fallback }) : null, src !== void 0 ? /* @__PURE__ */ jsx(Avatar$1.Image, {
+			src,
+			alt
+		}) : null]
+	});
+}
+/** Overlapping stack of avatars; later children paint on top. `max` caps the visible count. */
+function AvatarGroup({ max, size = "md", className, children, ...rest }) {
+	const items = Children.toArray(children);
+	const overflow = max !== void 0 && items.length > max ? items.length - max : 0;
+	const visible = overflow > 0 ? items.slice(0, max) : items;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("avatar-group", className),
+		...rest,
+		children: [visible, overflow > 0 ? /* @__PURE__ */ jsxs("span", {
+			className: cn([
+				"avatar",
+				size !== "md" && `avatar-${size}`,
+				"avatar-more"
+			], void 0),
+			"aria-label": `+${overflow} more`,
+			children: ["+", overflow]
+		}) : null]
 	});
 }
 //#endregion
@@ -1351,13 +1618,18 @@ var Select = Object.assign(SelectRoot, {
 * gap between stacked sections. Place inside `<AppShell.Main>`, which has no
 * padding of its own. Not the `.Container` escape hatch (`Card.Container`).
 */
-function Container({ size = "md", compact, className, ...rest }) {
+function Container({ size = "md", compact, maxWidth, className, style, ...rest }) {
+	const rootStyle = maxWidth !== void 0 ? {
+		...style,
+		"--container-max": maxWidth
+	} : style;
 	return /* @__PURE__ */ jsx("div", {
 		className: cn([
 			"container",
 			size !== "md" && `container-${size}`,
 			compact && "container-compact"
 		], className),
+		style: rootStyle,
 		...rest
 	});
 }
@@ -1771,13 +2043,14 @@ function Bar({ datum, value, label, color, className, style, ...rest }) {
 }
 /** Single-series bar chart. For hand-composed layouts use `<BarChart.Container>` + `<BarChart.Bar>`. */
 function BarChartRoot({ data, max, orientation = "horizontal", size = "md", showValues, inline, variant = "info", style, "aria-label": ariaLabel, ...rest }) {
+	const resolvedMax = computeMax(data, max);
 	return /* @__PURE__ */ jsx(BarChartContainer, {
 		orientation,
 		size,
 		showValues,
 		inline,
 		variant,
-		style: mergeStyle({ "--chart-max": computeMax(data, max) }, style),
+		style: mergeStyle({ "--chart-max": resolvedMax }, style),
 		"aria-label": ariaLabel ?? buildAriaLabel("bar", data),
 		...rest,
 		children: data.map((d, i) => /* @__PURE__ */ jsx(Bar, { datum: d }, d.label ?? i))
@@ -1900,163 +2173,6 @@ var StackedBar = Object.assign(StackedBarRoot, {
 	Legend: ChartLegend
 });
 //#endregion
-//#region src/dialog-internal.ts
-var DialogContext = createContext(null);
-/**
-* Drives a native `<dialog>` from a controlled `open` prop, shared by `<Dialog>`
-* and `<Drawer>`: merges the consumer ref, calls `showModal()` / `close()` on
-* change, and reports closes (Esc, backdrop, form submit) via `onOpenChange`.
-* Returns `ref` for the portal container context.
-*/
-function useDialogElement(open, onOpenChange, consumerRef) {
-	const ref = useRef(null);
-	const onOpenChangeRef = useRef(onOpenChange);
-	onOpenChangeRef.current = onOpenChange;
-	const setRef = useCallback((node) => {
-		ref.current = node;
-		if (typeof consumerRef === "function") consumerRef(node);
-		else if (consumerRef) consumerRef.current = node;
-	}, [consumerRef]);
-	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 {
-		setRef,
-		ctx: { close: () => ref.current?.close() },
-		ref
-	};
-}
-//#endregion
-//#region src/Dialog.tsx
-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 — for layouts the default `<Dialog>` doesn't fit. */
-function DialogContainer({ open, onOpenChange, size = "md", closedby = "any", className, children, ref: consumerRef, ...rest }) {
-	const { setRef, ctx, ref } = useDialogElement(open, onOpenChange, consumerRef);
-	return /* @__PURE__ */ jsx(DialogContext.Provider, {
-		value: ctx,
-		children: /* @__PURE__ */ jsx(PortalContainerContext.Provider, {
-			value: ref,
-			children: /* @__PURE__ */ jsx("dialog", {
-				ref: setRef,
-				className: cn(["dialog", size !== "md" && `dialog-${size}`], className),
-				closedby,
-				...rest,
-				children
-			})
-		})
-	});
-}
-function DialogHeader({ className, ...rest }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("dialog-header", className),
-		...rest
-	});
-}
-function DialogTitle({ icon, className, children, ...rest }) {
-	return /* @__PURE__ */ jsxs("h2", {
-		className: cn("dialog-title", className),
-		...rest,
-		children: [renderIcon(icon), children]
-	});
-}
-function DialogDescription({ className, ...rest }) {
-	return /* @__PURE__ */ jsx("p", {
-		className: cn("dialog-description", className),
-		...rest
-	});
-}
-function DialogBody({ className, ...rest }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("dialog-body", className),
-		...rest
-	});
-}
-function DialogFooter({ className, ...rest }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("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: cn("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 with shorthand-driven header/body/footer. For other shapes, compose `<Dialog.Container>` by hand. */
-function DialogRoot({ icon, title, description, actions, dismissible = true, closeLabel = "Close", classNames, children, ...containerProps }) {
-	const hasTitle = title !== void 0 || icon !== void 0;
-	const showHeader = hasTitle || dismissible;
-	return /* @__PURE__ */ jsxs(DialogContainer, {
-		...containerProps,
-		children: [
-			showHeader ? /* @__PURE__ */ jsxs(DialogHeader, {
-				className: classNames?.header,
-				children: [hasTitle ? /* @__PURE__ */ jsx(DialogTitle, {
-					icon,
-					className: classNames?.title,
-					children: title
-				}) : /* @__PURE__ */ jsx("span", { className: cn("flex-1", void 0) }), dismissible ? /* @__PURE__ */ jsx(DialogCloseButton, {
-					"aria-label": closeLabel,
-					className: classNames?.close
-				}) : null]
-			}) : null,
-			description !== void 0 ? /* @__PURE__ */ jsx(DialogDescription, {
-				className: classNames?.description,
-				children: description
-			}) : null,
-			children !== void 0 ? /* @__PURE__ */ jsx(DialogBody, {
-				className: classNames?.body,
-				children
-			}) : null,
-			actions !== void 0 ? /* @__PURE__ */ jsx(DialogFooter, {
-				className: classNames?.footer,
-				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/Drawer.tsx
 /** The bare edge-anchored `<dialog>` primitive — for layouts the default `<Drawer>` doesn't fit. */
 function DrawerContainer({ open, onOpenChange, side = "end", size = "md", closedby = "any", className, children, ref: consumerRef, ...rest }) {
@@ -2093,7 +2209,7 @@ function DrawerRoot({ icon, title, description, actions, dismissible = true, clo
 					icon,
 					className: classNames?.title,
 					children: title
-				}) : /* @__PURE__ */ jsx("span", { className: cn("flex-1", void 0) }), dismissible ? /* @__PURE__ */ jsx(Dialog.CloseButton, {
+				}) : null, dismissible ? /* @__PURE__ */ jsx(Dialog.CloseButton, {
 					"aria-label": closeLabel,
 					className: classNames?.close
 				}) : null]
@@ -2160,7 +2276,7 @@ function FieldRoot({ label, description, error, required, inline, className, cla
 }
 function FieldLabel({ className, required, ...rest }) {
 	return /* @__PURE__ */ jsx(Field$1.Label, {
-		"data-required": required ? "" : void 0,
+		"data-required": required === void 0 ? void 0 : required ? "" : "false",
 		className: cn("field-label", className),
 		...rest
 	});
@@ -2223,10 +2339,16 @@ function MenuRoot({ className, ...rest }) {
 		...rest
 	});
 }
-function MenuTrigger({ className, ...rest }) {
+function MenuTrigger({ variant, size = "md", className, children, ...rest }) {
 	return /* @__PURE__ */ jsx("summary", {
-		className: cn("menu-trigger", className),
-		...rest
+		className: cn(["menu-trigger", variant !== void 0 && [
+			"btn",
+			variant !== "default" && `btn-${variant}`,
+			size !== "md" && `btn-${size}`,
+			children == null && "btn-square"
+		]], className),
+		...rest,
+		children
 	});
 }
 function MenuPopup({ className, role = "menu", ...rest }) {
@@ -2333,9 +2455,14 @@ var Menu = Object.assign(MenuRoot, {
 });
 //#endregion
 //#region src/Navbar.tsx
-function NavbarRoot({ className, ...rest }) {
+function NavbarRoot({ systemAccent, className, style, ...rest }) {
+	const rootStyle = systemAccent !== void 0 ? {
+		...style,
+		"--color-system-accent": systemAccent
+	} : style;
 	return /* @__PURE__ */ jsx("header", {
 		className: cn("navbar", className),
+		style: rootStyle,
 		...rest
 	});
 }
@@ -2867,20 +2994,13 @@ function SidebarCollapseToggle({ label = "Toggle sidebar", className, classNames
 	return /* @__PURE__ */ jsxs("label", {
 		className: cn("sidebar-collapse-toggle", className),
 		...rest,
-		children: [
-			/* @__PURE__ */ jsx("input", {
-				type: "checkbox",
-				className: cn("sidebar-toggle", classNames?.input),
-				"aria-label": label,
-				...isControlled ? { checked: controlledChecked } : { defaultChecked: ctx?.defaultCollapsed },
-				onChange: (event) => ctx?.onCollapsedChange?.(event.currentTarget.checked)
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: cn("sr-only", void 0),
-				children: label
-			}),
-			children
-		]
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "checkbox",
+			className: cn("sidebar-toggle", classNames?.input),
+			"aria-label": label,
+			...isControlled ? { checked: controlledChecked } : { defaultChecked: ctx?.defaultCollapsed },
+			onChange: (event) => ctx?.onCollapsedChange?.(event.currentTarget.checked)
+		}), children]
 	});
 }
 var Sidebar = Object.assign(SidebarRoot, {
@@ -2898,6 +3018,6 @@ var Sidebar = Object.assign(SidebarRoot, {
 	CollapseToggle: SidebarCollapseToggle
 });
 //#endregion
-export { Accordion, AdminRoot, Alert, AppShell, Avatar, AvatarGroup, Badge, BarChart, BrandTile, Breadcrumbs, Button, ButtonGroup, Card, ChartLegend, Checkbox, CodeBlock, Container, Dialog, Donut, Drawer, Field, FileInput, Footer, Indicator, Input, InputGroup, Item, ItemGroup, Kbd, Link, Menu, Navbar, NumberInput, Pagination, PasswordInput, Progress, PropertyList, Prose, Radio, RadioGroup, SERIES, Select, Separator, Sidebar, Spinner, StackedBar, StatCard, Switch, Table, Tabs, Textarea, Timeline, ToggleButton, Tooltip, getPaginationItems, useAppShell, useHotkey };
+export { Accordion, AdminRoot, Alert, AppShell, Avatar, AvatarGroup, Badge, BarChart, BrandTile, Breadcrumbs, Button, ButtonGroup, Card, ChartLegend, Checkbox, CodeBlock, Container, Dialog, Donut, Drawer, Field, FileInput, Footer, Indicator, Input, InputGroup, Item, ItemGroup, Kbd, Link, Menu, Navbar, NumberInput, Pagination, PasswordInput, Progress, PropertyList, Prose, Radio, RadioGroup, SERIES, Select, Separator, Sidebar, Spinner, StackedBar, StatCard, Switch, Table, Tabs, Textarea, Timeline, ToggleButton, Tooltip, getPaginationItems, useAppShell, useConfirm, useHotkey };
 
 //# sourceMappingURL=index.mjs.map