@aortl/admin-react 0.16.1 → 0.17.0

package/dist/index.mjs

@@ -1,6 +1,7 @@
 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 { Field as Field$1 } from "@base-ui/react/field";
@@ -14,10 +15,9 @@ import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 //#region src/cn.ts
 /**
-* Every admin class name is prefixed so the bundle can coexist with a host
-* page's CSS without colliding on common names like `.btn` or `.card`. The
-* matching CSS lives in `@aortl/admin-css/admin.scoped.css` (built by
-* `wrap-scoped.mjs`), which carries the same prefix on every selector.
+* Every admin class is prefixed so the bundle coexists with host-page CSS
+* without colliding on common names like `.btn`. Must match the selector
+* prefix `wrap-scoped.mjs` bakes into `@aortl/admin-css/admin.scoped.css`.
 */
 var PREFIX = "_ao-";
 function prefixTokens(value) {
@@ -66,14 +66,11 @@ var Accordion = Object.assign(AccordionRoot, {
 //#endregion
 //#region src/portal-context.ts
 /**
-* Container that Base UI popups (Select, Tooltip, etc.) should portal into.
-* `<AdminRoot>` publishes its own element here so popups render inside the
-* scoped subtree and match the `@scope (._ao-admin-root)` CSS — without it
-* they portal to `document.body`, outside the scope, and render unstyled. A
-* `<Dialog>` ancestor overrides it with its own `<dialog>` element so popups
-* join the top layer, painting above the backdrop and escaping its
-* `overflow: hidden`. With no provider the context is null and popups fall
-* back to `document.body`.
+* Container Base UI popups portal into. `<AdminRoot>` publishes its element so
+* popups stay inside the `@scope (._ao-admin-root)` subtree — portaled to
+* `document.body` they fall outside the scope and render unstyled. A `<Dialog>`
+* ancestor overrides it with its `<dialog>` so popups join the top layer above
+* the backdrop. Null falls back to `document.body`.
 */
 var PortalContainerContext = createContext(null);
 //#endregion
@@ -103,14 +100,9 @@ function AdminRoot({ className, theme, systemAccent, style, ref, ...rest }) {
 //#endregion
 //#region src/icon.ts
 /**
-* Render an `IconProp` to a React node, defaulting to `size="1em" aria-hidden`
-* when given a component reference. The `"1em"` default makes SVG icons inherit
-* the host's `font-size`, matching how the Tabler webfont (`<i class="ti …">`)
-* renders in the vanilla bundle — so both previews end up the same size.
-*
-* Anything that is not `null`/`undefined` and not already a React element is
-* treated as a component type — `createElement` accepts function components,
-* `forwardRef`s (e.g. `@tabler/icons-react`), `memo`, etc.
+* Render an `IconProp`, defaulting component references to `size="1em"
+* aria-hidden`. `"1em"` makes SVG icons inherit the host `font-size`, matching
+* the Tabler webfont in the vanilla bundle.
 */
 function renderIcon(icon, size = "1em") {
 	if (icon == null) return null;
@@ -122,7 +114,7 @@ function renderIcon(icon, size = "1em") {
 }
 //#endregion
 //#region src/Alert.tsx
-function AlertRoot({ variant, icon, title, description, className, role, children, ...rest }) {
+function AlertRoot({ variant, icon, title, description, action, className, role, children, ...rest }) {
 	return /* @__PURE__ */ jsxs("div", {
 		role: role ?? (variant === "danger" || variant === "warning" ? "alert" : "status"),
 		className: cn(["alert", `alert-${variant}`], className),
@@ -131,7 +123,8 @@ function AlertRoot({ variant, icon, title, description, className, role, childre
 			renderIcon(icon),
 			title !== void 0 ? /* @__PURE__ */ jsx(AlertTitle, { children: title }) : null,
 			description !== void 0 ? /* @__PURE__ */ jsx(AlertDescription, { children: description }) : null,
-			children
+			children,
+			action !== void 0 ? /* @__PURE__ */ jsx(AlertAction, { children: action }) : null
 		]
 	});
 }
@@ -147,9 +140,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
@@ -197,25 +197,97 @@ 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. */
+function AvatarGroup({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("avatar-group", className),
+		...rest
 	});
 }
 //#endregion
@@ -226,12 +298,6 @@ var MOD_ORDER = [
 	"alt",
 	"meta"
 ];
-/**
-* Resolve the modifier `mod` aliases to. Apple platforms use ⌘ (`meta`) as the
-* primary command modifier; everywhere else it's Ctrl. Detected once at module
-* load (SSR-safe — the registry never dispatches server-side) and shared by the
-* parse and display layers so the binding and its `<Kbd>` chip always agree.
-*/
 function detectApplePlatform() {
 	if (typeof navigator === "undefined") return false;
 	const platform = navigator.userAgentData?.platform || navigator.platform || "";
@@ -280,11 +346,7 @@ function canonicalize(chord) {
 	parts.push(chord.key);
 	return parts.join("+");
 }
-/**
-* Normalize a keyboard event to its canonical chord string. Returns `null`
-* if the event is a bare modifier press (`Shift` by itself, etc.) so callers
-* can short-circuit before a map lookup.
-*/
+/** Canonical chord string for a keyboard event; `null` for a bare modifier press. */
 function normalizeEvent(e) {
 	const key = e.key.toLowerCase();
 	if (key === "control" || key === "shift" || key === "alt" || key === "meta") return null;
@@ -298,7 +360,6 @@ function normalizeEvent(e) {
 		key
 	});
 }
-/** A single printable symbol (`?`, `+`, `:`, …) — not a letter, digit, or named key. */
 function isShiftedSymbol(key) {
 	return key.length === 1 && !/[a-z0-9]/.test(key);
 }
@@ -350,26 +411,13 @@ function toAriaPart(chord) {
 	parts.push(chord.key.length === 1 ? chord.key.toUpperCase() : chord.key);
 	return parts.join("+");
 }
-/**
-* Serialize one or more chords to the `aria-keyshortcuts` format
-* (space-separated alternatives, modifiers as `Control`/`Shift`/etc.).
-*/
+/** Serialize chords to `aria-keyshortcuts` format (space-separated alternatives). */
 function toAriaKeyShortcuts(chords) {
 	return chords.map(toAriaPart).join(" ");
 }
 //#endregion
 //#region src/Kbd.tsx
-/**
-* Visual representation of a keyboard shortcut. Two shapes:
-*
-* ```tsx
-* <Kbd keys="mod+s" />     // parsed: <Ctrl><S> in a .kbd-group
-* <Kbd>Esc</Kbd>           // literal: single <kbd>Esc</kbd>
-* ```
-*
-* Render outside of action surfaces (tooltips, help dialogs) or inside them
-* via the `hotkey` prop on `<Button>` / `<Menu.Item>`.
-*/
+/** Keyboard shortcut chips — parsed via `keys`, or a single literal chip via `children`. */
 function Kbd({ keys, children, className, ...rest }) {
 	if (keys != null) {
 		const chord = parseKeys(keys)[0];
@@ -421,11 +469,7 @@ function dispatch(e) {
 	e.preventDefault();
 	for (const entry of bucket) entry.handlerRef.current?.(e);
 }
-/**
-* Register a hotkey entry under each of its canonical chord strings.
-* Returns an unregister function that removes the entry from every bucket
-* and detaches the listener if the registry is empty.
-*/
+/** Returns an unregister function. */
 function register(canonicalChords, entry) {
 	for (const chord of canonicalChords) {
 		let bucket = registry.get(chord);
@@ -449,16 +493,9 @@ function register(canonicalChords, entry) {
 //#endregion
 //#region src/useHotkey.ts
 /**
-* Register a keyboard shortcut. The handler is latched in a ref internally so
-* callers don't need to memoize it. Passing nullish `keys` is a no-op, so
-* the hook is safe to call unconditionally from components that may or may
-* not have a binding (e.g. the `hotkey` prop on `<Button>`).
-*
-* @example
-*   useHotkey("mod+s", save);
-*   useHotkey(["mod+s", "mod+enter"], save, { enabled: !isLoading });
-*
-* Returns derived strings for rendering — see {@link HotkeyInfo}.
+* Register a keyboard shortcut, e.g. `useHotkey("mod+s", save)`. The handler
+* is latched in a ref, so callers need not memoize it. Nullish `keys` is a
+* no-op, so the hook is safe to call unconditionally.
 */
 function useHotkey(keys, handler, options) {
 	const enabled = options?.enabled ?? true;
@@ -578,8 +615,8 @@ 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 Input({ variant = "bordered", inputSize = "md", icon, iconTrailing, className, type = "text", ...rest }) {
+	const input = /* @__PURE__ */ jsx(Input$1, {
 		type,
 		className: cn([
 			"input",
@@ -588,6 +625,15 @@ function Input({ variant = "bordered", inputSize = "md", className, type = "text
 		], className),
 		...rest
 	});
+	if (icon == null && iconTrailing == null) return input;
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("input-icon", void 0),
+		children: [
+			renderIcon(icon),
+			input,
+			renderIcon(iconTrailing)
+		]
+	});
 }
 //#endregion
 //#region src/FileInput.tsx
@@ -655,11 +701,7 @@ function Indicator({ label, variant = "neutral", size = "sm", icon, placement =
 }
 //#endregion
 //#region src/Link.tsx
-/**
-* A text link — a plain `<a>` with the design system's link styling: primary
-* color, hover shift, underline, and a focus-visible ring. Pass `external` for
-* the new-tab affordance.
-*/
+/** A plain `<a>` with the design system's link styling. */
 function Link({ external, icon, iconTrailing, className, target, rel, children, ...rest }) {
 	return /* @__PURE__ */ jsxs("a", {
 		target: target ?? (external ? "_blank" : void 0),
@@ -674,13 +716,22 @@ function Link({ external, icon, iconTrailing, className, target, rel, children,
 	});
 }
 //#endregion
-//#region src/Pagination.tsx
+//#region src/Separator.tsx
 /**
-* Compute the items to render for a given `page` / `total`. Always returns:
-*   previous, ...numbers/ellipses, next
-* with `boundaryCount` items on each end and `siblingCount` items around `page`.
-* Pure: no React state, safe to call during render.
+* 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 }) {
 	if (total <= 0) return [{
 		type: "previous",
@@ -836,11 +887,9 @@ function defaultRender(item, onPageChange, prev, next) {
 //#endregion
 //#region src/Textarea.tsx
 /**
-* Multi-line text input. Rendered through Base UI's `Field.Control` with a
-* `<textarea>` swapped in for the default `<input>`, so inside a `<Field>` it
-* gets the same wiring as `<Input>`: a generated id, label `htmlFor`
-* association, and validity-driven `:user-valid` / `<Field.Error>`. Works
-* standalone too — `Field.Control` falls back to a default context.
+* Multi-line input via Base UI `Field.Control` with a `<textarea>` swapped in,
+* so inside a `<Field>` it gets the same wiring as `<Input>` (generated id,
+* label association, validity). Works standalone via the default context.
 */
 function Textarea({ variant = "bordered", textareaSize = "md", autoResize, className, ...rest }) {
 	return /* @__PURE__ */ jsx(Field$1.Control, {
@@ -1052,10 +1101,9 @@ var Select = Object.assign(SelectRoot, {
 //#endregion
 //#region src/Container.tsx
 /**
-* Page content region: a centered, max-width column that also owns the
-* vertical gap between stacked sections. Place inside `<AppShell.Main>`,
-* which provides no padding of its own. Distinct from the `.Container`
-* escape hatch (e.g. `Card.Container`) — this is a standalone page region.
+* Page content region: a centered, max-width column that owns the vertical
+* 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 }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -1073,13 +1121,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
 	});
@@ -1089,23 +1138,29 @@ 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, children, ...rest }) {
 	const titleEl = icon !== void 0 || title !== void 0 ? /* @__PURE__ */ jsx(CardTitle, {
 		icon,
 		children: title
 	}) : null;
-	return /* @__PURE__ */ jsx(CardContainer, {
+	return /* @__PURE__ */ jsxs(CardContainer, {
 		variant,
 		bordered,
 		compact,
 		className,
 		...rest,
-		children: /* @__PURE__ */ jsxs(CardBody, { children: [
+		children: [media !== void 0 ? /* @__PURE__ */ jsx(CardMedia, { children: media }) : null, /* @__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
-		] })
+		] })]
+	});
+}
+function CardMedia({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("card-media", className),
+		...rest
 	});
 }
 function CardBody({ className, ...rest }) {
@@ -1147,6 +1202,7 @@ function CardActions({ className, ...rest }) {
 }
 var Card = Object.assign(CardRoot, {
 	Container: CardContainer,
+	Media: CardMedia,
 	Body: CardBody,
 	Header: CardHeader,
 	Toolbar: CardToolbar,
@@ -1157,12 +1213,9 @@ var Card = Object.assign(CardRoot, {
 //#endregion
 //#region src/StatCard.tsx
 /**
-* Compact KPI tile — `label / value / detail`. Renders a `.card` shell (so it
-* shares the surface, border, radius, shadow, and every card modifier) with an
-* inverted inner hierarchy: the value dominates, the label is a small
-* annotation. `compact`/`bordered` map to the shared `.card-compact`/
-* `.card-bordered` modifiers. For free-form tiles, use `<Card>`; for
-* label/value tables, use `<PropertyList>`.
+* 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 }) {
 	const hasLabel = label !== void 0;
@@ -1195,11 +1248,8 @@ function StatCard({ variant = "default", label, value, detail, icon, compact, bo
 //#endregion
 //#region src/chart-internal.ts
 /**
-* Multi-series palette — references EXISTING Flexoki palette tokens, NOT a new
-* token layer. Cycled by index (`SERIES[i % len]`); a datum's own `color`
-* overrides. Vanilla authors copy the same sequence (it's documented), so both
-* bundles render identical colours. Single-series charts ignore this entirely
-* and follow `currentColor`.
+* Multi-series palette of existing Flexoki tokens, not a new token layer. The
+* documented vanilla sequence copies this exactly — both bundles must match.
 */
 var SERIES = [
 	"var(--color-blue-500)",
@@ -1211,7 +1261,6 @@ var SERIES = [
 	"var(--color-yellow-500)",
 	"var(--color-red-400)"
 ];
-/** Resolve a segment's colour: explicit `datum.color` wins, else cycle SERIES. */
 function seriesColor(datum, index) {
 	return datum.color ?? SERIES[index % SERIES.length];
 }
@@ -1220,11 +1269,7 @@ function computeMax(data, explicit) {
 	if (explicit !== void 0) return explicit;
 	return Math.max(1, ...data.map((d) => d.value));
 }
-/**
-* Build the cumulative `conic-gradient` stop string for a donut/pie:
-* `<color> <from>deg <to>deg, …`. Degrees accumulate across segments. A
-* non-positive total yields a single neutral fill so the ring isn't blank.
-*/
+/** Cumulative `conic-gradient` stops. A non-positive total yields a neutral fill so the ring isn't blank. */
 function buildDonutSegments(data) {
 	const total = data.reduce((sum, d) => sum + Math.max(0, d.value), 0);
 	if (total <= 0) return "var(--color-surface-strong) 0 100%";
@@ -1245,10 +1290,7 @@ var TYPE_NOUN = {
 	donut: "Donut chart",
 	pie: "Pie chart"
 };
-/**
-* Auto-generated summary for the chart root's `aria-label`. Callers that pass
-* their own `aria-label` skip this. Example: "Bar chart. Mon: 80, Tue: 52."
-*/
+/** Chart-root `aria-label` summary, e.g. "Bar chart. Mon: 80, Tue: 52." */
 function buildAriaLabel(type, data) {
 	const parts = data.map((d) => d.label !== void 0 ? `${d.label}: ${d.value}` : `${d.value}`);
 	return `${TYPE_NOUN[type]}. ${parts.join(", ")}.`;
@@ -1266,10 +1308,7 @@ function mergeStyle(vars, incoming) {
 }
 //#endregion
 //#region src/BarChart.tsx
-/**
-* The bare bar-chart grid — no bars. Compose `<BarChart.Bar>` children by hand
-* (e.g. to interleave a reference line). Sets `role="img"`; pass `aria-label`.
-*/
+/** Bare grid, no bars — compose `<BarChart.Bar>` by hand. Sets `role="img"`; pass `aria-label`. */
 function BarChartContainer({ orientation = "horizontal", size = "md", showValues, inline, variant = "info", className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
 		role: "img",
@@ -1286,10 +1325,8 @@ function BarChartContainer({ orientation = "horizontal", size = "md", showValues
 	});
 }
 /**
-* One bar. Renders a label (only when present), the fill (with a native
-* `title`), and an always-present value cell (hidden by CSS unless the chart
-* carries `.chart-values`). Stays `currentColor` unless an explicit colour is
-* given — single-series bars never cycle the SERIES palette.
+* One bar. The value cell always renders (CSS hides it without `.chart-values`);
+* fill stays `currentColor` — single-series bars never cycle SERIES.
 */
 function Bar({ datum, value, label, color, className, style, ...rest }) {
 	const v = datum?.value ?? value ?? 0;
@@ -1321,12 +1358,7 @@ function Bar({ datum, value, label, color, className, style, ...rest }) {
 		]
 	});
 }
-/**
-* Single-series bar chart. Computes the max, sets `--chart-max` on the
-* container (bars inherit it), and generates an overridable `aria-label`.
-* Horizontal by default; pass `orientation="vertical"` for columns. For
-* hand-composed layouts use `<BarChart.Container>` + `<BarChart.Bar>`.
-*/
+/** 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 }) {
 	return /* @__PURE__ */ jsx(BarChartContainer, {
 		orientation,
@@ -1347,11 +1379,8 @@ var BarChart = Object.assign(BarChartRoot, {
 //#endregion
 //#region src/ChartLegend.tsx
 /**
-* Shared legend for `<Donut>` and `<StackedBar>` — one swatch + label per
-* datum. Each row carries its own `title`, which is where the donut's
-* per-slice read-out lives (a conic-gradient slice has no element to hang a
-* `title` on). The swatch colour mirrors `seriesColor`, so legend and chart
-* stay in sync.
+* Each row's `title` carries the donut's per-slice read-out — a conic-gradient
+* slice has no element to hang a `title` on.
 */
 function ChartLegend({ data, className, ...rest }) {
 	return /* @__PURE__ */ jsx("ul", {
@@ -1374,7 +1403,7 @@ function Figure({ size = "md", className, ...rest }) {
 		...rest
 	});
 }
-/** The masked conic-gradient ring. Builds `--donut-segments` from the data. */
+/** The masked conic-gradient ring. */
 function Ring({ data, pie, thickness, className, style, ...rest }) {
 	const vars = { "--donut-segments": buildDonutSegments(data) };
 	if (thickness !== void 0 && !pie) vars["--donut-thickness"] = thickness;
@@ -1392,11 +1421,9 @@ function Center({ className, ...rest }) {
 	});
 }
 /**
-* Donut (or `pie`) breakdown. Builds the cumulative conic-gradient string from
-* `data`, overlays an optional `centerLabel`, and generates an overridable
-* `aria-label`. Per-slice read-outs live on the optional `legend` rows — a
-* conic slice has no element to carry a `title`. Resize by overriding
-* `--chart-size` (it inherits to the figure) or via `size`.
+* Donut (or `pie`) breakdown. Per-slice read-outs live on the `legend` rows —
+* a conic slice has no element to carry a `title`. Resize via `size` or
+* `--chart-size`.
 */
 function DonutRoot({ data, size = "md", thickness, pie, centerLabel, legend, inline, className, "aria-label": ariaLabel, ...rest }) {
 	return /* @__PURE__ */ jsxs("div", {
@@ -1429,10 +1456,7 @@ function Track({ className, ...rest }) {
 		...rest
 	});
 }
-/**
-* One proportion segment, sized by `flex: var(--value)`. Multi-series by
-* default: takes its colour from `seriesColor` (SERIES cycle or `datum.color`).
-*/
+/** One proportion segment, sized by `flex: var(--value)`; SERIES-cycle colours by default. */
 function Segment({ datum, index = 0, value, color, className, style, ...rest }) {
 	const v = datum?.value ?? value ?? 0;
 	const segColor = datum !== void 0 ? seriesColor(datum, index) : color;
@@ -1446,11 +1470,7 @@ function Segment({ datum, index = 0, value, color, className, style, ...rest })
 		...rest
 	});
 }
-/**
-* Single horizontal proportion bar — a "60% A / 30% B / 10% C" breakdown.
-* Segments are sized by their flex ratios (no max needed) and coloured from the
-* SERIES palette by default. Generates an overridable `aria-label`.
-*/
+/** Single horizontal proportion bar. Segments size by flex ratio — no max needed. */
 function StackedBarRoot({ data, legend, inline, className, "aria-label": ariaLabel, ...rest }) {
 	return /* @__PURE__ */ jsxs("div", {
 		role: "img",
@@ -1485,11 +1505,7 @@ function DefaultCloseIcon() {
 		children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
 	});
 }
-/**
-* The bare `<dialog>` primitive — no opinions about header, body, or footer.
-* Use this when the default `<Dialog>` layout doesn't fit (custom header,
-* media block, multi-step content).
-*/
+/** 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 ref = useRef(null);
 	const onOpenChangeRef = useRef(onOpenChange);
@@ -1571,11 +1587,7 @@ function DialogCloseButton({ icon, className, children, onClick, type = "button"
 		children: children ?? (icon !== void 0 ? renderIcon(icon) : /* @__PURE__ */ jsx(DefaultCloseIcon, {}))
 	});
 }
-/**
-* Standard modal: a `<dialog>` with an opinionated header / body / footer
-* layout driven by shorthand props. For anything outside that shape, use
-* `<Dialog.Container>` and compose by hand.
-*/
+/** 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 }) {
 	const hasTitle = title !== void 0 || icon !== void 0;
 	const showHeader = hasTitle || dismissible;
@@ -1603,23 +1615,14 @@ var Dialog = Object.assign(DialogRoot, {
 });
 //#endregion
 //#region src/Field.tsx
-/**
-* The bare `.field` container. Use this when the default layout doesn't fit —
-* multiple validity-keyed `<Field.Error>` messages, a control that needs to
-* sit between description and error, etc.
-*/
+/** The bare `.field` container — for layouts the default `<Field>` doesn't fit. */
 function FieldContainer({ className, ...rest }) {
 	return /* @__PURE__ */ jsx(Field$1.Root, {
 		className: cn("field", className),
 		...rest
 	});
 }
-/**
-* Standard field: a `.field` container that lays out an optional label, the
-* control passed as `children`, an optional description, and an optional
-* single-message error. For anything outside that shape, use
-* `<Field.Container>` and compose by hand.
-*/
+/** 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 }) {
 	const labelEl = label !== void 0 ? /* @__PURE__ */ jsx(FieldLabel, {
 		required,
@@ -1893,8 +1896,7 @@ var Tabs = Object.assign(TabsRoot, {
 /**
 * Styled `<pre>` for logs, JSON dumps, terminal output, raw model output.
 * Theme-following surface via `--color-code-surface` / `--color-code-text`.
-* Wraps by default; opt out with `nowrap`. No syntax highlighting — layer
-* Shiki/Prism on a nested `<code>` if needed.
+* No syntax highlighting — layer Shiki/Prism on a nested `<code>` if needed.
 */
 function CodeBlock({ nowrap, className, ...rest }) {
 	return /* @__PURE__ */ jsx("pre", {
@@ -1905,18 +1907,9 @@ function CodeBlock({ nowrap, className, ...rest }) {
 //#endregion
 //#region src/Prose.tsx
 /**
-* A styled container for HTML the system can't annotate with its semantic class
-* names — backend-rendered markdown, CMS bodies, model output. Styles its
-* descendant flow elements (`p`, `ul`, `a`, `code`, `blockquote`, `table`, …)
-* from the design tokens, scoped to this wrapper so the rest of the admin UI
-* keeps the global element reset.
-*
-* ```tsx
-* <Prose dangerouslySetInnerHTML={{ __html: renderedMarkdown }} />
-* ```
-*
-* Accepts children too — `<Prose><h2>…</h2><p>…</p></Prose>` — for content
-* authored directly in JSX.
+* Styled container for HTML the system can't annotate with its class names —
+* backend-rendered markdown, CMS bodies, model output. Element styles are
+* scoped to this wrapper; the rest of the admin UI keeps the global reset.
 */
 function Prose({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -2107,6 +2100,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,
@@ -2311,6 +2305,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, Field, FileInput, Footer, Indicator, Input, InputGroup, Kbd, Link, Menu, Navbar, Pagination, Progress, PropertyList, Prose, Radio, RadioGroup, SERIES, Select, Separator, Sidebar, Spinner, StackedBar, StatCard, Switch, Table, Tabs, Textarea, Tooltip, getPaginationItems, useAppShell, useHotkey };
 
 //# sourceMappingURL=index.mjs.map