@nutui/nutui-react-taro 3.0.0-beta.1 → 3.0.0-beta.10

package/dist/cjs/packages/inputnumber/style/style.css

@@ -1,53 +1,59 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-inputnumber {
-  display: flex;
+  display: inline-flex;
+  width: calc(2 * var(--nutui-inputnumber-input-margin, 0px) + 2 * var(--nutui-inputnumber-button-width, 20px) + var(--nutui-inputnumber-input-width, 26px));
   flex-direction: row;
   align-items: center;
+  background-color: var(--nutui-gray-3);
+  border-radius: var(--nutui-inputnumber-input-border-radius, 4px);
+  overflow: hidden;
 }
 .nut-inputnumber-minus, .nut-inputnumber-add {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: var(--nutui-inputnumber-button-width, 14px);
-  height: var(--nutui-inputnumber-button-height, 24px);
+  width: var(--nutui-inputnumber-button-width, 20px);
+  height: var(--nutui-inputnumber-button-height, 20px);
   background-color: var(--nutui-inputnumber-button-background-color, transparent);
-  border-radius: var(--nutui-inputnumber-button-border-radius, 16px);
+}
+.nut-inputnumber-minus .nut-icon, .nut-inputnumber-add .nut-icon {
+  --nut-icon-width: 10px;
+  --nut-icon-height: 10px;
 }
 .nut-inputnumber-icon {
-  color: var(--nutui-inputnumber-icon-color, var(--nutui-color-text, #505259));
-  /*  #ifdef rn harmony  */
-  font-size: 14px;
-  /*  #endif  */
-  /*  #ifndef  rn harmony  */
-  font-size: var(--nutui-inputnumber-icon-size, 8px);
-  /*  #endif */
+  color: var(--nutui-gray-6);
   cursor: pointer;
 }
 .nut-inputnumber-icon-disabled {
-  color: var(--nutui-inputnumber-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-gray-4);
   cursor: not-allowed;
 }
 .nut-inputnumber-input {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: var(--nutui-inputnumber-input-width, 60px);
-  height: var(--nutui-inputnumber-input-height, 24px);
+  width: var(--nutui-inputnumber-input-width, 26px);
+  font-size: var(--nutui-inputnumber-input-font-size, var(--nutui-font-size-s, 12px));
+  height: var(--nutui-inputnumber-input-height, 20px);
   text-align: center;
   outline: none;
   border: var(--nutui-inputnumber-input-border, 0);
-  border-radius: var(--nutui-inputnumber-input-border-radius, 6px);
-  margin: var(--nutui-inputnumber-input-margin, 0);
-  color: var(--nutui-inputnumber-input-font-color, var(--nutui-color-title, #1a1a1a));
-  background-color: var(--nutui-inputnumber-input-background-color, var(--nutui-color-background, #f5f6fa));
+  margin-left: var(--nutui-inputnumber-input-margin, 0px);
+  margin-right: var(--nutui-inputnumber-input-margin, 0px);
+  color: var(--nutui-gray-6);
+  background-color: var(--nutui-inputnumber-input-background-color, var(--nutui-gray-3));
 }
 .nut-inputnumber-input-disabled {
-  color: var(--nutui-inputnumber-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-gray-4);
 }
 .nut-inputnumber-input::-webkit-outer-spin-button, .nut-inputnumber-input::-webkit-inner-spin-button {
   appearance: none;
 }
 .nut-inputnumber-input-disabled {
-  color: var(--nutui-inputnumber-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-gray-4);
 }
 .nut-inputnumber-icon-minus {
   --nut-icon-width: 16px;

package/dist/cjs/packages/layout/style/style.css

@@ -0,0 +1,4 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */

package/dist/cjs/packages/loading/index.d.ts

@@ -1,3 +1,3 @@
 import { Loading } from "./loading";
-export type { LoadingProps, LoadingType, LoadingDirection, } from "./loading";
+export type { LoadingProps, LoadingType, LoadingDirection } from './types';
 export default Loading;

package/dist/cjs/packages/loading/loading.d.ts

@@ -1,10 +1,3 @@
-import React, { FunctionComponent, ReactNode } from 'react';
-import { BasicComponent } from "../../utils/typings";
-export type LoadingType = 'spinner' | 'circular';
-export type LoadingDirection = 'horizontal' | 'vertical';
-export interface LoadingProps extends BasicComponent {
-    type: LoadingType;
-    direction: LoadingDirection;
-    icon?: ReactNode;
-}
-export declare const Loading: FunctionComponent<Partial<LoadingProps> & React.HTMLAttributes<HTMLDivElement>>;
+import React from 'react';
+import { LoadingProps } from './types';
+export declare const Loading: React.ForwardRefExoticComponent<Partial<LoadingProps> & React.RefAttributes<any>>;

package/dist/cjs/packages/loading/loading.js

@@ -9,14 +9,17 @@ Object.defineProperty(exports, "Loading", {
     }
 });
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
-var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _iconsreacttaro = require("@nutui/icons-react-taro");
 var _components = require("@tarojs/components");
+var _index = /*#__PURE__*/ _interop_require_default._(require("../lottie/index"));
 var _typings = require("../../utils/typings");
+var _mergeprops = require("../../utils/merge-props");
 // 方便以后扩展设置为键值对形式
 var loadingMap = {
     circular: _iconsreacttaro.Loading1,
@@ -25,27 +28,53 @@ var loadingMap = {
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     // 对比一下,个人感觉还是Loading1比较好看一些,所以用它作为了默认的loading图标
     type: 'circular',
-    direction: 'horizontal'
+    direction: 'horizontal',
+    lottieProps: {}
 });
-var Loading = function Loading(props) {
-    var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, style = _ref.style, children = _ref.children, direction = _ref.direction, icon = _ref.icon, rest = (0, _object_without_properties._)(_ref, [
+var defaultLottieProps = {
+    loop: true,
+    autoplay: true
+};
+var Loading = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
+    var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, style = _ref.style, children = _ref.children, direction = _ref.direction, icon = _ref.icon, lottieProps = _ref.lottieProps, rest = (0, _object_without_properties._)(_ref, [
         "className",
         "style",
         "children",
         "direction",
-        "icon"
+        "icon",
+        "lottieProps"
     ]);
+    // @ts-ignore
+    var loadingLottieRef = (0, _react.useRef)();
+    var mergedLottieProps = (0, _mergeprops.mergeProps)(defaultLottieProps, lottieProps);
+    _react.default.useImperativeHandle(ref, function() {
+        return loadingLottieRef;
+    });
     var classPrefix = 'nut-loading';
-    var CurLoadingIcon = loadingMap[rest.type] || _iconsreacttaro.Loading1;
+    var getLoadingIcon = function getLoadingIcon() {
+        if (rest.type === 'lottie' && rest.jsonData) {
+            return /*#__PURE__*/ _react.default.createElement(_index.default, (0, _object_spread_props._)((0, _object_spread._)({}, mergedLottieProps), {
+                // @ts-ignore
+                ref: loadingLottieRef,
+                source: rest.jsonData
+            }));
+        }
+        var LoadingIcon = loadingMap[rest.type] || _iconsreacttaro.Loading1;
+        return /*#__PURE__*/ _react.default.createElement(LoadingIcon, {
+            className: "".concat(classPrefix, "-icon")
+        });
+    };
+    var iconboxClassName = function iconboxClassName() {
+        if (rest.type === 'lottie') return "".concat(classPrefix, "-lottie-box");
+        return "".concat(classPrefix, "-icon-box");
+    };
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: (0, _classnames.default)(classPrefix, direction === 'vertical' ? "".concat(classPrefix, "-vertical") : '', className),
         style: style
     }, /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "".concat(classPrefix, "-icon-box")
-    }, icon || /*#__PURE__*/ _react.default.createElement(CurLoadingIcon, {
-        className: "".concat(classPrefix, "-icon")
-    })), children ? /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: iconboxClassName()
+    }, icon || getLoadingIcon()), children ? /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-text")
-    }, children) : '');
-};
+    }, children) : null);
+});
 Loading.displayName = 'NutLoading';

