@digitalc/dxp-ui 0.0.4 → 0.0.5-alpha-gomo.1

package/lib/components/Navigation/index.js

@@ -0,0 +1,174 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Navigation/index.tsx
+var Navigation_exports = {};
+__export(Navigation_exports, {
+  default: () => Navigation_default
+});
+module.exports = __toCommonJS(Navigation_exports);
+var import_react = __toESM(require("react"));
+var import_designTokens = __toESM(require("./designTokens"));
+var import_cssinjs = require("@ant-design/cssinjs");
+var import_lodash = require("lodash");
+var import_theme = require("../../utils/theme");
+var import__ = require("../index");
+var import_constants = require("../../constants");
+var import_style = require("./style/index.less");
+var Navigation = (_a) => {
+  var _b = _a, {
+    hideBorder,
+    className,
+    rightIcons,
+    rightLink,
+    title,
+    goBack,
+    isInverse,
+    titleIconBadge,
+    imgBackground,
+    noRight = false,
+    leftIconName,
+    leftIconSize
+  } = _b, restProps = __objRest(_b, [
+    "hideBorder",
+    "className",
+    "rightIcons",
+    "rightLink",
+    "title",
+    "goBack",
+    "isInverse",
+    "titleIconBadge",
+    "imgBackground",
+    "noRight",
+    "leftIconName",
+    "leftIconSize"
+  ]);
+  var _a2;
+  const {
+    spacingTopNavigationPaddingHorizontal,
+    spacingTopNavigationPaddingBottom,
+    colorTopNavigationBorderBottom,
+    spacingTopNavigationTextLinkPaddingRight,
+    colorTopNavigationBackgroundInverse,
+    colorTopNavigationBackground,
+    colorTopNavigationTitleStandard,
+    colorTopNavigationTitleInverse,
+    colorTopNavigationGradient
+  } = import_designTokens.default;
+  console.log("designTokens", import_designTokens.default);
+  const useCustomButtonStyle = () => {
+    const hashId = (0, import_cssinjs.useStyleRegister)({
+      theme: import_theme.theme,
+      token: {},
+      path: [`${import_constants.cssClasses.PREFIX}-header`]
+    }, () => `
+      .${import_constants.cssClasses.PREFIX}-header {
+        padding-left: ${spacingTopNavigationPaddingHorizontal}px;
+        padding-right: ${spacingTopNavigationPaddingHorizontal}px;
+        padding-bottom: ${spacingTopNavigationPaddingBottom}px;
+        padding-top: ${spacingTopNavigationPaddingBottom}px;  // TODO：设计稿上没有暂时加的
+        border-bottom: 1px solid ${colorTopNavigationBorderBottom};
+        background-color:${colorTopNavigationBackground};
+        &.inverse {
+          background-color:${colorTopNavigationBackgroundInverse};
+        }
+        &.imgBackground {
+          background:${colorTopNavigationGradient};
+        }
+        &.hideBorder {
+          border-bottom:none;
+          box-shadow: 0px -2px 10px 0px rgba(26, 24, 134, 0.1);
+        }
+        &.noRight{
+          justify-content:center !important;
+          .dxp-title-warp{
+             line-height:41px;
+          }
+          .${import_constants.cssClasses.PREFIX}-header-back {
+            position:absolute;
+            left: ${spacingTopNavigationPaddingHorizontal}px;
+          }
+        }
+      }
+      .${import_constants.cssClasses.PREFIX}-title {
+          color:${colorTopNavigationTitleStandard};
+        &.inverse {
+          color:${colorTopNavigationTitleInverse};
+        }
+      }
+      .${import_constants.cssClasses.PREFIX}-right-link {
+        padding-right: ${spacingTopNavigationTextLinkPaddingRight}px;
+      }
+    `);
+    return hashId;
+  };
+  useCustomButtonStyle();
+  const onGoBack = () => {
+    if (goBack) {
+      goBack();
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "header",
+    __spreadValues({
+      className: `${import_constants.cssClasses.PREFIX}-header  ${hideBorder ? "hideBorder" : ""}  ${isInverse ? "inverse" : ""} ${imgBackground ? "imgBackground" : ""} ${noRight ? "noRight" : ""} ${className || ""}`
+    }, restProps),
+    /* @__PURE__ */ import_react.default.createElement(import__.IconButton, { className: `${import_constants.cssClasses.PREFIX}-header-back`, customeIconSize: leftIconSize, inverse: isInverse, size: "medium", name: leftIconName || "icon-a-Backarrow-copy", onClick: onGoBack }),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `
+        ${import_constants.cssClasses.PREFIX}-title-warp
+      ` }, !(0, import_lodash.isEmpty)(titleIconBadge) ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-title-badge` }, /* @__PURE__ */ import_react.default.createElement(import__.Icon, { inverse: isInverse, size: 24, style: { marginRight: "4px" }, name: titleIconBadge.iconName }), /* @__PURE__ */ import_react.default.createElement(import__.Text, { inverse: isInverse, size: "ContentC14Bold", className: `${import_constants.cssClasses.PREFIX}-title ${isInverse ? "inverse" : ""} ` }, titleIconBadge.title), /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-badge` }, +titleIconBadge.badge > 99 ? "99+" : titleIconBadge.badge)) : /* @__PURE__ */ import_react.default.createElement(import__.Text, { inverse: isInverse, size: "ContentC14Bold", className: `${import_constants.cssClasses.PREFIX}-title ${isInverse ? "inverse" : ""} ` }, title)),
+    !noRight && /* @__PURE__ */ import_react.default.createElement(import__.IconButtonGroup, { className: `${import_constants.cssClasses.PREFIX}-rightWarp` }, (_a2 = rightIcons == null ? void 0 : rightIcons.slice(0, 3)) == null ? void 0 : _a2.map((i, index) => /* @__PURE__ */ import_react.default.createElement(import__.IconButton, { inverse: isInverse, key: index, name: i.iconName, size: "medium", onClick: i.onIconClick })), !(0, import_lodash.isEmpty)(rightLink) && /* @__PURE__ */ import_react.default.createElement(import__.TextLink, { inverse: isInverse, className: `${import_constants.cssClasses.PREFIX}-right-link`, type: import__.TextLinkEnum.default, text: rightLink.linkText, onClick: rightLink.onLinkClick }))
+  );
+};
+var Navigation_default = Navigation;

