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

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

@@ -24,7 +24,7 @@
   display: flex;
   height: 80%;
   align-items: flex-end;
-  color: var(--nutui-countup-bg-color, inherit);
+  color: var(--nutui-countup-separator-color, var(--nutui-color-title, #1a1a1a));
   font-size: var(--nutui-countup-base-size, 18px);
   font-weight: var(--nutui-font-weight-bold, 600);
 }

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

@@ -1,9 +1,8 @@
 import React, { FunctionComponent } from 'react';
-import type { MouseEvent } from 'react';
 import { PageScrollObject } from '@tarojs/taro';
 import { ITouchEvent } from '@tarojs/components';
-import { BasicComponent } from "../../utils/typings";
-export interface BackTopProps extends BasicComponent {
+import { HoverButtonProps } from "../hoverbutton/index";
+export interface BackTopProps extends HoverButtonProps {
     threshold: number;
     zIndex: number;
     duration: number;
@@ -11,6 +10,6 @@ export interface BackTopProps extends BasicComponent {
      * 容器滚动时的回调参数，主要用于 rn、鸿蒙端
      */
     scrollRes?: PageScrollObject;
-    onClick?: (event: React.MouseEvent<Element, MouseEvent> | ITouchEvent) => void;
+    onClick?: (event: React.MouseEvent<HTMLDivElement> | ITouchEvent) => void;
 }
 export declare const BackTop: FunctionComponent<Partial<BackTopProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'>>;

package/dist/cjs/packages/backtop/backtop.js

@@ -17,38 +17,28 @@ var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _taro = require("@tarojs/taro");
 var _components = require("@tarojs/components");
-var _iconsreacttaro = require("@nutui/icons-react-taro");
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
+var _iconsreacttaro = require("@nutui/icons-react-taro");
 var _typings = require("../../utils/typings");
-var _index = require("../configprovider/index");
+var _index = /*#__PURE__*/ _interop_require_default._(require("../hoverbutton/index"));
 var _platformtaro = require("../../utils/platform-taro");
-var _pxtransform = /*#__PURE__*/ _interop_require_default._(require("../../utils/px-transform"));
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     threshold: 200,
     zIndex: 900,
     duration: 1000
 });
-var isNative = (0, _platformtaro.harmonyAndRn)();
 var BackTop = function BackTop(props) {
-    var rtl = (0, _index.useRtl)();
-    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, threshold = _$_object_spread.threshold, zIndex = _$_object_spread.zIndex, className = _$_object_spread.className, duration = _$_object_spread.duration, style = _$_object_spread.style, scrollRes = _$_object_spread.scrollRes, onClick = _$_object_spread.onClick;
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, threshold = _$_object_spread.threshold, zIndex = _$_object_spread.zIndex, className = _$_object_spread.className, duration = _$_object_spread.duration, icon = _$_object_spread.icon, style = _$_object_spread.style, scrollRes = _$_object_spread.scrollRes, onClick = _$_object_spread.onClick;
     var classPrefix = 'nut-backtop';
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), backTop = _useState[0], setBackTop = _useState[1];
-    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), isTouchStart = _useState1[0], setTouchStart = _useState1[1];
     var _obj;
