@pisell/private-materials 6.3.92 → 6.3.94

package/lib/plus/skuOptionsSelection/types.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { LayoutConfig } from '../../pro/Selector/types';
 /**
  * SKU Card 文本样式配置
  */
@@ -29,6 +30,13 @@ export interface SkuCardImageConfig {
     /** 边框 */
     border?: string;
 }
+/**
+ * SKU Card 禁用文本配置
+ */
+export interface SkuCardDisabledTextConfig extends Omit<SkuCardTextConfig, 'lineClamp'> {
+    /** 文本（可能是多语言） */
+    text?: string;
+}
 /**
  * SKU Card 配置
  */
@@ -46,6 +54,8 @@ export interface SkuCardConfig {
      * - 默认不展示，避免影响现有业务 UI
      */
     variantPriceVisible?: boolean;
+    /** 禁用文本配置 */
+    disabledText?: SkuCardDisabledTextConfig;
 }
 /**
  * SKU store状态类型
@@ -72,6 +82,8 @@ export interface SkuSelectionState {
     customConfig?: {
         /** 弹窗宽度 */
         modalWidth?: number | string;
+        /** 选项布局 */
+        selectorLayout?: LayoutConfig | null;
     };
 }
 /** SKU Card 默认配置 */
@@ -98,6 +110,8 @@ export interface IProps {
     customConfig?: {
         /** 弹窗宽度 */
         modalWidth?: number | string;
+        /** 选项布局 */
+        selectorLayout?: LayoutConfig | null;
     };
 }
 export interface DataSource {

package/lib/plus/skuOptionsSelection/utils/transformBundleGroup.js

@@ -37,15 +37,21 @@ var import_OptionsCard = __toESM(require("../components/OptionsCard"));
 var import_NormalCard = __toESM(require("../components/NormalCard"));
 var import_TitleExtra = __toESM(require("../components/TitleExtra"));
 var import_checkSkuStatus = require("./checkSkuStatus");
+var import_store = __toESM(require("../store/store"));
 var transformBundleGroup = (bundleGroup) => {
+  var _a;
   if (!Array.isArray(bundleGroup)) return [];
+  const selectorLayout = ((_a = import_store.default.getState().customConfig) == null ? void 0 : _a.selectorLayout) || null;
   const formattedGroup = bundleGroup.map((item) => {
-    var _a;
-    const selectorOptionsDataSource = (_a = item == null ? void 0 : item.bundle_item) == null ? void 0 : _a.map((bundleItem) => {
+    var _a2;
+    const selectorOptionsDataSource = (_a2 = item == null ? void 0 : item.bundle_item) == null ? void 0 : _a2.map((bundleItem) => {
       const { canSell, hasStock } = (0, import_checkSkuStatus.checkSkuStockCanSell)(bundleItem);
       const disabled = (0, import_checkSkuStatus.checkSkuDisabled)(bundleItem, canSell);
       return {
-        _original: { ...bundleItem || {}, _bundle_product_id: bundleItem == null ? void 0 : bundleItem.bundle_product_id },
+        _original: {
+          ...bundleItem || {},
+          _bundle_product_id: bundleItem == null ? void 0 : bundleItem.bundle_product_id
+        },
         // 渲染需要的数据源
         id: bundleItem == null ? void 0 : bundleItem.id,
         title: (bundleItem == null ? void 0 : bundleItem.title) || "",
@@ -56,10 +62,7 @@ var transformBundleGroup = (bundleGroup) => {
           max: bundleItem == null ? void 0 : bundleItem.max_quantity,
           autoValidate: true
         },
-        _extra: {
-          canSell,
-          hasStock
-        }
+        _extra: { canSell, hasStock, disabled }
       };
     });
     const selectorDataSource = {
@@ -85,9 +88,12 @@ var transformBundleGroup = (bundleGroup) => {
         showInput: true
       }
     };
+    if (!!selectorLayout) {
+      selectorDataSource.layout = selectorLayout;
+    }
     selectorDataSource.renderItem = (itemProps) => {
-      var _a2, _b, _c;
-      if (!!((_c = (_b = (_a2 = itemProps == null ? void 0 : itemProps.dataSource) == null ? void 0 : _a2._original) == null ? void 0 : _b.option_group) == null ? void 0 : _c.length)) {
+      var _a3, _b, _c;
+      if (!!((_c = (_b = (_a3 = itemProps == null ? void 0 : itemProps.dataSource) == null ? void 0 : _a3._original) == null ? void 0 : _b.option_group) == null ? void 0 : _c.length)) {
         return /* @__PURE__ */ import_react.default.createElement(
           import_OptionsCard.default,
           {

package/lib/plus/skuOptionsSelection/utils/transformOptionGroup.js

@@ -36,11 +36,14 @@ var import_react = __toESM(require("react"));
 var import_NormalCard = __toESM(require("../components/NormalCard"));
 var import_TitleExtra = __toESM(require("../components/TitleExtra"));
 var import_checkSkuStatus = require("./checkSkuStatus");
+var import_store = __toESM(require("../store/store"));
 var transformOptionGroup = (optionGroup) => {
+  var _a;
   if (!Array.isArray(optionGroup)) return [];
+  const selectorLayout = ((_a = import_store.default.getState().customConfig) == null ? void 0 : _a.selectorLayout) || null;
   const formattedGroup = optionGroup.map((item) => {
-    var _a;
-    const selectorOptionsDataSource = (_a = item == null ? void 0 : item.option_item) == null ? void 0 : _a.map(
+    var _a2;
+    const selectorOptionsDataSource = (_a2 = item == null ? void 0 : item.option_item) == null ? void 0 : _a2.map(
       (optionItem) => {
         const { canSell, hasStock } = (0, import_checkSkuStatus.checkSkuStockCanSell)(optionItem);
         const disabled = (0, import_checkSkuStatus.checkSkuDisabled)(optionItem, canSell);
@@ -58,10 +61,7 @@ var transformOptionGroup = (optionGroup) => {
             max: optionItem == null ? void 0 : optionItem.max_quantity,
             autoValidate: true
           },
-          _extra: {
-            canSell,
-            hasStock
-          }
+          _extra: { canSell, hasStock, disabled }
         };
       }
     );
@@ -94,6 +94,9 @@ var transformOptionGroup = (optionGroup) => {
         showInput: true
       }
     };
+    if (!!selectorLayout) {
+      selectorDataSource.layout = selectorLayout;
+    }
     selectorDataSource.renderItem = (itemProps) => {
       return /* @__PURE__ */ import_react.default.createElement(
         import_NormalCard.default,

package/lib/plus/skuOptionsSelection/utils/transformVariantGroup.js

@@ -37,9 +37,10 @@ var import_store = __toESM(require("../store/store"));
 var import_VariantCard = __toESM(require("../components/VariantCard"));
 var import_checkSkuStatus = require("./checkSkuStatus");
 var transformVariantGroup = (variantGroup) => {
-  var _a;
+  var _a, _b;
   if (!Array.isArray(variantGroup)) return [];
   const variantProducts = ((_a = import_store.default.getState().dataSource) == null ? void 0 : _a.variant) || [];
+  const selectorLayout = ((_b = import_store.default.getState().customConfig) == null ? void 0 : _b.selectorLayout) || null;
   const formattedGroup = variantGroup.map((item) => {
     var _a2;
     const selectorOptionsDataSource = (_a2 = item == null ? void 0 : item.variant_item) == null ? void 0 : _a2.map(
@@ -61,10 +62,7 @@ var transformVariantGroup = (variantGroup) => {
           ruleConfig: {
             autoValidate: true
           },
-          _extra: {
-            canSell,
-            hasStock
-          }
+          _extra: { canSell, hasStock, disabled }
         };
       }
     );
@@ -95,13 +93,16 @@ var transformVariantGroup = (variantGroup) => {
         showInput: true
       }
     };
+    if (!!selectorLayout) {
+      selectorDataSource.layout = selectorLayout;
+    }
     selectorDataSource.renderItem = (itemProps) => {
-      var _a3, _b, _c;
+      var _a3, _b2, _c;
       const { canSell, hasStock } = (0, import_checkSkuStatus.checkVariantStockByValue)(
         (_a3 = itemProps == null ? void 0 : itemProps.dataSource) == null ? void 0 : _a3._original
       );
       const price = getVariantItemFixedPriceByValue({
-        variantItem: (_b = itemProps == null ? void 0 : itemProps.dataSource) == null ? void 0 : _b._original,
+        variantItem: (_b2 = itemProps == null ? void 0 : itemProps.dataSource) == null ? void 0 : _b2._original,
         variantProducts
       });
       const _dataSource = {

package/lib/pro/Cards/components/SKUCard/index.d.ts

@@ -1,60 +1,6 @@
 import React from 'react';
+import { SKUCardProps } from './types';
+import './index.less';
 import './index.less';
-/**
- * SKU Card 文本样式配置
- */
-interface SkuCardTextConfig {
-    /** 是否显示 */
-    visible?: boolean;
-    /** 字体大小 */
-    fontSize?: number;
-    /** 颜色 */
-    color?: string;
-    /** 字体粗细 */
-    fontWeight?: 'normal' | 'bold' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
-    /** 展示行数 */
-    lineClamp?: number;
-}
-/**
- * SKU Card 图片配置
- */
-interface SkuCardImageConfig {
-    /** 是否显示 */
-    visible?: boolean;
-    /** 宽度 */
-    width?: number;
-    /** 高度 */
-    height?: number;
-    /** 圆角 */
-    borderRadius?: number | string;
-    /** 边框 */
-    border?: string;
-}
-/**
- * SKU Card 配置
- */
-interface SkuCardConfig {
-    /** 主标题配置 */
-    title?: SkuCardTextConfig;
-    /** 副标题配置 */
-    subTitle?: SkuCardTextConfig;
-    /** 价格配置 */
-    price?: Omit<SkuCardTextConfig, 'lineClamp'>;
-    /** 图片配置 */
-    image?: SkuCardImageConfig;
-}
-interface SKUCardProps {
-    cover?: string;
-    title?: string;
-    subtitle?: string;
-    price?: string;
-    arrow?: boolean;
-    selected?: boolean;
-    disabled?: boolean;
-    onClick?: () => void;
-    renderRight?: React.ReactNode | (() => React.ReactNode);
-    /** SKU Card 配置 */
-    skuCardConfig?: SkuCardConfig;
-}
 declare const SKUCard: React.FC<SKUCardProps>;
 export default SKUCard;

package/lib/pro/Cards/components/SKUCard/index.js

@@ -36,7 +36,11 @@ var import_react = __toESM(require("react"));
 var import_materials = require("@pisell/materials");
 var import_utils = require("@pisell/utils");
 var import_classnames = __toESM(require("classnames"));
+var import_useEngineContext = __toESM(require("../../../../hooks/useEngineContext"));
+var import_locales = __toESM(require("./locales"));
+var import_useThemeTokens = __toESM(require("../../../../hooks/useThemeTokens"));
 var import_index = require("./index.less");
+var import_index2 = require("./index.less");
 var SKUCard = ({
   cover,
   title,
@@ -47,9 +51,15 @@ var SKUCard = ({
   disabled,
   onClick,
   renderRight,
-  skuCardConfig
+  skuCardConfig,
+  skuDisabled,
+  theme
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const { colorPrimary, colorPrimaryBg } = (0, import_useThemeTokens.default)(theme);
+  const context = (0, import_useEngineContext.default)();
+  const language = ((_c = (_b = (_a = context == null ? void 0 : context.appHelper) == null ? void 0 : _a.utils) == null ? void 0 : _b.storage) == null ? void 0 : _c.get("umi_locale")) || "en";
+  import_utils.locales.init(import_locales.default, language);
   const titleStyle = (0, import_react.useMemo)(() => {
     const config = skuCardConfig == null ? void 0 : skuCardConfig.title;
     const style = {};
@@ -126,10 +136,25 @@ var SKUCard = ({
     }
     return style;
   }, [skuCardConfig == null ? void 0 : skuCardConfig.image]);
-  const showTitle = ((_a = skuCardConfig == null ? void 0 : skuCardConfig.title) == null ? void 0 : _a.visible) !== false;
-  const showSubTitle = ((_b = skuCardConfig == null ? void 0 : skuCardConfig.subTitle) == null ? void 0 : _b.visible) !== false;
-  const showPrice = ((_c = skuCardConfig == null ? void 0 : skuCardConfig.price) == null ? void 0 : _c.visible) !== false;
-  const showImage = ((_d = skuCardConfig == null ? void 0 : skuCardConfig.image) == null ? void 0 : _d.visible) !== false;
+  const disabledTextStyle = (0, import_react.useMemo)(() => {
+    const config = skuCardConfig == null ? void 0 : skuCardConfig.disabledText;
+    const style = {};
+    if (config == null ? void 0 : config.color) {
+      style.color = config.color;
+    }
+    if (config == null ? void 0 : config.fontSize) {
+      style.fontSize = config.fontSize;
+    }
+    if (config == null ? void 0 : config.fontWeight) {
+      style.fontWeight = config.fontWeight;
+    }
+    return style;
+  }, [skuCardConfig == null ? void 0 : skuCardConfig.disabledText]);
+  const showTitle = ((_d = skuCardConfig == null ? void 0 : skuCardConfig.title) == null ? void 0 : _d.visible) !== false;
+  const showSubTitle = ((_e = skuCardConfig == null ? void 0 : skuCardConfig.subTitle) == null ? void 0 : _e.visible) !== false;
+  const showPrice = ((_f = skuCardConfig == null ? void 0 : skuCardConfig.price) == null ? void 0 : _f.visible) !== false;
+  const showImage = ((_g = skuCardConfig == null ? void 0 : skuCardConfig.image) == null ? void 0 : _g.visible) !== false;
+  const showDisabledText = ((_h = skuCardConfig == null ? void 0 : skuCardConfig.disabledText) == null ? void 0 : _h.visible) !== false;
   const titleText = (0, import_react.useMemo)(() => {
     if (!title) return "";
     if (title.length < 2) {
@@ -137,6 +162,7 @@ var SKUCard = ({
     }
     return title.substring(0, 2).toUpperCase();
   }, [title]);
+  console.log("disabledTextStyle >>>>>>>>>", disabledTextStyle);
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
@@ -151,9 +177,19 @@ var SKUCard = ({
         onClick == null ? void 0 : onClick();
       },
       style: {
-        cursor: disabled ? "not-allowed" : "pointer"
+        cursor: disabled ? "not-allowed" : "pointer",
+        ["--color-primary"]: colorPrimary,
+        ["--color-primary-bg"]: colorPrimaryBg
       }
     },
+    !!skuDisabled && !!showDisabledText && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-pro-cards-sku-card-disabled-mask" }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "pisell-pro-cards-sku-card-disabled-text",
+        style: disabledTextStyle
+      },
+      ((_i = skuCardConfig == null ? void 0 : skuCardConfig.disabledText) == null ? void 0 : _i.text) || import_utils.locales.getText("pisell2.pro.cards.skuCard.disabledText")
+    )),
     showImage && /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
@@ -177,16 +213,25 @@ var SKUCard = ({
       },
       subtitle
     ), showPrice && price && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-pro-cards-sku-card-price", style: priceStyle }, price)),
-    arrow || renderRight ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-pro-cards-sku-card-right" }, renderRight ? typeof renderRight === "function" ? renderRight() : renderRight : /* @__PURE__ */ import_react.default.createElement(
-      import_materials.Iconfont,
+    arrow || renderRight ? /* @__PURE__ */ import_react.default.createElement(
+      "div",
       {
-        type: "pisell2-chevron-right",
-        style: {
-          fontSize: "28px",
-          color: disabled ? "#f2f2f2" : "#475467"
+        className: "pisell-pro-cards-sku-card-right",
+        style: renderRight ? {} : {
+          alignItems: "center"
         }
-      }
-    )) : null
+      },
+      renderRight ? typeof renderRight === "function" ? renderRight() : renderRight : /* @__PURE__ */ import_react.default.createElement(
+        import_materials.Iconfont,
+        {
+          type: "pisell2-chevron-right",
+          style: {
+            fontSize: "28px",
+            color: disabled ? "#f2f2f2" : "#475467"
+          }
+        }
+      )
+    ) : null
   );
 };
 var SKUCard_default = SKUCard;

package/lib/pro/Cards/components/SKUCard/index.less

@@ -1,4 +1,5 @@
 .pisell-pro-cards-sku-card {
+  position: relative;
   display: flex;
   padding: 8px;
   align-items: center;
@@ -9,6 +10,26 @@
   cursor: pointer;
   width: 100%;
 
+  &-disabled-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.7);
+    border-radius: 8px;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  &-disabled-text {
+    font-size: 16px;
+    font-weight: 700;
+    color: #000000;
+    transform: rotate(45deg);
+  }
+
   &-with-image {
     min-height: 80px;
   }
@@ -18,8 +39,8 @@
   }
 
   &-active {
-    border: 1px solid #7f56d9;
-    background: #fcfaff;
+    border: 1px solid var(--color-primary, #5d3f9f);
+    background: var(--color-primary-bg, #fcfaff);
   }
 
   &-disabled {

package/lib/pro/Cards/components/SKUCard/locales.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+    en: {
+        'pisell2.pro.cards.skuCard.disabledText': string;
+    };
+    'zh-CN': {
+        'pisell2.pro.cards.skuCard.disabledText': string;
+    };
+    'zh-HK': {
+        'pisell2.pro.cards.skuCard.disabledText': string;
+    };
+};
+export default _default;

package/lib/pro/Cards/components/SKUCard/locales.js

@@ -0,0 +1,35 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/pro/Cards/components/SKUCard/locales.ts
+var locales_exports = {};
+__export(locales_exports, {
+  default: () => locales_default
+});
+module.exports = __toCommonJS(locales_exports);
+var locales_default = {
+  en: {
+    "pisell2.pro.cards.skuCard.disabledText": "Sold out"
+  },
+  "zh-CN": {
+    "pisell2.pro.cards.skuCard.disabledText": "已售罄"
+  },
+  "zh-HK": {
+    "pisell2.pro.cards.skuCard.disabledText": "已售罄"
+  }
+};

package/lib/pro/Cards/components/SKUCard/types.d.ts

@@ -0,0 +1,73 @@
+/// <reference types="react" />
+/**
+ * SKU Card 文本样式配置
+ */
+export interface SkuCardTextConfig {
+    /** 是否显示 */
+    visible?: boolean;
+    /** 字体大小 */
+    fontSize?: number;
+    /** 颜色 */
+    color?: string;
+    /** 字体粗细 */
+    fontWeight?: 'normal' | 'bold' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+    /** 展示行数 */
+    lineClamp?: number;
+}
+/**
+ * SKU Card 图片配置
+ */
+export interface SkuCardImageConfig {
+    /** 是否显示 */
+    visible?: boolean;
+    /** 宽度 */
+    width?: number;
+    /** 高度 */
+    height?: number;
+    /** 圆角 */
+    borderRadius?: number | string;
+    /** 边框 */
+    border?: string;
+}
+/**
+ * SKU Card disabled文本配置
+ */
+export interface SkuCardDisabledTextConfig extends Omit<SkuCardTextConfig, 'lineClamp'> {
+    /** 文本 */
+    text?: string;
+}
+/**
+ * SKU Card 配置
+ */
+export interface SkuCardConfig {
+    /** 主标题配置 */
+    title?: SkuCardTextConfig;
+    /** 副标题配置 */
+    subTitle?: SkuCardTextConfig;
+    /** 价格配置 */
+    price?: Omit<SkuCardTextConfig, 'lineClamp'>;
+    /** 图片配置 */
+    image?: SkuCardImageConfig;
+    /** disabled文本展示 */
+    disabledText?: SkuCardDisabledTextConfig;
+}
+export interface SKUCardProps {
+    cover?: string;
+    title?: string;
+    subtitle?: string;
+    price?: string;
+    arrow?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    renderRight?: React.ReactNode | (() => React.ReactNode);
+    /** SKU Card 配置 */
+    skuCardConfig?: SkuCardConfig;
+    /** SKU 是否禁用 */
+    skuDisabled?: boolean;
+    theme?: {
+        token: {
+            colorPrimary: string;
+        };
+    };
+}

package/lib/pro/Cards/components/SKUCard/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/pro/Cards/components/SKUCard/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/pro/NumericStepper/index.d.ts

@@ -30,6 +30,11 @@ export interface NumericStepperProps {
     onChange?: (value: number) => void;
     /** 自定义类名 */
     className?: string;
+    theme?: {
+        token?: {
+            colorPrimary?: string;
+        };
+    };
     /** 自定义样式 */
     styles?: {
         container?: React.CSSProperties;

package/lib/pro/NumericStepper/index.js

@@ -37,6 +37,7 @@ var import_react = require("react");
 var import_classnames = __toESM(require("classnames"));
 var import_utils = require("@pisell/utils");
 var import_keyboards = require("../keyboards");
+var import_useThemeTokens = __toESM(require("../../hooks/useThemeTokens"));
 var import_index = require("./index.less");
 var NumericStepper = ({
   value,
@@ -55,13 +56,15 @@ var NumericStepper = ({
   horizontalPadding = 0,
   variant = "separated",
   enableInput = true,
-  displayMaxWidth
+  displayMaxWidth,
+  theme
 }) => {
   const [open, setOpen] = (0, import_react.useState)(false);
   const [internalValue, setInternalValue] = (0, import_react.useState)(
     value !== void 0 ? value : defaultValue
   );
   const _isMobile = (0, import_react.useMemo)(() => (0, import_utils.isMobile)(), [import_utils.isMobile]);
+  const { colorPrimary } = (0, import_useThemeTokens.default)(theme);
   const [tempValue, setTempValue] = (0, import_react.useState)("");
   const currentValue = value !== void 0 ? value : internalValue;
   (0, import_react.useEffect)(() => {
@@ -192,7 +195,9 @@ var NumericStepper = ({
     if (isPlusOnly) {
       return null;
     }
-    const displayWrapperStyle = variant === "capsule" && displayMaxWidth ? { maxWidth: typeof displayMaxWidth === "number" ? `${displayMaxWidth}px` : displayMaxWidth } : {};
+    const displayWrapperStyle = variant === "capsule" && displayMaxWidth ? {
+      maxWidth: typeof displayMaxWidth === "number" ? `${displayMaxWidth}px` : displayMaxWidth
+    } : {};
     const displayElement = /* @__PURE__ */ React.createElement(
       "span",
       {
@@ -295,7 +300,10 @@ var NumericStepper = ({
     "div",
     {
       className: stepperClasses,
-      style: styles == null ? void 0 : styles.container,
+      style: {
+        ...(styles == null ? void 0 : styles.container) || {},
+        ["--color-primary"]: colorPrimary
+      },
       onClick: (e) => e.stopPropagation()
     },
     _minus,

package/lib/pro/NumericStepper/index.less

@@ -1,7 +1,5 @@
 // ========== 变量定义 ==========
-@primary-color: #7f56d9;
-@primary-hover: #6b46c1;
-@primary-active: #553c9a;
+@primary-color: var(--color-primary, #5d3f9f);
 
 @text-color: #101828;
 @text-secondary: #344054;
@@ -77,13 +75,7 @@
     align-items: center;
     display: flex;
     height: 100%;
-
-    &:hover .numeric-stepper-button:not(.numeric-stepper-button-disabled) {
-      background-color: @primary-hover;
-    }
-
     &:active .numeric-stepper-button:not(.numeric-stepper-button-disabled) {
-      background-color: @primary-active;
       transform: scale(0.95);
     }