@nutui/nutui-react 3.0.11 → 3.0.13-beta.0

package/dist/nutui.react.umd.js

@@ -16899,6 +16899,9 @@ Please add \`${key2}Action\` when creating your handler.`);
           var _inputRef_current;
           return (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.blur();
         },
+        get: function() {
+          return inputRef.current;
+        },
         get nativeElement() {
           return inputRef.current;
         }
@@ -18210,10 +18213,8 @@ Please add \`${key2}Action\` when creating your handler.`);
       onEnd,
       setCurrent
     ]);
-    var click = React.useCallback(function(event) {
-      if (disabled || !root2.current) {
-        return;
-      }
+    var handleClick = React.useCallback(function(event) {
+      if (disabled || !root2.current) return;
       setDragStatus("");
       var rect = getRect(root2.current);
       var delta = event.clientX - rect.left;
@@ -18251,9 +18252,7 @@ Please add \`${key2}Action\` when creating your handler.`);
       vertical
     ]);
     var onTouchStart = React.useCallback(function(event) {
-      if (disabled) {
-        return;
-      }
+      if (disabled) return;
       touch.start(event);
       setExactValue(current);
       if (isRange(current)) {
@@ -18466,11 +18465,9 @@ Please add \`${key2}Action\` when creating your handler.`);
     }, minDescription || min), /* @__PURE__ */ React.createElement("div", {
       ref: root2,
       className: classes,
-      onClick: function(e2) {
-        return click(e2);
-      }
+      onClick: handleClick
     }, renderMarks(), /* @__PURE__ */ React.createElement("div", {
-      className: "".concat(classPrefix$f, "-bar"),
+      className: "".concat(classPrefix$f, "-bar ").concat(classPrefix$f, "-bar-animate"),
       style: barStyle()
     }, renderButtonWrapper())), maxDescription !== null && /* @__PURE__ */ React.createElement("div", {
       className: "".concat(classPrefix$f, "-max")
@@ -18657,134 +18654,205 @@ Please add \`${key2}Action\` when creating your handler.`);
     left: "",
     right: "",
     rightIn: "",
-    leftIn: /* @__PURE__ */ React.createElement(n, {
-      width: "16",
-      height: "16"
-    })
+    leftIn: /* @__PURE__ */ React.createElement(n, null),
+    tag: false
   });
   var SearchBar = function(props) {
     var classPrefix2 = "nut-searchbar";
     var locale = useConfig().locale;
-    var searchRef = React.useRef(null);
-    var _$_object_spread = _object_spread({}, defaultProps$P, props), outerValue = _$_object_spread.value, style = _$_object_spread.style, placeholder = _$_object_spread.placeholder, shape = _$_object_spread.shape, className = _$_object_spread.className, disabled = _$_object_spread.disabled, maxLength = _$_object_spread.maxLength, clearable = _$_object_spread.clearable, readOnly = _$_object_spread.readOnly, autoFocus = _$_object_spread.autoFocus, backable = _$_object_spread.backable, right = _$_object_spread.right, left = _$_object_spread.left, leftIn = _$_object_spread.leftIn, rightIn = _$_object_spread.rightIn, onChange = _$_object_spread.onChange, onFocus = _$_object_spread.onFocus, onBlur = _$_object_spread.onBlur, onClear = _$_object_spread.onClear, onSearch = _$_object_spread.onSearch, onInputClick = _$_object_spread.onInputClick;
-    var _useState = _sliced_to_array(React.useState(function() {
-      return outerValue;
-    }), 2), value2 = _useState[0], setValue = _useState[1];
-    var forceFocus = function() {
-      var searchSelf = searchRef.current;
-      searchSelf && searchSelf.focus();
-    };
-    var change = function(event) {
+    var searchInputRef = React.useRef(null);
+    var _$_object_spread = _object_spread({}, defaultProps$P, props), outerValue = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, style = _$_object_spread.style, placeholder = _$_object_spread.placeholder, shape = _$_object_spread.shape, className = _$_object_spread.className, disabled = _$_object_spread.disabled, maxLength = _$_object_spread.maxLength, clearable = _$_object_spread.clearable, readOnly = _$_object_spread.readOnly, autoFocus = _$_object_spread.autoFocus, backable = _$_object_spread.backable, right = _$_object_spread.right, left = _$_object_spread.left, leftIn = _$_object_spread.leftIn, rightIn = _$_object_spread.rightIn, tag = _$_object_spread.tag, onChange = _$_object_spread.onChange, onFocus = _$_object_spread.onFocus, onBlur = _$_object_spread.onBlur, onClear = _$_object_spread.onClear, onSearch = _$_object_spread.onSearch, onInputClick = _$_object_spread.onInputClick, onItemClick = _$_object_spread.onItemClick;
+    var _usePropsValue = _sliced_to_array(usePropsValue({
+      value: outerValue,
+      defaultValue,
+      finalValue: ""
+    }), 2), value2 = _usePropsValue[0], setValue = _usePropsValue[1];
+    var _useState = _sliced_to_array(React.useState(tag), 2), innerTag = _useState[0], setInnerTag = _useState[1];
+    var forceFocus = React.useCallback(function() {
+      var _searchInputRef_current;
+      (_searchInputRef_current = searchInputRef.current) === null || _searchInputRef_current === void 0 ? void 0 : _searchInputRef_current.focus();
+    }, []);
+    var handleChange = React.useCallback(function(event) {
       var value3 = event.target.value;
-      onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(value3, event));
+      onChange && onChange(value3, event);
       setValue(value3);
-    };
-    var focus = function(event) {
-      var value3 = event.target.value;
-      onFocus && (onFocus === null || onFocus === void 0 ? void 0 : onFocus(value3, event));
-    };
-    var blur = function(event) {
-      var searchSelf = searchRef.current;
-      searchSelf && searchSelf.blur();
-      var value3 = event.target.value;
-      onBlur && (onBlur === null || onBlur === void 0 ? void 0 : onBlur(value3, event));
-    };
+    }, [
+      onChange,
+      setValue
+    ]);
+    var handleInputClick = React.useCallback(function(event) {
+      onInputClick === null || onInputClick === void 0 ? void 0 : onInputClick(event);
+    }, [
+      onInputClick
+    ]);
+    var handleFocus = React.useCallback(function(event) {
+      var _event_target;
+      onFocus && onFocus((_event_target = event.target) === null || _event_target === void 0 ? void 0 : _event_target.value, event);
+      if (tag) setInnerTag(false);
+    }, [
+      onFocus,
+      tag
+    ]);
+    var _useState1 = _sliced_to_array(React.useState(null), 2), blurTimer = _useState1[0], setBlurTimer = _useState1[1];
+    var handleBlur = React.useCallback(function(event) {
+      var _searchInputRef_current, _event_target;
+      (_searchInputRef_current = searchInputRef.current) === null || _searchInputRef_current === void 0 ? void 0 : _searchInputRef_current.blur();
+      onBlur && onBlur((_event_target = event.target) === null || _event_target === void 0 ? void 0 : _event_target.value, event);
+      if (tag) {
+        var timer = setTimeout(function() {
+          var _event_target2;
+          setInnerTag(((_event_target2 = event.target) === null || _event_target2 === void 0 ? void 0 : _event_target2.value) ? tag : false);
+        }, 150);
+        setBlurTimer(timer);
+      }
+    }, [
+      onBlur,
+      tag
+    ]);
     React.useEffect(function() {
-      setValue(outerValue);
+      return function() {
+        if (blurTimer) clearTimeout(blurTimer);
+      };
     }, [
-      outerValue
+      blurTimer
+    ]);
+    var clearaVal = React.useCallback(function(event) {
+      if (disabled || readOnly) return;
+      setValue("");
+      forceFocus();
+      onChange && onChange("");
+      onClear && onClear(event);
+    }, [
+      disabled,
+      readOnly,
+      onChange,
+      onClear,
+      setValue,
+      forceFocus
+    ]);
+    var onKeydown = React.useCallback(function(e2) {
+      if (e2.key === "Enter") {
+        var event = e2.nativeEvent;
+        if (typeof event.cancelable !== "boolean" || event.cancelable) {
+          event.preventDefault();
+        }
+        onSearch && onSearch(value2);
+      }
+    }, [
+      onSearch,
+      value2
+    ]);
+    var cls = React.useMemo(function() {
+      var _obj;
+      return classNames(classPrefix2, (_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-disabled"), disabled), _define_property(_obj, "".concat(classPrefix2, "-focus"), left || backable), _obj), className);
+    }, [
+      disabled,
+      backable,
+      left,
+      className
     ]);
     React.useEffect(function() {
-      autoFocus && forceFocus();
+      if (autoFocus) {
+        forceFocus();
+      }
     }, [
-      autoFocus
+      autoFocus,
+      forceFocus
     ]);
     var renderField = function() {
+      var inputCls = classNames("".concat(classPrefix2, "-input"));
       return /* @__PURE__ */ React.createElement("input", {
-        className: "".concat(classPrefix2, "-input ").concat(clearable ? "".concat(classPrefix2, "-input-clear") : ""),
-        ref: searchRef,
+        className: inputCls,
+        ref: searchInputRef,
         value: value2 || "",
         placeholder: placeholder || locale.placeholder,
         disabled,
         readOnly,
         maxLength,
         onKeyDown: onKeydown,
-        onChange: function(e2) {
-          return change(e2);
-        },
-        onFocus: function(e2) {
-          return focus(e2);
-        },
-        onBlur: function(e2) {
-          return blur(e2);
-        },
-        onClick: function(e2) {
-          return clickInput(e2);
-        }
+        onChange: handleChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onClick: handleInputClick
       });
     };
-    var clickInput = function(e2) {
-      onInputClick && onInputClick(e2);
-    };
-    var renderLeftIn = function() {
+    var renderValueByTags = React.useCallback(function() {
+      if (!value2) {
+        setTimeout(function() {
+          forceFocus();
+        }, 0);
+        return null;
+      }
+      var list = value2.split(",");
+      if (!list) return null;
+      return /* @__PURE__ */ React.createElement("div", {
+        className: "nut-searchbar-values"
+      }, list.map(function(item, index2) {
+        return /* @__PURE__ */ React.createElement("div", {
+          key: "def-".concat(index2),
+          className: "nut-searchbar-value",
+          onClick: function(e2) {
+            return onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, e2);
+          }
+        }, item, /* @__PURE__ */ React.createElement(n$6, null));
+      }));
+    }, [
+      value2,
+      onItemClick
+    ]);
+    var renderLeftIn = React.useCallback(function() {
       if (!leftIn) return null;
       return /* @__PURE__ */ React.createElement("div", {
         className: "".concat(classPrefix2, "-leftin ").concat(classPrefix2, "-icon")
       }, leftIn);
-    };
-    var renderLeft = function() {
+    }, [
+      leftIn
+    ]);
+    var renderLeft = React.useCallback(function() {
       if (!backable && !left) return null;
       return /* @__PURE__ */ React.createElement("div", {
         className: "".concat(classPrefix2, "-left")
-      }, backable ? /* @__PURE__ */ React.createElement(d$7, {
-        width: "16",
-        height: "16"
-      }) : left);
-    };
-    var renderRightIn = function() {
+      }, backable ? /* @__PURE__ */ React.createElement(d$7, null) : left);
+    }, [
+      backable,
+      left
+    ]);
+    var renderRightIn = React.useCallback(function() {
       if (!rightIn) return null;
-      return /* @__PURE__ */ React.createElement("div", {
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.isValidElement(rightIn) ? /* @__PURE__ */ React.createElement("div", {
         className: "".concat(classPrefix2, "-rightin ").concat(classPrefix2, "-icon")
-      }, rightIn);
-    };
-    var renderRight = function() {
+      }, rightIn) : /* @__PURE__ */ React.createElement("div", {
+        className: "".concat(classPrefix2, "-rightin")
+      }, rightIn));
+    }, [
+      rightIn
+    ]);
+    var renderRight = React.useCallback(function() {
       if (!right) return null;
       return /* @__PURE__ */ React.createElement("div", {
         className: "".concat(classPrefix2, "-right")
       }, right);
-    };
-    var handleClear = function() {
+    }, [
+      right
+    ]);
+    var renderClear = React.useCallback(function() {
+      if (!value2 || !clearable) return null;
       return /* @__PURE__ */ React.createElement("div", {
         className: "".concat(classPrefix2, "-clear ").concat(classPrefix2, "-icon"),
-        onClick: function(e2) {
-          return clearaVal(e2);
-        }
+        onClick: clearaVal,
+        "aria-label": "清除"
       }, /* @__PURE__ */ React.createElement(n$2, null));
-    };
-    var clearaVal = function(event) {
-      if (disabled || readOnly) {
-        return;
-      }
-      setValue("");
-      onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(""));
-      onClear && onClear(event);
-      forceFocus();
-    };
-    var onKeydown = function(e2) {
-      if (e2.key === "Enter") {
-        var event = e2.nativeEvent;
-        if (typeof event.cancelable !== "boolean" || event.cancelable) {
-          event.preventDefault();
-        }
-        onSearch && onSearch(value2);
-      }
-    };
+    }, [
+      value2,
+      clearable,
+      clearaVal
+    ]);
     return /* @__PURE__ */ React.createElement("div", {
-      className: "".concat(classPrefix2, " ").concat(disabled ? "".concat(classPrefix2, "-disabled") : "", "  ").concat(className || ""),
+      className: cls,
       style
     }, renderLeft(), /* @__PURE__ */ React.createElement("div", {
-      className: "".concat(classPrefix2, "-content ").concat(shape === "round" ? "".concat(classPrefix2, "-round") : "")
-    }, renderLeftIn(), renderField(), clearable && !value2 && renderRightIn(), clearable && value2 && handleClear()), renderRight());
+      className: classNames("".concat(classPrefix2, "-content"), _define_property({}, "".concat(classPrefix2, "-round"), shape === "round"))
+    }, renderLeftIn(), renderField(), innerTag ? renderValueByTags() : renderClear(), renderRightIn()), renderRight());
   };
   SearchBar.displayName = "NutSearchBar";
   var defaultProps$O = _object_spread_props(_object_spread({}, ComponentDefaults), {
@@ -19206,14 +19274,13 @@ Please add \`${key2}Action\` when creating your handler.`);
     showCount: false,
     rows: 2,
     maxLength: 140,
-    placeholder: "",
     readOnly: false,
     disabled: false,
     autoSize: false,
     plain: false,
     status: "default"
   });
