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

package/dist/cjs/packages/avatar/avatar.js

@@ -82,31 +82,36 @@ var Avatar = function Avatar(props) {
     };
     return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (showMax || !groupMax || avatarIndex <= groupMax) && /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: cls,
-        // {...rest}
         style: !showMax ? styles : maxStyles,
         onClick: clickAvatar,
         ref: avatarRef
     }, (!groupMax || avatarIndex <= groupMax) && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, src && /*#__PURE__*/ _react.default.createElement(_components.Image, {
         className: "nut-avatar-img nut-avatar-".concat(groupSize || size || 'normal', "-img"),
         src: src,
-        style: (0, _object_spread._)({
+        style: {
             objectFit: fit
-        }, styles),
+        },
         onError: errorEvent
-    }), /*#__PURE__*/ _react.default.isValidElement(icon) ? /*#__PURE__*/ _react.default.cloneElement(icon, (0, _object_spread_props._)((0, _object_spread._)({}, icon.props), {
-        className: "".concat(icon.props.className || '', " nut-avatar-icon nut-avatar-").concat(groupSize || size || 'normal', "-icon"),
+    }), /*#__PURE__*/ _react.default.isValidElement(icon) ? /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "nut-avatar-text"
+    }, /*#__PURE__*/ _react.default.cloneElement(icon, (0, _object_spread_props._)((0, _object_spread._)({}, icon.props), {
+        color: color,
+        className: "".concat(icon.props.className || '', " nut-avatar-icon nut-avatar-").concat(groupSize || size || 'normal', "-icon")
+    }))) : null, children && /*#__PURE__*/ _react.default.createElement(_components.View, {
         style: {
-            position: 'absolute'
-        }
-    })) : null, children && /*#__PURE__*/ _react.default.createElement(_components.View, {
+            color: color
+        },
         className: "nut-avatar-text nut-avatar-".concat(groupSize || size || 'normal', "-text")
-    }, children), !src && !icon && !children && !(0, _platformtaro.harmonyAndRn)() && /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.User, {
-        className: "nut-avatar-icon nut-avatar-".concat(groupSize || size || 'normal', "-icon"),
+    }, children), !src && !icon && !children && /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "nut-avatar-text"
+    }, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.User, {
         style: {
-            position: 'absolute'
-        }
-    })), showMax && /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "nut-avatar-text nut-avatar-".concat(groupSize || 'normal', "-text")
+            color: color
+        },
+        className: "nut-avatar-icon nut-avatar-".concat(groupSize || size || 'normal', "-icon")
+    }))), showMax && /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "nut-avatar-text nut-avatar-".concat(groupSize || 'normal', "-text"),
+        style: (0, _object_spread._)({}, maxStyles)
     }, (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent) ? propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent : "+ ".concat(avatarIndex - Number(groupMax || 0)))));
 };
 Avatar.displayName = 'NutAvatar';

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

