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

package/README.md

@@ -71,25 +71,55 @@ pnpm run dev
 # visit in browser: http：http://localhost:3000 (you don't have to open it manually if you've run it in the browser again)
 ```
 
-### running with mini-program
+### running with Taro
 
 ```sh
-# Clone repository
+# Clone the repository
 git clone https://github.com/jdf2e/nutui-react.git
 
-# Enter the project dictionary
+# Navigate to the project root directory
 cd nutui-react
 
 # Install dependencies
 pnpm install
 
-# Start development
-# dir：packages/nutui-taro-demo/dist/weapp
-pnpm run dev:taro:weapp
+# Enter mini-program development mode
+# Taro H5
+pnpm dev:taro h5
+# WeChat Mini Program
+pnpm dev:taro weapp
+# JD Mini Program
+pnpm dev:taro jd
+# For other platforms, refer to the scripts in the package.json file in the demo directory
+```
+
+### running with JDTaro
+
+1. Add a .npmrc file in the root directory of the repository with the following configuration:
+
+```shell
+git-branch-lockfile=true
+```
+
+```sh
+# Clone the repository
+git clone https://github.com/jdf2e/nutui-react.git
+
+# Navigate to the project root directory
+cd nutui-react
+
+# Install dependencies
+pnpm install
 
