@arco-design/mobile-react 2.25.4 → 2.26.0

package/esm/toast/index.d.ts

@@ -185,8 +185,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    toast: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "getContainer" | "className" | "duration" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "getContainer" | "className" | "duration" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    toast: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -196,8 +196,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    info: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "getContainer" | "className" | "duration" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "getContainer" | "className" | "duration" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    info: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -207,8 +207,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    success: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "getContainer" | "className" | "duration" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "getContainer" | "className" | "duration" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    success: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -218,8 +218,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    error: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "getContainer" | "className" | "duration" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "getContainer" | "className" | "duration" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    error: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -229,8 +229,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    loading: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "getContainer" | "className" | "duration" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "getContainer" | "className" | "duration" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    loading: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -240,8 +240,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    warn: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "getContainer" | "className" | "duration" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "getContainer" | "className" | "duration" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    warn: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
         close: () => void;
         hide: () => void;
     };

package/esm/toast/index.js

@@ -12,31 +12,31 @@ import { usePreventBodyScroll } from '../_helpers';
 export * from './methods';
 var Toast = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
-    getContainer = props.getContainer,
-    _props$visible = props.visible,
-    visible = _props$visible === void 0 ? false : _props$visible,
-    onClose = props.onClose,
-    close = props.close,
-    _props$type = props.type,
-    type = _props$type === void 0 ? 'info' : _props$type,
-    icon = props.icon,
-    _props$layout = props.layout,
-    layout = _props$layout === void 0 ? 'vertical' : _props$layout,
-    _props$duration = props.duration,
-    duration = _props$duration === void 0 ? 3000 : _props$duration,
-    _props$transitionDura = props.transitionDuration,
-    transitionDuration = _props$transitionDura === void 0 ? 300 : _props$transitionDura,
-    content = props.content,
-    _props$loading = props.loading,
-    loading = _props$loading === void 0 ? false : _props$loading,
-    loadingIcon = props.loadingIcon,
-    _props$disableBodyTou = props.disableBodyTouch,
-    disableBodyTouch = _props$disableBodyTou === void 0 ? false : _props$disableBodyTou,
-    loadingInner = props.loadingInner,
-    _props$direction = props.direction,
-    direction = _props$direction === void 0 ? 'center' : _props$direction,
-    typeIconMap = props.typeIconMap,
-    initialBodyOverflow = props.initialBodyOverflow;
+      getContainer = props.getContainer,
+      _props$visible = props.visible,
+      visible = _props$visible === void 0 ? false : _props$visible,
+      onClose = props.onClose,
+      close = props.close,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'info' : _props$type,
+      icon = props.icon,
+      _props$layout = props.layout,
+      layout = _props$layout === void 0 ? 'vertical' : _props$layout,
+      _props$duration = props.duration,
+      duration = _props$duration === void 0 ? 3000 : _props$duration,
+      _props$transitionDura = props.transitionDuration,
+      transitionDuration = _props$transitionDura === void 0 ? 300 : _props$transitionDura,
+      content = props.content,
+      _props$loading = props.loading,
+      loading = _props$loading === void 0 ? false : _props$loading,
+      loadingIcon = props.loadingIcon,
+      _props$disableBodyTou = props.disableBodyTouch,
+      disableBodyTouch = _props$disableBodyTou === void 0 ? false : _props$disableBodyTou,
+      loadingInner = props.loadingInner,
+      _props$direction = props.direction,
+      direction = _props$direction === void 0 ? 'center' : _props$direction,
+      typeIconMap = props.typeIconMap,
+      initialBodyOverflow = props.initialBodyOverflow;
   var closeTimerRef = useRef();
   var domRef = useRef(null);
   var isInitialMount = useRef(false);
@@ -47,11 +47,13 @@ var Toast = /*#__PURE__*/forwardRef(function (props, ref) {
     };
   });
   usePreventBodyScroll(visible, disableBodyTouch, initialBodyOverflow);
+
   function handleClose() {
     if (close) {
       close();
     }
   }
+
   function startCloseTimer() {
     if (duration) {
       clearTimeout(closeTimerRef.current);
@@ -60,11 +62,13 @@ var Toast = /*#__PURE__*/forwardRef(function (props, ref) {
       }, duration);
     }
   }
+
   function handleClickMask(e) {
     if (disableBodyTouch) {
       e.preventDefault();
     }
   }