-  var TextArea = function(props) {
+  var TextArea = /* @__PURE__ */ React.forwardRef(function(props, ref) {
     var locale = useConfig().locale;
     var _ref = _object_spread({}, defaultProps$L, props), className = _ref.className, value2 = _ref.value, defaultValue = _ref.defaultValue, showCount = _ref.showCount, maxLength = _ref.maxLength, rows = _ref.rows, placeholder = _ref.placeholder, readOnly = _ref.readOnly, disabled = _ref.disabled, autoSize = _ref.autoSize, style = _ref.style, plain = _ref.plain, status = _ref.status, onChange = _ref.onChange, onBlur = _ref.onBlur, onFocus = _ref.onFocus, rest = _object_without_properties(_ref, [
       "className",
@@ -19248,13 +19315,13 @@ Please add \`${key2}Action\` when creating your handler.`);
       defaultValue,
       finalValue: format2(defaultValue),
       onChange
-    }), 2), inputValue = _usePropsValue[0], setInputValue = _usePropsValue[1];
+    }), 2), innerValue = _usePropsValue[0], setInnerValue = _usePropsValue[1];
     React.useEffect(function() {
       if (autoSize) setContentHeight();
     }, [
       autoSize,
       defaultValue,
-      inputValue
+      innerValue
     ]);
     var setContentHeight = function() {
       var textarea = textareaRef.current;
@@ -19269,7 +19336,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     var handleChange = function(event) {
       var text2 = event.target;
       var value3 = compositionRef.current ? text2.value : format2(text2.value);
-      setInputValue(value3);
+      setInnerValue(value3);
     };
     var isDisabled = function() {
       return disabled || readOnly;
@@ -19282,6 +19349,24 @@ Please add \`${key2}Action\` when creating your handler.`);
       if (isDisabled()) return;
       onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     };
