@lobehub/charts 4.0.0 → 4.0.2

package/es/Legend/index.js

@@ -16,7 +16,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; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { Flexbox } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
+import { createStaticStyles, cx } from 'antd-style';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { useThemeColorRange } from "../hooks/useThemeColorRange";
@@ -24,7 +24,7 @@ import LegendItem from "./LegendItem";
 import ScrollButton from "./ScrollButton";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var useStyles = createStyles(function (_ref) {
+var styles = createStaticStyles(function (_ref) {
   var css = _ref.css;
   return {
     container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    overflow: hidden;\n  "]))),
@@ -33,9 +33,6 @@ var useStyles = createStyles(function (_ref) {
   };
 });
 var Legend = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    styles = _useStyles.styles;
   var themeColorRange = useThemeColorRange();
   var customCategories = props.customCategories,
     categories = props.categories,

package/es/LineChart/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 { CartesianGrid, Dot, Label, Legend, Line, LineChart as ReChartsLineChart, 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 LineChart = /*#__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,
@@ -263,7 +259,7 @@ var LineChart = /*#__PURE__*/forwardRef(function (props, ref) {
               payload: payload === null || payload === void 0 ? void 0 : payload.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
@@ -277,7 +273,7 @@ var LineChart = /*#__PURE__*/forwardRef(function (props, ref) {
             });
           } : undefined,
           cursor: {
-            stroke: theme.colorTextSecondary,
+            stroke: cssVar.colorTextSecondary,
             strokeWidth: 1
           },
           isAnimationActive: false,
@@ -311,7 +307,7 @@ var LineChart = /*#__PURE__*/forwardRef(function (props, ref) {
                 strokeWidth = props.strokeWidth,
                 dataKey = props.dataKey;
               return /*#__PURE__*/_jsx(Dot, {
-                className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                        fill: ", ";\n                      "])), (_categoryColors$get2 = categoryColors.get(dataKey)) !== null && _categoryColors$get2 !== void 0 ? _categoryColors$get2 : theme.colorPrimary)),
+                className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                        fill: ", ";\n                      "])), (_categoryColors$get2 = categoryColors.get(dataKey)) !== null && _categoryColors$get2 !== void 0 ? _categoryColors$get2 : cssVar.colorPrimary)),
                 cx: dotCx,
                 cy: dotCy,
                 fill: "",
@@ -326,7 +322,7 @@ var LineChart = /*#__PURE__*/forwardRef(function (props, ref) {
               });
             },
             animationDuration: animationDuration,
-            className: cx(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                  stroke: ", ";\n                "])), (_categoryColors$get3 = categoryColors.get(category)) !== null && _categoryColors$get3 !== void 0 ? _categoryColors$get3 : theme.colorPrimary)),
+            className: cx(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                  stroke: ", ";\n                "])), (_categoryColors$get3 = categoryColors.get(category)) !== null && _categoryColors$get3 !== void 0 ? _categoryColors$get3 : cssVar.colorPrimary)),
             connectNulls: connectNulls,
             dataKey: category,
             dot: function dot(props) {
@@ -341,7 +337,7 @@ var LineChart = /*#__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$get4;
                 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: "",

package/es/LineChart/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/LineChart/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/ScatterChart/ScatterChartTooltip.js

@@ -2,7 +2,7 @@ var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { Flexbox, Icon } from '@lobehub/ui';
 import { Typography } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
 import { Circle } from 'lucide-react';
 import React, { memo } from 'react';
 import { ChartTooltipFrame } from "../common/ChartTooltip/ChartTooltipFrame";
@@ -10,11 +10,10 @@ import { defaultValueFormatter } from "../utils";
 import ScatterChartTooltipRow from "./ScatterChartTooltipRow";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var useStyles = createStyles(function (_ref) {
-  var css = _ref.css,
-    token = _ref.token;
+var styles = createStaticStyles(function (_ref) {
+  var css = _ref.css;
   return {
-    header: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border-bottom: 1px solid ", ";\n    font-weight: 500;\n  "])), token.colorBorderSecondary)
+    header: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border-bottom: 1px solid ", ";\n    font-weight: 500;\n  "])), cssVar.colorBorderSecondary)
   };
 });
 var ScatterChartTooltip = /*#__PURE__*/memo(function (_ref2) {
@@ -27,11 +26,7 @@ var ScatterChartTooltip = /*#__PURE__*/memo(function (_ref2) {
     axis = _ref2.axis,
     category = _ref2.category,
     categoryColors = _ref2.categoryColors;
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    theme = _useStyles.theme,
-    styles = _useStyles.styles;
-  var color = category ? (_categoryColors$get = categoryColors.get(payload === null || payload === void 0 || (_payload$ = payload[0]) === null || _payload$ === void 0 ? void 0 : _payload$.payload[category])) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary : theme.colorPrimary;
+  var color = category ? (_categoryColors$get = categoryColors.get(payload === null || payload === void 0 || (_payload$ = payload[0]) === null || _payload$ === void 0 ? void 0 : _payload$.payload[category])) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : cssVar.colorPrimary : cssVar.colorPrimary;
   if (active && payload) {
     return /*#__PURE__*/_jsxs(ChartTooltipFrame, {
       children: [/*#__PURE__*/_jsxs(Flexbox, {

package/es/ScatterChart/ScatterChartTooltipRow.js

@@ -2,23 +2,20 @@ var _templateObject, _templateObject2;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { Flexbox } from '@lobehub/ui';
 import { Typography } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles, cssVar } from 'antd-style';
 import React, { memo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var useStyles = createStyles(function (_ref) {
-  var css = _ref.css,
-    token = _ref.token;
+var styles = createStaticStyles(function (_ref) {
+  var css = _ref.css;
   return {
     number: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-weight: 500;\n  "]))),
-    title: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), token.colorTextSecondary)
+    title: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), cssVar.colorTextSecondary)
   };
 });
 var ChartTooltipRow = /*#__PURE__*/memo(function (_ref2) {
   var value = _ref2.value,
     name = _ref2.name;
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles;
   return /*#__PURE__*/_jsxs(Flexbox, {
     align: 'center',
     gap: 32,

package/es/ScatterChart/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 { CartesianGrid, Label, Legend, ScatterChart as ReChartsScatterChart, ResponsiveContainer, Scatter, Tooltip, XAxis, YAxis, ZAxis } from 'recharts';
 import { renderShape } from "./renderShape";
@@ -31,14 +31,10 @@ import { defaultValueFormatter } from "../utils";
 import { getMaxLabelLength } from "../utils/getMaxLabelLength";
 import NoData from "../common/NoData";
 import ScatterChartTooltip from "./ScatterChartTooltip";
-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 ScatterChart = /*#__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,
@@ -276,7 +272,7 @@ var ScatterChart = /*#__PURE__*/forwardRef(function (props, ref) {
               payload: payload === null || payload === void 0 ? void 0 : payload.map(function (payloadItem) {
                 var _categoryColors$get;
                 return _objectSpread(_objectSpread({}, payloadItem), {}, {
-                  color: (_categoryColors$get = categoryColors.get(color)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary
+                  color: (_categoryColors$get = categoryColors.get(color)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : cssVar.colorPrimary
                 });
               }),
               valueFormatter: valueFormatter
@@ -296,7 +292,7 @@ var ScatterChart = /*#__PURE__*/forwardRef(function (props, ref) {
             });
           } : undefined,
           cursor: {
-            stroke: theme.colorTextSecondary,
+            stroke: cssVar.colorTextSecondary,
             strokeWidth: 1
           },
           isAnimationActive: false,
@@ -312,7 +308,7 @@ var ScatterChart = /*#__PURE__*/forwardRef(function (props, ref) {
           var _categoryColors$get2, _categoryColors$get3;
           return /*#__PURE__*/_jsx(Scatter, {
             animationDuration: animationDuration,
-            className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                      fill: ", ";\n                    "])), (_categoryColors$get2 = categoryColors.get(cat)) !== null && _categoryColors$get2 !== void 0 ? _categoryColors$get2 : theme.colorPrimary), showOpacity && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                        stroke: ", ";\n                      "])), (_categoryColors$get3 = categoryColors.get(cat)) !== null && _categoryColors$get3 !== void 0 ? _categoryColors$get3 : theme.colorPrimary)),
+            className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                      fill: ", ";\n                    "])), (_categoryColors$get2 = categoryColors.get(cat)) !== null && _categoryColors$get2 !== void 0 ? _categoryColors$get2 : cssVar.colorPrimary), showOpacity && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                        stroke: ", ";\n                      "])), (_categoryColors$get3 = categoryColors.get(cat)) !== null && _categoryColors$get3 !== void 0 ? _categoryColors$get3 : cssVar.colorPrimary)),
             data: category ? data.filter(function (d) {
               return d[category] === cat;
             }) : data,

package/es/ScatterChart/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/ScatterChart/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/SparkChart/SparkAreaChart.js

@@ -13,19 +13,15 @@ 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 } from 'react';
 import { Area, AreaChart as ReChartsAreaChart, ResponsiveContainer, XAxis, YAxis } from 'recharts';
-import { useStyles } from "../AreaChart/styles";
 import NoData from "../common/NoData";
 import { constructCategoryColors, getYAxisDomain } from "../common/utils";
 import { useThemeColorRange } from "../hooks/useThemeColorRange";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var SparkAreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    theme = _useStyles.theme;
   var themeColorRange = useThemeColorRange();
   var _props$data = props.data,
     data = _props$data === void 0 ? [] : _props$data,
@@ -98,7 +94,7 @@ var SparkAreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
           var _categoryColors$get, _categoryColors$get2;
           return /*#__PURE__*/_jsx("defs", {
             children: showGradient ? /*#__PURE__*/_jsxs("linearGradient", {
-              className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                        color: ", ";\n                      "])), (_categoryColors$get = categoryColors.get(category)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary)),
+              className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                        color: ", ";\n                      "])), (_categoryColors$get = categoryColors.get(category)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : cssVar.colorPrimary)),
               id: categoryColors.get(category),
               x1: "0",
               x2: "0",
@@ -114,7 +110,7 @@ var SparkAreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
                 stopOpacity: 0
               })]
             }) : /*#__PURE__*/_jsx("linearGradient", {
-              className: cx(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                        color: ", ";\n                      "])), (_categoryColors$get2 = categoryColors.get(category)) !== null && _categoryColors$get2 !== void 0 ? _categoryColors$get2 : theme.colorPrimary)),
+              className: cx(css(_templateObject2 || (_templateObject2 = _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",
@@ -130,7 +126,7 @@ var SparkAreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
           var _categoryColors$get3;
           return /*#__PURE__*/_jsx(Area, {
             animationDuration: animationDuration,
-            className: cx(css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                  stroke: ", ";\n                "])), (_categoryColors$get3 = categoryColors.get(category)) !== null && _categoryColors$get3 !== void 0 ? _categoryColors$get3 : theme.colorPrimary)),
+            className: cx(css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                  stroke: ", ";\n                "])), (_categoryColors$get3 = categoryColors.get(category)) !== null && _categoryColors$get3 !== void 0 ? _categoryColors$get3 : cssVar.colorPrimary)),
             connectNulls: connectNulls,
             dataKey: category,
             dot: false,

package/es/SparkChart/SparkBarChart.js

@@ -13,19 +13,15 @@ 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 } from 'react';
 import { Bar, BarChart as ReChartsBarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts';
-import { useStyles } from "../BarChart/styles";
 import NoData from "../common/NoData";
 import { constructCategoryColors, getYAxisDomain } from "../common/utils";
 import { useThemeColorRange } from "../hooks/useThemeColorRange";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var SparkBarChart = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    theme = _useStyles.theme;
   var themeColorRange = useThemeColorRange();
   var _props$data = props.data,
     data = _props$data === void 0 ? [] : _props$data,
@@ -95,7 +91,7 @@ var SparkBarChart = /*#__PURE__*/forwardRef(function (props, ref) {
           var _categoryColors$get;
           return /*#__PURE__*/_jsx(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,

package/es/SparkChart/SparkLineChart.js

@@ -13,19 +13,15 @@ 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 } from 'react';
 import { Line, LineChart as ReChartsLineChart, ResponsiveContainer, XAxis, YAxis } from 'recharts';
-import { useStyles } from "../LineChart/styles";
 import NoData from "../common/NoData";
 import { constructCategoryColors, getYAxisDomain } from "../common/utils";
 import { useThemeColorRange } from "../hooks/useThemeColorRange";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var SparkLineChart = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    theme = _useStyles.theme;
   var themeColorRange = useThemeColorRange();
   var _props$data = props.data,
     data = _props$data === void 0 ? [] : _props$data,
@@ -94,7 +90,7 @@ var SparkLineChart = /*#__PURE__*/forwardRef(function (props, ref) {
           var _categoryColors$get;
           return /*#__PURE__*/_jsx(Line, {
             animationDuration: animationDuration,
-            className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                  stroke: ", ";\n                "])), (_categoryColors$get = categoryColors.get(category)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary)),
+            className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                  stroke: ", ";\n                "])), (_categoryColors$get = categoryColors.get(category)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : cssVar.colorPrimary)),
             connectNulls: connectNulls,
             dataKey: category,
             dot: false,

package/es/Tracker/TrackerBlock.js

@@ -12,14 +12,13 @@ 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; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { Flexbox, Tooltip } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
+import { createStaticStyles, cssVar } from 'antd-style';
 import { forwardRef, useMemo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-var useStyles = createStyles(function (_ref) {
-  var css = _ref.css,
-    token = _ref.token;
+var styles = createStaticStyles(function (_ref) {
+  var css = _ref.css;
   return {
-    block: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background: ", ";\n\n    &:first-child {\n      border-top-left-radius: ", "px;\n      border-bottom-left-radius: ", "px;\n    }\n\n    &:last-child {\n      border-top-right-radius: ", "px;\n      border-bottom-right-radius: ", "px;\n    }\n\n    &:hover {\n      opacity: 0.5;\n    }\n  "])), token.colorFill, token.borderRadiusSM, token.borderRadiusSM, token.borderRadiusSM, token.borderRadiusSM)
+    block: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background: ", ";\n\n    &:first-child {\n      border-top-left-radius: ", ";\n      border-bottom-left-radius: ", ";\n    }\n\n    &:last-child {\n      border-top-right-radius: ", ";\n      border-bottom-right-radius: ", ";\n    }\n\n    &:hover {\n      opacity: 0.5;\n    }\n  "])), cssVar.colorFill, cssVar.borderRadiusSM, cssVar.borderRadiusSM, cssVar.borderRadiusSM, cssVar.borderRadiusSM)
   };
 });
 var TrackerBlock = /*#__PURE__*/forwardRef(function (_ref2, ref) {
@@ -28,22 +27,19 @@ var TrackerBlock = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     width = _ref2.width,
     style = _ref2.style,
     rest = _objectWithoutProperties(_ref2, _excluded);
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles,
-    theme = _useStyles.theme;
   var blockColor = useMemo(function () {
     switch (color) {
       case 'success':
         {
-          return theme.colorSuccess;
+          return cssVar.colorSuccess;
         }
       case 'warning':
         {
-          return theme.colorWarning;
+          return cssVar.colorWarning;
         }
       case 'error':
         {
-          return theme.colorError;
+          return cssVar.colorError;
         }
       default:
         {

package/es/Tracker/index.js

@@ -10,9 +10,10 @@ 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 } from '@lobehub/ui';
+import { cx } from 'antd-style';
 import { forwardRef } from 'react';
 import TrackerBlock from "./TrackerBlock";
-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 Tracker = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -34,9 +35,6 @@ var Tracker = /*#__PURE__*/forwardRef(function (props, ref) {
     rightLabel = props.rightLabel,
     style = props.style,
     rest = _objectWithoutProperties(props, _excluded);
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles,
-    cx = _useStyles.cx;
   var content = data.map(function (item, idx) {
     var _item$key;
     return /*#__PURE__*/_jsx(TrackerBlock, {

package/es/Tracker/styles.d.ts

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

package/es/Tracker/styles.js

@@ -1,12 +1,12 @@
 var _templateObject, _templateObject2, _templateObject3;
 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  "]))),
-    label: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    line-height: 16px;\n    color: ", ";\n  "])), token.colorTextDescription),
-    strongLabel: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 16px;\n    fill: ", ";\n  "])), token.colorTextSecondary)
+    label: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    line-height: 16px;\n    color: ", ";\n  "])), cssVar.colorTextDescription),
+    strongLabel: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 16px;\n    fill: ", ";\n  "])), cssVar.colorTextSecondary)
   };
 });

package/es/common/ChartTooltip/ChartTooltipFrame.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
-    container: import("antd-style").SerializedStyles;
-}>;
+export declare const styles: {
+    container: string;
+};
 export declare const ChartTooltipFrame: import("react").NamedExoticComponent<import("@lobehub/ui").FlexBasicProps>;
 export default ChartTooltipFrame;

package/es/common/ChartTooltip/ChartTooltipFrame.js

@@ -10,21 +10,19 @@ 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; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { Flexbox } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { memo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-export var useStyles = createStyles(function (_ref) {
+export var styles = createStaticStyles(function (_ref) {
   var css = _ref.css,
-    token = _ref.token;
+    cssVar = _ref.cssVar;
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: hidden;\n\n    border: 1px solid ", ";\n    border-radius: ", "px;\n\n    background: ", ";\n    box-shadow: ", ";\n  "])), token.colorBorderSecondary, token.borderRadiusLG, token.colorBgElevated, token.boxShadow)
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: hidden;\n\n    border: 1px solid ", ";\n    border-radius: ", ";\n\n    background: ", ";\n    box-shadow: ", ";\n  "])), cssVar.colorBorderSecondary, cssVar.borderRadiusLG, cssVar.colorBgElevated, cssVar.boxShadow)
   };
 });
 export var ChartTooltipFrame = /*#__PURE__*/memo(function (_ref2) {
   var children = _ref2.children,
     rest = _objectWithoutProperties(_ref2, _excluded);
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles;
   return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
     className: styles.container
   }, rest), {}, {

package/es/common/ChartTooltip/ChartTooltipRow.js

@@ -2,25 +2,23 @@ var _templateObject, _templateObject2;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { Flexbox, Icon } from '@lobehub/ui';
 import { Typography } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { Circle } from 'lucide-react';
 import { memo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var useStyles = createStyles(function (_ref) {
+var styles = createStaticStyles(function (_ref) {
   var css = _ref.css,
-    token = _ref.token;
+    cssVar = _ref.cssVar;
   return {
     number: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-weight: 500;\n  "]))),
-    title: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), token.colorTextSecondary)
+    title: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), cssVar.colorTextSecondary)
   };
 });
 var ChartTooltipRow = /*#__PURE__*/memo(function (_ref2) {
   var value = _ref2.value,
     name = _ref2.name,
     color = _ref2.color;
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles;
   return /*#__PURE__*/_jsxs(Flexbox, {
     align: 'center',
     gap: 32,

package/es/common/ChartTooltip/index.js

@@ -2,16 +2,16 @@ var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { Flexbox } from '@lobehub/ui';
 import { Typography } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
 import ChartTooltipFrame from "./ChartTooltipFrame";
 import ChartTooltipRow from "./ChartTooltipRow";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var useStyles = createStyles(function (_ref) {
+var styles = createStaticStyles(function (_ref) {
   var css = _ref.css,
-    token = _ref.token;
+    cssVar = _ref.cssVar;
   return {
-    header: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border-bottom: 1px solid ", ";\n    font-weight: 500;\n  "])), token.colorBorderSecondary)
+    header: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border-bottom: 1px solid ", ";\n    font-weight: 500;\n  "])), cssVar.colorBorderSecondary)
   };
 });
 var ChartTooltip = function ChartTooltip(_ref2) {
@@ -22,10 +22,6 @@ var ChartTooltip = function ChartTooltip(_ref2) {
     valueFormatter = _ref2.valueFormatter,
     customCategories = _ref2.customCategories,
     footer = _ref2.footer;
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    theme = _useStyles.theme,
-    styles = _useStyles.styles;
   if (active && payload) {
     var filteredPayload = payload.filter(function (item) {
       return item.type !== 'none';
@@ -55,7 +51,7 @@ var ChartTooltip = function ChartTooltip(_ref2) {
           var value = _ref3.value,
             name = _ref3.name;
           return /*#__PURE__*/_jsx(ChartTooltipRow, {
-            color: (_categoryColors$get = categoryColors.get(name)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary,
+            color: (_categoryColors$get = categoryColors.get(name)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : cssVar.colorPrimary,
             name: (customCategories === null || customCategories === void 0 ? void 0 : customCategories[name]) || name,
             value: valueFormatter(value)
           }, "id-".concat(idx));