@logicplanes/kaeso-ui 0.1.0

package/dist/components/charts/bar.js

@@ -0,0 +1,231 @@
+"use client";
+import { t as e } from "../../chunks/cn-CidVUKMm.js";
+import { i as t } from "../../chunks/context-BELWW79w.js";
+import { formatNumber as n, formatPercent as r } from "../../format.js";
+import { A as i, D as a, E as o, S as s, b as c, g as l, i as u, k as d, n as ee, p as te, r as ne, s as re, t as f, v as ie } from "../../chunks/core-Bgefcs3z.js";
+import { forwardRef as p, useState as m } from "react";
+import { Fragment as ae, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { max as oe } from "d3-array";
+import { scaleBand as _, scaleLinear as se } from "d3-scale";
+//#region src/components/charts/bar.tsx
+var v = { layout: {
+	grouped: { classes: "" },
+	stacked: { classes: "" },
+	horizontal: { classes: "" }
+} }, y = { layout: "grouped" }, b = /* @__PURE__ */ p(function({ categories: p, series: v, layout: y = "grouped", height: b = 240, formatValue: S = (e) => n(e), highlight: C, axisLabels: w, dates: ce, className: le, "aria-label": T, ...E }, ue) {
+	let D = t(), [de, O] = a(), [k, A] = m(null), [fe, pe] = m(null), j = y === "horizontal", M = y === "stacked", N = v.flatMap((e) => e.values), me = oe(M ? p.map((e, t) => v.reduce((e, n) => e + (n.values[t] ?? 0), 0)) : N) ?? 0, P = se().domain([0, me * 1.08 || 1]).nice(4), F = d(N, P.domain()[1] ?? 1, !!E.loading), I = v.map((e, t) => e.values.map((n, r) => F.values[t * e.values.length + r] ?? 0)), he = c(v.map((e) => e.id)), L = (e) => e.color ?? he.get(e.id), R = j ? {
+		top: 0,
+		right: 56,
+		bottom: 0,
+		left: 140
+	} : {
+		top: 8,
+		right: 52,
+		bottom: 28,
+		left: 0
+	}, z = Math.max(0, O.width - R.left - R.right), B = Math.max(0, b - R.top - R.bottom), V = p.map((e, t) => I.reduce((e, n) => e + (n[t] ?? 0), 0)), H = _().domain(p).range(j ? [0, B] : [0, z]).paddingInner(.24).paddingOuter(.12);
+	P.range(j ? [0, z] : [B, 0]);
+	let U = P.copy().domain([0, F.top || 1]), W = (e) => j ? Math.min(z, U(e)) : Math.max(0, U(e)), ge = _().domain(v.map((e) => e.id)).range([0, H.bandwidth()]).paddingInner(.12), _e = j ? 20 : M || v.length === 1 ? 40 : 20, G = Math.max(4, Math.min(_e, Math.round(M || j ? H.bandwidth() : ge.bandwidth()))), K = M || j ? G : v.length * G + (v.length - 1) * 4, q = s(S), J = [p[0], p[p.length - 1]].map((e) => e === void 0 ? 0 : (H(e) ?? 0) + H.bandwidth() / 2), ve = new Set(j ? [] : te(p.map((e, t) => w?.[t] ?? e), H.step(), {
+		start: R.left + J[0],
+		end: z - J[1] + R.right
+	}, ce)), ye = {
+		columns: [D("barChart.category", "Category"), ...v.map((e) => e.label)],
+		rows: p.map((e, t) => [e, ...v.map((e) => S(e.values[t] ?? 0))])
+	}, be = (E.loading ? P.ticks(4) : i(ie(P, q), N)).filter((e) => e <= (F.top || 1) + 1e-9), Y = !!E.loading || !!E.empty || !!E.error, X = o(Y ? 0 : p.length, j ? {
+		vertical: !0,
+		start: 0
+	} : {}), Z = Y ? null : k?.i ?? X.index ?? (C !== void 0 && C < p.length ? C : null), xe = (e) => {
+		let t = Math.round(H(p[e]) ?? 0);
+		if (j) {
+			let n = R.top + Math.round(t + H.bandwidth() / 2 - G / 2 - $), r = n + G + $ * 2, i = e < p.length / 2, a = 40 + v.length * 22;
+			return {
+				x: R.left - 16,
+				y: i ? r + 24 + 4 : n - a + 24 - 4
+			};
+		}
+		let n = Math.min(H.bandwidth(), K + $ * 2), r = R.left + t + H.bandwidth() / 2, i = M ? V[e] ?? 0 : Math.max(0, ...I.map((t) => t[e] ?? 0));
+		return {
+			x: Math.round(r + n / 2) - 8,
+			xLeft: Math.round(r - n / 2) + 8,
+			y: k && k.i === e ? k.y : R.top + Math.round(W(i))
+		};
+	}, Q = (e) => v.map((t) => ({
+		id: t.id,
+		label: t.label,
+		color: L(t),
+		value: S(t.values[e] ?? 0),
+		...v.length > 1 && V[e] ? { share: r(Math.round((t.values[e] ?? 0) / (V[e] ?? 1) * 100) / 100, 0) } : {}
+	})), $ = 8;
+	return /* @__PURE__ */ h("div", {
+		ref: ue,
+		className: e("min-w-0", le),
+		children: /* @__PURE__ */ h(ee, {
+			label: T,
+			height: b,
+			table: ye,
+			state: E,
+			legend: v.length > 1 ? /* @__PURE__ */ h(re, {
+				items: v.map((e) => ({
+					id: e.id,
+					label: e.label,
+					color: L(e)
+				})),
+				onHover: pe
+			}) : void 0,
+			children: /* @__PURE__ */ g("div", {
+				ref: de,
+				role: "group",
+				"aria-label": T,
+				...X.props,
+				className: "absolute inset-0 rounded-cell focus-ring",
+				children: [
+					O.width > 0 && /* @__PURE__ */ h("svg", {
+						width: O.width,
+						height: b,
+						className: "block overflow-visible",
+						role: "presentation",
+						children: /* @__PURE__ */ g("g", {
+							transform: `translate(${R.left},${R.top})`,
+							children: [
+								!j && be.map((e) => /* @__PURE__ */ g("g", {
+									transform: `translate(0,${Math.round(W(e)) + .5})`,
+									children: [e !== 0 && /* @__PURE__ */ h("line", {
+										x2: z,
+										...f.grid
+									}), !E.loading && /* @__PURE__ */ h("text", {
+										x: z + 12,
+										dy: "0.32em",
+										...f.label,
+										children: q(e)
+									})]
+								}, e)),
+								p.map((e, t) => {
+									let n = Math.round(H(e) ?? 0), r = Math.round((H.step() - H.bandwidth()) / 2), i = Math.min(H.bandwidth(), K + 16), a = 0;
+									return /* @__PURE__ */ g("g", { children: [
+										/* @__PURE__ */ h("rect", {
+											"aria-hidden": !0,
+											className: "opacity-motion",
+											opacity: +(Z === t),
+											fill: "var(--k-fill-1)",
+											rx: 6,
+											...j ? {
+												x: -R.left + 8,
+												y: Math.round(n + H.bandwidth() / 2 - G / 2 - 8),
+												width: O.width - 16,
+												height: G + 16
+											} : {
+												x: Math.round(n + H.bandwidth() / 2 - i / 2),
+												y: 0,
+												width: i,
+												height: B
+											}
+										}),
+										(() => {
+											let e = n + H.bandwidth() / 2, r = Math.round(e - K / 2), i = v.map((e, n) => (I[n]?.[t] ?? 0) > 0).lastIndexOf(!0), o = j ? 0 : B;
+											return v.map((n, s) => {
+												let c = I[s]?.[t] ?? 0, l = fe && fe !== n.id ? .3 : 1;
+												if (j) {
+													let t = M ? Math.round(W(a)) : 0;
+													a += c;
+													let r = Math.max(c > 0 ? 2 : 0, Math.round(W(M ? a : c)) - t), i = Math.round(e - G / 2);
+													return /* @__PURE__ */ h("rect", {
+														x: t,
+														y: i,
+														width: r,
+														height: G,
+														rx: Math.min(4, G / 2),
+														fill: L(n),
+														opacity: l
+													}, n.id);
+												}
+												if (M) {
+													a += c;
+													let e = Math.round(W(a)), t = o === B ? o : o - 2;
+													o = e;
+													let u = t - e;
+													return c <= 0 || u <= 0 ? null : /* @__PURE__ */ h("path", {
+														d: x(r, e, G, u, s === i ? 4 : 0),
+														fill: L(n),
+														opacity: l
+													}, n.id);
+												}
+												let u = Math.round(W(c)), d = Math.max(c > 0 ? 2 : 0, B - u);
+												return /* @__PURE__ */ h("path", {
+													d: x(r + s * (G + 4), B - d, G, d, 4),
+													fill: L(n),
+													opacity: l
+												}, n.id);
+											});
+										})(),
+										/* @__PURE__ */ h("rect", {
+											x: j ? -R.left : n - r,
+											y: j ? n - r : 0,
+											width: j ? O.width : H.step(),
+											height: j ? H.step() : B,
+											fill: "transparent",
+											onPointerMove: (e) => {
+												if (Y) return;
+												let n = (e.currentTarget.ownerSVGElement ?? e.currentTarget).getBoundingClientRect();
+												A({
+													i: t,
+													y: Math.round(e.clientY - n.top)
+												});
+											},
+											onPointerLeave: () => A(null)
+										}),
+										j ? /* @__PURE__ */ g(ae, { children: [/* @__PURE__ */ h("text", {
+											x: -12,
+											y: n + H.bandwidth() / 2,
+											dy: "0.32em",
+											textAnchor: "end",
+											fill: "var(--k-text-secondary)",
+											fontSize: 13,
+											fontWeight: 500,
+											children: e
+										}), /* @__PURE__ */ h("text", {
+											x: Math.round(W(M ? V[t] ?? 0 : I[0]?.[t] ?? 0)) + 10,
+											y: n + H.bandwidth() / 2,
+											dy: "0.32em",
+											...f.label,
+											fill: "var(--k-text-secondary)",
+											children: S(M ? V[t] ?? 0 : v[0]?.values[t] ?? 0)
+										})] }) : ve.has(t) && /* @__PURE__ */ h("text", {
+											x: n + H.bandwidth() / 2,
+											y: B + 20,
+											textAnchor: "middle",
+											...f.label,
+											children: w?.[t] ?? e
+										})
+									] }, e);
+								}),
+								!j && /* @__PURE__ */ h("line", {
+									x2: z,
+									y1: B + .5,
+									y2: B + .5,
+									...f.baseline
+								})
+							]
+						})
+					}),
+					Z !== null && O.width > 0 && /* @__PURE__ */ h(u, {
+						...xe(Z),
+						width: O.width,
+						visible: !0,
+						heading: p[Z],
+						rows: Q(Z)
+					}),
+					/* @__PURE__ */ h(ne, { children: X.index !== null && !Y ? l(p[X.index], Q(X.index), D) : null })
+				]
+			})
+		})
+	});
+});
+process.env.NODE_ENV !== "production" && (b.displayName = "BarChart");
+function x(e, t, n, r, i) {
+	let a = Math.min(i, n / 2, r);
+	return a <= 0 ? `M${e} ${t}h${n}v${r}h${-n}z` : `M${e} ${t + r}V${t + a}Q${e} ${t} ${e + a} ${t}H${e + n - a}Q${e + n} ${t} ${e + n} ${t + a}V${t + r}z`;
+}
+//#endregion
+export { b as BarChart, y as KAESO_BAR_CHART_DEFAULT_VARIANTS, v as KAESO_BAR_CHART_VARIANTS };
+
+//# sourceMappingURL=bar.js.map

package/dist/components/charts/bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar.js","names":["d3max","_Fragment","cn","useUiText","wholeTicks","useSize","useChartKeys","tickLabel","seriesColors","liveLine","ChartTooltip","useTweenedScale","ChartFrame","axisLabelIndexes","ChartLive","Legend","AXIS","readableTicks","Fragment$1","KAESO_BAR_CHART_VARIANTS","KAESO_BAR_CHART_DEFAULT_VARIANTS","BarChart","formatNumber","v","ariaLabel","state","t","box","size","hover","setHover","useState","focus","setFocus","horizontal","layout","stacked","flat","series","s","dataTop","max","categories","a","ci","axis","scaleLinear","tween","vals","si","palette","color","M","w","h","height","totals","band","scaleBand","scale","n","inner","MAX","barW","groupW","axisLabel","formatValue","centers","c","shown","axisLabels","dates","table","ticks","quiet","keys","active","highlight","anchor","b","rowTop","PAD","rowBottom","below","tall","lit","center","tallest","sv","rowsFor","formatPercent","className","gap","acc","start","lastVisible","val","dim","x0","len","y","top","bottom","bh","roundedTop","r","rr","x"],"sources":["../../../src/components/charts/bar.tsx"],"sourcesContent":["import { forwardRef, useState } from \"react\";\nimport { scaleBand, scaleLinear } from \"d3-scale\";\nimport { max as d3max } from \"d3-array\";\nimport { cn } from \"../../utils/cn.js\";\nimport { formatNumber, formatPercent } from \"../../format/index.js\";\nimport { useUiText } from \"../../i18n/context.js\";\nimport {\n  AXIS,\n  axisLabelIndexes,\n  type AxisDate,\n  ChartFrame,\n  ChartLive,\n  ChartTooltip,\n  Legend,\n  liveLine,\n  seriesColors,\n  readableTicks,\n  tickLabel,\n  useChartKeys,\n  useSize,\n  useTweenedScale,\n  wholeTicks,\n  type ChartState,\n} from \"./core.js\";\n\nexport const KAESO_BAR_CHART_VARIANTS = {\n  layout: {\n    grouped: { classes: \"\" },\n    stacked: { classes: \"\" },\n    horizontal: { classes: \"\" },\n  },\n} as const;\nexport const KAESO_BAR_CHART_DEFAULT_VARIANTS = { layout: \"grouped\" } as const;\n\nexport interface BarSeries {\n  id: string;\n  label: string;\n  values: number[];\n  color?: string | undefined;\n}\n\nexport interface BarChartProps extends ChartState {\n  categories: string[];\n  series: BarSeries[];\n  layout?: keyof typeof KAESO_BAR_CHART_VARIANTS.layout | undefined;\n  height?: number | undefined;\n  formatValue?: ((v: number) => string) | undefined;\n  highlight?: number | undefined;\n  axisLabels?: string[] | undefined;\n  dates?: readonly AxisDate[] | undefined;\n  \"aria-label\": string;\n  className?: string | undefined;\n}\n\nexport const BarChart = /* @__PURE__ */ forwardRef<HTMLDivElement, BarChartProps>(function BarChart(\n  {\n    categories,\n    series,\n    layout = \"grouped\",\n    height = 240,\n    formatValue = (v) => formatNumber(v),\n    highlight,\n    axisLabels,\n    dates,\n    className,\n    \"aria-label\": ariaLabel,\n    ...state\n  },\n  ref,\n) {\n  const t = useUiText();\n  const [box, size] = useSize<HTMLDivElement>();\n  const [hover, setHover] = useState<{ i: number; y: number } | null>(null);\n  const [focus, setFocus] = useState<string | null>(null);\n  const horizontal = layout === \"horizontal\";\n  const stacked = layout === \"stacked\";\n  const flat = series.flatMap((s) => s.values);\n  const dataTop = (stacked ? d3max(categories.map((_, ci) => series.reduce((a, s) => a + (s.values[ci] ?? 0), 0))) : d3max(flat)) ?? 0;\n  const axis = scaleLinear()\n    .domain([0, dataTop * 1.08 || 1])\n    .nice(4);\n  const tween = useTweenedScale(flat, axis.domain()[1] ?? 1, !!state.loading);\n  const vals = series.map((s, si) => s.values.map((_, ci) => tween.values[si * s.values.length + ci] ?? 0));\n  const palette = seriesColors(series.map((s) => s.id));\n  const color = (s: BarSeries) => s.color ?? palette.get(s.id)!;\n  const M = horizontal ? { top: 0, right: 56, bottom: 0, left: 140 } : { top: 8, right: 52, bottom: 28, left: 0 };\n  const w = Math.max(0, size.width - M.left - M.right);\n  const h = Math.max(0, height - M.top - M.bottom);\n  const totals = categories.map((_, ci) => vals.reduce((a, v) => a + (v[ci] ?? 0), 0));\n  const band = scaleBand<string>()\n    .domain(categories)\n    .range(horizontal ? [0, h] : [0, w])\n    .paddingInner(0.24)\n    .paddingOuter(0.12);\n  axis.range(horizontal ? [0, w] : [h, 0]);\n  const scale = axis.copy().domain([0, tween.top || 1]);\n  const v = (n: number) => (horizontal ? Math.min(w, scale(n)) : Math.max(0, scale(n)));\n  const inner = scaleBand<string>()\n    .domain(series.map((s) => s.id))\n    .range([0, band.bandwidth()])\n    .paddingInner(0.12);\n  const MAX = horizontal ? 20 : stacked || series.length === 1 ? 40 : 20;\n  const barW = Math.max(4, Math.min(MAX, Math.round(stacked || horizontal ? band.bandwidth() : inner.bandwidth())));\n  const groupW = stacked || horizontal ? barW : series.length * barW + (series.length - 1) * 4;\n  const axisLabel = tickLabel(formatValue);\n  const centers = [categories[0], categories[categories.length - 1]].map((c) => (c === undefined ? 0 : (band(c) ?? 0) + band.bandwidth() / 2));\n  const shown = new Set(\n    horizontal\n      ? []\n      : axisLabelIndexes(\n          categories.map((c, ci) => axisLabels?.[ci] ?? c),\n          band.step(),\n          { start: M.left + centers[0]!, end: w - centers[1]! + M.right },\n          dates,\n        ),\n  );\n  const GAP = 2;\n  const table = {\n    columns: [t(\"barChart.category\", \"Category\"), ...series.map((s) => s.label)],\n    rows: categories.map((c, ci) => [c, ...series.map((s) => formatValue(s.values[ci] ?? 0))]),\n  };\n  const ticks = (state.loading ? axis.ticks(4) : wholeTicks(readableTicks(axis, axisLabel), flat)).filter((t) => t <= (tween.top || 1) + 1e-9);\n  const quiet = !!state.loading || !!state.empty || !!state.error;\n  const keys = useChartKeys(quiet ? 0 : categories.length, horizontal ? { vertical: true, start: 0 } : {});\n  const active = quiet ? null : (hover?.i ?? keys.index ?? (highlight !== undefined && highlight < categories.length ? highlight : null));\n  const anchor = (ci: number) => {\n    const b = Math.round(band(categories[ci]!) ?? 0);\n    if (horizontal) {\n      const rowTop = M.top + Math.round(b + band.bandwidth() / 2 - barW / 2 - PAD);\n      const rowBottom = rowTop + barW + PAD * 2;\n      const below = ci < categories.length / 2;\n      const tall = 40 + series.length * 22;\n      return { x: M.left - 16, y: below ? rowBottom + 24 + 4 : rowTop - tall + 24 - 4 };\n    }\n    const lit = Math.min(band.bandwidth(), groupW + PAD * 2);\n    const center = M.left + b + band.bandwidth() / 2;\n    const tallest = stacked ? (totals[ci] ?? 0) : Math.max(0, ...vals.map((sv) => sv[ci] ?? 0));\n    return {\n      x: Math.round(center + lit / 2) - 8,\n      xLeft: Math.round(center - lit / 2) + 8,\n      y: hover && hover.i === ci ? hover.y : M.top + Math.round(v(tallest)),\n    };\n  };\n  const rowsFor = (ci: number) =>\n    series.map((s) => ({\n      id: s.id,\n      label: s.label,\n      color: color(s),\n      value: formatValue(s.values[ci] ?? 0),\n      ...(series.length > 1 && totals[ci] ? { share: formatPercent(Math.round(((s.values[ci] ?? 0) / (totals[ci] ?? 1)) * 100) / 100, 0) } : {}),\n    }));\n  const PAD = 8;\n  return (\n    <div ref={ref} className={cn(\"min-w-0\", className)}>\n      <ChartFrame\n        label={ariaLabel}\n        height={height}\n        table={table}\n        state={state}\n        legend={series.length > 1 ? <Legend items={series.map((s) => ({ id: s.id, label: s.label, color: color(s) }))} onHover={setFocus} /> : undefined}\n      >\n        <div ref={box} role=\"group\" aria-label={ariaLabel} {...keys.props} className=\"absolute inset-0 rounded-cell focus-ring\">\n          {size.width > 0 && (\n            <svg width={size.width} height={height} className=\"block overflow-visible\" role=\"presentation\">\n              <g transform={`translate(${M.left},${M.top})`}>\n                {!horizontal &&\n                  ticks.map((t) => (\n                    <g key={t} transform={`translate(0,${Math.round(v(t)) + 0.5})`}>\n                      {t !== 0 && <line x2={w} {...AXIS.grid} />}\n                      {!state.loading && (\n                        <text x={w + 12} dy=\"0.32em\" {...AXIS.label}>\n                          {axisLabel(t)}\n                        </text>\n                      )}\n                    </g>\n                  ))}\n                {categories.map((c, ci) => {\n                  const b = Math.round(band(c) ?? 0);\n                  const gap = Math.round((band.step() - band.bandwidth()) / 2);\n                  const lit = Math.min(band.bandwidth(), groupW + PAD * 2);\n                  let acc = 0;\n                  return (\n                    <g key={c}>\n                      <rect\n                        aria-hidden\n                        className=\"opacity-motion\"\n                        opacity={active === ci ? 1 : 0}\n                        fill=\"var(--k-fill-1)\"\n                        rx={6}\n                        {...(horizontal\n                          ? { x: -M.left + PAD, y: Math.round(b + band.bandwidth() / 2 - barW / 2 - PAD), width: size.width - PAD * 2, height: barW + PAD * 2 }\n                          : { x: Math.round(b + band.bandwidth() / 2 - lit / 2), y: 0, width: lit, height: h })}\n                      />\n                      {(() => {\n                        const center = b + band.bandwidth() / 2;\n                        const start = Math.round(center - groupW / 2);\n                        const lastVisible = series.map((_, si) => (vals[si]?.[ci] ?? 0) > 0).lastIndexOf(true);\n                        let below = horizontal ? 0 : h;\n                        return series.map((s, si) => {\n                          const val = vals[si]?.[ci] ?? 0;\n                          const dim = focus && focus !== s.id ? 0.3 : 1;\n                          if (horizontal) {\n                            const x0 = stacked ? Math.round(v(acc)) : 0;\n                            acc += val;\n                            const len = Math.max(val > 0 ? 2 : 0, Math.round(v(stacked ? acc : val)) - x0);\n                            const y = Math.round(center - barW / 2);\n                            return <rect key={s.id} x={x0} y={y} width={len} height={barW} rx={Math.min(4, barW / 2)} fill={color(s)} opacity={dim} />;\n                          }\n                          if (stacked) {\n                            acc += val;\n                            const top = Math.round(v(acc));\n                            const first = below === h;\n                            const bottom = first ? below : below - GAP;\n                            below = top;\n                            const bh = bottom - top;\n                            if (val <= 0 || bh <= 0) return null;\n                            return <path key={s.id} d={roundedTop(start, top, barW, bh, si === lastVisible ? 4 : 0)} fill={color(s)} opacity={dim} />;\n                          }\n                          const top = Math.round(v(val));\n                          const bh = Math.max(val > 0 ? 2 : 0, h - top);\n                          return <path key={s.id} d={roundedTop(start + si * (barW + 4), h - bh, barW, bh, 4)} fill={color(s)} opacity={dim} />;\n                        });\n                      })()}\n                      <rect\n                        x={horizontal ? -M.left : b - gap}\n                        y={horizontal ? b - gap : 0}\n                        width={horizontal ? size.width : band.step()}\n                        height={horizontal ? band.step() : h}\n                        fill=\"transparent\"\n                        onPointerMove={(e) => {\n                          if (quiet) return;\n                          const r = (e.currentTarget.ownerSVGElement ?? e.currentTarget).getBoundingClientRect();\n                          setHover({ i: ci, y: Math.round(e.clientY - r.top) });\n                        }}\n                        onPointerLeave={() => setHover(null)}\n                      />\n                      {horizontal ? (\n                        <>\n                          <text x={-12} y={b + band.bandwidth() / 2} dy=\"0.32em\" textAnchor=\"end\" fill=\"var(--k-text-secondary)\" fontSize={13} fontWeight={500}>\n                            {c}\n                          </text>\n                          <text\n                            x={Math.round(v(stacked ? (totals[ci] ?? 0) : (vals[0]?.[ci] ?? 0))) + 10}\n                            y={b + band.bandwidth() / 2}\n                            dy=\"0.32em\"\n                            {...AXIS.label}\n                            fill=\"var(--k-text-secondary)\"\n                          >\n                            {formatValue(stacked ? (totals[ci] ?? 0) : (series[0]?.values[ci] ?? 0))}\n                          </text>\n                        </>\n                      ) : (\n                        shown.has(ci) && (\n                          <text x={b + band.bandwidth() / 2} y={h + 20} textAnchor=\"middle\" {...AXIS.label}>\n                            {axisLabels?.[ci] ?? c}\n                          </text>\n                        )\n                      )}\n                    </g>\n                  );\n                })}\n                {!horizontal && <line x2={w} y1={h + 0.5} y2={h + 0.5} {...AXIS.baseline} />}\n              </g>\n            </svg>\n          )}\n          {active !== null && size.width > 0 && (\n            <ChartTooltip {...anchor(active)} width={size.width} visible heading={categories[active]} rows={rowsFor(active)} />\n          )}\n          <ChartLive>{keys.index !== null && !quiet ? liveLine(categories[keys.index], rowsFor(keys.index), t) : null}</ChartLive>\n        </div>\n      </ChartFrame>\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") BarChart.displayName = \"BarChart\";\n\nfunction roundedTop(x: number, y: number, w: number, h: number, r: number) {\n  const rr = Math.min(r, w / 2, h);\n  if (rr <= 0) return `M${x} ${y}h${w}v${h}h${-w}z`;\n  return `M${x} ${y + h}V${y + rr}Q${x} ${y} ${x + rr} ${y}H${x + w - rr}Q${x + w} ${y} ${x + w} ${y + rr}V${y + h}z`;\n}\n"],"mappings":";;;;;;;;;;AAyBA,IAAamB,IAA2B,EACtC,QAAQ;CACN,SAAS,EAAE,SAAS,GAAG;CACvB,SAAS,EAAE,SAAS,GAAG;CACvB,YAAY,EAAE,SAAS,GAAG;AAC5B,EACF,GACaC,IAAmC,EAAE,QAAQ,UAAU,GAsBvDC,IAA2B,kBAA0C,SAChF,EACE,eACA,WACA,YAAS,WACT,YAAS,KACT,kBAAe,MAAMC,EAAaC,CAAC,GACnC,cACA,eACA,WACA,eACA,cAAcC,GACd,GAAGC,KAEL,IACA;CACA,IAAMC,IAAIvB,EAAU,GACd,CAACwB,IAAKC,KAAQvB,EAAwB,GACtC,CAACwB,GAAOC,KAAYC,EAA0C,IAAI,GAClE,CAACC,IAAOC,MAAYF,EAAwB,IAAI,GAChDG,IAAaC,MAAW,cACxBC,IAAUD,MAAW,WACrBE,IAAOC,EAAO,SAAS,MAAMC,EAAE,MAAM,GACrCC,KAAqBxC,GAAVoC,IAAgBM,EAAW,KAAK,GAAG,MAAOJ,EAAO,QAAQ,GAAG,MAAMK,KAAKJ,EAAE,OAAOK,MAAO,IAAI,CAAC,CAAC,IAAWP,CAAI,KAAM,GAC7HQ,IAAOC,GAAY,CAAC,CACvB,OAAO,CAAC,GAAGN,KAAU,QAAQ,CAAC,CAAC,CAAC,CAChC,KAAK,CAAC,GACHO,IAAQpC,EAAgB0B,GAAMQ,EAAK,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAACpB,EAAM,OAAO,GACpEuB,IAAOV,EAAO,KAAK,GAAG,MAAOC,EAAE,OAAO,KAAK,GAAG,MAAOQ,EAAM,OAAOE,IAAKV,EAAE,OAAO,SAASK,MAAO,CAAC,CAAC,GAClGM,KAAU1C,EAAa8B,EAAO,KAAK,MAAMC,EAAE,EAAE,CAAC,GAC9CY,KAAS,MAAiBZ,EAAE,SAASW,GAAQ,IAAIX,EAAE,EAAE,GACrDa,IAAIlB,IAAa;EAAE,KAAK;EAAG,OAAO;EAAI,QAAQ;EAAG,MAAM;CAAI,IAAI;EAAE,KAAK;EAAG,OAAO;EAAI,QAAQ;EAAI,MAAM;CAAE,GACxGmB,IAAI,KAAK,IAAI,GAAGzB,EAAK,QAAQwB,EAAE,OAAOA,EAAE,KAAK,GAC7CE,IAAI,KAAK,IAAI,GAAGC,IAASH,EAAE,MAAMA,EAAE,MAAM,GACzCI,IAASd,EAAW,KAAK,GAAG,MAAOM,EAAK,QAAQ,GAAG,MAAML,KAAKpB,EAAEqB,MAAO,IAAI,CAAC,CAAC,GAC7Ea,IAAOC,EAAkB,CAAC,CAC7B,OAAOhB,CAAU,CAAC,CAClB,MAAMR,IAAa,CAAC,GAAGoB,CAAC,IAAI,CAAC,GAAGD,CAAC,CAAC,CAAC,CACnC,aAAa,GAAI,CAAC,CAClB,aAAa,GAAI;CACpB,EAAK,MAAMnB,IAAa,CAAC,GAAGmB,CAAC,IAAI,CAACC,GAAG,CAAC,CAAC;CACvC,IAAMK,IAAQd,EAAK,KAAK,CAAC,CAAC,OAAO,CAAC,GAAGE,EAAM,OAAO,CAAC,CAAC,GAC9CxB,KAAK,MAAeW,IAAa,KAAK,IAAImB,GAAGM,EAAMC,CAAC,CAAC,IAAI,KAAK,IAAI,GAAGD,EAAMC,CAAC,CAAC,GAC7EC,KAAQH,EAAkB,CAAC,CAC9B,OAAOpB,EAAO,KAAK,MAAMC,EAAE,EAAE,CAAC,CAAC,CAC/B,MAAM,CAAC,GAAGkB,EAAK,UAAU,CAAC,CAAC,CAAC,CAC5B,aAAa,GAAI,GACdK,KAAM5B,IAAa,KAAKE,KAAWE,EAAO,WAAW,IAAI,KAAK,IAC9DyB,IAAO,KAAK,IAAI,GAAG,KAAK,IAAID,IAAK,KAAK,MAAM1B,KAAWF,IAAauB,EAAK,UAAU,IAAII,GAAM,UAAU,CAAC,CAAC,CAAC,GAC1GG,IAAS5B,KAAWF,IAAa6B,IAAOzB,EAAO,SAASyB,KAAQzB,EAAO,SAAS,KAAK,GACrF2B,IAAY1D,EAAU2D,CAAW,GACjCC,IAAU,CAACzB,EAAW,IAAIA,EAAWA,EAAW,SAAS,EAAE,CAAC,CAAC,KAAK,MAAO0B,MAAM,KAAA,IAAY,KAAKX,EAAKW,CAAC,KAAK,KAAKX,EAAK,UAAU,IAAI,CAAE,GACrIY,KAAQ,IAAI,IAChBnC,IACI,CAAC,IACDrB,GACE6B,EAAW,KAAK,GAAG,MAAO4B,IAAa1B,MAAOwB,CAAC,GAC/CX,EAAK,KAAK,GACV;EAAE,OAAOL,EAAE,OAAOe,EAAQ;EAAK,KAAKd,IAAIc,EAAQ,KAAMf,EAAE;CAAM,GAC9DmB,EACF,CACN,GAEMC,KAAQ;EACZ,SAAS,CAAC9C,EAAE,qBAAqB,UAAU,GAAG,GAAGY,EAAO,KAAK,MAAMC,EAAE,KAAK,CAAC;EAC3E,MAAMG,EAAW,KAAK,GAAG,MAAO,CAAC0B,GAAG,GAAG9B,EAAO,KAAK,MAAM4B,EAAY3B,EAAE,OAAOK,MAAO,CAAC,CAAC,CAAC,CAAC;CAC3F,GACM6B,MAAShD,EAAM,UAAUoB,EAAK,MAAM,CAAC,IAAIzC,EAAWa,GAAc4B,GAAMoB,CAAS,GAAG5B,CAAI,EAAA,CAAG,QAAQ,MAAMX,MAAMqB,EAAM,OAAO,KAAK,IAAI,GACrI2B,IAAQ,CAAC,CAACjD,EAAM,WAAW,CAAC,CAACA,EAAM,SAAS,CAAC,CAACA,EAAM,OACpDkD,IAAOrE,EAAaoE,IAAQ,IAAIhC,EAAW,QAAQR,IAAa;EAAE,UAAU;EAAM,OAAO;CAAE,IAAI,CAAC,CAAC,GACjG0C,IAASF,IAAQ,OAAQ7C,GAAO,KAAK8C,EAAK,UAAUE,MAAc,KAAA,KAAaA,IAAYnC,EAAW,SAASmC,IAAY,OAC3HC,MAAU,MAAe;EAC7B,IAAMC,IAAI,KAAK,MAAMtB,EAAKf,EAAWE,EAAI,KAAK,CAAC;EAC/C,IAAIV,GAAY;GACd,IAAM8C,IAAS5B,EAAE,MAAM,KAAK,MAAM2B,IAAItB,EAAK,UAAU,IAAI,IAAIM,IAAO,IAAIkB,CAAG,GACrEC,IAAYF,IAASjB,IAAOkB,IAAM,GAClCE,IAAQvC,IAAKF,EAAW,SAAS,GACjC0C,IAAO,KAAK9C,EAAO,SAAS;GAClC,OAAO;IAAE,GAAGc,EAAE,OAAO;IAAI,GAAG+B,IAAQD,IAAY,KAAK,IAAIF,IAASI,IAAO,KAAK;GAAE;EAClF;EACA,IAAMC,IAAM,KAAK,IAAI5B,EAAK,UAAU,GAAGO,IAASiB,IAAM,CAAC,GACjDK,IAASlC,EAAE,OAAO2B,IAAItB,EAAK,UAAU,IAAI,GACzC8B,IAAUnD,IAAWoB,EAAOZ,MAAO,IAAK,KAAK,IAAI,GAAG,GAAGI,EAAK,KAAK,MAAOwC,EAAG5C,MAAO,CAAC,CAAC;EAC1F,OAAO;GACL,GAAG,KAAK,MAAM0C,IAASD,IAAM,CAAC,IAAI;GAClC,OAAO,KAAK,MAAMC,IAASD,IAAM,CAAC,IAAI;GACtC,GAAGxD,KAASA,EAAM,MAAMe,IAAKf,EAAM,IAAIuB,EAAE,MAAM,KAAK,MAAM7B,EAAEgE,CAAO,CAAC;EACtE;CACF,GACME,KAAW,MACfnD,EAAO,KAAK,OAAO;EACjB,IAAIC,EAAE;EACN,OAAOA,EAAE;EACT,OAAOY,EAAMZ,CAAC;EACd,OAAO2B,EAAY3B,EAAE,OAAOK,MAAO,CAAC;EACpC,GAAIN,EAAO,SAAS,KAAKkB,EAAOZ,KAAM,EAAE,OAAO8C,EAAc,KAAK,OAAQnD,EAAE,OAAOK,MAAO,MAAMY,EAAOZ,MAAO,KAAM,GAAG,IAAI,KAAK,CAAC,EAAE,IAAI,CAAC;CAC1I,EAAE,GACEqC,IAAM;CACZ,OACE,kBAAC,OAAD;EAAU;EAAK,WAAW/E,EAAG,WAAWyF,EAAS;EAC/C,UAAA,kBAAC/E,IAAD;GACE,OAAOY;GACC;GACD;GACA;GACP,QAAQc,EAAO,SAAS,IAAI,kBAACvB,IAAD;IAAQ,OAAOuB,EAAO,KAAK,OAAO;KAAE,IAAIC,EAAE;KAAI,OAAOA,EAAE;KAAO,OAAOY,EAAMZ,CAAC;IAAE,EAAE;IAAG,SAASN;GAAW,CAAA,IAAI,KAAA;GAEvI,UAAA,kBAAC,OAAD;IAAK,KAAKN;IAAK,MAAK;IAAQ,cAAYH;IAAW,GAAImD,EAAK;IAAO,WAAU;IAA7E,UAAA;KACG/C,EAAK,QAAQ,KACZ,kBAAC,OAAD;MAAK,OAAOA,EAAK;MAAe;MAAQ,WAAU;MAAyB,MAAK;MAC9E,UAAA,kBAAC,KAAD;OAAG,WAAW,aAAawB,EAAE,KAAK,GAAGA,EAAE,IAAI;OAA3C,UAAA;QACG,CAAClB,KACAuC,GAAM,KAAK,MACT,kBAAC,KAAD;SAAW,WAAW,eAAe,KAAK,MAAMlD,EAAEG,CAAC,CAAC,IAAI,GAAI;SAA5D,UAAA,CACGA,MAAM,KAAK,kBAAC,QAAD;UAAM,IAAI2B;UAAG,GAAIrC,EAAK;SAAO,CAAA,GACxC,CAACS,EAAM,WACN,kBAAC,QAAD;UAAM,GAAG4B,IAAI;UAAI,IAAG;UAAS,GAAIrC,EAAK;UACnC,UAAAiD,EAAUvC,CAAC;SACR,CAAA,CAEP;QAPK,GAAAA,CAOL,CACJ;QACFgB,EAAW,KAAK,GAAG,MAAO;SACzB,IAAMqC,IAAI,KAAK,MAAMtB,EAAKW,CAAC,KAAK,CAAC,GAC3BwB,IAAM,KAAK,OAAOnC,EAAK,KAAK,IAAIA,EAAK,UAAU,KAAK,CAAC,GACrD4B,IAAM,KAAK,IAAI5B,EAAK,UAAU,GAAGO,IAAS,EAAO,GACnD6B,IAAM;SACV,OACE,kBAAC,KAAD,EAAA,UAAA;UACE,kBAAC,QAAD;WACE,eAAA;WACA,WAAU;WACV,SAAS,QAAWjD;WACpB,MAAK;WACL,IAAI;WACJ,GAAKV,IACD;YAAE,GAAG,CAACkB,EAAE,OAAO;YAAK,GAAG,KAAK,MAAM2B,IAAItB,EAAK,UAAU,IAAI,IAAIM,IAAO,IAAI,CAAG;YAAG,OAAOnC,EAAK,QAAQ;YAAS,QAAQmC,IAAO;WAAQ,IAClI;YAAE,GAAG,KAAK,MAAMgB,IAAItB,EAAK,UAAU,IAAI,IAAI4B,IAAM,CAAC;YAAG,GAAG;YAAG,OAAOA;YAAK,QAAQ/B;WAAE;UACtF,CAAA;iBACO;WACN,IAAMgC,IAASP,IAAItB,EAAK,UAAU,IAAI,GAChCqC,IAAQ,KAAK,MAAMR,IAAStB,IAAS,CAAC,GACtC+B,IAAczD,EAAO,KAAK,GAAG,OAAQU,EAAKC,EAAG,GAAGL,MAAO,KAAK,CAAC,CAAC,CAAC,YAAY,EAAI,GACjFuC,IAAQjD,IAAa,IAAIoB;WAC7B,OAAOhB,EAAO,KAAK,GAAG,MAAO;YAC3B,IAAM0D,IAAMhD,EAAKC,EAAG,GAAGL,MAAO,GACxBqD,IAAMjE,MAASA,OAAUO,EAAE,KAAK,KAAM;YAC5C,IAAIL,GAAY;aACd,IAAMgE,IAAK9D,IAAU,KAAK,MAAMb,EAAEsE,CAAG,CAAC,IAAI;aAC1C,KAAOG;aACP,IAAMG,IAAM,KAAK,IAAIH,IAAM,IAAI,IAAI,GAAG,KAAK,MAAMzE,EAAEa,IAAUyD,IAAMG,CAAG,CAAC,IAAIE,CAAE,GACvEE,IAAI,KAAK,MAAMd,IAASvB,IAAO,CAAC;aACtC,OAAO,kBAAC,QAAD;cAAiB,GAAGmC;cAAO;cAAG,OAAOC;cAAK,QAAQpC;cAAM,IAAI,KAAK,IAAI,GAAGA,IAAO,CAAC;cAAG,MAAMZ,EAAMZ,CAAC;cAAG,SAAS0D;aAAM,GAAvG1D,EAAE,EAAqG;YAC3H;YACA,IAAIH,GAAS;aACX,KAAO4D;aACP,IAAMK,IAAM,KAAK,MAAM9E,EAAEsE,CAAG,CAAC,GAEvBS,IADQnB,MAAU7B,IACD6B,IAAQA,IAAQ;aACvC,IAAQkB;aACR,IAAME,IAAKD,IAASD;aAEpB,OADIL,KAAO,KAAKO,KAAM,IAAU,OACzB,kBAAC,QAAD;cAAiB,GAAGC,EAAWV,GAAOO,GAAKtC,GAAMwC,GAAItD,MAAO8C,IAAc,IAAI,CAAC;cAAG,MAAM5C,EAAMZ,CAAC;cAAG,SAAS0D;aAAM,GAAtG1D,EAAE,EAAoG;YAC1H;YACA,IAAM8D,IAAM,KAAK,MAAM9E,EAAEyE,CAAG,CAAC,GACvBO,IAAK,KAAK,IAAIP,IAAM,IAAI,IAAI,GAAG1C,IAAI+C,CAAG;YAC5C,OAAO,kBAAC,QAAD;aAAiB,GAAGG,EAAWV,IAAQ7C,KAAMc,IAAO,IAAIT,IAAIiD,GAAIxC,GAAMwC,GAAI,CAAC;aAAG,MAAMpD,EAAMZ,CAAC;aAAG,SAAS0D;YAAM,GAAlG1D,EAAE,EAAgG;WACtH,CAAC;UACH,EAAA,CAAG;UACH,kBAAC,QAAD;WACE,GAAGL,IAAa,CAACkB,EAAE,OAAO2B,IAAIa;WAC9B,GAAG1D,IAAa6C,IAAIa,IAAM;WAC1B,OAAO1D,IAAaN,EAAK,QAAQ6B,EAAK,KAAK;WAC3C,QAAQvB,IAAauB,EAAK,KAAK,IAAIH;WACnC,MAAK;WACL,gBAAgB,MAAM;YACpB,IAAIoB,GAAO;YACX,IAAM+B,KAAK,EAAE,cAAc,mBAAmB,EAAE,cAAA,CAAe,sBAAsB;YACrF,EAAS;aAAE,GAAG7D;aAAI,GAAG,KAAK,MAAM,EAAE,UAAU6D,EAAE,GAAG;YAAE,CAAC;WACtD;WACA,sBAAsB3E,EAAS,IAAI;UACpC,CAAA;UACAI,IACC,kBAAAjC,IAAA,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,GAAG;WAAK,GAAG8E,IAAItB,EAAK,UAAU,IAAI;WAAG,IAAG;WAAS,YAAW;WAAM,MAAK;WAA0B,UAAU;WAAI,YAAY;WAC9H,UAAAW;UACG,CAAA,GACN,kBAAC,QAAD;WACE,GAAG,KAAK,MAAM7C,EAAEa,IAAWoB,EAAOZ,MAAO,IAAMI,EAAK,EAAE,GAAGJ,MAAO,CAAE,CAAC,IAAI;WACvE,GAAGmC,IAAItB,EAAK,UAAU,IAAI;WAC1B,IAAG;WACH,GAAIzC,EAAK;WACT,MAAK;WAEJ,UAAAkD,EAAY9B,IAAWoB,EAAOZ,MAAO,IAAMN,EAAO,EAAE,EAAE,OAAOM,MAAO,CAAE;UACnE,CAAA,CACN,EAAA,CAAA,IAEFyB,GAAM,IAAIzB,CAAE,KACV,kBAAC,QAAD;WAAM,GAAGmC,IAAItB,EAAK,UAAU,IAAI;WAAG,GAAGH,IAAI;WAAI,YAAW;WAAS,GAAItC,EAAK;WACxE,UAAAsD,IAAa1B,MAAOwB;UACjB,CAAA;SAGT,EAAA,GA5EKA,CA4EL;QAEP,CAAC;QACA,CAAClC,KAAc,kBAAC,QAAD;SAAM,IAAImB;SAAG,IAAIC,IAAI;SAAK,IAAIA,IAAI;SAAK,GAAItC,EAAK;QAAW,CAAA;OAC1E;;KACA,CAAA;KAEN4D,MAAW,QAAQhD,EAAK,QAAQ,KAC/B,kBAAClB,GAAD;MAAc,GAAIoE,GAAOF,CAAM;MAAG,OAAOhD,EAAK;MAAO,SAAA;MAAQ,SAASc,EAAWkC;MAAS,MAAMa,EAAQb,CAAM;KAAI,CAAA;KAEpH,kBAAC9D,IAAD,EAAA,UAAY6D,EAAK,UAAU,QAAQ,CAACD,IAAQjE,EAASiC,EAAWiC,EAAK,QAAQc,EAAQd,EAAK,KAAK,GAAGjD,CAAC,IAAI,KAAgB,CAAA;IACpH;;EACK,CAAA;CACT,CAAA;AAET,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAS,cAAc;AAElE,SAAS8E,EAAW,GAAW,GAAW,GAAW,GAAW,GAAW;CACzE,IAAME,IAAK,KAAK,IAAID,GAAGpD,IAAI,GAAGC,CAAC;CAE/B,OADIoD,KAAM,IAAU,IAAIC,EAAE,GAAGP,EAAE,GAAG/C,EAAE,GAAGC,EAAE,GAAG,CAACD,EAAE,KACxC,IAAIsD,EAAE,GAAGP,IAAI9C,EAAE,GAAG8C,IAAIM,EAAG,GAAGC,EAAE,GAAGP,EAAE,GAAGO,IAAID,EAAG,GAAGN,EAAE,GAAGO,IAAItD,IAAIqD,EAAG,GAAGC,IAAItD,EAAE,GAAG+C,EAAE,GAAGO,IAAItD,EAAE,GAAG+C,IAAIM,EAAG,GAAGN,IAAI9C,EAAE;AACnH"}