+    React.useImperativeHandle(ref, function() {
+      return {
+        clear: function() {
+          return setInnerValue("");
+        },
+        focus: function() {
+          var _textareaRef_current;
+          return (_textareaRef_current = textareaRef.current) === null || _textareaRef_current === void 0 ? void 0 : _textareaRef_current.focus();
+        },
+        blur: function() {
+          var _textareaRef_current;
+          return (_textareaRef_current = textareaRef.current) === null || _textareaRef_current === void 0 ? void 0 : _textareaRef_current.blur();
+        },
+        get nativeElement() {
+          return textareaRef.current;
+        }
+      };
+    });
     var _obj;
     return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
       className: classNames(classPrefix2, (_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-disabled"), disabled), _define_property(_obj, "".concat(classPrefix2, "-readonly"), readOnly), _define_property(_obj, "".concat(classPrefix2, "-rtl"), rtl), _define_property(_obj, "".concat(classPrefix2, "-plain"), plain), _define_property(_obj, "".concat(classPrefix2, "-container"), !plain), _define_property(_obj, "".concat(classPrefix2, "-").concat(status), status), _obj), className)
@@ -19291,7 +19376,7 @@ Please add \`${key2}Action\` when creating your handler.`);
       style,
       disabled,
       readOnly,
-      value: inputValue,
+      value: innerValue,
       onChange: handleChange,
       onBlur: handleBlur,
       onFocus: handleFocus,
@@ -19306,8 +19391,8 @@ Please add \`${key2}Action\` when creating your handler.`);
       placeholder: placeholder !== void 0 ? placeholder : locale.placeholder
     })), showCount && /* @__PURE__ */ React.createElement("div", {
       className: classNames("".concat(classPrefix2, "-limit"), _define_property({}, "".concat(classPrefix2, "-limit-disabled"), disabled))
-    }, inputValue.length, "/", maxLength < 0 ? 0 : maxLength)));
-  };
+    }, innerValue.length, "/", maxLength < 0 ? 0 : maxLength)));
+  });
   TextArea.displayName = "NutTextArea";
   var defaultProps$K = _object_spread_props(_object_spread({}, ComponentDefaults), {
     percent: 0,
@@ -19317,8 +19402,8 @@ Please add \`${key2}Action\` when creating your handler.`);
     delay: 0
   });
   var Progress = function(props) {
-    var rtl = useRtl();
-    var _ref = _object_spread({}, defaultProps$K, props), className = _ref.className, style = _ref.style, percent = _ref.percent, background = _ref.background, color = _ref.color, strokeWidth = _ref.strokeWidth, showText = _ref.showText, animated2 = _ref.animated, children = _ref.children, lazy = _ref.lazy, delay = _ref.delay, rest = _object_without_properties(_ref, [
+    useRtl();
+    var _ref = _object_spread({}, defaultProps$K, props), className = _ref.className, style = _ref.style, percent = _ref.percent, background = _ref.background, color = _ref.color, strokeWidth = _ref.strokeWidth, showText = _ref.showText, animated2 = _ref.animated, children = _ref.children, lazy = _ref.lazy, delay = _ref.delay, borderRadius = _ref.borderRadius, fontSize = _ref.fontSize, activeMode = _ref.activeMode, duration = _ref.duration, ariaLabel = _ref.ariaLabel, onActiveEnd = _ref.onActiveEnd, rest = _object_without_properties(_ref, [
       "className",
       "style",
       "percent",
@@ -19329,24 +19414,48 @@ Please add \`${key2}Action\` when creating your handler.`);
       "animated",
       "children",
       "lazy",
-      "delay"
+      "delay",
+      "borderRadius",
+      "fontSize",
+      "activeMode",
+      "duration",
+      "ariaLabel",
+      "onActiveEnd"
     ]);
     var classPrefix2 = "nut-progress";
     var _obj;
     var classesInner = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-inner"), true), _define_property(_obj, "".concat(classPrefix2, "-active"), animated2), _obj));
     var stylesOuter = {
       height: "".concat(strokeWidth, "px"),
+      borderRadius: borderRadius && parseInt(borderRadius.toString()),
       background
     };
     var _useState = _sliced_to_array(React.useState(0), 2), displayPercent = _useState[0], setDispalyPercent = _useState[1];
     var stylesInner = {
       width: "".concat(displayPercent, "%"),
-      background: color || "#FF0F23"
+      background: color || "#FF0F23",
+      borderRadius: borderRadius && parseInt(borderRadius.toString()),
+      transition: "width ".concat(duration || 300, "ms ease-in-out")
     };
     React.useEffect(function() {
-      setDispalyPercent(percent);
+      var timer = null;
+      if (activeMode === "backwards") {
+        setDispalyPercent(0);
+        timer = setTimeout(function() {
+          setDispalyPercent(percent);
+        }, duration || 300);
+      } else {
+        setDispalyPercent(percent);
+      }
+      return function() {
+        if (timer) {
+          clearTimeout(timer);
+        }
+      };
     }, [
-      percent
+      percent,
+      activeMode,
+      duration
     ]);
     var _useState1 = _sliced_to_array(React.useState(false), 2), intersecting = _useState1[0], setIntersecting = _useState1[1];
     var progressRef = React.useRef(null);
@@ -19398,26 +19507,23 @@ Please add \`${key2}Action\` when creating your handler.`);
     return /* @__PURE__ */ React.createElement("div", _object_spread({
       ref: progressRef,
       className: classNames(classPrefix2, className),
-      style
+      style,
+      "aria-label": ariaLabel
     }, rest), /* @__PURE__ */ React.createElement("div", {
       className: "".concat(classPrefix2, "-outer"),
       style: stylesOuter
     }, /* @__PURE__ */ React.createElement("div", {
       className: classesInner,
-      style: stylesInner
-    }, showText && /* @__PURE__ */ React.createElement("div", {
-      className: "".concat(classPrefix2, "-text"),
-      style: rtl ? {
-        right: "".concat(displayPercent, "%")
-      } : {
-        left: "".concat(displayPercent, "%")
+      style: stylesInner,
+      onTransitionEnd: function() {
+        onActiveEnd === null || onActiveEnd === void 0 ? void 0 : onActiveEnd();
       }
-    }, children || /* @__PURE__ */ React.createElement("div", {
-      className: "".concat(classPrefix2, "-text-inner"),
+    })), showText && /* @__PURE__ */ React.createElement("div", {
+      className: "".concat(classPrefix2, "-text"),
       style: {
-        background: color
+        fontSize: fontSize && parseInt(fontSize.toString())
       }
-    }, percent, "%")))));
+    }, children || "".concat(percent, "%")));
   };
   Progress.displayName = "NutProgress";
   var Preview = function(param) {
@@ -19682,10 +19788,21 @@ Please add \`${key2}Action\` when creating your handler.`);
               ];
             case 1:
               _files = _state.sent();