-    var cls = (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-show"), backTop), (0, _define_property._)(_obj, "".concat(classPrefix, "-show-active"), isNative && isTouchStart), (0, _define_property._)(_obj, "".concat(classPrefix, "-rn"), (0, _platformtaro.rn)()), _obj), className);
+    var cls = (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-show"), backTop), (0, _define_property._)(_obj, "".concat(classPrefix, "-rn"), (0, _platformtaro.rn)()), _obj), className);
     var systemInfo = (0, _react.useRef)({});
     (0, _react.useEffect)(function() {
         (0, _taro.getSystemInfo)().then(function(res) {
             systemInfo.current = res;
         });
     }, []);
-    var handleActiveStart = (0, _react.useCallback)(function() {
-        isNative && setTouchStart(true);
-    }, []);
-    var handleActiveEnd = (0, _react.useCallback)(function() {
-        isNative && setTouchStart(false);
-    }, []);
     var onScroll = (0, _react.useCallback)(function(res) {
         var scrollTop = res.scrollTop;
         setBackTop(scrollTop >= threshold);
@@ -75,28 +65,20 @@ var BackTop = function BackTop(props) {
         duration,
         onClick
     ]);
-    var styles = (0, _react.useMemo)(function() {
-        var _obj;
-        return Object.keys(style || {}).length !== 0 ? (0, _object_spread._)({
-            zIndex: zIndex
-        }, style) : (_obj = {}, (0, _define_property._)(_obj, rtl ? 'left' : 'right', (0, _pxtransform.default)(10)), (0, _define_property._)(_obj, "bottom", (0, _pxtransform.default)(20)), (0, _define_property._)(_obj, "zIndex", zIndex), _obj);
-    }, [
-        rtl,
-        style,
-        zIndex
-    ]);
-    return /*#__PURE__*/ _react.default.createElement(_components.View, {
+    return /*#__PURE__*/ _react.default.createElement(_index.default, {
         className: cls,
-        style: styles,
+        style: (0, _object_spread._)({
+            zIndex: zIndex
+        }, style),
+        icon: !children && (icon || /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Top, null)),
+        onClick: function onClick(e) {
+            goTop(e);
+        }
+    }, children && /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "nut-hoverbutton-item-container",
         onClick: function onClick(e) {
             goTop(e);
-        },
-        onTouchStart: handleActiveStart,
-        onTouchEnd: handleActiveEnd,
-        onTouchCancel: handleActiveEnd
-    }, children || /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Top, {
-        size: 19,
-        className: "nut-backtop-main"
-    }));
+        }
+    }, children));
 };
 BackTop.displayName = 'NutBackTop';

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

@@ -1,31 +1,22 @@
 .nut-backtop {
   display: none;
-  position: fixed;
 
   &-rn {
     position: absolute;
   }
 
   &-show {
-    width: 40px;
-    height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: $color-background-overlay;
-    color: $color-title;
-    border: 1px solid $backtop-border-color;
-    border-radius: 21px;
-    z-index: 100;
-
-    &:active,
-    &-active {
-      background: $color-background;
-    }
-  }
-
-  &-main {
+    width: $hoverbutton-item-size;
+    height: $hoverbutton-item-size;
     transition: all 0.2s ease-in-out;
-    color: $color-title;
+    .nut-hoverbutton-item-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
   }
 }

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

