@yamada-ui/charts 1.5.0-dev-20240825095648 → 1.5.0-dev-20240825101928

package/dist/index.js

@@ -23,11 +23,12 @@ var src_exports = {};
 __export(src_exports, {
   AreaChart: () => AreaChart,
   BarChart: () => BarChart,
-  ChartCell: () => import_recharts8.Cell,
+  ChartCell: () => import_recharts9.Cell,
   DonutChart: () => DonutChart,
   LineChart: () => LineChart,
   PieChart: () => PieChart,
-  RadarChart: () => RadarChart
+  RadarChart: () => RadarChart,
+  RadialChart: () => RadialChart
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -122,6 +123,24 @@ var radarChartProperties = [
   "onClick"
 ];
 var pieChartProperties = ["width", "height", "margin", "onClick", "onMouseEnter", "onMouseLeave"];
+var radialChartProperties = [
+  "width",
+  "height",
+  "data",
+  "margin",
+  "barCategoryGap",
+  "barGap",
+  "cx",
+  "cy",
+  "startAngle",
+  "endAngle",
+  "innerRadius",
+  "outerRadius",
+  "barSize",
+  "onMouseEnter",
+  "onMouseLeave",
+  "onClick"
+];
 var referenceLineProperties = [
   "xAxisId",
   "yAxisId",
@@ -436,6 +455,28 @@ var pieProperties = [
   "onMouseEnter",
   "onMouseLeave"
 ];
+var radialBarProperties = [
+  "legendType",
+  "label",
+  "background",
+  "data",
+  "dataKey",
+  "isAnimationActive",
+  "animationBegin",
+  "animationDuration",
+  "animationEasing",
+  "onAnimationStart",
+  "onAnimationEnd",
+  "onClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseMove",
+  "onMouseOver",
+  "onMouseOut",
+  "onMouseEnter",
+  "onMouseLeave",
+  "cornerRadius"
+];
 var dotProperties = [
   "cx",
   "cy",
@@ -456,7 +497,8 @@ var polarGridProperties = [
   "outerRadius",
   "polarAngles",
   "polarRadius",
-  "gridType"
+  "gridType",
+  "radialLines"
 ];
 var polarAngleAxisProperties = [
   "dataKey",
@@ -517,6 +559,18 @@ var labelProperties = [
   "content",
   "id"
 ];
+var labelListProperties = [
+  "dataKey",
+  "valueAccessor",
+  "content",
+  "position",
+  "offset",
+  "formatter",
+  "data",
+  "clockWise",
+  "id",
+  "position"
+];
 
 // src/use-chart.ts
 var [ChartProvider, useChartContext] = (0, import_utils2.createContext)({
@@ -604,18 +658,26 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var ChartTooltip = (0, import_core4.forwardRef)(
   ({
     label,
+    dataKey = "value",
     className,
     payload = [],
     valueFormatter,
     labelFormatter,
     unit,
+    isRadialChart,
     ...rest
   }, ref) => {
     var _a;
     const { styles } = useTooltip();
     const items = payload.map(
-      ({ color: colorProp, name, value: valueProp, payload: payload2 } = {}, index) => {
+      ({
+        color: colorProp,
+        name: nameProp,
+        [dataKey]: valueProp,
+        payload: payload2
+      } = {}, index) => {
         var _a2;
+        const name = isRadialChart ? payload2 == null ? void 0 : payload2.name : nameProp;
         const color = colorProp != null ? colorProp : payload2 == null ? void 0 : payload2.color;
         let value;
         if ((0, import_utils4.isArray)(valueProp)) {
@@ -892,7 +954,7 @@ var useChartReferenceLine = ({
         [props, referenceLineProperties],
         styleClassName
       )(theme);
-      const color = `var(--ui-reference-line-${index})`;
+      const color = (0, import_core7.getVar)(`reference-line-${index}`)(theme);
       const label = {
         value: labelProp,
         fill: color,
@@ -989,7 +1051,6 @@ var useLineChart = ({
   } = (_a = rest.lineProps) != null ? _a : {};
   const lineColors = (0, import_react7.useMemo)(
     () => series.map(({ color }, index) => ({
-      __prefix: "ui",
       name: `line-${index}`,
       token: "colors",
       value: color != null ? color : "transparent"
@@ -998,7 +1059,6 @@ var useLineChart = ({
   );
   const referenceLineColors = (0, import_react7.useMemo)(
     () => referenceLineProps ? referenceLineProps.map(({ color }, index) => ({
-      __prefix: "ui",
       name: `reference-line-${index}`,
       token: "colors",
       value: color != null ? color : "transparent"
@@ -1009,7 +1069,7 @@ var useLineChart = ({
     () => [
       ...lineColors,
       ...referenceLineColors,
-      { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
+      { name: "fill-opacity", value: fillOpacity }
     ],
     [fillOpacity, lineColors, referenceLineColors]
   );
@@ -1025,8 +1085,8 @@ var useLineChart = ({
   );
   const [lineProps, lineClassName] = (0, import_react7.useMemo)(() => {
     const resolvedLineProps = {
-      fillOpacity: "var(--ui-fill-opacity)",
-      strokeOpacity: "var(--ui-fill-opacity)",
+      fillOpacity: "$fill-opacity",
+      strokeOpacity: "$fill-opacity",
       ...computedLineProps
     };
     return getComponentProps(
@@ -1074,7 +1134,7 @@ var useLineChart = ({
         dimLine: dimLine2 = {},
         ...computedProps
       } = props;
-      const color = `var(--ui-line-${index})`;
+      const color = (0, import_core9.getVar)(`line-${index}`)(theme);
       const dimmed = shouldHighlight && highlightedArea !== dataKey;
       const computedDimLine = { ...dimLineProps, ...dimLine2 };
       const resolvedProps = {
@@ -1460,7 +1520,6 @@ var useBarChart = ({
   } = (_a = rest.barProps) != null ? _a : {};
   const barColors = (0, import_react9.useMemo)(
     () => series.map(({ color }, index) => ({
-      __prefix: "ui",
       name: `bar-${index}`,
       token: "colors",
       value: color != null ? color : "transparent"
@@ -1469,7 +1528,6 @@ var useBarChart = ({
   );
   const referenceLineColors = (0, import_react9.useMemo)(
     () => referenceLineProps.map(({ color }, index) => ({
-      __prefix: "ui",
       name: `reference-line-${index}`,
       token: "colors",
       value: color != null ? color : "transparent"
@@ -1480,7 +1538,7 @@ var useBarChart = ({
     return [
       ...barColors,
       ...referenceLineColors,
-      { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
+      { name: "fill-opacity", value: fillOpacity }
     ];
   }, [barColors, fillOpacity, referenceLineColors]);
   const [chartProps, barChartClassName] = (0, import_react9.useMemo)(() => {
@@ -1492,7 +1550,7 @@ var useBarChart = ({
   }, [rest.chartProps, styles.chart, theme]);
   const [barProps, barClassName] = (0, import_react9.useMemo)(() => {
     const resolvedBarProps = {
-      fillOpacity: "var(--ui-fill-opacity)",
+      fillOpacity: "$fill-opacity",
       strokeOpacity: 1,
       ...computedBarProps
     };
@@ -1531,7 +1589,7 @@ var useBarChart = ({
         ...computedProps
       } = props;
       const id = `${uuid}-${dataKey}`;
-      const color = `var(--ui-bar-${index})`;
+      const color = (0, import_core11.getVar)(`bar-${index}`)(theme);
       const dimmed = shouldHighlight && highlightedArea !== dataKey;
       const computedDimBar = { ...dimBarProps, ...dimBar2 };
       const resolvedProps = {
@@ -1865,7 +1923,7 @@ var BarChart = (0, import_core12.forwardRef)((props, ref) => {
 });
 
 // src/area-chart.tsx
-var import_core14 = require("@yamada-ui/core");
+var import_core15 = require("@yamada-ui/core");
 var import_utils15 = require("@yamada-ui/utils");
 var import_react12 = require("react");
 var import_recharts4 = require("recharts");
@@ -1889,14 +1947,16 @@ var AreaGradient = ({
 };
 
 // src/area-chart-split.tsx
+var import_core13 = require("@yamada-ui/core");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var AreaSplit = ({ offset, id, fillOpacity }) => {
+  const { theme } = (0, import_core13.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "stop",
       {
         offset,
-        stopColor: "var(--ui-area-split-0)",
+        stopColor: (0, import_core13.getVar)(`area-split-0`)(theme),
         stopOpacity: fillOpacity != null ? fillOpacity : 0.4
       }
     ),
@@ -1904,7 +1964,7 @@ var AreaSplit = ({ offset, id, fillOpacity }) => {
       "stop",
       {
         offset,
-        stopColor: "var(--ui-area-split-1)",
+        stopColor: (0, import_core13.getVar)(`area-split-1`)(theme),
         stopOpacity: fillOpacity != null ? fillOpacity : 0.4
       }
     )
@@ -1912,7 +1972,7 @@ var AreaSplit = ({ offset, id, fillOpacity }) => {
 };
 
 // src/use-area-chart.ts
-var import_core13 = require("@yamada-ui/core");
+var import_core14 = require("@yamada-ui/core");
 var import_utils14 = require("@yamada-ui/utils");
 var import_react11 = require("react");
 var useAreaChart = ({
@@ -1938,7 +1998,7 @@ var useAreaChart = ({
 }) => {
   var _a;
   const uuid = (0, import_react11.useId)();
-  const { theme } = (0, import_core13.useTheme)();
+  const { theme } = (0, import_core14.useTheme)();
   const [highlightedArea, setHighlightedArea] = (0, import_react11.useState)(null);
   const splitId = `${uuid}-split`;
   const stacked = type === "stacked" || type === "percent";
@@ -1953,7 +2013,6 @@ var useAreaChart = ({
   } = (_a = rest.areaProps) != null ? _a : {};
   const areaColors = (0, import_react11.useMemo)(
     () => series.map(({ color }, index) => ({
-      __prefix: "ui",
       name: `area-${index}`,
       token: "colors",
       value: color != null ? color : "transparent"
@@ -1962,7 +2021,6 @@ var useAreaChart = ({
   );
   const areaSplitColors = (0, import_react11.useMemo)(
     () => splitColors.map((color, index) => ({
-      __prefix: "ui",
       name: `area-split-${index}`,
       token: "colors",
       value: color != null ? color : "transparent"
@@ -1971,7 +2029,6 @@ var useAreaChart = ({
   );
   const referenceLineColors = (0, import_react11.useMemo)(
     () => referenceLineProps ? referenceLineProps.map(({ color }, index) => ({
-      __prefix: "ui",
       name: `reference-line-${index}`,
       token: "colors",
       value: color != null ? color : "transparent"
@@ -1983,9 +2040,10 @@ var useAreaChart = ({
       ...areaColors,
       ...areaSplitColors,
       ...referenceLineColors,
-      { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
+      { name: "fill-opacity", value: fillOpacity }
     ];
   }, [areaColors, areaSplitColors, referenceLineColors, fillOpacity]);
+  const fillOpacityVar = (0, import_react11.useMemo)(() => (0, import_core14.getVar)("fill-opacity")(theme), [theme]);
   const [chartProps, areaChartClassName] = (0, import_react11.useMemo)(
     () => {
       var _a2;
@@ -2060,7 +2118,7 @@ var useAreaChart = ({
         ...computedProps
       } = props;
       const id = `${uuid}-${dataKey}`;
-      const color = `var(--ui-area-${index})`;
+      const color = (0, import_core14.getVar)(`area-${index}`)(theme);
       const dimmed = shouldHighlight && highlightedArea !== dataKey;
       const computedDimArea = { ...dimAreaProps, ...dimArea2 };
       const resolvedProps = {
@@ -2172,10 +2230,10 @@ var useAreaChart = ({
     (props = {}) => ({
       id: splitId,
       offset: splitOffset != null ? splitOffset : defaultSplitOffset,
-      fillOpacity: "var(--ui-fill-opacity)",
+      fillOpacity: fillOpacityVar,
       ...props
     }),
-    [defaultSplitOffset, splitId, splitOffset]
+    [defaultSplitOffset, splitId, splitOffset, fillOpacityVar]
   );
   const getAreaProps = (0, import_react11.useCallback)(
     ({ index, className: classNameProp, ...props }, ref = null) => {
@@ -2222,10 +2280,10 @@ var useAreaChart = ({
   const getAreaGradientProps = (0, import_react11.useCallback)(
     (props = {}) => ({
       withGradient,
-      fillOpacity: "var(--ui-fill-opacity)",
+      fillOpacity: fillOpacityVar,
       ...props
     }),
-    [withGradient]
+    [withGradient, fillOpacityVar]
   );
   return {
     getAreaChartProps,
@@ -2239,8 +2297,8 @@ var useAreaChart = ({
 
 // src/area-chart.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
-  const [styles, mergedProps] = (0, import_core14.useMultiComponentStyle)("AreaChart", props);
+var AreaChart = (0, import_core15.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core15.useMultiComponentStyle)("AreaChart", props);
   const {
     className,
     series,
@@ -2285,7 +2343,7 @@ var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
     splitOffset,
     syncId,
     ...rest
-  } = (0, import_core14.omitThemeProps)(mergedProps);
+  } = (0, import_core15.omitThemeProps)(mergedProps);
   const {
     getAreaChartProps,
     getAreaSplitProps,
@@ -2385,7 +2443,7 @@ var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
     [getReferenceLineProps, referenceLineProps]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_core14.ui.div,
+    import_core15.ui.div,
     {
       ref,
       className: (0, import_utils15.cx)("ui-area-chart", className),
@@ -2469,15 +2527,48 @@ var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
 });
 
 // src/radar-chart.tsx
-var import_core16 = require("@yamada-ui/core");
-var import_utils17 = require("@yamada-ui/utils");
-var import_react14 = require("react");
+var import_core18 = require("@yamada-ui/core");
+var import_utils18 = require("@yamada-ui/utils");
+var import_react15 = require("react");
 var import_recharts5 = require("recharts");
 
-// src/use-radar-chart.ts
-var import_core15 = require("@yamada-ui/core");
+// src/use-polar-grid.tsx
+var import_core16 = require("@yamada-ui/core");
 var import_utils16 = require("@yamada-ui/utils");
 var import_react13 = require("react");
+var usePolarGrid = ({
+  strokeDasharray,
+  styles,
+  ...rest
+}) => {
+  const { theme } = (0, import_core16.useTheme)();
+  const [polarGridProps, polarGridClassName] = (0, import_react13.useMemo)(
+    () => {
+      var _a;
+      return getComponentProps(
+        [(_a = rest.polarGridProps) != null ? _a : {}, polarGridProperties],
+        styles.polarGrid
+      )(theme);
+    },
+    [rest.polarGridProps, styles.polarGrid, theme]
+  );
+  const getPolarGridProps = (0, import_react13.useCallback)(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      className: (0, import_utils16.cx)(className, polarGridClassName),
+      strokeDasharray,
+      ...props,
+      ...polarGridProps
+    }),
+    [polarGridClassName, polarGridProps, strokeDasharray]
+  );
+  return { getPolarGridProps };
+};
+
+// src/use-radar-chart.ts
+var import_core17 = require("@yamada-ui/core");
+var import_utils17 = require("@yamada-ui/utils");
+var import_react14 = require("react");
 var useRadarChart = ({
   data,
   series,
@@ -2488,13 +2579,12 @@ var useRadarChart = ({
   fillOpacity = 0.4,
   polarAngleAxisTickFormatter,
   polarRadiusAxisTickFormatter,
-  strokeDasharray,
   styles,
   ...rest
 }) => {
   var _a;
-  const { theme } = (0, import_core15.useTheme)();
-  const [highlightedArea, setHighlightedArea] = (0, import_react13.useState)(null);
+  const { theme } = (0, import_core17.useTheme)();
+  const [highlightedArea, setHighlightedArea] = (0, import_react14.useState)(null);
   const shouldHighlight = highlightedArea !== null;
   const {
     dot = {},
@@ -2503,23 +2593,22 @@ var useRadarChart = ({
     dimRadar,
     ...computedRadarProps
   } = (_a = rest.radarProps) != null ? _a : {};
-  const radarColors = (0, import_react13.useMemo)(
+  const radarColors = (0, import_react14.useMemo)(
     () => series.map(({ color }, index) => ({
-      __prefix: "ui",
       name: `radar-${index}`,
       token: "colors",
       value: color != null ? color : "transparent"
     })),
     [series]
   );
-  const radarVars = (0, import_react13.useMemo)(
+  const radarVars = (0, import_react14.useMemo)(
     () => [
       ...radarColors,
-      { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
+      { name: "fill-opacity", value: fillOpacity }
     ],
     [fillOpacity, radarColors]
   );
-  const [chartProps, radarChartClassName] = (0, import_react13.useMemo)(
+  const [chartProps, radarChartClassName] = (0, import_react14.useMemo)(
     () => {
       var _a2;
       return getComponentProps(
@@ -2529,17 +2618,7 @@ var useRadarChart = ({
     },
     [rest.chartProps, styles.chart, theme]
   );
-  const [polarGridProps, polarGridClassName] = (0, import_react13.useMemo)(
-    () => {
-      var _a2;
-      return getComponentProps(
-        [(_a2 = rest.polarGridProps) != null ? _a2 : {}, polarGridProperties],
-        styles.polarGrid
-      )(theme);
-    },
-    [rest.polarGridProps, styles.polarGrid, theme]
-  );
-  const [polarAngleAxisProps, polarAngleAxisClassName] = (0, import_react13.useMemo)(
+  const [polarAngleAxisProps, polarAngleAxisClassName] = (0, import_react14.useMemo)(
     () => {
       var _a2;
       return getComponentProps(
@@ -2549,14 +2628,14 @@ var useRadarChart = ({
     },
     [rest.polarAngleAxisProps, styles.polarAngleAxis, theme]
   );
-  const polarAngleAxisTickClassName = (0, import_react13.useMemo)(
+  const polarAngleAxisTickClassName = (0, import_react14.useMemo)(
     () => getClassName({
       ...styles.polarAngleAxisTick,
       ...rest.polarAngleAxisTickProps
     })(theme),
     [rest.polarAngleAxisTickProps, styles.polarAngleAxisTick, theme]
   );
-  const [polarRadiusAxisProps, polarRadiusAxisClassName] = (0, import_react13.useMemo)(
+  const [polarRadiusAxisProps, polarRadiusAxisClassName] = (0, import_react14.useMemo)(
     () => {
       var _a2;
       return getComponentProps(
@@ -2566,16 +2645,16 @@ var useRadarChart = ({
     },
     [rest.polarRadiusAxisProps, styles.polarRadiusAxis, theme]
   );
-  const polarRadiusAxisTickClassName = (0, import_react13.useMemo)(
+  const polarRadiusAxisTickClassName = (0, import_react14.useMemo)(
     () => getClassName({
       ...styles.polarRadiusAxisTick,
       ...rest.polarRadiusAxisTickProps
     })(theme),
     [rest.polarRadiusAxisTickProps, styles.polarRadiusAxisTick, theme]
   );
-  const [radarProps, radarClassName] = (0, import_react13.useMemo)(() => {
+  const [radarProps, radarClassName] = (0, import_react14.useMemo)(() => {
     const resolvedRadarProps = {
-      fillOpacity: "var(--ui-fill-opacity)",
+      fillOpacity: "$fill-opacity",
       ...computedRadarProps
     };
     return getComponentProps(
@@ -2583,7 +2662,7 @@ var useRadarChart = ({
       styles.radar
     )(theme);
   }, [computedRadarProps, styles.radar, theme]);
-  const [dimRadarProps, dimRadarClassName] = (0, import_react13.useMemo)(() => {
+  const [dimRadarProps, dimRadarClassName] = (0, import_react14.useMemo)(() => {
     const resolvedDimRadar = {
       fillOpacity: 0.3,
       strokeOpacity: 0.3,
@@ -2593,27 +2672,27 @@ var useRadarChart = ({
       theme
     );
   }, [dimRadar, theme]);
-  const [dotProps, dotClassName] = (0, import_react13.useMemo)(() => {
+  const [dotProps, dotClassName] = (0, import_react14.useMemo)(() => {
     const resolvedDot = { fillOpacity: 1, strokeWidth: 2, ...dot };
     return getComponentProps(
       [resolvedDot, dotProperties],
       styles.dot
     )(theme);
   }, [dot, styles.dot, theme]);
-  const [activeDotProps, activeDotClassName] = (0, import_react13.useMemo)(
+  const [activeDotProps, activeDotClassName] = (0, import_react14.useMemo)(
     () => getComponentProps(
       [activeDot, dotProperties],
       styles.activeDot
     )(theme),
     [activeDot, styles.activeDot, theme]
   );
-  const [dimDotProps, dimDotClassName] = (0, import_react13.useMemo)(() => {
+  const [dimDotProps, dimDotClassName] = (0, import_react14.useMemo)(() => {
     const resolvedDimDot = { fillOpacity: 0, strokeOpacity: 0, ...dimDot };
     return getComponentProps([resolvedDimDot, dotProperties])(
       theme
     );
   }, [dimDot, theme]);
-  const radarPropList = (0, import_react13.useMemo)(
+  const radarPropList = (0, import_react14.useMemo)(
     () => series.map((props, index) => {
       const {
         dataKey: dataKey2,
@@ -2623,7 +2702,7 @@ var useRadarChart = ({
         dimRadar: dimRadar2 = {},
         ...computedProps
       } = props;
-      const color = `var(--ui-radar-${index})`;
+      const color = (0, import_core17.getVar)(`radar-${index}`)(theme);
       const dimmed = shouldHighlight && highlightedArea !== dataKey2;
       const computedDimRadar = { ...dimRadarProps, ...dimRadar2 };
       const resolvedProps = {
@@ -2647,7 +2726,7 @@ var useRadarChart = ({
           activeDotClassName
         )(theme);
         resolvedActiveDot = {
-          className: (0, import_utils16.cx)("ui-radar-chart__active-dot", className),
+          className: (0, import_utils17.cx)("ui-radar-chart__active-dot", className),
           fill: color,
           stroke: color,
           r: 4,
@@ -2670,7 +2749,7 @@ var useRadarChart = ({
           dimmed ? dimDotClassName : void 0
         )(theme);
         resolvedDot = {
-          className: (0, import_utils16.cx)("ui-radar-chart__dot", className),
+          className: (0, import_utils17.cx)("ui-radar-chart__dot", className),
           fill: color,
           r: 4,
           ...rest3
@@ -2705,22 +2784,22 @@ var useRadarChart = ({
       withDots
     ]
   );
-  const getRadarChartProps = (0, import_react13.useCallback)(
+  const getRadarChartProps = (0, import_react14.useCallback)(
     ({ className, ...props } = {}, ref = null) => ({
       ref,
-      className: (0, import_utils16.cx)(className, radarChartClassName),
+      className: (0, import_utils17.cx)(className, radarChartClassName),
       data,
       ...props,
       ...chartProps
     }),
     [data, radarChartClassName, chartProps]
   );
-  const getRadarProps = (0, import_react13.useCallback)(
+  const getRadarProps = (0, import_react14.useCallback)(
     ({ index, className: classNameProp, ...props }, ref = null) => {
       const { color, className, dataKey: dataKey2, activeDot: activeDot2, dot: dot2, ...rest2 } = radarPropList[index];
       return {
         ref,
-        className: (0, import_utils16.cx)(classNameProp, className),
+        className: (0, import_utils17.cx)(classNameProp, className),
         activeDot: activeDot2,
         dot: dot2,
         name: dataKey2,
@@ -2735,23 +2814,13 @@ var useRadarChart = ({
     },
     [radarPropList, strokeWidth]
   );
-  const getPolarGridProps = (0, import_react13.useCallback)(
+  const getPolarAngleAxisProps = (0, import_react14.useCallback)(
     ({ className, ...props } = {}, ref = null) => ({
       ref,
-      className: (0, import_utils16.cx)(className, polarGridClassName),
-      strokeDasharray,
-      ...props,
-      ...polarGridProps
-    }),
-    [polarGridClassName, polarGridProps, strokeDasharray]
-  );
-  const getPolarAngleAxisProps = (0, import_react13.useCallback)(
-    ({ className, ...props } = {}, ref = null) => ({
-      ref,
-      className: (0, import_utils16.cx)(className, polarAngleAxisClassName),
+      className: (0, import_utils17.cx)(className, polarAngleAxisClassName),
       dataKey,
       tick: {
-        className: (0, import_utils16.cx)(
+        className: (0, import_utils17.cx)(
           "ui-radar-chart__polar-angle-axis-tick",
           polarAngleAxisTickClassName
         )
@@ -2769,12 +2838,12 @@ var useRadarChart = ({
       polarAngleAxisTickFormatter
     ]
   );
-  const getPolarRadiusAxisProps = (0, import_react13.useCallback)(
+  const getPolarRadiusAxisProps = (0, import_react14.useCallback)(
     ({ className, ...props } = {}, ref = null) => ({
       ref,
-      className: (0, import_utils16.cx)(className, polarRadiusAxisClassName),
+      className: (0, import_utils17.cx)(className, polarRadiusAxisClassName),
       tick: {
-        className: (0, import_utils16.cx)(
+        className: (0, import_utils17.cx)(
           "ui-radar-chart__polar-radius-axis-tick",
           polarRadiusAxisTickClassName
         )
@@ -2794,7 +2863,6 @@ var useRadarChart = ({
     radarVars,
     getRadarChartProps,
     getRadarProps,
-    getPolarGridProps,
     getPolarAngleAxisProps,
     getPolarRadiusAxisProps,
     setHighlightedArea
@@ -2803,8 +2871,8 @@ var useRadarChart = ({
 
 // src/radar-chart.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
-  const [styles, mergedProps] = (0, import_core16.useMultiComponentStyle)("RadarChart", props);
+var RadarChart = (0, import_core18.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core18.useMultiComponentStyle)("RadarChart", props);
   const {
     className,
     data,
@@ -2836,11 +2904,10 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
     withPolarAngleAxis = true,
     withPolarRadiusAxis = false,
     ...rest
-  } = (0, import_core16.omitThemeProps)(mergedProps);
+  } = (0, import_core18.omitThemeProps)(mergedProps);
   const {
     getRadarProps,
     getRadarChartProps,
-    getPolarGridProps,
     getPolarAngleAxisProps,
     getPolarRadiusAxisProps,
     radarVars,
@@ -2851,7 +2918,6 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
     dataKey,
     radarProps,
     chartProps,
-    polarGridProps,
     polarAngleAxisProps,
     polarAngleAxisTickProps,
     polarRadiusAxisProps,
@@ -2862,7 +2928,6 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
     fillOpacity,
     polarAngleAxisTickFormatter,
     polarRadiusAxisTickFormatter,
-    strokeDasharray,
     styles
   });
   const { getContainerProps } = useChart({ containerProps });
@@ -2874,7 +2939,12 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
   const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
     legendProps
   });
-  const radars = (0, import_react14.useMemo)(
+  const { getPolarGridProps } = usePolarGrid({
+    polarGridProps,
+    strokeDasharray,
+    styles
+  });
+  const radars = (0, import_react15.useMemo)(
     () => series.map(({ dataKey: dataKey2 }, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       import_recharts5.Radar,
       {
@@ -2885,10 +2955,10 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
     [getRadarProps, series]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    import_core16.ui.div,
+    import_core18.ui.div,
     {
       ref,
-      className: (0, import_utils17.cx)("ui-radar-chart", className),
+      className: (0, import_utils18.cx)("ui-radar-chart", className),
       var: radarVars,
       __css: { maxW: "full", ...styles.container },
       ...rest,
@@ -2968,27 +3038,27 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
 });
 
 // src/donut-chart.tsx
-var import_core20 = require("@yamada-ui/core");
-var import_utils21 = require("@yamada-ui/utils");
-var import_react17 = require("react");
+var import_core22 = require("@yamada-ui/core");
+var import_utils22 = require("@yamada-ui/utils");
+var import_react18 = require("react");
 var import_recharts6 = require("recharts");
 
 // src/use-chart-label.ts
-var import_core17 = require("@yamada-ui/core");
-var import_utils18 = require("@yamada-ui/utils");
-var import_react15 = require("react");
+var import_core19 = require("@yamada-ui/core");
+var import_utils19 = require("@yamada-ui/utils");
+var import_react16 = require("react");
 var useChartLabel = ({ styles, ...rest }) => {
   var _a;
-  const { theme } = (0, import_core17.useTheme)();
+  const { theme } = (0, import_core19.useTheme)();
   const [labelProps, labelClassName] = getComponentProps(
     [(_a = rest.labelProps) != null ? _a : {}, labelProperties],
     styles.label
   )(theme);
-  const getLabelProps = (0, import_react15.useCallback)(
+  const getLabelProps = (0, import_react16.useCallback)(
     ({ className, ...props } = {}, ref = null) => {
       return {
         ref,
-        className: (0, import_utils18.cx)(className, labelClassName),
+        className: (0, import_utils19.cx)(className, labelClassName),
         ...props,
         ...labelProps
       };
@@ -2999,13 +3069,13 @@ var useChartLabel = ({ styles, ...rest }) => {
 };
 
 // src/use-pie-chart.ts
-var import_core19 = require("@yamada-ui/core");
-var import_utils20 = require("@yamada-ui/utils");
-var import_react16 = require("react");
+var import_core21 = require("@yamada-ui/core");
+var import_utils21 = require("@yamada-ui/utils");
+var import_react17 = require("react");
 
 // src/pie-chart-label.tsx
-var import_core18 = require("@yamada-ui/core");
-var import_utils19 = require("@yamada-ui/utils");
+var import_core20 = require("@yamada-ui/core");
+var import_utils20 = require("@yamada-ui/utils");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var RADIAN = Math.PI / 180;
 var DEFAULT_LABEL_OFFSET = 22;
@@ -3032,16 +3102,16 @@ var pieChartLabel = ({
   const displayLabel = () => {
     if (isPercent) {
       return parseFloat((percent * 100).toFixed(0)) > 0 && `${(percent * 100).toFixed(0)}%`;
-    } else if (!(0, import_utils19.isUndefined)(labelFormatter)) {
+    } else if (!(0, import_utils20.isUndefined)(labelFormatter)) {
       return labelFormatter(value);
     } else {
       return value;
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_core18.ui.text,
+    import_core20.ui.text,
     {
-      className: (0, import_utils19.cx)(cellClassName, "ui-chart__label"),
+      className: (0, import_utils20.cx)(cellClassName, "ui-chart__label"),
       x,
       y,
       textAnchor,
@@ -3070,9 +3140,9 @@ var pieChartLabelLine = ({
   const y = cyProp + (middleRadius + labelOffset) * Math.sin(-midAngle * RADIAN);
   const d = `M ${points[0].x} ${points[0].y} L ${x} ${y}`;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_core18.ui.path,
+    import_core20.ui.path,
     {
-      className: (0, import_utils19.cx)(cellClassName, "ui-chart__label-line"),
+      className: (0, import_utils20.cx)(cellClassName, "ui-chart__label-line"),
       d,
       __css: styles,
       ...labelLineProps
@@ -3099,8 +3169,8 @@ var usePieChart = ({
   ...rest
 }) => {
   var _a, _b;
-  const { theme } = (0, import_core19.useTheme)();
-  const [highlightedArea, setHighlightedArea] = (0, import_react16.useState)(null);
+  const { theme } = (0, import_core21.useTheme)();
+  const [highlightedArea, setHighlightedArea] = (0, import_react17.useState)(null);
   const shouldHighlight = highlightedArea !== null;
   const { dimCell, ...computedCellProps } = (_a = rest.cellProps) != null ? _a : {};
   const {
@@ -3110,23 +3180,22 @@ var usePieChart = ({
     labelLine: labelLineProps,
     ...computedPieProps
   } = (_b = rest.pieProps) != null ? _b : {};
-  const cellColors = (0, import_react16.useMemo)(
+  const cellColors = (0, import_react17.useMemo)(
     () => data.map(({ color }, index) => ({
-      __prefix: "ui",
       name: `cell-${index}`,
       token: "colors",
       value: color != null ? color : "transparent"
     })),
     [data]
   );
-  const pieVars = (0, import_react16.useMemo)(
+  const pieVars = (0, import_react17.useMemo)(
     () => [
       ...cellColors,
-      { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
+      { name: "fill-opacity", value: fillOpacity }
     ],
     [fillOpacity, cellColors]
   );
-  const [chartProps, chartClassName] = (0, import_react16.useMemo)(
+  const [chartProps, chartClassName] = (0, import_react17.useMemo)(
     () => {
       var _a2;
       return getComponentProps(
@@ -3136,40 +3205,40 @@ var usePieChart = ({
     },
     [rest.chartProps, styles.chart, theme]
   );
-  const [pieProps, pieClassName] = (0, import_react16.useMemo)(
+  const [pieProps, pieClassName] = (0, import_react17.useMemo)(
     () => getComponentProps(
       [computedPieProps, pieProperties],
       styles.pie
     )(theme),
     [computedPieProps, styles.pie, theme]
   );
-  const cellClassName = (0, import_react16.useMemo)(() => {
+  const cellClassName = (0, import_react17.useMemo)(() => {
     const resolvedCellProps = {
-      fillOpacity: "var(--ui-fill-opacity)",
+      fillOpacity: "$fill-opacity",
       ...styles.cell,
       ...computedCellProps
     };
     return getClassName(resolvedCellProps)(theme);
   }, [computedCellProps, styles.cell, theme]);
-  const dimCellClassName = (0, import_react16.useMemo)(() => {
+  const dimCellClassName = (0, import_react17.useMemo)(() => {
     const resolvedDimCell = { fillOpacity: 0.3, strokeOpacity: 0, ...dimCell };
     return getClassName(resolvedDimCell)(theme);
   }, [dimCell, theme]);
-  const activeShapeProps = (0, import_react16.useMemo)(
+  const activeShapeProps = (0, import_react17.useMemo)(
     () => getComponentProps(
       [{ _focus: { outline: "none" }, ...activeShape }, pieProperties],
       styles.activeShape
     )(theme, true),
     [activeShape, styles.activeShape, theme]
   );
-  const inactiveShapeProps = (0, import_react16.useMemo)(
+  const inactiveShapeProps = (0, import_react17.useMemo)(
     () => getComponentProps(
       [inactiveShape, pieProperties],
       styles.inactiveShape
     )(theme, true),
     [inactiveShape, styles.inactiveShape, theme]
   );
-  const label = (0, import_react16.useCallback)(
+  const label = (0, import_react17.useCallback)(
     (props) => pieChartLabel({
       labelOffset,
       isPercent,
@@ -3180,7 +3249,7 @@ var usePieChart = ({
     }),
     [isPercent, labelOffset, labelProps, styles.label, labelFormatter]
   );
-  const labelLine = (0, import_react16.useCallback)(
+  const labelLine = (0, import_react17.useCallback)(
     (props) => {
       return pieChartLabelLine({
         labelOffset,
@@ -3191,10 +3260,10 @@ var usePieChart = ({
     },
     [labelLineProps, labelOffset, styles.labelLine]
   );
-  const cellPropList = (0, import_react16.useMemo)(
+  const cellPropList = (0, import_react17.useMemo)(
     () => data.map((props, index) => {
       const { name, dimCell: dimCell2 = {}, ...computedProps } = props;
-      const color = `var(--ui-cell-${index})`;
+      const color = (0, import_core21.getVar)(`cell-${index}`)(theme);
       const dimmed = shouldHighlight && highlightedArea !== name;
       const resolvedProps = {
         ...computedProps,
@@ -3221,19 +3290,19 @@ var usePieChart = ({
       theme
     ]
   );
-  const getPieChartProps = (0, import_react16.useCallback)(
+  const getPieChartProps = (0, import_react17.useCallback)(
     ({ className, ...props } = {}, ref = null) => ({
       ref,
-      className: (0, import_utils20.cx)(className, chartClassName),
+      className: (0, import_utils21.cx)(className, chartClassName),
       ...props,
       ...chartProps
     }),
     [chartProps, chartClassName]
   );
-  const getPieProps = (0, import_react16.useCallback)(
+  const getPieProps = (0, import_react17.useCallback)(
     ({ className, ...props }, ref = null) => ({
       ref,
-      className: (0, import_utils20.cx)(className, pieClassName),
+      className: (0, import_utils21.cx)(className, pieClassName),
       dataKey: "value",
       data,
       rootTabIndex: -1,
@@ -3267,12 +3336,12 @@ var usePieChart = ({
       pieProps
     ]
   );
-  const getCellProps = (0, import_react16.useCallback)(
+  const getCellProps = (0, import_react17.useCallback)(
     ({ index, className: classNameProp, ...props }, ref = null) => {
       const { className, color } = cellPropList[index];
       return {
         ref,
-        className: (0, import_utils20.cx)(classNameProp, className),
+        className: (0, import_utils21.cx)(classNameProp, className),
         fill: color,
         stroke: color,
         strokeWidth,
@@ -3292,8 +3361,8 @@ var usePieChart = ({
 
 // src/donut-chart.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var DonutChart = (0, import_core20.forwardRef)((props, ref) => {
-  const [styles, mergedProps] = (0, import_core20.useMultiComponentStyle)("DonutChart", props);
+var DonutChart = (0, import_core22.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core22.useMultiComponentStyle)("DonutChart", props);
   const {
     className,
     data,
@@ -3322,7 +3391,7 @@ var DonutChart = (0, import_core20.forwardRef)((props, ref) => {
     legendProps,
     labelProps,
     ...rest
-  } = (0, import_core20.omitThemeProps)(mergedProps);
+  } = (0, import_core22.omitThemeProps)(mergedProps);
   const {
     pieVars,
     getPieProps,
@@ -3357,7 +3426,7 @@ var DonutChart = (0, import_core20.forwardRef)((props, ref) => {
     legendProps
   });
   const { getLabelProps } = useChartLabel({ labelProps, styles });
-  const cells = (0, import_react17.useMemo)(
+  const cells = (0, import_react18.useMemo)(
     () => data.map(({ name }, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       import_recharts6.Cell,
       {
@@ -3368,10 +3437,10 @@ var DonutChart = (0, import_core20.forwardRef)((props, ref) => {
     [data, getCellProps]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_core20.ui.div,
+    import_core22.ui.div,
     {
       ref,
-      className: (0, import_utils21.cx)("ui-donut-chart", className),
+      className: (0, import_utils22.cx)("ui-donut-chart", className),
       var: pieVars,
       __css: { maxW: "full", ...styles.container },
       ...rest,
@@ -3443,13 +3512,13 @@ var DonutChart = (0, import_core20.forwardRef)((props, ref) => {
 });
 
 // src/pie-chart.tsx
-var import_core21 = require("@yamada-ui/core");
-var import_utils22 = require("@yamada-ui/utils");
-var import_react18 = require("react");
+var import_core23 = require("@yamada-ui/core");
+var import_utils23 = require("@yamada-ui/utils");
+var import_react19 = require("react");
 var import_recharts7 = require("recharts");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var PieChart = (0, import_core21.forwardRef)((props, ref) => {
-  const [styles, mergedProps] = (0, import_core21.useMultiComponentStyle)("PieChart", props);
+var PieChart = (0, import_core23.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core23.useMultiComponentStyle)("PieChart", props);
   const {
     className,
     data,
@@ -3477,7 +3546,7 @@ var PieChart = (0, import_core21.forwardRef)((props, ref) => {
     strokeWidth,
     legendProps,
     ...rest
-  } = (0, import_core21.omitThemeProps)(mergedProps);
+  } = (0, import_core23.omitThemeProps)(mergedProps);
   const {
     pieVars,
     getPieProps,
@@ -3511,7 +3580,7 @@ var PieChart = (0, import_core21.forwardRef)((props, ref) => {
   const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
     legendProps
   });
-  const cells = (0, import_react18.useMemo)(
+  const cells = (0, import_react19.useMemo)(
     () => data.map(({ name }, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       import_recharts7.Cell,
       {
@@ -3522,10 +3591,10 @@ var PieChart = (0, import_core21.forwardRef)((props, ref) => {
     [data, getCellProps]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_core21.ui.div,
+    import_core23.ui.div,
     {
       ref,
-      className: (0, import_utils22.cx)("ui-pie-chart", className),
+      className: (0, import_utils23.cx)("ui-pie-chart", className),
       var: pieVars,
       __css: { maxW: "full", ...styles.container },
       ...rest,
@@ -3588,8 +3657,341 @@ var PieChart = (0, import_core21.forwardRef)((props, ref) => {
   ) });
 });
 
-// src/index.ts
+// src/radial-chart.tsx
+var import_core26 = require("@yamada-ui/core");
+var import_utils26 = require("@yamada-ui/utils");
+var import_react22 = require("react");
 var import_recharts8 = require("recharts");
+
+// src/use-chart-label-list.ts
+var import_core24 = require("@yamada-ui/core");
+var import_utils24 = require("@yamada-ui/utils");
+var import_react20 = require("react");
+var useChartLabelList = ({
+  labelListProps = [],
+  styles
+}) => {
+  const { theme } = (0, import_core24.useTheme)();
+  const styleClassName = (0, import_core24.getCSS)(styles.labelList)(theme);
+  const propList = (0, import_react20.useMemo)(
+    () => labelListProps.map(
+      (props) => getComponentProps(
+        [props, labelListProperties],
+        styleClassName
+      )(theme, true)
+    ),
+    [labelListProps, styleClassName, theme]
+  );
+  const getLabelLineProps = (0, import_react20.useCallback)(
+    ({ index, className, ...props }, ref = null) => {
+      const { className: propClassName, ...rest } = propList[index];
+      return {
+        ref,
+        className: (0, import_utils24.cx)(className, propClassName),
+        ...props,
+        ...rest
+      };
+    },
+    [propList]
+  );
+  return { getLabelLineProps };
+};
+
+// src/use-radial-chart.ts
+var import_core25 = require("@yamada-ui/core");
+var import_utils25 = require("@yamada-ui/utils");
+var import_react21 = require("react");
+var useRadialChart = ({
+  data: dataProp,
+  dataKey = "value",
+  innerRadius = "10%",
+  outerRadius = "80%",
+  startAngle = 180,
+  endAngle = 0,
+  fillOpacity = 1,
+  styles,
+  ...rest
+}) => {
+  var _a;
+  const { theme } = (0, import_core25.useTheme)();
+  const [highlightedArea, setHighlightedArea] = (0, import_react21.useState)(null);
+  const shouldHighlight = highlightedArea !== null;
+  const {
+    background: backgroundProps = {},
+    dimRadialBar: dimRadialBarProps = {},
+    ...computedRadialBarProps
+  } = (_a = rest.radialBarProps) != null ? _a : {};
+  const radialVars = (0, import_react21.useMemo)(
+    () => dataProp.map(({ color }, index) => ({
+      name: `radial-bar-${index}`,
+      token: "colors",
+      value: color != null ? color : "transparent"
+    })),
+    [dataProp]
+  );
+  const dimRadialBarClassName = (0, import_react21.useMemo)(() => {
+    const resolvedDimRadialBar = {
+      fillOpacity: 0.3,
+      strokeOpacity: 0,
+      ...dimRadialBarProps
+    };
+    return getClassName(resolvedDimRadialBar)(theme);
+  }, [dimRadialBarProps, theme]);
+  const [chartProps, chartClassName] = (0, import_react21.useMemo)(
+    () => {
+      var _a2;
+      return getComponentProps(
+        [(_a2 = rest.chartProps) != null ? _a2 : {}, radialChartProperties],
+        styles.chart
+      )(theme);
+    },
+    [rest.chartProps, styles.chart, theme]
+  );
+  const background = (0, import_react21.useMemo)(
+    () => getComponentProps(
+      [backgroundProps, radialBarProperties],
+      styles.background
+    )(theme, true),
+    [backgroundProps, styles.background, theme]
+  );
+  const [radialBarProps, radialBarClassName] = (0, import_react21.useMemo)(
+    () => getComponentProps(
+      [computedRadialBarProps != null ? computedRadialBarProps : {}, radialBarProperties],
+      styles.radialBar
+    )(theme),
+    [computedRadialBarProps, styles.radialBar, theme]
+  );
+  const data = (0, import_react21.useMemo)(
+    () => dataProp.map((props, index) => {
+      const {
+        name,
+        value,
+        color,
+        dimRadialBar = {},
+        ...computedProps
+      } = props;
+      const dimmed = shouldHighlight && highlightedArea !== name;
+      const resolvedProps = {
+        ...computedProps,
+        ...dimmed ? dimRadialBar : { fillOpacity }
+      };
+      const className = getClassName(
+        resolvedProps,
+        dimmed ? dimRadialBarClassName : void 0
+      )(theme);
+      return {
+        className,
+        fill: (0, import_core25.getVar)(`radial-bar-${index}`)(theme),
+        name,
+        value,
+        color
+      };
+    }),
+    [
+      dataProp,
+      dimRadialBarClassName,
+      fillOpacity,
+      highlightedArea,
+      shouldHighlight,
+      theme
+    ]
+  );
+  const getRadialChartProps = (0, import_react21.useCallback)(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      className: (0, import_utils25.cx)(className, chartClassName),
+      data,
+      innerRadius,
+      outerRadius,
+      startAngle,
+      endAngle,
+      ...props,
+      ...chartProps
+    }),
+    [
+      chartClassName,
+      chartProps,
+      data,
+      endAngle,
+      innerRadius,
+      outerRadius,
+      startAngle
+    ]
+  );
+  const getRadialBarProps = (0, import_react21.useCallback)(
+    ({ className, ...props }, ref = null) => ({
+      ref,
+      className: (0, import_utils25.cx)(className, radialBarClassName),
+      dataKey,
+      isAnimationActive: false,
+      background,
+      ...props,
+      ...radialBarProps
+    }),
+    [background, dataKey, radialBarClassName, radialBarProps]
+  );
+  return {
+    radialVars,
+    setHighlightedArea,
+    getRadialChartProps,
+    getRadialBarProps
+  };
+};
+
+// src/radial-chart.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var RadialChart = (0, import_core26.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core26.useMultiComponentStyle)("RadialChart", props);
+  const {
+    className,
+    data,
+    dataKey,
+    chartProps,
+    radialBarProps,
+    containerProps,
+    withPolarGrid = false,
+    withTooltip = true,
+    withLegend = false,
+    tooltipProps,
+    tooltipAnimationDuration,
+    tooltipDataSource = "all",
+    valueFormatter,
+    unit,
+    legendProps,
+    innerRadius,
+    outerRadius,
+    startAngle,
+    endAngle,
+    fillOpacity,
+    labelListProps = [],
+    polarGridProps,
+    strokeDasharray,
+    ...rest
+  } = (0, import_core26.omitThemeProps)(mergedProps);
+  const {
+    getRadialChartProps,
+    getRadialBarProps,
+    radialVars,
+    setHighlightedArea
+  } = useRadialChart({
+    data,
+    dataKey,
+    styles,
+    chartProps,
+    radialBarProps,
+    innerRadius,
+    outerRadius,
+    startAngle,
+    endAngle,
+    fillOpacity
+  });
+  const { getContainerProps } = useChart({ containerProps });
+  const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
+    tooltipProps,
+    tooltipAnimationDuration,
+    styles
+  });
+  const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
+    legendProps
+  });
+  const { getLabelLineProps } = useChartLabelList({ labelListProps, styles });
+  const { getPolarGridProps } = usePolarGrid({
+    polarGridProps,
+    strokeDasharray,
+    styles
+  });
+  const labelLists = (0, import_react22.useMemo)(
+    () => labelListProps.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_recharts8.LabelList,
+      {
+        ...getLabelLineProps({
+          index,
+          className: "ui-radial-chart__label-list"
+        })
+      },
+      `labelList-${index}`
+    )),
+    [getLabelLineProps, labelListProps]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_core26.ui.div,
+    {
+      ref,
+      className: (0, import_utils26.cx)("ui-radial-chart", className),
+      var: radialVars,
+      __css: { maxW: "full", ...styles.container },
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        import_recharts8.ResponsiveContainer,
+        {
+          ...getContainerProps({ className: "ui-radial-chart__container" }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            import_recharts8.RadialBarChart,
+            {
+              ...getRadialChartProps({
+                className: "ui-radial-chart__chart"
+              }),
+              children: [
+                withPolarGrid ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  import_recharts8.PolarGrid,
+                  {
+                    ...getPolarGridProps({
+                      className: "ui-radial-chart__polar-grid"
+                    })
+                  }
+                ) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  import_recharts8.RadialBar,
+                  {
+                    ...getRadialBarProps({
+                      className: "ui-radial-chart__radial-bar"
+                    }),
+                    children: labelLists
+                  }
+                ),
+                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  import_recharts8.Legend,
+                  {
+                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                      ChartLegend,
+                      {
+                        className: "ui-radial-chart__legend",
+                        payload,
+                        onHighlight: setHighlightedArea,
+                        ...computedLegendProps
+                      }
+                    ),
+                    ...getLegendProps()
+                  }
+                ) : null,
+                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  import_recharts8.Tooltip,
+                  {
+                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                      ChartTooltip,
+                      {
+                        className: "ui-radial-chart__tooltip",
+                        isRadialChart: tooltipDataSource === "segment" ? true : false,
+                        payload: tooltipDataSource === "segment" ? payload : data,
+                        valueFormatter,
+                        unit,
+                        ...computedTooltipProps
+                      }
+                    ),
+                    ...getTooltipProps()
+                  }
+                ) : null
+              ]
+            }
+          )
+        }
+      )
+    }
+  ) });
+});
+
+// src/index.ts
+var import_recharts9 = require("recharts");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AreaChart,
@@ -3598,6 +4000,7 @@ var import_recharts8 = require("recharts");
   DonutChart,
   LineChart,
   PieChart,
-  RadarChart
+  RadarChart,
+  RadialChart
 });
 //# sourceMappingURL=index.js.map