-              if (!_files.length) $el.value = "";
-              _state.label = 2;
+              if (!_files.length) {
+                $el.value = "";
+                return [
+                  2
+                ];
+              }
+              return [
+                3,
+                3
+              ];
             case 2:
-              _files = filterFiles(filesArr);
+              _files = filesArr;
+              _state.label = 3;
+            case 3:
+              _files = filterFiles(_files);
               tasks = _files.map(function(file) {
                 var _file_type;
                 var info = {
@@ -19712,22 +19829,22 @@ Please add \`${key2}Action\` when creating your handler.`);
               });
               if (!!autoUpload) return [
                 3,
-                3
+                4
               ];
               setUploadQueue(tasks);
               return [
                 3,
-                5
+                6
               ];
-            case 3:
+            case 4:
               return [
                 4,
                 uploadAction(tasks)
               ];
-            case 4:
-              _state.sent();
-              _state.label = 5;
             case 5:
+              _state.sent();
+              _state.label = 6;
+            case 6:
               if (clearInput) {
                 $el.value = "";
               }
@@ -23919,47 +24036,63 @@ Please add \`${key2}Action\` when creating your handler.`);
     indicator: false,
     loop: false,
     duration: 3e3,
-    autoPlay: false,
+    autoplay: false,
     defaultValue: 0,
     touchable: true,
     effect: void 0
   };
   var Swiper = /* @__PURE__ */ React.forwardRef(function(props, ref) {
-    var boundIndex = function boundIndex2(current2) {
+    var boundIndex = function boundIndex2(current) {
       var min = 0;
       var max = count - 1;
-      if (current2 === max && !loop2 && props.slideSize) {
+      if (current === max && !loop2 && props.slideSize) {
         var slideSize = props.slideSize;
         var swiperSize = getSwiperSize();
         var ratio = (swiperSize - slideSize) / slideSize;
-        return bound2(current2, min, max - ratio);
+        return bound2(current, min, max - ratio);
       }
-      return current2;
+      return current;
     };
     var classPrefix2 = "nut-swiper";
-    var _$_object_spread = _object_spread({}, defaultProps$i, props), children = _$_object_spread.children, direction = _$_object_spread.direction, indicator = _$_object_spread.indicator, loop2 = _$_object_spread.loop, effect2 = _$_object_spread.effect, autoPlay = _$_object_spread.autoPlay, touchable = _$_object_spread.touchable, defaultValue = _$_object_spread.defaultValue, duration = _$_object_spread.duration, style = _$_object_spread.style, className = _$_object_spread.className;
+    var _$_object_spread = _object_spread({}, defaultProps$i, props), children = _$_object_spread.children, direction = _$_object_spread.direction, indicator = _$_object_spread.indicator, loop2 = _$_object_spread.loop, effect2 = _$_object_spread.effect, autoplay = _$_object_spread.autoplay, touchable = _$_object_spread.touchable, defaultValue = _$_object_spread.defaultValue, duration = _$_object_spread.duration, style = _$_object_spread.style, className = _$_object_spread.className;
     var isVertical = direction === "vertical";
     var count = React.useMemo(function() {
       var c6 = 0;
-      React.Children.map(children, function(child, index2) {
+      React.Children.map(children, function() {
         c6 += 1;
       });
       return c6;
     }, [
       children
     ]);
+    var timeoutRef = React.useRef(null);
+    var _useState = _sliced_to_array(React.useState(false), 2), dragging = _useState[0], setDragging = _useState[1];
+    var _useRefState = _sliced_to_array(useRefState(defaultValue), 2), innerValue = _useRefState[0], setInnerValue = _useRefState[1];
+    var stageRef = React.useRef(null);
+    var swiperRef = React.useRef(null);
+    var _useSpring = _sliced_to_array(useSpring(function() {
+      return {
+        x: !isVertical ? innerValue.current * 100 * -1 : 0,
+        y: isVertical ? innerValue.current * 100 * -1 : 0,
+        s: 0,
+        reset: function() {
+        },
+        config: {
+          tension: 200,
+          friction: 30
+        }
+      };
+    }), 2), springs = _useSpring[0], api = _useSpring[1];
     var getSlideSize = function() {
       if (props.slideSize) return props.slideSize;
       if (stageRef.current) {
-        if (isVertical) return stageRef.current.offsetHeight;
-        return stageRef.current.offsetWidth;
+        return isVertical ? stageRef.current.offsetHeight : stageRef.current.offsetWidth;
       }
       return 0;
     };
     var getSwiperSize = function() {
       if (swiperRef.current) {
-        if (isVertical) return swiperRef.current.offsetHeight;
-        return swiperRef.current.offsetWidth;
+        return isVertical ? swiperRef.current.offsetHeight : swiperRef.current.offsetWidth;
       }
       return 0;
     };
@@ -23972,51 +24105,44 @@ Please add \`${key2}Action\` when creating your handler.`);
       }
       return v;
     };
-    var timeoutRef = React.useRef(null);
-    var _useState = _sliced_to_array(React.useState(false), 2), dragging = _useState[0], setDragging = _useState[1];
-    var _useRefState = _sliced_to_array(useRefState(defaultValue), 2), current = _useRefState[0], setCurrent = _useRefState[1];
-    var stageRef = React.useRef(null);
-    var swiperRef = React.useRef(null);
-    var _useSpring = _sliced_to_array(useSpring(function() {
-      return {
-        x: !isVertical ? current.current * 100 * -1 : 0,
-        y: isVertical ? current.current * 100 * -1 : 0,
-        s: 0,
-        reset: function() {
-        },
-        config: {
-          tension: 200,
-          friction: 30
-        }
-      };
-    }), 2), springs = _useSpring[0], api = _useSpring[1];
     React.useEffect(function() {
       var _obj;
-      api.start((_obj = {}, _define_property(_obj, isVertical ? "y" : "x", boundIndex(current.current) * -1 * 100), _define_property(_obj, "immediate", true), _obj));
+      api.start((_obj = {}, _define_property(_obj, isVertical ? "y" : "x", boundIndex(innerValue.current) * -1 * 100), _define_property(_obj, "immediate", true), _obj));
     }, [
       swiperRef.current
     ]);
     var swiperDirection = React.useRef(1);
-    var _useList = _sliced_to_array(useList(effect2, count, current), 2), transforms = _useList[0], setTransforms = _useList[1];
-    var runTimeSwiper = function() {
+    var _useList = _sliced_to_array(useList(effect2, count, innerValue), 2), transforms = _useList[0], setTransforms = _useList[1];
+    var runTimeSwiper = React.useCallback(function() {
       var durationNumber = typeof duration === "string" ? parseInt(duration) : duration;
-      var d2 = typeof autoPlay === "number" ? autoPlay : durationNumber;
+      var d2 = durationNumber;
+      if (typeof props.autoPlay === "number") {
+        d2 = props.autoPlay;
+      } else if (typeof autoplay === "number") {
+        d2 = autoplay;
+      }
       timeoutRef.current = window.setTimeout(function() {
         next();
         runTimeSwiper();
       }, d2);
-    };
+    }, [
+      props.autoPlay,
+      autoplay,
+      duration
+    ]);
     React.useEffect(function() {
-      if (!autoPlay || dragging) return;
+      var shouldAutoplay = props.autoPlay || autoplay;
+      if (!shouldAutoplay || dragging) return;
       runTimeSwiper();
       return function() {
         if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
       };
     }, [
-      autoPlay,
+      autoplay,
       duration,
       dragging,
-      count
+      count,
+      runTimeSwiper
     ]);
     var to2 = function(index2) {
       var immediate = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
@@ -24026,7 +24152,7 @@ Please add \`${key2}Action\` when creating your handler.`);
         var cycleIndex = index2 % count;
         targetIndex = cycleIndex < 0 ? cycleIndex + count : cycleIndex;
       }
-      setCurrent(targetIndex);
+      setInnerValue(targetIndex);
       (_props_onChange = props.onChange) === null || _props_onChange === void 0 ? void 0 : _props_onChange.call(props, targetIndex);
       if (effect2) {
         updateTransform(transforms, setTransforms, effect2, targetIndex);
@@ -24090,13 +24216,10 @@ Please add \`${key2}Action\` when creating your handler.`);
       bounds: function() {
         if (loop2) return {};
         var slideSize = getSlideSize();
-        if (isVertical) {
-          return {
-            top: 0,
-            bottom: (count - 1) * slideSize
-          };
-        }
-        return {
+        return isVertical ? {
+          top: 0,
+          bottom: (count - 1) * slideSize
+        } : {
           left: 0,
           right: (count - 1) * slideSize
         };
@@ -24110,13 +24233,13 @@ Please add \`${key2}Action\` when creating your handler.`);
       }
     });
     var renderIndicator = function() {
-      if (/* @__PURE__ */ React.isValidElement(indicator)) return indicator;
       if (!indicator) return null;
+      if (/* @__PURE__ */ React.isValidElement(indicator)) return indicator;
       var _obj;
       return /* @__PURE__ */ React.createElement("div", {
         className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-indicator"), true), _define_property(_obj, "".concat(classPrefix2, "-indicator-vertical"), isVertical), _define_property(_obj, "".concat(classPrefix2, "-indicator-horizontal"), !isVertical), _obj))
       }, /* @__PURE__ */ React.createElement(Indicator, {
-        current: getRefValue(current),
+        current: getRefValue(innerValue),
         total: count,
         direction
       }));
@@ -24137,7 +24260,7 @@ Please add \`${key2}Action\` when creating your handler.`);
           count,
           isVertical,
           effect: effect2,
