@gravitee/graphene-charts 3.17.0 → 3.18.0

package/dist/{primitives-DxLTufiI.js → primitives-BvnyBVmf.js}

@@ -47,7 +47,7 @@ function w(e, t) {
 	return t && (t.height !== void 0 || t.minHeight !== void 0 || t.maxHeight !== void 0) ? !0 : e ? /(?:^|\s)!?(?:min-|max-)?h-[^\s]+/.test(e) : !1;
 }
 var T = 10;
-function E({ id: t, config: n, className: r, children: i, style: o, ...l }) {
+function ee({ id: t, config: n, className: r, children: i, style: o, ...l }) {
 	let u = a.useId(), d = `chart-${t ?? u.replace(/:/g, "")}`, f = a.useMemo(() => {
 		let e = Object.entries(n), t = {};
 		for (let n = 0; n < e.length; n++) {
@@ -70,14 +70,14 @@ function E({ id: t, config: n, className: r, children: i, style: o, ...l }) {
 			className: e("flex w-full justify-center text-xs", !m && "aspect-video", r),
 			style: o,
 			...l,
-			children: [p.length > 0 && /* @__PURE__ */ s(D, {
+			children: [p.length > 0 && /* @__PURE__ */ s(E, {
 				id: d,
 				config: f
 			}), i]
 		})
 	});
 }
-function D({ id: e, config: t }) {
+function E({ id: e, config: t }) {
 	let n = x(e);
 	return /* @__PURE__ */ s("style", { dangerouslySetInnerHTML: { __html: Object.entries(v).map(([e, r]) => `${r} [data-chart=${n}] {\n${Object.entries(t).map(([t, n]) => {
 		let r = n.theme?.[e] ?? n.color, i = x(t);
@@ -86,7 +86,7 @@ function D({ id: e, config: t }) {
 }
 //#endregion
 //#region src/primitives/useChartDimensions.ts
-function O(e) {
+function D(e) {
 	let [t, n] = a.useState({
 		width: 0,
 		height: 0
@@ -106,19 +106,19 @@ function O(e) {
 }
 //#endregion
 //#region src/primitives/useTooltipState.ts
-var k = 12, A = -12;
-function j(e, t) {
+var O = 12, k = -12;
+function A(e, t) {
 	return {
-		x: e.clientX - t.left + k,
-		y: e.clientY - t.top + A
+		x: e.clientX - t.left + O,
+		y: e.clientY - t.top + k
 	};
 }
-function ee() {
+function te() {
 	let [e, t] = a.useState(null);
 	return {
 		state: e,
 		show: a.useCallback((e, n, r, i) => {
-			let { x: a, y: o } = j(r, i);
+			let { x: a, y: o } = A(r, i);
 			t({
 				items: e,
 				label: n,
@@ -129,7 +129,7 @@ function ee() {
 		move: a.useCallback((e, n) => {
 			t((t) => {
 				if (!t) return t;
-				let { x: r, y: i } = j(e, n);
+				let { x: r, y: i } = A(e, n);
 				return {
 					...t,
 					x: r,
@@ -142,16 +142,16 @@ function ee() {
 }
 //#endregion
 //#region src/primitives/CartesianContext.tsx
-var M = a.createContext(null);
-function N() {
-	let e = a.useContext(M);
+var j = a.createContext(null);
+function M() {
+	let e = a.useContext(j);
 	if (!e) throw Error("useCartesianContext must be used within a <CartesianChart>");
 	return e;
 }
 //#endregion
 //#region src/primitives/Grid.tsx
-function P({ scale: e, length: t, orientation: n, tickCount: r = 5 }) {
-	let i = a.useContext(M), o = e ?? i?.valueScale, c = i?.layout === "vertical", l = n ?? (c ? "horizontal" : "vertical"), u = t ?? (l === "horizontal" ? i?.innerWidth : i?.innerHeight) ?? 0;
+function N({ scale: e, length: t, orientation: n, tickCount: r = 5 }) {
+	let i = a.useContext(j), o = e ?? i?.valueScale, c = i?.layout === "vertical", l = n ?? (c ? "horizontal" : "vertical"), u = t ?? (l === "horizontal" ? i?.innerWidth : i?.innerHeight) ?? 0;
 	if (!o) return null;
 	let d = o.ticks(r), f = l === "horizontal";
 	return /* @__PURE__ */ s("g", {
@@ -176,10 +176,23 @@ function P({ scale: e, length: t, orientation: n, tickCount: r = 5 }) {
 	});
 }
 //#endregion
+//#region src/primitives/chartBadge.ts
+var ne = 6.2, re = 12, ie = "inline-flex items-center rounded-md border px-1.5 py-0.5 text-[10px] leading-none font-medium";
+function P(e) {
+	return e * ne + re;
+}
+function F(e) {
+	return {
+		color: e,
+		borderColor: e,
+		backgroundColor: `color-mix(in srgb, ${e} 10%, var(--background))`
+	};
+}
+//#endregion
 //#region src/primitives/ReferenceLine.tsx
-var F = 6, I = 20, L = 6.2, R = 12, z = "\n@keyframes graphene-refline-fadein {\n  from { opacity: 0; }\n  to   { opacity: var(--_refline-opacity); }\n}\n@keyframes graphene-refline-pulse {\n  0%, 100% { stroke-opacity: 0.7; }\n  50%      { stroke-opacity: 0.3; }\n}\n[data-graphene-refline] {\n  animation: graphene-refline-fadein 300ms ease-out forwards;\n}\n[data-graphene-refline-pulse] {\n  animation: graphene-refline-pulse 2s ease-in-out infinite;\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-graphene-refline] {\n    animation: none;\n    opacity: var(--_refline-opacity);\n  }\n  [data-graphene-refline-pulse] {\n    animation: none;\n  }\n}\n";
-function te({ x: e, y: t, axisId: n, stroke: r = "currentColor", strokeDasharray: i, strokeWidth: o = 1.5, label: l, labelPosition: u = "end", pulse: d = !1 }) {
-	let f = a.useContext(M);
+var I = 6, L = 20, R = "\n@keyframes graphene-refline-fadein {\n  from { opacity: 0; }\n  to   { opacity: var(--_refline-opacity); }\n}\n@keyframes graphene-refline-pulse {\n  0%, 100% { stroke-opacity: 0.7; }\n  50%      { stroke-opacity: 0.3; }\n}\n[data-graphene-refline] {\n  animation: graphene-refline-fadein 300ms ease-out forwards;\n}\n[data-graphene-refline-pulse] {\n  animation: graphene-refline-pulse 2s ease-in-out infinite;\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-graphene-refline] {\n    animation: none;\n    opacity: var(--_refline-opacity);\n  }\n  [data-graphene-refline-pulse] {\n    animation: none;\n  }\n}\n";
+function z({ x: e, y: t, axisId: n, stroke: r = "currentColor", strokeDasharray: i, strokeWidth: o = 1.5, label: l, labelPosition: u = "end", pulse: d = !1 }) {
+	let f = a.useContext(j);
 	if (!f) return null;
 	let { categoryScale: p, resolveValueScale: m, innerWidth: h, innerHeight: g, layout: _ } = f, v = m(n), y = _ === "vertical", b = e !== void 0, x = t !== void 0;
 	if (!b && !x) return null;
@@ -195,13 +208,13 @@ function te({ x: e, y: t, axisId: n, stroke: r = "currentColor", strokeDasharray
 		let e = v(t);
 		y ? (C = e, T = !0) : (S = e, w = !0);
 	}
-	let E = w && S >= 0 && S <= h, D = T && C >= 0 && C <= g;
-	if (!E && !D) return null;
-	let O = d ? .7 : .8, k = l ? V(u, {
+	let ee = w && S >= 0 && S <= h, E = T && C >= 0 && C <= g;
+	if (!ee && !E) return null;
+	let D = d ? .7 : .8, O = l ? ae(u, {
 		xPos: S,
 		yPos: C,
-		xInBounds: E,
-		yInBounds: D,
+		xInBounds: ee,
+		yInBounds: E,
 		hasX: w,
 		hasY: T,
 		innerWidth: h,
@@ -211,13 +224,13 @@ function te({ x: e, y: t, axisId: n, stroke: r = "currentColor", strokeDasharray
 	return /* @__PURE__ */ c("g", {
 		"aria-hidden": "true",
 		"data-graphene-refline": !0,
-		style: { "--_refline-opacity": O },
+		style: { "--_refline-opacity": D },
 		children: [
 			/* @__PURE__ */ s("style", {
 				precedence: "graphene-charts",
-				children: z
+				children: R
 			}),
-			E && /* @__PURE__ */ s("line", {
+			ee && /* @__PURE__ */ s("line", {
 				x1: S,
 				x2: S,
 				y1: 0,
@@ -226,10 +239,10 @@ function te({ x: e, y: t, axisId: n, stroke: r = "currentColor", strokeDasharray
 				strokeWidth: o,
 				strokeDasharray: i,
 				strokeLinecap: "round",
-				strokeOpacity: O,
+				strokeOpacity: D,
 				...d ? { "data-graphene-refline-pulse": "" } : {}
 			}),
-			D && /* @__PURE__ */ s("line", {
+			E && /* @__PURE__ */ s("line", {
 				x1: 0,
 				x2: h,
 				y1: C,
@@ -238,107 +251,100 @@ function te({ x: e, y: t, axisId: n, stroke: r = "currentColor", strokeDasharray
 				strokeWidth: o,
 				strokeDasharray: i,
 				strokeLinecap: "round",
-				strokeOpacity: O,
+				strokeOpacity: D,
 				...d ? { "data-graphene-refline-pulse": "" } : {}
 			}),
-			l && k && /* @__PURE__ */ s("foreignObject", {
-				x: k.x,
-				y: k.y,
-				width: k.width,
-				height: I,
+			l && O && /* @__PURE__ */ s("foreignObject", {
+				x: O.x,
+				y: O.y,
+				width: O.width,
+				height: L,
 				overflow: "visible",
 				children: /* @__PURE__ */ s("span", {
 					className: "inline-flex items-center rounded-md border px-1.5 py-0.5 text-[10px] leading-none font-medium",
-					style: {
-						color: r,
-						borderColor: r,
-						backgroundColor: `color-mix(in srgb, ${r} 10%, var(--background))`
-					},
+					style: F(r),
 					children: l
 				})
 			})
 		]
 	});
 }
-function B(e) {
-	return e * L + R;
-}
-function V(e, t) {
-	let { xPos: n, yPos: r, xInBounds: i, yInBounds: a, hasX: o, hasY: s, innerWidth: c, innerHeight: l, labelLength: u } = t, d = B(u);
+function ae(e, t) {
+	let { xPos: n, yPos: r, xInBounds: i, yInBounds: a, hasX: o, hasY: s, innerWidth: c, innerHeight: l, labelLength: u } = t, d = P(u);
 	if (o && s && i && a) {
-		let e = n + F + d > c, t = r + F + I > l;
+		let e = n + I + d > c, t = r + I + L > l;
 		return {
-			x: e ? n - F - d : n + F,
-			y: t ? r - F - I : r + F,
+			x: e ? n - I - d : n + I,
+			y: t ? r - I - L : r + I,
 			width: d
 		};
 	}
 	if (s && a) {
-		let t = r - F - I < 0;
+		let t = r - I - L < 0;
 		return {
-			x: re(e, c, d),
-			y: t ? r + F : r - F - I,
+			x: se(e, c, d),
+			y: t ? r + I : r - I - L,
 			width: d
 		};
 	}
 	return o && i ? {
-		x: n + F + d > c ? n - F - d : n + F,
-		y: ne(e, l),
+		x: n + I + d > c ? n - I - d : n + I,
+		y: oe(e, l),
 		width: d
 	} : null;
 }
-function ne(e, t) {
-	return e === "start" ? F : e === "center" ? t / 2 - I / 2 : t - I - F;
+function oe(e, t) {
+	return e === "start" ? I : e === "center" ? t / 2 - L / 2 : t - L - I;
 }
-function re(e, t, n) {
-	return e === "start" ? F : e === "center" ? t / 2 - n / 2 : t - n - F;
+function se(e, t, n) {
+	return e === "start" ? I : e === "center" ? t / 2 - n / 2 : t - n - I;
 }
 //#endregion
 //#region src/primitives/Axis.tsx
-var H = 7, U = 8, W = "…", ie = 4;
-function G(e) {
+var B = 7, V = 8, ce = "…", H = 4;
+function U(e) {
 	return new Set(Array.from({ length: e }, (e, t) => t));
 }
-function K(e, t) {
+function le(e, t) {
 	let n = /* @__PURE__ */ new Set();
 	for (let r = 0; r < e; r += t) n.add(r);
 	let r = e - 1;
 	return r - Math.floor((r - 1) / t) * t >= t && n.add(r), n;
 }
-function ae(e, t) {
+function W(e, t) {
 	let n = e.domain();
 	return n.length < 2 ? t : Math.abs((e(n[1]) ?? 0) - (e(n[0]) ?? 0));
 }
-function q(e, t, n, r) {
-	let i = Math.max(0, t - U);
-	if (r ? i >= ie * H : n <= i) return {
-		visible: G(e),
+function G(e, t, n, r) {
+	let i = Math.max(0, t - V);
+	if (r ? i >= H * B : n <= i) return {
+		visible: U(e),
 		maxWidth: i
 	};
-	let a = t > 0 ? Math.max(1, Math.ceil((n + U) / t)) : e;
+	let a = t > 0 ? Math.max(1, Math.ceil((n + V) / t)) : e;
 	return {
-		visible: K(e, a),
-		maxWidth: Math.max(0, t * a - U)
+		visible: le(e, a),
+		maxWidth: Math.max(0, t * a - V)
 	};
 }
-function J(e, t) {
-	let n = Math.floor(t / H);
-	return n <= 1 ? W : e.length <= n ? e : e.slice(0, n - 1) + W;
+function K(e, t) {
+	let n = Math.floor(t / B);
+	return n <= 1 ? ce : e.length <= n ? e : e.slice(0, n - 1) + ce;
 }
-function Y(e, t, n, r) {
+function q(e, t, n, r) {
 	if (t) return Math.max(1, Math.floor(e / 24));
-	let i = Math.max(...n.map((e) => r(e).length)) * H;
-	return Math.max(1, Math.floor(e / (i + U)));
+	let i = Math.max(...n.map((e) => r(e).length)) * B;
+	return Math.max(1, Math.floor(e / (i + V)));
 }
-function X({ scale: e, orientation: t, length: n }) {
-	let r = a.useContext(M), i = e ?? r?.categoryScale, l = r?.layout !== "horizontal", u = t ?? (l ? "bottom" : "left"), d = n ?? (u === "bottom" ? r?.innerHeight : 0) ?? 0, f = r?.categoryTickFormatter ?? ((e) => e);
+function ue({ scale: e, orientation: t, length: n }) {
+	let r = a.useContext(j), i = e ?? r?.categoryScale, l = r?.layout !== "horizontal", u = t ?? (l ? "bottom" : "left"), d = n ?? (u === "bottom" ? r?.innerHeight : 0) ?? 0, f = r?.categoryTickFormatter ?? ((e) => e);
 	if (!i) return null;
-	let p = i.domain(), m = p.map(f), h = ae(i, u === "bottom" ? r?.innerWidth ?? 0 : r?.innerHeight ?? 0), g = (e, t) => {
-		let n = m[e], r = J(n, t);
+	let p = i.domain(), m = p.map(f), h = W(i, u === "bottom" ? r?.innerWidth ?? 0 : r?.innerHeight ?? 0), g = (e, t) => {
+		let n = m[e], r = K(n, t);
 		return /* @__PURE__ */ c(o, { children: [r !== n && /* @__PURE__ */ s("title", { children: n }), r] });
 	};
 	if (u === "bottom") {
-		let e = Math.max(...m.map((e) => e.length * H)), { visible: t, maxWidth: n } = q(p.length, h, e, i.bandwidth() > 0);
+		let e = Math.max(...m.map((e) => e.length * B)), { visible: t, maxWidth: n } = G(p.length, h, e, i.bandwidth() > 0);
 		return /* @__PURE__ */ s("g", {
 			transform: `translate(0,${d})`,
 			"aria-hidden": "true",
@@ -351,7 +357,7 @@ function X({ scale: e, orientation: t, length: n }) {
 			}, e) : null)
 		});
 	}
-	let _ = r?.marginLeft ?? 40, v = Math.max(0, _ - U), y = h > 0 ? Math.max(1, Math.ceil(24 / h)) : p.length, b = K(p.length, y);
+	let _ = r?.marginLeft ?? 40, v = Math.max(0, _ - V), y = h > 0 ? Math.max(1, Math.ceil(24 / h)) : p.length, b = le(p.length, y);
 	return /* @__PURE__ */ s("g", {
 		"aria-hidden": "true",
 		children: p.map((e, t) => b.has(t) ? /* @__PURE__ */ s("text", {
@@ -364,10 +370,10 @@ function X({ scale: e, orientation: t, length: n }) {
 		}, e) : null)
 	});
 }
-function oe({ scale: e, orientation: t, axisId: n, unit: r, length: i, tickCount: o = 5, tickFormatter: c }) {
-	let l = a.useContext(M), u = n && l?.resolveValueScale ? l.resolveValueScale(n) : l?.valueScale, d = e ?? u, f = l?.layout !== "horizontal", p = t ?? (f ? "left" : "bottom"), m = i ?? (p === "bottom" ? l?.innerHeight : 0) ?? 0, h = c ?? l?.valueTickFormatter ?? String, g = r ?? l?.axisUnits?.[n ?? "left"];
+function de({ scale: e, orientation: t, axisId: n, unit: r, length: i, tickCount: o = 5, tickFormatter: c }) {
+	let l = a.useContext(j), u = n && l?.resolveValueScale ? l.resolveValueScale(n) : l?.valueScale, d = e ?? u, f = l?.layout !== "horizontal", p = t ?? (f ? "left" : "bottom"), m = i ?? (p === "bottom" ? l?.innerHeight : 0) ?? 0, h = c ?? l?.valueTickFormatter ?? String, g = r ?? l?.axisUnits?.[n ?? "left"];
 	if (!d) return null;
-	let _ = d.ticks(o), v = p === "left" || p === "right", y = Y(v ? l?.innerHeight ?? 0 : l?.innerWidth ?? 0, v, _, h), b = y >= _.length ? _ : d.ticks(y), x = b.length > 0 ? Math.max(...b) : void 0, S = (e) => {
+	let _ = d.ticks(o), v = p === "left" || p === "right", y = q(v ? l?.innerHeight ?? 0 : l?.innerWidth ?? 0, v, _, h), b = y >= _.length ? _ : d.ticks(y), x = b.length > 0 ? Math.max(...b) : void 0, S = (e) => {
 		let t = h(e);
 		return g && e === x ? `${t} ${g}` : t;
 	};
@@ -387,7 +393,7 @@ function oe({ scale: e, orientation: t, axisId: n, unit: r, length: i, tickCount
 		return /* @__PURE__ */ s("g", {
 			"aria-hidden": "true",
 			children: b.map((t) => /* @__PURE__ */ s("text", {
-				x: e + U,
+				x: e + V,
 				y: d(t),
 				textAnchor: "start",
 				dominantBaseline: "middle",
@@ -409,7 +415,7 @@ function oe({ scale: e, orientation: t, axisId: n, unit: r, length: i, tickCount
 }
 //#endregion
 //#region src/primitives/roundedRect.ts
-function se(e, t, n, r, i) {
+function fe(e, t, n, r, i) {
 	let a = Math.min(i.tl, n / 2, r / 2), o = Math.min(i.tr, n / 2, r / 2), s = Math.min(i.br, n / 2, r / 2), c = Math.min(i.bl, n / 2, r / 2);
 	return [
 		`M${e + a},${t}`,
@@ -426,30 +432,38 @@ function se(e, t, n, r, i) {
 }
 //#endregion
 //#region src/primitives/ChartSlots.tsx
-var ce = a.createContext(null);
-function le() {
-	return a.useContext(ce) || {
+var J = a.createContext(null);
+function pe() {
+	return a.useContext(J) || {
 		tooltip: null,
 		legend: null,
+		brush: null,
 		setTooltip: () => void 0,
-		setLegend: () => void 0
+		setLegend: () => void 0,
+		setBrush: () => void 0
 	};
 }
-function Z({ children: e }) {
-	let [t, n] = a.useState(null), [r, i] = a.useState(null), o = a.useMemo(() => ({
+function Y({ children: e }) {
+	let [t, n] = a.useState(null), [r, i] = a.useState(null), [o, c] = a.useState(null), l = a.useMemo(() => ({
 		tooltip: t,
 		legend: r,
+		brush: o,
 		setTooltip: n,
-		setLegend: i
-	}), [t, r]);
-	return /* @__PURE__ */ s(ce.Provider, {
-		value: o,
+		setLegend: i,
+		setBrush: c
+	}), [
+		t,
+		r,
+		o
+	]);
+	return /* @__PURE__ */ s(J.Provider, {
+		value: l,
 		children: e
 	});
 }
 //#endregion
 //#region src/primitives/useResolvedCssLength.tsx
-function Q(e, t) {
+function me(e, t) {
 	let n = a.useRef(null), [r, i] = a.useState(t), o = a.useCallback(() => {
 		let e = n.current;
 		if (!e) return;
@@ -473,13 +487,18 @@ function Q(e, t) {
 	})];
 }
 //#endregion
+//#region src/primitives/useDevWarning.ts
+function he(e) {
+	a.useRef(null), a.useEffect(() => {}, [e]);
+}
+//#endregion
 //#region src/lib/resolveChartState.ts
-function $(e, t) {
+function ge(e, t) {
 	return e ?? (t === 0 ? "empty" : "ready");
 }
 //#endregion
 //#region src/primitives/BarChartSkeleton.tsx
-var ue = [
+var X = [
 	{
 		x: 55,
 		height: 120
@@ -505,7 +524,7 @@ var ue = [
 		height: 85
 	}
 ];
-function de({ ariaLabel: t = "Loading chart", className: n, ...r }) {
+function Z({ ariaLabel: t = "Loading chart", className: n, ...r }) {
 	return /* @__PURE__ */ s("div", {
 		role: "img",
 		"aria-label": t,
@@ -514,7 +533,7 @@ function de({ ariaLabel: t = "Loading chart", className: n, ...r }) {
 		...r,
 		children: /* @__PURE__ */ s("div", {
 			className: "flex min-h-0 flex-1 items-end gap-2 px-8 py-4",
-			children: ue.map((e) => /* @__PURE__ */ s("div", {
+			children: X.map((e) => /* @__PURE__ */ s("div", {
 				className: "flex-1 animate-pulse rounded-t-sm bg-muted",
 				style: { height: `${e.height / 200 * 100}%` }
 			}, e.x))
@@ -523,7 +542,7 @@ function de({ ariaLabel: t = "Loading chart", className: n, ...r }) {
 }
 //#endregion
 //#region src/primitives/LineChartSkeleton.tsx
-function fe({ ariaLabel: t = "Loading chart", className: n, ...r }) {
+function _e({ ariaLabel: t = "Loading chart", className: n, ...r }) {
 	return /* @__PURE__ */ s("div", {
 		role: "img",
 		"aria-label": t,
@@ -556,25 +575,165 @@ function fe({ ariaLabel: t = "Loading chart", className: n, ...r }) {
 }
 //#endregion
 //#region src/primitives/CartesianChartSkeleton.tsx
-function pe({ ariaLabel: t = "Loading chart", className: n, ...r }) {
+function ve({ ariaLabel: t = "Loading chart", className: n, ...r }) {
 	return /* @__PURE__ */ c("div", {
 		role: "img",
 		"aria-label": t,
 		"aria-busy": "true",
 		className: e("relative flex h-full w-full overflow-hidden", n),
 		...r,
-		children: [/* @__PURE__ */ s(de, {
+		children: [/* @__PURE__ */ s(Z, {
 			"aria-hidden": "true",
 			className: "absolute inset-0"
-		}), /* @__PURE__ */ s(fe, {
+		}), /* @__PURE__ */ s(_e, {
 			"aria-hidden": "true",
 			className: "absolute inset-0"
 		})]
 	});
 }
 //#endregion
+//#region src/primitives/cartesianGeometry.ts
+function ye(e, t) {
+	let n = t.bandwidth() / 2;
+	return e.map((e) => (t(e) ?? 0) + n);
+}
+function be(e, t, n, r) {
+	return r === "vertical" ? e.clientX - t.left - n.left : e.clientY - t.top - n.top;
+}
+function Q(e, t) {
+	return Math.min(Math.max(e, 0), t);
+}
+function xe(e, t) {
+	if (t.length === 0) return -1;
+	let n = 0, r = Infinity;
+	for (let i = 0; i < t.length; i++) {
+		let a = Math.abs(e - t[i]);
+		a < r && (r = a, n = i);
+	}
+	return n;
+}
+function Se(e, t) {
+	return e <= t ? {
+		startIndex: e,
+		endIndex: t
+	} : {
+		startIndex: t,
+		endIndex: e
+	};
+}
+function Ce(e, t) {
+	return e.startIndex === t.startIndex && e.endIndex === t.endIndex;
+}
+function we(e) {
+	return e.endIndex - e.startIndex + 1;
+}
+function $(e, t, n) {
+	let r = e > 0 ? (t[e - 1] + t[e]) / 2 : 0, i = e < t.length - 1 ? (t[e] + t[e + 1]) / 2 : n;
+	return {
+		start: Q(r, n),
+		end: Q(i, n)
+	};
+}
+function Te(e, t, n) {
+	return {
+		start: $(e.startIndex, t, n).start,
+		end: $(e.endIndex, t, n).end
+	};
+}
+function Ee(e, t, n) {
+	return Math.abs(t - e) >= n;
+}
+function De(e, t) {
+	return t < 2 ? !0 : e === "auto" ? t <= 4 : e;
+}
+//#endregion
+//#region src/primitives/ChartBrushOverlay.tsx
+var Oe = "var(--primary)", ke = "var(--muted-foreground)", Ae = "var(--background)", je = .1, Me = .45, Ne = 6;
+function Pe({ draft: e, centers: t, extent: n, crossExtent: r, layout: i, label: a }) {
+	let { start: l, end: u } = Te(e.range, t, n), d = i === "vertical", f = (e, t) => d ? {
+		x: e,
+		y: 0,
+		width: Math.max(0, t - e),
+		height: r
+	} : {
+		x: 0,
+		y: e,
+		width: r,
+		height: Math.max(0, t - e)
+	}, p = (e) => d ? {
+		x1: e,
+		x2: e,
+		y1: 0,
+		y2: r
+	} : {
+		x1: 0,
+		x2: r,
+		y1: e,
+		y2: e
+	}, m = e.tooNarrow ? ke : Oe, h = P(a.length), g = (l + u) / 2, _ = d ? {
+		x: Q(g - h / 2, Math.max(0, n - h)),
+		y: Ne
+	} : {
+		x: Ne,
+		y: Q(g - 20 / 2, Math.max(0, n - 20))
+	};
+	return /* @__PURE__ */ c("g", {
+		"aria-hidden": "true",
+		"data-slot": "chart-brush",
+		"data-state": e.tooNarrow ? "too-narrow" : "selecting",
+		className: "pointer-events-none",
+		children: [
+			!e.tooNarrow && /* @__PURE__ */ c(o, { children: [
+				/* @__PURE__ */ s("rect", {
+					...f(0, l),
+					fill: Ae,
+					fillOpacity: Me
+				}),
+				/* @__PURE__ */ s("rect", {
+					...f(u, n),
+					fill: Ae,
+					fillOpacity: Me
+				}),
+				/* @__PURE__ */ s("rect", {
+					...f(l, u),
+					"data-slot": "chart-brush-band",
+					fill: Oe,
+					fillOpacity: je
+				})
+			] }),
+			/* @__PURE__ */ s("line", {
+				...p(l),
+				"data-slot": "chart-brush-edge",
+				stroke: m,
+				strokeWidth: 1,
+				shapeRendering: "crispEdges"
+			}),
+			/* @__PURE__ */ s("line", {
+				...p(u),
+				"data-slot": "chart-brush-edge",
+				stroke: m,
+				strokeWidth: 1,
+				shapeRendering: "crispEdges"
+			}),
+			/* @__PURE__ */ s("foreignObject", {
+				x: _.x,
+				y: _.y,
+				width: h,
+				height: 20,
+				overflow: "visible",
+				children: /* @__PURE__ */ s("span", {
+					"data-slot": "chart-brush-label",
+					className: ie,
+					style: F(m),
+					children: a
+				})
+			})
+		]
+	});
+}
+//#endregion
 //#region src/primitives/ChartEmptyState.tsx
-function me({ ariaLabel: a, className: o, ...l }) {
+function Fe({ ariaLabel: a, className: o, ...l }) {
 	return /* @__PURE__ */ s("div", {
 		role: "img",
 		"aria-label": a,
@@ -585,7 +744,7 @@ function me({ ariaLabel: a, className: o, ...l }) {
 }
 //#endregion
 //#region src/primitives/TooltipPortal.tsx
-function he({ state: e, containerRef: t, chartId: n, children: r }) {
+function Ie({ state: e, containerRef: t, chartId: n, children: r }) {
 	let i = a.useRef(null), [o, c] = a.useState({
 		x: 0,
 		y: 0,
@@ -628,9 +787,101 @@ function he({ state: e, containerRef: t, chartId: n, children: r }) {
 		children: r
 	}), document.body);
 }
+var Le = { status: "idle" };
+function Re(e, t, n) {
+	try {
+		n === "set" ? e.setPointerCapture(t) : e.releasePointerCapture(t);
+	} catch {}
+}
+function ze(e) {
+	return Math.max(1, Math.floor(e) || 1);
+}
+function Be(e) {
+	let { slot: t, extent: n, layout: r, categoryKey: i } = e, o = t !== null && !t.disabled, s = a.useRef(e), c = a.useRef(t);
+	a.useLayoutEffect(() => {
+		s.current = e, e.slot && (c.current = e.slot);
+	});
+	let l = a.useRef(Le), u = a.useRef(null), [d, f] = a.useState(null), p = a.useMemo(() => {
+		let e = (e) => {
+			let { plotRef: t, margin: n, layout: r, extent: i } = s.current, a = t.current?.getBoundingClientRect();
+			return a ? Q(be(e, a, n, r), i) : null;
+		}, t = (e) => {
+			let t = l.current;
+			if (l.current = Le, u.current &&= (document.removeEventListener("keydown", u.current), null), t.status !== "dragging") return;
+			f(null);
+			let n = s.current.slot ?? c.current;
+			n && (e === "commit" && we(t.range) >= ze(n.minCategories) ? n.onBrushEnd(t.range) : n.onBrushCancel?.());
+		}, n = (n) => {
+			let { slot: r, centers: i } = s.current;
+			if (!r || r.disabled || n.button !== 0 || l.current.status !== "idle") return;
+			let a = e(n);
+			if (a === null) return;
+			let o = xe(a, i);
+			if (o < 0) return;
+			Re(n.currentTarget, n.pointerId, "set"), l.current = {
+				status: "pending",
+				pointerId: n.pointerId,
+				origin: a,
+				originIndex: o
+			};
+			let c = (e) => {
+				e.key === "Escape" && t("cancel");
+			};
+			u.current = c, document.addEventListener("keydown", c);
+		}, r = (t) => {
+			let n = l.current;
+			if (n.status === "idle" || t.pointerId !== n.pointerId) return;
+			let r = e(t);
+			if (r === null || n.status === "pending" && !Ee(n.origin, r, 4)) return;
+			let { centers: i, slot: a, onDragStart: o } = s.current, c = xe(r, i);
+			if (c < 0) return;
+			let u = Se(n.originIndex, c);
+			n.status === "dragging" && Ce(n.range, u) || (n.status === "pending" && o(), l.current = {
+				status: "dragging",
+				pointerId: n.pointerId,
+				originIndex: n.originIndex,
+				range: u
+			}, f({
+				range: u,
+				tooNarrow: we(u) < ze(a?.minCategories ?? 1)
+			}), a?.onBrushChange?.(u));
+		}, i = (e) => {
+			let n = l.current;
+			n.status === "idle" || e.pointerId !== n.pointerId || (Re(e.currentTarget, e.pointerId, "release"), t("commit"));
+		}, a = (e) => {
+			let n = l.current;
+			n.status === "idle" || e.pointerId !== n.pointerId || t("cancel");
+		};
+		return {
+			handlers: {
+				onPointerDown: n,
+				onPointerMove: r,
+				onPointerUp: i,
+				onPointerCancel: a,
+				onLostPointerCapture: a
+			},
+			cancel: () => t("cancel"),
+			isDragging: () => l.current.status === "dragging"
+		};
+	}, []);
+	return a.useEffect(() => {
+		l.current.status !== "idle" && p.cancel();
+	}, [
+		i,
+		n,
+		r,
+		o,
+		p
+	]), a.useEffect(() => () => p.cancel(), [p]), {
+		active: o,
+		draft: d,
+		isDragging: p.isDragging,
+		handlers: p.handlers
+	};
+}
 //#endregion
 //#region src/primitives/CartesianChart.tsx
-function ge(e) {
+function Ve(e) {
 	let t = [], n = (e) => {
 		a.Children.forEach(e, (e) => {
 			if (!a.isValidElement(e)) return;
@@ -652,7 +903,11 @@ function ge(e) {
 	};
 	return n(e), t;
 }
-function _e(e) {
+function He(e, t, n) {
+	let r = n(t[e.startIndex] ?? ""), i = n(t[e.endIndex] ?? "");
+	return e.startIndex === e.endIndex ? r : `${r} – ${i}`;
+}
+function Ue(e) {
 	let t = !1, n = (e) => {
 		a.Children.forEach(e, (e) => {
 			if (t || !a.isValidElement(e)) return;
@@ -666,17 +921,17 @@ function _e(e) {
 	};
 	return n(e), t;
 }
-function ve({ state: e, className: t, data: n, margin: r, categoryPadding: i, categoryScaleType: a, layout: o, colorMode: c, animated: l, ariaLabel: u, valueTickFormatter: d, categoryTickFormatter: f, onPointHover: p, onPointLeave: m, children: h, ...g }) {
-	let _ = $(e, n.length);
-	return _ === "loading" ? /* @__PURE__ */ s(pe, {
+function We({ state: e, className: t, data: n, margin: r, categoryPadding: i, categoryScaleType: a, layout: o, colorMode: c, animated: l, ariaLabel: u, valueTickFormatter: d, categoryTickFormatter: f, onPointHover: p, onPointLeave: m, children: h, ...g }) {
+	let _ = ge(e, n.length);
+	return _ === "loading" ? /* @__PURE__ */ s(ve, {
 		ariaLabel: u,
 		className: t,
 		...g
-	}) : _ === "empty" ? /* @__PURE__ */ s(me, {
+	}) : _ === "empty" ? /* @__PURE__ */ s(Fe, {
 		ariaLabel: u ?? "No data",
 		className: t,
 		...g
-	}) : /* @__PURE__ */ s(Z, { children: /* @__PURE__ */ s(ye, {
+	}) : /* @__PURE__ */ s(Y, { children: /* @__PURE__ */ s(Ge, {
 		data: n,
 		margin: r,
 		categoryPadding: i,
@@ -694,9 +949,9 @@ function ve({ state: e, className: t, data: n, margin: r, categoryPadding: i, ca
 		children: h
 	}) });
 }
-function ye({ data: t, margin: n, categoryPadding: r = .1, categoryScaleType: i = "band", layout: o = "vertical", colorMode: h = "series", animated: g = !0, ariaLabel: v, valueTickFormatter: b = _, categoryTickFormatter: S = String, onPointHover: w, onPointLeave: T, className: E, children: D, ...k }) {
-	let { config: A, id: j } = C(), { tooltip: N, legend: P } = le(), F = a.useMemo(() => _e(D), [D]), I = a.useMemo(() => {
-		let e = ge(D), n = {};
+function Ge({ data: t, margin: n, categoryPadding: r = .1, categoryScaleType: i = "band", layout: o = "vertical", colorMode: h = "series", animated: g = !0, ariaLabel: v, valueTickFormatter: b = _, categoryTickFormatter: S = String, onPointHover: w, onPointLeave: T, className: ee, children: E, ...O }) {
+	let { config: k, id: A } = C(), { tooltip: M, legend: N, brush: ne } = pe(), re = a.useMemo(() => Ue(E), [E]), ie = a.useMemo(() => {
+		let e = Ve(E), n = {};
 		for (let r of ["left", "right"]) {
 			let i = e.filter((e) => (e.axisId ?? "left") === r).map((e) => e.dataKey);
 			if (i.length === 0) continue;
@@ -709,7 +964,7 @@ function ye({ data: t, margin: n, categoryPadding: r = .1, categoryScaleType: i
 			}
 			let o = b(Math.ceil(a * 1.1)), s = "";
 			for (let t of e) if ((t.axisId ?? "left") === r) {
-				let e = A[t.dataKey]?.unit;
+				let e = k[t.dataKey]?.unit;
 				if (e) {
 					s = e;
 					break;
@@ -719,18 +974,18 @@ function ye({ data: t, margin: n, categoryPadding: r = .1, categoryScaleType: i
 		}
 		return n;
 	}, [
-		D,
+		E,
 		t,
-		A,
+		k,
 		b
-	]), L = {
+	]), P = {
 		...y,
 		...n
 	};
-	I.left !== void 0 && n?.left === void 0 && (L.left = Math.max(L.left, I.left)), F && n?.right === void 0 && (L.right = Math.max(L.right, I.right ?? 40));
-	let R = o === "vertical", z = a.useRef(null), te = a.useRef(null), B = O(te), V = ee(), [ne, re] = a.useState(null), [H, U] = a.useState(null), W = a.useCallback((e) => U(e), []), ie = a.useCallback(() => U(null), []), G = Math.max(0, B.width - L.left - L.right), K = Math.max(0, B.height - L.top - L.bottom), ae = L.left, q = a.useMemo(() => t.map((e) => e.category), [t]), J = a.useMemo(() => ge(D), [D]), Y = a.useMemo(() => J.map((e) => e.dataKey), [J]), X = a.useMemo(() => {
+	ie.left !== void 0 && n?.left === void 0 && (P.left = Math.max(P.left, ie.left)), re && n?.right === void 0 && (P.right = Math.max(P.right, ie.right ?? 40));
+	let F = o === "vertical", I = a.useRef(null), L = a.useRef(null), R = D(L), z = te(), [ae, oe] = a.useState(null), [se, B] = a.useState(null), V = a.useCallback((e) => B(e), []), ce = a.useCallback(() => B(null), []), H = Math.max(0, R.width - P.left - P.right), U = Math.max(0, R.height - P.top - P.bottom), le = P.left, W = a.useMemo(() => t.map((e) => e.category), [t]), G = a.useMemo(() => Ve(E), [E]), K = a.useMemo(() => G.map((e) => e.dataKey), [G]), q = a.useMemo(() => {
 		let e = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map();
-		for (let e of J) {
+		for (let e of G) {
 			if (!e.stackId) continue;
 			let t = n.get(e.stackId) ?? [];
 			t.push(e.dataKey), n.set(e.stackId, t);
@@ -745,20 +1000,20 @@ function ye({ data: t, margin: n, categoryPadding: r = .1, categoryScaleType: i
 			e.set(r, n(t));
 		}
 		return e;
-	}, [t, J]), oe = a.useMemo(() => J.filter((e) => e.seriesType === "BarSeries" && !e.stackId).map((e) => e.dataKey), [J]), se = a.useMemo(() => {
+	}, [t, G]), ue = a.useMemo(() => G.filter((e) => e.seriesType === "BarSeries" && !e.stackId).map((e) => e.dataKey), [G]), de = a.useMemo(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of J) {
+		for (let t of G) {
 			let n = t.axisId ?? "left", r = e.get(n) ?? [];
 			r.push(t.dataKey), e.set(n, r);
 		}
 		return e;
-	}, [J]), ce = a.useMemo(() => {
+	}, [G]), fe = a.useMemo(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let [n, r] of se) {
-			let i = new Set(r), a = J.some((e) => e.stackId && i.has(e.dataKey)), o = r.filter((e) => !J.find((t) => t.dataKey === e && t.stackId));
+		for (let [n, r] of de) {
+			let i = new Set(r), a = G.some((e) => e.stackId && i.has(e.dataKey)), o = r.filter((e) => !G.find((t) => t.dataKey === e && t.stackId));
 			if (a) {
 				let r = -Infinity;
-				for (let e of X.values()) if (e.some((e) => i.has(e.key))) for (let t of e) for (let e of t) e[1] > r && (r = e[1]);
+				for (let e of q.values()) if (e.some((e) => i.has(e.key))) for (let t of e) for (let e of t) e[1] > r && (r = e[1]);
 				for (let e of t) for (let t of o) {
 					let n = e[t];
 					if (n == null) continue;
@@ -779,45 +1034,47 @@ function ye({ data: t, margin: n, categoryPadding: r = .1, categoryScaleType: i
 		}
 		return e;
 	}, [
-		se,
+		de,
 		t,
-		X,
-		J
-	]), Z = a.useMemo(() => i === "point" ? Object.assign(d().domain(q).range([0, R ? G : K]).padding(0), { bandwidth: () => 0 }) : l().domain(q).range([0, R ? G : K]).padding(r), [
 		q,
+		G
+	]), J = a.useMemo(() => i === "point" ? Object.assign(d().domain(W).range([0, F ? H : U]).padding(0), { bandwidth: () => 0 }) : l().domain(W).range([0, F ? H : U]).padding(r), [
+		W,
 		i,
 		r,
-		R,
-		G,
-		K
-	]), Q = a.useMemo(() => {
+		F,
+		H,
+		U
+	]), Y = a.useMemo(() => ye(W, J), [W, J]), me = F ? H : U, ge = a.useMemo(() => W.join(""), [W]);
+	he(a.useMemo(() => null, [W])), he(a.useMemo(() => null, [ne?.minCategories, t.length]));
+	let X = a.useMemo(() => {
 		let e = {};
-		for (let [t, [n, r]] of ce) e[t] = u().domain([Math.min(0, n), r * 1.1 || 1]).nice().range(R ? [K, 0] : [0, G]);
-		return e.left ||= u().domain([0, 1]).nice().range(R ? [K, 0] : [0, G]), e;
+		for (let [t, [n, r]] of fe) e[t] = u().domain([Math.min(0, n), r * 1.1 || 1]).nice().range(F ? [U, 0] : [0, H]);
+		return e.left ||= u().domain([0, 1]).nice().range(F ? [U, 0] : [0, H]), e;
 	}, [
-		ce,
-		R,
-		K,
-		G
-	]), $ = Q.left, ue = a.useCallback((e) => e ? Q[e] ?? $ : $, [$, Q]), de = a.useMemo(() => {
+		fe,
+		F,
+		U,
+		H
+	]), Z = X.left, _e = a.useCallback((e) => e ? X[e] ?? Z : Z, [Z, X]), ve = a.useMemo(() => {
 		let e = {};
-		for (let t of J) {
+		for (let t of G) {
 			let n = t.axisId ?? "left";
 			if (e[n]) continue;
-			let r = A[t.dataKey]?.unit;
+			let r = k[t.dataKey]?.unit;
 			r && (e[n] = r);
 		}
 		return e;
-	}, [J, A]), fe = a.useMemo(() => oe.length <= 1 ? null : l().domain(oe).range([0, Z.bandwidth()]).padding(.05), [oe, Z]), pe = h === "category" ? q.map((e) => ({
+	}, [G, k]), Q = a.useMemo(() => ue.length <= 1 ? null : l().domain(ue).range([0, J.bandwidth()]).padding(.05), [ue, J]), Se = h === "category" ? W.map((e) => ({
 		dataKey: e,
 		value: e
-	})) : Y.map((e) => ({
+	})) : K.map((e) => ({
 		dataKey: e,
 		value: e
 	}));
-	function me(e) {
+	function Ce(e) {
 		if (h === "category") {
-			let t = Y[0], n = t === void 0 ? 0 : Number(e[t]) || 0;
+			let t = K[0], n = t === void 0 ? 0 : Number(e[t]) || 0;
 			return [{
 				dataKey: e.category,
 				name: e.category,
@@ -825,47 +1082,53 @@ function ye({ data: t, margin: n, categoryPadding: r = .1, categoryScaleType: i
 				color: `var(--color-${x(e.category)})`
 			}];
 		}
-		return Y.filter((t) => e[t] !== null && e[t] !== void 0).map((t) => ({
+		return K.filter((t) => e[t] !== null && e[t] !== void 0).map((t) => ({
 			dataKey: t,
 			name: t,
 			value: Number(e[t]) || 0
 		}));
 	}
-	function ve(e) {
-		let n = z.current?.getBoundingClientRect();
+	function we() {
+		oe(null), z.hide(), T?.();
+	}
+	let $ = Be({
+		slot: ne,
+		centers: Y,
+		extent: me,
+		layout: o,
+		margin: P,
+		plotRef: I,
+		onDragStart: we,
+		categoryKey: ge
+	}), Te = $.draft ? He($.draft.range, W, S) : "";
+	function Ee(e) {
+		if ($.isDragging()) return;
+		let n = I.current?.getBoundingClientRect();
 		if (!n) return;
-		let r = R ? e.clientX - n.left - L.left : e.clientY - n.top - L.top, i = 0, a = Infinity;
-		for (let e = 0; e < q.length; e++) {
-			let t = (Z(q[e]) ?? 0) + Z.bandwidth() / 2, n = Math.abs(r - t);
-			n < a && (a = n, i = e);
-		}
-		let o = t[i];
-		if (!o) return;
-		re(o.category);
-		let s = me(o), c = (Z(o.category) ?? 0) + Z.bandwidth() / 2, l = R ? {
-			clientX: n.left + L.left + c,
+		let r = xe(be(e, n, P, o), Y), i = t[r];
+		if (!i) return;
+		oe(i.category);
+		let a = Ce(i), s = Y[r], c = F ? {
+			clientX: n.left + P.left + s,
 			clientY: e.clientY
 		} : {
 			clientX: e.clientX,
-			clientY: n.top + L.top + c
+			clientY: n.top + P.top + s
 		};
-		N && V.show(s, o.category, l, n), w?.(s, o.category, e);
-	}
-	function ye() {
-		re(null), V.hide(), T?.();
+		M && z.show(a, i.category, c, n), w?.(a, i.category, e);
 	}
-	let be = a.useCallback((e, n) => {
-		if (!N) return;
-		let r = z.current?.getBoundingClientRect();
+	let De = a.useCallback((e, n) => {
+		if (!M) return;
+		let r = I.current?.getBoundingClientRect();
 		if (!r) return;
 		let i = t.find((t) => t.category === e);
 		if (!i) return;
 		let a = h === "category" ? [{
 			dataKey: e,
 			name: e,
-			value: Y[0] === void 0 ? 0 : Number(i[Y[0]]) || 0,
+			value: K[0] === void 0 ? 0 : Number(i[K[0]]) || 0,
 			color: `var(--color-${x(e)})`
-		}] : Y.filter((e) => i[e] !== null && i[e] !== void 0).map((e) => ({
+		}] : K.filter((e) => i[e] !== null && i[e] !== void 0).map((e) => ({
 			dataKey: e,
 			name: e,
 			value: Number(i[e]) || 0
@@ -873,130 +1136,140 @@ function ye({ data: t, margin: n, categoryPadding: r = .1, categoryScaleType: i
 			clientX: n.left + n.width / 2,
 			clientY: n.top + n.height / 2
 		};
-		V.show(a, e, o, r);
+		z.show(a, e, o, r);
 	}, [
-		N,
+		M,
 		t,
-		Y,
+		K,
 		h,
-		V
-	]), xe = a.useCallback(() => {
-		V.hide();
-	}, [V]), Se = P?.verticalAlign ?? "bottom", Ce = v ?? `Chart with ${t.length} categor${t.length === 1 ? "y" : "ies"} and ${Y.length} series`, we = a.useMemo(() => ({
+		z
+	]), Oe = a.useCallback(() => {
+		z.hide();
+	}, [z]), ke = N?.verticalAlign ?? "bottom", Ae = v ?? `Chart with ${t.length} categor${t.length === 1 ? "y" : "ies"} and ${K.length} series`, je = a.useMemo(() => ({
 		data: t,
-		dataKeys: Y,
+		dataKeys: K,
 		colorMode: h,
-		categoryScale: Z,
-		valueScale: $,
-		valueScales: Q,
-		resolveValueScale: ue,
-		axisUnits: de,
-		innerWidth: G,
-		innerHeight: K,
-		marginLeft: ae,
+		categoryScale: J,
+		valueScale: Z,
+		valueScales: X,
+		resolveValueScale: _e,
+		axisUnits: ve,
+		innerWidth: H,
+		innerHeight: U,
+		marginLeft: le,
 		layout: o,
 		animated: g,
-		hoveredCategory: ne,
-		hoveredLegendKey: H,
-		config: A,
-		stackedLayers: X,
-		barGroupScale: fe,
+		hoveredCategory: ae,
+		hoveredLegendKey: se,
+		config: k,
+		stackedLayers: q,
+		barGroupScale: Q,
 		valueTickFormatter: b,
 		categoryTickFormatter: S,
-		chartWrapperRef: z,
-		chartId: j,
-		showTooltipAt: be,
-		hideTooltip: xe
+		chartWrapperRef: I,
+		chartId: A,
+		showTooltipAt: De,
+		hideTooltip: Oe
 	}), [
 		t,
-		Y,
+		K,
 		h,
+		J,
 		Z,
-		$,
-		Q,
-		ue,
-		de,
-		G,
-		K,
-		ae,
+		X,
+		_e,
+		ve,
+		H,
+		U,
+		le,
 		o,
 		g,
-		ne,
-		H,
-		A,
-		X,
-		fe,
+		ae,
+		se,
+		k,
+		q,
+		Q,
 		b,
 		S,
-		j,
-		be,
-		xe
+		A,
+		De,
+		Oe
 	]);
-	return /* @__PURE__ */ s(M.Provider, {
-		value: we,
+	return /* @__PURE__ */ s(j.Provider, {
+		value: je,
 		children: /* @__PURE__ */ c("div", {
-			className: e("flex h-full w-full flex-col", E),
-			...k,
+			className: e("flex h-full w-full flex-col", ee),
+			...O,
 			children: [
-				P && Se === "top" && a.cloneElement(P.content, {
-					items: pe,
+				N && ke === "top" && a.cloneElement(N.content, {
+					items: Se,
 					verticalAlign: "top",
-					onItemHover: W,
-					onItemLeave: ie,
-					hoveredLegendKey: H
+					onItemHover: V,
+					onItemLeave: ce,
+					hoveredLegendKey: se
 				}),
 				/* @__PURE__ */ c("div", {
-					ref: z,
-					className: "relative min-h-0 flex-1",
-					onMouseMove: ve,
-					onMouseLeave: ye,
+					ref: I,
+					"data-slot": "chart-plot",
+					"data-dashboard-grid-no-drag": $.active ? "" : void 0,
+					className: e("relative min-h-0 flex-1", $.active && "cursor-crosshair select-none", $.active && (F ? "touch-pan-y" : "touch-pan-x")),
+					onMouseMove: Ee,
+					onMouseLeave: we,
+					...$.handlers,
 					children: [
 						/* @__PURE__ */ s("svg", {
-							ref: te,
+							ref: L,
 							role: "img",
-							"aria-label": Ce,
+							"aria-label": Ae,
 							className: "h-full w-full",
 							overflow: "visible",
-							children: B.width > 0 && B.height > 0 && /* @__PURE__ */ s("g", {
-								transform: `translate(${L.left},${L.top})`,
-								children: D
+							children: R.width > 0 && R.height > 0 && /* @__PURE__ */ c("g", {
+								transform: `translate(${P.left},${P.top})`,
+								children: [E, $.draft && /* @__PURE__ */ s(Pe, {
+									draft: $.draft,
+									centers: Y,
+									extent: me,
+									crossExtent: F ? U : H,
+									layout: o,
+									label: Te
+								})]
 							})
 						}),
 						/* @__PURE__ */ s("div", {
 							className: "sr-only",
 							children: /* @__PURE__ */ c("table", { children: [
-								/* @__PURE__ */ s("caption", { children: Ce }),
+								/* @__PURE__ */ s("caption", { children: Ae }),
 								/* @__PURE__ */ s("thead", { children: /* @__PURE__ */ c("tr", { children: [/* @__PURE__ */ s("th", {
 									scope: "col",
 									children: "Category"
-								}), Y.map((e) => /* @__PURE__ */ s("th", {
+								}), K.map((e) => /* @__PURE__ */ s("th", {
 									scope: "col",
-									children: typeof A[e]?.label == "string" ? A[e]?.label : e
+									children: typeof k[e]?.label == "string" ? k[e]?.label : e
 								}, e))] }) }),
 								/* @__PURE__ */ s("tbody", { children: t.map((e) => /* @__PURE__ */ c("tr", { children: [/* @__PURE__ */ s("th", {
 									scope: "row",
 									children: e.category
-								}), Y.map((t) => /* @__PURE__ */ s("td", { children: e[t] !== null && e[t] !== void 0 ? b(Number(e[t]) || 0) : "—" }, t))] }, e.category)) })
+								}), K.map((t) => /* @__PURE__ */ s("td", { children: e[t] !== null && e[t] !== void 0 ? b(Number(e[t]) || 0) : "—" }, t))] }, e.category)) })
 							] })
 						}),
-						N && V.state && /* @__PURE__ */ s(he, {
-							state: V.state,
-							containerRef: z,
-							chartId: j,
-							children: a.cloneElement(N.content, {
-								label: V.state.label,
-								items: V.state.items,
+						M && z.state && /* @__PURE__ */ s(Ie, {
+							state: z.state,
+							containerRef: I,
+							chartId: A,
+							children: a.cloneElement(M.content, {
+								label: z.state.label,
+								items: z.state.items,
 								active: !0
 							})
 						})
 					]
 				}),
-				P && Se === "bottom" && a.cloneElement(P.content, {
-					items: pe,
+				N && ke === "bottom" && a.cloneElement(N.content, {
+					items: Se,
 					verticalAlign: "bottom",
-					onItemHover: W,
-					onItemLeave: ie,
-					hoveredLegendKey: H
+					onItemHover: V,
+					onItemLeave: ce,
+					hoveredLegendKey: se
 				})
 			]
 		})
@@ -1004,7 +1277,7 @@ function ye({ data: t, margin: n, categoryPadding: r = .1, categoryScaleType: i
 }
 //#endregion
 //#region src/primitives/AreaChartSkeleton.tsx
-function be({ ariaLabel: t = "Loading chart", className: n, ...r }) {
+function Ke({ ariaLabel: t = "Loading chart", className: n, ...r }) {
 	return /* @__PURE__ */ s("div", {
 		role: "img",
 		"aria-label": t,
@@ -1050,7 +1323,7 @@ function be({ ariaLabel: t = "Loading chart", className: n, ...r }) {
 }
 //#endregion
 //#region src/primitives/SkeletonBlock.tsx
-function xe({ className: t, ...n }) {
+function qe({ className: t, ...n }) {
 	return /* @__PURE__ */ s("div", {
 		className: e("animate-pulse rounded-md bg-muted", t),
 		...n
@@ -1058,7 +1331,7 @@ function xe({ className: t, ...n }) {
 }
 //#endregion
 //#region src/primitives/DoughnutChartSkeleton.tsx
-function Se({ ariaLabel: t = "Loading chart", className: n, ...r }) {
+function Je({ ariaLabel: t = "Loading chart", className: n, ...r }) {
 	return /* @__PURE__ */ s("div", {
 		role: "img",
 		"aria-label": t,
@@ -1082,4 +1355,4 @@ function Se({ ariaLabel: t = "Loading chart", className: n, ...r }) {
 	});
 }
 //#endregion
-export { C, _ as D, y as E, D as S, v as T, P as _, he as a, O as b, de as c, Z as d, le as f, te as g, oe as h, ve as i, $ as l, X as m, xe as n, me as o, se as p, be as r, fe as s, Se as t, Q as u, N as v, x as w, E as x, ee as y };
+export { _ as A, D as C, x as D, C as E, v as O, te as S, E as T, de as _, Ie as a, j as b, _e as c, he as d, me as f, ue as g, fe as h, We as i, y as k, Z as l, pe as m, qe as n, Fe as o, Y as p, Ke as r, De as s, Je as t, ge as u, z as v, ee as w, M as x, N as y };