package/lib/components/Navigation/style/index.less

@@ -0,0 +1,52 @@
+@import './variables.less';
+
+
+.@{prefix}-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  margin: 0 auto;
+  z-index: 999;
+
+
+  .@{prefix}-title-warp {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .@{prefix}-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .@{prefix}-title-badge {
+    position: relative;
+    display: flex;
+
+    .@{prefix}-badge {
+      position: absolute;
+      right: -36px;
+      top: -2px;
+      background-color: #FA2C2C;
+      color: #FFF;
+      height: 18px;
+      width: 38px;
+      border-radius: 18px;
+      font-size: 12px;
+      text-align: center;
+      line-height: 18px;
+    }
+  }
+}
+
+.@{prefix}-rightWarp {
+  flex: 0 0 auto;
+  /* 关键！禁止伸缩 */
+
+}

package/lib/components/Navigation/style/variables.less

@@ -0,0 +1 @@
+@import '../../../style/variables.less';

package/lib/components/Search/designTokens.d.ts

@@ -0,0 +1,34 @@
+declare const otherDesignTokens: {
+    spacingSearchInputIconPaddingRight: any;
+    spacingSearchInputPaddingHorizontal: any;
+    colorSearchInputIconStandard: any;
+    spacingSearchInputVerticalGap: any;
+    colorSearchInputBackground: any;
+    colorSearchInputBackgroundHover: any;
+    colorSearchInputBorderStandard: any;
+    colorSearchInputTextPlaceholder: any;
+    colorSearchInputTextLabel: any;
+    colorSearchInputTextResults: any;
+    spacingSearchInputResultPaddingVertical: any;
+    spacingSearchInputResultListPaddingLeft: any;
+    spacingSearchInputResultListPaddingRight: any;
+};
+declare const designTokens: {
+    borderRadius: any;
+    paddingBlock: number;
+    paddingInline: any;
+    colorText: any;
+    hoverBorderColor: any;
+    activeBorderColor: any;
+    activeShadow: string;
+    colorBgContainer: any;
+    borderWidthInputStandard: any;
+    colorBorder: any;
+    colorInputTextPlaceholder: any;
+    fontSize: any;
+    lineHeight: number;
+};
+declare const styleToken: {
+    [x: string]: any;
+};
+export { designTokens, otherDesignTokens, styleToken };

