haze-ui 1.33.0 → 1.34.0

package/dist/components/Chart/Chart.js

@@ -1,35 +1,133 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { chartTree as t, resolveChartSeries as n } from "./chart-elements.js";
+import t from "../Spinner/Spinner.js";
+import n from "../Empty/Empty.js";
+import { chartTree as r, gaugeTree as i, resolveChartSeries as a, waffleTree as o } from "./chart-elements.js";
 /* empty css                */
-import { useMemo as r } from "react";
-import { jsx as i } from "react/jsx-runtime";
+import { useMemo as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/lib/components/Chart/Chart.tsx
-var a = "haze-Chart__root";
-function o({ type: o, data: s, series: c, xKey: l, height: u = 300, innerRadius: d = 0, layout: f = "horizontal", renderTooltip: p, showLegend: m = !1, showGrid: h = !0, showTooltip: g = !0, className: _, style: v, ...y }) {
-	let b = r(() => n(c), [c]);
-	return /* @__PURE__ */ i("div", {
+var d = "haze-Chart__root", f = "haze-Chart__graphic", p = "haze-Chart__stateBox", m = "haze-Chart__visuallyHidden", h = "haze-Chart__fallbackTableStyle", g = {
+	line: "Line chart",
+	area: "Area chart",
+	bar: "Bar chart",
+	pie: "Pie chart",
+	radar: "Radar chart",
+	scatter: "Scatter chart",
+	gauge: "Gauge",
+	waffle: "Waffle chart"
+};
+function _(e) {
+	return typeof e == "string" || typeof e == "number" || typeof e == "boolean" ? String(e) : "";
+}
+function v({ type: v, data: y, series: b, xKey: x, height: S = 300, innerRadius: C = 0, layout: w = "horizontal", referenceLines: ee, referenceAreas: te, referenceDots: ne, value: T, max: E = 100, thresholds: D, label: O, valueFormat: k, columns: A, renderTooltip: j, showLegend: M = !1, showGrid: N = !0, showTooltip: P = !0, fallbackTable: F = !0, loading: I, empty: L, classNames: R, "aria-label": z, className: B, style: V, ref: H, ...U }) {
+	let W = v === "waffle", G = W ? b ?? [] : [], K = y ?? [], q = s(() => W ? [] : a(b ?? []), [b, W]), J = I != null && I !== !1, Y = !J && L !== !1 && (W ? G.length === 0 : v !== "gauge" && K.length === 0), X = g[v], Z = (W ? G.map((e) => e.name) : q.map((e) => e.label)).join(", "), re = Z ? `${X}: ${Z}` : X, Q = z ?? re, $ = T === void 0 ? "" : k ? k(T) : String(T);
+	return /* @__PURE__ */ l("div", {
+		ref: H,
 		"data-slot": "chart",
 		style: {
-			height: u,
-			...v
+			height: S,
+			...V
 		},
-		...y,
-		className: e([a, _]),
-		children: t({
-			type: o,
-			data: s,
-			xKey: l,
-			showGrid: h,
-			showTooltip: g,
-			showLegend: m,
-			series: b,
-			layout: f,
-			innerRadius: d,
-			renderTooltip: p ? (e) => p(e) : void 0
-		})
+		"aria-busy": J || void 0,
+		...U,
+		className: e([
+			d,
+			R?.wrapper,
+			B
+		]),
+		children: J ? /* @__PURE__ */ l("div", {
+			"data-slot": "chart-loading",
+			className: e([p]),
+			children: I === !0 ? /* @__PURE__ */ l(t, {}) : I
+		}) : Y ? /* @__PURE__ */ l("div", {
+			"data-slot": "chart-empty",
+			className: e([p]),
+			children: L == null || L === !0 ? /* @__PURE__ */ l(n, {}) : L
+		}) : /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("div", {
+			"data-slot": "chart-graphic",
+			role: "img",
+			"aria-label": Q,
+			className: e([f]),
+			children: v === "gauge" ? i({
+				value: T ?? 0,
+				max: E,
+				thresholds: D,
+				formattedValue: $,
+				label: O
+			}) : v === "waffle" ? o({
+				series: G,
+				columns: A,
+				legendClassName: R?.legend
+			}) : r({
+				type: v,
+				data: K,
+				xKey: x,
+				showGrid: N,
+				showTooltip: P,
+				showLegend: M,
+				series: q,
+				layout: w,
+				innerRadius: C,
+				renderTooltip: j ? (e) => j(e) : void 0,
+				referenceLines: ee,
+				referenceAreas: te,
+				referenceDots: ne,
+				tooltipClassName: R?.tooltip,
+				legendClassName: R?.legend
+			})
+		}), F && /* @__PURE__ */ l("div", {
+			"data-slot": "fallback-table",
+			className: e([m]),
+			children: v === "gauge" ? /* @__PURE__ */ u("table", {
+				className: e([h]),
+				children: [
+					/* @__PURE__ */ l("caption", { children: Q }),
+					/* @__PURE__ */ l("thead", { children: /* @__PURE__ */ u("tr", { children: [/* @__PURE__ */ l("th", {
+						scope: "col",
+						children: "value"
+					}), /* @__PURE__ */ l("th", {
+						scope: "col",
+						children: "max"
+					})] }) }),
+					/* @__PURE__ */ l("tbody", { children: /* @__PURE__ */ u("tr", { children: [/* @__PURE__ */ l("td", { children: $ }), /* @__PURE__ */ l("td", { children: String(E) })] }) })
+				]
+			}) : v === "waffle" ? /* @__PURE__ */ u("table", {
+				className: e([h]),
+				children: [
+					/* @__PURE__ */ l("caption", { children: Q }),
+					/* @__PURE__ */ l("thead", { children: /* @__PURE__ */ u("tr", { children: [/* @__PURE__ */ l("th", {
+						scope: "col",
+						children: "series"
+					}), /* @__PURE__ */ l("th", {
+						scope: "col",
+						children: "value"
+					})] }) }),
+					/* @__PURE__ */ l("tbody", { children: G.map((e) => /* @__PURE__ */ u("tr", { children: [/* @__PURE__ */ l("th", {
+						scope: "row",
+						children: e.name
+					}), /* @__PURE__ */ l("td", { children: _(e.value) })] }, e.name)) })
+				]
+			}) : /* @__PURE__ */ u("table", {
+				className: e([h]),
+				children: [
+					/* @__PURE__ */ l("caption", { children: Q }),
+					/* @__PURE__ */ l("thead", { children: /* @__PURE__ */ u("tr", { children: [/* @__PURE__ */ l("th", {
+						scope: "col",
+						children: x
+					}), q.map((e) => /* @__PURE__ */ l("th", {
+						scope: "col",
+						children: e.label
+					}, e.key))] }) }),
+					/* @__PURE__ */ l("tbody", { children: K.map((e, t) => /* @__PURE__ */ u("tr", { children: [/* @__PURE__ */ l("th", {
+						scope: "row",
+						children: _(e[x])
+					}), q.map((t) => /* @__PURE__ */ l("td", { children: _(e[t.key]) }, t.key))] }, t)) })
+				]
+			})
+		})] })
 	});
 }
 //#endregion
-export { o as default };
+export { v as default };

package/dist/components/Chart/chart-elements.js

@@ -1,24 +1,27 @@
+
 "use client";
-import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Area as r, AreaChart as i, Bar as a, BarChart as o, CartesianGrid as s, Legend as c, Line as l, LineChart as u, Pie as d, PieChart as f, PolarAngleAxis as p, PolarGrid as m, PolarRadiusAxis as h, Radar as g, RadarChart as _, ResponsiveContainer as v, Scatter as y, ScatterChart as b, Tooltip as x, XAxis as S, YAxis as C } from "recharts";
+import { classnames as e } from "../../utils/classnames.js";
+/* empty css                         */
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Area as i, AreaChart as a, Bar as o, BarChart as s, CartesianGrid as c, DefaultLegendContent as l, Legend as u, Line as d, LineChart as f, Pie as p, PieChart as m, PolarAngleAxis as h, PolarGrid as ee, PolarRadiusAxis as g, Radar as _, RadarChart as v, RadialBar as y, RadialBarChart as b, ReferenceArea as x, ReferenceDot as S, ReferenceLine as C, ResponsiveContainer as w, Scatter as T, ScatterChart as E, Tooltip as D, XAxis as O, YAxis as k } from "recharts";
 //#region src/lib/components/Chart/chart-elements.tsx