package/dist/components/charts/donut.js

@@ -0,0 +1,179 @@
+"use client";
+import { t as e } from "../../chunks/cn-CidVUKMm.js";
+import { i as t, n } from "../../chunks/context-BELWW79w.js";
+import { formatNumber as r, formatPercent as i } from "../../format.js";
+import { n as a } from "../../chunks/use-layout-width-DZaLOQMT.js";
+import { O as o, b as s, c, n as l, s as u } from "../../chunks/core-Bgefcs3z.js";
+import { forwardRef as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { arc as g, pie as _ } from "d3-shape";
+//#region src/components/charts/donut.tsx
+var v = { size: {
+	md: { classes: "size-160" },
+	sm: { classes: "size-140" },
+	lg: { classes: "size-180" }
+} }, y = { size: "md" };
+function b(e, t = .02, r = n) {
+	let i = e.reduce((e, t) => e + t.value, 0) || 1, a = e.filter((e) => e.value > 0 && e.value / i < t), o = e.filter((e) => e.value / i >= t);
+	if (a.length < 2) return [...o, ...a].sort((t, n) => e.indexOf(t) - e.indexOf(n));
+	let s = a.reduce((e, t) => e + t.value, 0);
+	return [...o, {
+		id: "__other",
+		label: r("donut.other", "Other"),
+		value: s,
+		color: "var(--k-text-tertiary)"
+	}];
+}
+function x(e, t, r = n) {
+	let a = t ? e / t : 0;
+	return a > 0 && a < .005 ? r("donut.underOnePercent", "<1%") : i(a, 0);
+}
+function S(e, t = n) {
+	let r = e.reduce((e, t) => e + t, 0);
+	if (!r) return e.map(() => i(0, 0));
+	let a = e.map((e) => e / r * 100), o = a.map(Math.floor), s = 100 - o.reduce((e, t) => e + t, 0), c = a.map((e, t) => ({
+		i: t,
+		r: e - Math.floor(e)
+	})).sort((e, t) => t.r - e.r);
+	for (let { i: e } of c) {
+		if (s <= 0) break;
+		o[e] = (o[e] ?? 0) + 1, s--;
+	}
+	return o.map((n, r) => n === 0 && (e[r] ?? 0) > 0 ? t("donut.underOnePercent", "<1%") : i(n / 100, 0));
+}
+function C(e) {
+	let [t, n] = p(e);
+	return t !== e && n(e), t !== e;
+}
+var w = /* @__PURE__ */ d(function({ slices: n, size: u = "md", total: d, totalLabel: v, formatValue: y = (e) => r(e), className: x, "aria-label": w, ...T }, E) {
+	let D = t(), O = {
+		sm: 140,
+		md: 160,
+		lg: 180
+	}[u], k = b(n, .02, D), A = k.reduce((e, t) => e + t.value, 0), j = C(k.map((e) => e.id).join("\0")), M = o(k.map((e) => e.value), !!T.loading || j), [N, P] = p(null), F = O / 2 - 7, I = _().sort(null).padAngle(3 / F).value((e) => e)(M), L = g().innerRadius(O / 2 - 14).outerRadius(O / 2).padRadius(F), R = s(k.map((e) => e.id)), z = (e) => e.color ?? R.get(e.id), B = S(k.map((e) => e.value), D), V = {
+		columns: [
+			D("donut.slice", "Slice"),
+			D("donut.value", "Value"),
+			D("donut.share", "Share")
+		],
+		rows: k.map((e) => [
+			e.label,
+			y(e.value),
+			i(A ? e.value / A : 0)
+		])
+	}, H = f(null), U = a(H), W = !!U && U < O + 40 + 220;
+	return /* @__PURE__ */ m("div", {
+		ref: (e) => {
+			H.current = e, typeof E == "function" ? E(e) : E && (E.current = e);
+		},
+		className: e("min-w-0", x),
+		children: /* @__PURE__ */ m(l, {
+			label: w,
+			height: W ? O + 24 + k.length * 32 : Math.max(O, k.length * 32),
+			table: V,
+			state: {
+				...T,
+				empty: T.empty ?? A === 0
+			},
+			children: /* @__PURE__ */ h("div", {
+				className: e("flex h-full", W ? "flex-col items-center gap-24" : "items-center gap-40"),
+				children: [/* @__PURE__ */ h("div", {
+					className: "relative shrink-0",
+					style: {
+						width: O,
+						height: O
+					},
+					children: [/* @__PURE__ */ m("svg", {
+						width: O,
+						height: O,
+						role: "presentation",
+						children: /* @__PURE__ */ m("g", {
+							transform: `translate(${O / 2},${O / 2})`,
+							children: I.map((e, t) => {
+								let n = (e.endAngle - e.startAngle - e.padAngle) * F;
+								return /* @__PURE__ */ m("path", {
+									d: L.cornerRadius(Math.max(0, Math.min(7, n / 2)))(e) ?? "",
+									fill: z(k[t]),
+									opacity: N && N !== k[t].id ? .3 : 1,
+									className: "opacity-motion"
+								}, k[t].id);
+							})
+						})
+					}), /* @__PURE__ */ h("div", {
+						className: "absolute inset-0 flex flex-col items-center justify-center gap-2",
+						children: [/* @__PURE__ */ m("span", {
+							className: e("font-semibold text-fg tabular", O >= 160 ? "text-title" : "text-title-sm"),
+							children: d ?? y(A)
+						}), /* @__PURE__ */ m("span", {
+							className: "text-caption font-medium text-fg-tertiary",
+							children: v ?? D("donut.total", "Total")
+						})]
+					})]
+				}), /* @__PURE__ */ m("ul", {
+					className: e("flex min-w-0 flex-col", W ? "w-full" : "max-w-320 flex-1"),
+					"aria-label": D("donut.legend", "Legend"),
+					children: k.map((t, n) => /* @__PURE__ */ h("li", {
+						onMouseEnter: () => P(t.id),
+						onMouseLeave: () => P(null),
+						className: e("flex h-32 items-center gap-10 rounded-item px-8 text-small transition-control hover:bg-fill-1", N && N !== t.id && "opacity-50"),
+						children: [
+							/* @__PURE__ */ m(c, { color: z(t) }),
+							/* @__PURE__ */ m("span", {
+								className: "min-w-0 flex-1 truncate font-medium text-fg",
+								children: t.label
+							}),
+							/* @__PURE__ */ m("span", {
+								className: "text-fg-secondary tabular",
+								children: y(t.value)
+							}),
+							/* @__PURE__ */ m("span", {
+								className: "w-40 text-right text-fg-tertiary tabular",
+								children: B[n]
+							})
+						]
+					}, t.id))
+				})]
+			})
+		})
+	});
+});
+process.env.NODE_ENV !== "production" && (w.displayName = "Donut");
+var T = w, E = { size: { md: { classes: "h-8" } } }, D = { size: "md" }, O = /* @__PURE__ */ d(function({ slices: n, formatValue: a = (e) => r(e), legend: o = !0, className: c, "aria-label": l }, d) {
+	let f = t(), p = n.reduce((e, t) => e + t.value, 0) || 1, g = s(n.map((e) => e.id)), _ = (e) => e.color ?? g.get(e.id);
+	return /* @__PURE__ */ h("div", {
+		ref: d,
+		className: e("flex flex-col gap-12", c),
+		children: [/* @__PURE__ */ m("div", {
+			role: "img",
+			"aria-label": f("shareBar.summary", "{label}: {shares}", {
+				label: l,
+				shares: n.map((e) => f("shareBar.share", "{label} {share}", {
+					label: e.label,
+					share: i(e.value / p, 0)
+				})).join(f("shareBar.listSeparator", ", "))
+			}),
+			className: "flex h-8 w-full gap-2 overflow-hidden rounded-pill",
+			children: n.filter((e) => e.value > 0).map((e) => /* @__PURE__ */ m("span", {
+				className: "h-full min-w-2 first:rounded-l-pill last:rounded-r-pill width-motion",
+				style: {
+					width: `${e.value / p * 100}%`,
+					background: _(e)
+				},
+				title: f("shareBar.segment", "{label}: {value}", {
+					label: e.label,
+					value: a(e.value)
+				})
+			}, e.id))
+		}), o && /* @__PURE__ */ m(u, { items: n.map((e) => ({
+			id: e.id,
+			label: e.label,
+			color: _(e),
+			value: i(e.value / p, 0)
+		})) })]
+	});
+});
+process.env.NODE_ENV !== "production" && (O.displayName = "ShareBar");
+//#endregion
+export { w as Donut, y as KAESO_DONUT_DEFAULT_VARIANTS, v as KAESO_DONUT_VARIANTS, D as KAESO_SHARE_BAR_DEFAULT_VARIANTS, E as KAESO_SHARE_BAR_VARIANTS, T as Ring, O as ShareBar, b as groupSmall, x as shareLabel, S as wholeShares };
+
+//# sourceMappingURL=donut.js.map

package/dist/components/charts/donut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"donut.js","names":["d3pie","arc","d3arc","cn","useUiText","useLayoutWidth","useTweened","seriesColors","ChartFrame","Legend","KAESO_DONUT_VARIANTS","KAESO_DONUT_DEFAULT_VARIANTS","groupSmall","englishText","total","slices","a","s","small","min","big","b","rest","t","shareLabel","share","sum","value","formatPercent","wholeShares","values","v","exact","floors","left","order","i","f","useOtherData","seen","setSeen","useState","identity","Donut","formatNumber","ariaLabel","state","D","size","data","other","d","tween","focus","setFocus","mid","arcs","pie","arc$1","arc","palette","color","shares","table","formatValue","box","useRef","width","stacked","el","ref","className","len","totalLabel","Swatch","Ring","KAESO_SHARE_BAR_VARIANTS","KAESO_SHARE_BAR_DEFAULT_VARIANTS","ShareBar","legend"],"sources":["../../../src/components/charts/donut.tsx"],"sourcesContent":["import { forwardRef, useRef, useState, type ReactNode } from \"react\";\nimport { arc as d3arc, pie as d3pie } from \"d3-shape\";\nimport { cn } from \"../../utils/cn.js\";\nimport { formatNumber, formatPercent } from \"../../format/index.js\";\nimport { useLayoutWidth } from \"../../hooks/use-layout-width.js\";\nimport { englishText, useUiText, type UiText } from \"../../i18n/context.js\";\nimport { ChartFrame, Legend, Swatch, seriesColors, useTweened, type ChartState } from \"./core.js\";\n\nexport interface Slice {\n  id: string;\n  label: string;\n  value: number;\n  color?: string | undefined;\n}\n\nexport const KAESO_DONUT_VARIANTS = {\n  size: {\n    md: { classes: \"size-160\" },\n    sm: { classes: \"size-140\" },\n    lg: { classes: \"size-180\" },\n  },\n} as const;\nexport const KAESO_DONUT_DEFAULT_VARIANTS = { size: \"md\" } as const;\n\nexport function groupSmall(slices: Slice[], min = 0.02, t: UiText = englishText): Slice[] {\n  const total = slices.reduce((a, s) => a + s.value, 0) || 1;\n  const small = slices.filter((s) => s.value > 0 && s.value / total < min);\n  const big = slices.filter((s) => s.value / total >= min);\n  if (small.length < 2) return [...big, ...small].sort((a, b) => slices.indexOf(a) - slices.indexOf(b));\n  const rest = small.reduce((a, s) => a + s.value, 0);\n  return [\n    ...big,\n    {\n      id: \"__other\",\n      label: t(\"donut.other\", \"Other\"),\n      value: rest,\n      color: \"var(--k-text-tertiary)\",\n    },\n  ];\n}\n\nexport function shareLabel(value: number, sum: number, t: UiText = englishText): string {\n  const share = sum ? value / sum : 0;\n  return share > 0 && share < 0.005 ? t(\"donut.underOnePercent\", \"<1%\") : formatPercent(share, 0);\n}\n\nexport function wholeShares(values: number[], t: UiText = englishText): string[] {\n  const sum = values.reduce((a, v) => a + v, 0);\n  if (!sum) return values.map(() => formatPercent(0, 0));\n  const exact = values.map((v) => (v / sum) * 100);\n  const floors = exact.map(Math.floor);\n  let left = 100 - floors.reduce((a, v) => a + v, 0);\n  const order = exact.map((e, i) => ({ i, r: e - Math.floor(e) })).sort((a, b) => b.r - a.r);\n  for (const { i } of order) {\n    if (left <= 0) break;\n    floors[i] = (floors[i] ?? 0) + 1;\n    left--;\n  }\n  return floors.map((f, i) => (f === 0 && (values[i] ?? 0) > 0 ? t(\"donut.underOnePercent\", \"<1%\") : formatPercent(f / 100, 0)));\n}\n\nfunction useOtherData(identity: string): boolean {\n  const [seen, setSeen] = useState(identity);\n  if (seen !== identity) setSeen(identity);\n  return seen !== identity;\n}\n\nexport const Donut = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  {\n    slices: Slice[];\n    size?: keyof typeof KAESO_DONUT_VARIANTS.size | undefined;\n    total?: ReactNode | undefined;\n    totalLabel?: ReactNode | undefined;\n    formatValue?: ((v: number) => string) | undefined;\n    \"aria-label\": string;\n    className?: string | undefined;\n  } & ChartState\n>(function Donut({ slices, size = \"md\", total, totalLabel, formatValue = (v) => formatNumber(v), className, \"aria-label\": ariaLabel, ...state }, ref) {\n  const t = useUiText();\n  const D = { sm: 140, md: 160, lg: 180 }[size];\n  const STROKE = 14;\n  const data = groupSmall(slices, 0.02, t);\n  const sum = data.reduce((a, s) => a + s.value, 0);\n  const other = useOtherData(data.map((d) => d.id).join(\"\\u0000\"));\n  const tween = useTweened(\n    data.map((d) => d.value),\n    !!state.loading || other,\n  );\n  const [focus, setFocus] = useState<string | null>(null);\n  const mid = D / 2 - STROKE / 2;\n  const pie = d3pie<number>()\n    .sort(null)\n    .padAngle(3 / mid)\n    .value((v) => v);\n  const arcs = pie(tween);\n  const arc = d3arc<{\n    startAngle: number;\n    endAngle: number;\n    padAngle: number;\n  }>()\n    .innerRadius(D / 2 - STROKE)\n    .outerRadius(D / 2)\n    .padRadius(mid);\n  const palette = seriesColors(data.map((d) => d.id));\n  const color = (s: Slice) => s.color ?? palette.get(s.id)!;\n  const shares = wholeShares(\n    data.map((d) => d.value),\n    t,\n  );\n  const table = {\n    columns: [t(\"donut.slice\", \"Slice\"), t(\"donut.value\", \"Value\"), t(\"donut.share\", \"Share\")],\n    rows: data.map((d) => [d.label, formatValue(d.value), formatPercent(sum ? d.value / sum : 0)]),\n  };\n  const box = useRef<HTMLDivElement | null>(null);\n  const width = useLayoutWidth(box);\n  const stacked = !!width && width < D + 40 + 220;\n  return (\n    <div\n      ref={(el) => {\n        box.current = el;\n        if (typeof ref === \"function\") ref(el);\n        else if (ref) ref.current = el;\n      }}\n      className={cn(\"min-w-0\", className)}\n    >\n      <ChartFrame\n        label={ariaLabel}\n        height={stacked ? D + 24 + data.length * 32 : Math.max(D, data.length * 32)}\n        table={table}\n        state={{ ...state, empty: state.empty ?? sum === 0 }}\n      >\n        <div className={cn(\"flex h-full\", stacked ? \"flex-col items-center gap-24\" : \"items-center gap-40\")}>\n          <div className=\"relative shrink-0\" style={{ width: D, height: D }}>\n            <svg width={D} height={D} role=\"presentation\">\n              <g transform={`translate(${D / 2},${D / 2})`}>\n                {arcs.map((a, i) => {\n                  const len = (a.endAngle - a.startAngle - a.padAngle) * mid;\n                  return (\n                    <path\n                      key={data[i]!.id}\n                      d={arc.cornerRadius(Math.max(0, Math.min(STROKE / 2, len / 2)))(a) ?? \"\"}\n                      fill={color(data[i]!)}\n                      opacity={focus && focus !== data[i]!.id ? 0.3 : 1}\n                      className=\"opacity-motion\"\n                    />\n                  );\n                })}\n              </g>\n            </svg>\n            <div className=\"absolute inset-0 flex flex-col items-center justify-center gap-2\">\n              <span className={cn(\"font-semibold text-fg tabular\", D >= 160 ? \"text-title\" : \"text-title-sm\")}>{total ?? formatValue(sum)}</span>\n              <span className=\"text-caption font-medium text-fg-tertiary\">{totalLabel ?? t(\"donut.total\", \"Total\")}</span>\n            </div>\n          </div>\n          <ul className={cn(\"flex min-w-0 flex-col\", stacked ? \"w-full\" : \"max-w-320 flex-1\")} aria-label={t(\"donut.legend\", \"Legend\")}>\n            {data.map((d, i) => (\n              <li\n                key={d.id}\n                onMouseEnter={() => setFocus(d.id)}\n                onMouseLeave={() => setFocus(null)}\n                className={cn(\n                  \"flex h-32 items-center gap-10 rounded-item px-8 text-small transition-control hover:bg-fill-1\",\n                  focus && focus !== d.id && \"opacity-50\",\n                )}\n              >\n                <Swatch color={color(d)} />\n                <span className=\"min-w-0 flex-1 truncate font-medium text-fg\">{d.label}</span>\n                <span className=\"text-fg-secondary tabular\">{formatValue(d.value)}</span>\n                <span className=\"w-40 text-right text-fg-tertiary tabular\">{shares[i]}</span>\n              </li>\n            ))}\n          </ul>\n        </div>\n      </ChartFrame>\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Donut.displayName = \"Donut\";\nexport const Ring = Donut;\n\nexport const KAESO_SHARE_BAR_VARIANTS = {\n  size: { md: { classes: \"h-8\" } },\n} as const;\nexport const KAESO_SHARE_BAR_DEFAULT_VARIANTS = { size: \"md\" } as const;\n\nexport const ShareBar = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  {\n    slices: Slice[];\n    formatValue?: ((v: number) => string) | undefined;\n    legend?: boolean | undefined;\n    \"aria-label\": string;\n    className?: string | undefined;\n  }\n>(function ShareBar({ slices, formatValue = (v) => formatNumber(v), legend = true, className, \"aria-label\": ariaLabel }, ref) {\n  const t = useUiText();\n  const sum = slices.reduce((a, s) => a + s.value, 0) || 1;\n  const palette = seriesColors(slices.map((s) => s.id));\n  const color = (s: Slice) => s.color ?? palette.get(s.id)!;\n  return (\n    <div ref={ref} className={cn(\"flex flex-col gap-12\", className)}>\n      <div\n        role=\"img\"\n        aria-label={t(\"shareBar.summary\", \"{label}: {shares}\", {\n          label: ariaLabel,\n          shares: slices\n            .map((s) => t(\"shareBar.share\", \"{label} {share}\", { label: s.label, share: formatPercent(s.value / sum, 0) }))\n            .join(t(\"shareBar.listSeparator\", \", \")),\n        })}\n        className=\"flex h-8 w-full gap-2 overflow-hidden rounded-pill\"\n      >\n        {slices\n          .filter((s) => s.value > 0)\n          .map((s) => (\n            <span\n              key={s.id}\n              className=\"h-full min-w-2 first:rounded-l-pill last:rounded-r-pill width-motion\"\n              style={{\n                width: `${(s.value / sum) * 100}%`,\n                background: color(s),\n              }}\n              title={t(\"shareBar.segment\", \"{label}: {value}\", { label: s.label, value: formatValue(s.value) })}\n            />\n          ))}\n      </div>\n      {legend && (\n        <Legend\n          items={slices.map((s) => ({\n            id: s.id,\n            label: s.label,\n            color: color(s),\n            value: formatPercent(s.value / sum, 0),\n          }))}\n        />\n      )}\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") ShareBar.displayName = \"ShareBar\";\n"],"mappings":"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"}