-          current,
+          current: innerValue,
           swiperDirection,
           dragging,
           transforms
@@ -41479,9 +41602,10 @@ Please add \`${key2}Action\` when creating your handler.`);
     icon: null
   });
   var Step = function(props) {
-    var _ref = _object_spread({}, defaultProps$c, props);
+    var _ref = _object_spread({}, defaultProps$c, props), type2 = _ref.type;
     _ref.children;
     var title = _ref.title, description = _ref.description, value2 = _ref.value, icon = _ref.icon, className = _ref.className, restProps = _object_without_properties(_ref, [
+      "type",
       "children",
       "title",
       "description",
@@ -41490,65 +41614,107 @@ Please add \`${key2}Action\` when creating your handler.`);
       "className"
     ]);
     var parent2 = React.useContext(DataContext);
-    var dot = parent2.propSteps.dot;
-    var getCurrentStatus = function() {
-      var index2 = value2;
-      if (index2 < +parent2.propSteps.value) return "finish";
-      return index2 === +parent2.propSteps.value ? "process" : "wait";
-    };
-    var handleClickStep = function() {
-      var _parent_propSteps, _parent_propSteps1;
-      ((_parent_propSteps = parent2.propSteps) === null || _parent_propSteps === void 0 ? void 0 : _parent_propSteps.onStepClick) && ((_parent_propSteps1 = parent2.propSteps) === null || _parent_propSteps1 === void 0 ? void 0 : _parent_propSteps1.onStepClick(value2));
-    };
+    var _parent_propSteps = parent2.propSteps, parentType = _parent_propSteps.type, parentValue = _parent_propSteps.value, status = _parent_propSteps.status, parentIcon = _parent_propSteps.icon, onStepClick = _parent_propSteps.onStepClick;
+    var currentStatus = React.useMemo(function() {
+      if ([
+        "default",
+        "business"
+      ].includes(status)) {
+        return status;
+      }
+      if (value2 < +parentValue) return "finish";
+      return value2 === +parentValue ? "process" : "wait";
+    }, [
+      value2,
+      parentValue
+    ]);
+    var handleClickStep = React.useCallback(function() {
+      onStepClick === null || onStepClick === void 0 ? void 0 : onStepClick(value2);
+    }, [
+      onStepClick,
+      value2
+    ]);
     var classPrefix2 = "nut-step";