+
   function getTypeIcons() {
     var map = typeIconMap || {};
     var defaultMap = {
@@ -74,25 +78,31 @@ var Toast = /*#__PURE__*/forwardRef(function (props, ref) {
     };
     return map[type] || defaultMap[type] || null;
   }
+
   useEffect(function () {
     var mounted = isInitialMount.current;
+
     if (visible) {
       startCloseTimer();
     } else {
       clearTimeout(closeTimerRef.current);
+
       if (mounted) {
         setTimeout(function () {
           onClose && onClose();
         }, transitionDuration);
       }
     }
+
     isInitialMount.current = true;
   }, [visible]);
   useEffect(function () {
     startCloseTimer();
   }, [duration]);
+
   function renderComponent(prefixClass) {
     var _cls;
+
     return /*#__PURE__*/React.createElement("div", {
       className: cls(prefixClass + "-wrapper", "from-" + direction, {
         'no-event': !disableBodyTouch
@@ -113,6 +123,7 @@ var Toast = /*#__PURE__*/forwardRef(function (props, ref) {
       className: prefixClass + "-content"
     }, content) : null));
   }
+
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/React.createElement(Portal, {
@@ -136,6 +147,7 @@ export function methodsGenerator(Comp) {
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
     toast: toast(Comp),
+
     /**
      * 展示常规提示框，同 Toast.toast
      * @desc {en} Show regular toast, the same as Toast.toast
@@ -143,6 +155,7 @@ export function methodsGenerator(Comp) {
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
     info: toast(Comp, 'info'),
+
     /**
      * 展示成功提示框(含成功icon)
      * @desc {en} Show success prompt toast (including success icon)
@@ -150,6 +163,7 @@ export function methodsGenerator(Comp) {
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
     success: toast(Comp, 'success'),
+
     /**
      * 展示错误提示框(含错误icon)
      * @desc {en} Display error prompt toast (including error icon)
@@ -157,6 +171,7 @@ export function methodsGenerator(Comp) {
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
     error: toast(Comp, 'error'),
+
     /**
      * 展示加载中提示框(含加载中icon)
      * @desc {en} Display loading prompt toast (including loading icon)
@@ -164,6 +179,7 @@ export function methodsGenerator(Comp) {
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
     loading: toast(Comp, 'loading'),
+
     /**
      * 展示警告提示框(含警告icon)
      * @desc {en} Display warning prompt toast (including warning icon)
@@ -174,7 +190,6 @@ export function methodsGenerator(Comp) {
   };
 }
 var ToastWithGlobalContext = CompWithGlobalContext(Toast);
-
 /**
  * 轻提示组件，支持各个场景下调用方法。
  * @en The toast component, supports calling methods in various scenarios.
@@ -183,4 +198,5 @@ var ToastWithGlobalContext = CompWithGlobalContext(Toast);
  * @name 轻提示
  * @name_en Toast
  */
+
 export default componentWrapper(Toast, methodsGenerator(ToastWithGlobalContext));

package/esm/toast/methods.js

@@ -7,23 +7,29 @@ export function toast(Component, type) {
       content: originConfig,
       type: 'info'
     } : originConfig;
+
     if (type !== void 0) {
       config.type = type;
       config.loading = type === 'loading';
     }
+
     var div = document.createElement('div');
     document.body.appendChild(div);
+
     var _ReactDOMRender = new ReactDOMRender(Component, div, context),
-      render = _ReactDOMRender.render,
-      unmount = _ReactDOMRender.unmount;
+        render = _ReactDOMRender.render,
+        unmount = _ReactDOMRender.unmount;
+
     function destroy() {
       var onClose = config.onClose;
       onClose && onClose();
       unmount();
+
       if (div.parentNode) {
         div.parentNode.removeChild(div);
       }
     }
+
     var dynamicProps = _extends({}, config, {
       close: close,
       getContainer: function getContainer() {
@@ -32,16 +38,20 @@ export function toast(Component, type) {
       onClose: destroy,
       visible: false
     });
+
     var leaving = false;
+
     function update(newConfig) {
       dynamicProps = _extends({}, dynamicProps, newConfig);
       render(dynamicProps);
     }
+
     function close() {
       leaving = true;
       dynamicProps.visible = false;
       render(dynamicProps);
     }
+
     render(dynamicProps);
     nextTick(function () {
       // 在即将打开时发现已经调用了close则取消打开操作

package/esm/transition/index.js

@@ -4,6 +4,7 @@ var _excluded = ["children", "type", "in", "timeout", "mountOnEnter", "unmountOn
 import React from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { ContextLayout } from '../context-provider';
+
 /**
  * react-transition-group/CSSTransition 的简单封装。
  * @en Simple wrapper for react-transition-group/CSSTransition.
@@ -14,16 +15,17 @@ import { ContextLayout } from '../context-provider';
  */
 export default function Transition(props) {
   var _props$children = props.children,
-    children = _props$children === void 0 ? /*#__PURE__*/React.createElement("div", null) : _props$children,
-    type = props.type,
-    transIn = props.in,
-    _props$timeout = props.timeout,
-    timeout = _props$timeout === void 0 ? 300 : _props$timeout,
-    _props$mountOnEnter = props.mountOnEnter,
-    mountOnEnter = _props$mountOnEnter === void 0 ? true : _props$mountOnEnter,
-    _props$unmountOnExit = props.unmountOnExit,
-    unmountOnExit = _props$unmountOnExit === void 0 ? true : _props$unmountOnExit,
-    restProps = _objectWithoutPropertiesLoose(props, _excluded);
+      children = _props$children === void 0 ? /*#__PURE__*/React.createElement("div", null) : _props$children,
+      type = props.type,
+      transIn = props.in,
+      _props$timeout = props.timeout,
+      timeout = _props$timeout === void 0 ? 300 : _props$timeout,
+      _props$mountOnEnter = props.mountOnEnter,
+      mountOnEnter = _props$mountOnEnter === void 0 ? true : _props$mountOnEnter,
+      _props$unmountOnExit = props.unmountOnExit,
+      unmountOnExit = _props$unmountOnExit === void 0 ? true : _props$unmountOnExit,
+      restProps = _objectWithoutPropertiesLoose(props, _excluded);
+
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/React.createElement(CSSTransition, _extends({

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.25.4",
+    "version": "2.26.0",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "2.13.4",
+        "@arco-design/mobile-utils": "2.14.0",
         "@arco-design/transformable": "^1.0.0",
         "lodash.throttle": "^4.1.1",
         "resize-observer-polyfill": "^1.5.1"
@@ -35,5 +35,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "156c02f85026ec594e9d5c83edfb1728e97dc13b"
+    "gitHead": "27213e9177fe34ef0d79e087c473094ac417ee47"
 }

package/tokens/app/arcodesign/default/css-variables.less

@@ -742,4 +742,12 @@
     --time-line-content-font-size: ~`pxtorem(16)`;
     --time-line-content-background-color: var(--line-color);
     --time-line-content-color: var(--font-color);
+    --divider-line-thickness: 1PX;
+    --divider-line-color: var(--line-color);
+    --divider-content-font-size: ~`pxtorem(14)`;
+    --divider-content-font-color: var(--sub-font-color);
+    --divider-left-width: ~`pxtorem(28)`;
+    --divider-right-width: ~`pxtorem(28)`;
+    --divider-content-padding: ~`pxtorem(12)`;
+    --divider-padding: ~`pxtorem(16)`;
 }

package/tokens/app/arcodesign/default/index.d.ts

@@ -741,6 +741,14 @@ export interface ArcodesignToken extends Record<string, string> {
     'time-line-content-font-size': string;
     'time-line-content-background-color': string;
     'time-line-content-color': string;
+    'divider-line-thickness': string;
+    'divider-line-color': string;
+    'divider-content-font-size': string;
+    'divider-content-font-color': string;
+    'divider-left-width': string;
+    'divider-right-width': string;
+    'divider-content-padding': string;
+    'divider-padding': string;
 }
 declare const tokens: ArcodesignToken;
 export default tokens;

package/tokens/app/arcodesign/default/index.js

@@ -5,10 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 exports.getRem = getRem;
+
 function getRem(px, baseFontSize) {
   var num = Math.round(px / Number(baseFontSize) * 1000000) / 1000000;
   return num ? "".concat(num, "rem") : num;
 }
+
 var tokens = {
   "prefix": "arco",
   "base-font-size": "50",
@@ -750,7 +752,15 @@ var tokens = {
   "time-line-content-border-radius": "0.08rem",
   "time-line-content-font-size": "0.32rem",
   "time-line-content-background-color": "var(--line-color)",
-  "time-line-content-color": "var(--font-color)"
+  "time-line-content-color": "var(--font-color)",
+  "divider-line-thickness": "1PX",
+  "divider-line-color": "var(--line-color)",
+  "divider-content-font-size": "0.28rem",
+  "divider-content-font-color": "var(--sub-font-color)",
+  "divider-left-width": "0.56rem",
+  "divider-right-width": "0.56rem",
+  "divider-content-padding": "0.24rem",
+  "divider-padding": "0.32rem"
 };
 var _default = tokens;
 exports["default"] = _default;

package/tokens/app/arcodesign/default/index.json

@@ -2735,6 +2735,100 @@
             "en": "Base disabled font color"
         }
     },
+    "dividerContentFontColor": {
+        "cssKey": "divider-content-font-color",
+        "desc": "分割线文本字体颜色",
+        "override": "",
+        "value": "@sub-font-color",
+        "jsValue": "@global@subFontColor",
+        "staticValue": "#4e5969",
+        "localeDesc": {
+            "ch": "分割线文本字体颜色",
+            "en": "Font color of divider content"
+        }
+    },
+    "dividerContentFontSize": {
+        "cssKey": "divider-content-font-size",
+        "desc": "分割线文本字体大小",
+        "override": "",
+        "value": "~`pxtorem(14)`",
+        "jsValue": "@getRem@14",
+        "staticValue": "0.28rem",
+        "localeDesc": {
+            "ch": "分割线文本字体大小",
+            "en": "Font size of divider content"
+        }
+    },
+    "dividerContentPadding": {
+        "cssKey": "divider-content-padding",
+        "desc": "分割线文本左右padding",
+        "override": "",
+        "value": "~`pxtorem(12)`",
+        "jsValue": "@getRem@12",
+        "staticValue": "0.24rem",
+        "localeDesc": {
+            "ch": "分割线文本左右padding",
+            "en": "Padding of content"
+        }
+    },
+    "dividerLeftWidth": {
+        "cssKey": "divider-left-width",
+        "desc": "分割线左对齐时左边长度",
+        "override": "",
+        "value": "~`pxtorem(28)`",
+        "jsValue": "@getRem@28",
+        "staticValue": "0.56rem",
+        "localeDesc": {
+            "ch": "分割线左对齐时左边长度"
+        }
+    },
+    "dividerLineColor": {
+        "cssKey": "divider-line-color",
+        "desc": "分割线线条颜色",
+        "override": "",
+        "value": "@line-color",
+        "jsValue": "@global@lineColor",
+        "staticValue": "#e5e6eb",
+        "localeDesc": {
+            "ch": "分割线线条颜色",
+            "en": "Color of divider line"
+        }
+    },
+    "dividerLineThickness": {
+        "cssKey": "divider-line-thickness",
+        "desc": "分割线线条粗细",
+        "override": "",
+        "value": "1PX",
+        "jsValue": "1PX",
+        "staticValue": "1PX",
+        "localeDesc": {
+            "ch": "分割线线条粗细",
+            "en": "Thickness of divider line"
+        }
+    },
+    "dividerPadding": {
+        "cssKey": "divider-padding",
+        "desc": "分割线上下padding",
+        "override": "",
+        "value": "~`pxtorem(16)`",
+        "jsValue": "@getRem@16",
+        "staticValue": "0.32rem",
+        "localeDesc": {
+            "ch": "分割线上下padding",
+            "en": "Top and Bottom padding of divider"
+        }
+    },
+    "dividerRightWidth": {
+        "cssKey": "divider-right-width",
+        "desc": "分割线右对齐时右边长度",
+        "override": "",
+        "value": "~`pxtorem(28)`",
+        "jsValue": "@getRem@28",
+        "staticValue": "0.56rem",
+        "localeDesc": {
+            "ch": "分割线右对齐时右边长度"
+        }
+    },
     "dropdownMaskBackgroundColor": {
         "cssKey": "dropdown-mask-background-color",
         "desc": "dropdown的弹出框中mask的背景颜色",

package/tokens/app/arcodesign/default/index.less

@@ -741,4 +741,12 @@
 @time-line-content-font-size: ~`pxtorem(16)`;
 @time-line-content-background-color: @line-color;
 @time-line-content-color: @font-color;
+@divider-line-thickness: 1PX;
+@divider-line-color: @line-color;
+@divider-content-font-size: ~`pxtorem(14)`;
+@divider-content-font-color: @sub-font-color;
+@divider-left-width: ~`pxtorem(28)`;
+@divider-right-width: ~`pxtorem(28)`;
+@divider-content-padding: ~`pxtorem(12)`;
+@divider-padding: ~`pxtorem(16)`;
 

package/tokens/mixin/index.less

@@ -2,7 +2,7 @@
 @import './vars-switch.less';
 @import './pxtorem.less';
 
-.rem (@property; @values...) {
+.rem(@property; @values...) {
     @{property}: ~`(function () {
         var baseFontSize=@{base-font-size};
         var sizeList = @{values};
@@ -15,6 +15,15 @@
     }())`;
 }
 
+.rem-with-rtl(@property; @values...) {
+    .rem(@property; @values...);
+    [dir="rtl"] & {
+        @{property}: initial;
+        @new-property: .prop-with-rtl(@property)[@property-name];
+        .rem(@new-property; @values...);
+    }
+}
+
 // for hack dark mode
 .use-dark-mode-query(@rules) {
     & when (@use-dark-mode = 1) {
@@ -31,6 +40,15 @@
     }
 }
 
+.use-var-with-rtl(@property, @variables, @preValues: '', @nextValues: '') {
+    .use-var(@property, @variables, @preValues, @nextValues);
+    [dir="rtl"] & {
+        @{property}: initial;
+        @new-property: .prop-with-rtl(@property)[@property-name];
+        .use-var(@new-property, @variables, @preValues, @nextValues);
+    }
+}
+
 .hairline-var(@color, @direction: all) {
     .hairline(@@color, @direction);
     & when (@use-css-vars = 1) {