@yamada-ui/charts 1.5.0-dev-20240825080248 → 1.5.0-dev-20240825094045

package/dist/area-chart-split.js

@@ -24,14 +24,16 @@ __export(area_chart_split_exports, {
   AreaSplit: () => AreaSplit
 });
 module.exports = __toCommonJS(area_chart_split_exports);
+var import_core = require("@yamada-ui/core");
 var import_jsx_runtime = require("react/jsx-runtime");
 var AreaSplit = ({ offset, id, fillOpacity }) => {
+  const { theme } = (0, import_core.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "stop",
       {
         offset,
-        stopColor: "var(--ui-area-split-0)",
+        stopColor: (0, import_core.getVar)(`area-split-0`)(theme),
         stopOpacity: fillOpacity != null ? fillOpacity : 0.4
       }
     ),
@@ -39,7 +41,7 @@ var AreaSplit = ({ offset, id, fillOpacity }) => {
       "stop",
       {
         offset,
-        stopColor: "var(--ui-area-split-1)",
+        stopColor: (0, import_core.getVar)(`area-split-1`)(theme),
         stopOpacity: fillOpacity != null ? fillOpacity : 0.4
       }
     )

package/dist/area-chart-split.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/area-chart-split.tsx"],"sourcesContent":["export type AreaSplitProps = {\n  offset: number\n  id?: string\n  fillOpacity: number | string | undefined\n}\n\nexport const AreaSplit = ({ offset, id, fillOpacity }: AreaSplitProps) => {\n  return (\n    <linearGradient id={id} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n      <stop\n        offset={offset}\n        stopColor=\"var(--ui-area-split-0)\"\n        stopOpacity={fillOpacity ?? 0.4}\n      />\n      <stop\n        offset={offset}\n        stopColor=\"var(--ui-area-split-1)\"\n        stopOpacity={fillOpacity ?? 0.4}\n      />\n    </linearGradient>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQI;AAFG,IAAM,YAAY,CAAC,EAAE,QAAQ,IAAI,YAAY,MAAsB;AACxE,SACE,6CAAC,oBAAe,IAAQ,IAAG,KAAI,IAAG,KAAI,IAAG,KAAI,IAAG,KAC9C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,aAAa,oCAAe;AAAA;AAAA,IAC9B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,aAAa,oCAAe;AAAA;AAAA,IAC9B;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../src/area-chart-split.tsx"],"sourcesContent":["import { getVar, useTheme } from \"@yamada-ui/core\"\n\nexport type AreaSplitProps = {\n  offset: number\n  id?: string\n  fillOpacity: number | string | undefined\n}\n\nexport const AreaSplit = ({ offset, id, fillOpacity }: AreaSplitProps) => {\n  const { theme } = useTheme()\n\n  return (\n    <linearGradient id={id} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n      <stop\n        offset={offset}\n        stopColor={getVar(`area-split-0`)(theme)}\n        stopOpacity={fillOpacity ?? 0.4}\n      />\n      <stop\n        offset={offset}\n        stopColor={getVar(`area-split-1`)(theme)}\n        stopOpacity={fillOpacity ?? 0.4}\n      />\n    </linearGradient>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiC;AAY7B;AAJG,IAAM,YAAY,CAAC,EAAE,QAAQ,IAAI,YAAY,MAAsB;AACxE,QAAM,EAAE,MAAM,QAAI,sBAAS;AAE3B,SACE,6CAAC,oBAAe,IAAQ,IAAG,KAAI,IAAG,KAAI,IAAG,KAAI,IAAG,KAC9C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,oBAAO,cAAc,EAAE,KAAK;AAAA,QACvC,aAAa,oCAAe;AAAA;AAAA,IAC9B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,oBAAO,cAAc,EAAE,KAAK;AAAA,QACvC,aAAa,oCAAe;AAAA;AAAA,IAC9B;AAAA,KACF;AAEJ;","names":[]}

package/dist/area-chart-split.mjs

@@ -1,7 +1,7 @@
 "use client"
 import {
   AreaSplit
-} from "./chunk-PNE3JG54.mjs";
+} from "./chunk-MGTMKKSH.mjs";
 export {
   AreaSplit
 };

package/dist/area-chart.js

@@ -24,7 +24,7 @@ __export(area_chart_exports, {
   AreaChart: () => AreaChart
 });
 module.exports = __toCommonJS(area_chart_exports);
-var import_core10 = require("@yamada-ui/core");
+var import_core11 = require("@yamada-ui/core");
 var import_utils11 = require("@yamada-ui/utils");
 var import_react8 = require("react");
 var import_recharts = require("recharts");
@@ -48,14 +48,16 @@ var AreaGradient = ({
 };
 
 // src/area-chart-split.tsx
+var import_core = require("@yamada-ui/core");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var AreaSplit = ({ offset, id, fillOpacity }) => {
+  const { theme } = (0, import_core.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "stop",
       {
         offset,
-        stopColor: "var(--ui-area-split-0)",
+        stopColor: (0, import_core.getVar)(`area-split-0`)(theme),
         stopOpacity: fillOpacity != null ? fillOpacity : 0.4
       }
     ),
@@ -63,7 +65,7 @@ var AreaSplit = ({ offset, id, fillOpacity }) => {
       "stop",
       {
         offset,
-        stopColor: "var(--ui-area-split-1)",
+        stopColor: (0, import_core.getVar)(`area-split-1`)(theme),
         stopOpacity: fillOpacity != null ? fillOpacity : 0.4
       }
     )
@@ -71,20 +73,20 @@ var AreaSplit = ({ offset, id, fillOpacity }) => {
 };
 
 // src/chart-legend.tsx
-var import_core3 = require("@yamada-ui/core");
+var import_core4 = require("@yamada-ui/core");
 var import_utils3 = require("@yamada-ui/utils");
 
 // src/use-chart.ts
-var import_core2 = require("@yamada-ui/core");
+var import_core3 = require("@yamada-ui/core");
 var import_utils2 = require("@yamada-ui/utils");
 var import_react = require("react");
 
 // src/chart-utils.ts
-var import_core = require("@yamada-ui/core");
+var import_core2 = require("@yamada-ui/core");
 var import_utils = require("@yamada-ui/utils");
 var getClassName = (...styles) => (theme) => (0, import_utils.cx)(
   ...styles.map(
-    (style) => (0, import_utils.isString)(style) ? style : (0, import_core.getCSS)(style)(theme)
+    (style) => (0, import_utils.isString)(style) ? style : (0, import_core2.getCSS)(style)(theme)
   )
 );
 var getComponentProps = ([obj, keys], ...props) => (theme, isContain) => {
@@ -336,7 +338,7 @@ var [ChartProvider, useChartContext] = (0, import_utils2.createContext)({
   errorMessage: `useChartContext returned is 'undefined'. Seems you forgot to wrap the components in "<LineChart />" or "<BarChart />" etc.`
 });
 var useChart = ({ containerProps = {} }) => {
-  const { theme } = (0, import_core2.useTheme)();
+  const { theme } = (0, import_core3.useTheme)();
   const [reChartsProps, propClassName] = getComponentProps([
     containerProps,
     containerProperties
@@ -369,13 +371,13 @@ var useTooltip = ({} = {}) => {
 
 // src/chart-legend.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var ChartLegend = (0, import_core3.forwardRef)(
+var ChartLegend = (0, import_core4.forwardRef)(
   ({ className, payload = [], onHighlight, ...rest }, ref) => {
     const { styles } = useLegend();
     const items = payload.map(({ dataKey, value: valueProp, color }, index) => {
       const value = dataKey != null ? dataKey : valueProp;
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-        import_core3.ui.div,
+        import_core4.ui.div,
         {
           className: "ui-chart__legend-item",
           onMouseEnter: () => onHighlight(value),
@@ -383,21 +385,21 @@ var ChartLegend = (0, import_core3.forwardRef)(
           __css: styles.legendItem,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              import_core3.ui.div,
+              import_core4.ui.div,
               {
                 className: "ui-chart__legend-swatch",
                 background: color,
                 __css: styles.legendSwatch
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.span, { className: "ui-chart__legend-label", children: value })
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core4.ui.span, { className: "ui-chart__legend-label", children: value })
           ]
         },
         `legend-${index}`
       );
     });
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_core3.ui.div,
+      import_core4.ui.div,
       {
         ref,
         className: (0, import_utils3.cx)("ui-chart__legend", className),
@@ -410,10 +412,10 @@ var ChartLegend = (0, import_core3.forwardRef)(
 );
 
 // src/chart-tooltip.tsx
-var import_core4 = require("@yamada-ui/core");
+var import_core5 = require("@yamada-ui/core");
 var import_utils4 = require("@yamada-ui/utils");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var ChartTooltip = (0, import_core4.forwardRef)(
+var ChartTooltip = (0, import_core5.forwardRef)(
   ({
     label,
     className,
@@ -439,13 +441,13 @@ var ChartTooltip = (0, import_core4.forwardRef)(
           value = (_a2 = valueFormatter == null ? void 0 : valueFormatter(valueProp)) != null ? _a2 : valueProp;
         }
         return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-          import_core4.ui.div,
+          import_core5.ui.div,
           {
             className: "ui-chart__tooltip-item",
             __css: styles.tooltipItem,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                import_core4.ui.div,
+                import_core5.ui.div,
                 {
                   className: "ui-chart__tooltip-swatch",
                   background: color,
@@ -453,7 +455,7 @@ var ChartTooltip = (0, import_core4.forwardRef)(
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                import_core4.ui.span,
+                import_core5.ui.span,
                 {
                   className: "ui-chart__tooltip-label",
                   __css: styles.tooltipLabel,
@@ -461,7 +463,7 @@ var ChartTooltip = (0, import_core4.forwardRef)(
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-                import_core4.ui.span,
+                import_core5.ui.span,
                 {
                   className: "ui-chart__tooltip-value",
                   __css: styles.tooltipValue,
@@ -478,15 +480,15 @@ var ChartTooltip = (0, import_core4.forwardRef)(
       }
     );
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-      import_core4.ui.div,
+      import_core5.ui.div,
       {
         ref,
         className: (0, import_utils4.cx)("ui-chart__tooltip", className),
         __css: styles.tooltip,
         ...rest,
         children: [
-          label ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.p, { className: "ui-chart__tooltip-title", __css: styles.tooltipTitle, children: (_a = labelFormatter == null ? void 0 : labelFormatter(label)) != null ? _a : label }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.div, { className: "ui-chart__tooltip-list", __css: styles.tooltipList, children: items })
+          label ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core5.ui.p, { className: "ui-chart__tooltip-title", __css: styles.tooltipTitle, children: (_a = labelFormatter == null ? void 0 : labelFormatter(label)) != null ? _a : label }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core5.ui.div, { className: "ui-chart__tooltip-list", __css: styles.tooltipList, children: items })
         ]
       }
     );
@@ -494,7 +496,7 @@ var ChartTooltip = (0, import_core4.forwardRef)(
 );
 
 // src/use-area-chart.ts
-var import_core5 = require("@yamada-ui/core");
+var import_core6 = require("@yamada-ui/core");
 var import_utils5 = require("@yamada-ui/utils");
 var import_react2 = require("react");
 var useAreaChart = ({
@@ -520,7 +522,7 @@ var useAreaChart = ({
 }) => {
   var _a;
   const uuid = (0, import_react2.useId)();
-  const { theme } = (0, import_core5.useTheme)();
+  const { theme } = (0, import_core6.useTheme)();
   const [highlightedArea, setHighlightedArea] = (0, import_react2.useState)(null);
   const splitId = `${uuid}-split`;
   const stacked = type === "stacked" || type === "percent";
@@ -535,7 +537,6 @@ var useAreaChart = ({
   } = (_a = rest.areaProps) != null ? _a : {};
   const areaColors = (0, import_react2.useMemo)(
     () => series.map(({ color }, index) => ({
-      __prefix: "ui",
       name: `area-${index}`,
       token: "colors",
       value: color != null ? color : "transparent"
@@ -544,7 +545,6 @@ var useAreaChart = ({
   );
   const areaSplitColors = (0, import_react2.useMemo)(
     () => splitColors.map((color, index) => ({
-      __prefix: "ui",
       name: `area-split-${index}`,
       token: "colors",
       value: color != null ? color : "transparent"
@@ -553,7 +553,6 @@ var useAreaChart = ({
   );
   const referenceLineColors = (0, import_react2.useMemo)(
     () => referenceLineProps ? referenceLineProps.map(({ color }, index) => ({
-      __prefix: "ui",
       name: `reference-line-${index}`,
       token: "colors",
       value: color != null ? color : "transparent"
@@ -565,9 +564,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_react2.useMemo)(() => (0, import_core6.getVar)("fill-opacity")(theme), [theme]);
   const [chartProps, areaChartClassName] = (0, import_react2.useMemo)(
     () => {
       var _a2;
@@ -642,7 +642,7 @@ var useAreaChart = ({
         ...computedProps
       } = props;
       const id = `${uuid}-${dataKey}`;
-      const color = `var(--ui-area-${index})`;
+      const color = (0, import_core6.getVar)(`area-${index}`)(theme);
       const dimmed = shouldHighlight && highlightedArea !== dataKey;
       const computedDimArea = { ...dimAreaProps, ...dimArea2 };
       const resolvedProps = {
@@ -754,10 +754,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_react2.useCallback)(
     ({ index, className: classNameProp, ...props }, ref = null) => {
@@ -804,10 +804,10 @@ var useAreaChart = ({
   const getAreaGradientProps = (0, import_react2.useCallback)(
     (props = {}) => ({
       withGradient,
-      fillOpacity: "var(--ui-fill-opacity)",
+      fillOpacity: fillOpacityVar,
       ...props
     }),
-    [withGradient]
+    [withGradient, fillOpacityVar]
   );
   return {
     getAreaChartProps,
@@ -820,7 +820,7 @@ var useAreaChart = ({
 };
 
 // src/use-chart-axis.ts
-var import_core6 = require("@yamada-ui/core");
+var import_core7 = require("@yamada-ui/core");
 var import_utils6 = require("@yamada-ui/utils");
 var import_react3 = require("react");
 var useChartAxis = ({
@@ -840,7 +840,7 @@ var useChartAxis = ({
   ...rest
 }) => {
   var _a, _b, _c, _d;
-  const { theme } = (0, import_core6.useTheme)();
+  const { theme } = (0, import_core7.useTheme)();
   const xAxisKey = (0, import_react3.useMemo)(
     () => layoutType === "vertical" ? { type: "number" } : { dataKey },
     [dataKey, layoutType]
@@ -961,7 +961,7 @@ var valueToPercent = (value) => {
 };
 
 // src/use-chart-grid.ts
-var import_core7 = require("@yamada-ui/core");
+var import_core8 = require("@yamada-ui/core");
 var import_utils7 = require("@yamada-ui/utils");
 var import_react4 = require("react");
 var useChartGrid = ({
@@ -970,7 +970,7 @@ var useChartGrid = ({
   strokeDasharray = "5 5",
   styles
 }) => {
-  const { theme } = (0, import_core7.useTheme)();
+  const { theme } = (0, import_core8.useTheme)();
   const [reChartsProps, propClassName] = getComponentProps(
     [gridProps, gridProperties],
     styles.grid
@@ -1015,22 +1015,22 @@ var useChartLegend = ({
 };
 
 // src/use-chart-reference-line.ts
-var import_core8 = require("@yamada-ui/core");
+var import_core9 = require("@yamada-ui/core");
 var import_utils9 = require("@yamada-ui/utils");
 var import_react6 = require("react");
 var useChartReferenceLine = ({
   referenceLineProps = [],
   styles
 }) => {
-  const { theme } = (0, import_core8.useTheme)();
-  const styleClassName = (0, import_core8.getCSS)(styles.referenceLine)(theme);
+  const { theme } = (0, import_core9.useTheme)();
+  const styleClassName = (0, import_core9.getCSS)(styles.referenceLine)(theme);
   const propList = (0, import_react6.useMemo)(
     () => referenceLineProps.map((props, index) => {
       const [{ label: labelProp, ...rest }, propClassName] = getComponentProps(
         [props, referenceLineProperties],
         styleClassName
       )(theme);
-      const color = `var(--ui-reference-line-${index})`;
+      const color = (0, import_core9.getVar)(`reference-line-${index}`)(theme);
       const label = {
         value: labelProp,
         fill: color,
@@ -1059,7 +1059,7 @@ var useChartReferenceLine = ({
 };
 
 // src/use-chart-tooltip.ts
-var import_core9 = require("@yamada-ui/core");
+var import_core10 = require("@yamada-ui/core");
 var import_utils10 = require("@yamada-ui/utils");
 var import_react7 = require("react");
 var useChartTooltip = ({
@@ -1067,7 +1067,7 @@ var useChartTooltip = ({
   tooltipAnimationDuration = 0,
   styles
 }) => {
-  const { theme } = (0, import_core9.useTheme)();
+  const { theme } = (0, import_core10.useTheme)();
   const { cursor, ...rest } = _tooltipProps;
   const cursorClassName = (0, import_react7.useMemo)(
     () => getClassName({ ...styles.cursor, ...cursor })(theme),
@@ -1095,8 +1095,8 @@ var useChartTooltip = ({
 
 // src/area-chart.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var AreaChart = (0, import_core10.forwardRef)((props, ref) => {
-  const [styles, mergedProps] = (0, import_core10.useMultiComponentStyle)("AreaChart", props);
+var AreaChart = (0, import_core11.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core11.useMultiComponentStyle)("AreaChart", props);
   const {
     className,
     series,
@@ -1141,7 +1141,7 @@ var AreaChart = (0, import_core10.forwardRef)((props, ref) => {
     splitOffset,
     syncId,
     ...rest
-  } = (0, import_core10.omitThemeProps)(mergedProps);
+  } = (0, import_core11.omitThemeProps)(mergedProps);
   const {
     getAreaChartProps,
     getAreaSplitProps,
@@ -1241,7 +1241,7 @@ var AreaChart = (0, import_core10.forwardRef)((props, ref) => {
     [getReferenceLineProps, referenceLineProps]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_core10.ui.div,
+    import_core11.ui.div,
     {
       ref,
       className: (0, import_utils11.cx)("ui-area-chart", className),