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

package/dist/esm/components/chart/bar-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar-chart.js","names":["BarChart","OriginalBarChart"],"sources":["../../../../src/components/chart/bar-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { CartesianChartProps as OriginalCartesianChartProps } from \"recharts/types/util/types\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { BarChartStyle } from \"./bar-chart.style\"\nimport type { CartesianChartProps, ChartBarProps } from \"./cartesian-chart\"\nimport type { UseBarChartProps } from \"./use-bar-chart\"\nimport { useMemo } from \"react\"\nimport { BarChart as OriginalBarChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { barChartStyle } from \"./bar-chart.style\"\nimport { CartesianChart, ChartBar } from \"./cartesian-chart\"\nimport { useBarChart } from \"./use-bar-chart\"\n\nexport interface BarChartProps<Y extends Dict = Dict>\n  extends\n    Omit<\n      CartesianChartProps<Y>,\n      | \"areaFillOpacity\"\n      | \"areaProps\"\n      | \"components\"\n      | \"lineProps\"\n      | \"render\"\n      | \"series\"\n    >,\n    UseBarChartProps<Y>,\n    ThemeProps<BarChartStyle> {\n  /***\n   * If provided, generate bars based on series.\n   */\n  series?: ChartBarProps<Y>[]\n  /**\n   * Props for the bar chart component.\n   */\n  chartProps?: Omit<OriginalCartesianChartProps, \"data\">\n}\n\nconst {\n  PropsContext: BarChartPropsContext,\n  usePropsContext: useBarChartPropsContext,\n  withContext,\n} = createComponent<BarChartProps, BarChartStyle>(\"bar-chart\", barChartStyle)\n\nexport { BarChartPropsContext, useBarChartPropsContext }\n\n/**\n * `BarChart` is a component for drawing bar charts to compare multiple sets of data.\n *\n * @see https://yamada-ui.com/docs/components/bar-chart\n */\nexport const BarChart = withContext<\"div\", BarChartProps>(\n  <Y extends Dict>({\n    children,\n    series = [],\n    chartProps,\n    ...rest\n  }: BarChartProps<Y>) => {\n    const { getChartProps, getRootProps } = useBarChart(rest)\n    const components = useMemo(\n      () => [\n        {\n          component: ChartBar,\n          fallback: series.map((props, index) => (\n            <ChartBar key={index} {...props} />\n          )),\n        },\n      ],\n      [series],\n    )\n\n    return (\n      <CartesianChart\n        components={components}\n        render={(props) => (\n          <OriginalBarChart {...getChartProps({ ...props, ...chartProps })} />\n        )}\n        series={series}\n        {...getRootProps()}\n      >\n        {children}\n      </CartesianChart>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends Dict>(props: BarChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;;;AAuCA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,gBACE,gBAA8C,aAAa,cAAc;;;;;;AAS7E,MAAaA,aAAW,aACL,EACf,UACA,SAAS,EAAE,EACX,YACA,GAAG,WACmB;CACtB,MAAM,EAAE,eAAe,iBAAiB,YAAY,KAAK;AAazD,QACE,oBAAC;EACC,YAde,cACX,CACJ;GACE,WAAW;GACX,UAAU,OAAO,KAAK,OAAO,UAC3B,oBAAC,YAAqB,GAAI,SAAX,MAAoB,CACnC;GACH,CACF,EACD,CAAC,OAAO,CACT;EAKG,SAAS,UACP,oBAACC,YAAiB,GAAI,cAAc;GAAE,GAAG;GAAO,GAAG;GAAY,CAAC,GAAI;EAE9D;EACR,GAAI,cAAc;EAEjB;GACc;EAGtB,EAAE"}

package/dist/esm/components/chart/bar-chart.namespace.js

