@aortl/admin-react 0.16.2 → 0.18.0

package/dist/index.mjs

@@ -1,8 +1,10 @@
 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 { Button as Button$1 } from "@base-ui/react/button";
 import { Input as Input$1 } from "@base-ui/react/input";
+import { NumberField } from "@base-ui/react/number-field";
 import { Field as Field$1 } from "@base-ui/react/field";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 import { Radio as Radio$1 } from "@base-ui/react/radio";
@@ -113,16 +115,47 @@ function renderIcon(icon, size = "1em") {
 }
 //#endregion
 //#region src/Alert.tsx
-function AlertRoot({ variant, icon, title, description, className, role, children, ...rest }) {
+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, { children: title }) : null,
-			description !== void 0 ? /* @__PURE__ */ jsx(AlertDescription, { children: description }) : null,
-			children
+			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
 		]
 	});
 }
@@ -138,9 +171,16 @@ function AlertDescription({ className, ...rest }) {
 		...rest
 	});
 }
+function AlertAction({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("alert-action", className),
+		...rest
+	});
+}
 var Alert = Object.assign(AlertRoot, {
 	Title: AlertTitle,
-	Description: AlertDescription
+	Description: AlertDescription,
+	Action: AlertAction
 });
 //#endregion
 //#region src/AppShell.tsx