-    var classes = classNames(classPrefix2, _define_property({}, "".concat(classPrefix2, "-").concat(getCurrentStatus()), true), className);
-    var renderIconClass = function() {
-      if (icon) {
-        return "".concat(classPrefix2, "-icon is-icon");
-      }
-      if (!dot && !icon) {
-        return "".concat(classPrefix2, "-icon is-text");
+    var classes = React.useMemo(function() {
+      var _obj;
+      return classNames(classPrefix2, (_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-").concat(currentStatus), true), _define_property(_obj, "".concat(classPrefix2, "-").concat(type2 || parentType), true), _define_property(_obj, "".concat(classPrefix2, "-special"), description), _obj), className);
+    }, [
+      currentStatus,
+      type2,
+      className
+    ]);
+    var renderHeadType = React.useMemo(function() {
+      switch (type2 || parentType) {
+        case "text":
+          return /* @__PURE__ */ React.createElement("span", {
+            className: "".concat(classPrefix2, "-head-text")
+          }, value2);
+        case "dot":
+          return /* @__PURE__ */ React.createElement("span", {
+            className: "".concat(classPrefix2, "-head-dot")
+          });
+        case "icon":
+          return /* @__PURE__ */ React.createElement("span", {
+            className: "".concat(classPrefix2, "-head-icon")
+          }, icon || parentIcon);
+        default:
+          return null;
       }
-      return "".concat(classPrefix2, "-icon");
-    };
+    }, [
+      type2,
+      value2,
+      icon
+    ]);
+    var renderContent = React.useMemo(function() {
+      if (!title && !description) return null;
+      return /* @__PURE__ */ React.createElement("div", {
+        className: "".concat(classPrefix2, "-main")
+      }, title && /* @__PURE__ */ React.createElement("span", {
+        className: "".concat(classPrefix2, "-title")
+      }, title), description && /* @__PURE__ */ React.createElement("span", {
+        className: "".concat(classPrefix2, "-description")
+      }, description));
+    }, [
+      title,
+      description
+    ]);
     return /* @__PURE__ */ React.createElement("div", _object_spread_props(_object_spread({
       className: classes
     }, restProps), {
       onClick: handleClickStep
     }), /* @__PURE__ */ React.createElement("div", {
-      className: "nut-step-head"
+      className: "".concat(classPrefix2, "-head")
     }, /* @__PURE__ */ React.createElement("div", {
-      className: "nut-step-line"
-    }), /* @__PURE__ */ React.createElement("div", {
-      className: renderIconClass()
-    }, icon || !dot && /* @__PURE__ */ React.createElement("span", {
-      className: "nut-step-inner"
-    }, value2))), (title || description) && /* @__PURE__ */ React.createElement("div", {
-      className: "nut-step-main"
-    }, /* @__PURE__ */ React.createElement("span", {
-      className: "nut-step-title"
-    }, title), description && /* @__PURE__ */ React.createElement("span", {
-      className: "nut-step-description"
-    }, description)));
+      className: "".concat(classPrefix2, "-head-").concat(type2 || parentType, "-wrap")
+    }, renderHeadType)), /* @__PURE__ */ React.createElement("div", {
+      className: "".concat(classPrefix2, "-line")
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: "".concat(classPrefix2, "-line-inner")
+    })), renderContent);
   };
   Step.displayName = "NutStep";
   var defaultProps$b = _object_spread_props(_object_spread({}, ComponentDefaults), {
-    value: 0,
     direction: "horizontal",
-    dot: false
+    layout: "single",
+    type: "text",
+    status: "default",
+    value: 0,
+    icon: null
   });
   var Steps = function(props) {
     var propSteps = _object_spread({}, defaultProps$b, props);
-    var children = propSteps.children;
+    var direction = propSteps.direction;
     propSteps.value;
-    var direction = propSteps.direction, className = propSteps.className, dot = propSteps.dot;
+    var layout = propSteps.layout, status = propSteps.status, type2 = propSteps.type, className = propSteps.className, children = propSteps.children;
     propSteps.onStepClick;
     var restProps = _object_without_properties(propSteps, [
-      "children",
-      "value",
       "direction",
+      "value",
+      "layout",
+      "status",
+      "type",
       "className",
-      "dot",
+      "children",
       "onStepClick"
     ]);
     var parentSteps = {
@@ -41556,12 +41722,22 @@ Please add \`${key2}Action\` when creating your handler.`);
     };
     var classPrefix2 = "nut-steps";
     var _obj;
