@nutui/nutui-react 3.0.0-beta.11 → 3.0.0-beta.13

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

@@ -6,10 +6,10 @@
   position: relative;
   display: flex;
   display: inline-block;
-  /* #ifdef rn harmony*/
+  /* #ifdef harmony*/
   width: 80px;
   /* #endif */
-  /* #ifndef rn harmony*/
+  /* #ifndef harmony*/
   width: auto;
   /* #endif */
   flex-direction: row;
@@ -29,7 +29,7 @@
   touch-action: manipulation;
   -webkit-appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  color: var(--nutui-button-default-color, var(--nutui-gray-7));
+  color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a));
   background: var(--nutui-button-default-background-color, transparent);
   border-width: var(--nutui-button-border-width, 0.5px);
 }
@@ -50,9 +50,9 @@
   left: 50%;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-black-10);
+  background-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
   border: inherit;
-  border-color: var(--nutui-black-10);
+  border-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
   border-radius: inherit;
   transform: translate(-50%, -50%);
   opacity: 0;
@@ -71,7 +71,7 @@
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  /* #ifndef rn harmony */
+  /* #ifndef harmony */
   background: initial;
   /* #endif */
 }
@@ -109,20 +109,20 @@
 .nut-button-default {
   padding: var(--nutui-button-default-padding, 0px 12px);
   border-style: solid;
-  border-color: var(--nutui-button-default-border-color, var(--nutui-gray-4));
+  border-color: var(--nutui-button-default-border-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-button-default-disabled, .nut-button-default-solid-disabled {
   color: var(--nutui-button-primary-color, #ffffff);
-  background: var(--nutui-button-default-disabled, var(--nutui-gray-4));
-  border-color: var(--nutui-button-default-disabled, var(--nutui-gray-4));
+  background: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+  border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-button-default-none-disabled {
-  color: var(--nutui-button-default-disabled-color, var(--nutui-gray-5));
+  color: var(--nutui-button-default-disabled-color, var(--nutui-color-text-help, #888b94));
 }
 .nut-button-default-outline-disabled, .nut-button-default-dashed-disabled {
   background: transparent;
-  color: var(--nutui-button-default-disabled, var(--nutui-gray-4));
-  border-color: var(--nutui-button-default-disabled, var(--nutui-gray-4));
+  color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+  border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-button-normal {
   padding: var(--nutui-button-normal-padding, 0px 12px);
@@ -214,37 +214,37 @@
 }
 .nut-button-primary-disabled, .nut-button-primary-solid-disabled {
   color: var(--nutui-button-primary-color, #ffffff);
-  background: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  background: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
 .nut-button-primary-none {
-  color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
+  color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-button-primary-none-disabled {
-  color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
 .nut-button-primary-outline {
-  color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
-  border-color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
+  color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+  border-color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-button-primary-outline-disabled {
-  color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
 .nut-button-primary-dashed {
-  color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
-  border-color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
+  color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+  border-color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-button-primary-dashed-disabled {
-  color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
 .nut-button-primary.nut-button-solid.nut-button-normal {
   font-weight: var(--nutui-font-weight-bold, 600);
 }
 .nut-button-success {
   color: var(--nutui-button-success-color, #ffffff);
-  background: var(--nutui-button-success-background-color, var(--nutui-green-2));
+  background: var(--nutui-button-success-background-color, var(--nutui-color-success, #00d900));
   background-origin: border-box;
   border-color: transparent;
 }
@@ -256,15 +256,15 @@
   border-color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
 }
 .nut-button-success-outline, .nut-button-success-dashed {
-  color: var(--nutui-button-success-border-color, var(--nutui-green-2));
-  border-color: var(--nutui-button-success-border-color, var(--nutui-green-2));
+  color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900));
+  border-color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900));
 }
 .nut-button-success-outline-disabled, .nut-button-success-dashed-disabled {
-  color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
 .nut-button-success-none {
-  color: var(--nutui-button-success-border-color, var(--nutui-green-2));
+  color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900));
 }
 .nut-button-success-none-disabled {
   color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
@@ -298,7 +298,7 @@
 }
 .nut-button-danger {
   color: var(--nutui-button-danger-color, #ffffff);
-  background: var(--nutui-button-danger-background-color, var(--nutui-red-2));
+  background: var(--nutui-button-danger-background-color, var(--nutui-color-danger, #ff0f23));
   background-origin: border-box;
   border-color: transparent;
 }
@@ -306,26 +306,26 @@
   color: var(--nutui-button-danger-color, #ffffff);
 }
 .nut-button-danger-solid-disabled {
-  background: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
-  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
+  background: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
+  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
 }
 .nut-button-danger-outline, .nut-button-danger-dashed {
-  color: var(--nutui-button-danger-border-color, var(--nutui-red-2));
-  border-color: var(--nutui-button-danger-border-color, var(--nutui-red-2));
+  color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
+  border-color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
 }
 .nut-button-danger-outline-disabled, .nut-button-danger-dashed-disabled {
-  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
-  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
+  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
+  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
 }
 .nut-button-danger-none {
-  color: var(--nutui-button-danger-border-color, var(--nutui-red-2));
+  color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
 }
 .nut-button-danger-none-disabled {
-  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
+  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
 }
 .nut-button-warning {
   color: var(--nutui-button-warning-color, #ffffff);
-  background: var(--nutui-button-warning-background-color, var(--nutui-yellow-2));
+  background: var(--nutui-button-warning-background-color, var(--nutui-color-warning, #ffbf00));
   background-origin: border-box;
   border-color: transparent;
 }
@@ -338,15 +338,15 @@
   border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
 }
 .nut-button-warning-outline, .nut-button-warning-dashed {
-  color: var(--nutui-button-warning-border-color, var(--nutui-yellow-2));
-  border-color: var(--nutui-button-warning-border-color, var(--nutui-yellow-2));
+  color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00));
+  border-color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00));
 }
 .nut-button-warning-outline-disabled, .nut-button-warning-dashed-disabled {
   color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
   border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
 }
 .nut-button-warning-none {
-  color: var(--nutui-button-warning-border-color, var(--nutui-yellow-2));
+  color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00));
 }
 .nut-button-warning-none-disabled {
   color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
@@ -409,7 +409,7 @@
   position: relative;
   height: var(--nutui-range-height, 4px);
   margin: 0 var(--nutui-range-margin, 15px);
-  background-color: var(--nutui-range-inactive-color, var(--nutui-brand-1));
+  background-color: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
   border-radius: 2px;
   flex: 1;
   cursor: pointer;
@@ -422,7 +422,7 @@
 }
 .nut-range-min, .nut-range-max {
   font-size: var(--nutui-font-size-s, 12px);
-  color: var(--nutui-range-color, var(--nutui-gray-7));
+  color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a));
   user-select: none;
 }
 .nut-range-bar {
@@ -432,7 +432,7 @@
   height: 100%;
   max-width: 100%;
   max-height: 100%;
-  background: var(--nutui-range-active-color, var(--nutui-brand-6));
+  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
   border-radius: 2px;
   transition: all 0.2s;
 }
@@ -444,7 +444,7 @@
   background: var(--nutui-range-button-background, #ffffff);
   border-radius: 50%;
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-  border: var(--nutui-range-button-border, 1px solid var(--nutui-brand-6));
+  border: var(--nutui-range-button-border, 1px solid var(--nutui-color-primary, #ff0f23));
   outline: none;
   align-items: center;
   top: 50%;
@@ -482,7 +482,7 @@
   justify-content: center;
   user-select: none;
   font-size: var(--nutui-font-size-s, 12px);
-  color: var(--nutui-range-color, var(--nutui-gray-7));
+  color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a));
   text-align: center;
   vertical-align: center;
   box-sizing: border-box;
@@ -526,10 +526,10 @@
   height: 11px;
   left: 0px;
   border-radius: 6px;
-  background: var(--nutui-range-inactive-color, var(--nutui-brand-1));
+  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
 }
 .nut-range-tick-active {
-  background: var(--nutui-range-active-color, var(--nutui-brand-6));
+  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
 }
 
 .nut-range-vertical-container {
@@ -592,10 +592,10 @@
   width: 10px;
   height: 10px;
   border-radius: 5px;
-  background: var(--nutui-range-inactive-color, var(--nutui-brand-1));
+  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
 }
 .nut-range-vertical-tick-active {
-  background: var(--nutui-range-active-color, var(--nutui-brand-6));
+  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
 }
 
 [dir=rtl] .nut-range-button-wrapper, [dir=rtl] .nut-range-button-wrapper-right,
@@ -658,7 +658,7 @@
   height: 30px;
   background: #ffffff;
   border-radius: 50%;
-  box-shadow: 0 0 8px var(--nutui-gray-4);
+  box-shadow: 0 0 8px var(--nutui-color-text-disabled, #c2c4cc);
 }
 .nut-audio-icon .nut-audio-icon-stop {
   position: relative;
@@ -671,7 +671,7 @@
   content: "";
   height: 2px;
   width: 30px;
-  background: var(--nutui-gray-4);
+  background: var(--nutui-color-text-disabled, #c2c4cc);
   transform: rotate(45deg);
   transform-origin: 8px -18px;
 }
@@ -706,7 +706,7 @@
   color: blue;
 }
 .nut-audio .nut-audio-none-container .nut-voice {
-  border: 1px solid var(--nutui-gray-7);
+  border: 1px solid var(--nutui-color-title, #1a1a1a);
   align-items: center;
 }
 

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

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import type { MouseEvent } from 'react';
-import { BasicComponent } from "../../utils/typings";
-import AvatarGroup from "../avatargroup";
+import { BasicComponent } from "../../../../src/utils/typings";
+import AvatarGroup from "../../../../src/packages/avatargroup";
 export interface AvatarProps extends BasicComponent {
     size: string;
     icon: React.ReactNode;

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

@@ -25,7 +25,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-gray-3);
+  background: var(--nutui-color-background, #f2f3f5);
   background-size: 100% 100%;
 }
 .nut-image-error {
@@ -38,7 +38,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-gray-3);
+  background: var(--nutui-color-background, #f2f3f5);
   background-size: 100% 100%;
 }
 

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

@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { BasicComponent } from "../../utils/typings";
+import { BasicComponent } from "../../../../src/utils/typings";
 export type AvatarCropperToolbarPosition = 'top' | 'bottom';
 export type AvatarCropperShape = 'square' | 'round';
 export interface AvatarCropperProps extends BasicComponent {

package/dist/cjs/packages/avatarcropper/avatarcropper.js

@@ -20,9 +20,9 @@ var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _button = /*#__PURE__*/ _interop_require_default._(require("../button"));
 var _typings = require("../../utils/typings");
-var _usetouch = require("../../utils/use-touch");
+var _usetouch = require("../../hooks/use-touch");
 var _utils = require("../../utils");
-var _useclientrect = require("../../utils/use-client-rect");
+var _useclientrect = require("../../hooks/use-client-rect");
 var _configprovider = require("../configprovider");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     maxZoom: 3,

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

@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { BasicComponent } from "../../utils/typings";
+import { BasicComponent } from "../../../../src/utils/typings";
 export interface AvatarGroupProps extends BasicComponent {
     maxContent: string;
     max: string | number;

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

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from 'react';
 import type { MouseEvent } from 'react';
-import { HoverButtonProps } from "../hoverbutton/index";
+import { HoverButtonProps } from "../../../../src/packages/hoverbutton/index";
 export interface BackTopProps extends HoverButtonProps {
     target: string;
     threshold: number;

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

@@ -1,10 +1,6 @@
 .nut-backtop {
   display: none;
 
-  &-rn {
-    position: absolute;
-  }
-
   &-show {
     display: flex;
     align-items: center;

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

@@ -33,8 +33,8 @@
   width: 20px;
   height: 20px;
   margin: 9px;
-  color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-gray-7));
-  fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-gray-7));
+  color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a));
+  fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-hoverbutton-item-icon .nut-icon {
   display: block;
@@ -43,8 +43,8 @@
   font-size: 20px;
 }
 .nut-hoverbutton-item-container:active .nut-hoverbutton-item-icon {
-  color: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-gray-7));
-  fill: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-gray-7));
+  color: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-color-title, #1a1a1a));
+  fill: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-color-title, #1a1a1a));
 }
 .nut-hoverbutton-item-text-icon {
   width: 14px;
@@ -67,9 +67,6 @@
   bottom: var(--nutui-hoverbutton-position-bottom, 60px);
   z-index: 10;
 }
-.nut-hoverbutton-container-rn {
-  position: absolute;
-}
 
 [dir=rtl] .nut-hoverbutton-container,
 .nut-hoverbutton-container-rtl {
@@ -108,8 +105,8 @@
   width: 20px;
   height: 20px;
   margin: 9px;
-  color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-gray-7));
-  fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-gray-7));
+  color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a));
+  fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-hoverbutton-item-icon .nut-icon {
   display: block;
@@ -118,8 +115,8 @@
   font-size: 20px;
 }
 .nut-hoverbutton-item-container:active .nut-hoverbutton-item-icon {
-  color: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-gray-7));
-  fill: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-gray-7));
+  color: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-color-title, #1a1a1a));
+  fill: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-color-title, #1a1a1a));
 }
 .nut-hoverbutton-item-text-icon {
   width: 14px;
@@ -134,9 +131,6 @@
 .nut-backtop {
   display: none;
 }
-.nut-backtop-rn {
-  position: absolute;
-}
 .nut-backtop-show {
   display: flex;
   align-items: center;

package/dist/cjs/packages/badge/badge.js

@@ -27,13 +27,6 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     size: 'large'
 });
 var Badge = function Badge(props) {
-    var content = function content() {
-        if (dot || (typeof value === "undefined" ? "undefined" : (0, _type_of._)(value)) === 'object' || value === 0) return null;
-        if (typeof value === 'number' && typeof max === 'number') {
-            return max < value ? "".concat(max, "+") : "".concat(value);
-        }
-        return value;
-    };
     var isIcon = function isIcon() {
         if ((typeof value === "undefined" ? "undefined" : (0, _type_of._)(value)) === 'object' && value) return value;
     };
@@ -48,14 +41,19 @@ var Badge = function Badge(props) {
     var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, value = _$_object_spread.value, max = _$_object_spread.max, children = _$_object_spread.children, dot = _$_object_spread.dot, top = _$_object_spread.top, right = _$_object_spread.right, fill = _$_object_spread.fill, size = _$_object_spread.size;
     var classPrefix = 'nut-badge';
     var classes = (0, _classnames.default)(classPrefix, className);
+    var getContent = function getContent() {
+        if (dot || value === 0) return null;
+        if (typeof value === 'number') {
+            return max < value ? "".concat(max, "+") : "".concat(value);
+        }
+        return value;
+    };
     var _obj;
-    var contentClasses = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-sup"), isNumber() || isString() || dot), (0, _define_property._)(_obj, "".concat(classPrefix, "-number"), isNumber()), (0, _define_property._)(_obj, "".concat(classPrefix, "-one"), typeof content() === 'string' && ((_this = "".concat(content())) === null || _this === void 0 ? void 0 : _this.length) === 1), (0, _define_property._)(_obj, "".concat(classPrefix, "-dot"), dot), (0, _define_property._)(_obj, "".concat(classPrefix, "-dot-").concat(size), dot), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(fill), fill === 'outline'), (0, _define_property._)(_obj, "".concat(classPrefix, "-content"), children), _obj));
+    var contentClasses = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-sup"), isNumber() || isString() || dot), (0, _define_property._)(_obj, "".concat(classPrefix, "-number"), isNumber()), (0, _define_property._)(_obj, "".concat(classPrefix, "-one"), typeof getContent() === 'string' && ((_this = "".concat(getContent())) === null || _this === void 0 ? void 0 : _this.length) === 1), (0, _define_property._)(_obj, "".concat(classPrefix, "-dot"), dot), (0, _define_property._)(_obj, "".concat(classPrefix, "-dot-").concat(size), dot), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(fill), fill === 'outline'), (0, _define_property._)(_obj, "".concat(classPrefix, "-content"), children), _obj));
     var getPositionStyle = function getPositionStyle() {
-        var style = {};
-        style.top = "".concat(Number(top) || 0, "px");
-        var dir = rtl ? 'left' : 'right';
-        style[dir] = "".concat(Number(right) || parseFloat(String(right)) || 0, "px");
-        return style;
+        return (0, _define_property._)({
+            top: "".concat(Number(top) || 0, "px")
+        }, rtl ? 'left' : 'right', "".concat(Number(right) || 0, "px"));
     };
     var _obj1;
     return /*#__PURE__*/ _react.default.createElement("div", {
@@ -64,9 +62,9 @@ var Badge = function Badge(props) {
     }, isIcon() && /*#__PURE__*/ _react.default.createElement("div", {
         className: (0, _classnames.default)("".concat(classPrefix, "-content"), (_obj1 = {}, (0, _define_property._)(_obj1, "".concat(classPrefix, "-icon"), true), (0, _define_property._)(_obj1, "".concat(classPrefix, "-icon-rtl"), rtl), _obj1)),
         style: getPositionStyle()
-    }, value), children, !isIcon() && /*#__PURE__*/ _react.default.createElement("div", {
+    }, value), children, !isIcon() && (getContent() || dot) && /*#__PURE__*/ _react.default.createElement("div", {
         className: contentClasses,
         style: getPositionStyle()
-    }, content()));
+    }, getContent()));
 };
 Badge.displayName = 'NutBadge';

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

