@lobehub/charts 4.0.0 → 4.0.2

package/es/AccuracyBarChart/index.js

@@ -19,8 +19,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { Flexbox } from '@lobehub/ui';
 import { Skeleton } from 'antd';
-import { css } from 'antd-style';
-import { readableColor } from 'polished';
+import { css, cssVar, cx } from 'antd-style';
 import { forwardRef, useMemo, useState } from 'react';
 import { Bar, CartesianGrid, ErrorBar, Label, LabelList, Legend, BarChart as ReChartsBarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 import ChartLegend from "../common/ChartLegend";
@@ -31,16 +30,12 @@ import { constructCategoryColors, deepEqual, getYAxisDomain } from "../common/ut
 import { useThemeColorRange } from "../hooks/useThemeColorRange";
 import { defaultValueFormatter } from "../utils";
 import { getMaxLabelLength, getTextWidth } from "../utils/getMaxLabelLength";
-import { useStyles } from "./styles";
+import { styles } from "./styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 var AccuracyBarChart = /*#__PURE__*/forwardRef(function (props, ref) {
   var _categoryColors$get;
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    theme = _useStyles.theme,
-    styles = _useStyles.styles;
   var themeColorRange = useThemeColorRange();
   var _props$data = props.data,
     data = _props$data === void 0 ? [] : _props$data,
@@ -242,7 +237,7 @@ var AccuracyBarChart = /*#__PURE__*/forwardRef(function (props, ref) {
             offset: -20,
             position: "insideBottom",
             style: {
-              fill: theme.colorTextSecondary,
+              fill: cssVar.colorTextSecondary,
               fontWeight: 500,
               textAnchor: 'middle'
             },
@@ -274,7 +269,7 @@ var AccuracyBarChart = /*#__PURE__*/forwardRef(function (props, ref) {
             offset: -20,
             position: "insideBottom",
             style: {
-              fill: theme.colorTextSecondary,
+              fill: cssVar.colorTextSecondary,
               fontWeight: 500,
               textAnchor: 'middle'
             },
@@ -307,7 +302,7 @@ var AccuracyBarChart = /*#__PURE__*/forwardRef(function (props, ref) {
             offset: -15,
             position: "insideLeft",
             style: {
-              fill: theme.colorTextSecondary,
+              fill: cssVar.colorTextSecondary,
               fontWeight: 500,
               textAnchor: 'middle'
             },
@@ -339,7 +334,7 @@ var AccuracyBarChart = /*#__PURE__*/forwardRef(function (props, ref) {
             offset: -15,
             position: "insideLeft",
             style: {
-              fill: theme.colorTextSecondary,
+              fill: cssVar.colorTextSecondary,
               fontWeight: 500,
               textAnchor: 'middle'
             },
@@ -380,7 +375,7 @@ var AccuracyBarChart = /*#__PURE__*/forwardRef(function (props, ref) {
                 return /*#__PURE__*/_jsxs(_Fragment, {
                   children: [accuracyFormatter(Number(val)), /*#__PURE__*/_jsxs("span", {
                     style: {
-                      color: theme.colorTextSecondary
+                      color: cssVar.colorTextSecondary
                     },
                     children: [' ', "\xB1 ", errorFormatter(Number(errVal))]
                   })]
@@ -389,7 +384,7 @@ var AccuracyBarChart = /*#__PURE__*/forwardRef(function (props, ref) {
             });
           } : undefined,
           cursor: {
-            fill: theme.colorFillTertiary
+            fill: cssVar.colorFillTertiary
           },
           isAnimationActive: false,
           position: {
@@ -411,7 +406,7 @@ var AccuracyBarChart = /*#__PURE__*/forwardRef(function (props, ref) {
           verticalAlign: "top"
         }) : undefined, /*#__PURE__*/_jsxs(Bar, {
           animationDuration: animationDuration,
-          className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                fill: ", ";\n              "])), (_categoryColors$get = categoryColors.get(category)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary)),
+          className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                fill: ", ";\n              "])), (_categoryColors$get = categoryColors.get(category)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : cssVar.colorPrimary)),
           dataKey: category,
           fill: '',
           isAnimationActive: showAnimation,
@@ -423,7 +418,6 @@ var AccuracyBarChart = /*#__PURE__*/forwardRef(function (props, ref) {
           type: "linear",
           children: [showPercentage && layout === 'vertical' ? /*#__PURE__*/_jsx(LabelList, {
             content: function content(labelProps) {
-              var _categoryColors$get2;
               var lx = labelProps.x,
                 ly = labelProps.y,
                 lh = labelProps.height,
@@ -438,7 +432,7 @@ var AccuracyBarChart = /*#__PURE__*/forwardRef(function (props, ref) {
                 className: styles.percentageLabel,
                 dominantBaseline: "central",
                 style: {
-                  fill: readableColor((_categoryColors$get2 = categoryColors.get(category)) !== null && _categoryColors$get2 !== void 0 ? _categoryColors$get2 : theme.colorPrimary)
+                  fill: cssVar.colorTextLightSolid
                 },
                 x: Number(lx) + 8,
                 y: Number(ly) + Number(lh) / 2,
@@ -451,7 +445,7 @@ var AccuracyBarChart = /*#__PURE__*/forwardRef(function (props, ref) {
           }) : null, showErrorBars ? /*#__PURE__*/_jsx(ErrorBar, {
             dataKey: errorKey,
             direction: layout === 'vertical' ? 'x' : 'y',
-            stroke: theme.colorTextSecondary
+            stroke: cssVar.colorTextSecondary
           }) : null]
         }, category)]
       }) : /*#__PURE__*/_jsx(NoData, {

package/es/AccuracyBarChart/styles.d.ts

@@ -1,11 +1,11 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
-    accuracyText: import("antd-style").SerializedStyles;
-    accuracyTextLight: import("antd-style").SerializedStyles;
-    emphasis: import("antd-style").SerializedStyles;
-    gridLines: import("antd-style").SerializedStyles;
-    label: import("antd-style").SerializedStyles;
-    leftValue: import("antd-style").SerializedStyles;
-    leftValueContainer: import("antd-style").SerializedStyles;
-    percentageLabel: import("antd-style").SerializedStyles;
-    strongLabel: import("antd-style").SerializedStyles;
-}>;
+export declare const styles: {
+    accuracyText: string;
+    accuracyTextLight: string;
+    emphasis: string;
+    gridLines: string;
+    label: string;
+    leftValue: string;
+    leftValueContainer: string;
+    percentageLabel: string;
+    strongLabel: string;
+};

package/es/AccuracyBarChart/styles.js

@@ -1,18 +1,18 @@
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref) {
+import { createStaticStyles } from 'antd-style';
+export var styles = createStaticStyles(function (_ref) {
   var css = _ref.css,
-    token = _ref.token;
+    cssVar = _ref.cssVar;
   return {
-    accuracyText: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-size: 11px;\n    font-weight: 500;\n\n    dominant-baseline: central;\n    text-anchor: middle;\n    fill: ", ";\n  "])), token.colorText),
-    accuracyTextLight: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    font-size: 11px;\n    font-weight: 500;\n\n    dominant-baseline: central;\n    text-anchor: middle;\n    fill: ", ";\n  "])), token.colorTextLightSolid),
+    accuracyText: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-size: 11px;\n    font-weight: 500;\n\n    dominant-baseline: central;\n    text-anchor: middle;\n    fill: ", ";\n  "])), cssVar.colorText),
+    accuracyTextLight: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    font-size: 11px;\n    font-weight: 500;\n\n    dominant-baseline: central;\n    text-anchor: middle;\n    fill: ", ";\n  "])), cssVar.colorTextLightSolid),
     emphasis: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  "]))),
-    gridLines: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    stroke: ", ";\n    stroke-width: 1;\n  "])), token.colorBorderSecondary),
-    label: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    line-height: 16px;\n    fill: ", ";\n  "])), token.colorTextDescription),
+    gridLines: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    stroke: ", ";\n    stroke-width: 1;\n  "])), cssVar.colorBorderSecondary),
+    label: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    line-height: 16px;\n    fill: ", ";\n  "])), cssVar.colorTextDescription),
     leftValue: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: flex-end;\n\n    padding-right: 8px;\n  "]))),
     leftValueContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 10;\n    top: 0;\n    bottom: 0;\n    left: 0;\n\n    display: flex;\n    flex-direction: column;\n\n    width: 80px;\n  "]))),
     percentageLabel: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    padding: 2px 4px;\n    border-radius: 4px;\n    font-size: 12px;\n  "]))),
-    strongLabel: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 16px;\n    fill: ", ";\n  "])), token.colorTextSecondary)
+    strongLabel: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 16px;\n    fill: ", ";\n  "])), cssVar.colorTextSecondary)
   };
 });

package/es/AreaChart/index.js

@@ -19,7 +19,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { Flexbox } from '@lobehub/ui';
 import { Skeleton } from 'antd';
-import { css } from 'antd-style';
+import { css, cssVar, cx } from 'antd-style';
 import { Fragment, forwardRef, useMemo, useState } from 'react';
 import { Area, CartesianGrid, Dot, Label, Legend, Line, AreaChart as ReChartsAreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 import ChartLegend from "../common/ChartLegend";
@@ -30,14 +30,10 @@ import { constructCategoryColors, getYAxisDomain, hasOnlyOneValueForThisKey } fr
 import { useThemeColorRange } from "../hooks/useThemeColorRange";
 import { defaultValueFormatter } from "../utils";
 import { getMaxLabelLength } from "../utils/getMaxLabelLength";
-import { useStyles } from "./styles";
+import { styles } from "./styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    theme = _useStyles.theme,
-    styles = _useStyles.styles;
   var themeColorRange = useThemeColorRange();
   var _props$data = props.data,
     data = _props$data === void 0 ? [] : _props$data,
@@ -268,7 +264,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
               payload: (_ref2 = stack ? payload === null || payload === void 0 ? void 0 : payload.reverse() : payload) === null || _ref2 === void 0 ? void 0 : _ref2.map(function (payloadItem) {
                 var _categoryColors$get;
                 return _objectSpread(_objectSpread({}, payloadItem), {}, {
-                  color: (_categoryColors$get = categoryColors.get(payloadItem.dataKey)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary
+                  color: (_categoryColors$get = categoryColors.get(payloadItem.dataKey)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : cssVar.colorPrimary
                 });
               }),
               valueFormatter: valueFormatter
@@ -282,7 +278,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
             });
           } : undefined,
           cursor: {
-            stroke: theme.colorTextSecondary,
+            stroke: cssVar.colorTextSecondary,
             strokeWidth: 1
           },
           isAnimationActive: false,
@@ -307,7 +303,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
           var _categoryColors$get2, _categoryColors$get3;
           return /*#__PURE__*/_jsx("defs", {
             children: showGradient ? /*#__PURE__*/_jsxs("linearGradient", {
-              className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                        color: ", ";\n                      "])), (_categoryColors$get2 = categoryColors.get(category)) !== null && _categoryColors$get2 !== void 0 ? _categoryColors$get2 : theme.colorPrimary)),
+              className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                        color: ", ";\n                      "])), (_categoryColors$get2 = categoryColors.get(category)) !== null && _categoryColors$get2 !== void 0 ? _categoryColors$get2 : cssVar.colorPrimary)),
               id: categoryColors.get(category),
               x1: "0",
               x2: "0",
@@ -323,7 +319,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
                 stopOpacity: 0
               })]
             }) : /*#__PURE__*/_jsx("linearGradient", {
-              className: cx(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                        color: ", ";\n                      "])), (_categoryColors$get3 = categoryColors.get(category)) !== null && _categoryColors$get3 !== void 0 ? _categoryColors$get3 : theme.colorPrimary)),
+              className: cx(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                        color: ", ";\n                      "])), (_categoryColors$get3 = categoryColors.get(category)) !== null && _categoryColors$get3 !== void 0 ? _categoryColors$get3 : cssVar.colorPrimary)),
               id: categoryColors.get(category),
               x1: "0",
               x2: "0",
@@ -348,7 +344,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
                 strokeWidth = props.strokeWidth,
                 dataKey = props.dataKey;
               return /*#__PURE__*/_jsx(Dot, {
-                className: cx(css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                        fill: ", ";\n                      "])), (_categoryColors$get4 = categoryColors.get(dataKey)) !== null && _categoryColors$get4 !== void 0 ? _categoryColors$get4 : theme.colorPrimary)),
+                className: cx(css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                        fill: ", ";\n                      "])), (_categoryColors$get4 = categoryColors.get(dataKey)) !== null && _categoryColors$get4 !== void 0 ? _categoryColors$get4 : cssVar.colorPrimary)),
                 cx: dotCx,
                 cy: dotCy,
                 fill: "",
@@ -363,7 +359,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
               });
             },
             animationDuration: animationDuration,
-            className: cx(css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                  stroke: ", ";\n                "])), (_categoryColors$get5 = categoryColors.get(category)) !== null && _categoryColors$get5 !== void 0 ? _categoryColors$get5 : theme.colorPrimary)),
+            className: cx(css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                  stroke: ", ";\n                "])), (_categoryColors$get5 = categoryColors.get(category)) !== null && _categoryColors$get5 !== void 0 ? _categoryColors$get5 : cssVar.colorPrimary)),
             connectNulls: connectNulls,
             dataKey: category,
             dot: function dot(props) {
@@ -378,7 +374,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
               if (hasOnlyOneValueForThisKey(data, category) && !(activeDot || activeLegend && activeLegend !== category) || (activeDot === null || activeDot === void 0 ? void 0 : activeDot.index) === index && (activeDot === null || activeDot === void 0 ? void 0 : activeDot.dataKey) === category) {
                 var _categoryColors$get6;
                 return /*#__PURE__*/_jsx(Dot, {
-                  className: cx(css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                          fill: ", ";\n                        "])), (_categoryColors$get6 = categoryColors.get(dataKey)) !== null && _categoryColors$get6 !== void 0 ? _categoryColors$get6 : theme.colorPrimary)),
+                  className: cx(css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                          fill: ", ";\n                        "])), (_categoryColors$get6 = categoryColors.get(dataKey)) !== null && _categoryColors$get6 !== void 0 ? _categoryColors$get6 : cssVar.colorPrimary)),
                   cx: dotCx,
                   cy: dotCy,
                   fill: "",

package/es/AreaChart/styles.d.ts

@@ -1,6 +1,6 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
-    emphasis: import("antd-style").SerializedStyles;
-    gridLines: import("antd-style").SerializedStyles;
-    label: import("antd-style").SerializedStyles;
-    strongLabel: import("antd-style").SerializedStyles;
-}>;
+export declare const styles: {
+    emphasis: string;
+    gridLines: string;
+    label: string;
+    strongLabel: string;
+};

package/es/AreaChart/styles.js

@@ -1,13 +1,13 @@
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref) {
+import { createStaticStyles } from 'antd-style';
+export var styles = createStaticStyles(function (_ref) {
   var css = _ref.css,
-    token = _ref.token;
+    cssVar = _ref.cssVar;
   return {
     emphasis: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  "]))),
-    gridLines: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    stroke: ", ";\n    stroke-width: 1;\n  "])), token.colorBorderSecondary),
-    label: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    line-height: 16px;\n    fill: ", ";\n  "])), token.colorTextDescription),
-    strongLabel: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 16px;\n    fill: ", ";\n  "])), token.colorTextSecondary)
+    gridLines: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    stroke: ", ";\n    stroke-width: 1;\n  "])), cssVar.colorBorderSecondary),
+    label: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    line-height: 16px;\n    fill: ", ";\n  "])), cssVar.colorTextDescription),
+    strongLabel: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 16px;\n    fill: ", ";\n  "])), cssVar.colorTextSecondary)
   };
 });

package/es/BarChart/index.js

@@ -19,7 +19,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { Flexbox } from '@lobehub/ui';
 import { Skeleton } from 'antd';
-import { css } from 'antd-style';
+import { css, cssVar, cx } from 'antd-style';
 import { forwardRef, useMemo, useState } from 'react';
 import { Bar, CartesianGrid, Label, Legend, BarChart as ReChartsBarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 import ChartLegend from "../common/ChartLegend";
@@ -30,14 +30,10 @@ import { constructCategoryColors, deepEqual, getYAxisDomain } from "../common/ut
 import { useThemeColorRange } from "../hooks/useThemeColorRange";
 import { defaultValueFormatter } from "../utils";
 import { getMaxLabelLength } from "../utils/getMaxLabelLength";
-import { useStyles } from "./styles";
+import { styles } from "./styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    theme = _useStyles.theme,
-    styles = _useStyles.styles;
   var themeColorRange = useThemeColorRange();
   var _props$data = props.data,
     data = _props$data === void 0 ? [] : _props$data,
@@ -222,7 +218,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
             offset: -20,
             position: "insideBottom",
             style: {
-              fill: theme.colorTextSecondary,
+              fill: cssVar.colorTextSecondary,
               fontWeight: 500,
               textAnchor: 'middle'
             },
@@ -254,7 +250,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
             offset: -20,
             position: "insideBottom",
             style: {
-              fill: theme.colorTextSecondary,
+              fill: cssVar.colorTextSecondary,
               fontWeight: 500,
               textAnchor: 'middle'
             },
@@ -287,7 +283,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
             offset: -15,
             position: "insideLeft",
             style: {
-              fill: theme.colorTextSecondary,
+              fill: cssVar.colorTextSecondary,
               fontWeight: 500,
               textAnchor: 'middle'
             },
@@ -319,7 +315,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
             offset: -15,
             position: "insideLeft",
             style: {
-              fill: theme.colorTextSecondary,
+              fill: cssVar.colorTextSecondary,
               fontWeight: 500,
               textAnchor: 'middle'
             },
@@ -338,7 +334,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
               payload: (_ref2 = stack ? payload === null || payload === void 0 ? void 0 : payload.reverse() : payload) === null || _ref2 === void 0 ? void 0 : _ref2.map(function (payloadItem) {
                 var _categoryColors$get;
                 return _objectSpread(_objectSpread({}, payloadItem), {}, {
-                  color: (_categoryColors$get = categoryColors.get(payloadItem.dataKey)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary
+                  color: (_categoryColors$get = categoryColors.get(payloadItem.dataKey)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : cssVar.colorPrimary
                 });
               }),
               valueFormatter: valueFormatter
@@ -352,7 +348,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
             });
           } : undefined,
           cursor: {
-            fill: theme.colorFillTertiary
+            fill: cssVar.colorFillTertiary
           },
           isAnimationActive: false,
           position: {
@@ -376,7 +372,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
           var _categoryColors$get2;
           return /*#__PURE__*/_jsx(Bar, {
             animationDuration: animationDuration,
-            className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                    fill: ", ";\n                  "])), (_categoryColors$get2 = categoryColors.get(category)) !== null && _categoryColors$get2 !== void 0 ? _categoryColors$get2 : theme.colorPrimary)),
+            className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                    fill: ", ";\n                  "])), (_categoryColors$get2 = categoryColors.get(category)) !== null && _categoryColors$get2 !== void 0 ? _categoryColors$get2 : cssVar.colorPrimary)),
             dataKey: category,
             fill: '',
             isAnimationActive: showAnimation,

package/es/BarChart/styles.d.ts

@@ -1,6 +1,6 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
-    emphasis: import("antd-style").SerializedStyles;
-    gridLines: import("antd-style").SerializedStyles;
-    label: import("antd-style").SerializedStyles;
-    strongLabel: import("antd-style").SerializedStyles;
-}>;
+export declare const styles: {
+    emphasis: string;
+    gridLines: string;
+    label: string;
+    strongLabel: string;
+};

package/es/BarChart/styles.js

@@ -1,13 +1,13 @@
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref) {
+import { createStaticStyles } from 'antd-style';
+export var styles = createStaticStyles(function (_ref) {
   var css = _ref.css,
-    token = _ref.token;
+    cssVar = _ref.cssVar;
   return {
     emphasis: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  "]))),
-    gridLines: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    stroke: ", ";\n    stroke-width: 1;\n  "])), token.colorBorderSecondary),
-    label: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    line-height: 16px;\n    fill: ", ";\n  "])), token.colorTextDescription),
-    strongLabel: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 16px;\n    fill: ", ";\n  "])), token.colorTextSecondary)
+    gridLines: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    stroke: ", ";\n    stroke-width: 1;\n  "])), cssVar.colorBorderSecondary),
+    label: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    line-height: 16px;\n    fill: ", ";\n  "])), cssVar.colorTextDescription),
+    strongLabel: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 16px;\n    fill: ", ";\n  "])), cssVar.colorTextSecondary)
   };
 });

package/es/BarList/index.js

@@ -17,18 +17,16 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { A, Flexbox } from '@lobehub/ui';
 import { Skeleton } from 'antd';
+import { cx } from 'antd-style';
 import React, { forwardRef, useMemo } from 'react';
 import NoData from "../common/NoData";
 import { useThemeColorRange } from "../hooks/useThemeColorRange";
 import { defaultValueFormatter } from "../utils";
-import { useStyles } from "./styles";
+import { styles } from "./styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var prefixCls = 'ant';
 var BarList = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    styles = _useStyles.styles,
-    prefixCls = _useStyles.prefixCls;
   var themeColorRange = useThemeColorRange();
   var _props$data = props.data,
     data = _props$data === void 0 ? [] : _props$data,

package/es/BarList/styles.d.ts

@@ -1,10 +1,10 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
-    bar: import("antd-style").SerializedStyles;
-    barContainer: import("antd-style").SerializedStyles;
-    barHover: import("antd-style").SerializedStyles;
-    emphasis: import("antd-style").SerializedStyles;
-    label: import("antd-style").SerializedStyles;
-    sourceALabel: import("antd-style").SerializedStyles;
-    sourceLabel: import("antd-style").SerializedStyles;
-    strongLabel: import("antd-style").SerializedStyles;
-}>;
+export declare const styles: {
+    bar: string;
+    barContainer: string;
+    barHover: string;
+    emphasis: string;
+    label: string;
+    sourceALabel: string;
+    sourceLabel: string;
+    strongLabel: string;
+};

package/es/BarList/styles.js

@@ -1,18 +1,18 @@
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref) {
-  var prefixCls = _ref.prefixCls,
-    css = _ref.css,
-    token = _ref.token;
+import { createStaticStyles } from 'antd-style';
+var prefixCls = 'ant';
+export var styles = createStaticStyles(function (_ref) {
+  var css = _ref.css,
+    cssVar = _ref.cssVar;
   return {
-    bar: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n\n    max-width: 100%;\n    height: 100%;\n    border-radius: ", "px;\n\n    opacity: 0.25;\n\n    transition: all 0.25s ", ";\n  "])), token.borderRadius, token.motionEaseInOut),
+    bar: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n\n    max-width: 100%;\n    height: 100%;\n    border-radius: ", ";\n\n    opacity: 0.25;\n\n    transition: all 0.25s ", ";\n  "])), cssVar.borderRadius, cssVar.motionEaseInOut),
     barContainer: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n  "]))),
     barHover: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    &:hover {\n      .", "-chart-bar-item {\n        opacity: 0.4;\n      }\n    }\n  "])), prefixCls),
     emphasis: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  "]))),
-    label: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    line-height: 16px;\n    color: ", ";\n  "])), token.colorTextDescription),
-    sourceALabel: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-size: 14px;\n    line-height: 16px;\n    color: ", " !important;\n\n    &:hover {\n      color: ", " !important;\n    }\n  "])), token.colorText, token.colorLinkHover),
-    sourceLabel: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    font-size: 14px;\n    line-height: 16px;\n    color: ", ";\n  "])), token.colorText),
-    strongLabel: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 16px;\n    color: ", ";\n  "])), token.colorText)
+    label: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    line-height: 16px;\n    color: ", ";\n  "])), cssVar.colorTextDescription),
+    sourceALabel: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-size: 14px;\n    line-height: 16px;\n    color: ", " !important;\n\n    &:hover {\n      color: ", " !important;\n    }\n  "])), cssVar.colorText, cssVar.colorLinkHover),
+    sourceLabel: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    font-size: 14px;\n    line-height: 16px;\n    color: ", ";\n  "])), cssVar.colorText),
+    strongLabel: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 16px;\n    color: ", ";\n  "])), cssVar.colorText)
   };
 });

package/es/DataBars/CategoryBar.js

@@ -17,10 +17,11 @@ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import { Flexbox, Tooltip } from '@lobehub/ui';
+import { cssVar, cx } from 'antd-style';
 import { forwardRef, memo, useMemo } from 'react';
 import { useThemeColorRange } from "../hooks/useThemeColorRange";
 import { defaultValueFormatter, sumNumericArray } from "../utils";
-import { useStyles } from "./styles";
+import { styles } from "./styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var getMarkerBgColor = function getMarkerBgColor(markerValue, values, colors) {
@@ -50,9 +51,6 @@ var getPositionLeft = function getPositionLeft(value, maxValue) {
 var BarLabels = /*#__PURE__*/memo(function (_ref) {
   var values = _ref.values,
     valueFormatter = _ref.valueFormatter;
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    styles = _useStyles.styles;
   var sumValues = useMemo(function () {
     return sumNumericArray(values);
   }, [values]);
@@ -108,10 +106,6 @@ var BarLabels = /*#__PURE__*/memo(function (_ref) {
   });
 });
 var CategoryBar = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _useStyles2 = useStyles(),
-    cx = _useStyles2.cx,
-    styles = _useStyles2.styles,
-    theme = _useStyles2.theme;
   var themeColorRange = useThemeColorRange();
   var _props$values = props.values,
     values = _props$values === void 0 ? [] : _props$values,
@@ -175,7 +169,7 @@ var CategoryBar = /*#__PURE__*/forwardRef(function (props, ref) {
           width: '100%',
           children: values.map(function (value, idx) {
             var _colorGroup$idx;
-            var baseColor = (_colorGroup$idx = colorGroup[idx]) !== null && _colorGroup$idx !== void 0 ? _colorGroup$idx : theme.colorPrimary;
+            var baseColor = (_colorGroup$idx = colorGroup[idx]) !== null && _colorGroup$idx !== void 0 ? _colorGroup$idx : cssVar.colorPrimary;
             var percentage = value / maxValue * 100;
             return /*#__PURE__*/_jsx(Flexbox, {
               height: '100%',
@@ -193,7 +187,7 @@ var CategoryBar = /*#__PURE__*/forwardRef(function (props, ref) {
           children: /*#__PURE__*/_jsx("div", {
             className: styles.marker,
             style: {
-              background: markerBgColor || theme.colorPrimary,
+              background: markerBgColor || cssVar.colorPrimary,
               height: size + 8
             }
           })

package/es/DataBars/DeltaBar.js

@@ -10,20 +10,17 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { Flexbox, Tooltip } from '@lobehub/ui';
+import { cssVar, cx } from 'antd-style';
 import { forwardRef } from 'react';
 import { DeltaTypes } from "../types/charts";
 import { mapInputsToDeltaType } from "../utils";
-import { useStyles } from "./styles";
+import { styles } from "./styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var getDeltaType = function getDeltaType(value) {
   return value >= 0 ? DeltaTypes.Increase : DeltaTypes.Decrease;
 };
 var DeltaBar = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    styles = _useStyles.styles,
-    theme = _useStyles.theme;
   var value = props.value,
     bgColors = props.bgColors,
     color = props.color,
@@ -40,7 +37,7 @@ var DeltaBar = /*#__PURE__*/forwardRef(function (props, ref) {
     style = props.style,
     rest = _objectWithoutProperties(props, _excluded);
   var deltaType = mapInputsToDeltaType(getDeltaType(value), isIncreasePositive);
-  var colors = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, DeltaTypes.Increase, theme.colorSuccess), DeltaTypes.ModerateIncrease, theme.colorSuccess), DeltaTypes.Decrease, theme.colorError), DeltaTypes.ModerateDecrease, theme.colorError), DeltaTypes.Unchanged, theme.colorWarning);
+  var colors = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, DeltaTypes.Increase, cssVar.colorSuccess), DeltaTypes.ModerateIncrease, cssVar.colorSuccess), DeltaTypes.Decrease, cssVar.colorError), DeltaTypes.ModerateDecrease, cssVar.colorError), DeltaTypes.Unchanged, cssVar.colorWarning);
   return /*#__PURE__*/_jsx(Tooltip, {
     title: tooltip,
     children: /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
@@ -57,7 +54,7 @@ var DeltaBar = /*#__PURE__*/forwardRef(function (props, ref) {
       children: [/*#__PURE__*/_jsx(Flexbox, {
         height: '100%',
         style: {
-          background: bgColors || theme.colorFillTertiary,
+          background: bgColors || cssVar.colorFillTertiary,
           borderRadius: size / 2,
           inset: 0,
           opacity: bgColors ? 0.2 : 1,
@@ -88,7 +85,7 @@ var DeltaBar = /*#__PURE__*/forwardRef(function (props, ref) {
         className: styles.marker,
         flex: 'none',
         style: {
-          background: color || theme.colorPrimary,
+          background: color || cssVar.colorPrimary,
           height: size + 8,
           zIndex: 2
         }