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

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);
@@ -13981,128 +13992,7 @@ Please add \`${key}Action\` when creating your handler.`);
   });
   CalendarCard.displayName = "NutCalendarCard";
   var CheckboxGroupContext = React.createContext(null);
-  var defaultProps$10 = {
-    max: void 0,
-    min: void 0,
-    list: false,
-    labelPosition: "right",
-    direction: "vertical",
-    onChange: function(value) {
-    },
-    onLimit: function(type2) {
-    },
-    options: []
-  };
-  var classPrefix$j = "nut-checkboxgroup";
-  var CheckboxGroup = /* @__PURE__ */ React.forwardRef(function(props, ref) {
-    var _ref = _object_spread({}, defaultProps$10, props), children = _ref.children, className = _ref.className, disabled = _ref.disabled, list = _ref.list, value = _ref.value, defaultValue = _ref.defaultValue, max = _ref.max, min = _ref.min, labelPosition = _ref.labelPosition, direction = _ref.direction, options2 = _ref.options, onChange = _ref.onChange, onLimit = _ref.onLimit, rest = _object_without_properties(_ref, [
-      "children",
-      "className",
-      "disabled",
-      "list",
-      "value",
-      "defaultValue",
-      "max",
-      "min",
-      "labelPosition",
-      "direction",
-      "options",
-      "onChange",
-      "onLimit"
-    ]);
-    React.useImperativeHandle(ref, function() {
-      return {
-        toggle: function toggle(state) {
-          if (state === false) {
-            setValue([]);
-          } else {
-            var childrenLabel = [];
-            React.Children.map(children, function(child) {
-              var childProps = child.props;
-              childrenLabel.push(childProps.value);
-            });
-            setValue(childrenLabel);
-          }
-        },
-        reverse: function reverse() {
-          var childrenLabel = [];
-          React.Children.map(children, function(child) {
-            var childProps = child.props;
-            childrenLabel.push(childProps.value);
-          });
-          var reverse2 = childrenLabel.filter(function(c6) {
-            return (_value === null || _value === void 0 ? void 0 : _value.findIndex(function(v) {
-              return v === c6;
-            })) === -1;
-          });
-          setValue(reverse2);
-        }
-      };
-    });
-    var _usePropsValue = _sliced_to_array(usePropsValue({
-      value,
-      defaultValue,
-      finalValue: [],
-      onChange
-    }), 2), _value = _usePropsValue[0], setValue = _usePropsValue[1];
-    var renderOptions = React.useCallback(function() {
-      return options2 === null || options2 === void 0 ? void 0 : options2.map(function(_param) {
-        var label = _param.label, value2 = _param.value, disabled2 = _param.disabled;
-        _param.onChange;
-        var rest2 = _object_without_properties(_param, [
-          "label",
-          "value",
-          "disabled",
-          "onChange"
-        ]);
-        return /* @__PURE__ */ React.createElement(Checkbox, _object_spread({
-          key: value2 === null || value2 === void 0 ? void 0 : value2.toString(),
-          label,
-          disabled: disabled2,
-          value: value2
-        }, rest2));
-      });
-    }, [
-      options2,
-      max,
-      min
-    ]);
-    var _obj;
-    return /* @__PURE__ */ React.createElement(CheckboxGroupContext.Provider, {
-      value: {
-        labelPosition: labelPosition || "right",
-        disabled,
-        max,
-        list,
-        onLimit,
-        value: _value,
-        check: function(value2) {
-          var combined = _to_consumable_array(_value).concat([
-            value2
-          ]);
-          if (max !== void 0) {
-            if (combined.length > max) {
-              return onLimit === null || onLimit === void 0 ? void 0 : onLimit("max");
-            }
-          }
-          setValue(combined);
-        },
-        uncheck: function(value2) {
-          var reduced = _value.filter(function(item) {
-            return item !== value2;
-          });
-          if (min !== void 0 && reduced.length < min) {
-            return onLimit === null || onLimit === void 0 ? void 0 : onLimit("min");
-          }
-          setValue(reduced);
-        }
-      }
-    }, /* @__PURE__ */ React.createElement("div", _object_spread({
-      className: classNames(classPrefix$j, (_obj = {}, _define_property(_obj, "nut-checkboxgroup-".concat(direction), direction), _define_property(_obj, "nut-checkboxgroup-list", list), _obj), className)
-    }, rest), (options2 === null || options2 === void 0 ? void 0 : options2.length) ? renderOptions() : children));
-  });
-  CheckboxGroup.displayName = "NutCheckboxGroup";
-  var defaultProps$$ = _object_spread_props(_object_spread({}, ComponentDefaults), {
+  var defaultProps$10 = _object_spread_props(_object_spread({}, ComponentDefaults), {
     disabled: false,
     shape: "round",
     labelPosition: "right",
@@ -14112,9 +14002,9 @@ Please add \`${key}Action\` when creating your handler.`);
     onChange: function(value) {
     }
   });
-  var classPrefix$i = "nut-checkbox";
+  var classPrefix$j = "nut-checkbox";
   var Checkbox = function(props) {
-    var children = _object_spread({}, defaultProps$$, props).children;
+    var children = _object_spread({}, defaultProps$10, props).children;
     var icon = props.icon, label = props.label, className = props.className, activeIcon = props.activeIcon, checked = props.checked, value = props.value, defaultChecked = props.defaultChecked, shape = props.shape, disabled = props.disabled, onChange = props.onChange, indeterminate = props.indeterminate, indeterminateIcon = props.indeterminateIcon, others = _object_without_properties(props, [
       "icon",
       "label",
@@ -14194,27 +14084,27 @@ Please add \`${key}Action\` when creating your handler.`);
       });
     };
     var color = function() {
-      var cls = "".concat(classPrefix$i, "-icon ");
+      var cls = "".concat(classPrefix$j, "-icon ");
       if (innerDisabled) {
         if (innerChecked && !innerIndeterminate) {
-          return "".concat(cls).concat(classPrefix$i, "-icon-checked ").concat(classPrefix$i, "-icon-disabled");
+          return "".concat(cls).concat(classPrefix$j, "-icon-checked ").concat(classPrefix$j, "-icon-disabled");
         }
         if (innerChecked && innerIndeterminate) {
-          return "".concat(cls).concat(classPrefix$i, "-icon-indeterminate ").concat(classPrefix$i, "-icon-disabled");
+          return "".concat(cls).concat(classPrefix$j, "-icon-indeterminate ").concat(classPrefix$j, "-icon-disabled");
         }
-        return "".concat(cls).concat(classPrefix$i, "-icon-disabled");
+        return "".concat(cls).concat(classPrefix$j, "-icon-disabled");
       }
       if (innerChecked) {
         if (innerIndeterminate) {
-          return "".concat(cls).concat(classPrefix$i, "-icon-indeterminate");
+          return "".concat(cls).concat(classPrefix$j, "-icon-indeterminate");
         }
-        return "".concat(cls).concat(classPrefix$i, "-icon-checked");
+        return "".concat(cls).concat(classPrefix$j, "-icon-checked");
       }
       return cls;
     };
     var renderLabel = function() {
       return /* @__PURE__ */ React.createElement("span", {
-        className: classNames("".concat(classPrefix$i, "-label "), _define_property({}, "".concat(classPrefix$i, "-label-disabled"), innerDisabled))
+        className: classNames("".concat(classPrefix$j, "-label "), _define_property({}, "".concat(classPrefix$j, "-label-disabled"), innerDisabled))
       }, children || label);
     };
     var handleClick2 = function() {
@@ -14225,14 +14115,14 @@ Please add \`${key}Action\` when creating your handler.`);
     var renderButton = function() {
       var _obj;
       return /* @__PURE__ */ React.createElement("div", {
-        className: classNames("".concat(classPrefix$i, "-button"), (_obj = {}, _define_property(_obj, "".concat(classPrefix$i, "-button-active"), innerChecked), _define_property(_obj, "".concat(classPrefix$i, "-button-disabled"), disabled), _obj))
+        className: classNames("".concat(classPrefix$j, "-button"), (_obj = {}, _define_property(_obj, "".concat(classPrefix$j, "-button-active"), innerChecked), _define_property(_obj, "".concat(classPrefix$j, "-button-disabled"), disabled), _obj))
       }, children || label, innerChecked && activeIcon ? /* @__PURE__ */ React.createElement("div", {
-        className: classNames("".concat(classPrefix$i, "-button-icon"))
+        className: classNames("".concat(classPrefix$j, "-button-icon"))
       }, activeIcon) : null);
     };
     var renderListItem = function() {
       return /* @__PURE__ */ React.createElement("div", {
-        className: "".concat(classPrefix$i, "-list-item")
+        className: "".concat(classPrefix$j, "-list-item")
       }, renderLabel(), renderIcon());
     };
     var renderCheckboxItem = function() {
@@ -14245,13 +14135,135 @@ Please add \`${key}Action\` when creating your handler.`);
       return /* @__PURE__ */ React.createElement(React.Fragment, null, renderIcon(), renderLabel());
     };
     return /* @__PURE__ */ React.createElement("div", _object_spread_props(_object_spread({
-      className: classNames(classPrefix$i, _define_property({}, "".concat(classPrefix$i, "-reverse"), labelPosition === "left"), className)
+      className: classNames(classPrefix$j, _define_property({}, "".concat(classPrefix$j, "-reverse"), labelPosition === "left"), className)
     }, rest), {
       onClick: handleClick2
     }), renderCheckboxItem());
   };
   Checkbox.displayName = "NutCheckBox";