package/lib/components/Search/designTokens.js

@@ -0,0 +1,77 @@
+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/components/Search/designTokens.ts
+var designTokens_exports = {};
+__export(designTokens_exports, {
+  designTokens: () => designTokens,
+  otherDesignTokens: () => otherDesignTokens,
+  styleToken: () => styleToken
+});
+module.exports = __toCommonJS(designTokens_exports);
+var import_tokenHelper = require("../../utils/tokenHelper");
+var import_constants = require("../../constants");
+var prefixCls = import_constants.cssClasses.PREFIX + "-input-outside";
+var otherDesignTokens = {
+  spacingSearchInputIconPaddingRight: (0, import_tokenHelper.getToken)("spacingSearchInputIconPaddingRight"),
+  spacingSearchInputPaddingHorizontal: (0, import_tokenHelper.getToken)("spacingSearchInputPaddingHorizontal"),
+  colorSearchInputIconStandard: (0, import_tokenHelper.getToken)("colorSearchInputIconStandard"),
+  // 搜索图标颜色
+  spacingSearchInputVerticalGap: (0, import_tokenHelper.getToken)("spacingSearchInputVerticalGap"),
+  colorSearchInputBackground: (0, import_tokenHelper.getToken)("colorSearchInputBackground"),
+  colorSearchInputBackgroundHover: (0, import_tokenHelper.getToken)("colorSearchInputBackgroundHover"),
+  colorSearchInputBorderStandard: (0, import_tokenHelper.getToken)("colorSearchInputBorderStandard"),
+  colorSearchInputTextPlaceholder: (0, import_tokenHelper.getToken)("colorSearchInputTextPlaceholder"),
+  colorSearchInputTextLabel: (0, import_tokenHelper.getToken)("colorSearchInputTextLabel"),
+  colorSearchInputTextResults: (0, import_tokenHelper.getToken)("colorSearchInputTextResults"),
+  spacingSearchInputResultPaddingVertical: (0, import_tokenHelper.getToken)("spacingSearchInputResultPaddingVertical"),
+  spacingSearchInputResultListPaddingLeft: (0, import_tokenHelper.getToken)("spacingSearchInputResultListPaddingLeft"),
+  spacingSearchInputResultListPaddingRight: (0, import_tokenHelper.getToken)("spacingSearchInputResultListPaddingRight")
+};
+var designTokens = {
+  borderRadius: (0, import_tokenHelper.getToken)("borderRadiusInput"),
+  // 圆角
+  paddingBlock: 10,
+  // 纵向内边距
+  paddingInline: otherDesignTokens.spacingSearchInputPaddingHorizontal + 16 + otherDesignTokens.spacingSearchInputIconPaddingRight,
+  // 横向内边距
+  colorText: (0, import_tokenHelper.getToken)("colorInputTextActive"),
+  // 内容文本颜色
+  hoverBorderColor: (0, import_tokenHelper.getToken)("colorInputBorderActive"),
+  // hover边框颜色
+  activeBorderColor: (0, import_tokenHelper.getToken)("colorInputBorderActive"),
+  // active边框颜色
+  activeShadow: "none",
+  // activeShadow: '0px 0px 0px 2px #180C8E33', // 边框shadow颜色
+  colorBgContainer: (0, import_tokenHelper.getToken)("colorInputBackground"),
+  // 背景颜色
+  borderWidthInputStandard: (0, import_tokenHelper.getToken)("borderWidthInputStandard"),
+  // 标准边框宽度
+  colorBorder: (0, import_tokenHelper.getToken)("colorInputBorderStandard"),
+  // 标准边框颜色
+  colorInputTextPlaceholder: (0, import_tokenHelper.getToken)("colorInputTextPlaceholder"),
+  // placeholder文本颜色
+  fontSize: (0, import_tokenHelper.getToken)("ContentC14Regular"),
+  // 字体大小
+  lineHeight: 1.5
+  // colorBgContainerDisabled: getToken('colorInputBackgroundHaze'), // 背景颜色
+};
+var styleToken = {
+  [`--${prefixCls}-color-error-border-hover`]: (0, import_tokenHelper.getToken)("colorInputBorderError")
+  // error颜色
+};