package/dist/cjs/packages/loading/style/loading.scss

@@ -21,9 +21,15 @@
       font-size: $loading-icon-size;
     }
   }
+  .nut-loading-lottie-box {
+    width: 56px;
+    height: 56px;
+    border-radius: $radius-base;
+    background: $loading-lottie-background;
+  }
 
   .nut-loading-text {
-    padding: 8px;
+    padding-top: $spacing-base;
     color: $loading-color;
     font-size: $loading-font-size;
   }

package/dist/cjs/packages/loading/style/style.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-loading {
   display: inline-flex;
   flex-direction: row;
@@ -14,14 +18,20 @@
   animation: nut-loading-rotation 1s infinite linear;
 }
 .nut-loading .nut-loading-icon-box .nut-loading-icon {
-  color: var(--nutui-loading-icon-color, var(--nutui-color-text-help, #888b94));
+  color: var(--nutui-loading-icon-color, var(--nutui-gray-5));
   width: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12px));
   height: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12px));
   font-size: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12px));
 }
+.nut-loading .nut-loading-lottie-box {
+  width: 56px;
+  height: 56px;
+  border-radius: var(--nutui-radius-base, 8px);
+  background: var(--nutui-loading-lottie-background, rgba(0, 0, 0, 0.06));
+}
 .nut-loading .nut-loading-text {
-  padding: 8px;
-  color: var(--nutui-loading-color, var(--nutui-color-text-help, #888b94));
+  padding-top: var(--nutui-spacing-base, 8px);
+  color: var(--nutui-loading-color, var(--nutui-gray-5));
   font-size: var(--nutui-loading-font-size, var(--nutui-font-size-s, 12px));
 }
 

package/dist/cjs/packages/loading/types.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { LottieProps } from '../lottie/types';
+import { BasicComponent } from "../../utils/typings";
+export type LoadingRef = any;
+export type LoadingType = 'spinner' | 'circular' | 'lottie';
+export type LoadingDirection = 'horizontal' | 'vertical';
+export interface LoadingProps extends BasicComponent {
+    type: LoadingType;
+    jsonData: any;
+    lottieProps: Partial<LottieProps>;
+    direction: LoadingDirection;
+    icon?: ReactNode;
+}

package/dist/cjs/packages/loading/types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/cjs/packages/lottie/index.d.ts

@@ -0,0 +1,4 @@
+import { ComponentType } from 'react';
+import { LottieProps } from './types';
+declare const Lottie: ComponentType<Partial<LottieProps>>;
+export default Lottie;

package/dist/cjs/packages/lottie/index.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _web = require("./web");
+var _mp = require("./mp");
+var implementation;
+if (process.env.TARO_ENV === 'h5') {
+    implementation = _web.Lottie;
+} else if (process.env.TARO_ENV === 'weapp') {
+    implementation = _mp.Lottie;
+} else {
+    throw new Error("不支持的 TARO_ENV: ".concat(process.env.TARO_ENV));
+}
+var Lottie = implementation;
+var _default = Lottie;

package/dist/cjs/packages/lottie/mp.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LottieProps } from './types';
+export declare const Lottie: React.ForwardRefExoticComponent<Omit<LottieProps, "ref"> & React.RefAttributes<unknown>>;

package/dist/cjs/packages/lottie/mp.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Lottie", {
+    enumerable: true,
+    get: function() {
+        return Lottie;
+    }
+});
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var _taro = require("@tarojs/taro");
+var _components = require("@tarojs/components");
+var _lottieminiprogram = /*#__PURE__*/ _interop_require_default._(require("lottie-miniprogram"));
+var _useuuid = /*#__PURE__*/ _interop_require_default._(require("../../utils/use-uuid"));
+var Lottie = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
+    var uuid = (0, _useuuid.default)();
+    var id = "nutLottie-".concat(uuid);
+    var animation = (0, _react.useRef)();
+    var inited = (0, _react.useRef)(false);
+    var source = props.source, _props_loop = props.loop, loop = _props_loop === void 0 ? true : _props_loop, _props_autoPlay = props.autoPlay, autoPlay = _props_autoPlay === void 0 ? true : _props_autoPlay, onComplete = props.onComplete, style = props.style, _props_speed = props.speed, speed = _props_speed === void 0 ? 1 : _props_speed;
+    var setSpeed = function setSpeed() {
+        if (animation.current) {
+            animation.current.setSpeed(Math.abs(speed));
+            animation.current.setDirection(speed > 0 ? 1 : -1);
+        }
+    };
+    (0, _react.useImperativeHandle)(ref, function() {
+        return animation.current || {};
+    });
+    var dpr = (0, _react.useRef)((0, _taro.getSystemInfoSync)().pixelRatio);
+    (0, _taro.useReady)(function() {
+        (0, _taro.createSelectorQuery)().select("#".concat(id)).fields({
+            node: true,
+            size: true
+        }, function(res) {
+            try {
+                var canvas = res.node;
+                var context = canvas.getContext('2d');
+                // scale canvas to adapt dpr
+                if (style && style.width !== undefined && style.height !== undefined) {
+                    canvas.width = parseFloat(style.width.toString()) * dpr.current;
+                    canvas.height = parseFloat(style.height.toString()) * dpr.current;
+                    context.scale(dpr.current, dpr.current);
+                }
+                _lottieminiprogram.default.setup(canvas);
+                animation.current = _lottieminiprogram.default.loadAnimation({
+                    animationData: source,
+                    loop: loop,
+                    autoplay: autoPlay,
+                    rendererSettings: {
+                        context: context
+                    }
+                });
+                onComplete && animation.current.addEventListener('complete', onComplete);
+                setSpeed();
+                inited.current = true;
+            } catch (error) {
+                console.error(error);
+            }
+        }).exec();
+    });
+    (0, _taro.useUnload)(function() {
+        onComplete && animation.current && animation.current.removeEventListener('complete', onComplete);
+        animation.current && animation.current.destroy();
+    });
+    return /*#__PURE__*/ _react.default.createElement(_components.Canvas, {
+        id: id,
+        "canvas-id": id,
+        type: "2d",
+        style: style
+    });
+});
+Lottie.displayName = 'NutLottie';