-# OR run as jd mini-program
-# dir：packages/nutui-taro-demo/dist/jd
-pnpm run dev:taro:jd
+# Enter mini-program development mode
+# Taro H5
+pnpm dev:jdtaro h5
+# WeChat Mini Program
+pnpm dev:jdtaro weapp
+# JD Mini Program
+pnpm dev:jdtaro jd
+# harmony cpp
+pnpm dev:jdtaro:jdharmonycpp
 ```
 
 ## Build Versions

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

@@ -51,6 +51,8 @@
   color: var(--nutui-color-primary, #ff0f23);
 }
 .nut-elevator-list-fixed {
+  display: flex;
+  align-items: center;
   width: 100%;
   position: absolute;
   top: 0;
@@ -58,14 +60,15 @@
   z-index: 1;
   padding: var(--nutui-elevator-list-item-padding, 0 20px);
   height: var(--nutui-elevator-list-item-code-height, 35px);
-  line-height: var(--nutui-elevator-list-item-code-line-height, 35px);
-  font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-elevator-list-fixed-color, var(--nutui-color-primary, #ff0f23));
-  font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold, 600));
   background-color: var(--nutui-elevator-list-fixed-bg-color, #ffffff);
   box-sizing: border-box;
   box-shadow: var(--nutui-elevator-list-fixed-box-shadow, 0 0 10px #eee);
 }
+.nut-elevator-list-fixed-title {
+  font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, 14px));
+  color: var(--nutui-elevator-list-fixed-color, var(--nutui-color-primary, #ff0f23));
+  font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold, 600));
+}
 .nut-elevator-code-current {
   position: absolute;
   right: var(--nutui-elevator-list-item-code-current-right, 60px);
@@ -544,12 +547,17 @@
   display: flex;
 }
 
+.nut-tabs-horizontal {
+  flex-direction: column;
+}
+
 .nut-tabs-titles {
   display: flex;
   box-sizing: border-box;
   height: var(--nutui-tabs-titles-height, 44px);
   user-select: none;
-  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
   background: var(--nutui-tabs-titles-background-color, var(--nutui-color-background, #f5f6fa));
   scrollbar-width: none;
 }
@@ -560,7 +568,6 @@
 }
 .nut-tabs-titles .nut-tabs-list {
   width: 100%;
-  height: auto;
   display: flex;
   flex-shrink: 0;
 }
@@ -576,10 +583,6 @@
 .nut-tabs-titles-right .nut-tabs-titles-item {
   padding: 0 22px;
 }
-.nut-tabs-titles-scrollable {
-  overflow-x: auto;
-  overflow-y: hidden;
-}
 .nut-tabs-titles-item {
   position: relative;
   display: flex;
@@ -595,11 +598,14 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.nut-tabs-titles-item .nut-icon {
+  color: var(--nutui-tabs-titles-item-color, var(--nutui-color-title, #1a1a1a));
+}
 .nut-tabs-titles-item-left, .nut-tabs-titles-item-right {
   flex: none;
 }
 .nut-tabs-titles-item-text {
-  text-align: center;
+  color: var(--nutui-tabs-titles-item-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-tabs-titles-item-smile, .nut-tabs-titles-item-line {
   position: absolute;
@@ -607,9 +613,9 @@
   width: 0;
   height: 0;
   content: " ";
-  bottom: var(--nutui-tabs-line-bottom, 15%);
   left: 50%;
   transform: translate(-50%, 0);
+  bottom: var(--nutui-tabs-line-bottom, 15%);
   border-radius: var(--nutui-tabs-line-border-radius, 2px);
   opacity: var(--nutui-tabs-tab-line-opacity, 1);
   overflow: hidden;
@@ -622,9 +628,11 @@
   font-size: 20px;
   width: 100%;
   height: 100%;
-  color: var(--nutui-color-primary, #ff0f23);
 }
-.nut-tabs-titles-item-active {
+.nut-tabs-titles-item-active .nut-icon {
+  color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-tabs-titles-item-active .nut-tabs-titles-item-text {
   color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23));
   font-weight: var(--nutui-tabs-titles-item-active-font-weight, var(--nutui-font-weight-bold, 600));
 }
@@ -640,10 +648,20 @@
   width: 40px;
   height: 20px;
 }
+.nut-tabs-titles-item-active .nut-tabs-titles-item-smile .nut-icon {
+  color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23));
+}
 .nut-tabs-titles-item-disabled {
   color: var(--nutui-color-text-disabled, #c2c4cc);
 }
-.nut-tabs-titles-simple .nut-tabs-titles-item-active {
+.nut-tabs-titles-item-disabled .nut-icon {
+  color: var(--nutui-color-text-disabled, #c2c4cc);
+}
+.nut-tabs-titles-item-disabled .nut-tabs-titles-item-text {
+  color: var(--nutui-color-text-disabled, #c2c4cc);
+}
+.nut-tabs-titles-simple .nut-tabs-titles-item-active .nut-tabs-titles-item-text,
+.nut-tabs-titles-simple .nut-tabs-titles-item-active .nut-icon {
   color: var(--nutui-color-title, #1a1a1a);
   font-size: var(--nutui-tabs-titles-item-active-font-size, var(--nutui-font-size-l, 16px));
 }
@@ -672,11 +690,10 @@
 }
 .nut-tabs-titles-button .nut-tabs-titles-item-active .nut-tabs-titles-item-text {
   background: var(--nutui-color-default-light);
-  color: var(--nutui-color-text, #505259);
+  color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23));
   border-radius: var(--nutui-tabs-button-border-radius, 50px);
   font-weight: var(--nutui-font-weight-bold, 600);
   background-color: var(--nutui-tabs-button-active-background-color, var(--nutui-color-primary-light-pressed, #ffebf1));
-  color: var(--nutui-color-primary, #ff0f23);
   border: var(--nutui-tabs-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
 }
 .nut-tabs-titles-divider {
@@ -701,68 +718,29 @@
   display: none;
 }
 
-[dir=rtl] .nut-tabs-titles-item-smile, [dir=rtl] .nut-tabs-titles-item-line,
-.nut-rtl .nut-tabs-titles-item-smile,
-.nut-rtl .nut-tabs-titles-item-line {
-  left: auto;
-  right: 50%;
-  transform: translate(50%, 0);
-}
-[dir=rtl] .nut-tabs-titles-divider .nut-tabs-titles-item::after,
-.nut-rtl .nut-tabs-titles-divider .nut-tabs-titles-item::after {
-  right: auto;
-  left: 0;
-}
-
-.nut-tabs-horizontal {
-  flex-direction: column;
-  position: relative;
-}
-
-.nut-tabs-vertical {
-  flex-direction: row;
-  width: 100%;
-}
 .nut-tabs-vertical .nut-tabs-ellipsis {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
 .nut-tabs-vertical .nut-tabs-titles {
-  box-sizing: border-box;
   flex-direction: column;
   height: 100%;
-  padding: 0;
   width: var(--nutui-tabs-vertical-titles-width, 100px);
   flex-shrink: 0;
 }
 .nut-tabs-vertical .nut-tabs-titles .nut-tabs-list {
-  width: 100%;
-  display: flex;
   flex-direction: column;
-  flex-shrink: 0;
-}
-.nut-tabs-vertical .nut-tabs-titles-line .nut-tabs-titles-item {
-  padding-left: 14px;
-}
-.nut-tabs-vertical .nut-tabs-titles-scrollable {
-  overflow-x: hidden;
-  overflow-y: auto;
 }
 .nut-tabs-vertical .nut-tabs-titles-item {
   height: var(--nutui-tabs-vertical-titles-item-height, 40px);
-  margin: 0;
   flex: none;
 }
 .nut-tabs-vertical .nut-tabs-titles-item-smile {
-  width: 0;
-  height: 0;
   overflow: hidden;
   transition: width 0.3s ease;
 }
 .nut-tabs-vertical .nut-tabs-titles-item-line {
-  width: 0;
-  height: 0;
   transform: translate(0, -50%);
   transition: height 0.3s ease;
 }
@@ -782,21 +760,17 @@
   right: -12px;
   bottom: -2%;
   left: auto;
-  width: 40px;
-  height: 20px;
   transform: rotate(320deg);
 }
 .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles {
   flex-direction: row;
-  overflow-x: auto;
-  overflow-y: hidden;
   height: var(--nutui-tabs-titles-height, 44px);
+  width: 100%;
+  padding: 0 !important;
 }
 .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles .nut-tabs-list {
-  width: 100%;
-  display: flex;
   flex-direction: row;
-  flex-shrink: 0;
+  height: auto;
 }
 .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-content {
   flex-direction: row;
@@ -807,6 +781,9 @@
 .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-line {
   left: 50%;
   transform: translate(-50%, 0);
+  width: var(--nutui-tabs-tab-line-width, 12px);
+  height: var(--nutui-tabs-tab-line-height, 2px);
+  background: var(--nutui-tabs-tab-line-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-smile {
   left: 50%;
@@ -824,28 +801,26 @@
 .nut-tabs-vertical .nut-tabs-content .nut-tabpane {
   height: 100%;
 }
-.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles {
+
+.nut-tabs-content {
   display: flex;
-  flex-direction: row;
-  padding: 0 !important;
-  width: 100%;
+  box-sizing: border-box;
 }
-.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles .nut-tabs-titles-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1 0 auto;
+.nut-tabs-content-wrap {
+  overflow: hidden;
 }
-.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles .nut-tabs-titles-item-active {
-  color: var(--nutui-color-primary, #ff0f23);
-  font-weight: var(--nutui-tabs-titles-item-active-font-weight, var(--nutui-font-weight-bold, 600));
-  font-size: var(--nutui-tabs-titles-item-active-font-size, var(--nutui-font-size-l, 16px));
+
+[dir=rtl] .nut-tabs-titles-item-smile, [dir=rtl] .nut-tabs-titles-item-line,
+.nut-rtl .nut-tabs-titles-item-smile,
+.nut-rtl .nut-tabs-titles-item-line {
+  left: auto;
+  right: 50%;
+  transform: translate(50%, 0);
 }
-.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles .nut-tabs-titles-item-active .nut-tabs-titles-item-line {
-  content: " ";
-  width: var(--nutui-tabs-tab-line-width, 12px);
-  height: var(--nutui-tabs-tab-line-height, 2px);
-  background: var(--nutui-tabs-tab-line-color, var(--nutui-color-primary, #ff0f23));
+[dir=rtl] .nut-tabs-titles-divider .nut-tabs-titles-item::after,
+.nut-rtl .nut-tabs-titles-divider .nut-tabs-titles-item::after {
+  right: auto;
+  left: 0;
 }
 
 [dir=rtl] .nut-tabs-vertical .nut-tabs-titles-line .nut-tabs-titles-item,
@@ -877,14 +852,6 @@
   transform: translate(50%, 0) rotate(0deg);
 }
 
-.nut-tabs-content {
-  display: flex;
-  box-sizing: border-box;
-}
-.nut-tabs-content-wrap {
-  overflow: hidden;
-}
-
 .nut-cascader {
   width: 100%;
   font-size: var(--nutui-cascader-font-size, var(--nutui-font-size-base, 14px));

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

@@ -1,7 +1,4 @@
 .nut-animate {
-  .nut-ani-container {
-    display: inline-block;
-  }
   /* Animation css */
   [class*='nut-animate-'] {
     animation-duration: 0.5s;

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

@@ -5,9 +5,6 @@
 .nut-animate {
   /* Animation css */
 }
-.nut-animate .nut-ani-container {
-  display: inline-block;
-}
 .nut-animate [class*=nut-animate-] {
   animation-duration: 0.5s;
   animation-timing-function: ease-out;

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,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import type { MouseEvent } from 'react';
-import { BasicComponent } from "../../utils/typings";
-export interface BackTopProps extends BasicComponent {
+import { HoverButtonProps } from "../hoverbutton/index";
+export interface BackTopProps extends HoverButtonProps {
     target: string;
     threshold: number;
     zIndex: number;

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

@@ -16,11 +16,11 @@ var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-var _iconsreact = require("@nutui/icons-react");
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
+var _iconsreact = require("@nutui/icons-react");
 var _typings = require("../../utils/typings");
 var _raf = /*#__PURE__*/ _interop_require_wildcard._(require("../../utils/raf"));
-var _configprovider = require("../configprovider");
+var _index = /*#__PURE__*/ _interop_require_default._(require("../hoverbutton/index"));
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     target: '',
     threshold: 200,
@@ -28,8 +28,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     duration: 1000
 });
 var BackTop = function BackTop(props) {
-    var rtl = (0, _configprovider.useRtl)();
-    var _$_object_spread = (0, _object_spread._)({}, defaultProps, 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 = (0, _object_spread._)({}, defaultProps, 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 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)(0), 2), scrollTop = _useState1[0], setScrollTop = _useState1[1];
@@ -108,26 +107,20 @@ var BackTop = function BackTop(props) {
         scroll,
         scrollAnimation
     ]);
-    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', '10px'), (0, _define_property._)(_obj, "bottom", '20px'), (0, _define_property._)(_obj, "zIndex", zIndex), _obj);
-    }, [
-        rtl,
-        style,
-        zIndex
-    ]);
-    return /*#__PURE__*/ _react.default.createElement("div", {
+    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(_iconsreact.Top, null)),
+        onClick: function onClick(e) {
+            goTop(e);
+        }
+    }, children && /*#__PURE__*/ _react.default.createElement("div", {
+        className: "nut-hoverbutton-item-container",
         onClick: function onClick(e) {
             goTop(e);
         }
-    }, children || /*#__PURE__*/ _react.default.createElement(_iconsreact.Top, {
-        width: 19,
-        height: 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

@@ -21,10 +21,10 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     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() {
@@ -45,28 +45,16 @@ var Badge = function Badge(props) {
     };
     var _this;
     var rtl = (0, _configprovider.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 classes = (0, _classnames.default)(classPrefix, className, (0, _define_property._)({}, "".concat(classPrefix, "-").concat(fill), fill === 'outline'));
+    var classes = (0, _classnames.default)(classPrefix, className);
     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 getStyle = function getStyle() {
+    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 getPositionStyle = function getPositionStyle() {
         var style = {};
-        style.top = "".concat(Number(-top) || parseFloat(String(-top)) || 0, "px");
+        style.top = "".concat(Number(top) || 0, "px");
         var dir = rtl ? 'left' : 'right';
         style[dir] = "".concat(Number(right) || parseFloat(String(right)) || 0, "px");
-        if (color) {
-            if (fill === 'outline') {
-                style.color = color;
-                style.background = '#fff';
-                if (!(color === null || color === void 0 ? void 0 : color.includes('gradient'))) {
-                    style.border = "1px solid ".concat(color);
-                }
-            } else {
-                style.color = '#fff';
-                style.background = color;
-            }
-        }
         return style;
     };
     var _obj1;
@@ -74,10 +62,11 @@ var Badge = function Badge(props) {
         className: classes,
         style: style
     }, 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))
+        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", {
         className: contentClasses,
-        style: getStyle()
+        style: getPositionStyle()
     }, 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;