@@ -11,7 +11,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background: var(--nutui-badge-background-color, var(--nutui-brand-6));
+  background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
   padding: var(--nutui-badge-icon-padding, 2px);
   text-align: center;
   z-index: var(--nutui-badge-z-index, 1);
@@ -48,7 +48,7 @@
   white-space: nowrap;
   font-weight: normal;
   vertical-align: middle;
-  background: var(--nutui-badge-background-color, var(--nutui-brand-6));
+  background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
   z-index: 1;
 }
 .nut-badge-number {
@@ -93,8 +93,8 @@
 }
 .nut-badge-outline {
   background: #ffffff;
-  color: var(--nutui-badge-outline-color, var(--nutui-brand-6));
+  color: var(--nutui-badge-outline-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-badge-outline::after {
-  border: var(--nutui-badge-outline-border, 1px solid var(--nutui-brand-6));
+  border: var(--nutui-badge-outline-border, 1px solid var(--nutui-color-primary, #ff0f23));
 }

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

@@ -1,4 +1,4 @@
-import { BasicComponent } from "../../utils/typings";
+import { BasicComponent } from "../../../../src/utils/typings";
 export type BadgeFill = 'solid' | 'outline';
 export type BadgeDotSize = 'small' | 'normal' | 'large';
 export interface BadgeProps extends BasicComponent {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BasicComponent } from "../../utils/typings";
+import { BasicComponent } from "../../../../src/utils/typings";
 export interface BarrageProps extends BasicComponent {
     list: Array<string>;
     interval: number;

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

@@ -10,8 +10,8 @@
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
-  background-color: var(--nutui-gray-3);
-  color: var(--nutui-gray-7);
+  background-color: var(--nutui-color-background, #f2f3f5);
+  color: var(--nutui-color-title, #1a1a1a);
 }
 .nut-barrage .barrage-item {
   display: block;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { MouseEvent } from 'react';
-import { BasicComponent } from "../../utils/typings";
+import { BasicComponent } from "../../../../src/utils/typings";
 export type ButtonType = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
 export type ButtonSize = 'xlarge' | 'large' | 'normal' | 'small' | 'mini';
 export type ButtonShape = 'square' | 'round';

package/dist/cjs/packages/button/button.js

@@ -31,7 +31,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     icon: null,
     rightIcon: null,
     nativeType: 'button',
-    onClick: function onClick(e) {}
+    onClick: function onClick() {}
 });
 var Button = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
     var _ref = (0, _object_spread._)({}, defaultProps, props), color = _ref.color, shape = _ref.shape, fill = _ref.fill, loading = _ref.loading, disabled = _ref.disabled, type = _ref.type, size = _ref.size, block = _ref.block, icon = _ref.icon, rightIcon = _ref.rightIcon, children = _ref.children, className = _ref.className, style = _ref.style, nativeType = _ref.nativeType, onClick = _ref.onClick, rest = (0, _object_without_properties._)(_ref, [
@@ -51,7 +51,7 @@ var Button = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
         "nativeType",
         "onClick"
     ]);
-    var getStyle = (0, _react.useCallback)(function() {
+    var getStyle = (0, _react.useMemo)(function() {
         var style = {};
         if (color) {
             if (props.fill === 'outline' || props.fill === 'dashed') {
@@ -70,26 +70,29 @@ var Button = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
         color,
         props.fill
     ]);
-    var handleClick = function handleClick(e) {
+    var handleClick = (0, _react.useCallback)(function(e) {
         if (!loading && !disabled && onClick) {
             onClick(e);
         }
-    };
+    }, [
+        loading,
+        disabled,
+        onClick
+    ]);
     var _obj;
+    var buttonClassNames = (0, _classnames.default)(prefixCls, "".concat(prefixCls, "-").concat(type), (_obj = {}, (0, _define_property._)(_obj, "".concat(prefixCls, "-").concat(type, "-solid"), type === 'primary' && !props.fill), (0, _define_property._)(_obj, "".concat(prefixCls, "-").concat(fill), props.fill), (0, _define_property._)(_obj, "".concat(prefixCls, "-").concat(type, "-").concat(fill), props.fill), (0, _define_property._)(_obj, "".concat(prefixCls, "-").concat(size), size), (0, _define_property._)(_obj, "".concat(prefixCls, "-").concat(shape), shape), (0, _define_property._)(_obj, "".concat(prefixCls, "-block"), block), (0, _define_property._)(_obj, "".concat(prefixCls, "-disabled"), disabled || loading), (0, _define_property._)(_obj, "".concat(prefixCls, "-").concat(type).concat(props.fill ? "-".concat(fill) : '', "-disabled"), disabled || loading), (0, _define_property._)(_obj, "".concat(prefixCls, "-loading"), loading), (0, _define_property._)(_obj, "".concat(prefixCls, "-icononly"), !children), _obj), className);
     return /*#__PURE__*/ _react.default.createElement("button", (0, _object_spread_props._)((0, _object_spread._)({}, rest), {
         ref: ref,
         type: nativeType,
-        className: (0, _classnames.default)(prefixCls, "".concat(prefixCls, "-").concat(type), type === 'primary' && !props.fill ? "".concat(prefixCls, "-").concat(type, "-solid") : null, props.fill ? "".concat(prefixCls, "-").concat(fill) : null, props.fill ? "".concat(prefixCls, "-").concat(type, "-").concat(fill) : null, children ? '' : "".concat(prefixCls, "-icononly"), (_obj = {}, (0, _define_property._)(_obj, "".concat(prefixCls, "-").concat(size), size), (0, _define_property._)(_obj, "".concat(prefixCls, "-").concat(shape), shape), (0, _define_property._)(_obj, "".concat(prefixCls, "-block"), block), (0, _define_property._)(_obj, "".concat(prefixCls, "-disabled"), disabled || loading), (0, _define_property._)(_obj, "".concat(prefixCls, "-").concat(type).concat(props.fill ? "-".concat(fill) : '', "-disabled"), disabled || loading), (0, _define_property._)(_obj, "".concat(prefixCls, "-loading"), loading), _obj), className),
-        style: (0, _object_spread._)({}, getStyle(), style),
-        onClick: function onClick(e) {
-            return handleClick(e);
-        }
+        className: buttonClassNames,
+        style: (0, _object_spread._)({}, getStyle, style),
+        onClick: handleClick
     }), /*#__PURE__*/ _react.default.createElement("div", {
         className: "nut-button-wrap"
     }, loading && /*#__PURE__*/ _react.default.createElement(_iconsreact.Loading, {
         className: "nut-icon-loading"
-    }), !loading && icon ? icon : null, children && /*#__PURE__*/ _react.default.createElement("div", {
+    }), !loading && icon, children && /*#__PURE__*/ _react.default.createElement("div", {
         className: "".concat(props.fill || disabled || loading ? "nut-button-".concat(type).concat(props.fill ? "-".concat(fill) : '').concat(disabled || loading ? '-disabled' : '') : '').concat(icon || loading ? ' nut-button-text' : '').concat(rightIcon ? ' nut-button-text-right' : '')
-    }, children), rightIcon || null));
+    }, children), rightIcon));
 });
 Button.displayName = 'NutButton';

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

@@ -2,10 +2,10 @@
   position: relative;
   display: flex;
   display: inline-block;
-  /* #ifdef rn harmony*/
+  /* #ifdef harmony*/
   width: 80px;
   /* #endif */
-  /* #ifndef rn harmony*/
+  /* #ifndef harmony*/
   width: auto;
   /* #endif */
   flex-direction: row;
@@ -72,7 +72,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    /* #ifndef rn harmony */
+    /* #ifndef harmony */
     background: initial;
     /* #endif */
     .nut-icon {