@nutui/nutui-react 3.0.11 → 3.0.12

package/dist/nutui.react.umd.js

@@ -18210,10 +18210,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 +18249,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 +18462,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 +18651,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);
+      };
+    }, [
+      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);
+      }
     }, [
-      outerValue
+      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), {
@@ -19317,8 +19382,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 +19394,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 +19487,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 +19768,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 +19809,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 = "";
               }
@@ -41479,9 +41576,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 +41588,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 +41696,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) {