@@ -188,25 +228,109 @@ function AppShellMain({ className, ...rest }) {
 var AppShell = Object.assign(AppShellRoot, { Main: AppShellMain });
 //#endregion
 //#region src/Badge.tsx
-function Badge({ variant = "neutral", size = "md", icon, className, children, ...rest }) {
+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}`
+			size !== "md" && `badge-${size}`,
+			soft && "badge-soft"
 		], className),
 		...rest,
-		children: [renderIcon(icon), children]
+		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
-function BrandTile({ monogram, icon, className, children, ...rest }) {
+/**
+* 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: cn("brand-tile", className),
+		className: classes,
 		"aria-hidden": true,
 		...rest,
-		children: icon ? renderIcon(icon, 14) : children ?? monogram
+		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
@@ -534,9 +658,52 @@ var Breadcrumbs = Object.assign(BreadcrumbsRoot, {
 });
 //#endregion
 //#region src/Input.tsx
-function Input({ variant = "bordered", inputSize = "md", className, type = "text", ...rest }) {
-	return /* @__PURE__ */ jsx(Input$1, {
+function ClearIcon() {
+	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 Input({ variant = "bordered", inputSize = "md", icon, iconTrailing, clearable = false, clearLabel = "Clear", onClear, action, className, classNames, type = "text", value, defaultValue, onChange, disabled, readOnly, ref: consumerRef, ...rest }) {
+	const innerRef = useRef(null);
+	const isControlled = value !== void 0;
+	const [uncontrolledHasValue, setUncontrolledHasValue] = useState(() => defaultValue != null && String(defaultValue).length > 0);
+	const hasValue = isControlled ? value != null && String(value).length > 0 : uncontrolledHasValue;
+	const setRef = useCallback((node) => {
+		innerRef.current = node;
+		if (typeof consumerRef === "function") consumerRef(node);
+		else if (consumerRef) consumerRef.current = node;
+	}, [consumerRef]);
+	function handleChange(event) {
+		if (!isControlled) setUncontrolledHasValue(event.target.value.length > 0);
+		onChange?.(event);
+	}
+	function handleClear() {
+		const input = innerRef.current;
+		if (!input) return;
+		(Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set)?.call(input, "");
+		input.dispatchEvent(new Event("input", { bubbles: true }));
+		input.focus();
+		if (!isControlled) setUncontrolledHasValue(false);
+		onClear?.();
+	}
+	const showClear = clearable && hasValue && !disabled && !readOnly;
+	const inputEl = /* @__PURE__ */ jsx(Input$1, {
+		ref: setRef,
 		type,
+		value,
+		defaultValue,
+		onChange: handleChange,
+		disabled,
+		readOnly,
 		className: cn([
 			"input",
 			variant !== "bordered" && `input-${variant}`,
@@ -544,6 +711,71 @@ function Input({ variant = "bordered", inputSize = "md", className, type = "text
 		], className),
 		...rest
 	});
+	if (!(icon != null || iconTrailing != null || action != null || clearable)) return inputEl;
+	const trailing = showClear ? /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cn("input-action", classNames?.action),
+		"aria-label": clearLabel,
+		onClick: handleClear,
+		children: /* @__PURE__ */ jsx(ClearIcon, {})
+	}) : action ?? renderIcon(iconTrailing);
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("input-icon", classNames?.wrapper),
+		children: [
+			renderIcon(icon),
+			inputEl,
+			trailing
+		]
+	});
+}
+function EyeIcon() {
+	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: "M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" }), /* @__PURE__ */ jsx("path", { d: "M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" })]
+	});
+}
+function EyeOffIcon() {
+	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: "M10.585 10.587a2 2 0 0 0 2.829 2.828" }),
+			/* @__PURE__ */ jsx("path", { d: "M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" }),
+			/* @__PURE__ */ jsx("path", { d: "M3 3l18 18" })
+		]
+	});
+}
+/** Password field with a trailing reveal toggle. Emits the same `.input` / `.input-action` classes. */
+function PasswordInput({ revealLabel = "Show password", classNames, ...rest }) {
+	const [revealed, setRevealed] = useState(false);
+	return /* @__PURE__ */ jsx(Input, {
+		type: revealed ? "text" : "password",
+		action: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: cn("input-action", classNames?.action),
+			"aria-label": revealLabel,
+			"aria-pressed": revealed,
+			onClick: () => setRevealed((v) => !v),
+			children: revealed ? /* @__PURE__ */ jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
+		}),
+		classNames,
+		...rest
+	});
 }
 //#endregion
 //#region src/FileInput.tsx
@@ -574,8 +806,69 @@ function InputGroupAddon({ className, ...rest }) {
 }
 var InputGroup = Object.assign(InputGroupRoot, { Addon: InputGroupAddon });
 //#endregion
+//#region src/NumberInput.tsx
+function MinusIcon() {
+	return /* @__PURE__ */ jsx("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: "M5 12h14" })
+	});
+}
+function PlusIcon() {
+	return /* @__PURE__ */ jsx("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: "M12 5v14M5 12h14" })
+	});
+}
+/**
+* Numeric field with stepper buttons over Base UI NumberField (clamp-on-blur,
+* step, `Intl` formatting via `format`). The vanilla bundle styles a native
+* `<input type="number">` and steps with `stepUp()` / `stepDown()`.
+*/
+function NumberInput({ size = "md", classNames, placeholder, inputAriaLabel, decrementLabel = "Decrease", incrementLabel = "Increase", decrementIcon, incrementIcon, className, ...rootProps }) {
+	return /* @__PURE__ */ jsx(NumberField.Root, {
+		className: cn("number-input-root", className),
+		...rootProps,
+		children: /* @__PURE__ */ jsxs(NumberField.Group, {
+			className: cn(["number-input", size !== "md" && `number-input-${size}`], classNames?.group),
+			children: [
+				/* @__PURE__ */ jsx(NumberField.Decrement, {
+					className: cn("number-input-step", classNames?.decrement),
+					"aria-label": decrementLabel,
+					children: decrementIcon ?? /* @__PURE__ */ jsx(MinusIcon, {})
+				}),
+				/* @__PURE__ */ jsx(NumberField.Input, {
+					className: cn("number-input-field", classNames?.input),
+					placeholder,
+					"aria-label": inputAriaLabel
+				}),
+				/* @__PURE__ */ jsx(NumberField.Increment, {
+					className: cn("number-input-step", classNames?.increment),
+					"aria-label": incrementLabel,
+					children: incrementIcon ?? /* @__PURE__ */ jsx(PlusIcon, {})
+				})
+			]
+		})
+	});
+}
+//#endregion
 //#region src/Indicator.tsx
-function Indicator({ label, variant = "neutral", size = "sm", icon, placement = "top-end", offset, className, "aria-label": ariaLabel, style: styleProp, children, ...rest }) {
+function Indicator({ label, variant = "neutral", size = "sm", icon, placement = "top-end", offset, max, className, "aria-label": ariaLabel, style: styleProp, children, ...rest }) {
 	const [vertical, horizontal] = placement.split("-");
 	const placementClasses = [
 		"indicator-item",
@@ -583,6 +876,7 @@ function Indicator({ label, variant = "neutral", size = "sm", icon, placement =
 		horizontal !== "end" && `indicator-${horizontal}`
 	];
 	const hasContent = label !== void 0 || icon !== void 0;
+	const displayLabel = typeof label === "number" && max !== void 0 && label > max ? `${max}+` : label;
 	const style = offset !== void 0 ? {
 		...styleProp,
 		"--indicator-offset": `${offset}px`
@@ -597,7 +891,7 @@ function Indicator({ label, variant = "neutral", size = "sm", icon, placement =
 			size,
 			icon,
 			"aria-label": ariaLabel,
-			children: label
+			children: displayLabel
 		}) : /* @__PURE__ */ jsx("span", {
 			className: cn([
 				...placementClasses,
@@ -626,6 +920,20 @@ function Link({ external, icon, iconTrailing, className, target, rel, children,
 	});
 }
 //#endregion
+//#region src/Separator.tsx
+/**
+* A styled `<hr>` (implicit `role="separator"`). Margins are zeroed — spacing
+* comes from the parent's gap or margin utilities.
+*/
+function Separator({ orientation = "horizontal", className, ...rest }) {
+	const vertical = orientation === "vertical";
+	return /* @__PURE__ */ jsx("hr", {
+		className: cn(["separator", vertical && "separator-vertical"], className),
+		"aria-orientation": vertical ? "vertical" : void 0,
+		...rest
+	});
+}
+//#endregion
 //#region src/Pagination.tsx
 /** Pure (safe during render): previous, numbers/ellipses (`boundaryCount` at each end, `siblingCount` around `page`), next. */
 function getPaginationItems({ page, total, siblingCount = 1, boundaryCount = 1 }) {
@@ -689,7 +997,7 @@ function range(start, end) {
 	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 }) {
+function Pagination({ page, total, onPageChange, siblingCount = 1, boundaryCount = 1, previousIcon, nextIcon, renderItem, className, classNames, "aria-label": ariaLabel = "Pagination", ...rest }) {
 	const items = getPaginationItems({
 		page,
 		total,
@@ -703,8 +1011,8 @@ function Pagination({ page, total, onPageChange, siblingCount = 1, boundaryCount
 		className: cn("pagination", className),
 		...rest,
 		children: /* @__PURE__ */ jsx("ul", { children: items.map((item, i) => /* @__PURE__ */ jsx("li", {
-			className: cn("page-item", void 0),
-			children: renderItem ? renderItem(item) : defaultRender(item, onPageChange, prev, next)
+			className: cn("page-item", classNames?.item),
+			children: renderItem ? renderItem(item) : defaultRender(item, onPageChange, prev, next, classNames)
 		}, paginationItemKey(item, i))) })
 	});
 }
@@ -745,11 +1053,11 @@ function paginationItemKey(item, index) {
 		default: return `${index}`;
 	}
 }
-function defaultRender(item, onPageChange, prev, next) {
+function defaultRender(item, onPageChange, prev, next, classNames) {
 	switch (item.type) {
 		case "previous": return /* @__PURE__ */ jsx("button", {
 			type: "button",
-			className: cn("page-link", void 0),
+			className: cn("page-link", classNames?.link),
 			"aria-label": "Previous page",
 			"aria-disabled": item.disabled || void 0,
 			disabled: item.disabled,
@@ -758,7 +1066,7 @@ function defaultRender(item, onPageChange, prev, next) {
 		});
 		case "next": return /* @__PURE__ */ jsx("button", {
 			type: "button",
-			className: cn("page-link", void 0),
+			className: cn("page-link", classNames?.link),
 			"aria-label": "Next page",
 			"aria-disabled": item.disabled || void 0,
 			disabled: item.disabled,
@@ -766,13 +1074,13 @@ function defaultRender(item, onPageChange, prev, next) {
 			children: next
 		});
 		case "ellipsis": return /* @__PURE__ */ jsx("span", {
-			className: cn("page-ellipsis", void 0),
+			className: cn("page-ellipsis", classNames?.ellipsis),
 			"aria-hidden": "true",
 			children: "…"
 		});
 		case "page": return /* @__PURE__ */ jsx("button", {
 			type: "button",
-			className: cn(["page-link", item.selected && "active"], void 0),
+			className: cn(["page-link", item.selected && "active"], classNames?.link),
 			"aria-current": item.selected ? "page" : void 0,
 			"aria-label": `Page ${item.page}`,
 			onClick: () => onPageChange(item.page),
@@ -805,7 +1113,7 @@ 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, {}) })
+		children: children ?? /* @__PURE__ */ jsx(CheckboxIndicator, { children: /* @__PURE__ */ jsx(CheckIcon$2, {}) })
 	});
 }
 function CheckboxIndicator({ className, ...rest }) {
@@ -814,7 +1122,7 @@ function CheckboxIndicator({ className, ...rest }) {
 		...rest
 	});
 }
-function CheckIcon$1() {
+function CheckIcon$2() {
 	return /* @__PURE__ */ jsx("svg", {
 		viewBox: "0 0 24 24",
 		fill: "none",
@@ -943,7 +1251,7 @@ function SelectItemIndicator({ className, children, ...rest }) {
 	return /* @__PURE__ */ jsx(Select$1.ItemIndicator, {
 		className: cn("select-item-indicator", className),
 		...rest,
-		children: children ?? /* @__PURE__ */ jsx(CheckIcon, {})
+		children: children ?? /* @__PURE__ */ jsx(CheckIcon$1, {})
 	});
 }
 function SelectGroup(props) {
@@ -955,7 +1263,7 @@ function SelectGroupLabel({ className, ...rest }) {
 		...rest
 	});
 }
-function CheckIcon() {
+function CheckIcon$1() {
 	return /* @__PURE__ */ jsx("svg", {
 		viewBox: "0 0 24 24",
 		fill: "none",
@@ -1017,13 +1325,14 @@ function Container({ size = "md", 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({ variant = "default", bordered, compact, className, ...rest }) {
+function CardContainer({ variant = "default", bordered, compact, scroll, className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: cn([
 			"card",
 			variant !== "default" && `card-${variant}`,
 			bordered && "card-bordered",
-			compact && "card-compact"
+			compact && "card-compact",
+			scroll && "card-scroll"
 		], className),
 		...rest
 	});
@@ -1033,23 +1342,48 @@ function CardContainer({ variant = "default", bordered, compact, className, ...r
 * an optional title (with icon), description, children, and actions. For
 * anything outside that shape, use `<Card.Container>` and compose by hand.
 */
-function CardRoot({ variant, bordered, compact, icon, title, description, toolbar, actions, className, children, ...rest }) {
+function CardRoot({ variant, bordered, compact, media, icon, title, description, toolbar, actions, className, classNames, children, ...rest }) {
 	const titleEl = icon !== void 0 || title !== void 0 ? /* @__PURE__ */ jsx(CardTitle, {
 		icon,
+		className: classNames?.title,
 		children: title
 	}) : null;
-	return /* @__PURE__ */ jsx(CardContainer, {
+	return /* @__PURE__ */ jsxs(CardContainer, {
 		variant,
 		bordered,
 		compact,
 		className,
 		...rest,
-		children: /* @__PURE__ */ jsxs(CardBody, { children: [
-			toolbar !== void 0 ? /* @__PURE__ */ jsxs(CardHeader, { children: [titleEl, /* @__PURE__ */ jsx(CardToolbar, { children: toolbar })] }) : titleEl,
-			description !== void 0 ? /* @__PURE__ */ jsx(CardDescription, { children: description }) : null,
-			children,
-			actions !== void 0 ? /* @__PURE__ */ jsx(CardActions, { children: actions }) : null
-		] })
+		children: [media !== void 0 ? /* @__PURE__ */ jsx(CardMedia, {
+			className: classNames?.media,
+			children: media
+		}) : null, /* @__PURE__ */ jsxs(CardBody, {
+			className: classNames?.body,
+			children: [
+				toolbar !== void 0 ? /* @__PURE__ */ jsxs(CardHeader, {
+					className: classNames?.header,
+					children: [titleEl, /* @__PURE__ */ jsx(CardToolbar, {
+						className: classNames?.toolbar,
+						children: toolbar
+					})]
+				}) : titleEl,
+				description !== void 0 ? /* @__PURE__ */ jsx(CardDescription, {
+					className: classNames?.description,
+					children: description
+				}) : null,
+				children,
+				actions !== void 0 ? /* @__PURE__ */ jsx(CardActions, {
+					className: classNames?.actions,
+					children: actions
+				}) : null
+			]
+		})]
+	});
+}
+function CardMedia({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("card-media", className),
+		...rest
 	});
 }
 function CardBody({ className, ...rest }) {
@@ -1091,6 +1425,7 @@ function CardActions({ className, ...rest }) {
 }
 var Card = Object.assign(CardRoot, {
 	Container: CardContainer,
+	Media: CardMedia,
 	Body: CardBody,
 	Header: CardHeader,
 	Toolbar: CardToolbar,
@@ -1100,12 +1435,17 @@ var Card = Object.assign(CardRoot, {
 });
 //#endregion
 //#region src/StatCard.tsx
+function trendIntent(direction) {
+	if (direction === "down") return "negative";
+	if (direction === "flat") return "neutral";
+	return "positive";
+}
 /**
 * Compact KPI tile (label / value / detail) on a `.card` shell, so it shares
 * every card modifier — `compact`/`bordered` map to `.card-compact`/`.card-bordered`.
 * Free-form tiles: `<Card>`; label/value tables: `<PropertyList>`.
 */
-function StatCard({ variant = "default", label, value, detail, icon, compact, bordered, className, children, ...rest }) {
+function StatCard({ variant = "default", label, value, detail, trend, icon, compact, bordered, className, classNames, children, ...rest }) {
 	const hasLabel = label !== void 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn([
@@ -1118,15 +1458,21 @@ function StatCard({ variant = "default", label, value, detail, icon, compact, bo
 		...rest,
 		children: [
 			hasLabel ? /* @__PURE__ */ jsxs("p", {
-				className: cn("stat-card-label", void 0),
+				className: cn("stat-card-label", classNames?.label),
 				children: [renderIcon(icon), label]
 			}) : null,
 			value !== void 0 ? /* @__PURE__ */ jsx("p", {
-				className: cn("stat-card-value", void 0),
+				className: cn("stat-card-value", classNames?.value),
 				children: value
 			}) : null,
+			trend !== void 0 ? /* @__PURE__ */ jsx("p", {
+				className: cn("stat-card-trend", classNames?.trend),
+				"data-trend": trend.direction ?? "up",
+				"data-intent": trend.intent ?? trendIntent(trend.direction ?? "up"),
+				children: trend.value
+			}) : null,
 			detail !== void 0 ? /* @__PURE__ */ jsx("p", {
-				className: cn("stat-card-detail", void 0),
+				className: cn("stat-card-detail", classNames?.detail),
 				children: detail
 			}) : null,
 			children
@@ -1134,6 +1480,137 @@ function StatCard({ variant = "default", label, value, detail, icon, compact, bo
 	});
 }
 //#endregion
+//#region src/Timeline.tsx
+function TimelineRoot({ numbered, className, ...rest }) {
+	return /* @__PURE__ */ jsx("ol", {
+		className: cn(["timeline", numbered && "timeline-numbered"], className),
+		...rest
+	});
+}
+function TimelineItem({ status = "default", icon, marker, title, time, description, className, classNames, children, ...rest }) {
+	let indicator;
+	if (marker !== void 0) indicator = /* @__PURE__ */ jsx("span", {
+		className: cn("timeline-marker", classNames?.marker),
+		children: marker
+	});
+	else if (icon != null) indicator = renderIcon(icon);
+	else indicator = /* @__PURE__ */ jsx("span", { className: cn("timeline-dot", classNames?.dot) });
+	return /* @__PURE__ */ jsxs("li", {
+		className: cn(["timeline-item", status !== "default" && `timeline-item-${status}`], className),
+		...rest,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("timeline-indicator", classNames?.indicator),
+			children: indicator
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cn("timeline-content", classNames?.content),
+			children: [
+				title !== void 0 ? /* @__PURE__ */ jsx("div", {
+					className: cn("timeline-title", classNames?.title),
+					children: title
+				}) : null,
+				time !== void 0 ? /* @__PURE__ */ jsx("div", {
+					className: cn("timeline-time", classNames?.time),
+					children: time
+				}) : null,
+				description !== void 0 ? /* @__PURE__ */ jsx("div", {
+					className: cn("timeline-description", classNames?.description),
+					children: description
+				}) : null,
+				children
+			]
+		})]
+	});
+}
+var Timeline = Object.assign(TimelineRoot, { Item: TimelineItem });
+//#endregion
+//#region src/Item.tsx
+/** The bare row primitive — just the `.item` shell, for layouts the default `<Item>` doesn't fit. */
+function ItemContainer({ variant = "default", size = "md", asLink, className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn([
+			"item",
+			variant !== "default" && `item-${variant}`,
+			size !== "md" && `item-${size}`,
+			asLink && "item-link"
+		], className),
+		...rest
+	});
+}
+function ItemMedia({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("item-media", className),
+		...rest
+	});
+}
+function ItemContent({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("item-content", className),
+		...rest
+	});
+}
+function ItemTitle({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("item-title", className),
+		...rest
+	});
+}
+function ItemDescription({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("item-description", className),
+		...rest
+	});
+}
+function ItemActions({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("item-actions", className),
+		...rest
+	});
+}
+/** Opinionated row with media / title+description / actions shorthand. For other shapes, compose `<Item.Container>`. */
+function ItemRoot({ media, icon, title, description, actions, classNames, children, ...rest }) {
+	const leading = media ?? renderIcon(icon);
+	const hasContent = title !== void 0 || description !== void 0;
+	return /* @__PURE__ */ jsxs(ItemContainer, {
+		...rest,
+		children: [
+			leading != null ? /* @__PURE__ */ jsx(ItemMedia, {
+				className: classNames?.media,
+				children: leading
+			}) : null,
+			hasContent ? /* @__PURE__ */ jsxs(ItemContent, {
+				className: classNames?.content,
+				children: [title !== void 0 ? /* @__PURE__ */ jsx(ItemTitle, {
+					className: classNames?.title,
+					children: title
+				}) : null, description !== void 0 ? /* @__PURE__ */ jsx(ItemDescription, {
+					className: classNames?.description,
+					children: description
+				}) : null]
+			}) : null,
+			children,
+			actions !== void 0 ? /* @__PURE__ */ jsx(ItemActions, {
+				className: classNames?.actions,
+				children: actions
+			}) : null
+		]
+	});
+}
+/** Divided vertical stack of items. */
+function ItemGroup({ bordered, className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(["item-group", bordered && "item-group-bordered"], className),
+		...rest
+	});
+}
+var Item = Object.assign(ItemRoot, {
+	Container: ItemContainer,
+	Media: ItemMedia,
+	Content: ItemContent,
+	Title: ItemTitle,
+	Description: ItemDescription,
+	Actions: ItemActions
+});
+//#endregion
 //#region src/chart-internal.ts
 /**
 * Multi-series palette of existing Flexoki tokens, not a new token layer. The
@@ -1377,24 +1854,15 @@ var StackedBar = Object.assign(StackedBarRoot, {
 	Legend: ChartLegend
 });
 //#endregion
-//#region src/Dialog.tsx
+//#region src/dialog-internal.ts
 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 — for layouts the default `<Dialog>` doesn't fit. */
-function DialogContainer({ open, onOpenChange, size = "md", closedby = "any", className, children, ref: consumerRef, ...rest }) {
+/**
+* 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;
@@ -1416,8 +1884,33 @@ function DialogContainer({ open, onOpenChange, size = "md", closedby = "any", cl
 		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: { close: () => ref.current?.close() },
+		value: ctx,
 		children: /* @__PURE__ */ jsx(PortalContainerContext.Provider, {
 			value: ref,
 			children: /* @__PURE__ */ jsx("dialog", {
@@ -1476,19 +1969,35 @@ function DialogCloseButton({ icon, className, children, onClick, type = "button"
 	});
 }
 /** 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", children, ...containerProps }) {
+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, { children: [hasTitle ? /* @__PURE__ */ jsx(DialogTitle, {
-				icon,
-				children: title
-			}) : /* @__PURE__ */ jsx("span", { className: cn("flex-1", void 0) }), dismissible ? /* @__PURE__ */ jsx(DialogCloseButton, { "aria-label": closeLabel }) : null] }) : null,
-			description !== void 0 ? /* @__PURE__ */ jsx(DialogDescription, { children: description }) : null,
-			children !== void 0 ? /* @__PURE__ */ jsx(DialogBody, { children }) : null,
-			actions !== void 0 ? /* @__PURE__ */ jsx(DialogFooter, { children: actions }) : null
+			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
 		]
 	});
 }
@@ -1502,6 +2011,73 @@ var Dialog = Object.assign(DialogRoot, {
 	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 }) {
+	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",
+					"drawer",
+					side !== "end" && `drawer-${side}`,
+					size !== "md" && `drawer-${size}`
+				], className),
+				closedby,
+				...rest,
+				children
+			})
+		})
+	});
+}
+/** Edge-anchored panel with shorthand-driven header/body/footer. For other shapes, compose `<Drawer.Container>`. */
+function DrawerRoot({ 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(DrawerContainer, {
+		...containerProps,
+		children: [
+			showHeader ? /* @__PURE__ */ jsxs(Dialog.Header, {
+				className: classNames?.header,
+				children: [hasTitle ? /* @__PURE__ */ jsx(Dialog.Title, {
+					icon,
+					className: classNames?.title,
+					children: title
+				}) : /* @__PURE__ */ jsx("span", { className: cn("flex-1", void 0) }), dismissible ? /* @__PURE__ */ jsx(Dialog.CloseButton, {
+					"aria-label": closeLabel,
+					className: classNames?.close
+				}) : null]
+			}) : null,
+			description !== void 0 ? /* @__PURE__ */ jsx(Dialog.Description, {
+				className: classNames?.description,
+				children: description
+			}) : null,
+			children !== void 0 ? /* @__PURE__ */ jsx(Dialog.Body, {
+				className: classNames?.body,
+				children
+			}) : null,
+			actions !== void 0 ? /* @__PURE__ */ jsx(Dialog.Footer, {
+				className: classNames?.footer,
+				children: actions
+			}) : null
+		]
+	});
+}
+/** Shares the Dialog header/body/footer subparts; only the container differs. */
+var Drawer = Object.assign(DrawerRoot, {
+	Container: DrawerContainer,
+	Header: Dialog.Header,
+	Title: Dialog.Title,
+	Description: Dialog.Description,
+	Body: Dialog.Body,
+	Footer: Dialog.Footer,
+	CloseButton: Dialog.CloseButton
+});
+//#endregion
 //#region src/Field.tsx
 /** The bare `.field` container — for layouts the default `<Field>` doesn't fit. */
 function FieldContainer({ className, ...rest }) {
@@ -1511,14 +2087,19 @@ function FieldContainer({ className, ...rest }) {
 	});
 }
 /** Standard field — label, control (`children`), description, error. For other shapes, compose `<Field.Container>` by hand. */
-function FieldRoot({ label, description, error, required, inline, className, children, ...rest }) {
+function FieldRoot({ label, description, error, required, inline, className, classNames, children, ...rest }) {
 	const labelEl = label !== void 0 ? /* @__PURE__ */ jsx(FieldLabel, {
 		required,
+		className: classNames?.label,
 		children: label
 	}) : null;
-	const descriptionEl = description !== void 0 ? /* @__PURE__ */ jsx(FieldDescription, { children: description }) : null;
+	const descriptionEl = description !== void 0 ? /* @__PURE__ */ jsx(FieldDescription, {
+		className: classNames?.description,
+		children: description
+	}) : null;
 	const errorEl = error !== void 0 ? /* @__PURE__ */ jsx(FieldError, {
 		match: true,
+		className: classNames?.error,
 		children: error
 	}) : null;
 	return /* @__PURE__ */ jsxs(FieldContainer, {
@@ -1609,17 +2190,41 @@ function MenuPopup({ className, role = "menu", ...rest }) {
 		...rest
 	});
 }
+function CheckIcon() {
+	return /* @__PURE__ */ jsx("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: "M5 12l5 5l10 -10" })
+	});
+}
+function MenuItemIndicator() {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("menu-item-indicator", void 0),
+		children: /* @__PURE__ */ jsx(CheckIcon, {})
+	});
+}
 function MenuItem(props) {
 	const ref = useRef(null);
 	const hotkey = props.hotkey;
+	const checked = props.checked;
 	const ariaDisabled = props["aria-disabled"];
 	const isDisabled = "disabled" in props && props.disabled === true || ariaDisabled === true || ariaDisabled === "true";
 	const { ariaKeyShortcuts, primaryChord } = useHotkey(hotkey, () => ref.current?.click(), { enabled: !isDisabled });
+	const leading = checked !== void 0 ? /* @__PURE__ */ jsx(MenuItemIndicator, {}) : renderIcon(props.icon);
+	const defaultRole = checked !== void 0 ? "menuitemcheckbox" : "menuitem";
 	if (props.href !== void 0) {
-		const { className, role = "menuitem", icon, children, hotkey: _hk, onClick, ...rest } = props;
+		const { className, role, icon: _icon, checked: _checked, children, hotkey: _hk, onClick, ...rest } = props;
 		return /* @__PURE__ */ jsxs("a", {
 			ref,
-			role,
+			role: role ?? defaultRole,
+			"aria-checked": checked,
 			"aria-keyshortcuts": ariaKeyShortcuts,
 			className: cn("menu-item", className),
 			onClick: (event) => {
@@ -1631,22 +2236,23 @@ function MenuItem(props) {
 			},
 			...rest,
 			children: [
-				renderIcon(icon),
+				leading,
 				children,
 				primaryChord !== void 0 ? /* @__PURE__ */ jsx(Kbd, { keys: primaryChord }) : null
 			]
 		});
 	}
-	const { className, type = "button", role = "menuitem", icon, children, hotkey: _hk, ...rest } = props;
+	const { className, type = "button", role, icon: _icon, checked: _checked, children, hotkey: _hk, ...rest } = props;
 	return /* @__PURE__ */ jsxs("button", {
 		ref,
 		type,
-		role,
+		role: role ?? defaultRole,
+		"aria-checked": checked,
 		"aria-keyshortcuts": ariaKeyShortcuts,
 		className: cn("menu-item", className),
 		...rest,
 		children: [
-			renderIcon(icon),
+			leading,
 			children,
 			primaryChord !== void 0 ? /* @__PURE__ */ jsx(Kbd, { keys: primaryChord }) : null
 		]
@@ -1833,7 +2439,7 @@ function TooltipPopup({ size = "md", side = "top", align = "center", sideOffset
 		})
 	});
 }
-function TooltipShorthand({ content, side, align, sideOffset, size, children, ...rootProps }) {
+function TooltipShorthand({ content, side, align, sideOffset, size, classNames, children, ...rootProps }) {
 	return /* @__PURE__ */ jsxs(TooltipRoot, {
 		...rootProps,
 		children: [/* @__PURE__ */ jsx(Tooltip$1.Trigger, { render: children }), /* @__PURE__ */ jsx(TooltipPopup, {
@@ -1841,6 +2447,7 @@ function TooltipShorthand({ content, side, align, sideOffset, size, children, ..
 			align,
 			sideOffset,
 			size,
+			className: classNames?.popup,
 			children: content
 		})]
 	});
@@ -1885,7 +2492,7 @@ function CheckGlyph({ className }) {
 		children: /* @__PURE__ */ jsx("path", { d: "M5 12l5 5l10 -10" })
 	});
 }
-function PropertyListRoot({ striped, compact, hideIfAllEmpty, title, className, children, ...rest }) {
+function PropertyListRoot({ striped, compact, hideIfAllEmpty, title, className, classNames, children, ...rest }) {
 	return /* @__PURE__ */ jsxs("section", {
 		className: cn([
 			"property-list",
@@ -1895,10 +2502,10 @@ function PropertyListRoot({ striped, compact, hideIfAllEmpty, title, className,
 		], className),
 		...rest,
 		children: [title !== void 0 ? /* @__PURE__ */ jsx("h3", {
-			className: cn("property-list-title", void 0),
+			className: cn("property-list-title", classNames?.title),
 			children: title
 		}) : null, /* @__PURE__ */ jsx("dl", {
-			className: cn("property-list-items", void 0),
+			className: cn("property-list-items", classNames?.items),
 			children
 		})]
 	});
@@ -1908,14 +2515,18 @@ function isEmptyValue(value) {
 	if (typeof value === "string") return value.trim() === "";
 	return false;
 }
-function PropertyListItem({ label, value, numeric, copyable, copyValue, children, ...rest }) {
+function PropertyListItem({ label, value, numeric, copyable, copyValue, classNames, children, ...rest }) {
 	if (children !== void 0) return /* @__PURE__ */ jsx(Fragment, { children });
 	const empty = isEmptyValue(value);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PropertyListLabel, { children: label }), /* @__PURE__ */ jsx(PropertyListValue, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PropertyListLabel, {
+		className: classNames?.label,
+		children: label
+	}), /* @__PURE__ */ jsx(PropertyListValue, {
 		numeric,
 		copyable,
 		empty,
 		copyValue: copyValue ?? (typeof value === "string" ? value : void 0),
+		classNames: classNames?.copy ? { copy: classNames.copy } : void 0,
 		...rest,
 		children: empty ? "—" : value
 	})] });
@@ -1926,7 +2537,7 @@ function PropertyListLabel({ className, ...rest }) {
 		...rest
 	});
 }
-function PropertyListValue({ numeric, copyable, empty, copyValue, className, children, ...rest }) {
+function PropertyListValue({ numeric, copyable, empty, copyValue, className, classNames, children, ...rest }) {
 	const ddRef = useRef(null);
 	const [copied, setCopied] = useState(false);
 	async function handleCopy() {
@@ -1950,7 +2561,7 @@ function PropertyListValue({ numeric, copyable, empty, copyValue, className, chi
 		children: [children, /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			"aria-label": "Copy",
-			className: cn("property-list-copy", void 0),
+			className: cn("property-list-copy", classNames?.copy),
 			onClick: handleCopy,
 			"data-copied": copied ? "true" : void 0,
 			children: [/* @__PURE__ */ jsx(CopyGlyph, { className: cn("property-list-copy-icon", void 0) }), /* @__PURE__ */ jsx(CheckGlyph, { className: cn("property-list-copy-icon-copied", void 0) })]
@@ -1964,14 +2575,17 @@ var PropertyList = Object.assign(PropertyListRoot, {
 });
 //#endregion
 //#region src/Table.tsx
-function TableRoot({ striped, bordered, relaxed, sticky, className, ...rest }) {
+function TableRoot({ striped, bordered, density, relaxed, sticky, pinCol, className, ...rest }) {
+	const resolvedDensity = density ?? (relaxed ? "relaxed" : "default");
 	return /* @__PURE__ */ jsx("table", {
 		className: cn([
 			"table",
 			striped && "table-striped",
 			bordered && "table-bordered",
-			relaxed && "table-relaxed",
-			sticky && "table-sticky"
+			resolvedDensity === "compact" && "table-compact",
+			resolvedDensity === "relaxed" && "table-relaxed",
+			sticky && "table-sticky",
+			pinCol && "table-pin-col"
 		], className),
 		...rest
 	});
@@ -1988,6 +2602,7 @@ function TableBody({ className, ...rest }) {
 		...rest
 	});
 }
+/** Footer rows are semibold by default; the first row gets a strong top divider against the body. */
 function TableFoot({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("tfoot", {
 		className,
@@ -2020,18 +2635,28 @@ function TableCell({ align, gutter, numeric, className, ...rest }) {
 		...rest
 	});
 }
+/** A centered "no results" row; renders its own `<tr>`, so drop it inside `<Table.Body>`. */
+function TableEmpty({ colSpan, className, children, ...rest }) {
+	return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+		className: cn("table-empty", className),
+		colSpan,
+		...rest,
+		children
+	}) });
+}
 var Table = Object.assign(TableRoot, {
 	Head: TableHead,
 	Body: TableBody,
 	Foot: TableFoot,
 	Row: TableRow,
 	HeaderCell: TableHeaderCell,
-	Cell: TableCell
+	Cell: TableCell,
+	Empty: TableEmpty
 });
 //#endregion
 //#region src/Sidebar.tsx
 var SidebarContext = createContext(null);
-function SidebarRoot({ collapsed, defaultCollapsed, onCollapsedChange, drawerLabel = "Navigation", className, children, ...rest }) {
+function SidebarRoot({ collapsed, defaultCollapsed, onCollapsedChange, drawerLabel = "Navigation", className, classNames, children, ...rest }) {
 	const shell = useAppShell();
 	const drawerOpen = shell?.mobileDrawerOpen ?? false;
 	return /* @__PURE__ */ jsxs(SidebarContext.Provider, {
@@ -2047,8 +2672,8 @@ function SidebarRoot({ collapsed, defaultCollapsed, onCollapsedChange, drawerLab
 		}), 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: cn("sidebar-drawer-backdrop", void 0) }), /* @__PURE__ */ jsx(Dialog$1.Popup, {
-				className: cn("sidebar-drawer", void 0),
+			children: /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [/* @__PURE__ */ jsx(Dialog$1.Backdrop, { className: cn("sidebar-drawer-backdrop", classNames?.drawerBackdrop) }), /* @__PURE__ */ jsx(Dialog$1.Popup, {
+				className: cn("sidebar-drawer", classNames?.drawer),
 				"aria-label": drawerLabel,
 				onClick: (event) => {
 					if (event.target.closest("a, [data-drawer-close]")) shell.setMobileDrawerOpen(false);
@@ -2082,15 +2707,24 @@ function SidebarGroupLabel({ className, ...rest }) {
 		...rest
 	});
 }
-function SidebarItem({ active, icon, badge, className, children, ...rest }) {
+function SidebarItem({ active, icon, badge, className, classNames, children, ...rest }) {
 	return /* @__PURE__ */ jsxs("a", {
 		className: cn("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
+			icon != null ? /* @__PURE__ */ jsx(SidebarIcon, {
+				className: classNames?.icon,
+				children: renderIcon(icon)
+			}) : null,
+			children !== void 0 ? /* @__PURE__ */ jsx(SidebarLabel, {
+				className: classNames?.label,
+				children
+			}) : null,
+			badge !== void 0 ? /* @__PURE__ */ jsx(SidebarBadge, {
+				className: classNames?.badge,
+				children: badge
+			}) : null
 		]
 	});
 }
@@ -2113,11 +2747,17 @@ function SidebarBadge({ className, ...rest }) {
 		...rest
 	});
 }
-function SidebarCollapsible({ icon, label, trigger, children, className, open, defaultOpen, onOpenChange, ...rest }) {
+function SidebarCollapsible({ icon, label, trigger, children, className, classNames, 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] });
+	const triggerContent = trigger ?? /* @__PURE__ */ jsxs(Fragment, { children: [icon != null ? /* @__PURE__ */ jsx(SidebarIcon, {
+		className: classNames?.icon,
+		children: renderIcon(icon)
+	}) : null, label !== void 0 ? /* @__PURE__ */ jsx(SidebarLabel, {
+		className: classNames?.label,
+		children: label
+	}) : null] });
 	return /* @__PURE__ */ jsxs("details", {
 		className: cn("sidebar-collapsible", className),
 		open: isOpen,
@@ -2128,23 +2768,29 @@ function SidebarCollapsible({ icon, label, trigger, children, className, open, d
 		},
 		...rest,
 		children: [/* @__PURE__ */ jsx("summary", {
-			className: cn("sidebar-collapsible-trigger", void 0),
+			className: cn("sidebar-collapsible-trigger", classNames?.trigger),
 			children: triggerContent
 		}), /* @__PURE__ */ jsx("div", {
-			className: cn("sidebar-collapsible-panel", void 0),
+			className: cn("sidebar-collapsible-panel", classNames?.panel),
 			children
 		})]
 	});
 }
-function SidebarSubItem({ active, icon, badge, className, children, ...rest }) {
+function SidebarSubItem({ active, icon, badge, className, classNames, children, ...rest }) {
 	return /* @__PURE__ */ jsxs("a", {
 		className: cn("sidebar-subitem", className),
 		"aria-current": active ? "page" : void 0,
 		...rest,
 		children: [
-			icon != null ? /* @__PURE__ */ jsx(SidebarIcon, { children: renderIcon(icon) }) : null,
+			icon != null ? /* @__PURE__ */ jsx(SidebarIcon, {
+				className: classNames?.icon,
+				children: renderIcon(icon)
+			}) : null,
 			children,
-			badge !== void 0 ? /* @__PURE__ */ jsx(SidebarBadge, { children: badge }) : null
+			badge !== void 0 ? /* @__PURE__ */ jsx(SidebarBadge, {
+				className: classNames?.badge,
+				children: badge
+			}) : null
 		]
 	});
 }
@@ -2154,7 +2800,7 @@ function SidebarFooter({ className, ...rest }) {
 		...rest
 	});
 }
-function SidebarCollapseToggle({ label = "Toggle sidebar", className, children, ...rest }) {
+function SidebarCollapseToggle({ label = "Toggle sidebar", className, classNames, children, ...rest }) {
 	const ctx = useContext(SidebarContext);
 	const controlledChecked = ctx?.collapsed;
 	const isControlled = controlledChecked !== void 0;
@@ -2164,7 +2810,7 @@ function SidebarCollapseToggle({ label = "Toggle sidebar", className, children,
 		children: [
 			/* @__PURE__ */ jsx("input", {
 				type: "checkbox",
-				className: cn("sidebar-toggle", void 0),
+				className: cn("sidebar-toggle", classNames?.input),
 				"aria-label": label,
 				...isControlled ? { checked: controlledChecked } : { defaultChecked: ctx?.defaultCollapsed },
 				onChange: (event) => ctx?.onCollapsedChange?.(event.currentTarget.checked)
@@ -2192,6 +2838,6 @@ var Sidebar = Object.assign(SidebarRoot, {
 	CollapseToggle: SidebarCollapseToggle
 });
 //#endregion
-export { Accordion, AdminRoot, Alert, AppShell, Badge, BarChart, BrandTile, Breadcrumbs, Button, ButtonGroup, Card, ChartLegend, Checkbox, CodeBlock, Container, Dialog, Donut, Field, FileInput, Footer, Indicator, Input, InputGroup, Kbd, Link, Menu, Navbar, Pagination, Progress, PropertyList, Prose, Radio, RadioGroup, SERIES, Select, Sidebar, Spinner, StackedBar, StatCard, Switch, Table, Tabs, Textarea, 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, Tooltip, getPaginationItems, useAppShell, useHotkey };
 
 //# sourceMappingURL=index.mjs.map