@aortl/admin-react 0.13.1 → 0.14.0

package/dist/index.cjs

@@ -1194,6 +1194,282 @@ 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`.
+*/
+var SERIES = [
+	"var(--color-blue-500)",
+	"var(--color-orange-400)",
+	"var(--color-green-500)",
+	"var(--color-purple-400)",
+	"var(--color-cyan-500)",
+	"var(--color-magenta-400)",
+	"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];
+}
+/** Largest value, floored at 1 so the bar calc never divides by zero. */
+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.
+*/
+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%";
+	let acc = 0;
+	const stops = [];
+	for (let i = 0; i < data.length; i++) {
+		const datum = data[i];
+		const from = acc / total * 360;
+		acc += Math.max(0, datum.value);
+		const to = acc / total * 360;
+		stops.push(`${seriesColor(datum, i)} ${from}deg ${to}deg`);
+	}
+	return stops.join(", ");
+}
+var TYPE_NOUN = {
+	bar: "Bar chart",
+	stack: "Proportion bar",
+	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."
+*/
+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(", ")}.`;
+}
+/** Native `title` text for a bar/segment/legend row. */
+function datumTitle(datum) {
+	return datum.label !== void 0 ? `${datum.label}: ${datum.value}` : `${datum.value}`;
+}
+/** Merge admin custom-property vars with an incoming `style` (incoming wins). */
+function mergeStyle(vars, incoming) {
+	return {
+		...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`.
+*/
+function BarChartContainer({ orientation = "horizontal", size = "md", showValues, inline, variant = "primary", className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "img",
+		className: cn([
+			"chart",
+			"chart-bars",
+			orientation === "vertical" && "chart-bars-vertical",
+			size !== "md" && `chart-${size}`,
+			showValues && "chart-values",
+			inline && "chart-inline",
+			variant !== "primary" && `chart-${variant}`
+		], className),
+		...rest
+	});
+}
+/**
+* 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.
+*/
+function Bar({ datum, value, label, color, className, style, ...rest }) {
+	const v = datum?.value ?? value ?? 0;
+	const lab = datum?.label ?? label;
+	const barColor = datum?.color ?? color;
+	const vars = { "--value": v };
+	if (barColor !== void 0) vars["--bar-color"] = barColor;
+	const title = datum !== void 0 ? datumTitle(datum) : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("chart-bar", className),
+		style: mergeStyle(vars, style),
+		...rest,
+		children: [
+			lab !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: cn("chart-bar-label", void 0),
+				children: lab
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: cn("chart-bar-track", void 0),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: cn("chart-bar-fill", void 0),
+					title
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: cn("chart-bar-value", void 0),
+				children: v
+			})
+		]
+	});
+}
+/**
+* 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>`.
+*/
+function BarChartRoot({ data, max, orientation = "horizontal", size = "md", showValues, inline, variant = "primary", style, "aria-label": ariaLabel, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BarChartContainer, {
+		orientation,
+		size,
+		showValues,
+		inline,
+		variant,
+		style: mergeStyle({ "--chart-max": computeMax(data, max) }, style),
+		"aria-label": ariaLabel ?? buildAriaLabel("bar", data),
+		...rest,
+		children: data.map((d, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, { datum: d }, d.label ?? i))
+	});
+}
+var BarChart = Object.assign(BarChartRoot, {
+	Container: BarChartContainer,
+	Bar
+});
+//#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.
+*/
+function ChartLegend({ data, className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		className: cn("chart-legend", className),
+		...rest,
+		children: data.map((d, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+			className: cn("chart-legend-item", void 0),
+			style: mergeStyle({ "--legend-color": seriesColor(d, i) }),
+			title: datumTitle(d),
+			children: d.label ?? d.value
+		}, d.label ?? i))
+	});
+}
+//#endregion
+//#region src/Donut.tsx
+/** Square positioning context that overlays the centre label on the ring. */
+function Figure({ size = "md", className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn(["chart-donut-figure", size !== "md" && `chart-${size}`], className),
+		...rest
+	});
+}
+/** The masked conic-gradient ring. Builds `--donut-segments` from the data. */
+function Ring({ data, pie, thickness, className, style, ...rest }) {
+	const vars = { "--donut-segments": buildDonutSegments(data) };
+	if (thickness !== void 0 && !pie) vars["--donut-thickness"] = thickness;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn(["chart-donut", pie && "chart-donut-pie"], className),
+		style: mergeStyle(vars, style),
+		...rest
+	});
+}
+/** Centred overlay (a total, a label). Not a child of the ring — masks clip subtrees. */
+function Center({ className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn("chart-donut-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`.
+*/
+function DonutRoot({ data, size = "md", thickness, pie, centerLabel, legend, inline, className, "aria-label": ariaLabel, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "img",
+		className: cn(["chart", inline && "chart-inline"], className),
+		"aria-label": ariaLabel ?? buildAriaLabel(pie ? "pie" : "donut", data),
+		...rest,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Figure, {
+			size,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Ring, {
+				data,
+				pie,
+				thickness
+			}), centerLabel !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Center, { children: centerLabel }) : null]
+		}), legend ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartLegend, { data }) : null]
+	});
+}
+var Donut = Object.assign(DonutRoot, {
+	Figure,
+	Ring,
+	Center,
+	Legend: ChartLegend
+});
+//#endregion
+//#region src/StackedBar.tsx
+/** The bare proportion track — compose `<StackedBar.Segment>` children by hand. */
+function Track({ className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn("chart-stack", className),
+		...rest
+	});
+}
+/**
+* One proportion segment, sized by `flex: var(--value)`. Multi-series by
+* default: takes its colour from `seriesColor` (SERIES cycle or `datum.color`).
+*/
+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;
+	const vars = { "--value": v };
+	if (segColor !== void 0) vars["--segment-color"] = segColor;
+	const title = datum !== void 0 ? datumTitle(datum) : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn("chart-segment", className),
+		style: mergeStyle(vars, style),
+		title,
+		...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`.
+*/
+function StackedBarRoot({ data, legend, inline, className, "aria-label": ariaLabel, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "img",
+		className: cn(["chart", inline && "chart-inline"], className),
+		"aria-label": ariaLabel ?? buildAriaLabel("stack", data),
+		...rest,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Track, { children: data.map((d, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Segment, {
+			datum: d,
+			index: i
+		}, d.label ?? i)) }), legend ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartLegend, { data }) : null]
+	});
+}
+var StackedBar = Object.assign(StackedBarRoot, {
+	Track,
+	Segment,
+	Legend: ChartLegend
+});
+//#endregion
 //#region src/Dialog.tsx
 var DialogContext = (0, react.createContext)(null);
 function DefaultCloseIcon() {
@@ -2012,15 +2288,18 @@ exports.AdminRoot = AdminRoot;
 exports.Alert = Alert;
 exports.AppShell = AppShell;
 exports.Badge = Badge;
+exports.BarChart = BarChart;
 exports.BrandTile = BrandTile;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
 exports.Card = Card;
+exports.ChartLegend = ChartLegend;
 exports.Checkbox = Checkbox;
 exports.CodeBlock = CodeBlock;
 exports.Container = Container;
 exports.Dialog = Dialog;
+exports.Donut = Donut;
 exports.Field = Field;
 exports.FileInput = FileInput;
 exports.Footer = Footer;
@@ -2036,9 +2315,11 @@ exports.Progress = Progress;
 exports.PropertyList = PropertyList;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
+exports.SERIES = SERIES;
 exports.Select = Select;
 exports.Sidebar = Sidebar;
 exports.Spinner = Spinner;
+exports.StackedBar = StackedBar;
 exports.StatCard = StatCard;
 exports.Switch = Switch;
 exports.Table = Table;