@patterninc/pattern-ui 0.0.0-main.20260929.db2f8e8fde0d

package/dist/components/Charts/bar-squares.js

@@ -0,0 +1,651 @@
+"use client";
+
+import { chartCssVars, useChart, useChartStable, useYScale } from "./chart-context.js";
+import { useChartLegendHover } from "./chart-legend-hover.js";
+import { computeSquareColumn } from "./bar-squares-layout.js";
+import { resolveGroupedBarLayout } from "./grouped-bar-layout.js";
+import { transitionWithDelay } from "./motion-utils.js";
+import { renderPatternPreset } from "./pattern-preset.js";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useId } from "react";
+import { motion } from "motion/react";
+
+//#region src/components/Charts/bar-squares.tsx
+function isPatternFill(fill) {
+	return fill.startsWith("url(");
+}
+/** Delay between stacked squares within one column (bottom → top). */
+function squareCascadeStepSeconds(enterTransition, animationDurationMs, squareCount) {
+	if (squareCount <= 1) return 0;
+	return (enterTransition?.type === "tween" && typeof enterTransition.duration === "number" ? enterTransition.duration * 1e3 : animationDurationMs) * .4 / 1e3 / (squareCount - 1);
+}
+function cascadeColumnTransition(enterTransition, animationDurationMs, columnIndex, columnStaggerDelay, squareCount) {
+	const cascadeStep = squareCascadeStepSeconds(enterTransition, animationDurationMs, squareCount);
+	const base = transitionWithDelay(enterTransition, columnIndex * columnStaggerDelay);
+	if (squareCount <= 1 || base.type !== "tween") return base;
+	const baseDuration = typeof base.duration === "number" ? base.duration : animationDurationMs / 1e3;
+	return {
+		...base,
+		duration: baseDuration + cascadeStep * (squareCount - 1)
+	};
+}
+function SquareColumn(t0) {
+	const $ = c(39);
+	const { x, baselineY, barLengthPx, squareSize, squareGap, squareRadius, squareFit, fill, useGradient, gradientStops, patternPreset, index, isFaded, fadedOpacity, animate, staggerDelay, animationDuration, enterTransition, revealEpoch } = t0;
+	let gradientDefs;
+	let t1;
+	if ($[0] !== animate || $[1] !== animationDuration || $[2] !== barLengthPx || $[3] !== baselineY || $[4] !== enterTransition || $[5] !== fadedOpacity || $[6] !== fill || $[7] !== gradientStops || $[8] !== index || $[9] !== isFaded || $[10] !== patternPreset || $[11] !== revealEpoch || $[12] !== squareFit || $[13] !== squareGap || $[14] !== squareRadius || $[15] !== squareSize || $[16] !== staggerDelay || $[17] !== useGradient || $[18] !== x) {
+		const layout = computeSquareColumn({
+			barLengthPx,
+			squareSize,
+			gap: squareGap,
+			fit: squareFit
+		});
+		const rx = squareSize * squareRadius;
+		const columnTop = baselineY - layout.columnHeight;
+		const gradientId = `bar-squares-gradient-${index}-${revealEpoch}`;
+		let t2;
+		if ($[21] !== fill) {
+			t2 = isPatternFill(fill);
+			$[21] = fill;
+			$[22] = t2;
+		} else t2 = $[22];
+		const patternFill = t2;
+		const patternId = `bar-squares-pattern-${index}-${revealEpoch}`;
+		let t3;
+		bb0: {
+			if (useGradient) {
+				if (patternFill && patternPreset && patternPreset !== "none") {
+					t3 = `url(#${patternId})`;
+					break bb0;
+				}
+				t3 = `url(#${gradientId})`;
+				break bb0;
+			}
+			t3 = fill;
+		}
+		const effectiveFill = t3;
+		const cascadeStep = squareCascadeStepSeconds(enterTransition, animationDuration, layout.count);
+		const squareOpacity = isFaded ? fadedOpacity : 1;
+		let t4;
+		if ($[23] !== gradientId || $[24] !== patternFill || $[25] !== patternId || $[26] !== patternPreset || $[27] !== useGradient) {
+			t4 = useGradient && patternFill && patternPreset && patternPreset !== "none" ? renderPatternPreset(patternPreset, patternId, { color: `url(#${gradientId})` }) : null;
+			$[23] = gradientId;
+			$[24] = patternFill;
+			$[25] = patternId;
+			$[26] = patternPreset;
+			$[27] = useGradient;
+			$[28] = t4;
+		} else t4 = $[28];
+		const gradientPatternNode = t4;
+		let t5;
+		if ($[29] !== baselineY || $[30] !== columnTop || $[31] !== gradientId || $[32] !== gradientPatternNode || $[33] !== gradientStops || $[34] !== useGradient) {
+			t5 = useGradient ? /* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsx("linearGradient", {
+				gradientUnits: "userSpaceOnUse",
+				id: gradientId,
+				x1: 0,
+				x2: 0,
+				y1: baselineY,
+				y2: columnTop,
+				children: gradientStops.map(_temp)
+			}), gradientPatternNode] }) : null;
+			$[29] = baselineY;
+			$[30] = columnTop;
+			$[31] = gradientId;
+			$[32] = gradientPatternNode;
+			$[33] = gradientStops;
+			$[34] = useGradient;
+			$[35] = t5;
+		} else t5 = $[35];
+		gradientDefs = t5;
+		t1 = layout.positions.map((relY, squareIndex) => {
+			const y = columnTop + relY;
+			const bottomY = y + squareSize;
+			const key = `sq-${index}-${squareIndex}-${revealEpoch}`;
+			if (!animate) return /* @__PURE__ */ jsx("rect", {
+				fill: effectiveFill,
+				height: squareSize,
+				opacity: squareOpacity,
+				rx,
+				ry: rx,
+				width: squareSize,
+				x,
+				y
+			}, key);
+			return /* @__PURE__ */ jsx(motion.rect, {
+				animate: {
+					attrY: y,
+					height: squareSize,
+					opacity: squareOpacity
+				},
+				fill: effectiveFill,
+				height: squareSize,
+				initial: {
+					attrY: bottomY,
+					height: 0,
+					opacity: 1
+				},
+				rx,
+				ry: rx,
+				transition: {
+					...transitionWithDelay(enterTransition, index * staggerDelay + squareIndex * cascadeStep),
+					opacity: { duration: .15 }
+				},
+				width: squareSize,
+				x
+			}, key);
+		});
+		$[0] = animate;
+		$[1] = animationDuration;
+		$[2] = barLengthPx;
+		$[3] = baselineY;
+		$[4] = enterTransition;
+		$[5] = fadedOpacity;
+		$[6] = fill;
+		$[7] = gradientStops;
+		$[8] = index;
+		$[9] = isFaded;
+		$[10] = patternPreset;
+		$[11] = revealEpoch;
+		$[12] = squareFit;
+		$[13] = squareGap;
+		$[14] = squareRadius;
+		$[15] = squareSize;
+		$[16] = staggerDelay;
+		$[17] = useGradient;
+		$[18] = x;
+		$[19] = gradientDefs;
+		$[20] = t1;
+	} else {
+		gradientDefs = $[19];
+		t1 = $[20];
+	}
+	const squares = t1;
+	let t2;
+	if ($[36] !== gradientDefs || $[37] !== squares) {
+		t2 = /* @__PURE__ */ jsxs(Fragment, { children: [gradientDefs, squares] });
+		$[36] = gradientDefs;
+		$[37] = squares;
+		$[38] = t2;
+	} else t2 = $[38];
+	return t2;
+}
+function _temp(stop) {
+	return /* @__PURE__ */ jsx("stop", {
+		offset: `${stop.offset}%`,
+		stopColor: stop.color
+	}, `${stop.offset}-${stop.color}`);
+}
+const BarSquaresInner = memo(function BarSquaresInner(t0) {
+	const $ = c(69);
+	const { dataKey, yAxisId, fill: t1, squareGap: t2, squareRadius: t3, squareFit: t4, useGradient: t5, gradientStops: t6, patternPreset, animate: t7, fadedOpacity: t8, staggerDelay, groupGap: t9, barScale, bandWidth, barXAccessor } = t0;
+	const fill = t1 === void 0 ? chartCssVars.linePrimary : t1;
+	const squareGap = t2 === void 0 ? 3 : t2;
+	const squareRadius = t3 === void 0 ? .25 : t3;
+	const squareFit = t4 === void 0 ? false : t4;
+	const useGradient = t5 === void 0 ? false : t5;
+	let t10;
+	if ($[0] !== t6) {
+		t10 = t6 === void 0 ? [] : t6;
+		$[0] = t6;
+		$[1] = t10;
+	} else t10 = $[1];
+	const gradientStops = t10;
+	const animate = t7 === void 0 ? true : t7;
+	const fadedOpacity = t8 === void 0 ? .3 : t8;
+	const groupGap = t9 === void 0 ? 4 : t9;
+	const { data, innerHeight, hoveredBarIndex, lines, orientation, stacked, animationDuration, enterTransition, revealEpoch: t11 } = useChart();
+	const revealEpoch = t11 === void 0 ? 0 : t11;
+	const { hoveredIndex: legendHoveredIndex } = useChartLegendHover();
+	const uniqueId = useId();
+	const isUnsupported = orientation === "horizontal" || stacked;
+	let t12;
+	if ($[2] !== dataKey || $[3] !== lines) {
+		let t13;
+		if ($[5] !== dataKey) {
+			t13 = (l) => l.dataKey === dataKey;
+			$[5] = dataKey;
+			$[6] = t13;
+		} else t13 = $[6];
+		t12 = lines.findIndex(t13);
+		$[2] = dataKey;
+		$[3] = lines;
+		$[4] = t12;
+	} else t12 = $[4];
+	const seriesIndex = Math.max(0, t12);
+	const seriesConfig = lines[seriesIndex];
+	const valueScale = useYScale(yAxisId ?? seriesConfig?.yAxisId);
+	const isLegendDimmed = legendHoveredIndex !== null && legendHoveredIndex !== seriesIndex;
+	const seriesCount = lines.length;
+	let t13;
+	if ($[7] !== bandWidth || $[8] !== groupGap || $[9] !== seriesCount) {
+		t13 = resolveGroupedBarLayout(bandWidth, seriesCount, groupGap);
+		$[7] = bandWidth;
+		$[8] = groupGap;
+		$[9] = seriesCount;
+		$[10] = t13;
+	} else t13 = $[10];
+	const { barWidth: squareSize, gap: effectiveGroupGap } = t13;
+	const staggerSpread = (animationDuration || 1100) * .4;
+	const calculatedStaggerDelay = staggerDelay ?? (data.length > 1 ? staggerSpread / 1e3 / data.length : 0);
+	let t14;
+	if ($[11] !== innerHeight || $[12] !== valueScale) {
+		t14 = valueScale(0) ?? innerHeight;
+		$[11] = innerHeight;
+		$[12] = valueScale;
+		$[13] = t14;
+	} else t14 = $[13];
+	const baselineY = t14;
+	let t15;
+	if ($[14] !== fill || $[15] !== gradientStops) {
+		t15 = gradientStops.length >= 2 ? gradientStops : [{
+			offset: 0,
+			color: fill
+		}, {
+			offset: 100,
+			color: fill
+		}];
+		$[14] = fill;
+		$[15] = gradientStops;
+		$[16] = t15;
+	} else t15 = $[16];
+	const stops = t15;
+	if (isUnsupported) return null;
+	const t16 = `bar-squares-${uniqueId}`;
+	let t17;
+	if ($[17] !== animate || $[18] !== animationDuration || $[19] !== barScale || $[20] !== barXAccessor || $[21] !== baselineY || $[22] !== calculatedStaggerDelay || $[23] !== data || $[24] !== dataKey || $[25] !== effectiveGroupGap || $[26] !== enterTransition || $[27] !== fadedOpacity || $[28] !== fill || $[29] !== hoveredBarIndex || $[30] !== isLegendDimmed || $[31] !== patternPreset || $[32] !== revealEpoch || $[33] !== seriesIndex || $[34] !== squareFit || $[35] !== squareGap || $[36] !== squareRadius || $[37] !== squareSize || $[38] !== stops || $[39] !== useGradient || $[40] !== valueScale) {
+		let t18;
+		if ($[42] !== animate || $[43] !== animationDuration || $[44] !== barScale || $[45] !== barXAccessor || $[46] !== baselineY || $[47] !== calculatedStaggerDelay || $[48] !== dataKey || $[49] !== effectiveGroupGap || $[50] !== enterTransition || $[51] !== fadedOpacity || $[52] !== fill || $[53] !== hoveredBarIndex || $[54] !== isLegendDimmed || $[55] !== patternPreset || $[56] !== revealEpoch || $[57] !== seriesIndex || $[58] !== squareFit || $[59] !== squareGap || $[60] !== squareRadius || $[61] !== squareSize || $[62] !== stops || $[63] !== useGradient || $[64] !== valueScale) {
+			t18 = (d, i) => {
+				const value = d[dataKey];
+				if (typeof value !== "number" || value <= 0) return null;
+				const categoryValue = barXAccessor(d);
+				const x = (barScale(categoryValue) ?? 0) + seriesIndex * (squareSize + effectiveGroupGap);
+				const valuePos = valueScale(value) ?? 0;
+				const barLengthPx = baselineY - valuePos;
+				return /* @__PURE__ */ jsx(SquareColumn, {
+					animate,
+					animationDuration: animationDuration || 1100,
+					barLengthPx,
+					baselineY,
+					enterTransition,
+					fadedOpacity,
+					fill,
+					gradientStops: stops,
+					index: i,
+					isFaded: hoveredBarIndex !== null && hoveredBarIndex !== i || isLegendDimmed,
+					patternPreset,
+					revealEpoch,
+					squareFit,
+					squareGap,
+					squareRadius,
+					squareSize,
+					staggerDelay: calculatedStaggerDelay,
+					useGradient,
+					x
+				}, `bar-squares-${dataKey}-${categoryValue}`);
+			};
+			$[42] = animate;
+			$[43] = animationDuration;
+			$[44] = barScale;
+			$[45] = barXAccessor;
+			$[46] = baselineY;
+			$[47] = calculatedStaggerDelay;
+			$[48] = dataKey;
+			$[49] = effectiveGroupGap;
+			$[50] = enterTransition;
+			$[51] = fadedOpacity;
+			$[52] = fill;
+			$[53] = hoveredBarIndex;
+			$[54] = isLegendDimmed;
+			$[55] = patternPreset;
+			$[56] = revealEpoch;
+			$[57] = seriesIndex;
+			$[58] = squareFit;
+			$[59] = squareGap;
+			$[60] = squareRadius;
+			$[61] = squareSize;
+			$[62] = stops;
+			$[63] = useGradient;
+			$[64] = valueScale;
+			$[65] = t18;
+		} else t18 = $[65];
+		t17 = data.map(t18);
+		$[17] = animate;
+		$[18] = animationDuration;
+		$[19] = barScale;
+		$[20] = barXAccessor;
+		$[21] = baselineY;
+		$[22] = calculatedStaggerDelay;
+		$[23] = data;
+		$[24] = dataKey;
+		$[25] = effectiveGroupGap;
+		$[26] = enterTransition;
+		$[27] = fadedOpacity;
+		$[28] = fill;
+		$[29] = hoveredBarIndex;
+		$[30] = isLegendDimmed;
+		$[31] = patternPreset;
+		$[32] = revealEpoch;
+		$[33] = seriesIndex;
+		$[34] = squareFit;
+		$[35] = squareGap;
+		$[36] = squareRadius;
+		$[37] = squareSize;
+		$[38] = stops;
+		$[39] = useGradient;
+		$[40] = valueScale;
+		$[41] = t17;
+	} else t17 = $[41];
+	let t18;
+	if ($[66] !== t16 || $[67] !== t17) {
+		t18 = /* @__PURE__ */ jsx("g", {
+			className: t16,
+			children: t17
+		});
+		$[66] = t16;
+		$[67] = t17;
+		$[68] = t18;
+	} else t18 = $[68];
+	return t18;
+});
+function BarSquares(props) {
+	const $ = c(5);
+	const { barScale, bandWidth, barXAccessor } = useChartStable();
+	if (!(barScale && bandWidth && barXAccessor)) {
+		console.warn("BarSquares must be used within a BarChart");
+		return null;
+	}
+	let t0;
+	if ($[0] !== bandWidth || $[1] !== barScale || $[2] !== barXAccessor || $[3] !== props) {
+		t0 = /* @__PURE__ */ jsx(BarSquaresInner, {
+			...props,
+			bandWidth,
+			barScale,
+			barXAccessor
+		});
+		$[0] = bandWidth;
+		$[1] = barScale;
+		$[2] = barXAccessor;
+		$[3] = props;
+		$[4] = t0;
+	} else t0 = $[4];
+	return t0;
+}
+BarSquares.displayName = "BarSquares";
+const BarColumnTrackInner = memo(function BarColumnTrackInner(t0) {
+	const $ = c(37);
+	const { fill: t1, opacity: t2, squareGap: t3, squareRadius: t4, squareFit: t5, groupGap: t6, staggerDelay, barScale, bandWidth, barXAccessor } = t0;
+	const fill = t1 === void 0 ? chartCssVars.grid : t1;
+	const opacity = t2 === void 0 ? .3 : t2;
+	const squareGap = t3 === void 0 ? 3 : t3;
+	const squareRadius = t4 === void 0 ? .25 : t4;
+	const squareFit = t5 === void 0 ? false : t5;
+	const groupGap = t6 === void 0 ? 4 : t6;
+	const { data, lines, orientation, stacked, hoveredBarIndex, animationDuration, enterTransition, revealEpoch: t7 } = useChart();
+	const revealEpoch = t7 === void 0 ? 0 : t7;
+	const uniqueId = useId();
+	const isUnsupported = orientation === "horizontal" || stacked;
+	const seriesCount = lines.length;
+	let t8;
+	if ($[0] !== bandWidth || $[1] !== groupGap || $[2] !== seriesCount) {
+		t8 = resolveGroupedBarLayout(bandWidth, seriesCount, groupGap);
+		$[0] = bandWidth;
+		$[1] = groupGap;
+		$[2] = seriesCount;
+		$[3] = t8;
+	} else t8 = $[3];
+	const { barWidth: squareSize, gap: effectiveGroupGap } = t8;
+	const staggerSpread = (animationDuration || 1100) * .4;
+	const calculatedStaggerDelay = staggerDelay ?? (data.length > 1 ? staggerSpread / 1e3 / data.length : 0);
+	if (isUnsupported) return null;
+	const rx = squareSize * squareRadius;
+	const effectiveOpacity = hoveredBarIndex === null ? opacity : 0;
+	const t9 = `bar-column-track-${uniqueId}`;
+	let t10;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = { transition: "opacity 0.15s ease-in-out" };
+		$[4] = t10;
+	} else t10 = $[4];
+	let t11;
+	if ($[5] !== barScale || $[6] !== barXAccessor || $[7] !== calculatedStaggerDelay || $[8] !== data || $[9] !== effectiveGroupGap || $[10] !== effectiveOpacity || $[11] !== enterTransition || $[12] !== fill || $[13] !== lines || $[14] !== revealEpoch || $[15] !== rx || $[16] !== squareFit || $[17] !== squareGap || $[18] !== squareSize) {
+		let t12;
+		if ($[20] !== barScale || $[21] !== barXAccessor || $[22] !== calculatedStaggerDelay || $[23] !== effectiveGroupGap || $[24] !== effectiveOpacity || $[25] !== enterTransition || $[26] !== fill || $[27] !== lines || $[28] !== revealEpoch || $[29] !== rx || $[30] !== squareFit || $[31] !== squareGap || $[32] !== squareSize) {
+			t12 = (d, i) => {
+				const categoryValue = barXAccessor(d);
+				const bandPos = barScale(categoryValue) ?? 0;
+				return lines.map((line, seriesIndex) => /* @__PURE__ */ jsx(TrackColumn, {
+					animate: true,
+					bandPos,
+					d,
+					dataKey: line.dataKey,
+					effectiveGroupGap,
+					effectiveOpacity,
+					enterTransition,
+					fill,
+					index: i,
+					revealEpoch,
+					rx,
+					seriesIndex,
+					squareFit,
+					squareGap,
+					squareSize,
+					staggerDelay: calculatedStaggerDelay,
+					yAxisId: line.yAxisId
+				}, `track-${i}-${line.dataKey}`));
+			};
+			$[20] = barScale;
+			$[21] = barXAccessor;
+			$[22] = calculatedStaggerDelay;
+			$[23] = effectiveGroupGap;
+			$[24] = effectiveOpacity;
+			$[25] = enterTransition;
+			$[26] = fill;
+			$[27] = lines;
+			$[28] = revealEpoch;
+			$[29] = rx;
+			$[30] = squareFit;
+			$[31] = squareGap;
+			$[32] = squareSize;
+			$[33] = t12;
+		} else t12 = $[33];
+		t11 = data.map(t12);
+		$[5] = barScale;
+		$[6] = barXAccessor;
+		$[7] = calculatedStaggerDelay;
+		$[8] = data;
+		$[9] = effectiveGroupGap;
+		$[10] = effectiveOpacity;
+		$[11] = enterTransition;
+		$[12] = fill;
+		$[13] = lines;
+		$[14] = revealEpoch;
+		$[15] = rx;
+		$[16] = squareFit;
+		$[17] = squareGap;
+		$[18] = squareSize;
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
+	if ($[34] !== t11 || $[35] !== t9) {
+		t12 = /* @__PURE__ */ jsx("g", {
+			className: t9,
+			style: t10,
+			children: t11
+		});
+		$[34] = t11;
+		$[35] = t9;
+		$[36] = t12;
+	} else t12 = $[36];
+	return t12;
+});
+function TrackColumn(t0) {
+	const $ = c(45);
+	const { d, dataKey, yAxisId, bandPos, seriesIndex, effectiveGroupGap, squareSize, squareGap, squareFit, fill, rx, effectiveOpacity, index, staggerDelay, animate, enterTransition, revealEpoch } = t0;
+	const { innerHeight, animationDuration: chartAnimationDuration } = useChart();
+	const valueScale = useYScale(yAxisId);
+	const value = d[dataKey];
+	if (typeof value !== "number" || value <= 0) return null;
+	let t1;
+	if ($[0] !== innerHeight || $[1] !== valueScale) {
+		t1 = valueScale(0) ?? innerHeight;
+		$[0] = innerHeight;
+		$[1] = valueScale;
+		$[2] = t1;
+	} else t1 = $[2];
+	const baselineY = t1;
+	let t2;
+	if ($[3] !== value || $[4] !== valueScale) {
+		t2 = valueScale(value) ?? 0;
+		$[3] = value;
+		$[4] = valueScale;
+		$[5] = t2;
+	} else t2 = $[5];
+	const barLengthPx = baselineY - t2;
+	let t3;
+	let t4;
+	let trackHeight;
+	let x;
+	if ($[6] !== animate || $[7] !== bandPos || $[8] !== barLengthPx || $[9] !== baselineY || $[10] !== chartAnimationDuration || $[11] !== effectiveGroupGap || $[12] !== enterTransition || $[13] !== index || $[14] !== seriesIndex || $[15] !== squareFit || $[16] !== squareGap || $[17] !== squareSize || $[18] !== staggerDelay) {
+		t4 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			const layout = computeSquareColumn({
+				barLengthPx,
+				squareSize,
+				gap: squareGap,
+				fit: squareFit
+			});
+			const columnTop = baselineY - layout.columnHeight;
+			trackHeight = Math.max(0, columnTop);
+			if (trackHeight <= 0 && !animate) {
+				t4 = null;
+				break bb0;
+			}
+			x = bandPos + seriesIndex * (squareSize + effectiveGroupGap);
+			t3 = cascadeColumnTransition(enterTransition, chartAnimationDuration || 1100, index, staggerDelay, layout.count);
+		}
+		$[6] = animate;
+		$[7] = bandPos;
+		$[8] = barLengthPx;
+		$[9] = baselineY;
+		$[10] = chartAnimationDuration;
+		$[11] = effectiveGroupGap;
+		$[12] = enterTransition;
+		$[13] = index;
+		$[14] = seriesIndex;
+		$[15] = squareFit;
+		$[16] = squareGap;
+		$[17] = squareSize;
+		$[18] = staggerDelay;
+		$[19] = t3;
+		$[20] = t4;
+		$[21] = trackHeight;
+		$[22] = x;
+	} else {
+		t3 = $[19];
+		t4 = $[20];
+		trackHeight = $[21];
+		x = $[22];
+	}
+	if (t4 !== Symbol.for("react.early_return_sentinel")) return t4;
+	const enterAnim = t3;
+	const animatedHeight = trackHeight > 0 ? trackHeight : 0;
+	if (animate) {
+		let t5;
+		if ($[23] !== animatedHeight) {
+			t5 = {
+				height: animatedHeight,
+				y: 0
+			};
+			$[23] = animatedHeight;
+			$[24] = t5;
+		} else t5 = $[24];
+		let t6;
+		if ($[25] !== baselineY) {
+			t6 = {
+				height: baselineY,
+				y: 0
+			};
+			$[25] = baselineY;
+			$[26] = t6;
+		} else t6 = $[26];
+		const t7 = `track-${index}-${seriesIndex}-${revealEpoch}`;
+		let t8;
+		if ($[27] !== animatedHeight || $[28] !== effectiveOpacity || $[29] !== enterAnim || $[30] !== fill || $[31] !== rx || $[32] !== squareSize || $[33] !== t5 || $[34] !== t6 || $[35] !== t7 || $[36] !== x) {
+			t8 = /* @__PURE__ */ jsx(motion.rect, {
+				animate: t5,
+				fill,
+				height: animatedHeight,
+				initial: t6,
+				opacity: effectiveOpacity,
+				rx,
+				ry: rx,
+				transition: enterAnim,
+				width: squareSize,
+				x
+			}, t7);
+			$[27] = animatedHeight;
+			$[28] = effectiveOpacity;
+			$[29] = enterAnim;
+			$[30] = fill;
+			$[31] = rx;
+			$[32] = squareSize;
+			$[33] = t5;
+			$[34] = t6;
+			$[35] = t7;
+			$[36] = x;
+			$[37] = t8;
+		} else t8 = $[37];
+		return t8;
+	}
+	if (trackHeight <= 0) return null;
+	let t5;
+	if ($[38] !== effectiveOpacity || $[39] !== fill || $[40] !== rx || $[41] !== squareSize || $[42] !== trackHeight || $[43] !== x) {
+		t5 = /* @__PURE__ */ jsx("rect", {
+			fill,
+			height: trackHeight,
+			opacity: effectiveOpacity,
+			rx,
+			ry: rx,
+			width: squareSize,
+			x,
+			y: 0
+		});
+		$[38] = effectiveOpacity;
+		$[39] = fill;
+		$[40] = rx;
+		$[41] = squareSize;
+		$[42] = trackHeight;
+		$[43] = x;
+		$[44] = t5;
+	} else t5 = $[44];
+	return t5;
+}
+function BarColumnTrack(props) {
+	const $ = c(5);
+	const { barScale, bandWidth, barXAccessor } = useChartStable();
+	if (!(barScale && bandWidth && barXAccessor)) {
+		console.warn("BarColumnTrack must be used within a BarChart");
+		return null;
+	}
+	let t0;
+	if ($[0] !== bandWidth || $[1] !== barScale || $[2] !== barXAccessor || $[3] !== props) {
+		t0 = /* @__PURE__ */ jsx(BarColumnTrackInner, {
+			...props,
+			bandWidth,
+			barScale,
+			barXAccessor
+		});
+		$[0] = bandWidth;
+		$[1] = barScale;
+		$[2] = barXAccessor;
+		$[3] = props;
+		$[4] = t0;
+	} else t0 = $[4];
+	return t0;
+}
+BarColumnTrack.displayName = "BarColumnTrack";
+
+//#endregion
+export { BarColumnTrack, BarSquares, BarSquares as default };