@nutui/nutui-react 3.0.0-beta.2 → 3.0.0-beta.3

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

@@ -30,7 +30,8 @@
   color: var(--nutui-black-5);
 }
 .nut-searchbar-left, .nut-searchbar-right {
-  display: flex;
+  display: inline-flex;
+  align-items: center;
 }
 .nut-searchbar-left.nut-icon, .nut-searchbar-right.nut-icon {
   width: 20px;
@@ -39,19 +40,23 @@
 .nut-searchbar-left {
   margin-right: var(--nutui-searchbar-gap, 16px);
 }
-.nut-searchbar-left > div, .nut-searchbar-left > span, .nut-searchbar-left > svg {
+.nut-searchbar-left > div, .nut-searchbar-left > span, .nut-searchbar-left > i, .nut-searchbar-left > svg,
+.nut-searchbar-left .nut-icon {
   margin-right: var(--nutui-searchbar-gap, 16px);
 }
-.nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > svg:last-child {
+.nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > i:last-child, .nut-searchbar-left > svg:last-child,
+.nut-searchbar-left .nut-icon:last-child {
   margin-right: 0;
 }
 .nut-searchbar-right {
   margin-left: var(--nutui-searchbar-gap, 16px);
 }
-.nut-searchbar-right > div, .nut-searchbar-right > span, .nut-searchbar-right > svg {
+.nut-searchbar-right > div, .nut-searchbar-right > span, .nut-searchbar-right > i, .nut-searchbar-right > svg,
+.nut-searchbar-right .nut-icon {
   margin-left: var(--nutui-searchbar-gap, 16px);
 }
-.nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > svg:first-child {
+.nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > i:first-child, .nut-searchbar-right > svg:first-child,
+.nut-searchbar-right .nut-icon:first-child {
   margin-left: 0;
 }
 .nut-searchbar-left > text, .nut-searchbar-left > view {
@@ -66,7 +71,7 @@
 .nut-searchbar-right > text:first-child, .nut-searchbar-right > view:first-child {
   margin-left: 0;
 }
-.nut-searchbar-input-box {
+.nut-searchbar-input-box, .nut-searchbar-input {
   display: flex;
   align-items: center;
   flex: 1;
@@ -76,8 +81,6 @@
   outline: 0;
   box-sizing: border-box;
   width: 100%;
-  height: var(--nutui-searchbar-input-height, 32px);
-  line-height: var(--nutui-searchbar-input-height, 32px);
   padding: var(--nutui-searchbar-input-padding, 0 4px);
   font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
   color: var(--nutui-searchbar-input-text-color, var(--nutui-color-title, #1a1a1a));

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

@@ -73,6 +73,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 +101,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,30 +114,15 @@
   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);
 }
@@ -149,25 +130,6 @@
   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);
-}
 
 .nut-skeleton {
   display: inline-block;

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

@@ -1,6 +1,13 @@
 .nut-badge {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  width: auto;
+  /* #ifdef harmony */
+  min-width: 1px;
+  /* #endif */
+  /* #ifndef harmony */
+  min-width: auto;
+  /* #endif */
 }
 .nut-badge-icon {
   position: absolute;
@@ -8,8 +15,6 @@
   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%));
-  top: -10%;
-  right: -15%;
   padding: var(--nutui-badge-icon-padding, 3px);
   text-align: center;
   border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
@@ -27,7 +32,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  /* #ifdef harmony */
+  background: var(--nutui-color-primary, #ff0f23);
+  /* #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%));
+  /* #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));
@@ -45,7 +55,9 @@
   padding: 0;
 }
 .nut-badge-content {
-  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(100%));
+  /* #ifndef rn */
+  transform: var(--nutui-badge-content-transform, translateX(100%));
+  /* #endif */
 }
 .nut-badge-dot {
   width: var(--nutui-badge-dot-width, 7px);
@@ -54,22 +66,12 @@
   border-radius: var(--nutui-badge-dot-width, 7px);
   padding: 0;
 }
-.nut-badge-outline .nut-badge-content {
+.nut-badge-outline {
   background: var(--nutui-color-primary-text, #ffffff);
   border: 1px solid var(--nutui-color-primary, #ff0f23);
   color: var(--nutui-color-primary, #ff0f23);
 }
 
-[dir=rtl] .nut-badge-icon,
-.nut-rtl .nut-badge-icon {
-  right: auto;
-  left: -15%;
-}
-[dir=rtl] .nut-badge-content,
-.nut-rtl .nut-badge-content {
-  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(-100%));
-}
-
 .nut-tabbar-item {
   display: flex;
   flex-direction: column;

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

@@ -1,6 +1,13 @@
 .nut-badge {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  width: auto;
+  /* #ifdef harmony */
+  min-width: 1px;
+  /* #endif */
+  /* #ifndef harmony */
+  min-width: auto;
+  /* #endif */
 }
 .nut-badge-icon {
   position: absolute;
@@ -8,8 +15,6 @@
   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%));
-  top: -10%;
-  right: -15%;
   padding: var(--nutui-badge-icon-padding, 3px);
   text-align: center;
   border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
@@ -27,7 +32,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  /* #ifdef harmony */
+  background: var(--nutui-color-primary, #ff0f23);
+  /* #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%));
+  /* #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));
@@ -45,7 +55,9 @@
   padding: 0;
 }
 .nut-badge-content {
-  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(100%));
+  /* #ifndef rn */
+  transform: var(--nutui-badge-content-transform, translateX(100%));
+  /* #endif */
 }
 .nut-badge-dot {
   width: var(--nutui-badge-dot-width, 7px);
@@ -54,22 +66,12 @@
   border-radius: var(--nutui-badge-dot-width, 7px);
   padding: 0;
 }
-.nut-badge-outline .nut-badge-content {
+.nut-badge-outline {
   background: var(--nutui-color-primary-text, #ffffff);
   border: 1px solid var(--nutui-color-primary, #ff0f23);
   color: var(--nutui-color-primary, #ff0f23);
 }
 
-[dir=rtl] .nut-badge-icon,
-.nut-rtl .nut-badge-icon {
-  right: auto;
-  left: -15%;
-}
-[dir=rtl] .nut-badge-content,
-.nut-rtl .nut-badge-content {
-  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(-100%));
-}
-
 .nut-tabbar-item {
   display: flex;
   flex-direction: column;

package/dist/es/packages/video/video.d.ts

@@ -1,18 +1,10 @@
 import React, { FunctionComponent } from 'react';
 import { BasicComponent } from "../../utils/typings";
 export interface VideoProps extends BasicComponent {
-    /**
-    * 视频地址和类型设置
-    * @default {type: {}, src: ''}
-    */
     source: {
         type: string;
         src: string;
-    }
-    /**
-    * 控制视频播放属性
-    * @default -
-    */
+    };
     options: {
         controls?: boolean;
         muted?: boolean;
@@ -20,21 +12,9 @@ export interface VideoProps extends BasicComponent {
         poster?: string;
         playsinline?: boolean;
         loop?: boolean;
-    }
-    /**
-    * 播放
-    * @default -
-    */
-    onPlay: (element: HTMLVideoElement) => void
-    /**
-    * 暂停
-    * @default -
-    */
-    onPause: (element: HTMLVideoElement) => void
-    /**
-    * 播放完成回调
-    * @default -
-    */
-    onPlayEnd: (element: HTMLVideoElement) => void
+    };
+    onPlay: (element: HTMLVideoElement) => void;
+    onPause: (element: HTMLVideoElement) => void;
+    onPlayEnd: (element: HTMLVideoElement) => void;
 }
 export declare const Video: FunctionComponent<Partial<VideoProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onPause' | 'onPlay'>>;

package/dist/nutui.react.umd.js

@@ -10727,6 +10727,7 @@ Please add \`${key}Action\` when creating your handler.`);
   var NavBar = function(props) {
     var _$_object_spread = _object_spread({}, defaultProps$1g, props), right = _$_object_spread.right, left = _$_object_spread.left, titleAlign = _$_object_spread.titleAlign, className = _$_object_spread.className, style = _$_object_spread.style, back = _$_object_spread.back, fixed = _$_object_spread.fixed, safeAreaInsetTop = _$_object_spread.safeAreaInsetTop, placeholder = _$_object_spread.placeholder, zIndex = _$_object_spread.zIndex, onBackClick = _$_object_spread.onBackClick;
     var classPrefix2 = "nut-navbar";
+    var rtl = useRtl();
     var children = Array.isArray(props.children) ? props.children : [
       props.children
     ];
@@ -10770,11 +10771,12 @@ Please add \`${key}Action\` when creating your handler.`);
       back
     ]);
     var renderLeft = function() {
+      var _obj2, _obj1;
       return back || left ? /* @__PURE__ */ React.createElement("div", {
-        className: "".concat(classPrefix2, "-left"),
+        className: classNames((_obj2 = {}, _define_property(_obj2, "".concat(classPrefix2, "-left"), true), _define_property(_obj2, "".concat(classPrefix2, "-left-align-").concat(titleAlign), true), _define_property(_obj2, "".concat(classPrefix2, "-left-rtl"), rtl), _obj2)),
         ref: leftRef
       }, back && /* @__PURE__ */ React.createElement("div", {
-        className: "".concat(classPrefix2, "-left-back"),
+        className: classNames((_obj1 = {}, _define_property(_obj1, "".concat(classPrefix2, "-left-back"), true), _define_property(_obj1, "".concat(classPrefix2, "-left-back-align-").concat(titleAlign), true), _define_property(_obj1, "".concat(classPrefix2, "-left-back-children"), left), _define_property(_obj1, "".concat(classPrefix2, "-left-back-children-rtl"), left && rtl), _obj1)),
         onClick: function(e) {
           return onBackClick(e);
         }
@@ -10789,14 +10791,16 @@ Please add \`${key}Action\` when creating your handler.`);
           width: contentRealWidth
         };
       }
+      var _obj2;
       return /* @__PURE__ */ React.createElement("div", {
-        className: "".concat(classPrefix2, "-title"),
+        className: classNames((_obj2 = {}, _define_property(_obj2, "".concat(classPrefix2, "-title"), true), _define_property(_obj2, "".concat(classPrefix2, "-title-align-").concat(titleAlign), true), _obj2)),
         style: titleStyle
       }, children);
     };
     var renderRight = function() {
+      var _obj2;
       return /* @__PURE__ */ React.createElement("div", {
-        className: "".concat(classPrefix2, "-right"),
+        className: classNames((_obj2 = {}, _define_property(_obj2, "".concat(classPrefix2, "-right"), true), _define_property(_obj2, "".concat(classPrefix2, "-right-align-").concat(titleAlign), true), _define_property(_obj2, "".concat(classPrefix2, "-right-rtl"), rtl), _obj2)),
         ref: rightRef
       }, right);
     };
@@ -10808,7 +10812,7 @@ Please add \`${key}Action\` when creating your handler.`);
       }, renderLeft(), renderContent(), renderRight());
     };
     var _obj;
-    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-fixed"), fixed), _define_property(_obj, "".concat(classPrefix2, "-title-align-").concat(titleAlign), true), _obj));
+    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-fixed"), fixed), _define_property(_obj, "".concat(classPrefix2, "-safe-area-inset-top"), safeAreaInsetTop), _define_property(_obj, "".concat(classPrefix2, "-align-").concat(titleAlign), true), _define_property(_obj, "".concat(classPrefix2, "-rtl"), rtl), _obj));
     var cls = classNames(classPrefix2, classes, className);
     return /* @__PURE__ */ React.createElement(React.Fragment, null, safeAreaInsetTop && /* @__PURE__ */ React.createElement(SafeArea, {
       position: "top"
@@ -11201,10 +11205,11 @@ Please add \`${key}Action\` when creating your handler.`);
     var _$_object_spread = _object_spread({}, defaultProps$1c, 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 classPrefix2 = "nut-badge";
     var classes = classNames(classPrefix2, className, _define_property({}, "".concat(classPrefix2, "-").concat(fill), fill === "outline"));
-    var contentClasses = classNames(_define_property({}, "".concat(classPrefix2, "-dot"), dot), "".concat(classPrefix2, "-content"), _define_property({}, "".concat(classPrefix2, "-sup"), isNumber() || isString() || dot), _define_property({}, "".concat(classPrefix2, "-one"), typeof content() === "string" && ((_this = "".concat(content())) === null || _this === void 0 ? void 0 : _this.length) === 1));
+    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 style2 = {};
-      style2.top = "".concat(Number(top) || parseFloat(String(top)) || 0, "px");
+      style2.top = "".concat(Number(-top) || parseFloat(String(-top)) || 0, "px");
       var dir = rtl ? "left" : "right";
       style2[dir] = "".concat(Number(right) || parseFloat(String(right)) || 0, "px");
       if (color) {
@@ -11221,11 +11226,12 @@ Please add \`${key}Action\` when creating your handler.`);
       }
       return style2;
     };
+    var _obj1;
     return /* @__PURE__ */ React.createElement("div", {
       className: classes,
       style
     }, isIcon() && /* @__PURE__ */ React.createElement("div", {
-      className: "".concat(classPrefix2, "-icon")
+      className: classNames("".concat(classPrefix2, "-content"), (_obj1 = {}, _define_property(_obj1, "".concat(classPrefix2, "-icon"), true), _define_property(_obj1, "".concat(classPrefix2, "-icon-rtl"), rtl), _obj1))
     }, value), children, !isIcon() && /* @__PURE__ */ React.createElement("div", {
       className: contentClasses,
       style: getStyle()
@@ -13660,7 +13666,7 @@ Please add \`${key}Action\` when creating your handler.`);
         onChange === null || onChange === void 0 ? void 0 : onChange(val);
       }
     };
-    var getDays = function(month2) {
+    var getDays = React.useCallback(function(month2) {
       var y = month2.year;
       var m2 = month2.month;
       var days2 = _to_consumable_array(getPrevMonthDays(y, m2, firstDayOfWeek)).concat(_to_consumable_array(getCurrentMonthDays(y, m2)));
@@ -13676,13 +13682,18 @@ Please add \`${key}Action\` when creating your handler.`);
         });
       }
       return days2;
-    };
+    }, [
+      firstDayOfWeek
+    ]);
     React.useEffect(function() {
       var newDays = getDays(month);
       setDays(newDays);
       onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(month);
     }, [
-      month
+      month,
+      getDays,
+      onPageChange,
+      firstDayOfWeek
     ]);
     var isSameDay = function(day1, day2) {
       return (day1 === null || day1 === void 0 ? void 0 : day1.year) === (day2 === null || day2 === void 0 ? void 0 : day2.year) && (day1 === null || day1 === void 0 ? void 0 : day1.month) === (day2 === null || day2 === void 0 ? void 0 : day2.month) && (day1 === null || day1 === void 0 ? void 0 : day1.date) === (day2 === null || day2 === void 0 ? void 0 : day2.date);
@@ -17704,81 +17715,7 @@ Please add \`${key}Action\` when creating your handler.`);
   };
   NumberKeyboard.displayName = "NutNumberKeyboard";
   const RadioContext = React.createContext(null);
-  var defaultProps$R = {
-    labelPosition: "right",
-    onChange: function(value) {
-    },
-    direction: "vertical",
-    options: []
-  };
-  var classPrefix$g = "nut-radiogroup";
-  var RadioGroup = /* @__PURE__ */ React.forwardRef(function(props, ref) {
-    var _ref = _object_spread({}, defaultProps$R, props), children = _ref.children, className = _ref.className;
-    _ref.value;
-    _ref.defaultValue;
-    var onChange = _ref.onChange, shape = _ref.shape, labelPosition = _ref.labelPosition;
-    _ref.direction;
-    var options2 = _ref.options, disabled = _ref.disabled, rest = _object_without_properties(_ref, [
-      "children",
-      "className",
-      "value",
-      "defaultValue",
-      "onChange",
-      "shape",
-      "labelPosition",
-      "direction",
-      "options",
-      "disabled"
-    ]);
-    var cls = classNames(classPrefix$g, _define_property({}, "".concat(classPrefix$g, "-").concat(props.direction), props.direction), className);
-    var _usePropsValue = _sliced_to_array(usePropsValue({
-      defaultValue: props.defaultValue,
-      value: props.value,
-      finalValue: "",
-      onChange
-    }), 2), val2State = _usePropsValue[0], setVal2State = _usePropsValue[1];
-    var renderOptionsChildren = React.useCallback(function() {
-      return options2 === null || options2 === void 0 ? void 0 : options2.map(function(_param) {
-        var label = _param.label, value = _param.value, disabled2 = _param.disabled, onChange2 = _param.onChange, rest2 = _object_without_properties(_param, [
-          "label",
-          "value",
-          "disabled",
-          "onChange"
-        ]);
-        return /* @__PURE__ */ React.createElement(Radio, _object_spread_props(_object_spread({}, rest2), {
-          key: value === null || value === void 0 ? void 0 : value.toString(),
-          children: label,
-          value,
-          disabled: disabled2,
-          onChange: onChange2,
-          labelPosition,
-          checked: value === val2State
-        }));
-      });
-    }, [
-      options2,
-      labelPosition,
-      val2State
-    ]);
-    return /* @__PURE__ */ React.createElement(RadioContext.Provider, {
-      value: {
-        labelPosition: labelPosition || "right",
-        disabled,
-        shape,
-        value: val2State,
-        check: function(value) {
-          setVal2State(value);
-        },
-        uncheck: function() {
-          setVal2State("");
-        }
-      }
-    }, /* @__PURE__ */ React.createElement("div", _object_spread({
-      className: cls
-    }, rest), (options2 === null || options2 === void 0 ? void 0 : options2.length) ? renderOptionsChildren() : children));
-  });
-  RadioGroup.displayName = "NutRadioGroup";
-  var defaultProps$Q = _object_spread_props(_object_spread({}, ComponentDefaults), {
+  var defaultProps$R = _object_spread_props(_object_spread({}, ComponentDefaults), {
     disabled: false,
     shape: "round",
     value: "",
@@ -17790,7 +17727,7 @@ Please add \`${key}Action\` when creating your handler.`);
   });
   var Radio = function(props) {
     var classPrefix2 = "nut-radio";
-    var _ref = _object_spread({}, defaultProps$Q, props), children = _ref.children, className = _ref.className, style = _ref.style, checked = _ref.checked, defaultChecked = _ref.defaultChecked, shape = _ref.shape, value = _ref.value;
+    var _ref = _object_spread({}, defaultProps$R, props), children = _ref.children, className = _ref.className, style = _ref.style, checked = _ref.checked, defaultChecked = _ref.defaultChecked, shape = _ref.shape, value = _ref.value;
     _ref.icon;
     _ref.activeIcon;
     var onChange = _ref.onChange, others = _object_without_properties(_ref, [
@@ -17887,7 +17824,80 @@ Please add \`${key}Action\` when creating your handler.`);
     }, rest), renderRadioItem());
   };
   Radio.displayName = "NutRadio";
