@yamada-ui/charts 1.5.0-dev-20240825044554 → 1.5.0-dev-20240825090212

package/dist/index.js

@@ -892,7 +892,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 +989,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 +997,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 +1007,7 @@ var useLineChart = ({
     () => [
       ...lineColors,
       ...referenceLineColors,
-      { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
+      { name: "fill-opacity", value: fillOpacity }
     ],
     [fillOpacity, lineColors, referenceLineColors]
   );
@@ -1025,8 +1023,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 +1072,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 +1458,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 +1466,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 +1476,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 +1488,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 +1527,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 +1861,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 +1885,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 +1902,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 +1910,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 +1936,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 +1951,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 +1959,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 +1967,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 +1978,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 +2056,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 +2168,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 +2218,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 +2235,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 +2281,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 +2381,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,13 +2465,13 @@ var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
 });
 
 // src/radar-chart.tsx
-var import_core16 = require("@yamada-ui/core");
+var import_core17 = require("@yamada-ui/core");
 var import_utils17 = require("@yamada-ui/utils");
 var import_react14 = require("react");
 var import_recharts5 = require("recharts");
 
 // src/use-radar-chart.ts
-var import_core15 = require("@yamada-ui/core");
+var import_core16 = require("@yamada-ui/core");
 var import_utils16 = require("@yamada-ui/utils");
 var import_react13 = require("react");
 var useRadarChart = ({
@@ -2493,7 +2489,7 @@ var useRadarChart = ({
   ...rest
 }) => {
   var _a;
-  const { theme } = (0, import_core15.useTheme)();
+  const { theme } = (0, import_core16.useTheme)();
   const [highlightedArea, setHighlightedArea] = (0, import_react13.useState)(null);
   const shouldHighlight = highlightedArea !== null;
   const {
@@ -2505,7 +2501,6 @@ var useRadarChart = ({
   } = (_a = rest.radarProps) != null ? _a : {};
   const radarColors = (0, import_react13.useMemo)(
     () => series.map(({ color }, index) => ({
-      __prefix: "ui",
       name: `radar-${index}`,
       token: "colors",
       value: color != null ? color : "transparent"
@@ -2515,7 +2510,7 @@ var useRadarChart = ({
   const radarVars = (0, import_react13.useMemo)(
     () => [
       ...radarColors,
-      { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
+      { name: "fill-opacity", value: fillOpacity }
     ],
     [fillOpacity, radarColors]
   );
@@ -2575,7 +2570,7 @@ var useRadarChart = ({
   );
   const [radarProps, radarClassName] = (0, import_react13.useMemo)(() => {
     const resolvedRadarProps = {
-      fillOpacity: "var(--ui-fill-opacity)",
+      fillOpacity: "$fill-opacity",
       ...computedRadarProps
     };
     return getComponentProps(
@@ -2623,7 +2618,7 @@ var useRadarChart = ({
         dimRadar: dimRadar2 = {},
         ...computedProps
       } = props;
-      const color = `var(--ui-radar-${index})`;
+      const color = (0, import_core16.getVar)(`radar-${index}`)(theme);
       const dimmed = shouldHighlight && highlightedArea !== dataKey2;
       const computedDimRadar = { ...dimRadarProps, ...dimRadar2 };
       const resolvedProps = {
@@ -2803,8 +2798,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_core17.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core17.useMultiComponentStyle)("RadarChart", props);
   const {
     className,
     data,
@@ -2836,7 +2831,7 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
     withPolarAngleAxis = true,
     withPolarRadiusAxis = false,
     ...rest
-  } = (0, import_core16.omitThemeProps)(mergedProps);
+  } = (0, import_core17.omitThemeProps)(mergedProps);
   const {
     getRadarProps,
     getRadarChartProps,
@@ -2885,7 +2880,7 @@ 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_core17.ui.div,
     {
       ref,
       className: (0, import_utils17.cx)("ui-radar-chart", className),
@@ -2968,18 +2963,18 @@ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
 });
 
 // src/donut-chart.tsx
-var import_core20 = require("@yamada-ui/core");
+var import_core21 = require("@yamada-ui/core");
 var import_utils21 = require("@yamada-ui/utils");
 var import_react17 = require("react");
 var import_recharts6 = require("recharts");
 
 // src/use-chart-label.ts
-var import_core17 = require("@yamada-ui/core");
+var import_core18 = require("@yamada-ui/core");
 var import_utils18 = require("@yamada-ui/utils");
 var import_react15 = require("react");
 var useChartLabel = ({ styles, ...rest }) => {
   var _a;
-  const { theme } = (0, import_core17.useTheme)();
+  const { theme } = (0, import_core18.useTheme)();
   const [labelProps, labelClassName] = getComponentProps(
     [(_a = rest.labelProps) != null ? _a : {}, labelProperties],
     styles.label
@@ -2999,12 +2994,12 @@ var useChartLabel = ({ styles, ...rest }) => {
 };
 
 // src/use-pie-chart.ts
-var import_core19 = require("@yamada-ui/core");
+var import_core20 = require("@yamada-ui/core");
 var import_utils20 = require("@yamada-ui/utils");
 var import_react16 = require("react");
 
 // src/pie-chart-label.tsx
-var import_core18 = require("@yamada-ui/core");
+var import_core19 = require("@yamada-ui/core");
 var import_utils19 = require("@yamada-ui/utils");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var RADIAN = Math.PI / 180;
@@ -3039,7 +3034,7 @@ var pieChartLabel = ({
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_core18.ui.text,
+    import_core19.ui.text,
     {
       className: (0, import_utils19.cx)(cellClassName, "ui-chart__label"),
       x,
@@ -3070,7 +3065,7 @@ 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_core19.ui.path,
     {
       className: (0, import_utils19.cx)(cellClassName, "ui-chart__label-line"),
       d,
@@ -3099,7 +3094,7 @@ var usePieChart = ({
   ...rest
 }) => {
   var _a, _b;
-  const { theme } = (0, import_core19.useTheme)();
+  const { theme } = (0, import_core20.useTheme)();
   const [highlightedArea, setHighlightedArea] = (0, import_react16.useState)(null);
   const shouldHighlight = highlightedArea !== null;
   const { dimCell, ...computedCellProps } = (_a = rest.cellProps) != null ? _a : {};
@@ -3112,7 +3107,6 @@ var usePieChart = ({
   } = (_b = rest.pieProps) != null ? _b : {};
   const cellColors = (0, import_react16.useMemo)(
     () => data.map(({ color }, index) => ({
-      __prefix: "ui",
       name: `cell-${index}`,
       token: "colors",
       value: color != null ? color : "transparent"
@@ -3122,7 +3116,7 @@ var usePieChart = ({
   const pieVars = (0, import_react16.useMemo)(
     () => [
       ...cellColors,
-      { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
+      { name: "fill-opacity", value: fillOpacity }
     ],
     [fillOpacity, cellColors]
   );
@@ -3145,7 +3139,7 @@ var usePieChart = ({
   );
   const cellClassName = (0, import_react16.useMemo)(() => {
     const resolvedCellProps = {
-      fillOpacity: "var(--ui-fill-opacity)",
+      fillOpacity: "$fill-opacity",
       ...styles.cell,
       ...computedCellProps
     };
@@ -3194,7 +3188,7 @@ var usePieChart = ({
   const cellPropList = (0, import_react16.useMemo)(
     () => data.map((props, index) => {
       const { name, dimCell: dimCell2 = {}, ...computedProps } = props;
-      const color = `var(--ui-cell-${index})`;
+      const color = (0, import_core20.getVar)(`cell-${index}`)(theme);
       const dimmed = shouldHighlight && highlightedArea !== name;
       const resolvedProps = {
         ...computedProps,
@@ -3292,8 +3286,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_core21.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core21.useMultiComponentStyle)("DonutChart", props);
   const {
     className,
     data,
@@ -3322,7 +3316,7 @@ var DonutChart = (0, import_core20.forwardRef)((props, ref) => {
     legendProps,
     labelProps,
     ...rest
-  } = (0, import_core20.omitThemeProps)(mergedProps);
+  } = (0, import_core21.omitThemeProps)(mergedProps);
   const {
     pieVars,
     getPieProps,
@@ -3368,7 +3362,7 @@ 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_core21.ui.div,
     {
       ref,
       className: (0, import_utils21.cx)("ui-donut-chart", className),
@@ -3443,13 +3437,13 @@ var DonutChart = (0, import_core20.forwardRef)((props, ref) => {
 });
 
 // src/pie-chart.tsx
-var import_core21 = require("@yamada-ui/core");
+var import_core22 = require("@yamada-ui/core");
 var import_utils22 = require("@yamada-ui/utils");
 var import_react18 = 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_core22.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core22.useMultiComponentStyle)("PieChart", props);
   const {
     className,
     data,
@@ -3477,7 +3471,7 @@ var PieChart = (0, import_core21.forwardRef)((props, ref) => {
     strokeWidth,
     legendProps,
     ...rest
-  } = (0, import_core21.omitThemeProps)(mergedProps);
+  } = (0, import_core22.omitThemeProps)(mergedProps);
   const {
     pieVars,
     getPieProps,
@@ -3522,7 +3516,7 @@ 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_core22.ui.div,
     {
       ref,
       className: (0, import_utils22.cx)("ui-pie-chart", className),