package/dist/components/charts/gauge.js

@@ -0,0 +1,70 @@
+"use client";
+import { t as e } from "../../chunks/cn-CidVUKMm.js";
+import { r as t } from "../../chunks/context-BELWW79w.js";
+import { formatPercent as n } from "../../format.js";
+import { O as r } from "../../chunks/core-Bgefcs3z.js";
+import { forwardRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/charts/gauge.tsx
+var s = { size: { md: { classes: "w-180" } } }, c = { size: "md" }, l = /* @__PURE__ */ i(function({ value: i, thresholds: s = [.8], label: c, valueLabel: l, className: u, "aria-label": d }, f) {
+	t();
+	let [p] = r([Math.max(0, Math.min(1, i))]), m = (e) => Math.PI * (1 - e), h = (e, t) => [90 + t * Math.cos(m(e)), 94 - t * Math.sin(m(e))], g = (e, t) => {
+		let [n, r] = h(e, 82), [i, a] = h(t, 82);
+		return `M${n} ${r}A82 82 0 0 1 ${i} ${a}`;
+	}, _ = Math.round(i * 100), v = i >= 1 ? "var(--k-danger)" : i >= Math.min(...s, 1) ? "var(--k-warning)" : "var(--k-viz-1)";
+	return /* @__PURE__ */ o("div", {
+		ref: f,
+		role: "meter",
+		"aria-label": d,
+		"aria-valuemin": 0,
+		"aria-valuemax": Math.max(100, _),
+		"aria-valuenow": _,
+		className: e("relative inline-flex flex-col items-center", u),
+		children: [/* @__PURE__ */ o("svg", {
+			width: 180,
+			height: 104,
+			role: "presentation",
+			children: [
+				/* @__PURE__ */ a("path", {
+					d: g(0, 1),
+					fill: "none",
+					stroke: "var(--k-fill-3)",
+					strokeWidth: 12,
+					strokeLinecap: "round"
+				}),
+				(p ?? 0) > 0 && /* @__PURE__ */ a("path", {
+					d: g(0, Math.max(.005, p ?? 0)),
+					fill: "none",
+					stroke: v,
+					strokeWidth: 12,
+					strokeLinecap: "round"
+				}),
+				s.map((e) => {
+					let [t, n] = h(e, 73), [r, i] = h(e, 91);
+					return /* @__PURE__ */ a("line", {
+						x1: t,
+						y1: n,
+						x2: r,
+						y2: i,
+						stroke: "var(--k-bg-panel)",
+						strokeWidth: 2
+					}, e);
+				})
+			]
+		}), /* @__PURE__ */ o("div", {
+			className: "absolute inset-x-0 bottom-0 flex flex-col items-center",
+			children: [/* @__PURE__ */ a("span", {
+				className: "text-title font-semibold text-fg tabular",
+				children: l ?? n(i, 0)
+			}), c && /* @__PURE__ */ a("span", {
+				className: "text-caption font-medium text-fg-tertiary",
+				children: c
+			})]
+		})]
+	});
+});
+process.env.NODE_ENV !== "production" && (l.displayName = "Gauge");
+//#endregion
+export { l as Gauge, c as KAESO_GAUGE_DEFAULT_VARIANTS, s as KAESO_GAUGE_VARIANTS };
+
+//# sourceMappingURL=gauge.js.map

package/dist/components/charts/gauge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gauge.js","names":["cn","useLocale","useTweened","KAESO_GAUGE_VARIANTS","KAESO_GAUGE_DEFAULT_VARIANTS","Gauge","ariaLabel","t","value","a","f","pt","r","path","x1","y1","from","x2","y2","to","now","tone","thresholds","className","th","valueLabel","formatPercent","label"],"sources":["../../../src/components/charts/gauge.tsx"],"sourcesContent":["import { forwardRef, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { formatPercent } from \"../../format/index.js\";\nimport { useTweened } from \"./core.js\";\nimport { useLocale } from \"../../i18n/context.js\";\n\nexport const KAESO_GAUGE_VARIANTS = {\n  size: { md: { classes: \"w-180\" } },\n} as const;\nexport const KAESO_GAUGE_DEFAULT_VARIANTS = { size: \"md\" } as const;\n\nexport const Gauge = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  {\n    value: number;\n    thresholds?: number[] | undefined;\n    label?: ReactNode | undefined;\n    valueLabel?: ReactNode | undefined;\n    \"aria-label\": string;\n    className?: string | undefined;\n  }\n>(function Gauge({ value, thresholds = [0.8], label, valueLabel, className, \"aria-label\": ariaLabel }, ref) {\n  useLocale();\n  const W = 180;\n  const R = 82;\n  const [t] = useTweened([Math.max(0, Math.min(1, value))]);\n  const a = (f: number) => Math.PI * (1 - f);\n  const pt = (f: number, r: number) => [W / 2 + r * Math.cos(a(f)), 94 - r * Math.sin(a(f))] as const;\n  const path = (from: number, to: number) => {\n    const [x1, y1] = pt(from, R);\n    const [x2, y2] = pt(to, R);\n    return `M${x1} ${y1}A${R} ${R} 0 0 1 ${x2} ${y2}`;\n  };\n  const now = Math.round(value * 100);\n  const tone = value >= 1 ? \"var(--k-danger)\" : value >= Math.min(...thresholds, 1) ? \"var(--k-warning)\" : \"var(--k-viz-1)\";\n  return (\n    <div\n      ref={ref}\n      role=\"meter\"\n      aria-label={ariaLabel}\n      aria-valuemin={0}\n      aria-valuemax={Math.max(100, now)}\n      aria-valuenow={now}\n      className={cn(\"relative inline-flex flex-col items-center\", className)}\n    >\n      <svg width={W} height={104} role=\"presentation\">\n        <path d={path(0, 1)} fill=\"none\" stroke=\"var(--k-fill-3)\" strokeWidth={12} strokeLinecap=\"round\" />\n        {(t ?? 0) > 0 && <path d={path(0, Math.max(0.005, t ?? 0))} fill=\"none\" stroke={tone} strokeWidth={12} strokeLinecap=\"round\" />}\n        {thresholds.map((th) => {\n          const [x1, y1] = pt(th, R - 9);\n          const [x2, y2] = pt(th, R + 9);\n          return <line key={th} x1={x1} y1={y1} x2={x2} y2={y2} stroke=\"var(--k-bg-panel)\" strokeWidth={2} />;\n        })}\n      </svg>\n      <div className=\"absolute inset-x-0 bottom-0 flex flex-col items-center\">\n        <span className=\"text-title font-semibold text-fg tabular\">{valueLabel ?? formatPercent(value, 0)}</span>\n        {label && <span className=\"text-caption font-medium text-fg-tertiary\">{label}</span>}\n      </div>\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Gauge.displayName = \"Gauge\";\n"],"mappings":";;;;;;;;AAMA,IAAaG,IAAuB,EAClC,MAAM,EAAE,IAAI,EAAE,SAAS,QAAQ,EAAE,EACnC,GACaC,IAA+B,EAAE,MAAM,KAAK,GAE5CC,IAAwB,kBAUnC,SAAe,EAAE,UAAO,gBAAa,CAAC,EAAG,GAAG,UAAO,eAAY,cAAW,cAAcC,KAAa,GAAK;CAC1G,EAAU;CACV,IAEM,CAACC,KAAKL,EAAW,CAAC,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGM,CAAK,CAAC,CAAC,CAAC,GAClDC,KAAK,MAAc,KAAK,MAAM,IAAIC,IAClCC,KAAM,GAAW,MAAc,CAAC,KAAQC,IAAI,KAAK,IAAIH,EAAEC,CAAC,CAAC,GAAG,KAAKE,IAAI,KAAK,IAAIH,EAAEC,CAAC,CAAC,CAAC,GACnFG,KAAQ,GAAc,MAAe;EACzC,IAAM,CAACC,GAAIC,KAAMJ,EAAGK,GAAM,EAAC,GACrB,CAACC,GAAIC,KAAMP,EAAGQ,GAAI,EAAC;EACzB,OAAO,IAAIL,EAAG,GAAGC,EAAG,eAAmBE,EAAG,GAAGC;CAC/C,GACME,IAAM,KAAK,MAAMZ,IAAQ,GAAG,GAC5Ba,IAAOb,KAAS,IAAI,oBAAoBA,KAAS,KAAK,IAAI,GAAGc,GAAY,CAAC,IAAI,qBAAqB;CACzG,OACE,kBAAC,OAAD;EACO;EACL,MAAK;EACL,cAAYhB;EACZ,iBAAe;EACf,iBAAe,KAAK,IAAI,KAAKc,CAAG;EAChC,iBAAeA;EACf,WAAWpB,EAAG,8CAA8CuB,CAAS;EAPvE,UAAA,CASE,kBAAC,OAAD;GAAK,OAAO;GAAG,QAAQ;GAAK,MAAK;GAAjC,UAAA;IACE,kBAAC,QAAD;KAAM,GAAGV,EAAK,GAAG,CAAC;KAAG,MAAK;KAAO,QAAO;KAAkB,aAAa;KAAI,eAAc;IAAS,CAAA;KAChGN,KAAK,KAAK,KAAK,kBAAC,QAAD;KAAM,GAAGM,EAAK,GAAG,KAAK,IAAI,MAAON,KAAK,CAAC,CAAC;KAAG,MAAK;KAAO,QAAQc;KAAM,aAAa;KAAI,eAAc;IAAS,CAAA;IAC7HC,EAAW,KAAK,MAAO;KACtB,IAAM,CAACR,GAAIC,KAAMJ,EAAGa,GAAI,EAAK,GACvB,CAACP,GAAIC,KAAMP,EAAGa,GAAI,EAAK;KAC7B,OAAO,kBAAC,QAAD;MAAmB;MAAQ;MAAQ;MAAQ;MAAI,QAAO;MAAoB,aAAa;KAAI,GAAhFA,CAAgF;IACpG,CAAC;GACE;EACL,CAAA,GAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,QAAD;IAAM,WAAU;IAA4C,UAAAC,KAAcC,EAAclB,GAAO,CAAC;GAAQ,CAAA,GACvGmB,KAAS,kBAAC,QAAD;IAAM,WAAU;IAA6C,UAAAA;GAAY,CAAA,CAChF;EACF,CAAA,CAAA;;AAET,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAM,cAAc"}