-    var classes = classNames(classPrefix2, (_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-").concat(direction), true), _define_property(_obj, "".concat(classPrefix2, "-dot"), !!dot), _obj), className);
+    var classes = classNames(classPrefix2, (_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-").concat(direction), true), _define_property(_obj, "".concat(classPrefix2, "-").concat(direction, "-count-").concat(React.Children.count(children)), true), _define_property(_obj, "".concat(classPrefix2, "-").concat(direction, "-").concat(layout), true), _define_property(_obj, "".concat(classPrefix2, "-").concat(direction, "-").concat(type2), true), _define_property(_obj, "".concat(classPrefix2, "-").concat(direction, "-").concat(status), true), _obj), className);
     return /* @__PURE__ */ React.createElement(DataContext.Provider, {
       value: parentSteps
     }, /* @__PURE__ */ React.createElement("div", _object_spread({
       className: classes
-    }, restProps), children));
+    }, restProps), React.Children.map(children, function(child, index2) {
+      if (/* @__PURE__ */ React.isValidElement(child)) {
+        return /* @__PURE__ */ React.cloneElement(child, {
+          // @ts-ignore
+          className: classNames(child.props.className, {
+            "nut-step-last": index2 === React.Children.count(children) - 1
+          })
+        });
+      }
+      return child;
+    })));
   };
   Steps.displayName = "NutSteps";
   function useTableSticky(columns) {