-var w = [
+var A = [
 	"var(--haze-color-primary)",
 	"var(--haze-color-info)",
 	"var(--haze-color-success)",
 	"var(--haze-color-warning)",
 	"var(--haze-color-danger)"
-], T = "var(--haze-color-border)", E = {
+], j = "var(--haze-color-border)", M = {
 	fontSize: "var(--haze-text-sm)",
 	fill: "var(--haze-color-text-secondary)"
-}, D = {
+}, N = {
 	fontSize: "var(--haze-text-sm)",
 	color: "var(--haze-color-text)"
-}, O = { fontSize: "var(--haze-text-sm)" };
-function k(e) {
-	return w[e % w.length];
+}, P = { fontSize: "var(--haze-text-sm)" };
+function F(e) {
+	return A[e % A.length];
 }
-function A(e) {
+function I(e) {
 	return e.map((e) => ({
 		key: e.key,
 		label: e.label ?? e.key,
@@ -27,42 +30,42 @@ function A(e) {
 		stackId: e.stackId
 	}));
 }
-function j(e, n, i = 0) {
-	let { key: o, label: s, stackId: c } = n, u = n.color ?? k(i);
+function L(e, t, r = 0) {
+	let { key: a, label: s, stackId: c } = t, l = t.color ?? F(r);
 	switch (e) {
-		case "area": return /* @__PURE__ */ t(r, {
-			dataKey: o,
+		case "area": return /* @__PURE__ */ n(i, {
+			dataKey: a,
 			name: s,
-			stroke: u,
-			fill: u,
+			stroke: l,
+			fill: l,
 			stackId: c
-		}, o);
-		case "bar": return /* @__PURE__ */ t(a, {
-			dataKey: o,
+		}, a);
+		case "bar": return /* @__PURE__ */ n(o, {
+			dataKey: a,
 			name: s,
-			fill: u,
+			fill: l,
 			stackId: c
-		}, o);
-		case "line": return /* @__PURE__ */ t(l, {
-			dataKey: o,
+		}, a);
+		case "line": return /* @__PURE__ */ n(d, {
+			dataKey: a,
 			name: s,
-			stroke: u
-		}, o);
-		case "radar": return /* @__PURE__ */ t(g, {
-			dataKey: o,
+			stroke: l
+		}, a);
+		case "radar": return /* @__PURE__ */ n(_, {
+			dataKey: a,
 			name: s,
-			stroke: u,
-			fill: u,
+			stroke: l,
+			fill: l,
 			fillOpacity: .3
-		}, o);
-		case "scatter": return /* @__PURE__ */ t(y, {
-			dataKey: o,
+		}, a);
+		case "scatter": return /* @__PURE__ */ n(T, {
+			dataKey: a,
 			name: s,
-			fill: u
-		}, o);
+			fill: l
+		}, a);
 	}
 }
-function M(e, t, n) {
+function R(e, t, n) {
 	if (t <= 1) return {
 		innerRadius: n,
 		outerRadius: "80%"
@@ -73,52 +76,52 @@ function M(e, t, n) {
 		outerRadius: `${i + (e + 1) * a}%`
 	};
 }
-function N(e) {
-	let { entry: n, data: r, nameKey: i, ringIndex: a, ringCount: o, innerRadius: s } = e, c = M(a, o, s), l = r.map((e, t) => ({
+function z(e) {
+	let { entry: t, data: r, nameKey: i, ringIndex: a, ringCount: o, innerRadius: s } = e, c = R(a, o, s), l = r.map((e, n) => ({
 		...e,
-		fill: n.color ?? k(t)
+		fill: t.color ?? F(n)
 	}));
-	return /* @__PURE__ */ t(d, {
+	return /* @__PURE__ */ n(p, {
 		data: l,
-		dataKey: n.key,
+		dataKey: t.key,
 		nameKey: i,
 		innerRadius: c.innerRadius,
 		outerRadius: c.outerRadius,
 		stroke: "var(--haze-color-bg)"
-	}, n.key);
+	}, t.key);
 }
-function P(e, n, r, a = "horizontal") {
+function B(e, t, r, i = "horizontal") {
 	switch (e) {
-		case "area": return /* @__PURE__ */ t(i, {
-			data: n,
-			layout: a,
+		case "area": return /* @__PURE__ */ n(a, {
+			data: t,
+			layout: i,
 			children: r
 		});
-		case "bar": return /* @__PURE__ */ t(o, {
-			data: n,
-			layout: a,
+		case "bar": return /* @__PURE__ */ n(s, {
+			data: t,
+			layout: i,
 			children: r
 		});
-		case "line": return /* @__PURE__ */ t(u, {
-			data: n,
-			layout: a,
+		case "line": return /* @__PURE__ */ n(f, {
+			data: t,
+			layout: i,
 			children: r
 		});
-		case "pie": return /* @__PURE__ */ t(f, {
-			data: n,
+		case "pie": return /* @__PURE__ */ n(m, {
+			data: t,
 			children: r
 		});
-		case "radar": return /* @__PURE__ */ t(_, {
-			data: n,
+		case "radar": return /* @__PURE__ */ n(v, {
+			data: t,
 			children: r
 		});
-		case "scatter": return /* @__PURE__ */ t(b, {
-			data: n,
+		case "scatter": return /* @__PURE__ */ n(E, {
+			data: t,
 			children: r
 		});
 	}
 }
-function F(e) {
+function V(e) {
 	return (t) => {
 		let { payload: n, label: r } = t;
 		return e({
@@ -132,98 +135,252 @@ function F(e) {
 		});
 	};
 }
-function I(r) {
-	let { type: i, data: a, xKey: o, showGrid: l, showTooltip: u, showLegend: d, series: f, layout: g = "horizontal", innerRadius: _ = 0, renderTooltip: y } = r, b = y ? F(y) : void 0;
-	return i === "pie" ? /* @__PURE__ */ t(v, {
+function H(e) {
+	return (t) => /* @__PURE__ */ n("div", {
+		className: e,
+		children: n(l, { ...t })
+	});
+}
+function U(e) {
+	let { type: i, data: a, xKey: o, showGrid: s, showTooltip: l, showLegend: d, series: f, layout: p = "horizontal", innerRadius: m = 0, renderTooltip: _, referenceLines: v, referenceAreas: y, referenceDots: b, tooltipClassName: T, legendClassName: E } = e, A = E === void 0 ? void 0 : H(E), F = _ ? V(_) : void 0, I = /* @__PURE__ */ r(t, { children: [
+		v?.map((e, t) => /* @__PURE__ */ n(C, { ...e }, t)),
+		y?.map((e, t) => /* @__PURE__ */ n(x, { ...e }, t)),
+		b?.map((e, t) => /* @__PURE__ */ n(S, { ...e }, t))
+	] });
+	return i === "pie" ? /* @__PURE__ */ n(w, {
 		width: "100%",
 		height: "100%",
-		children: P(i, a, /* @__PURE__ */ n(e, { children: [
-			u && /* @__PURE__ */ t(x, {
-				contentStyle: D,
-				content: b
+		children: B(i, a, /* @__PURE__ */ r(t, { children: [
+			l && /* @__PURE__ */ n(D, {
+				contentStyle: N,
+				content: F,
+				wrapperClassName: T
+			}),
+			d && /* @__PURE__ */ n(u, {
+				wrapperStyle: P,
+				content: A
 			}),
-			d && /* @__PURE__ */ t(c, { wrapperStyle: O }),
-			f.map((e, t) => N({
+			f.map((e, t) => z({
 				entry: e,
 				data: a,
 				nameKey: o,
 				ringIndex: t,
 				ringCount: f.length,
-				innerRadius: _
+				innerRadius: m
 			}))
 		] }))
-	}) : i === "radar" ? /* @__PURE__ */ t(v, {
+	}) : i === "radar" ? /* @__PURE__ */ n(w, {
 		width: "100%",
 		height: "100%",
-		children: P(i, a, /* @__PURE__ */ n(e, { children: [
-			l && /* @__PURE__ */ t(m, { stroke: "var(--haze-color-border)" }),
-			/* @__PURE__ */ t(p, {
+		children: B(i, a, /* @__PURE__ */ r(t, { children: [
+			s && /* @__PURE__ */ n(ee, { stroke: "var(--haze-color-border)" }),
+			/* @__PURE__ */ n(h, {
 				dataKey: o,
-				tick: E
+				tick: M
 			}),
-			/* @__PURE__ */ t(h, { tick: E }),
-			u && /* @__PURE__ */ t(x, {
-				contentStyle: D,
-				content: b
+			/* @__PURE__ */ n(g, { tick: M }),
+			l && /* @__PURE__ */ n(D, {
+				contentStyle: N,
+				content: F,
+				wrapperClassName: T
 			}),
-			d && /* @__PURE__ */ t(c, { wrapperStyle: O }),
-			f.map((e, t) => j("radar", e, t))
+			d && /* @__PURE__ */ n(u, {
+				wrapperStyle: P,
+				content: A
+			}),
+			f.map((e, t) => L("radar", e, t))
 		] }))
-	}) : i === "scatter" ? /* @__PURE__ */ t(v, {
+	}) : i === "scatter" ? /* @__PURE__ */ n(w, {
 		width: "100%",
 		height: "100%",
-		children: P(i, a, /* @__PURE__ */ n(e, { children: [
-			l && /* @__PURE__ */ t(s, { stroke: "var(--haze-color-border)" }),
-			/* @__PURE__ */ t(S, {
+		children: B(i, a, /* @__PURE__ */ r(t, { children: [
+			s && /* @__PURE__ */ n(c, { stroke: "var(--haze-color-border)" }),
+			/* @__PURE__ */ n(O, {
 				type: "number",
 				dataKey: o,
-				stroke: T,
-				tick: E
+				stroke: j,
+				tick: M
 			}),
-			/* @__PURE__ */ t(C, {
+			/* @__PURE__ */ n(k, {
 				type: "number",
-				stroke: T,
-				tick: E
+				stroke: j,
+				tick: M
 			}),
-			u && /* @__PURE__ */ t(x, {
+			l && /* @__PURE__ */ n(D, {
 				cursor: { stroke: "var(--haze-color-border)" },
-				contentStyle: D,
-				content: b
+				contentStyle: N,
+				content: F,
+				wrapperClassName: T
+			}),
+			d && /* @__PURE__ */ n(u, {
+				wrapperStyle: P,
+				content: A
 			}),
-			d && /* @__PURE__ */ t(c, { wrapperStyle: O }),
-			f.map((e, t) => j("scatter", e, t))
+			I,
+			f.map((e, t) => L("scatter", e, t))
 		] }))
-	}) : /* @__PURE__ */ t(v, {
+	}) : /* @__PURE__ */ n(w, {
 		width: "100%",
 		height: "100%",
-		children: P(i, a, /* @__PURE__ */ n(e, { children: [
-			l && /* @__PURE__ */ t(s, { stroke: "var(--haze-color-border)" }),
-			g === "vertical" ? /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(S, {
+		children: B(i, a, /* @__PURE__ */ r(t, { children: [
+			s && /* @__PURE__ */ n(c, { stroke: "var(--haze-color-border)" }),
+			p === "vertical" ? /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n(O, {
 				type: "number",
-				stroke: T,
-				tick: E
-			}), /* @__PURE__ */ t(C, {
+				stroke: j,
+				tick: M
+			}), /* @__PURE__ */ n(k, {
 				type: "category",
 				dataKey: o,
-				stroke: T,
-				tick: E
-			})] }) : /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(S, {
+				stroke: j,
+				tick: M
+			})] }) : /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n(O, {
 				dataKey: o,
-				stroke: T,
-				tick: E
-			}), /* @__PURE__ */ t(C, {
-				stroke: T,
-				tick: E
+				stroke: j,
+				tick: M
+			}), /* @__PURE__ */ n(k, {
+				stroke: j,
+				tick: M
 			})] }),
-			u && /* @__PURE__ */ t(x, {
+			l && /* @__PURE__ */ n(D, {
 				cursor: { stroke: "var(--haze-color-border)" },
-				contentStyle: D,
-				content: b
+				contentStyle: N,
+				content: F,
+				wrapperClassName: T
 			}),
-			d && /* @__PURE__ */ t(c, { wrapperStyle: O }),
-			f.map((e, t) => j(e.type ?? i, e, t))
-		] }), g)
+			d && /* @__PURE__ */ n(u, {
+				wrapperStyle: P,
+				content: A
+			}),
+			I,
+			f.map((e, t) => L(e.type ?? i, e, t))
+		] }), p)
+	});
+}
+var W = "haze-chart-elements__gaugeRoot", G = "haze-chart-elements__gaugeReadout", K = "haze-chart-elements__gaugeValueStyle", q = "haze-chart-elements__gaugeCaptionStyle", J = "var(--haze-color-bg-muted)";
+function Y(e, t) {
+	let n = [], r = 0;
+	for (let i of t) {
+		let t = Math.min(Math.max(i.value, r), e);
+		t > r && n.push({
+			from: r,
+			to: t,
+			color: i.color
+		}), r = t;
+	}
+	return n;
+}
+function X(e, t) {
+	for (let n of t) if (e <= n.value) return n.color;
+}
+function Z(t) {
+	let { value: i, max: a, thresholds: o = [], formattedValue: s, label: c } = t, l = Math.min(Math.max(i, 0), a), u = Y(a, o), d = X(l, o) ?? "var(--haze-color-primary)", f = u.map((e, t) => ({
+		key: `segment-${t}`,
+		...e
+	})), p = {
+		track: [0, a],
+		value: [0, l]
+	};
+	for (let e of f) p[e.key] = [e.from, e.to];
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "gauge",
+		className: e([W]),
+		children: [/* @__PURE__ */ n(w, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ r(b, {
+				data: [p],
+				innerRadius: "60%",
+				outerRadius: "100%",
+				startAngle: 180,
+				endAngle: 0,
+				children: [
+					/* @__PURE__ */ n(h, {
+						type: "number",
+						domain: [0, a],
+						tick: !1
+					}),
+					/* @__PURE__ */ n(y, {
+						dataKey: "track",
+						fill: J,
+						isAnimationActive: !1
+					}),
+					f.map((e) => /* @__PURE__ */ n(y, {
+						dataKey: e.key,
+						fill: e.color,
+						fillOpacity: .35,
+						isAnimationActive: !1
+					}, e.key)),
+					/* @__PURE__ */ n(y, {
+						dataKey: "value",
+						fill: d,
+						cornerRadius: 999
+					})
+				]
+			})
+		}), /* @__PURE__ */ r("div", {
+			"data-slot": "gauge-readout",
+			className: e([G]),
+			children: [/* @__PURE__ */ n("span", {
+				"data-slot": "gauge-value",
+				className: e([K]),
+				children: s
+			}), c != null && c !== !1 ? /* @__PURE__ */ n("span", {
+				"data-slot": "gauge-label",
+				className: e([q]),
+				children: c
+			}) : null]
+		})]
+	});
+}
+var Q = "haze-chart-elements__waffleFrame", te = "haze-chart-elements__waffleGrid", ne = "haze-chart-elements__waffleCell", re = "haze-chart-elements__waffleLegendStyle", ie = "haze-chart-elements__waffleLegendItemStyle", ae = "haze-chart-elements__waffleSwatchStyle", oe = "haze-chart-elements__waffleRoot";
+function $(e, t = 10) {
+	let n = Math.max(1, Math.floor(t)), r = e.reduce((e, t) => e + Math.max(t.value, 0), 0), i = Math.max(1, Math.ceil(r / n)), a = [];
+	e.forEach((e, t) => {
+		let n = e.color ?? F(t), r = Math.max(0, Math.round(e.value));
+		for (let e = 0; e < r; e += 1) a.push(n);
+	});
+	let o = i * n, s = a.slice(0, o);
+	for (; s.length < o;) s.push(J);
+	return s;
+}
+function se(t) {
+	let { series: i, columns: a = 10, legendClassName: o } = t, s = Math.max(1, Math.floor(a)), c = $(i, s), l = Math.max(1, Math.ceil(c.length / s));
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "waffle",
+		className: e([oe]),
+		children: [/* @__PURE__ */ n("div", {
+			"data-slot": "waffle-frame",
+			className: e([Q]),
+			children: /* @__PURE__ */ n("div", {
+				"data-slot": "waffle-grid",
+				style: {
+					"--waffle-columns": s,
+					"--waffle-ratio": s / l
+				},
+				className: e([te]),
+				children: c.map((t, r) => /* @__PURE__ */ n("span", {
+					"data-slot": "waffle-cell",
+					style: { background: t },
+					className: e([ne])
+				}, r))
+			})
+		}), /* @__PURE__ */ n("div", {
+			"data-slot": "waffle-legend",
+			className: e([re, o]),
+			children: i.map((t, i) => /* @__PURE__ */ r("div", {
+				"data-slot": "waffle-legend-item",
+				className: e([ie]),
+				children: [/* @__PURE__ */ n("span", {
+					"data-slot": "waffle-legend-swatch",
+					style: { background: t.color ?? F(i) },
+					className: e([ae])
+				}), /* @__PURE__ */ n("span", {
+					"data-slot": "waffle-legend-label",
+					children: t.name
+				})]
+			}, t.name))
+		})]
 	});
 }
 //#endregion
-export { T as AXIS_STROKE, E as AXIS_TICK, O as LEGEND_STYLE, D as TOOLTIP_STYLE, F as buildTooltipContent, P as chartElement, I as chartTree, N as pieElement, M as pieRingRadii, A as resolveChartSeries, j as seriesElement };
+export { j as AXIS_STROKE, M as AXIS_TICK, J as CHART_MUTED_COLOR, P as LEGEND_STYLE, N as TOOLTIP_STYLE, V as buildTooltipContent, B as chartElement, U as chartTree, Z as gaugeTree, z as pieElement, R as pieRingRadii, I as resolveChartSeries, L as seriesElement, $ as waffleCellColors, se as waffleTree };