-  Checkbox.Group = CheckboxGroup;
+  var defaultProps$$ = {
+    max: void 0,
+    min: void 0,
+    list: false,
+    labelPosition: "right",
+    direction: "vertical",
+    onChange: function(value) {
+    },
+    onLimit: function(type2) {
+    },
+    options: []
+  };
+  var classPrefix$i = "nut-checkboxgroup";
+  var CheckboxGroup = /* @__PURE__ */ React.forwardRef(function(props, ref) {
+    var _ref = _object_spread({}, defaultProps$$, props), children = _ref.children, className = _ref.className, disabled = _ref.disabled, list = _ref.list, value = _ref.value, defaultValue = _ref.defaultValue, max = _ref.max, min = _ref.min, labelPosition = _ref.labelPosition, direction = _ref.direction, options2 = _ref.options, onChange = _ref.onChange, onLimit = _ref.onLimit, rest = _object_without_properties(_ref, [
+      "children",
+      "className",
+      "disabled",
+      "list",
+      "value",
+      "defaultValue",
+      "max",
+      "min",
+      "labelPosition",
+      "direction",
+      "options",
+      "onChange",
+      "onLimit"
+    ]);
+    React.useImperativeHandle(ref, function() {
+      return {
+        toggle: function toggle(state) {
+          if (state === false) {
+            setValue([]);
+          } else {
+            var childrenLabel = [];
+            React.Children.map(children, function(child) {
+              var childProps = child.props;
+              childrenLabel.push(childProps.value);
+            });
+            setValue(childrenLabel);
+          }
+        },
+        reverse: function reverse() {
+          var childrenLabel = [];
+          React.Children.map(children, function(child) {
+            var childProps = child.props;
+            childrenLabel.push(childProps.value);
+          });
+          var reverse2 = childrenLabel.filter(function(c6) {
+            return (_value === null || _value === void 0 ? void 0 : _value.findIndex(function(v) {
+              return v === c6;
+            })) === -1;
+          });
+          setValue(reverse2);
+        }
+      };
+    });
+    var _usePropsValue = _sliced_to_array(usePropsValue({
+      value,
+      defaultValue,
+      finalValue: [],
+      onChange
+    }), 2), _value = _usePropsValue[0], setValue = _usePropsValue[1];
+    var renderOptions = React.useCallback(function() {
+      return options2 === null || options2 === void 0 ? void 0 : options2.map(function(_param) {
+        var label = _param.label, value2 = _param.value, disabled2 = _param.disabled;
+        _param.onChange;
+        var rest2 = _object_without_properties(_param, [
+          "label",
+          "value",
+          "disabled",
+          "onChange"
+        ]);
+        return /* @__PURE__ */ React.createElement(Checkbox, _object_spread({
+          key: value2 === null || value2 === void 0 ? void 0 : value2.toString(),
+          label,
+          disabled: disabled2,
+          value: value2
+        }, rest2));
+      });
+    }, [
+      options2,
+      max,
+      min
+    ]);
+    var _obj;
+    return /* @__PURE__ */ React.createElement(CheckboxGroupContext.Provider, {
+      value: {
+        labelPosition: labelPosition || "right",
+        disabled,
+        max,
+        list,
+        onLimit,
+        value: _value,
+        check: function(value2) {
+          var combined = _to_consumable_array(_value).concat([
+            value2
+          ]);
+          if (max !== void 0) {
+            if (combined.length > max) {
+              return onLimit === null || onLimit === void 0 ? void 0 : onLimit("max");
+            }
+          }
+          setValue(combined);
+        },
+        uncheck: function(value2) {
+          var reduced = _value.filter(function(item) {
+            return item !== value2;
+          });
+          if (min !== void 0 && reduced.length < min) {
+            return onLimit === null || onLimit === void 0 ? void 0 : onLimit("min");
+          }
+          setValue(reduced);
+        }
+      }
+    }, /* @__PURE__ */ React.createElement("div", _object_spread({
+      className: classNames(classPrefix$i, (_obj = {}, _define_property(_obj, "nut-checkboxgroup-".concat(direction), direction), _define_property(_obj, "nut-checkboxgroup-list", list), _obj), className)
+    }, rest), (options2 === null || options2 === void 0 ? void 0 : options2.length) ? renderOptions() : children));
+  });
+  CheckboxGroup.displayName = "NutCheckboxGroup";
+  var InnerCheckbox = Checkbox;
+  InnerCheckbox.Group = CheckboxGroup;
   var InternalPickerPanel = function(props, ref) {
     var _props_keyIndex = props.keyIndex, keyIndex = _props_keyIndex === void 0 ? 0 : _props_keyIndex, defaultValue = props.defaultValue, _props_options = props.options, options2 = _props_options === void 0 ? [] : _props_options, _props_threeDimensional = props.threeDimensional, threeDimensional = _props_threeDimensional === void 0 ? true : _props_threeDimensional, _props_duration = props.duration, duration = _props_duration === void 0 ? 1e3 : _props_duration, chooseItem = props.chooseItem;
     var touch = useTouch();
@@ -17704,81 +17716,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 +17728,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 +17825,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,
@@ -19287,7 +19298,7 @@ Please add \`${key}Action\` when creating your handler.`);
     var _useState = _sliced_to_array(React.useState(0), 2), displayPercent = _useState[0], setDispalyPercent = _useState[1];
     var stylesInner = {
       width: "".concat(displayPercent, "%"),
-      backgroundColor: color || "#FF0F23"
+      background: color || "#FF0F23"
     };
     React.useEffect(function() {
       setDispalyPercent(percent);
@@ -22656,7 +22667,7 @@ Please add \`${key}Action\` when creating your handler.`);
       var currNumber = "".concat(thousands ? intNumber.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,") : intNumber).concat(splitArr[1] ? "." : "").concat(splitArr[1] || "");
       return currNumber.split("");
     };
-    var numerArr = React.useMemo(getShowNumber, [
+    var numberArr = React.useMemo(getShowNumber, [
       value,
       length,
       thousands
@@ -22664,7 +22675,7 @@ Please add \`${key}Action\` when creating your handler.`);
     var setNumberTransform = React.useCallback(function() {
       if (countupRef.current) {
         var numberItems = countupRef.current.querySelectorAll(".nut-countup-number");
-        var numberFilterArr = numerArr.filter(function(item) {
+        var numberFilterArr = numberArr.filter(function(item) {
           return !Number.isNaN(Number(item));
         });
         Object.keys(numberItems).forEach(function(key) {
@@ -22678,10 +22689,10 @@ Please add \`${key}Action\` when creating your handler.`);
         });
       }
     }, [
-      numerArr
+      numberArr
     ]);
     var numberEaseStyle = {
-      transition: "transform ".concat(duration, "s ease-in-out")
+      transitionDuration: "".concat(duration, "s")
     };
     React.useEffect(function() {
       timerRef.current = window.setTimeout(function() {
@@ -22691,7 +22702,7 @@ Please add \`${key}Action\` when creating your handler.`);
         window.clearTimeout(timerRef.current);
       };
     }, [
-      numerArr,
+      numberArr,
       delay,
       setNumberTransform
     ]);
@@ -22700,7 +22711,7 @@ Please add \`${key}Action\` when creating your handler.`);
       ref: countupRef
     }, /* @__PURE__ */ React.createElement("ul", {
       className: "".concat(classPrefix2, "-list")
-    }, numerArr.map(function(item, idx) {
+    }, numberArr.map(function(item, idx) {
       return /* @__PURE__ */ React.createElement("li", {
         className: "".concat(classPrefix2, "-listitem ").concat(!Number.isNaN(Number(item)) ? "".concat(classPrefix2, "-listitem-number") : ""),
         key: idx
@@ -22709,6 +22720,7 @@ Please add \`${key}Action\` when creating your handler.`);
         style: numberEaseStyle
       }, _to_consumable_array(numbers).concat(_to_consumable_array(numbers)).map(function(number2, subidx) {
         return /* @__PURE__ */ React.createElement("span", {
+          className: "".concat(classPrefix2, "-number-text"),
           key: subidx
         }, number2);
       })) : /* @__PURE__ */ React.createElement("span", {
@@ -23406,10 +23418,11 @@ Please add \`${key}Action\` when creating your handler.`);
         } else if (formatCache.includes("SS")) {
           formatCache = formatCache.replace("SS", msC.slice(0, 2));
         } else if (formatCache.includes("S")) {
-          formatCache = formatCache.replace("SS", msC.slice(0, 1));
+          formatCache = formatCache.replace("S", msC.slice(0, 1));
         }
       }
-      formatCache = formatCache.replace(/(\d+)/g, type2 === "primary" ? '<span class="nut-countdown-number-primary">$1</span>' : '<span class="nut-countdown-number">$1</span>');
+      var isTextDom = type2 === "text" ? '<span class="nut-countdown-number-text">$1</span>' : '<span class="nut-countdown-number">$1</span>';
+      formatCache = formatCache.replace(/(\d+)/g, type2 === "primary" ? '<span class="nut-countdown-number-primary">$1</span>' : isTextDom);
       return formatCache;
     };
     var pause = function() {
@@ -24507,6 +24520,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)));
   };
@@ -26425,7 +26440,7 @@ Please add \`${key}Action\` when creating your handler.`);
   exports2.Cascader = Cascader;
   exports2.Cell = Cell;
   exports2.CellGroup = CellGroup;
-  exports2.Checkbox = Checkbox;
+  exports2.Checkbox = InnerCheckbox;
   exports2.CheckboxGroup = CheckboxGroup;
   exports2.CircleProgress = CircleProgress;
   exports2.Col = Col;
@@ -26469,7 +26484,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;