package/dist/cjs/packages/lottie/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/cjs/packages/lottie/style/index.js

@@ -0,0 +1 @@
+import './lottie.scss';

package/dist/cjs/packages/lottie/style/style.css

@@ -0,0 +1,4 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */

package/dist/cjs/packages/lottie/types.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { LottieOptions } from 'lottie-react';
+import { BasicComponent } from "../../utils/typings";
+export interface LottieProps extends Omit<LottieOptions, 'animationData'>, BasicComponent {
+    style: React.CSSProperties;
+    source: NonNullable<unknown>;
+    loop: boolean | number;
+    autoPlay: boolean;
+    initialSegment: [number, number];
+    speed: number;
+}

package/dist/cjs/packages/lottie/types.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _react = /*#__PURE__*/ _interop_require_default._(require("react"));

package/dist/cjs/packages/lottie/web.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LottieProps } from './types';
+export declare const Lottie: React.ForwardRefExoticComponent<Omit<Partial<LottieProps>, "ref"> & React.RefAttributes<unknown>>;

package/dist/cjs/packages/lottie/web.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Lottie", {
+    enumerable: true,
+    get: function() {
+        return Lottie;
+    }
+});
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _lottiereact = /*#__PURE__*/ _interop_require_default._(require("lottie-react"));
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var Lottie = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
+    var loadingLottieRef = (0, _react.useRef)(null);
+    var style = props.style, source = props.source, autoPlay = props.autoPlay, rest = (0, _object_without_properties._)(props, [
+        "style",
+        "source",
+        "autoPlay"
+    ]);
+    (0, _react.useImperativeHandle)(ref, function() {
+        return loadingLottieRef.current;
+    });
+    return /*#__PURE__*/ _react.default.createElement(_lottiereact.default, (0, _object_spread_props._)((0, _object_spread._)({}, rest), {
+        lottieRef: loadingLottieRef,
+        animationData: source,
+        style: style
+    }));
+});
+Lottie.displayName = 'NutLottie';