@@ -0,0 +1,25 @@
+import { __exportAll } from "../../_virtual/rolldown_runtime.js";
+import { ChartLabel, ChartLabelList, ChartLegend, ChartTooltip, mergeSeries } from "./chart.js";
+import { ChartBar, ChartGrid, ChartReferenceLine, ChartXAxis, ChartYAxis } from "./cartesian-chart.js";
+import { BarChart, BarChartPropsContext, useBarChartPropsContext } from "./bar-chart.js";
+
+//#region src/components/chart/bar-chart.namespace.ts
+var bar_chart_namespace_exports = /* @__PURE__ */ __exportAll({
+	Bar: () => ChartBar,
+	Grid: () => ChartGrid,
+	Label: () => ChartLabel,
+	LabelList: () => ChartLabelList,
+	Legend: () => ChartLegend,
+	PropsContext: () => BarChartPropsContext,
+	ReferenceLine: () => ChartReferenceLine,
+	Root: () => BarChart,
+	Tooltip: () => ChartTooltip,
+	XAxis: () => ChartXAxis,
+	YAxis: () => ChartYAxis,
+	mergeSeries: () => mergeSeries,
+	usePropsContext: () => useBarChartPropsContext
+});
+
+//#endregion
+export { bar_chart_namespace_exports };
+//# sourceMappingURL=bar-chart.namespace.js.map

package/dist/esm/components/chart/bar-chart.namespace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar-chart.namespace.js","names":[],"sources":["../../../../src/components/chart/bar-chart.namespace.ts"],"sourcesContent":["export type { BarChartProps as RootProps } from \"./bar-chart\"\nexport {\n  BarChartPropsContext as PropsContext,\n  BarChart as Root,\n  useBarChartPropsContext as usePropsContext,\n} from \"./bar-chart\"\nexport type {\n  ChartBarProps as BarProps,\n  ChartGridProps as GridProps,\n  ChartReferenceLineProps as ReferenceLineProps,\n  ChartXAxisProps as XAxisProps,\n  ChartXAxisTick as XAxisTick,\n  ChartYAxisProps as YAxisProps,\n  ChartYAxisTick as YAxisTick,\n} from \"./cartesian-chart\"\nexport {\n  ChartBar as Bar,\n  ChartGrid as Grid,\n  ChartReferenceLine as ReferenceLine,\n  ChartXAxis as XAxis,\n  ChartYAxis as YAxis,\n} from \"./cartesian-chart\"\nexport type {\n  ChartLabel as BarLabel,\n  ChartLabelList as BarLabelList,\n  ChartLabelListProps as LabelListProps,\n  ChartLabelProps as LabelProps,\n  ChartLegendProps as LegendProps,\n  ChartTickLine as TickLine,\n  ChartTooltipProps as TooltipProps,\n} from \"./chart\"\nexport {\n  ChartLabel as Label,\n  ChartLabelList as LabelList,\n  ChartLegend as Legend,\n  mergeSeries,\n  ChartTooltip as Tooltip,\n} from \"./chart\"\n"],"mappings":""}

package/dist/esm/components/chart/bar-chart.style.js

@@ -0,0 +1,14 @@
+import { defineComponentStyle } from "../../core/system/config.js";
+import "../../core/index.js";
+
+//#region src/components/chart/bar-chart.style.ts
+const barChartStyle = defineComponentStyle({ base: {
+	"--legend-swatch-color": "{line-stroke}",
+	"--tooltip-cursor-fill-opacity": "0.4",
+	"--tooltip-cursor-stroke": "none",
+	"--tooltip-swatch-color": "{line-stroke}"
+} });
+
+//#endregion
+export { barChartStyle };
+//# sourceMappingURL=bar-chart.style.js.map

package/dist/esm/components/chart/bar-chart.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar-chart.style.js","names":[],"sources":["../../../../src/components/chart/bar-chart.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const barChartStyle = defineComponentStyle({\n  base: {\n    \"--legend-swatch-color\": \"{line-stroke}\",\n    \"--tooltip-cursor-fill-opacity\": \"0.4\",\n    \"--tooltip-cursor-stroke\": \"none\",\n    \"--tooltip-swatch-color\": \"{line-stroke}\",\n  },\n})\n\nexport type BarChartStyle = typeof barChartStyle\n"],"mappings":";;;;AAEA,MAAa,gBAAgB,qBAAqB,EAChD,MAAM;CACJ,yBAAyB;CACzB,iCAAiC;CACjC,2BAA2B;CAC3B,0BAA0B;CAC3B,EACF,CAAC"}

package/dist/esm/components/chart/cartesian-chart.js

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