@yamada-ui/charts 1.0.2-next-20240404151942 → 1.0.3-dev-20240404224651

package/dist/index.js

@@ -29,7 +29,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/line-chart.tsx
-var import_core9 = require("@yamada-ui/core");
+var import_core10 = require("@yamada-ui/core");
 var import_utils11 = require("@yamada-ui/utils");
 var import_react8 = require("react");
 var import_recharts = require("recharts");
@@ -821,6 +821,7 @@ var useChartReferenceLine = ({
 };
 
 // src/use-chart-tooltip.ts
+var import_core8 = require("@yamada-ui/core");
 var import_utils9 = require("@yamada-ui/utils");
 var import_react6 = require("react");
 var useChartTooltip = ({
@@ -828,39 +829,11 @@ var useChartTooltip = ({
   tooltipAnimationDuration = 0,
   styles
 }) => {
+  const { theme } = (0, import_core8.useTheme)();
   const { cursor, ...rest } = _tooltipProps;
-  const resolvedCursor = (0, import_react6.useMemo)(
-    () => ({ ...styles.cursor, ...cursor }),
-    [cursor, styles]
-  );
-  const tooltipVars = (0, import_react6.useMemo)(
-    () => [
-      {
-        __prefix: "ui",
-        name: "cursor-fill",
-        token: "colors",
-        value: resolvedCursor.fill
-      },
-      {
-        __prefix: "ui",
-        name: "cursor-stroke",
-        token: "colors",
-        value: resolvedCursor.stroke
-      },
-      {
-        __prefix: "ui",
-        name: "cursor-stroke-width",
-        token: "colors",
-        value: resolvedCursor.strokeWidth
-      },
-      {
-        __prefix: "ui",
-        name: "cursor-stroke-dasharray",
-        token: "colors",
-        value: resolvedCursor.strokeDasharray
-      }
-    ],
-    [resolvedCursor]
+  const cursorClassName = (0, import_react6.useMemo)(
+    () => getClassName({ ...styles.cursor, ...cursor })(theme),
+    [cursor, styles.cursor, theme]
   );
   const [tooltipProps, tooltipUIProps] = (0, import_utils9.splitObject)(
     rest,
@@ -872,21 +845,18 @@ var useChartTooltip = ({
       animationDuration: tooltipAnimationDuration,
       isAnimationActive: (tooltipAnimationDuration || 0) > 0,
       cursor: {
-        fill: "var(--ui-cursor-fill)",
-        stroke: "var(--ui-cursor-stroke)",
-        strokeWidth: "var(--ui-cursor-stroke-width)",
-        strokeDasharray: "var(--ui-cursor-stroke-dasharray)"
+        className: cursorClassName
       },
       ...props,
       ...tooltipProps
     }),
-    [tooltipAnimationDuration, tooltipProps]
+    [cursorClassName, tooltipAnimationDuration, tooltipProps]
   );
-  return { tooltipProps: tooltipUIProps, getTooltipProps, tooltipVars };
+  return { tooltipProps: tooltipUIProps, getTooltipProps };
 };
 
 // src/use-line-chart.ts
-var import_core8 = require("@yamada-ui/core");
+var import_core9 = require("@yamada-ui/core");
 var import_utils10 = require("@yamada-ui/utils");
 var import_react7 = require("react");
 var useLineChart = ({
@@ -905,7 +875,7 @@ var useLineChart = ({
   ...rest
 }) => {
   var _a;
-  const { theme } = (0, import_core8.useTheme)();
+  const { theme } = (0, import_core9.useTheme)();
   const [highlightedArea, setHighlightedArea] = (0, import_react7.useState)(null);
   const shouldHighlight = highlightedArea !== null;
   const {
@@ -1124,8 +1094,8 @@ var useLineChart = ({
 
 // src/line-chart.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var LineChart = (0, import_core9.forwardRef)((props, ref) => {
-  const [styles, mergedProps] = (0, import_core9.useMultiComponentStyle)("LineChart", props);
+var LineChart = (0, import_core10.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core10.useMultiComponentStyle)("LineChart", props);
   const {
     className,
     containerProps,
@@ -1160,7 +1130,7 @@ var LineChart = (0, import_core9.forwardRef)((props, ref) => {
     fillOpacity,
     syncId,
     ...rest
-  } = (0, import_core9.omitThemeProps)(mergedProps);
+  } = (0, import_core10.omitThemeProps)(mergedProps);
   const { getLineProps, getLineChartProps, lineVars, setHighlightedArea } = useLineChart({
     layoutType,
     series,
@@ -1202,11 +1172,7 @@ var LineChart = (0, import_core9.forwardRef)((props, ref) => {
     strokeDasharray,
     styles
   });
-  const {
-    tooltipProps: computedTooltipProps,
-    getTooltipProps,
-    tooltipVars
-  } = useChartTooltip({
+  const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
     tooltipProps,
     tooltipAnimationDuration,
     styles
@@ -1238,11 +1204,11 @@ var LineChart = (0, import_core9.forwardRef)((props, ref) => {
     [getReferenceLineProps, referenceLineProps]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_core9.ui.div,
+    import_core10.ui.div,
     {
       ref,
       className: (0, import_utils11.cx)("ui-line-chart", className),
-      var: [...lineVars, ...tooltipVars],
+      var: lineVars,
       __css: { maxW: "full", ...styles.container },
       ...rest,
       children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -1306,13 +1272,13 @@ var LineChart = (0, import_core9.forwardRef)((props, ref) => {
 });
 
 // src/bar-chart.tsx
-var import_core11 = require("@yamada-ui/core");
+var import_core12 = require("@yamada-ui/core");
 var import_utils13 = require("@yamada-ui/utils");
 var import_react10 = require("react");
 var import_recharts2 = require("recharts");
 
 // src/use-bar-chart.ts
-var import_core10 = require("@yamada-ui/core");
+var import_core11 = require("@yamada-ui/core");
 var import_utils12 = require("@yamada-ui/utils");
 var import_react9 = require("react");
 var useBarChart = ({
@@ -1328,7 +1294,7 @@ var useBarChart = ({
 }) => {
   var _a;
   const uuid = (0, import_react9.useId)();
-  const { theme } = (0, import_core10.useTheme)();
+  const { theme } = (0, import_core11.useTheme)();
   const [highlightedArea, setHighlightedArea] = (0, import_react9.useState)(null);
   const stacked = type === "stacked" || type === "percent";
   const shouldHighlight = highlightedArea !== null;
@@ -1503,8 +1469,8 @@ var useBarChart = ({
 
 // src/bar-chart.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var BarChart = (0, import_core11.forwardRef)((props, ref) => {
-  const [styles, mergedProps] = (0, import_core11.useMultiComponentStyle)("BarChart", props);
+var BarChart = (0, import_core12.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core12.useMultiComponentStyle)("BarChart", props);
   const {
     className,
     series,
@@ -1534,7 +1500,7 @@ var BarChart = (0, import_core11.forwardRef)((props, ref) => {
     chartProps,
     syncId,
     ...rest
-  } = (0, import_core11.omitThemeProps)(mergedProps);
+  } = (0, import_core12.omitThemeProps)(mergedProps);
   const { getBarChartProps, getBarProps, barVars, setHighlightedArea } = useBarChart({
     data,
     series,
@@ -1572,11 +1538,7 @@ var BarChart = (0, import_core11.forwardRef)((props, ref) => {
     strokeDasharray,
     styles
   });
-  const {
-    tooltipProps: computedTooltipProps,
-    getTooltipProps,
-    tooltipVars
-  } = useChartTooltip({
+  const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
     tooltipProps,
     tooltipAnimationDuration,
     styles
@@ -1610,11 +1572,11 @@ var BarChart = (0, import_core11.forwardRef)((props, ref) => {
     [getReferenceLineProps, referenceLineProps]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_core11.ui.div,
+    import_core12.ui.div,
     {
       ref,
       className: (0, import_utils13.cx)("ui-bar-chart", className),
-      var: [...barVars, ...tooltipVars],
+      var: barVars,
       __css: { maxW: "full", ...styles.container },
       ...rest,
       children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -1678,7 +1640,7 @@ var BarChart = (0, import_core11.forwardRef)((props, ref) => {
 });
 
 // src/area-chart.tsx
-var import_core13 = require("@yamada-ui/core");
+var import_core14 = require("@yamada-ui/core");
 var import_utils15 = require("@yamada-ui/utils");
 var import_react12 = require("react");
 var import_recharts3 = require("recharts");
@@ -1725,7 +1687,7 @@ var AreaSplit = ({ offset, id, fillOpacity }) => {
 };
 
 // src/use-area-chart.ts
-var import_core12 = require("@yamada-ui/core");
+var import_core13 = require("@yamada-ui/core");
 var import_utils14 = require("@yamada-ui/utils");
 var import_react11 = require("react");
 var useAreaChart = ({
@@ -1749,7 +1711,7 @@ var useAreaChart = ({
 }) => {
   var _a;
   const uuid = (0, import_react11.useId)();
-  const { theme } = (0, import_core12.useTheme)();
+  const { theme } = (0, import_core13.useTheme)();
   const [highlightedArea, setHighlightedArea] = (0, import_react11.useState)(null);
   const splitId = `${uuid}-split`;
   const stacked = type === "stacked" || type === "percent";
@@ -2038,8 +2000,8 @@ var useAreaChart = ({
 
 // src/area-chart.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var AreaChart = (0, import_core13.forwardRef)((props, ref) => {
-  const [styles, mergedProps] = (0, import_core13.useMultiComponentStyle)("AreaChart", props);
+var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core14.useMultiComponentStyle)("AreaChart", props);
   const {
     className,
     series,
@@ -2077,7 +2039,7 @@ var AreaChart = (0, import_core13.forwardRef)((props, ref) => {
     splitOffset,
     syncId,
     ...rest
-  } = (0, import_core13.omitThemeProps)(mergedProps);
+  } = (0, import_core14.omitThemeProps)(mergedProps);
   const {
     getAreaChartProps,
     getAreaSplitProps,
@@ -2130,11 +2092,7 @@ var AreaChart = (0, import_core13.forwardRef)((props, ref) => {
     strokeDasharray,
     styles
   });
-  const {
-    tooltipProps: computedTooltipProps,
-    getTooltipProps,
-    tooltipVars
-  } = useChartTooltip({
+  const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
     tooltipProps,
     tooltipAnimationDuration,
     styles
@@ -2169,11 +2127,11 @@ var AreaChart = (0, import_core13.forwardRef)((props, ref) => {
     [getReferenceLineProps, referenceLineProps]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_core13.ui.div,
+    import_core14.ui.div,
     {
       ref,
       className: (0, import_utils15.cx)("ui-area-chart", className),
-      var: [...areaVars, ...tooltipVars],
+      var: areaVars,
       __css: { maxW: "full", ...styles.container },
       ...rest,
       children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -2238,13 +2196,13 @@ var AreaChart = (0, import_core13.forwardRef)((props, ref) => {
 });
 
 // src/radar-chart.tsx
-var import_core15 = require("@yamada-ui/core");
+var import_core16 = require("@yamada-ui/core");
 var import_utils17 = require("@yamada-ui/utils");
 var import_react14 = require("react");
 var import_recharts4 = require("recharts");
 
 // src/use-radar-chart.ts
-var import_core14 = require("@yamada-ui/core");
+var import_core15 = require("@yamada-ui/core");
 var import_utils16 = require("@yamada-ui/utils");
 var import_react13 = require("react");
 var useRadarChart = ({
@@ -2256,11 +2214,12 @@ var useRadarChart = ({
   strokeWidth = 2,
   fillOpacity = 0.4,
   valueFormatter,
+  strokeDasharray,
   styles,
   ...rest
 }) => {
   var _a;
-  const { theme } = (0, import_core14.useTheme)();
+  const { theme } = (0, import_core15.useTheme)();
   const [highlightedArea, setHighlightedArea] = (0, import_react13.useState)(null);
   const shouldHighlight = highlightedArea !== null;
   const {
@@ -2286,58 +2245,16 @@ var useRadarChart = ({
     ],
     [fillOpacity, radarColors]
   );
-  const [polarAngleAxisProps, polarAngleAxisStyles] = (0, import_react13.useMemo)(
-    () => {
-      var _a2;
-      return (0, import_utils16.splitObject)(
-        (_a2 = rest.polarAngleAxisProps) != null ? _a2 : {},
-        polarAngleAxisProperties
-      );
-    },
-    [rest.polarAngleAxisProps]
-  );
-  const [polarRadiusAxisProps, polarRadiusAxisStyles] = (0, import_react13.useMemo)(
+  const [chartProps, radarChartClassName] = (0, import_react13.useMemo)(
     () => {
       var _a2;
-      return (0, import_utils16.splitObject)(
-        (_a2 = rest.polarRadiusAxisProps) != null ? _a2 : {},
-        polarRadiusAxisProperties
-      );
+      return getComponentProps(
+        [(_a2 = rest.chartProps) != null ? _a2 : {}, radarChartProperties],
+        styles.chart
+      )(theme);
     },
-    [rest.polarRadiusAxisProps]
+    [rest.chartProps, styles.chart, theme]
   );
-  const [chartProps, radarChartClassName] = (0, import_react13.useMemo)(() => {
-    const resolvedRadarChartProps = {
-      "& .recharts-polar-grid-concentric-polygon": { ...styles.polarGrid },
-      "& .recharts-polar-grid-concentric-circle": { ...styles.polarGrid },
-      "& .recharts-polar-angle-axis": {
-        ...styles.polarAngleAxis,
-        ...polarAngleAxisStyles
-      },
-      "& .recharts-polar-angle-axis-tick": { ...styles.polarAngleAxisTick },
-      "& .recharts-polar-radius-axis": {
-        ...styles.polarRadiusAxis,
-        ...polarRadiusAxisStyles
-      },
-      "& .recharts-polar-radius-axis-tick": { ...styles.polarRadiusAxisTick },
-      ...rest.chartProps
-    };
-    return getComponentProps(
-      [resolvedRadarChartProps, radarChartProperties],
-      styles.chart
-    )(theme);
-  }, [
-    polarAngleAxisStyles,
-    polarRadiusAxisStyles,
-    rest.chartProps,
-    styles.chart,
-    styles.polarAngleAxis,
-    styles.polarAngleAxisTick,
-    styles.polarGrid,
-    styles.polarRadiusAxis,
-    styles.polarRadiusAxisTick,
-    theme
-  ]);
   const [polarGridProps, polarGridClassName] = (0, import_react13.useMemo)(
     () => {
       var _a2;
@@ -2348,6 +2265,40 @@ var useRadarChart = ({
     },
     [rest.polarGridProps, styles.polarGrid, theme]
   );
+  const [polarAngleAxisProps, polarAngleAxisClassName] = (0, import_react13.useMemo)(
+    () => {
+      var _a2;
+      return getComponentProps(
+        [(_a2 = rest.polarAngleAxisProps) != null ? _a2 : {}, polarAngleAxisProperties],
+        styles.polarAngleAxis
+      )(theme);
+    },
+    [rest.polarAngleAxisProps, styles.polarAngleAxis, theme]
+  );
+  const polarAngleAxisTickClassName = (0, import_react13.useMemo)(
+    () => getClassName({
+      ...styles.polarAngleAxisTick,
+      ...rest.polarAngleAxisTickProps
+    })(theme),
+    [rest.polarAngleAxisTickProps, styles.polarAngleAxisTick, theme]
+  );
+  const [polarRadiusAxisProps, polarRadiusAxisClassName] = (0, import_react13.useMemo)(
+    () => {
+      var _a2;
+      return getComponentProps(
+        [(_a2 = rest.polarRadiusAxisProps) != null ? _a2 : {}, polarRadiusAxisProperties],
+        styles.polarRadiusAxis
+      )(theme);
+    },
+    [rest.polarRadiusAxisProps, styles.polarRadiusAxis, theme]
+  );
+  const polarRadiusAxisTickClassName = (0, import_react13.useMemo)(
+    () => getClassName({
+      ...styles.polarRadiusAxisTick,
+      ...rest.polarRadiusAxisTickProps
+    })(theme),
+    [rest.polarRadiusAxisTickProps, styles.polarRadiusAxisTick, theme]
+  );
   const [radarProps, radarClassName] = (0, import_react13.useMemo)(() => {
     const resolvedRadarProps = {
       fillOpacity: "var(--ui-fill-opacity)",
@@ -2445,7 +2396,6 @@ var useRadarChart = ({
           dimmed ? dimDotClassName : void 0
         )(theme);
         resolvedDot = {
-          // BUG: className is not applied.
           className: (0, import_utils16.cx)("ui-radar-chart__dot", className),
           fill: color,
           r: 4,
@@ -2514,20 +2464,24 @@ var useRadarChart = ({
   const getPolarGridProps = (0, import_react13.useCallback)(
     ({ className, ...props } = {}, ref = null) => ({
       ref,
-      // BUG: `.recharts-polar-grid-concentric-xxx` is not applied className.
       className: (0, import_utils16.cx)(className, polarGridClassName),
+      strokeDasharray,
       ...props,
       ...polarGridProps
     }),
-    [polarGridClassName, polarGridProps]
+    [polarGridClassName, polarGridProps, strokeDasharray]
   );
   const getPolarAngleAxisProps = (0, import_react13.useCallback)(
     ({ className, ...props } = {}, ref = null) => ({
       ref,
-      // BUG: className is not applied.
-      // className: cx(className, polarAngleAxisClassName),
-      className,
+      className: (0, import_utils16.cx)(className, polarAngleAxisClassName),
       dataKey,
+      tick: {
+        className: (0, import_utils16.cx)(
+          "ui-radar-chart__polar-angle-axis-tick",
+          polarAngleAxisTickClassName
+        )
+      },
       tickFormatter: valueFormatter,
       tickSize: 16,
       ...props,
@@ -2535,24 +2489,30 @@ var useRadarChart = ({
     }),
     [
       dataKey,
-      // polarAngleAxisClassName,
+      polarAngleAxisClassName,
       polarAngleAxisProps,
+      polarAngleAxisTickClassName,
       valueFormatter
     ]
   );
   const getPolarRadiusAxisProps = (0, import_react13.useCallback)(
     ({ className, ...props } = {}, ref = null) => ({
       ref,
-      // BUG: className is not applied.
-      // className: cx(className, polarRadiusAxisClassName),
-      className,
+      className: (0, import_utils16.cx)(className, polarRadiusAxisClassName),
+      tick: {
+        className: (0, import_utils16.cx)(
+          "ui-radar-chart__polar-radius-axis-tick",
+          polarRadiusAxisTickClassName
+        )
+      },
       tickFormatter: valueFormatter,
       ...props,
       ...polarRadiusAxisProps
     }),
     [
-      // polarRadiusAxisClassName,
+      polarRadiusAxisClassName,
       polarRadiusAxisProps,
+      polarRadiusAxisTickClassName,
       valueFormatter
     ]
   );
@@ -2569,8 +2529,8 @@ var useRadarChart = ({
 
 // src/radar-chart.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var RadarChart = (0, import_core15.forwardRef)((props, ref) => {
-  const [styles, mergedProps] = (0, import_core15.useMultiComponentStyle)("RadarChart", props);
+var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core16.useMultiComponentStyle)("RadarChart", props);
   const {
     className,
     data,
@@ -2580,13 +2540,16 @@ var RadarChart = (0, import_core15.forwardRef)((props, ref) => {
     chartProps,
     polarGridProps,
     polarAngleAxisProps,
+    polarAngleAxisTickProps,
     polarRadiusAxisProps,
+    polarRadiusAxisTickProps,
     containerProps,
     tooltipProps,
     legendProps,
     tooltipAnimationDuration,
     unit,
     valueFormatter,
+    strokeDasharray,
     withDots,
     withActiveDots,
     strokeWidth,
@@ -2597,7 +2560,7 @@ var RadarChart = (0, import_core15.forwardRef)((props, ref) => {
     withPolarAngleAxis = true,
     withPolarRadiusAxis = false,
     ...rest
-  } = (0, import_core15.omitThemeProps)(mergedProps);
+  } = (0, import_core16.omitThemeProps)(mergedProps);
   const {
     getRadarProps,
     getRadarChartProps,
@@ -2614,20 +2577,19 @@ var RadarChart = (0, import_core15.forwardRef)((props, ref) => {
     chartProps,
     polarGridProps,
     polarAngleAxisProps,
+    polarAngleAxisTickProps,
     polarRadiusAxisProps,
+    polarRadiusAxisTickProps,
     withDots,
     withActiveDots,
     strokeWidth,
     fillOpacity,
     valueFormatter,
+    strokeDasharray,
     styles
   });
   const { getContainerProps } = useChart({ containerProps });
-  const {
-    tooltipProps: computedTooltipProps,
-    getTooltipProps,
-    tooltipVars
-  } = useChartTooltip({
+  const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
     tooltipProps,
     tooltipAnimationDuration,
     styles
@@ -2641,16 +2603,16 @@ var RadarChart = (0, import_core15.forwardRef)((props, ref) => {
       {
         ...getRadarProps({ index, className: "ui-radar-chart__radar" })
       },
-      `radar=${dataKey2}`
+      `radar-${dataKey2}`
     )),
     [getRadarProps, series]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_core15.ui.div,
+    import_core16.ui.div,
     {
       ref,
       className: (0, import_utils17.cx)("ui-radar-chart", className),
-      var: [...radarVars, ...tooltipVars],
+      var: radarVars,
       __css: { maxW: "full", ...styles.container },
       ...rest,
       children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(