@nutui/nutui-react 3.0.0-beta.7 → 3.0.0-beta.8

package/dist/es/packages/tabbar/style/style.css

@@ -6,74 +6,97 @@
   position: relative;
   display: inline-flex;
   width: auto;
-  /* #ifdef harmony */
-  min-width: 1px;
-  /* #endif */
-  /* #ifndef harmony */
-  min-width: auto;
-  /* #endif */
 }
 .nut-badge-icon {
-  position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
-  background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
-  padding: var(--nutui-badge-icon-padding, 3px);
+  background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
+  padding: var(--nutui-badge-icon-padding, 2px);
   text-align: center;
-  border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
-  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
   z-index: var(--nutui-badge-z-index, 1);
 }
 .nut-badge-icon .nut-icon {
-  width: var(--nutui-badge-icon-size, 12px);
-  height: var(--nutui-badge-icon-size, 12px);
-  font-size: var(--nutui-badge-icon-size, 12px);
+  width: var(--nutui-badge-icon-size, 10px);
+  height: var(--nutui-badge-icon-size, 10px);
+  font-size: var(--nutui-badge-icon-size, 10px);
 }
-.nut-badge-sup {
-  height: var(--nutui-badge-height, 14px);
+.nut-badge-sup, .nut-badge-icon {
+  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
+}
+.nut-badge-sup::after, .nut-badge-icon::after {
+  content: "";
   position: absolute;
-  display: flex;
+  top: -50%;
+  bottom: -50%;
+  left: -50%;
+  right: -50%;
+  transform: scale(0.5);
+  border: var(--nutui-badge-border, 1px solid var(--nutui-color-primary-text, #ffffff));
+  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
+}
+.nut-badge-sup {
+  display: inline-flex;
   justify-content: center;
-  align-items: center;
+  height: var(--nutui-badge-height, 14px);
+  min-width: var(--nutui-badge-min-width, 6px);
+  padding: var(--nutui-badge-padding, 1px 4px);
+  box-sizing: border-box;
+  color: var(--nutui-badge-color, var(--nutui-color-primary-text, #ffffff));
+  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
+  line-height: 12px;
+  white-space: nowrap;
+  font-weight: normal;
+  vertical-align: middle;
+  background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
+  z-index: 1;
+}
+.nut-badge-number {
+  font-family: "JD";
   /* #ifdef harmony */
-  background: var(--nutui-color-primary, #ff0f23);
+  line-height: 12px;
   /* #endif */
   /* #ifndef harmony */
-  background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
+  line-height: 13px;
   /* #endif */
-  color: var(--nutui-badge-color, #fff);
-  padding: var(--nutui-badge-padding, 0 4px);
-  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
-  font-weight: normal;
-  text-align: center;
-  border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
-  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
-  min-width: var(--nutui-badge-min-width, 5px);
-  white-space: nowrap;
-  z-index: 1;
 }
 .nut-badge-one {
   height: var(--nutui-badge-height, 14px);
   width: var(--nutui-badge-height, 14px);
-  padding: 0;
 }
 .nut-badge-content {
-  /* #ifndef rn */
-  transform: var(--nutui-badge-content-transform, translateX(100%));
-  /* #endif */
+  position: absolute;
+  transform: var(--nutui-badge-content-transform, translate(50%, -50%));
 }
 .nut-badge-dot {
-  width: var(--nutui-badge-dot-width, 7px);
-  height: var(--nutui-badge-dot-width, 7px);
-  border: var(--nutui-badge-dot-border, 0px solid var(--nutui-color-primary-text, #ffffff));
-  border-radius: var(--nutui-badge-dot-width, 7px);
   padding: 0;
+  border-radius: 50%;
+}
+.nut-badge-dot::after {
+  border: var(--nutui-badge-dot-border, 1px solid var(--nutui-color-primary-text, #ffffff));
+  border-radius: 50%;
+}
+.nut-badge-dot-normal {
+  min-width: var(--nutui-badge-dot-width, 6px);
+  width: var(--nutui-badge-dot-width, 6px);
+  height: var(--nutui-badge-dot-width, 6px);
+}
+.nut-badge-dot-small {
+  min-width: var(--nutui-badge-dot-width, 4px);
+  width: var(--nutui-badge-dot-width, 4px);
+  height: var(--nutui-badge-dot-width, 4px);
+}
+.nut-badge-dot-large {
+  min-width: var(--nutui-badge-dot-width, 8px);
+  width: var(--nutui-badge-dot-width, 8px);
+  height: var(--nutui-badge-dot-width, 8px);
 }
 .nut-badge-outline {
   background: var(--nutui-color-primary-text, #ffffff);
-  border: 1px solid var(--nutui-color-primary, #ff0f23);
-  color: var(--nutui-color-primary, #ff0f23);
+  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-color-primary, #ff0f23));
 }
 
 .nut-tabbar-item {

package/dist/es/packages/tabbaritem/style/style.css

@@ -6,74 +6,97 @@
   position: relative;
   display: inline-flex;
   width: auto;
-  /* #ifdef harmony */
-  min-width: 1px;
-  /* #endif */
-  /* #ifndef harmony */
-  min-width: auto;
-  /* #endif */
 }
 .nut-badge-icon {
-  position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
-  background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
-  padding: var(--nutui-badge-icon-padding, 3px);
+  background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
+  padding: var(--nutui-badge-icon-padding, 2px);
   text-align: center;
-  border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
-  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
   z-index: var(--nutui-badge-z-index, 1);
 }
 .nut-badge-icon .nut-icon {
-  width: var(--nutui-badge-icon-size, 12px);
-  height: var(--nutui-badge-icon-size, 12px);
-  font-size: var(--nutui-badge-icon-size, 12px);
+  width: var(--nutui-badge-icon-size, 10px);
+  height: var(--nutui-badge-icon-size, 10px);
+  font-size: var(--nutui-badge-icon-size, 10px);
 }
-.nut-badge-sup {
-  height: var(--nutui-badge-height, 14px);
+.nut-badge-sup, .nut-badge-icon {
+  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
+}
+.nut-badge-sup::after, .nut-badge-icon::after {
+  content: "";
   position: absolute;
-  display: flex;
+  top: -50%;
+  bottom: -50%;
+  left: -50%;
+  right: -50%;
+  transform: scale(0.5);
+  border: var(--nutui-badge-border, 1px solid var(--nutui-color-primary-text, #ffffff));
+  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
+}
+.nut-badge-sup {
+  display: inline-flex;
   justify-content: center;
-  align-items: center;
+  height: var(--nutui-badge-height, 14px);
+  min-width: var(--nutui-badge-min-width, 6px);
+  padding: var(--nutui-badge-padding, 1px 4px);
+  box-sizing: border-box;
+  color: var(--nutui-badge-color, var(--nutui-color-primary-text, #ffffff));
+  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
+  line-height: 12px;
+  white-space: nowrap;
+  font-weight: normal;
+  vertical-align: middle;
+  background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
+  z-index: 1;
+}
+.nut-badge-number {
+  font-family: "JD";
   /* #ifdef harmony */
-  background: var(--nutui-color-primary, #ff0f23);
+  line-height: 12px;
   /* #endif */
   /* #ifndef harmony */
-  background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
+  line-height: 13px;
   /* #endif */
-  color: var(--nutui-badge-color, #fff);
-  padding: var(--nutui-badge-padding, 0 4px);
-  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
-  font-weight: normal;
-  text-align: center;
-  border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
-  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
-  min-width: var(--nutui-badge-min-width, 5px);
-  white-space: nowrap;
-  z-index: 1;
 }
 .nut-badge-one {
   height: var(--nutui-badge-height, 14px);
   width: var(--nutui-badge-height, 14px);
-  padding: 0;
 }
 .nut-badge-content {
-  /* #ifndef rn */
-  transform: var(--nutui-badge-content-transform, translateX(100%));
-  /* #endif */
+  position: absolute;
+  transform: var(--nutui-badge-content-transform, translate(50%, -50%));
 }
 .nut-badge-dot {
-  width: var(--nutui-badge-dot-width, 7px);
-  height: var(--nutui-badge-dot-width, 7px);
-  border: var(--nutui-badge-dot-border, 0px solid var(--nutui-color-primary-text, #ffffff));
-  border-radius: var(--nutui-badge-dot-width, 7px);
   padding: 0;
+  border-radius: 50%;
+}
+.nut-badge-dot::after {
+  border: var(--nutui-badge-dot-border, 1px solid var(--nutui-color-primary-text, #ffffff));
+  border-radius: 50%;
+}
+.nut-badge-dot-normal {
+  min-width: var(--nutui-badge-dot-width, 6px);
+  width: var(--nutui-badge-dot-width, 6px);
+  height: var(--nutui-badge-dot-width, 6px);
+}
+.nut-badge-dot-small {
+  min-width: var(--nutui-badge-dot-width, 4px);
+  width: var(--nutui-badge-dot-width, 4px);
+  height: var(--nutui-badge-dot-width, 4px);
+}
+.nut-badge-dot-large {
+  min-width: var(--nutui-badge-dot-width, 8px);
+  width: var(--nutui-badge-dot-width, 8px);
+  height: var(--nutui-badge-dot-width, 8px);
 }
 .nut-badge-outline {
   background: var(--nutui-color-primary-text, #ffffff);
-  border: 1px solid var(--nutui-color-primary, #ff0f23);
-  color: var(--nutui-color-primary, #ff0f23);
+  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-color-primary, #ff0f23));
 }
 
 .nut-tabbar-item {

package/dist/nutui.react.umd.js

@@ -5369,15 +5369,86 @@ Check the top-level render call using <` + t + ">.");
       return !!right[Symbol.hasInstance](left);
     } else return left instanceof right;
   }
+  var getIcon = function(icon) {
+    return React.isValidElement(icon) ? React.cloneElement(icon, {
+      // @ts-ignore
+      className: "nut-icon"
+    }) : icon;
+  };
   var defaultProps$1m = _object_spread_props(_object_spread({}, ComponentDefaults), {
+    icon: null,
+    onClick: function(event) {
+    }
+  });
+  var classPrefix$m = "nut-hoverbutton-item";
+  var HoverButtonItem = function(props) {
+    var _$_object_spread = _object_spread({}, defaultProps$1m, props), className = _$_object_spread.className, children = _$_object_spread.children, style = _$_object_spread.style, icon = _$_object_spread.icon, onClick = _$_object_spread.onClick;
+    var handleClick2 = function(event) {
+      if (onClick) {
+        onClick(event);
+      }
+    };
+    var renderBody = function() {
+      if (icon && !children) return /* @__PURE__ */ React.createElement("div", {
+        className: "".concat(classPrefix$m, "-icon")
+      }, getIcon(icon));
+      if (icon && children) {
+        return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+          className: classNames(_define_property({}, "".concat(classPrefix$m, "-text-icon"), true))
+        }), getIcon(icon), /* @__PURE__ */ React.createElement("div", {
+          className: classNames(_define_property({}, "".concat(classPrefix$m, "-text"), true))
+        }, children));
+      }
+    };
+    return /* @__PURE__ */ React.createElement("div", {
+      className: classNames([
+        "".concat(classPrefix$m, "-container"),
+        className
+      ], _define_property({}, "".concat(classPrefix$m, "-container-icontext"), icon && children)),
+      style,
+      onClick: handleClick2
+    }, renderBody());
+  };
+  HoverButtonItem.displayName = "NutHoverButtonItem";
+  var UI_BOTTOM_DISTANCE = 60;
+  var defaultProps$1l = _object_spread({}, ComponentDefaults);
+  var classPrefix$l = "nut-hoverbutton";
+  var HoverButton = function(props) {
+    var _$_object_spread = _object_spread({}, defaultProps$1l, props), children = _$_object_spread.children, zIndex = _$_object_spread.zIndex, tabbarHeight = _$_object_spread.tabbarHeight, className = _$_object_spread.className, style = _$_object_spread.style, icon = _$_object_spread.icon, onClick = _$_object_spread.onClick;
+    var rtl = useRtl();
+    var baseStyle = _object_spread({}, style);
+    if (tabbarHeight) {
+      var bottom = tabbarHeight + UI_BOTTOM_DISTANCE;
+      baseStyle.bottom = "".concat(bottom, "px");
+    }
+    if (typeof zIndex !== "undefined") {
+      baseStyle.zIndex = zIndex;
+    }
+    return /* @__PURE__ */ React.createElement("div", {
+      className: classNames([
+        "".concat(classPrefix$l, "-container"),
+        className
+      ], _define_property({}, "".concat(classPrefix$l, "-container-rtl"), rtl)),
+      style: baseStyle
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: classPrefix$l
+    }, children || icon && /* @__PURE__ */ React.createElement(HoverButtonItem, {
+      icon,
+      onClick
+    })), /* @__PURE__ */ React.createElement(SafeArea, {
+      position: "bottom"
+    }));
+  };
+  HoverButton.displayName = "NutHoverButton";
+  HoverButton.Item = HoverButtonItem;
+  var defaultProps$1k = _object_spread_props(_object_spread({}, ComponentDefaults), {
     target: "",
     threshold: 200,
     zIndex: 900,
     duration: 1e3
   });
   var BackTop = function(props) {
-    var rtl = useRtl();
-    var _$_object_spread = _object_spread({}, defaultProps$1m, props), children = _$_object_spread.children, target = _$_object_spread.target, threshold = _$_object_spread.threshold, zIndex = _$_object_spread.zIndex, className = _$_object_spread.className, duration = _$_object_spread.duration, style = _$_object_spread.style, onClick = _$_object_spread.onClick;
+    var _$_object_spread = _object_spread({}, defaultProps$1k, props), children = _$_object_spread.children, target = _$_object_spread.target, threshold = _$_object_spread.threshold, zIndex = _$_object_spread.zIndex, className = _$_object_spread.className, duration = _$_object_spread.duration, icon = _$_object_spread.icon, style = _$_object_spread.style, onClick = _$_object_spread.onClick;
     var classPrefix2 = "nut-backtop";
     var _useState = _sliced_to_array(React.useState(false), 2), backTop = _useState[0], setBackTop = _useState[1];
     var _useState1 = _sliced_to_array(React.useState(0), 2), scrollTop = _useState1[0], setScrollTop = _useState1[1];
@@ -5456,27 +5527,21 @@ Check the top-level render call using <` + t + ">.");
       scroll,
       scrollAnimation
     ]);
-    var styles = React.useMemo(function() {
-      var _obj;
-      return Object.keys(style || {}).length !== 0 ? _object_spread({
-        zIndex
-      }, style) : (_obj = {}, _define_property(_obj, rtl ? "left" : "right", "10px"), _define_property(_obj, "bottom", "20px"), _define_property(_obj, "zIndex", zIndex), _obj);
-    }, [
-      rtl,
-      style,
-      zIndex
-    ]);
-    return /* @__PURE__ */ React.createElement("div", {
+    return /* @__PURE__ */ React.createElement(HoverButton, {
       className: cls,
-      style: styles,
+      style: _object_spread({
+        zIndex
+      }, style),
+      icon: !children && (icon || /* @__PURE__ */ React.createElement(s$1, null)),
       onClick: function(e) {
         goTop(e);
       }
-    }, children || /* @__PURE__ */ React.createElement(s$1, {
-      width: 19,
-      height: 19,
-      className: "nut-backtop-main"
-    }));
+    }, children && /* @__PURE__ */ React.createElement("div", {
+      className: "nut-hoverbutton-item-container",
+      onClick: function(e) {
+        goTop(e);
+      }
+    }, children));
   };
   BackTop.displayName = "NutBackTop";
   function clamp$2(v, min, max) {
@@ -10404,7 +10469,7 @@ Please add \`${key}Action\` when creating your handler.`);
   });
   const animated = host.animated;
   var elevatorContext = /* @__PURE__ */ React.createContext({});
-  var defaultProps$1l = _object_spread_props(_object_spread({}, ComponentDefaults), {
+  var defaultProps$1j = _object_spread_props(_object_spread({}, ComponentDefaults), {
     height: "200px",
     floorKey: "title",
     list: [],
@@ -10414,7 +10479,7 @@ Please add \`${key}Action\` when creating your handler.`);
     showKeys: true
   });
   var Elevator = function(props) {
-    var _ref = _object_spread({}, defaultProps$1l, props), height = _ref.height, floorKey = _ref.floorKey, list = _ref.list, sticky = _ref.sticky, spaceHeight = _ref.spaceHeight;
+    var _ref = _object_spread({}, defaultProps$1j, props), height = _ref.height, floorKey = _ref.floorKey, list = _ref.list, sticky = _ref.sticky, spaceHeight = _ref.spaceHeight;
     _ref.titleHeight;
     var showKeys = _ref.showKeys, className = _ref.className, style = _ref.style, onItemClick = _ref.onItemClick, onIndexClick = _ref.onIndexClick, children = _ref.children, rest = _object_without_properties(_ref, [
       "height",
@@ -10610,7 +10675,7 @@ Please add \`${key}Action\` when creating your handler.`);
   };
   Elevator.displayName = "NutElevator";
   Elevator.Context = elevatorContext;
-  var defaultProps$1k = _object_spread_props(_object_spread({}, ComponentDefaults), {
+  var defaultProps$1i = _object_spread_props(_object_spread({}, ComponentDefaults), {
     activeText: "",
     inactiveText: "",
     type: "right",
@@ -10621,7 +10686,7 @@ Please add \`${key}Action\` when creating your handler.`);
   });
   var FixedNav = function(props) {
     var locale = useConfig().locale;
-    var _ref = _object_spread({}, defaultProps$1k, props), className = _ref.className, overlay = _ref.overlay, visible = _ref.visible, list = _ref.list, activeText = _ref.activeText, inactiveText = _ref.inactiveText, position = _ref.position, onChange = _ref.onChange, onSelect = _ref.onSelect, type2 = _ref.type, children = _ref.children, style = _ref.style, content = _ref.content, rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps$1i, props), className = _ref.className, overlay = _ref.overlay, visible = _ref.visible, list = _ref.list, activeText = _ref.activeText, inactiveText = _ref.inactiveText, position = _ref.position, onChange = _ref.onChange, onSelect = _ref.onSelect, type2 = _ref.type, children = _ref.children, style = _ref.style, content = _ref.content, rest = _object_without_properties(_ref, [
       "className",
       "overlay",
       "visible",
@@ -10689,78 +10754,6 @@ Please add \`${key}Action\` when creating your handler.`);
     }, visible ? activeText || locale.fixednav.activeText : inactiveText || locale.fixednav.inactiveText))));
   };
   FixedNav.displayName = "NutFixedNav";
-  var getIcon = function(icon) {
-    return React.isValidElement(icon) ? React.cloneElement(icon, {
-      // @ts-ignore
-      className: "nut-icon"
-    }) : icon;
-  };
-  var defaultProps$1j = _object_spread_props(_object_spread({}, ComponentDefaults), {
-    icon: null,
-    onClick: function(event) {
-    }
-  });
-  var classPrefix$m = "nut-hoverbutton-item";
-  var HoverButtonItem = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps$1j, props), className = _$_object_spread.className, children = _$_object_spread.children, style = _$_object_spread.style, icon = _$_object_spread.icon, onClick = _$_object_spread.onClick;
-    var handleClick2 = function(event) {
-      if (onClick) {
-        onClick(event);
-      }
-    };
-    var renderBody = function() {
-      if (icon && !children) return /* @__PURE__ */ React.createElement("div", {
-        className: "".concat(classPrefix$m, "-icon")
-      }, getIcon(icon));
-      if (icon && children) {
-        return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-          className: classNames(_define_property({}, "".concat(classPrefix$m, "-text-icon"), true))
-        }), getIcon(icon), /* @__PURE__ */ React.createElement("div", {
-          className: classNames(_define_property({}, "".concat(classPrefix$m, "-text"), true))
-        }, children));
-      }
-    };
-    return /* @__PURE__ */ React.createElement("div", {
-      className: classNames([
-        "".concat(classPrefix$m, "-container"),
-        className
-      ], _define_property({}, "".concat(classPrefix$m, "-container-icontext"), icon && children)),
-      style,
-      onClick: handleClick2
-    }, renderBody());
-  };
-  HoverButtonItem.displayName = "NutHoverButtonItem";
-  var UI_BOTTOM_DISTANCE = 60;
-  var defaultProps$1i = _object_spread({}, ComponentDefaults);
-  var classPrefix$l = "nut-hoverbutton";
-  var HoverButton = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps$1i, props), children = _$_object_spread.children, zIndex = _$_object_spread.zIndex, tabbarHeight = _$_object_spread.tabbarHeight, className = _$_object_spread.className, style = _$_object_spread.style, icon = _$_object_spread.icon, onClick = _$_object_spread.onClick;
-    var rtl = useRtl();
-    var baseStyle = _object_spread({}, style);
-    if (tabbarHeight) {
-      var bottom = tabbarHeight + UI_BOTTOM_DISTANCE;
-      baseStyle.bottom = "".concat(bottom, "px");
-    }
-    if (typeof zIndex !== "undefined") {
-      baseStyle.zIndex = zIndex;
-    }
-    return /* @__PURE__ */ React.createElement("div", {
-      className: classNames([
-        "".concat(classPrefix$l, "-container"),
-        className
-      ], _define_property({}, "".concat(classPrefix$l, "-container-rtl"), rtl)),
-      style: baseStyle
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: classPrefix$l
-    }, children || icon && /* @__PURE__ */ React.createElement(HoverButtonItem, {
-      icon,
-      onClick
-    })), /* @__PURE__ */ React.createElement(SafeArea, {
-      position: "bottom"
-    }));
-  };
-  HoverButton.displayName = "NutHoverButton";
-  HoverButton.Item = HoverButtonItem;
   var defaultProps$1h = _object_spread_props(_object_spread({}, ComponentDefaults), {
     left: "",
     right: "",
@@ -11225,10 +11218,10 @@ Please add \`${key}Action\` when creating your handler.`);
     value: "",
     dot: false,
     max: 99,
-    top: "4",
-    right: "8",
-    color: "",
-    fill: "solid"
+    top: 0,
+    right: 0,
+    fill: "solid",
+    size: "large"
   });
   var Badge = function(props) {
     var content = function content2() {
@@ -11249,28 +11242,16 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     var _this;
     var rtl = useRtl();
-    var _$_object_spread = _object_spread({}, defaultProps$1d, 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, color = _$_object_spread.color, fill = _$_object_spread.fill;
+    var _$_object_spread = _object_spread({}, defaultProps$1d, 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 classPrefix2 = "nut-badge";
-    var classes = classNames(classPrefix2, className, _define_property({}, "".concat(classPrefix2, "-").concat(fill), fill === "outline"));
+    var classes = classNames(classPrefix2, className);
     var _obj;
-    var contentClasses = classNames("".concat(classPrefix2, "-content"), (_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-sup"), isNumber() || isString() || dot), _define_property(_obj, "".concat(classPrefix2, "-one"), typeof content() === "string" && ((_this = "".concat(content())) === null || _this === void 0 ? void 0 : _this.length) === 1), _define_property(_obj, "".concat(classPrefix2, "-dot"), dot), _define_property(_obj, "".concat(classPrefix2, "-").concat(fill), fill === "outline"), _obj));
-    var getStyle = function() {
+    var contentClasses = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-sup"), isNumber() || isString() || dot), _define_property(_obj, "".concat(classPrefix2, "-number"), isNumber()), _define_property(_obj, "".concat(classPrefix2, "-one"), typeof content() === "string" && ((_this = "".concat(content())) === null || _this === void 0 ? void 0 : _this.length) === 1), _define_property(_obj, "".concat(classPrefix2, "-dot"), dot), _define_property(_obj, "".concat(classPrefix2, "-dot-").concat(size), dot), _define_property(_obj, "".concat(classPrefix2, "-").concat(fill), fill === "outline"), _define_property(_obj, "".concat(classPrefix2, "-content"), children), _obj));
+    var getPositionStyle = function() {
       var style2 = {};
-      style2.top = "".concat(Number(-top) || parseFloat(String(-top)) || 0, "px");
+      style2.top = "".concat(Number(top) || 0, "px");
       var dir = rtl ? "left" : "right";
       style2[dir] = "".concat(Number(right) || parseFloat(String(right)) || 0, "px");
-      if (color) {
-        if (fill === "outline") {
-          style2.color = color;
-          style2.background = "#fff";
-          if (!(color === null || color === void 0 ? void 0 : color.includes("gradient"))) {
-            style2.border = "1px solid ".concat(color);
-          }
-        } else {
-          style2.color = "#fff";
-          style2.background = color;
-        }
-      }
       return style2;
     };
     var _obj1;
@@ -11278,10 +11259,11 @@ Please add \`${key}Action\` when creating your handler.`);
       className: classes,
       style
     }, isIcon() && /* @__PURE__ */ React.createElement("div", {
-      className: classNames("".concat(classPrefix2, "-content"), (_obj1 = {}, _define_property(_obj1, "".concat(classPrefix2, "-icon"), true), _define_property(_obj1, "".concat(classPrefix2, "-icon-rtl"), rtl), _obj1))
+      className: classNames("".concat(classPrefix2, "-content"), (_obj1 = {}, _define_property(_obj1, "".concat(classPrefix2, "-icon"), true), _define_property(_obj1, "".concat(classPrefix2, "-icon-rtl"), rtl), _obj1)),
+      style: getPositionStyle()
     }, value), children, !isIcon() && /* @__PURE__ */ React.createElement("div", {
       className: contentClasses,
-      style: getStyle()
+      style: getPositionStyle()
     }, content()));
   };
   Badge.displayName = "NutBadge";

package/dist/styles/variables.scss

@@ -960,12 +960,6 @@ $tour-content-bottom-btn-border-radius: var(
   4px
 ) !default;
 
-//backtop（✅）
-$backtop-border-color: var(
-  --nutui-backtop-border-color,
-  $color-border
-) !default;
-
 // calendar（✅）
 $calendar-active-background-color: var(
   --nutui-calendar-active-background-color,
@@ -1025,6 +1019,7 @@ $hoverbutton-position-right: var(
   --nutui-hoverbutton-position-right,
   $spacing-base
 ) !default;
+$hoverbutton-item-size: var(--nutui-hoverbutton-item-size, 40px) !default;
 $hoverbutton-item-border-color: var(
   --nutui-hoverbutton-item-border-color,
   rgba(0, 0, 0, 0.12)
@@ -1602,26 +1597,33 @@ $tag-mark-border-radius: var(
 $badge-height: var(--nutui-badge-height, 14px) !default;
 $badge-background-color: var(
   --nutui-badge-background-color,
-  $color-primary-gradient-1
+  $color-primary
 ) !default;
-$badge-color: var(--nutui-badge-color, #fff) !default;
+$badge-color: var(--nutui-badge-color, $color-primary-text) !default;
 $badge-font-size: var(--nutui-badge-font-size, $font-size-xxs) !default;
 $badge-border: var(
   --nutui-badge-border,
-  0px solid $color-primary-text
+  1px solid $color-primary-text
 ) !default;
 $badge-border-radius: var(--nutui-badge-border-radius, $badge-height) !default;
-$badge-min-width: var(--nutui-badge-min-width, 5px) !default;
-$badge-padding: var(--nutui-badge-padding, 0 4px) !default;
-$badge-icon-padding: var(--nutui-badge-icon-padding, 3px) !default;
-$badge-icon-size: var(--nutui-badge-icon-size, 12px) !default;
+$badge-min-width: var(--nutui-badge-min-width, 6px) !default;
+$badge-padding: var(--nutui-badge-padding, 1px 4px) !default;
+$badge-icon-padding: var(--nutui-badge-icon-padding, 2px) !default;
+$badge-icon-size: var(--nutui-badge-icon-size, 10px) !default;
 $badge-content-transform: var(
   --nutui-badge-content-transform,
-  translateX(100%)
+  translate(50%, -50%)
 ) !default;
 $badge-z-index: var(--nutui-badge-z-index, 1) !default;
-$badge-dot-width: var(--nutui-badge-dot-width, 7px) !default;
-$badge-dot-border: var(--nutui-badge-dot-border, 0px solid $color-primary-text);
+$badge-dot-width: var(--nutui-badge-dot-width, 6px) !default;
+$badge-dot-small-width: var(--nutui-badge-dot-width, 4px) !default;
+$badge-dot-large-width: var(--nutui-badge-dot-width, 8px) !default;
+$badge-dot-border: var(--nutui-badge-dot-border, 1px solid $color-primary-text);
+$badge-outline-color: var(--nutui-badge-outline-color, $color-primary) !default;
+$badge-outline-border: var(
+  --nutui-badge-outline-border,
+  1px solid $color-primary
+);
 
 //popover（✅）
 $popover-border-radius: var(--nutui-popover-border-radius, 8px) !default;
@@ -2423,6 +2425,10 @@ $countup-border-radius: var(--nutui-countup-border-radius, 4px) !default;
 $countup-lr-margin: var(--nutui-countup-lr-margin, 0) !default;
 $countup-bg-color: var(--nutui-countup-bg-color, inherit) !default;
 $countup-color: var(--nutui-countup-color, $color-title) !default;
+$countup-separator-color: var(
+  --nutui-countup-separator-color,
+  $color-title
+) !default;
 
 // layout（✅）
 $row-content-color: var(--nutui-row-content-color, #fff) !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui-react",
-  "version": "3.0.0-beta.7",
+  "version": "3.0.0-beta.8",
   "style": "dist/style.css",
   "main": "dist/nutui.react.umd.js",
   "module": "dist/es/packages/nutui.react.build.js",