package/lib/components/Search/index.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import './style/index.less';
+export interface SearchProps {
+    placeholder?: string;
+    resultList?: ReactNode;
+    onSearch?: (value: string) => void;
+    onEnter?: (value: string) => void;
+    showResult?: boolean;
+    style?: React.CSSProperties;
+    [key: string]: any;
+}
+declare const Search: (props: SearchProps) => React.JSX.Element;
+export default Search;

package/lib/components/Search/index.js

@@ -0,0 +1,137 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Search/index.tsx
+var Search_exports = {};
+__export(Search_exports, {
+  default: () => Search_default
+});
+module.exports = __toCommonJS(Search_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_cssinjs = require("@ant-design/cssinjs");
+var import_theme = require("../../utils/theme");
+var import_constants = require("../../constants");
+var import_designTokens = require("./designTokens");
+var import_Icon = __toESM(require("../Icon"));
+var import_style = require("./style/index.less");
+var Search = (props) => {
+  const { placeholder, resultList, onSearch = () => {
+  }, onEnter = () => {
+  }, showResult } = props;
+  const prefix = `${import_constants.cssClasses.PREFIX}-search`;
+  const {
+    colorSearchInputIconStandard,
+    spacingSearchInputPaddingHorizontal,
+    spacingSearchInputVerticalGap,
+    colorSearchInputBackground,
+    spacingSearchInputResultPaddingVertical,
+    colorSearchInputTextResults,
+    spacingSearchInputResultListPaddingLeft,
+    spacingSearchInputResultListPaddingRight,
+    colorSearchInputBackgroundHover,
+    colorSearchInputBorderStandard
+    // colorSearchInputTextLabel: getToken('colorSearchInputTextLabel'),
+  } = import_designTokens.otherDesignTokens;
+  const useCustomButtonStyle = () => {
+    const hashId = (0, import_cssinjs.useStyleRegister)({
+      theme: import_theme.theme,
+      token: { baseColor: "blue" },
+      path: [`${prefix}`]
+    }, () => `
+      .${prefix}-icon {
+        color: ${colorSearchInputIconStandard};
+        top: 15px;
+        left: ${spacingSearchInputPaddingHorizontal}px;
+      }
+      .${prefix}-result {
+        margin-top: ${spacingSearchInputVerticalGap}px;
+        padding: ${spacingSearchInputResultPaddingVertical}px 0;
+        border: 1px solid ${colorSearchInputBorderStandard};
+        background: ${colorSearchInputBackground};
+        border-radius: ${import_designTokens.designTokens.borderRadius}px;
+        color: ${colorSearchInputTextResults};
+      }
+      .${prefix}-result li {
+        padding: ${spacingSearchInputResultPaddingVertical}px ${spacingSearchInputResultListPaddingRight}px ${spacingSearchInputResultPaddingVertical}px ${spacingSearchInputResultListPaddingLeft}px;
+        line-height: 24px;
+      }
+      .${prefix}-result li:hover {
+        background: ${colorSearchInputBackgroundHover};
+      }
+      .${prefix}-result li a {
+        color: ${colorSearchInputTextResults};
+      }
+    `);
+    return hashId;
+  };
+  useCustomButtonStyle();
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.ConfigProvider,
+    {
+      wave: { disabled: true },
+      prefixCls: prefix,
+      theme: {
+        components: {
+          Input: __spreadValues({}, import_designTokens.designTokens)
+        },
+        cssVar: true,
+        hashed: false
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: prefix }, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Input,
+      {
+        placeholder,
+        onChange: (e) => {
+          const val = e.target.value || "";
+          onSearch(val);
+        },
+        onPressEnter: (e) => {
+          const val = e.target.value || "";
+          onEnter(val);
+        }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { className: `${prefix}-icon`, size: 16, name: "icon-Search" }), resultList && /* @__PURE__ */ import_react.default.createElement("div", { className: showResult ? `${prefix}-result ${prefix}-result-show` : `${prefix}-result` }, resultList))
+  );
+};
+var Search_default = Search;