@@ -4,27 +4,21 @@
 /* #endif */
 .nut-backtop {
   display: none;
-  position: fixed;
 }
 .nut-backtop-rn {
   position: absolute;
 }
 .nut-backtop-show {
-  width: 40px;
-  height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-color-background-overlay, #ffffff);
-  color: var(--nutui-color-title, #1a1a1a);
-  border: 1px solid var(--nutui-backtop-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
-  border-radius: 21px;
-  z-index: 100;
-}
-.nut-backtop-show:active, .nut-backtop-show-active {
-  background: var(--nutui-color-background, #f5f6fa);
-}
-.nut-backtop-main {
+  width: var(--nutui-hoverbutton-item-size, 40px);
+  height: var(--nutui-hoverbutton-item-size, 40px);
   transition: all 0.2s ease-in-out;
-  color: var(--nutui-color-title, #1a1a1a);
+}
+.nut-backtop-show .nut-hoverbutton-item-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }

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

@@ -1,13 +1,3 @@
-import { FunctionComponent, ReactNode } from 'react';
-import { BasicComponent } from "../../utils/typings";
-export type BadgeFill = 'solid' | 'outline';
-export interface BadgeProps extends BasicComponent {
-    value: ReactNode;
-    dot: boolean;
-    max: number;
-    top: string | number;
-    right: string | number;
-    color: string;
-    fill: BadgeFill;
-}
+import { FunctionComponent } from 'react';
+import { BadgeProps } from './types';
 export declare const Badge: FunctionComponent<Partial<BadgeProps>>;

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

@@ -23,16 +23,15 @@ var _components = require("@tarojs/components");
 var _typings = require("../../utils/typings");
 var _index = require("../configprovider/index");
 var _pxtransform = /*#__PURE__*/ _interop_require_default._(require("../../utils/px-transform"));
-var _getrectbytaro = require("../../utils/get-rect-by-taro");
 var _platformtaro = require("../../utils/platform-taro");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     value: '',
     dot: false,
     max: 99,
-    top: '4',
-    right: '8',
-    color: '',
-    fill: 'solid'
+    top: 0,
+    right: 0,
+    fill: 'solid',
+    size: 'large'
 });
 var Badge = function Badge(props) {
     var content = function content() {
@@ -53,14 +52,14 @@ var Badge = function Badge(props) {
     };
     var _this;
     var rtl = (0, _index.useRtl)();
-    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, color = _$_object_spread.color, fill = _$_object_spread.fill;
+    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 isHarmony = (0, _platformtaro.harmony)();
     var classes = (0, _classnames.default)(classPrefix, className);
     var badgeRef = (0, _react.useRef)(null);
     var _useState = (0, _sliced_to_array._)((0, _react.useState)({}), 2), contentStyle = _useState[0], setContentStyle = _useState[1];
     var _obj;
-    var contentClasses = (0, _classnames.default)("".concat(classPrefix, "-content"), (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-sup"), isNumber() || isString() || dot), (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, "-").concat(fill), fill === 'outline'), _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));
     (0, _react.useEffect)(function() {
         if (badgeRef.current) {
             getPositionStyle();
@@ -68,59 +67,22 @@ var Badge = function Badge(props) {
     }, []);
     var getPositionStyle = /*#__PURE__*/ function() {
         var _ref = (0, _async_to_generator._)(function() {
-            var style, reacts, dir;
+            var style, dir;
             return (0, _ts_generator._)(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        style = {};
-                        style.top = (0, _pxtransform.default)(-Number(top) || 0);
-                        if (!(0, _platformtaro.rn)()) return [
-                            3,
-                            2
-                        ];
-                        return [
-                            4,
-                            (0, _getrectbytaro.getRectByTaro)(badgeRef.current)
-                        ];
-                    case 1:
-                        reacts = _state.sent();
-                        style.left = (reacts === null || reacts === void 0 ? void 0 : reacts.width) && (reacts === null || reacts === void 0 ? void 0 : reacts.width) > Number(right) ? (0, _pxtransform.default)(reacts.width - Number(right)) : 0;
-                        return [
-                            3,
-                            3
-                        ];
-                    case 2:
-                        dir = rtl ? 'left' : 'right';
-                        style[dir] = isHarmony ? (0, _pxtransform.default)(Number(right)) : "".concat(Number(right) || parseFloat(String(right)) || 0, "px");
-                        _state.label = 3;
-                    case 3:
-                        setContentStyle(style);
-                        return [
-                            2
-                        ];
-                }
+                style = {};
+                style.top = (0, _pxtransform.default)(Number(top) || 0);
+                dir = rtl ? 'left' : 'right';
+                style[dir] = isHarmony ? (0, _pxtransform.default)(Number(right)) : "".concat(Number(right) || 0, "px");
+                setContentStyle(style);
+                return [
+                    2
+                ];
             });
         });
         return function getPositionStyle() {
             return _ref.apply(this, arguments);
         };
     }();
-    var getStyle = function getStyle() {
-        var style = {};
-        if (color) {
-            if (fill === 'outline') {
-                style.color = color;
-                isHarmony ? style.backgroundColor = '#fff' : style.background = '#fff';
-                if (!(color === null || color === void 0 ? void 0 : color.includes('gradient'))) {
-                    style.borderColor = color;
-                }
-            } else {
-                style.color = '#fff';
-                isHarmony ? style.backgroundColor = color : style.background = color;
-            }
-        }
-        return style;
-    };
     var _obj1;
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: classes,
@@ -131,7 +93,7 @@ var Badge = function Badge(props) {
         style: contentStyle
     }, value), children, !isIcon() && /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: contentClasses,
-        style: (0, _object_spread._)({}, contentStyle, getStyle())
+        style: contentStyle
     }, content()));
 };
 Badge.displayName = 'NutBadge';

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

@@ -1,3 +1,3 @@
 import { Badge } from "./badge";