-  Radio.Group = RadioGroup;
+  var defaultProps$Q = {
+    labelPosition: "right",
+    onChange: function(value) {
+    },
+    direction: "vertical",
+    options: []
+  };
+  var classPrefix$g = "nut-radiogroup";
+  var RadioGroup = /* @__PURE__ */ React.forwardRef(function(props, ref) {
+    var _ref = _object_spread({}, defaultProps$Q, props), children = _ref.children, className = _ref.className;
+    _ref.value;
+    _ref.defaultValue;
+    var onChange = _ref.onChange, shape = _ref.shape, labelPosition = _ref.labelPosition, direction = _ref.direction, options2 = _ref.options, disabled = _ref.disabled, rest = _object_without_properties(_ref, [
+      "children",
+      "className",
+      "value",
+      "defaultValue",
+      "onChange",
+      "shape",
+      "labelPosition",
+      "direction",
+      "options",
+      "disabled"
+    ]);
+    var cls = classNames(classPrefix$g, _define_property({}, "".concat(classPrefix$g, "-").concat(direction), direction), className);
+    var _usePropsValue = _sliced_to_array(usePropsValue({
+      defaultValue: props.defaultValue,
+      value: props.value,
+      finalValue: "",
+      onChange
+    }), 2), val2State = _usePropsValue[0], setVal2State = _usePropsValue[1];
+    var renderOptionsChildren = React.useCallback(function() {
+      return options2 === null || options2 === void 0 ? void 0 : options2.map(function(_param) {
+        var label = _param.label, value = _param.value, disabled2 = _param.disabled, onChange2 = _param.onChange, rest2 = _object_without_properties(_param, [
+          "label",
+          "value",
+          "disabled",
+          "onChange"
+        ]);
+        return /* @__PURE__ */ React.createElement(InnerRadio, _object_spread_props(_object_spread({}, rest2), {
+          key: value === null || value === void 0 ? void 0 : value.toString(),
+          children: label,
+          value,
+          disabled: disabled2,
+          onChange: onChange2,
+          labelPosition,
+          checked: value === val2State
+        }));
+      });
+    }, [
+      options2,
+      labelPosition,
+      val2State
+    ]);
+    return /* @__PURE__ */ React.createElement(RadioContext.Provider, {
+      value: {
+        labelPosition: labelPosition || "right",
+        disabled,
+        shape,
+        value: val2State,
+        check: function(value) {
+          setVal2State(value);
+        },
+        uncheck: function() {
+          setVal2State("");
+        }
+      }
+    }, /* @__PURE__ */ React.createElement("div", _object_spread({
+      className: cls
+    }, rest), (options2 === null || options2 === void 0 ? void 0 : options2.length) ? renderOptionsChildren() : children));
+  });
+  RadioGroup.displayName = "NutRadioGroup";
+  var InnerRadio = Radio;
+  InnerRadio.Group = RadioGroup;
   var defaultProps$P = _object_spread_props(_object_spread({}, ComponentDefaults), {
     range: false,
     min: 0,
@@ -24507,6 +24517,8 @@ Please add \`${key}Action\` when creating your handler.`);
     }, /* @__PURE__ */ React.createElement("div", {
       className: "".concat(classPrefix2, "-lite-active")
     }, currentPage), /* @__PURE__ */ React.createElement("div", {
+      className: "".concat(classPrefix2, "-lite-spliterator")
+    }, "/"), /* @__PURE__ */ React.createElement("div", {
       className: "".concat(classPrefix2, "-lite-default")
     }, pageCount)));
   };
@@ -26469,7 +26481,7 @@ Please add \`${key}Action\` when creating your handler.`);
   exports2.Price = Price;
   exports2.Progress = Progress;
   exports2.PullToRefresh = PullToRefresh;
-  exports2.Radio = Radio;
+  exports2.Radio = InnerRadio;
   exports2.RadioGroup = RadioGroup;
   exports2.Range = Range;
   exports2.Rate = Rate;