@yamada-ui/react 2.0.10-dev-20260301101758 → 2.1.0-dev-20260302125757

package/dist/cjs/components/chart/cartesian-chart.cjs

@@ -0,0 +1,637 @@
+"use client";
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_var = require('../../core/system/var.cjs');
+const require_system_provider = require('../../core/system/system-provider.cjs');
+const require_theme_provider = require('../../core/system/theme-provider.cjs');
+const require_factory = require('../../core/system/factory.cjs');
+const require_use_css = require('../../core/css/use-css.cjs');
+const require_props = require('../../core/components/props.cjs');
+const require_create_component = require('../../core/components/create-component.cjs');
+require('../../core/index.cjs');
+const require_cartesian_chart_style = require('./cartesian-chart.style.cjs');
+const require_chart = require('./chart.cjs');
+const require_use_cartesian_chart = require('./use-cartesian-chart.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let recharts = require("recharts");
+
+//#region src/components/chart/cartesian-chart.tsx
+const shouldForwardProp = require_props.createShouldForwardProp();
+const { ComponentContext, PropsContext: CartesianChartPropsContext, useComponentContext, usePropsContext: useCartesianChartPropsContext, withContext, withProvider, useSlotComponentProps } = require_create_component.createSlotComponent("cartesian-chart", require_cartesian_chart_style.cartesianChartStyle);
+const CartesianChart = withProvider(({ components: componentsProp, withGrid = true, withXAxis = true, withYAxis = false, areaProps, barProps, gridProps, lineProps, referenceLineProps, xAxisProps, yAxisProps, ...rest }) => {
+	const components = (0, react.useMemo)(() => [
+		{
+			component: ChartGrid,
+			fallback: withGrid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartGrid, {}) : null
+		},
+		{
+			component: ChartXAxis,
+			fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartXAxis, { hide: !withXAxis })
+		},
+		{
+			component: ChartYAxis,
+			fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartYAxis, { hide: !withYAxis })
+		},
+		...componentsProp
+	], [
+		componentsProp,
+		withGrid,
+		withXAxis,
+		withYAxis
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
+		value: (0, react.useMemo)(() => ({
+			areaProps,
+			barProps,
+			gridProps,
+			lineProps,
+			referenceLineProps,
+			xAxisProps,
+			yAxisProps
+		}), [
+			areaProps,
+			barProps,
+			gridProps,
+			lineProps,
+			referenceLineProps,
+			xAxisProps,
+			yAxisProps
+		]),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chart.Chart, {
+			components,
+			...rest
+		})
+	});
+}, "root")(void 0, ({ activeDotFill, activeDotRadius, activeDotStroke, activeDotStrokeWidth, areaFillOpacity, dotFill, dotRadius, dotStroke, dotStrokeWidth, gridStroke, inactiveLineOpacity, lineColor, lineStroke, lineStrokeWidth, referenceLineColor, referenceLineStroke, referenceLineStrokeWidth, referenceLineTextColor, referenceLineTextFill, xAxisLineStroke, xAxisLineStrokeWidth, xAxisTextColor, xAxisTextFill, yAxisLineStroke, yAxisLineStrokeWidth, yAxisTextColor, yAxisTextFill, ...rest }) => ({
+	"--active-dot-fill": require_var.varAttr(activeDotFill, "colors"),
+	"--active-dot-r": activeDotRadius,
+	"--active-dot-stroke": require_var.varAttr(activeDotStroke, "colors"),
+	"--active-dot-stroke-width": activeDotStrokeWidth,
+	"--area-fill-opacity": areaFillOpacity,
+	"--dot-fill": require_var.varAttr(dotFill, "colors"),
+	"--dot-r": dotRadius,
+	"--dot-stroke": require_var.varAttr(dotStroke, "colors"),
+	"--dot-stroke-width": dotStrokeWidth,
+	"--grid-stroke": require_var.varAttr(gridStroke, "colors"),
+	"--inactive-line-opacity": inactiveLineOpacity,
+	"--line-color": require_var.varAttr(lineColor, "colors"),
+	"--line-stroke": require_var.varAttr(lineStroke, "colors"),
+	"--line-stroke-width": lineStrokeWidth,
+	"--reference-line-color": require_var.varAttr(referenceLineColor, "colors"),
+	"--reference-line-stroke": require_var.varAttr(referenceLineStroke, "colors"),
+	"--reference-line-stroke-width": referenceLineStrokeWidth,
+	"--reference-line-text-color": require_var.varAttr(referenceLineTextColor, "colors"),
+	"--reference-line-text-fill": require_var.varAttr(referenceLineTextFill, "colors"),
+	"--x-axis-line-stroke": require_var.varAttr(xAxisLineStroke, "colors"),
+	"--x-axis-line-stroke-width": xAxisLineStrokeWidth,
+	"--x-axis-text-color": require_var.varAttr(xAxisTextColor, "colors"),
+	"--x-axis-text-fill": require_var.varAttr(xAxisTextFill, "colors"),
+	"--y-axis-line-stroke": require_var.varAttr(yAxisLineStroke, "colors"),
+	"--y-axis-line-stroke-width": yAxisLineStrokeWidth,
+	"--y-axis-text-color": require_var.varAttr(yAxisTextColor, "colors"),
+	"--y-axis-text-fill": require_var.varAttr(yAxisTextFill, "colors"),
+	...rest
+}));
+const ChartXAxis = withContext((props) => {
+	const { xAxisProps } = useComponentContext();
+	const { children, label: labelProp = false, tick: tickProp = true, tickLine: tickLineProp = false, ...rest } = {
+		...xAxisProps,
+		...props
+	};
+	const system = require_system_provider.useSystem();
+	const { theme } = require_theme_provider.useTheme();
+	const tickProps = useSlotComponentProps({}, "xAxisTick");
+	const labelProps = useSlotComponentProps({}, "xAxisLabel");
+	const tickLineProps = useSlotComponentProps({}, "xAxisTickLine");
+	const tick = (0, react.useMemo)(() => {
+		if (!tickProp) return tickProp;
+		const css = require_use_css.getCSS(system, theme);
+		const className = (0, require_utils_index.utils_exports.cx)(tickProps.className, css(tickProps.css));
+		if ((0, require_utils_index.utils_exports.isFunction)(tickProp)) return (props$1) => tickProp({
+			...props$1,
+			className: (0, require_utils_index.utils_exports.cx)(className, props$1.className)
+		});
+		else if ((0, react.isValidElement)(tickProp)) return (0, react.cloneElement)(tickProp, { className });
+		else if ((0, require_utils_index.utils_exports.isObject)(tickProp)) {
+			const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(tickProp, shouldForwardProp);
+			return {
+				...omittedProps,
+				className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
+			};
+		} else return { className };
+	}, [
+		system,
+		theme,
+		tickProp,
+		tickProps.className,
+		tickProps.css
+	]);
+	const tickLine = (0, react.useMemo)(() => {
+		if (!tickLineProp) return tickLineProp;
+		const css = require_use_css.getCSS(system, theme);
+		const className = (0, require_utils_index.utils_exports.cx)(tickLineProps.className, css(tickLineProps.css));
+		if ((0, require_utils_index.utils_exports.isObject)(tickLineProp)) {
+			const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(tickLineProp, shouldForwardProp);
+			return {
+				...omittedProps,
+				className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
+			};
+		} else return { className };
+	}, [
+		system,
+		theme,
+		tickLineProp,
+		tickLineProps.className,
+		tickLineProps.css
+	]);
+	const { getRootProps, getXAxisProps } = require_use_cartesian_chart.useChartXAxis({
+		label: (0, react.useMemo)(() => {
+			if (!labelProp) return labelProp;
+			const css = require_use_css.getCSS(system, theme);
+			const className = (0, require_utils_index.utils_exports.cx)(labelProps.className, css(labelProps.css));
+			if ((0, require_utils_index.utils_exports.isFunction)(labelProp)) return (props$1) => labelProp({
+				...props$1,
+				className: (0, require_utils_index.utils_exports.cx)(className, props$1.className)
+			});
+			else if ((0, react.isValidElement)(labelProp)) return (0, react.cloneElement)(labelProp, { className });
+			else if ((0, require_utils_index.utils_exports.isObject)(labelProp)) {
+				const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(labelProp, shouldForwardProp);
+				return {
+					...omittedProps,
+					className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
+				};
+			} else return {
+				className,
+				children: labelProp
+			};
+		}, [
+			system,
+			theme,
+			labelProp,
+			labelProps.className,
+			labelProps.css
+		]),
+		tick,
+		tickLine,
+		...rest
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.svg, {
+		asChild: true,
+		...getRootProps(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.XAxis, {
+			...getXAxisProps(),
+			children
+		})
+	});
+}, "xAxis")();
+const ChartYAxis = withContext((props) => {
+	const { yAxisProps } = useComponentContext();
+	const { children, label: labelProp = false, tick: tickProp = true, tickLine: tickLineProp = false, ...rest } = {
+		...yAxisProps,
+		...props
+	};
+	const system = require_system_provider.useSystem();
+	const { theme } = require_theme_provider.useTheme();
+	const tickProps = useSlotComponentProps({}, "yAxisTick");
+	const labelProps = useSlotComponentProps({}, "yAxisLabel");
+	const tickLineProps = useSlotComponentProps({}, "yAxisTickLine");
+	const tick = (0, react.useMemo)(() => {
+		if (!tickProp) return tickProp;
+		const css = require_use_css.getCSS(system, theme);
+		const className = (0, require_utils_index.utils_exports.cx)(tickProps.className, css(tickProps.css));
+		if ((0, require_utils_index.utils_exports.isFunction)(tickProp)) return (props$1) => tickProp({
+			...props$1,
+			className: (0, require_utils_index.utils_exports.cx)(className, props$1.className)
+		});
+		else if ((0, react.isValidElement)(tickProp)) return (0, react.cloneElement)(tickProp, { className });
+		else if ((0, require_utils_index.utils_exports.isObject)(tickProp)) {
+			const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(tickProp, shouldForwardProp);
+			return {
+				...omittedProps,
+				className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
+			};
+		} else return { className };
+	}, [
+		system,
+		theme,
+		tickProp,
+		tickProps.className,
+		tickProps.css
+	]);
+	const tickLine = (0, react.useMemo)(() => {
+		if (!tickLineProp) return tickLineProp;
+		const css = require_use_css.getCSS(system, theme);
+		const className = (0, require_utils_index.utils_exports.cx)(tickLineProps.className, css(tickLineProps.css));
+		if ((0, require_utils_index.utils_exports.isObject)(tickLineProp)) {
+			const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(tickLineProp, shouldForwardProp);
+			return {
+				...omittedProps,
+				className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
+			};
+		} else return { className };
+	}, [
+		system,
+		theme,
+		tickLineProp,
+		tickLineProps.className,
+		tickLineProps.css
+	]);
+	const { getRootProps, getYAxisProps } = require_use_cartesian_chart.useChartYAxis({
+		label: (0, react.useMemo)(() => {
+			if (!labelProp) return labelProp;
+			const css = require_use_css.getCSS(system, theme);
+			const className = (0, require_utils_index.utils_exports.cx)(labelProps.className, css(labelProps.css));
+			if ((0, require_utils_index.utils_exports.isFunction)(labelProp)) return (props$1) => labelProp({
+				...props$1,
+				className: (0, require_utils_index.utils_exports.cx)(className, props$1.className)
+			});
+			else if ((0, react.isValidElement)(labelProp)) return (0, react.cloneElement)(labelProp, { className });
+			else if ((0, require_utils_index.utils_exports.isObject)(labelProp)) {
+				const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(labelProp, shouldForwardProp);
+				return {
+					...omittedProps,
+					className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
+				};
+			} else return {
+				className,
+				children: labelProp
+			};
+		}, [
+			system,
+			theme,
+			labelProp,
+			labelProps.className,
+			labelProps.css
+		]),
+		tick,
+		tickLine,
+		...rest
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.svg, {
+		asChild: true,
+		...getRootProps(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.YAxis, {
+			...getYAxisProps(),
+			children
+		})
+	});
+}, "yAxis")();
+const ChartGrid = withContext((props) => {
+	const { gridProps } = useComponentContext();
+	const { getGridProps, getRootProps } = require_use_cartesian_chart.useChartGrid({
+		...gridProps,
+		...props
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.line, {
+		asChild: true,
+		...getRootProps(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.CartesianGrid, { ...getGridProps() })
+	});
+}, "grid")();
+const ChartLine = withContext((props) => {
+	const { lineProps } = useComponentContext();
+	const { activeDot: activeDotProp = true, children, dataKey, dot: dotProp = false, label: labelProp = false, ...rest } = {
+		...lineProps,
+		...props
+	};
+	const system = require_system_provider.useSystem();
+	const { theme } = require_theme_provider.useTheme();
+	const { varMap } = require_chart.useChartComponentContext();
+	const color = varMap[dataKey.toString()] ?? rest.stroke ?? rest.color;
+	const dotProps = useSlotComponentProps({}, "dot");
+	const activeDotProps = useSlotComponentProps({}, "activeDot");
+	const labelProps = useSlotComponentProps({}, "labelList");
+	const dot = (0, react.useMemo)(() => {
+		if (!dotProp) return dotProp;
+		const css = require_use_css.getCSS(system, theme);
+		const className = (0, require_utils_index.utils_exports.cx)(dotProps.className, css(dotProps.css), css({
+			fill: color,
+			stroke: color
+		}));
+		if ((0, require_utils_index.utils_exports.isFunction)(dotProp)) return (props$1) => dotProp({
+			...props$1,
+			className: (0, require_utils_index.utils_exports.cx)(className, props$1.className)
+		});
+		else if ((0, react.isValidElement)(dotProp)) return (0, react.cloneElement)(dotProp, { className });
+		else if ((0, require_utils_index.utils_exports.isObject)(dotProp)) {
+			const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(dotProp, shouldForwardProp);
+			return {
+				...omittedProps,
+				className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
+			};
+		} else return { className };
+	}, [
+		dotProp,
+		system,
+		theme,
+		dotProps.className,
+		dotProps.css,
+		color
+	]);
+	const { getLineProps, getRootProps } = require_use_cartesian_chart.useChartLine({
+		activeDot: (0, react.useMemo)(() => {
+			if (!activeDotProp) return activeDotProp;
+			const css = require_use_css.getCSS(system, theme);
+			const className = (0, require_utils_index.utils_exports.cx)(activeDotProps.className, css(activeDotProps.css), css({
+				fill: color,
+				stroke: color
+			}));
+			if ((0, require_utils_index.utils_exports.isFunction)(activeDotProp)) return (props$1) => activeDotProp({
+				...props$1,
+				className: (0, require_utils_index.utils_exports.cx)(className, props$1.className)
+			});
+			else if ((0, react.isValidElement)(activeDotProp)) return (0, react.cloneElement)(activeDotProp, { className });
+			else if ((0, require_utils_index.utils_exports.isObject)(activeDotProp)) {
+				const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(activeDotProp, shouldForwardProp);
+				return {
+					...omittedProps,
+					className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
+				};
+			} else return { className };
+		}, [
+			activeDotProp,
+			system,
+			theme,
+			activeDotProps.className,
+			activeDotProps.css,
+			color
+		]),
+		dataKey,
+		dot,
+		label: (0, react.useMemo)(() => {
+			if (!labelProp) return labelProp;
+			const css = require_use_css.getCSS(system, theme);
+			const className = (0, require_utils_index.utils_exports.cx)(labelProps.className, css(labelProps.css));
+			if ((0, require_utils_index.utils_exports.isFunction)(labelProp)) return (props$1) => labelProp({
+				...props$1,
+				className: (0, require_utils_index.utils_exports.cx)(className, props$1.className)
+			});
+			else if ((0, react.isValidElement)(labelProp)) return (0, react.cloneElement)(labelProp, { className });
+			else if ((0, require_utils_index.utils_exports.isObject)(labelProp)) {
+				const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(labelProp, shouldForwardProp);
+				return {
+					...omittedProps,
+					className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
+				};
+			} else return { className };
+		}, [
+			system,
+			theme,
+			labelProp,
+			labelProps.className,
+			labelProps.css
+		]),
+		stroke: color,
+		...rest
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.line, {
+		asChild: true,
+		...getRootProps(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Line, {
+			...getLineProps(),
+			children
+		})
+	});
+}, "line")();
+const ChartArea = withContext((props) => {
+	const { areaProps } = useComponentContext();
+	const { activeDot: activeDotProp = true, children, dataKey, dot: dotProp = false, label: labelProp = false, withGradient, ...rest } = {
+		...areaProps,
+		...props
+	};
+	const id = (0, react.useId)();
+	const system = require_system_provider.useSystem();
+	const { theme } = require_theme_provider.useTheme();
+	const { varMap } = require_chart.useChartComponentContext();
+	const color = varMap[dataKey.toString()] ?? rest.stroke ?? rest.color;
+	const dotProps = useSlotComponentProps({}, "dot");
+	const activeDotProps = useSlotComponentProps({}, "activeDot");
+	const labelProps = useSlotComponentProps({}, "labelList");
+	const dot = (0, react.useMemo)(() => {
+		if (!dotProp) return dotProp;
+		const css = require_use_css.getCSS(system, theme);
+		const className = (0, require_utils_index.utils_exports.cx)(dotProps.className, css(dotProps.css), css({
+			fill: color,
+			stroke: color
+		}));
+		if ((0, require_utils_index.utils_exports.isFunction)(dotProp)) return (props$1) => dotProp({
+			...props$1,
+			className: (0, require_utils_index.utils_exports.cx)(className, props$1.className)
+		});
+		else if ((0, react.isValidElement)(dotProp)) return (0, react.cloneElement)(dotProp, { className });
+		else if ((0, require_utils_index.utils_exports.isObject)(dotProp)) {
+			const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(dotProp, shouldForwardProp);
+			return {
+				...omittedProps,
+				className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
+			};
+		} else return { className };
+	}, [
+		dotProp,
+		system,
+		theme,
+		dotProps.className,
+		dotProps.css,
+		color
+	]);
+	const activeDot = (0, react.useMemo)(() => {
+		if (!activeDotProp) return activeDotProp;
+		const css = require_use_css.getCSS(system, theme);
+		const className = (0, require_utils_index.utils_exports.cx)(activeDotProps.className, css(activeDotProps.css), css({
+			fill: color,
+			stroke: color
+		}));
+		if ((0, require_utils_index.utils_exports.isFunction)(activeDotProp)) return (props$1) => activeDotProp({
+			...props$1,
+			className: (0, require_utils_index.utils_exports.cx)(className, props$1.className)
+		});
+		else if ((0, react.isValidElement)(activeDotProp)) return (0, react.cloneElement)(activeDotProp, { className });
+		else if ((0, require_utils_index.utils_exports.isObject)(activeDotProp)) {
+			const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(activeDotProp, shouldForwardProp);
+			return {
+				...omittedProps,
+				className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
+			};
+		} else return { className };
+	}, [
+		activeDotProp,
+		system,
+		theme,
+		activeDotProps.className,
+		activeDotProps.css,
+		color
+	]);
+	const label = (0, react.useMemo)(() => {
+		if (!labelProp) return labelProp;
+		const css = require_use_css.getCSS(system, theme);
+		const className = (0, require_utils_index.utils_exports.cx)(labelProps.className, css(labelProps.css));
+		if ((0, require_utils_index.utils_exports.isFunction)(labelProp)) return (props$1) => labelProp({
+			...props$1,
+			className: (0, require_utils_index.utils_exports.cx)(className, props$1.className)
+		});
+		else if ((0, react.isValidElement)(labelProp)) return (0, react.cloneElement)(labelProp, { className });
+		else if ((0, require_utils_index.utils_exports.isObject)(labelProp)) {
+			const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(labelProp, shouldForwardProp);
+			return {
+				...omittedProps,
+				className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
+			};
+		} else return { className };
+	}, [
+		system,
+		theme,
+		labelProp,
+		labelProps.className,
+		labelProps.css
+	]);
+	const { getAreaProps, getRootProps } = require_use_cartesian_chart.useChartArea({
+		activeDot,
+		dataKey,
+		dot,
+		fill: color ? `url(#${id})` : "",
+		label,
+		stroke: color,
+		...rest
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.line, {
+		asChild: true,
+		...getRootProps(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Area, {
+			...getAreaProps(),
+			children
+		})
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: withGradient ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+		id,
+		x1: "0",
+		x2: "0",
+		y1: "0",
+		y2: "1",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.stop, {
+			asChild: true,
+			stopColor: color,
+			stopOpacity: .8,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { offset: "5%" })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.stop, {
+			asChild: true,
+			stopColor: color,
+			stopOpacity: .1,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { offset: "95%" })
+		})]
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("linearGradient", {
+		id,
+		x1: "0",
+		x2: "0",
+		y1: "0",
+		y2: "1",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.stop, {
+			stopColor: color,
+			stopOpacity: .4
+		})
+	}) })] });
+}, "area")();
+const ChartBar = withContext((props) => {
+	const { barProps } = useComponentContext();
+	const { children, dataKey, label: labelProp = false, ...rest } = {
+		...barProps,
+		...props
+	};
+	const system = require_system_provider.useSystem();
+	const { theme } = require_theme_provider.useTheme();
+	const { varMap } = require_chart.useChartComponentContext();
+	const color = varMap[dataKey.toString()];
+	const labelProps = useSlotComponentProps({}, "labelList");
+	const { getBarProps, getRootProps } = require_use_cartesian_chart.useChartBar({
+		dataKey,
+		fill: color,
+		label: (0, react.useMemo)(() => {
+			if (!labelProp) return labelProp;
+			const css = require_use_css.getCSS(system, theme);
+			const className = (0, require_utils_index.utils_exports.cx)(labelProps.className, css(labelProps.css));
+			if ((0, require_utils_index.utils_exports.isFunction)(labelProp)) return (props$1) => labelProp({
+				...props$1,
+				className: (0, require_utils_index.utils_exports.cx)(className, props$1.className)
+			});
+			else if ((0, react.isValidElement)(labelProp)) return (0, react.cloneElement)(labelProp, { className });
+			else if ((0, require_utils_index.utils_exports.isObject)(labelProp)) {
+				const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(labelProp, shouldForwardProp);
+				return {
+					...omittedProps,
+					className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
+				};
+			} else return { className };
+		}, [
+			system,
+			theme,
+			labelProp,
+			labelProps.className,
+			labelProps.css
+		]),
+		stroke: color,
+		...rest
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.path, {
+		asChild: true,
+		...getRootProps(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Bar, {
+			...getBarProps(),
+			children
+		})
+	});
+}, "bar")();
+const ChartReferenceLine = withContext((props) => {
+	const { referenceLineProps } = useComponentContext();
+	const { label: labelProp = false, ...rest } = {
+		...referenceLineProps,
+		...props
+	};
+	const system = require_system_provider.useSystem();
+	const { theme } = require_theme_provider.useTheme();
+	const labelProps = useSlotComponentProps({}, "referenceLineLabel");
+	const { getReferenceLineProps, getRootProps } = require_use_cartesian_chart.useChartReferenceLine({
+		label: (0, react.useMemo)(() => {
+			if (!labelProp) return labelProp;
+			const css = require_use_css.getCSS(system, theme);
+			const className = (0, require_utils_index.utils_exports.cx)(labelProps.className, css(labelProps.css));
+			if ((0, require_utils_index.utils_exports.isFunction)(labelProp)) return (props$1) => labelProp({
+				...props$1,
+				className: (0, require_utils_index.utils_exports.cx)(className, props$1.className)
+			});
+			else if ((0, react.isValidElement)(labelProp)) return (0, react.cloneElement)(labelProp, { className });
+			else if ((0, require_utils_index.utils_exports.isObject)(labelProp)) {
+				const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(labelProp, shouldForwardProp);
+				return {
+					...omittedProps,
+					className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
+				};
+			} else return {
+				className,
+				children: labelProp
+			};
+		}, [
+			system,
+			theme,
+			labelProp,
+			labelProps.className,
+			labelProps.css
+		]),
+		...rest
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.line, {
+		asChild: true,
+		...getRootProps(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ReferenceLine, { ...getReferenceLineProps() })
+	});
+}, "referenceLine")();
+
+//#endregion
+exports.CartesianChart = CartesianChart;
+exports.ChartArea = ChartArea;
+exports.ChartBar = ChartBar;
+exports.ChartGrid = ChartGrid;
+exports.ChartLine = ChartLine;
+exports.ChartReferenceLine = ChartReferenceLine;
+exports.ChartXAxis = ChartXAxis;
+exports.ChartYAxis = ChartYAxis;
+//# sourceMappingURL=cartesian-chart.cjs.map