package/lib/components/Search/style/index.less

@@ -0,0 +1,32 @@
+@import './variables.less';
+
+// 基础按钮样式
+@components: search;
+
+.@{prefix}-@{components} {
+  position: relative;
+}
+
+.@{prefix}-@{components}-icon {
+  position: absolute;
+  line-height: 1;
+}
+
+.@{prefix}-@{components}-result {
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 46px;
+  width: 100%;
+  z-index: 9;
+  ul {
+    margin: 0;
+    padding: 0;
+    li {
+      list-style: none;
+    }
+  }
+}
+.@{prefix}-@{components}-result-show {
+  display: block;
+}

package/lib/components/Search/style/variables.less

@@ -0,0 +1,5 @@
+
+@import '../../../style/variables.less';
+
+// Primary Button
+@btn-primary-bg-default: var(--base-color-primary);

package/lib/components/Stepper/designTokens.d.ts

@@ -0,0 +1,26 @@
+declare const designTokens: {
+    colorText: any;
+    colorTextDescription: any;
+    colorTextLightSolid: any;
+    colorPrimary: any;
+    colorBorderBg: any;
+    colorBorderSecondary: any;
+    colorSplit: any;
+};
+declare const otherDesignTokens: {
+    [x: string]: string;
+    '--ant-steps-icon-size': string;
+    '--ant-steps-icon-size-sm': string;
+    '--dxp-steps-icon-size': string;
+    '--dxp-steps-icon-size-sm': string;
+};
+declare const mobileDesignTokens: {
+    colorStepperBackgroundActiveWeak: any;
+    '--dxp-steps-color-neutral': any;
+    '--dxp-steps-color-secondary': any;
+    '--dxp-steps-color-label2': any;
+    '--dxp-steps-background-active': any;
+    '--dxp-steps-background-activeWeak': any;
+};
+export { otherDesignTokens, mobileDesignTokens, };
+export default designTokens;

package/lib/components/Stepper/designTokens.js