-export type { BadgeFill, BadgeProps } from "./badge";
+export type { BadgeFill, BadgeDotSize, BadgeProps } from './types';
 export default Badge;

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

@@ -2,22 +2,14 @@
   position: relative;
   display: inline-flex;
   width: auto;
-  /* #ifdef harmony */
-  min-width: 1px;
-  /* #endif */
-  /* #ifndef harmony */
-  min-width: auto;
-  /* #endif */
+
   &-icon {
-    position: absolute;
     display: flex;
     justify-content: center;
     align-items: center;
     background: $badge-background-color;
     padding: $badge-icon-padding;
     text-align: center;
-    border: $badge-border;
-    border-radius: $badge-border-radius;
     z-index: $badge-z-index;
 
     .nut-icon {
@@ -27,53 +19,88 @@
     }
   }
 
+  &-sup,
+  &-icon {
+    border-radius: $badge-border-radius;
+    &::after {
+      content: '';
+      position: absolute;
+      top: -50%;
+      bottom: -50%;
+      left: -50%;
+      right: -50%;
+      transform: scale(0.5);
+      border: $badge-border;
+      border-radius: $badge-border-radius;
+    }
+  }
+
   &-sup {
-    height: $badge-height;
-    position: absolute;
-    display: flex;
+    display: inline-flex;
     justify-content: center;
-    align-items: center;
-    /* #ifdef harmony */
-    background: $color-primary;
-    /* #endif */
-    /* #ifndef harmony */
-    background: $badge-background-color;
-    /* #endif */
-    color: $badge-color;
+    height: $badge-height;
+    min-width: $badge-min-width;
     padding: $badge-padding;
+    box-sizing: border-box;
+    color: $badge-color;
     font-size: $badge-font-size;
-    font-weight: normal;
-    text-align: center;
-    border: $badge-border;
-    border-radius: $badge-border-radius;
-    min-width: $badge-min-width;
+    line-height: 12px;
     white-space: nowrap;
+    font-weight: normal;
+    vertical-align: middle;
+    background: $badge-background-color;
     z-index: 1;
   }
 
+  &-number {
+    font-family: 'JD';
+    /* #ifdef harmony */
+    line-height: 12px;
+    /* #endif */
+    /* #ifndef harmony */
+    line-height: 13px;
+    /* #endif */
+  }
+
   &-one {
     height: $badge-height;
     width: $badge-height;
-    padding: 0;
   }
 
   &-content {
-    /* #ifndef rn */
+    position: absolute;
     transform: $badge-content-transform;
-    /* #endif */
   }
 
   &-dot {
-    width: $badge-dot-width;
-    height: $badge-dot-width;
-    border: $badge-dot-border;
-    border-radius: $badge-dot-width;
     padding: 0;
+    border-radius: 50%;
+    &::after {
+      border: $badge-dot-border;
+      border-radius: 50%;
+    }
+    &-normal {
+      min-width: $badge-dot-width;
+      width: $badge-dot-width;
+      height: $badge-dot-width;
+    }
+    &-small {
+      min-width: $badge-dot-small-width;
+      width: $badge-dot-small-width;
+      height: $badge-dot-small-width;
+    }
+    &-large {
+      min-width: $badge-dot-large-width;
+      width: $badge-dot-large-width;
+      height: $badge-dot-large-width;
+    }
   }
 
   &-outline {
     background: $color-primary-text;
-    border: 1px solid $color-primary;
-    color: $color-primary;
+    color: $badge-outline-color;
+    &::after {
+      border: $badge-outline-border;
+    }
   }
 }

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

@@ -6,72 +6,95 @@
   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));
 }

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

@@ -0,0 +1,12 @@
+import { BasicComponent } from "../../utils/typings";
+export type BadgeFill = 'solid' | 'outline';
+export type BadgeDotSize = 'small' | 'normal' | 'large';
+export interface BadgeProps extends BasicComponent {
+    value: React.ReactNode;
+    dot: boolean;
+    max: number;
+    top: string | number;
+    right: string | number;
+    fill: BadgeFill;
+    size: BadgeDotSize;
+}

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

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