@aortl/admin-react 0.16.0 → 0.16.2

package/dist/index.mjs

@@ -14,10 +14,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 +65,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 +99,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;
@@ -226,12 +217,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 +265,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 +279,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 +330,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 +388,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 +412,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;
@@ -655,11 +611,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),
@@ -675,12 +627,7 @@ function Link({ external, icon, iconTrailing, className, target, rel, children,
 }
 //#endregion
 //#region src/Pagination.tsx
-/**
-* Compute the items to render for a given `page` / `total`. Always returns:
-*   previous, ...numbers/ellipses, next
-* with `boundaryCount` items on each end and `siblingCount` items around `page`.
-* Pure: no React state, safe to call during render.
-*/
+/** 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 +783,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 +997,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", {
@@ -1157,12 +1101,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 +1136,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 +1149,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 +1157,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 +1178,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 +1196,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 +1213,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 +1246,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 +1267,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 +1291,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 +1309,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 +1344,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 +1358,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 +1393,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 +1475,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 +1503,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 +1784,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 +1795,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", {