@@ -0,0 +1,90 @@
+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/components/Stepper/designTokens.ts
+var designTokens_exports = {};
+__export(designTokens_exports, {
+  default: () => designTokens_default,
+  mobileDesignTokens: () => mobileDesignTokens,
+  otherDesignTokens: () => otherDesignTokens
+});
+module.exports = __toCommonJS(designTokens_exports);
+var import_tokenHelper = require("../../utils/tokenHelper");
+var import_constants = require("../../constants");
+var prefixCls = import_constants.cssClasses.PREFIX + "-stepper";
+var designTokens = {
+  // 算法配置
+  // algorithm: true,
+  // 当前 高亮步骤 text描述|| 已完成步骤的 text 色都是它
+  colorText: (0, import_tokenHelper.getToken)("colorStepperTextInactive"),
+  // 深灰
+  // 未开始的步骤text色 \ text描述色
+  colorTextDescription: (0, import_tokenHelper.getToken)("colorStepperTextInactive"),
+  // 当前 高亮步骤 icon的 text 色
+  colorTextLightSolid: (0, import_tokenHelper.getToken)("colorStepperTextActive"),
+  // 白色
+  // 高亮步骤 background色
+  colorPrimary: (0, import_tokenHelper.getToken)("colorStepperBackgroundActive"),
+  // 蓝色
+  // 高亮步骤 分割线的颜色 此颜色和 colorPrimary 的颜色一致（自动的）
+  // 已完成 background 颜色  无此token 通过less 变量覆盖
+  // colorSuccess: getToken('colorStepperBackgroundSuccess'),
+  // 未开始 状态 background 颜色 无此token 通过less 变量覆盖
+  // processIconBgColor: getToken('colorStepperBackgroundInactive'),
+  //  进行中状态 线条颜色
+  colorBorderBg: (0, import_tokenHelper.getToken)("colorStepperBorderActive"),
+  colorBorderSecondary: (0, import_tokenHelper.getToken)("colorStepperConnectorInactive"),
+  // colorSplit 未开始 分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致
+  colorSplit: (0, import_tokenHelper.getToken)("colorStepperConnectorInactive")
+  // 灰色
+  // color.stepper.icon.success
+  // fontSize: '14px',
+  // fontSizeSM: '14px',
+};
+var otherDesignTokens = {
+  // 进行中 步骤条 圈的颜色
+  [`--${import_constants.cssClasses.PREFIX}-progress-default-color`]: `${(0, import_tokenHelper.getToken)("colorStepperBorderActive")}`,
+  [`--${prefixCls}-progress-default-color`]: `${(0, import_tokenHelper.getToken)("colorStepperBorderActive")}`,
+  [`--${prefixCls}-progress-border-width`]: `${(0, import_tokenHelper.getToken)("borderWidthStepperActive")}`,
+  [`--${prefixCls}-progress-border-connector`]: `${(0, import_tokenHelper.getToken)("borderWidthStepperConnector")}`,
+  // 已完成 步骤条 圈的颜色
+  [`--${prefixCls}-finish-icon-bg-color`]: `${(0, import_tokenHelper.getToken)("colorStepperBackgroundSuccess")}`,
+  [`--${prefixCls}-finish-icon-border-color`]: `${(0, import_tokenHelper.getToken)("colorStepperBackgroundSuccess")}`,
+  [`--${prefixCls}-finish-icon-success`]: `${(0, import_tokenHelper.getToken)("colorStepperIconSuccess")}`,
+  [`--${prefixCls}-finish-line-color`]: `${(0, import_tokenHelper.getToken)("colorStepperConnectorSuccess")}`,
+  // 未开始 步骤条 圈的颜色
+  [`--${prefixCls}-wait-icon-bg-color`]: `${(0, import_tokenHelper.getToken)("colorStepperBackgroundInactive")}`,
+  [`--${prefixCls}-wait-icon-border-color`]: `${(0, import_tokenHelper.getToken)("colorStepperBackgroundInactive")}`,
+  [`--${prefixCls}-wait-icon-color`]: `${(0, import_tokenHelper.getToken)("colorStepperTextLabel")}`,
+  // 进行中状态 线条颜色在上面的token 中
+  // colorStepperConnectorInactive
+  "--ant-steps-icon-size": (0, import_tokenHelper.getToken)("sizingStepperOuter") + "px",
+  "--ant-steps-icon-size-sm": (0, import_tokenHelper.getToken)("sizingStepperInner") + "px",
+  "--dxp-steps-icon-size": (0, import_tokenHelper.getToken)("sizingStepperOuter") + "px",
+  "--dxp-steps-icon-size-sm": (0, import_tokenHelper.getToken)("sizingStepperInner") + "px"
+};
+var mobileDesignTokens = {
+  colorStepperBackgroundActiveWeak: (0, import_tokenHelper.getToken)("colorStepperBackgroundActiveWeak"),
+  // moblie
+  "--dxp-steps-color-neutral": (0, import_tokenHelper.getToken)("colorStepperTextNeutral"),
+  "--dxp-steps-color-secondary": (0, import_tokenHelper.getToken)("colorStepperTextLabel"),
+  "--dxp-steps-color-label2": (0, import_tokenHelper.getToken)("colorStepperTextLabel2"),
+  "--dxp-steps-background-active": (0, import_tokenHelper.getToken)("colorStepperBackgroundActive"),
+  "--dxp-steps-background-activeWeak": (0, import_tokenHelper.getToken)("colorStepperBackgroundActiveWeak")
+};
+var designTokens_default = designTokens;

package/lib/components/Stepper/index.d.ts

@@ -0,0 +1,22 @@
+import { StepsProps } from 'antd';
+import React, { PureComponent } from 'react';
+import './style/index.less';
+export interface StepperProps extends Omit<StepsProps, 'description'> {
+    description?: string;
+    prefixCls?: string;
+    breakpoint?: 'desktop' | 'mobile';
+    percent?: number;
+    title?: string;
+    labelPlacement?: 'horizontal' | 'vertical';
+    nextStepText?: string;
+    [key: string]: any;
+}
+export default class Stepper extends PureComponent<StepperProps> {
+    static defaultProps: {
+        prefixCls: string;
+        breakpoint: string;
+        labelPlacement: string;
+    };
+    descriptionText: (content: React.ReactNode) => React.JSX.Element;
+    render(): React.JSX.Element;
+}