package/dist/cjs/packages/menu/style/style.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-overlay {
   /* #ifdef rn */
   position: absolute;
@@ -11,16 +15,10 @@
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10));
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
-[dir=rtl] .nut-overlay,
-.nut-rtl .nut-overlay {
-  left: auto;
-  right: 0;
-}
-
 .nut-overflow-hidden {
   overflow: hidden !important;
 }
@@ -58,13 +56,19 @@
   animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
 }
 
+[dir=rtl] .nut-overlay,
+.nut-rtl .nut-overlay {
+  left: auto;
+  right: 0;
+}
+
 .nut-menu-container-content {
   padding: var(--nutui-menu-content-padding, 12px 24px);
   max-height: var(--nutui-menu-content-max-height, 214px);
   overflow-y: auto;
   display: flex;
   flex-wrap: wrap;
-  background: var(--nutui-menu-content-background-color, var(--nutui-color-background-overlay, #ffffff));
+  background: var(--nutui-menu-content-background-color, var(--nutui-gray-1));
 }
 .nut-menu-container-content_fixed {
   width: 100%;
@@ -74,13 +78,13 @@
 .nut-menu-container-item {
   display: flex;
   align-items: center;
-  color: var(--nutui-color-title, #1a1a1a);
+  color: var(--nutui-gray-7);
   font-size: var(--nutui-font-size-base, 14px);
   padding: var(--nutui-menu-item-padding, 12px 0);
 }
 .nut-menu-container-item.active {
   font-weight: var(--nutui-menu-item-active-font-weight, var(--nutui-font-weight-bold, 600));
-  color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-menu-item-active-color, var(--nutui-brand-6));
 }
 .nut-menu-container-item .nut-icon {
   display: inline-flex;
@@ -181,7 +185,7 @@
   position: relative;
   display: flex;
   line-height: var(--nutui-menu-bar-line-height, 48px);
-  background-color: var(--nutui-color-background-overlay, #ffffff);
+  background-color: var(--nutui-gray-1);
   box-shadow: var(--nutui-menu-bar-box-shadow, 0 2px 12px rgba(89, 89, 89, 0.12));
 }
 .nut-menu-bar.opened {
@@ -192,7 +196,7 @@
   flex: 1;
   text-align: center;
   font-size: var(--nutui-menu-title-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-menu-title-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-menu-title-color, var(--nutui-gray-7));
   min-width: 0;
   display: flex;
   align-items: center;
@@ -211,10 +215,10 @@
   transition: all 0.2s linear;
 }
 .nut-menu-title.active {
-  color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-menu-item-active-color, var(--nutui-brand-6));
 }
 .nut-menu-title.disabled {
-  color: var(--nutui-menu-item-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-menu-item-disabled-color, var(--nutui-gray-4));
 }
 .nut-menu-title.active .nut-menu-title-icon {
   transform: rotate(180deg);

package/dist/cjs/packages/menuitem/style/style.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-overlay {
   /* #ifdef rn */
   position: absolute;
@@ -11,16 +15,10 @@
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10));
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
-[dir=rtl] .nut-overlay,
-.nut-rtl .nut-overlay {
-  left: auto;
-  right: 0;
-}
-
 .nut-overflow-hidden {
   overflow: hidden !important;
 }
@@ -58,13 +56,19 @@
   animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
 }
 
+[dir=rtl] .nut-overlay,
+.nut-rtl .nut-overlay {
+  left: auto;
+  right: 0;
+}
+
 .nut-menu-container-content {
   padding: var(--nutui-menu-content-padding, 12px 24px);
   max-height: var(--nutui-menu-content-max-height, 214px);
   overflow-y: auto;
   display: flex;
   flex-wrap: wrap;
-  background: var(--nutui-menu-content-background-color, var(--nutui-color-background-overlay, #ffffff));
+  background: var(--nutui-menu-content-background-color, var(--nutui-gray-1));
 }
 .nut-menu-container-content_fixed {
   width: 100%;
@@ -74,13 +78,13 @@
 .nut-menu-container-item {
   display: flex;
   align-items: center;
-  color: var(--nutui-color-title, #1a1a1a);
+  color: var(--nutui-gray-7);
   font-size: var(--nutui-font-size-base, 14px);
   padding: var(--nutui-menu-item-padding, 12px 0);
 }
 .nut-menu-container-item.active {
   font-weight: var(--nutui-menu-item-active-font-weight, var(--nutui-font-weight-bold, 600));
-  color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-menu-item-active-color, var(--nutui-brand-6));
 }
 .nut-menu-container-item .nut-icon {
   display: inline-flex;

package/dist/cjs/packages/navbar/navbar.d.ts

@@ -5,7 +5,7 @@ export interface NavBarProps extends BasicComponent {
     left: React.ReactNode;
     back: React.ReactNode;
     right: React.ReactNode;
-    titleAlign: 'center' | 'left';
+    title: React.ReactNode;
     fixed: boolean;
     safeAreaInsetTop: boolean;
     placeholder: boolean;