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

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

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