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

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

@@ -0,0 +1,659 @@
+"use client";
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ref = require('../../utils/ref.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_polar_chart_style = require('./polar-chart.style.cjs');
+const require_chart = require('./chart.cjs');
+const require_use_polar_chart = require('./use-polar-chart.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let recharts = require("recharts");
+
+//#region src/components/chart/polar-chart.tsx
+const shouldForwardProp = require_props.createShouldForwardProp();
+const { component, ComponentContext, PropsContext: PolarChartPropsContext, useComponentContext, usePropsContext: usePolarChartPropsContext, withContext, withProvider, useSlotComponentProps } = require_create_component.createSlotComponent("polar-chart", require_polar_chart_style.polarChartStyle);
+const PolarChart = withProvider(({ components: componentsProp, nameKey, withAngleAxis = false, withGrid = false, withRadiusAxis = false, angleAxisProps, donutProps, gridProps, pieProps = donutProps, radarProps, radialProps, radiusAxisProps, sectorProps, ...rest }) => {
+	const components = (0, react.useMemo)(() => [
+		{
+			component: ChartPolarGrid,
+			fallback: withGrid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartPolarGrid, {}) : null
+		},
+		{
+			component: ChartAngleAxis,
+			fallback: withAngleAxis ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartAngleAxis, {}) : null
+		},
+		{
+			component: ChartRadiusAxis,
+			fallback: withRadiusAxis ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartRadiusAxis, {}) : null
+		},
+		...componentsProp
+	], [
+		componentsProp,
+		withGrid,
+		withAngleAxis,
+		withRadiusAxis
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
+		value: (0, react.useMemo)(() => ({
+			nameKey,
+			angleAxisProps,
+			gridProps,
+			pieProps,
+			radarProps,
+			radialProps,
+			radiusAxisProps,
+			sectorProps
+		}), [
+			pieProps,
+			radarProps,
+			sectorProps,
+			angleAxisProps,
+			radiusAxisProps,
+			gridProps,
+			nameKey,
+			radialProps
+		]),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chart.Chart, {
+			components,
+			...rest
+		})
+	});
+}, "root")(void 0, ({ activeDotFill, activeDotRadius, activeDotStroke, activeDotStrokeWidth, angleAxisLineStroke, angleAxisLineStrokeWidth, angleAxisTextColor, angleAxisTextFill, dotFill, dotRadius, dotStroke, dotStrokeWidth, gridStroke, inactiveLabelLineOpacity, inactiveLabelOpacity, inactiveRadarOpacity, inactiveSectorOpacity, labelColor, labelFill, labelLineStroke, labelLineStrokeWidth, radarColor, radarFillOpacity, radarStroke, radarStrokeWidth, radialBackgroundColor, radialBackgroundFill, radialBackgroundStroke, radialBackgroundStrokeWidth, radiusAxisLineStroke, radiusAxisLineStrokeWidth, radiusAxisTextColor, radiusAxisTextFill, sectorColor, sectorFill, sectorStroke, sectorStrokeWidth, ...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,
+	"--angle-axis-line-stroke": require_var.varAttr(angleAxisLineStroke, "colors"),
+	"--angle-axis-line-stroke-width": angleAxisLineStrokeWidth,
+	"--angle-axis-text-color": require_var.varAttr(angleAxisTextColor, "colors"),
+	"--angle-axis-text-fill": require_var.varAttr(angleAxisTextFill, "colors"),
+	"--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-label-line-opacity": inactiveLabelLineOpacity,
+	"--inactive-label-opacity": inactiveLabelOpacity,
+	"--inactive-radar-opacity": inactiveRadarOpacity,
+	"--inactive-sector-opacity": inactiveSectorOpacity,
+	"--label-color": require_var.varAttr(labelColor, "colors"),
+	"--label-fill": require_var.varAttr(labelFill, "colors"),
+	"--label-line-stroke": require_var.varAttr(labelLineStroke, "colors"),
+	"--label-line-stroke-width": labelLineStrokeWidth,
+	"--radar-color": require_var.varAttr(radarColor, "colors"),
+	"--radar-fill-opacity": radarFillOpacity,
+	"--radar-stroke": require_var.varAttr(radarStroke, "colors"),
+	"--radar-stroke-width": radarStrokeWidth,
+	"--radial-background-color": require_var.varAttr(radialBackgroundColor, "colors"),
+	"--radial-background-fill": require_var.varAttr(radialBackgroundFill, "colors"),
+	"--radial-background-stroke": require_var.varAttr(radialBackgroundStroke, "colors"),
+	"--radial-background-stroke-width": radialBackgroundStrokeWidth,
+	"--radius-axis-line-stroke": require_var.varAttr(radiusAxisLineStroke, "colors"),
+	"--radius-axis-line-stroke-width": radiusAxisLineStrokeWidth,
+	"--radius-axis-text-color": require_var.varAttr(radiusAxisTextColor, "colors"),
+	"--radius-axis-text-fill": require_var.varAttr(radiusAxisTextFill, "colors"),
+	"--sector-color": require_var.varAttr(sectorColor, "colors"),
+	"--sector-fill": require_var.varAttr(sectorFill, "colors"),
+	"--sector-stroke": require_var.varAttr(sectorStroke, "colors"),
+	"--sector-stroke-width": sectorStrokeWidth,
+	...rest
+}));
+const ChartPie = withContext((props) => {
+	const { pieProps } = useComponentContext();
+	const { activeIndex, children, dataKey, label: labelProp, labelLine: labelLineProp = false, labelList = false, nameKey, sectorProps, ...rest } = {
+		...pieProps,
+		...props
+	};
+	const { varMap } = require_chart.useChartComponentContext();
+	const shape = (0, react.useCallback)((props$1, index) => {
+		if ((0, require_utils_index.utils_exports.isNumber)(activeIndex)) props$1.isActive = index === activeIndex;
+		const color = varMap[`${dataKey.toString()}-${props$1.name}`];
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartSector, {
+			color,
+			...props$1,
+			...(0, require_utils_index.utils_exports.runIfFn)(sectorProps, props$1, index)
+		});
+	}, [
+		activeIndex,
+		dataKey,
+		sectorProps,
+		varMap
+	]);
+	const { getPieProps, getRootProps } = require_use_polar_chart.useChartPie({
+		dataKey,
+		label: (0, react.useMemo)(() => {
+			if (!labelProp) return labelProp;
+			const Component = (props$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartPieLabel, {
+				...props$1,
+				...labelProp !== true ? (0, require_utils_index.utils_exports.runIfFn)(labelProp, props$1) : {}
+			});
+			return Component;
+		}, [labelProp]),
+		labelLine: (0, react.useMemo)(() => {
+			if (!labelLineProp) return labelLineProp;
+			const Component = ({ key: _, ...rest$1 }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartPieLabelLine, {
+				...rest$1,
+				...labelLineProp !== true ? (0, require_utils_index.utils_exports.runIfFn)(labelLineProp, rest$1) : {}
+			});
+			return Component;
+		}, [labelLineProp]),
+		nameKey,
+		shape,
+		...rest
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.svg, {
+		asChild: true,
+		...getRootProps(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.Pie, {
+			...getPieProps(),
+			children: [children, labelList ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chart.ChartLabelList, {
+				dataKey: nameKey,
+				...(0, require_utils_index.utils_exports.isObject)(labelList) ? labelList : {}
+			}) : null]
+		})
+	});
+}, "pie")();
+const ChartSector = withContext((props) => {
+	const { sectorProps } = useComponentContext();
+	const { getRootProps, getSectorProps } = require_use_polar_chart.useChartSector({
+		...sectorProps,
+		...props
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.path, {
+		asChild: true,
+		...getRootProps(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Sector, { ...getSectorProps() })
+	});
+}, "sector")();
+const ChartPieLabel = withContext((props) => {
+	const { getRootProps, getTextProps } = require_use_polar_chart.useChartPieLabel(props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.text, {
+		asChild: true,
+		...getRootProps(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Text, { ...getTextProps() })
+	});
+}, "label")();
+const ChartPieLabelLine = withContext((props) => {
+	const { getCurveProps, getRootProps } = require_use_polar_chart.useChartPieLabelLine(props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.path, {
+		asChild: true,
+		...getRootProps(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Curve, { ...getCurveProps() })
+	});
+}, "labelLine")();
+const ChartDonut = component(ChartPie, "donut")(void 0, (props) => {
+	const { pieProps } = useComponentContext();
+	return {
+		...pieProps,
+		...props
+	};
+}, ({ label, ...rest }) => ({
+	innerRadius: !label ? "70%" : "50%",
+	...rest
+}));
+const ChartRadar = withContext((props) => {
+	const { radarProps } = useComponentContext();
+	const { activeDot: activeDotProp = true, children, dataKey, dot: dotProp = false, label: labelProp = false, ...rest } = {
+		...radarProps,
+		...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 { getRadarProps, getRootProps } = require_use_polar_chart.useChartRadar({
+		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.path, {
+		asChild: true,
+		...getRootProps(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Radar, {
+			...getRadarProps(),
+			children
+		})
+	}), /* @__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
+		})
+	})] });
+}, "radar")();
+const ChartAngleAxis = withContext((props) => {
+	const { nameKey, angleAxisProps } = useComponentContext();
+	const { axisLine: axisLineProp = false, children, label: labelProp = false, tick: tickProp = true, tickLine: tickLineProp = false, ...rest } = {
+		...angleAxisProps,
+		...props
+	};
+	const system = require_system_provider.useSystem();
+	const { theme } = require_theme_provider.useTheme();
+	const tickProps = useSlotComponentProps({}, "angleAxisTick");
+	const labelProps = useSlotComponentProps({}, "angleAxisLabel");
+	const tickLineProps = useSlotComponentProps({}, "angleAxisTickLine");
+	const axisLineProps = useSlotComponentProps({}, "angleAxisLine");
+	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 { getAngleAxisProps, getRootProps } = require_use_polar_chart.useAngleAxis({
+		axisLine: (0, react.useMemo)(() => {
+			if (!axisLineProp) return axisLineProp;
+			const css = require_use_css.getCSS(system, theme);
+			const className = (0, require_utils_index.utils_exports.cx)(axisLineProps.className, css(axisLineProps.css));
+			if ((0, require_utils_index.utils_exports.isObject)(axisLineProp)) {
+				const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(axisLineProp, shouldForwardProp);
+				return {
+					...omittedProps,
+					className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
+				};
+			} else return { className };
+		}, [
+			system,
+			theme,
+			axisLineProp,
+			axisLineProps.className,
+			axisLineProps.css
+		]),
+		dataKey: nameKey,
+		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.text, {
+		asChild: true,
+		...getRootProps(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.PolarAngleAxis, {
+			...getAngleAxisProps(),
+			children
+		})
+	});
+}, "angleAxis")();
+const ChartRadiusAxis = withContext((props) => {
+	const { radiusAxisProps } = useComponentContext();
+	const { axisLine: axisLineProp = false, children, label: labelProp = false, tick: tickProp = true, tickLine: tickLineProp = false, ...rest } = {
+		...radiusAxisProps,
+		...props
+	};
+	const system = require_system_provider.useSystem();
+	const { theme } = require_theme_provider.useTheme();
+	const tickProps = useSlotComponentProps({}, "radiusAxisTick");
+	const labelProps = useSlotComponentProps({}, "radiusAxisLabel");
+	const tickLineProps = useSlotComponentProps({}, "radiusAxisTickLine");
+	const axisLineProps = useSlotComponentProps({}, "radiusAxisLine");
+	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 { getRadiusAxisProps, getRootProps } = require_use_polar_chart.useRadiusAxis({
+		axisLine: (0, react.useMemo)(() => {
+			if (!axisLineProp) return axisLineProp;
+			const css = require_use_css.getCSS(system, theme);
+			const className = (0, require_utils_index.utils_exports.cx)(axisLineProps.className, css(axisLineProps.css));
+			if ((0, require_utils_index.utils_exports.isObject)(axisLineProp)) {
+				const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(axisLineProp, shouldForwardProp);
+				return {
+					...omittedProps,
+					className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
+				};
+			} else return { className };
+		}, [
+			system,
+			theme,
+			axisLineProp,
+			axisLineProps.className,
+			axisLineProps.css
+		]),
+		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.text, {
+		asChild: true,
+		...getRootProps(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.PolarRadiusAxis, {
+			...getRadiusAxisProps(),
+			children
+		})
+	});
+}, "radiusAxis")();
+const ChartPolarGrid = withContext((props) => {
+	const { gridProps } = useComponentContext();
+	const { getPolarGridProps, getRootProps } = require_use_polar_chart.usePolarGrid({
+		...gridProps,
+		...props
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.line, {
+		asChild: true,
+		...getRootProps(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.PolarGrid, { ...getPolarGridProps() })
+	});
+}, "grid")();
+const ChartRadial = withContext((props) => {
+	const { radialProps } = useComponentContext();
+	const { background: backgroundProp = true, children, dataKey, label: labelProp = false, labelList = false, nameKey, sectorProps, ...rest } = {
+		...radialProps,
+		...props
+	};
+	const system = require_system_provider.useSystem();
+	const { theme } = require_theme_provider.useTheme();
+	const { nameKeyRef, varMap } = require_chart.useChartComponentContext();
+	const labelProps = useSlotComponentProps({}, "labelList");
+	const backgroundProps = useSlotComponentProps({}, "radialBackground");
+	const shape = (0, react.useCallback)((props$1) => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartSector, {
+			color: varMap[`${dataKey.toString()}-${props$1.name}`] ?? rest.fill ?? rest.color,
+			...props$1,
+			...(0, require_utils_index.utils_exports.runIfFn)(sectorProps, props$1)
+		});
+	}, [
+		dataKey,
+		rest.fill,
+		rest.color,
+		sectorProps,
+		varMap
+	]);
+	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 { getRadialProps, getRootProps } = require_use_polar_chart.useChartRadial({
+		background: (0, react.useMemo)(() => {
+			if (!backgroundProp) return backgroundProp;
+			const css = require_use_css.getCSS(system, theme);
+			const className = (0, require_utils_index.utils_exports.cx)(backgroundProps.className, css(backgroundProps.css));
+			if ((0, require_utils_index.utils_exports.isFunction)(backgroundProp)) return (props$1) => backgroundProp({
+				...props$1,
+				className: (0, require_utils_index.utils_exports.cx)(className, props$1.className)
+			});
+			else if ((0, react.isValidElement)(backgroundProp)) return (0, react.cloneElement)(backgroundProp, { className });
+			else if ((0, require_utils_index.utils_exports.isObject)(backgroundProp)) {
+				const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(backgroundProp, shouldForwardProp);
+				return {
+					...omittedProps,
+					className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
+				};
+			} else return { className };
+		}, [
+			system,
+			theme,
+			backgroundProp,
+			backgroundProps.className,
+			backgroundProps.css
+		]),
+		dataKey,
+		label,
+		nameKey,
+		shape,
+		...rest
+	});
+	require_ref.assignRef(nameKeyRef, nameKey);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.svg, {
+		asChild: true,
+		...getRootProps(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.RadialBar, {
+			...getRadialProps(),
+			children: [children, labelList ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chart.ChartLabelList, {
+				dataKey: nameKey,
+				offset: 4,
+				position: "insideStart",
+				...(0, require_utils_index.utils_exports.isObject)(labelList) ? labelList : {}
+			}) : null]
+		})
+	});
+}, "radial")();
+
+//#endregion
+exports.ChartAngleAxis = ChartAngleAxis;
+exports.ChartDonut = ChartDonut;
+exports.ChartPie = ChartPie;
+exports.ChartPolarGrid = ChartPolarGrid;
+exports.ChartRadar = ChartRadar;
+exports.ChartRadial = ChartRadial;
+exports.ChartRadiusAxis = ChartRadiusAxis;
+exports.PolarChart = PolarChart;
+//# sourceMappingURL=polar-chart.cjs.map