@yamada-ui/charts 1.1.8-dev-20240619173525 → 2.0.0-next-20240619220221

package/dist/index.js

@@ -921,8 +921,8 @@ var useLineChart = ({
   const {
     dot = {},
     activeDot = {},
-    dimDot,
-    dimLine,
+    dimDot = {},
+    dimLine = {},
     ...computedLineProps
   } = (_a = rest.lineProps) != null ? _a : {};
   const lineColors = (0, import_react7.useMemo)(
@@ -972,19 +972,17 @@ var useLineChart = ({
       styles.line
     )(theme);
   }, [computedLineProps, styles.line, theme]);
-  const [dimLineProps, dimLineClassName] = (0, import_react7.useMemo)(() => {
-    const resolvedDimLine = { fillOpacity: 0, strokeOpacity: 0.3, ...dimLine };
-    return getComponentProps([resolvedDimLine, lineProperties])(
-      theme
-    );
-  }, [dimLine, theme]);
-  const [dotProps, dotClassName] = (0, import_react7.useMemo)(() => {
-    const resolvedDot = { fillOpacity: 1, strokeOpacity: 1, ...dot };
-    return getComponentProps(
-      [resolvedDot, dotProperties],
-      styles.dot
-    )(theme);
-  }, [dot, styles.dot, theme]);
+  const [dimLineProps, dimLineClassName] = (0, import_react7.useMemo)(
+    () => getComponentProps(
+      [dimLine, lineProperties],
+      styles.dimLine
+    )(theme),
+    [dimLine, styles.dimLine, theme]
+  );
+  const [dotProps, dotClassName] = (0, import_react7.useMemo)(
+    () => getComponentProps([dot, dotProperties], styles.dot)(theme),
+    [dot, styles.dot, theme]
+  );
   const [activeDotProps, activeDotClassName] = (0, import_react7.useMemo)(
     () => getComponentProps(
       [activeDot, dotProperties],
@@ -992,16 +990,13 @@ var useLineChart = ({
     )(theme),
     [activeDot, styles.activeDot, theme]
   );
-  const [dimDotProps, dimDotClassName] = (0, import_react7.useMemo)(() => {
-    const resolvedDimDot = {
-      fillOpacity: 0,
-      strokeOpacity: 0,
-      ...dimDot
-    };
-    return getComponentProps([resolvedDimDot, dotProperties])(
-      theme
-    );
-  }, [dimDot, theme]);
+  const [dimDotProps, dimDotClassName] = (0, import_react7.useMemo)(
+    () => getComponentProps(
+      [dimDot, dotProperties],
+      styles.dimDot
+    )(theme),
+    [dimDot, styles.dimDot, theme]
+  );
   const linePropList = (0, import_react7.useMemo)(
     () => series.map((props, index) => {
       const {
@@ -1249,7 +1244,7 @@ var LineChart = (0, import_core10.forwardRef)((props, ref) => {
       ref,
       className: (0, import_utils11.cx)("ui-line-chart", className),
       var: lineVars,
-      __css: { maxW: "full", ...styles.container },
+      __css: { ...styles.container },
       ...rest,
       children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         import_recharts.ResponsiveContainer,
@@ -1341,7 +1336,7 @@ var useBarChart = ({
   const {
     activeBar = {},
     background = {},
-    dimBar,
+    dimBar = {},
     ...computedBarProps
   } = (_a = rest.barProps) != null ? _a : {};
   const barColors = (0, import_react9.useMemo)(
@@ -1379,7 +1374,6 @@ var useBarChart = ({
   const [barProps, barClassName] = (0, import_react9.useMemo)(() => {
     const resolvedBarProps = {
       fillOpacity: "var(--ui-fill-opacity)",
-      strokeOpacity: 1,
       ...computedBarProps
     };
     return getComponentProps(
@@ -1387,12 +1381,13 @@ var useBarChart = ({
       styles.bar
     )(theme);
   }, [computedBarProps, styles.bar, theme]);
-  const [dimBarProps, dimBarClassName] = (0, import_react9.useMemo)(() => {
-    const resolvedDimBar = { fillOpacity: 0.3, strokeOpacity: 0, ...dimBar };
-    return getComponentProps([resolvedDimBar, barProperties])(
-      theme
-    );
-  }, [dimBar, theme]);
+  const [dimBarProps, dimBarClassName] = (0, import_react9.useMemo)(
+    () => getComponentProps(
+      [dimBar, barProperties],
+      styles.dimBar
+    )(theme),
+    [dimBar, styles.dimBar, theme]
+  );
   const [activeBarProps, activeBarClassName] = (0, import_react9.useMemo)(
     () => getComponentProps(
       [activeBar, barProperties],
@@ -1617,7 +1612,7 @@ var BarChart = (0, import_core12.forwardRef)((props, ref) => {
       ref,
       className: (0, import_utils13.cx)("ui-bar-chart", className),
       var: barVars,
-      __css: { maxW: "full", ...styles.container },
+      __css: { ...styles.container },
       ...rest,
       children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         import_recharts2.ResponsiveContainer,
@@ -1760,8 +1755,8 @@ var useAreaChart = ({
   const {
     dot = {},
     activeDot = {},
-    dimDot,
-    dimArea,
+    dimDot = {},
+    dimArea = {},
     ...computedAreaProps
   } = (_a = rest.areaProps) != null ? _a : {};
   const areaColors = (0, import_react11.useMemo)(
@@ -1811,8 +1806,6 @@ var useAreaChart = ({
   );
   const [areaProps, areaClassName] = (0, import_react11.useMemo)(() => {
     const resolvedAreaProps = {
-      fillOpacity: 1,
-      strokeOpacity: 1,
       ...computedAreaProps
     };
     return getComponentProps(
@@ -1820,23 +1813,17 @@ var useAreaChart = ({
       styles.area
     )(theme);
   }, [computedAreaProps, styles.area, theme]);
-  const [dimAreaProps, dimAreaClassName] = (0, import_react11.useMemo)(() => {
-    const resolvedDimArea = {
-      fillOpacity: 0,
-      strokeOpacity: 0.3,
-      ...dimArea
-    };
-    return getComponentProps([resolvedDimArea, areaProperties])(
-      theme
-    );
-  }, [dimArea, theme]);
-  const [dotProps, dotClassName] = (0, import_react11.useMemo)(() => {
-    const resolvedDot = { fillOpacity: 1, strokeWidth: 2, ...dot };
-    return getComponentProps(
-      [resolvedDot, dotProperties],
-      styles.dot
-    )(theme);
-  }, [dot, styles.dot, theme]);
+  const [dimAreaProps, dimAreaClassName] = (0, import_react11.useMemo)(
+    () => getComponentProps(
+      [dimArea, areaProperties],
+      styles.dimArea
+    )(theme),
+    [dimArea, styles.dimArea, theme]
+  );
+  const [dotProps, dotClassName] = (0, import_react11.useMemo)(
+    () => getComponentProps([dot, dotProperties], styles.dot)(theme),
+    [dot, styles.dot, theme]
+  );
   const [activeDotProps, activeDotClassName] = (0, import_react11.useMemo)(
     () => getComponentProps(
       [activeDot, dotProperties],
@@ -1844,12 +1831,13 @@ var useAreaChart = ({
     )(theme),
     [activeDot, styles.activeDot, theme]
   );
-  const [dimDotProps, dimDotClassName] = (0, import_react11.useMemo)(() => {
-    const resolvedDimDot = { fillOpacity: 0, strokeOpacity: 0, ...dimDot };
-    return getComponentProps([resolvedDimDot, dotProperties])(
-      theme
-    );
-  }, [dimDot, theme]);
+  const [dimDotProps, dimDotClassName] = (0, import_react11.useMemo)(
+    () => getComponentProps(
+      [dimDot, dotProperties],
+      styles.dimDot
+    )(theme),
+    [dimDot, styles.dimDot, theme]
+  );
   const defaultSplitOffset = (0, import_react11.useMemo)(() => {
     if (series.length === 1) {
       const dataKey = series[0].dataKey;
@@ -2170,7 +2158,7 @@ var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
       ref,
       className: (0, import_utils15.cx)("ui-area-chart", className),
       var: areaVars,
-      __css: { maxW: "full", ...styles.container },
+      __css: { ...styles.container },
       ...rest,
       children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         import_recharts3.ResponsiveContainer,
@@ -2263,8 +2251,8 @@ var useRadarChart = ({
   const {
     dot = {},
     activeDot = {},
-    dimDot,
-    dimRadar,
+    dimDot = {},
+    dimRadar = {},
     ...computedRadarProps
   } = (_a = rest.radarProps) != null ? _a : {};
   const radarColors = (0, import_react13.useMemo)(
@@ -2347,23 +2335,17 @@ var useRadarChart = ({
       styles.radar
     )(theme);
   }, [computedRadarProps, styles.radar, theme]);
-  const [dimRadarProps, dimRadarClassName] = (0, import_react13.useMemo)(() => {
-    const resolvedDimRadar = {
-      fillOpacity: 0.3,
-      strokeOpacity: 0.3,
-      ...dimRadar
-    };
-    return getComponentProps([resolvedDimRadar, radarProperties])(
-      theme
-    );
-  }, [dimRadar, theme]);
-  const [dotProps, dotClassName] = (0, import_react13.useMemo)(() => {
-    const resolvedDot = { fillOpacity: 1, strokeWidth: 2, ...dot };
-    return getComponentProps(
-      [resolvedDot, dotProperties],
-      styles.dot
-    )(theme);
-  }, [dot, styles.dot, theme]);
+  const [dimRadarProps, dimRadarClassName] = (0, import_react13.useMemo)(
+    () => getComponentProps(
+      [dimRadar, radarProperties],
+      styles.dimRadar
+    )(theme),
+    [dimRadar, styles.dimRadar, theme]
+  );
+  const [dotProps, dotClassName] = (0, import_react13.useMemo)(
+    () => getComponentProps([dot, dotProperties], styles.dot)(theme),
+    [dot, styles.dot, theme]
+  );
   const [activeDotProps, activeDotClassName] = (0, import_react13.useMemo)(
     () => getComponentProps(
       [activeDot, dotProperties],
@@ -2371,12 +2353,13 @@ var useRadarChart = ({
     )(theme),
     [activeDot, styles.activeDot, theme]
   );
-  const [dimDotProps, dimDotClassName] = (0, import_react13.useMemo)(() => {
-    const resolvedDimDot = { fillOpacity: 0, strokeOpacity: 0, ...dimDot };
-    return getComponentProps([resolvedDimDot, dotProperties])(
-      theme
-    );
-  }, [dimDot, theme]);
+  const [dimDotProps, dimDotClassName] = (0, import_react13.useMemo)(
+    () => getComponentProps(
+      [dimDot, dotProperties],
+      styles.dimDot
+    )(theme),
+    [dimDot, styles.dimDot, theme]
+  );
   const radarPropList = (0, import_react13.useMemo)(
     () => series.map((props, index) => {
       const {
@@ -2651,7 +2634,7 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
       ref,
       className: (0, import_utils17.cx)("ui-radar-chart", className),
       var: radarVars,
-      __css: { maxW: "full", ...styles.container },
+      __css: { ...styles.container },
       ...rest,
       children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         import_recharts4.ResponsiveContainer,
@@ -2806,12 +2789,12 @@ var usePieChart = ({
     return getClassName(resolvedCellProps)(theme);
   }, [computedCellProps, styles.cell, theme]);
   const dimCellClassName = (0, import_react15.useMemo)(() => {
-    const resolvedDimCell = { fillOpacity: 0.3, strokeOpacity: 0, ...dimCell };
+    const resolvedDimCell = { ...styles.dimCell, ...dimCell };
     return getClassName(resolvedDimCell)(theme);
-  }, [dimCell, theme]);
+  }, [dimCell, styles.dimCell, theme]);
   const activeShapeProps = (0, import_react15.useMemo)(
     () => getComponentProps(
-      [{ _focus: { outline: "none" }, ...activeShape }, pieProperties],
+      [activeShape, pieProperties],
       styles.activeShape
     )(theme, true),
     [activeShape, styles.activeShape, theme]
@@ -2824,7 +2807,7 @@ var usePieChart = ({
     [inactiveShape, styles.inactiveShape, theme]
   );
   const labelClassName = (0, import_react15.useMemo)(
-    () => getClassName({ fillOpacity: 1, ...styles.label, ...label })(theme),
+    () => getClassName({ ...styles.label, ...label })(theme),
     [label, styles.label, theme]
   );
   const labelLineClassName = (0, import_react15.useMemo)(
@@ -3010,7 +2993,7 @@ var DonutChart = (0, import_core18.forwardRef)((props, ref) => {
       ref,
       className: (0, import_utils19.cx)("ui-donut-chart", className),
       var: pieVars,
-      __css: { maxW: "full", ...styles.container },
+      __css: { ...styles.container },
       ...rest,
       children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         import_recharts5.ResponsiveContainer,
@@ -3152,7 +3135,7 @@ var PieChart = (0, import_core19.forwardRef)((props, ref) => {
       ref,
       className: (0, import_utils20.cx)("ui-pie-chart", className),
       var: pieVars,
-      __css: { maxW: "full", ...styles.container },
+      __css: { ...styles.container },
       ...rest,
       children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         import_recharts6.ResponsiveContainer,