@yamada-ui/charts 2.0.0-next-20240820160301 → 2.0.0-next-20240908154823

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(
@@ -1069,7 +1129,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 = {
@@ -1341,8 +1401,7 @@ var LineChart = (0, import_core10.forwardRef)((props, ref) => {
     {
       ref,
       className: (0, import_utils11.cx)("ui-line-chart", className),
-      var: lineVars,
-      __css: { ...styles.container },
+      __css: { maxW: "full", vars: lineVars, ...styles.container },
       ...rest,
       children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         import_recharts.ResponsiveContainer,
@@ -1459,7 +1518,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"
@@ -1468,7 +1526,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"
@@ -1479,7 +1536,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)(() => {
@@ -1491,7 +1548,8 @@ 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
     };
     return getComponentProps(
@@ -1530,7 +1588,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 = {
@@ -1785,8 +1843,7 @@ var BarChart = (0, import_core12.forwardRef)((props, ref) => {
     {
       ref,
       className: (0, import_utils13.cx)("ui-bar-chart", className),
-      var: barVars,
-      __css: { ...styles.container },
+      __css: { maxW: "full", vars: barVars, ...styles.container },
       ...rest,
       children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         import_recharts3.ResponsiveContainer,
@@ -1864,7 +1921,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");
@@ -1888,14 +1945,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
       }
     ),
@@ -1903,7 +1962,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
       }
     )
@@ -1911,7 +1970,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 = ({
@@ -1937,7 +1996,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";
@@ -1952,7 +2011,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"
@@ -1961,7 +2019,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"
@@ -1970,7 +2027,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"
@@ -1982,9 +2038,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;
@@ -2052,7 +2109,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 = {
@@ -2168,10 +2225,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) => {
@@ -2218,10 +2275,10 @@ var useAreaChart = ({
   const getAreaGradientProps = (0, import_react11.useCallback)(
     (props = {}) => ({
       withGradient,
-      fillOpacity: "var(--ui-fill-opacity)",
+      fillOpacity: fillOpacityVar,
       ...props
     }),
-    [withGradient]
+    [withGradient, fillOpacityVar]
   );
   return {
     getAreaChartProps,
@@ -2235,8 +2292,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,
@@ -2281,7 +2338,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,
@@ -2381,12 +2438,11 @@ 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),
-      var: areaVars,
-      __css: { ...styles.container },
+      __css: { maxW: "full", vars: areaVars, ...styles.container },
       ...rest,
       children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         import_recharts4.ResponsiveContainer,
@@ -2465,15 +2521,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,
@@ -2484,13 +2573,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 = {},
@@ -2499,23 +2587,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(
@@ -2525,17 +2612,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(
@@ -2545,14 +2622,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(
@@ -2562,16 +2639,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(
@@ -2579,32 +2656,32 @@ var useRadarChart = ({
       styles.radar
     )(theme);
   }, [computedRadarProps, styles.radar, theme]);
-  const [dimRadarProps, dimRadarClassName] = (0, import_react13.useMemo)(
+  const [dimRadarProps, dimRadarClassName] = (0, import_react14.useMemo)(
     () => getComponentProps(
       [dimRadar, radarProperties],
       styles.dimRadar
     )(theme),
     [dimRadar, styles.dimRadar, theme]
   );
-  const [dotProps, dotClassName] = (0, import_react13.useMemo)(
+  const [dotProps, dotClassName] = (0, import_react14.useMemo)(
     () => getComponentProps([dot, 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)(
     () => getComponentProps(
       [dimDot, dotProperties],
       styles.dimDot
     )(theme),
     [dimDot, styles.dimDot, theme]
   );
-  const radarPropList = (0, import_react13.useMemo)(
+  const radarPropList = (0, import_react14.useMemo)(
     () => series.map((props, index) => {
       const {
         dataKey: dataKey2,
@@ -2614,7 +2691,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 = {
@@ -2638,7 +2715,7 @@ var useRadarChart = ({
           activeDotClassName
         )(theme);
         resolvedActiveDot = {
-          className: (0, import_utils16.cx)(
+          className: (0, import_utils17.cx)(
             "ui-radar-chart__dot",
             "ui-radar-chart__dot--active",
             className
@@ -2665,7 +2742,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
@@ -2700,22 +2777,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,
@@ -2730,23 +2807,13 @@ var useRadarChart = ({
     },
     [radarPropList, strokeWidth]
   );
-  const getPolarGridProps = (0, import_react13.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)(
+  const getPolarAngleAxisProps = (0, import_react14.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
         )
@@ -2764,12 +2831,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
         )
@@ -2789,7 +2856,6 @@ var useRadarChart = ({
     radarVars,
     getRadarChartProps,
     getRadarProps,
-    getPolarGridProps,
     getPolarAngleAxisProps,
     getPolarRadiusAxisProps,
     setHighlightedArea
@@ -2798,8 +2864,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,
@@ -2831,11 +2897,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,
@@ -2846,7 +2911,6 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
     dataKey,
     radarProps,
     chartProps,
-    polarGridProps,
     polarAngleAxisProps,
     polarAngleAxisTickProps,
     polarRadiusAxisProps,
@@ -2857,7 +2921,6 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
     fillOpacity,
     polarAngleAxisTickFormatter,
     polarRadiusAxisTickFormatter,
-    strokeDasharray,
     styles
   });
   const { getContainerProps } = useChart({ containerProps });
@@ -2869,7 +2932,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,
       {
@@ -2880,12 +2948,11 @@ 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),
-      var: radarVars,
-      __css: { ...styles.container },
+      className: (0, import_utils18.cx)("ui-radar-chart", className),
+      __css: { maxW: "full", vars: radarVars, ...styles.container },
       ...rest,
       children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         import_recharts5.ResponsiveContainer,
@@ -2963,19 +3030,44 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
 });
 
 // src/donut-chart.tsx
+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_core19 = require("@yamada-ui/core");
-var import_utils20 = require("@yamada-ui/utils");
+var import_utils19 = require("@yamada-ui/utils");
 var import_react16 = require("react");
-var import_recharts6 = require("recharts");
+var useChartLabel = ({ styles, ...rest }) => {
+  var _a;
+  const { theme } = (0, import_core19.useTheme)();
+  const [labelProps, labelClassName] = getComponentProps(
+    [(_a = rest.labelProps) != null ? _a : {}, labelProperties],
+    styles.label
+  )(theme);
+  const getLabelProps = (0, import_react16.useCallback)(
+    ({ className, ...props } = {}, ref = null) => {
+      return {
+        ref,
+        className: (0, import_utils19.cx)(className, labelClassName),
+        ...props,
+        ...labelProps
+      };
+    },
+    [labelClassName, labelProps]
+  );
+  return { getLabelProps };
+};
 
 // src/use-pie-chart.ts
-var import_core18 = require("@yamada-ui/core");
-var import_utils19 = require("@yamada-ui/utils");
-var import_react15 = 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_core17 = require("@yamada-ui/core");
-var import_utils18 = 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;
@@ -3002,16 +3094,16 @@ var pieChartLabel = ({
   const displayLabel = () => {
     if (isPercent) {
       return parseFloat((percent * 100).toFixed(0)) > 0 && `${(percent * 100).toFixed(0)}%`;
-    } else if (!(0, import_utils18.isUndefined)(labelFormatter)) {
+    } else if (!(0, import_utils20.isUndefined)(labelFormatter)) {
       return labelFormatter(value);
     } else {
       return value;
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_core17.ui.text,
+    import_core20.ui.text,
     {
-      className: (0, import_utils18.cx)(cellClassName, "ui-chart__label"),
+      className: (0, import_utils20.cx)(cellClassName, "ui-chart__label"),
       x,
       y,
       textAnchor,
@@ -3040,9 +3132,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_core17.ui.path,
+    import_core20.ui.path,
     {
-      className: (0, import_utils18.cx)(cellClassName, "ui-chart__label-line"),
+      className: (0, import_utils20.cx)(cellClassName, "ui-chart__label-line"),
       d,
       __css: styles,
       ...labelLineProps
@@ -3069,8 +3161,8 @@ var usePieChart = ({
   ...rest
 }) => {
   var _a, _b;
-  const { theme } = (0, import_core18.useTheme)();
-  const [highlightedArea, setHighlightedArea] = (0, import_react15.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 {
@@ -3080,23 +3172,22 @@ var usePieChart = ({
     labelLine: labelLineProps,
     ...computedPieProps
   } = (_b = rest.pieProps) != null ? _b : {};
-  const cellColors = (0, import_react15.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_react15.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_react15.useMemo)(
+  const [chartProps, chartClassName] = (0, import_react17.useMemo)(
     () => {
       var _a2;
       return getComponentProps(
@@ -3106,40 +3197,40 @@ var usePieChart = ({
     },
     [rest.chartProps, styles.chart, theme]
   );
-  const [pieProps, pieClassName] = (0, import_react15.useMemo)(
+  const [pieProps, pieClassName] = (0, import_react17.useMemo)(
     () => getComponentProps(
       [computedPieProps, pieProperties],
       styles.pie
     )(theme),
     [computedPieProps, styles.pie, theme]
   );
-  const cellClassName = (0, import_react15.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_react15.useMemo)(() => {
+  const dimCellClassName = (0, import_react17.useMemo)(() => {
     const resolvedDimCell = { ...styles.dimCell, ...dimCell };
     return getClassName(resolvedDimCell)(theme);
   }, [dimCell, styles.dimCell, theme]);
-  const activeShapeProps = (0, import_react15.useMemo)(
+  const activeShapeProps = (0, import_react17.useMemo)(
     () => getComponentProps(
       [activeShape, pieProperties],
       styles.activeShape
     )(theme, true),
     [activeShape, styles.activeShape, theme]
   );
-  const inactiveShapeProps = (0, import_react15.useMemo)(
+  const inactiveShapeProps = (0, import_react17.useMemo)(
     () => getComponentProps(
       [inactiveShape, pieProperties],
       styles.inactiveShape
     )(theme, true),
     [inactiveShape, styles.inactiveShape, theme]
   );
-  const label = (0, import_react15.useCallback)(
+  const label = (0, import_react17.useCallback)(
     (props) => pieChartLabel({
       labelOffset,
       isPercent,
@@ -3150,7 +3241,7 @@ var usePieChart = ({
     }),
     [isPercent, labelOffset, labelProps, styles.label, labelFormatter]
   );
-  const labelLine = (0, import_react15.useCallback)(
+  const labelLine = (0, import_react17.useCallback)(
     (props) => {
       return pieChartLabelLine({
         labelOffset,
@@ -3161,10 +3252,10 @@ var usePieChart = ({
     },
     [labelLineProps, labelOffset, styles.labelLine]
   );
-  const cellPropList = (0, import_react15.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,
@@ -3191,19 +3282,19 @@ var usePieChart = ({
       theme
     ]
   );
-  const getPieChartProps = (0, import_react15.useCallback)(
+  const getPieChartProps = (0, import_react17.useCallback)(
     ({ className, ...props } = {}, ref = null) => ({
       ref,
-      className: (0, import_utils19.cx)(className, chartClassName),
+      className: (0, import_utils21.cx)(className, chartClassName),
       ...props,
       ...chartProps
     }),
     [chartProps, chartClassName]
   );
-  const getPieProps = (0, import_react15.useCallback)(
+  const getPieProps = (0, import_react17.useCallback)(
     ({ className, ...props }, ref = null) => ({
       ref,
-      className: (0, import_utils19.cx)(className, pieClassName),
+      className: (0, import_utils21.cx)(className, pieClassName),
       dataKey: "value",
       data,
       rootTabIndex: -1,
@@ -3237,12 +3328,12 @@ var usePieChart = ({
       pieProps
     ]
   );
-  const getCellProps = (0, import_react15.useCallback)(
+  const getCellProps = (0, import_react17.useCallback)(
     ({ index, className: classNameProp, ...props }, ref = null) => {
       const { className, color } = cellPropList[index];
       return {
         ref,
-        className: (0, import_utils19.cx)(classNameProp, className),
+        className: (0, import_utils21.cx)(classNameProp, className),
         fill: color,
         stroke: color,
         strokeWidth,
@@ -3262,8 +3353,8 @@ var usePieChart = ({
 
 // src/donut-chart.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
-  const [styles, mergedProps] = (0, import_core19.useMultiComponentStyle)("DonutChart", props);
+var DonutChart = (0, import_core22.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core22.useMultiComponentStyle)("DonutChart", props);
   const {
     className,
     data,
@@ -3290,8 +3381,9 @@ var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
     outerRadius,
     strokeWidth,
     legendProps,
+    labelProps,
     ...rest
-  } = (0, import_core19.omitThemeProps)(mergedProps);
+  } = (0, import_core22.omitThemeProps)(mergedProps);
   const {
     pieVars,
     getPieProps,
@@ -3325,7 +3417,8 @@ var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
   const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
     legendProps
   });
-  const cells = (0, import_react16.useMemo)(
+  const { getLabelProps } = useChartLabel({ labelProps, styles });
+  const cells = (0, import_react18.useMemo)(
     () => data.map(({ name }, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       import_recharts6.Cell,
       {
@@ -3336,12 +3429,11 @@ var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
     [data, getCellProps]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_core19.ui.div,
+    import_core22.ui.div,
     {
       ref,
-      className: (0, import_utils20.cx)("ui-donut-chart", className),
-      var: pieVars,
-      __css: { ...styles.container },
+      className: (0, import_utils22.cx)("ui-donut-chart", className),
+      __css: { maxW: "full", vars: pieVars, ...styles.container },
       ...rest,
       children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         import_recharts6.ResponsiveContainer,
@@ -3352,13 +3444,21 @@ var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
             {
               ...getPieChartProps({ className: "ui-donut-chart__chart" }),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                   import_recharts6.Pie,
                   {
                     ...getPieProps({
                       className: "ui-donut-chart__donut"
                     }),
-                    children: cells
+                    children: [
+                      cells,
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                        import_recharts6.Label,
+                        {
+                          ...getLabelProps({ className: "ui-donut-chart__label" })
+                        }
+                      )
+                    ]
                   }
                 ),
                 withLegend ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -3403,13 +3503,13 @@ var DonutChart = (0, import_core19.forwardRef)((props, ref) => {
 });
 
 // src/pie-chart.tsx
-var import_core20 = require("@yamada-ui/core");
-var import_utils21 = require("@yamada-ui/utils");
-var import_react17 = 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_core20.forwardRef)((props, ref) => {
-  const [styles, mergedProps] = (0, import_core20.useMultiComponentStyle)("PieChart", props);
+var PieChart = (0, import_core23.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core23.useMultiComponentStyle)("PieChart", props);
   const {
     className,
     data,
@@ -3437,7 +3537,7 @@ var PieChart = (0, import_core20.forwardRef)((props, ref) => {
     strokeWidth,
     legendProps,
     ...rest
-  } = (0, import_core20.omitThemeProps)(mergedProps);
+  } = (0, import_core23.omitThemeProps)(mergedProps);
   const {
     pieVars,
     getPieProps,
@@ -3471,7 +3571,7 @@ var PieChart = (0, import_core20.forwardRef)((props, ref) => {
   const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
     legendProps
   });
-  const cells = (0, import_react17.useMemo)(
+  const cells = (0, import_react19.useMemo)(
     () => data.map(({ name }, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       import_recharts7.Cell,
       {
@@ -3482,12 +3582,11 @@ var PieChart = (0, import_core20.forwardRef)((props, ref) => {
     [data, getCellProps]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_core20.ui.div,
+    import_core23.ui.div,
     {
       ref,
-      className: (0, import_utils21.cx)("ui-pie-chart", className),
-      var: pieVars,
-      __css: { ...styles.container },
+      className: (0, import_utils23.cx)("ui-pie-chart", className),
+      __css: { maxW: "full", vars: pieVars, ...styles.container },
       ...rest,
       children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         import_recharts7.ResponsiveContainer,
@@ -3548,8 +3647,340 @@ var PieChart = (0, import_core20.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 = 90,
+  endAngle = -180,
+  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),
+      __css: { maxW: "full", vars: radialVars, ...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,
@@ -3558,6 +3989,7 @@ var import_recharts8 = require("recharts");
   DonutChart,
   LineChart,
   PieChart,
-  RadarChart
+  RadarChart,
+  RadialChart
 });
 //# sourceMappingURL=index.js.map