@@ -1,6 +1,13 @@
 .nut-avatar {
   position: relative;
   flex: 0 0 auto; // 防止被压缩
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: $avatar-normal-width;
+  height: $avatar-normal-height;
+
   &-round {
     border-radius: 999px;
     overflow: hidden;
@@ -28,45 +35,23 @@
     background-size: 100% 100%;
   }
 
-  .nut-icon-img {
-    width: 100%;
-    height: 100%;
-  }
-
   &-text {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 100%;
-    height: 100%;
   }
 
   &-large {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     width: $avatar-large-width;
     height: $avatar-large-height;
-
     &-img {
       width: $avatar-large-width;
       height: $avatar-large-height;
-      &-image {
-        width: $avatar-large-width;
-        height: $avatar-large-height;
-      }
     }
-
     &-icon {
       width: $avatar-large-width;
       height: $avatar-large-height;
     }
-
-    .nut-icon-img {
-      width: 100%;
-      height: 100%;
-    }
-
     &-text {
       width: $avatar-large-width;
       height: $avatar-large-height;
@@ -74,51 +59,13 @@
   }
 
   &-small {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     width: $avatar-small-width;
     height: $avatar-small-height;
-
-    &-img-image {
-      width: $avatar-small-width;
-      height: $avatar-small-height;
-    }
-    &-icon {
-      // width: $avatar-small-width;
-      // height: $avatar-small-height;
-    }
     &-text {
       width: $avatar-small-width;
       height: $avatar-small-height;
     }
   }
-
-  &-normal {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: $avatar-normal-width;
-    height: $avatar-normal-height;
-
-    &-img-image {
-      width: $avatar-normal-width;
-      height: $avatar-normal-height;
-    }
-
-    &-icon {
-    }
-
-    .nut-icon-img {
-      width: 100%;
-      height: 100%;
-    }
-
-    &-text {
-      width: $avatar-normal-width;
-      height: $avatar-normal-height;
-    }
-  }
 }
 
 // [dir='rtl'] .nut-avatar,

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-image {
   display: block;
   position: relative;
@@ -21,7 +25,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-color-background, #f5f6fa);
+  background: var(--nutui-gray-3);
   background-size: 100% 100%;
 }
 .nut-image-error {
@@ -34,7 +38,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-color-background, #f5f6fa);
+  background: var(--nutui-gray-3);
   background-size: 100% 100%;
 }
 
@@ -73,6 +77,11 @@
 .nut-avatar {
   position: relative;
   flex: 0 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--nutui-avatar-normal-width, 40px);
+  height: var(--nutui-avatar-normal-height, 40px);
 }
 .nut-avatar-round {
   border-radius: 999px;
@@ -96,21 +105,12 @@
 .nut-avatar-icon {
   background-size: 100% 100%;
 }
-.nut-avatar .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
 .nut-avatar-text {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%;
-  height: 100%;
 }
 .nut-avatar-large {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
@@ -118,53 +118,19 @@
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
-.nut-avatar-large-img-image {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
-}
 .nut-avatar-large-icon {
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
-.nut-avatar-large .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
 .nut-avatar-large-text {
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
 .nut-avatar-small {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: var(--nutui-avatar-small-width, 32px);
-  height: var(--nutui-avatar-small-height, 32px);
-}
-.nut-avatar-small-img-image {
   width: var(--nutui-avatar-small-width, 32px);
   height: var(--nutui-avatar-small-height, 32px);
 }
 .nut-avatar-small-text {
   width: var(--nutui-avatar-small-width, 32px);
   height: var(--nutui-avatar-small-height, 32px);
-}
-.nut-avatar-normal {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
-}
-.nut-avatar-normal-img-image {
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
-}
-.nut-avatar-normal .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
-.nut-avatar-normal-text {
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
 }

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-avatar-cropper {
   position: relative;
   display: flex;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-avatar-group {
   display: flex;
   flex-direction: row;

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

@@ -1,26 +1,24 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #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

@@ -9,23 +9,29 @@ Object.defineProperty(exports, "Badge", {
     }
 });
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
 var _define_property = require("@swc/helpers/_/_define_property");
 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 _type_of = require("@swc/helpers/_/_type_of");
-var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
+var _ts_generator = require("@swc/helpers/_/_ts_generator");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 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 _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() {
@@ -46,37 +52,48 @@ 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 classes = (0, _classnames.default)(classPrefix, className, (0, _define_property._)({}, "".concat(classPrefix, "-").concat(fill), fill === 'outline'));
-    var contentClasses = (0, _classnames.default)((0, _define_property._)({}, "".concat(classPrefix, "-dot"), dot), "".concat(classPrefix, "-content"), (0, _define_property._)({}, "".concat(classPrefix, "-sup"), isNumber() || isString() || dot), (0, _define_property._)({}, "".concat(classPrefix, "-one"), typeof content() === 'string' && ((_this = "".concat(content())) === null || _this === void 0 ? void 0 : _this.length) === 1));
-    var getStyle = function getStyle() {
-        var style = {};
-        style.top = "".concat(Number(top) || parseFloat(String(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;
-            }
+    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)((_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();
         }
-        return style;
-    };
+    }, []);
+    var getPositionStyle = /*#__PURE__*/ function() {
+        var _ref = (0, _async_to_generator._)(function() {
+            var style, dir;
+            return (0, _ts_generator._)(this, function(_state) {
+                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 _obj1;
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: classes,
-        style: style
+        style: style,
+        ref: badgeRef
     }, isIcon() && /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "".concat(classPrefix, "-icon")
+        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: contentStyle
     }, value), children, !isIcon() && /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: contentClasses,
-        style: 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;