@nutui/nutui-react-taro 3.0.11-patch.0 → 3.0.12

package/dist/nutui.react.umd.js

@@ -12641,25 +12641,23 @@
     return JSON.stringify(newValue) === JSON.stringify(oldValue);
   };
   var handleOverlap = function(value2) {
-    if (value2[0] > value2[1]) {
-      return value2.slice(0).reverse();
-    }
-    return value2;
+    return value2[0] > value2[1] ? value2.slice(0).reverse() : value2;
   };
   var Range = function(props) {
     var rtl = useRtl();
-    var _$_object_spread = _object_spread({}, defaultProps$R, props), className = _$_object_spread.className, style = _$_object_spread.style, range2 = _$_object_spread.range, disabled = _$_object_spread.disabled, button = _$_object_spread.button, vertical = _$_object_spread.vertical, marks = _$_object_spread.marks, minDescription = _$_object_spread.minDescription, maxDescription = _$_object_spread.maxDescription, currentDescription = _$_object_spread.currentDescription, min = _$_object_spread.min, max = _$_object_spread.max, step = _$_object_spread.step, value2 = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, onChange = _$_object_spread.onChange, onStart = _$_object_spread.onStart, onEnd = _$_object_spread.onEnd;
+    var _mergeProps = mergeProps(defaultProps$R, props), className = _mergeProps.className, style = _mergeProps.style, range2 = _mergeProps.range, disabled = _mergeProps.disabled, button = _mergeProps.button, vertical = _mergeProps.vertical, marks = _mergeProps.marks, minDescription = _mergeProps.minDescription, maxDescription = _mergeProps.maxDescription, currentDescription = _mergeProps.currentDescription, min = _mergeProps.min, max = _mergeProps.max, step = _mergeProps.step, value2 = _mergeProps.value, defaultValue = _mergeProps.defaultValue, onChange = _mergeProps.onChange, onStart = _mergeProps.onStart, onEnd = _mergeProps.onEnd;
     var rtlClassPrefix = React.useMemo(function() {
       return "rtl-".concat(vertical ? verticalClassPrefix : classPrefix$f);
     }, [
       vertical
     ]);
-    var _useState = _sliced_to_array(React.useState(0), 2), buttonIndex = _useState[0], setButtonIndex = _useState[1];
-    var _useState1 = _sliced_to_array(React.useState("start"), 2), dragStatus = _useState1[0], setDragStatus = _useState1[1];
+    var buttonRef = React.useRef(0);
+    var dragStatusRef = React.useRef("start");
     var touch = useTouch();
     var root2 = React.useRef(null);
-    var _useState2 = _sliced_to_array(React.useState([]), 2), marksList = _useState2[0], setMarksList = _useState2[1];
-    var _useState3 = _sliced_to_array(React.useState(0), 2), startValue = _useState3[0], setStartValue = _useState3[1];
+    var rootRect = React.useRef(null);
+    var _useState = _sliced_to_array(React.useState([]), 2), marksList = _useState[0], setMarksList = _useState[1];
+    var _useState1 = _sliced_to_array(React.useState(0), 2), startValue = _useState1[0], setStartValue = _useState1[1];
     var scope = React.useMemo(function() {
       if (max < min || max === min) {
         console.log("max 的值需要大于 min的值");
@@ -12677,10 +12675,8 @@
       defaultValue,
       finalValue: 0,
       onChange: handleChange
-    }), 2), current = _usePropsValue[0], setCurrent = _usePropsValue[1];
-    var _useState4 = _sliced_to_array(React.useState(function() {
-      return value2 || defaultValue || 0;
-    }), 2), exactValue = _useState4[0], setExactValue = _useState4[1];
+    }), 2), innerValue = _usePropsValue[0], setInnerValue = _usePropsValue[1];
+    var exactValueRef = React.useRef(value2 || defaultValue || 0);
     var marksRef = React.useRef({});
     React.useEffect(function() {
       if (marks) {
@@ -12720,11 +12716,11 @@
       var verticalClassPrefix2 = "nut-range-vertical-mark";
       var lowerBound = min;
       var upperBound = max;
-      if (range2 && Array.isArray(current)) {
-        lowerBound = current[0];
-        upperBound = current[1];
+      if (range2 && Array.isArray(innerValue)) {
+        lowerBound = innerValue[0];
+        upperBound = innerValue[1];
       } else {
-        upperBound = current;
+        upperBound = innerValue;
       }
       var isActive = mark <= upperBound && mark >= lowerBound;
       var _$classNames = [
@@ -12743,7 +12739,7 @@
       min,
       max,
       range2,
-      current,
+      innerValue,
       vertical,
       rtl,
       rtlClassPrefix
@@ -12753,41 +12749,40 @@
     }, [
       range2
     ]);
-    var calcMainAxis = React.useCallback(function() {
-      var modelVal = current;
+    var calcMainAxis = React.useMemo(function() {
+      var modelVal = innerValue;
       return isRange(modelVal) ? "".concat((modelVal[1] - modelVal[0]) * 100 / scope, "%") : "".concat((modelVal - min) * 100 / scope, "%");
     }, [
-      current,
+      innerValue,
       isRange,
       min,
       scope
     ]);
-    var calcOffset = React.useCallback(function() {
-      var modelVal = current;
+    var calcOffset = React.useMemo(function() {
+      var modelVal = innerValue;
       return isRange(modelVal) ? "".concat((modelVal[0] - min) * 100 / scope, "%") : "0%";
     }, [
-      current,
+      innerValue,
       isRange,
       min,
       scope
     ]);
-    var barStyle = React.useCallback(function() {
+    var barStyle = React.useMemo(function() {
       if (vertical) {
         return {
-          height: calcMainAxis(),
-          top: calcOffset(),
-          transition: dragStatus ? "none" : void 0
+          height: calcMainAxis,
+          top: calcOffset,
+          transition: dragStatusRef.current ? "none" : void 0
         };
       }
       var dir = rtl ? "right" : "left";
       var _obj2;
       return _obj2 = {
-        width: calcMainAxis()
-      }, _define_property(_obj2, dir, calcOffset()), _define_property(_obj2, "transition", dragStatus ? "none" : void 0), _obj2;
+        width: calcMainAxis
+      }, _define_property(_obj2, dir, calcOffset), _define_property(_obj2, "transition", dragStatusRef.current ? "none" : void 0), _obj2;
     }, [
       calcMainAxis,
       calcOffset,
-      dragStatus,
       rtl,
       vertical
     ]);
@@ -12807,12 +12802,12 @@
       vertical
     ]);
     var tickClass = React.useCallback(function(mark) {
-      if (range2 && Array.isArray(current)) {
-        return mark <= current[1] && mark >= current[0];
+      if (range2 && Array.isArray(innerValue)) {
+        return mark <= innerValue[1] && mark >= innerValue[0];
       }
-      return mark <= current;
+      return mark <= innerValue;
     }, [
-      current,
+      innerValue,
       range2
     ]);
     var format2 = React.useCallback(function(value3) {
@@ -12829,49 +12824,50 @@
       } else {
         value3 = format2(value3);
       }
-      if (!isSameValue(value3, current)) {
-        setCurrent(value3);
+      if (!isSameValue(value3, innerValue)) {
+        setInnerValue(value3);
       }
       end && onEnd && onEnd(value3);
     }, [
-      current,
+      innerValue,
       format2,
       isRange,
       onEnd,
-      setCurrent
+      setInnerValue
     ]);
-    var click = React.useCallback(/* @__PURE__ */ function() {
+    var handleClick = React.useCallback(/* @__PURE__ */ function() {
       var _ref = _async_to_generator(function(event) {
-        var _event_detail, rect, x, delta, total, _event_detail1, y, value3, _current, left2, right2, middle;
+        var _event_detail, rect, _event_detail_x, x, delta, total, _event_detail1, _event_detail_y, y, value3, _innerValue, left2, right2, middle;
         return __generator(this, function(_state) {
           switch (_state.label) {
             case 0:
-              if (disabled || !root2.current) {
-                return [
-                  2
-                ];
-              }
-              setDragStatus("");
+              if (disabled || !root2.current) return [
+                2
+              ];
+              if (isHm) return [
+                2
+              ];
+              dragStatusRef.current = "";
               return [
                 4,
                 getRectInMultiPlatform(root2.current)
               ];
             case 1:
               rect = _state.sent();
-              x = typeof ((_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.x) !== "undefined" ? event.detail.x : event.clientX;
-              if (isHm) x = parseFloat(pxTransform(event.windowX));
+              x = (_event_detail_x = (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.x) !== null && _event_detail_x !== void 0 ? _event_detail_x : event.clientX;
+              if (isHm) x = parseFloat(pxTransform(event.windowX || x));
               delta = x - rect.left;
               total = rect.width;
               if (vertical) {
-                y = typeof ((_event_detail1 = event.detail) === null || _event_detail1 === void 0 ? void 0 : _event_detail1.y) !== "undefined" ? event.detail.y : event.clientY;
-                if (isHm) y = parseFloat(pxTransform(event.windowY));
+                y = (_event_detail_y = (_event_detail1 = event.detail) === null || _event_detail1 === void 0 ? void 0 : _event_detail1.y) !== null && _event_detail_y !== void 0 ? _event_detail_y : event.clientY;
+                if (isHm) y = parseFloat(pxTransform(event.windowY || y));
                 delta = y - rect.top;
                 total = rect.height;
               }
               value3 = min + delta / total * scope;
-              setExactValue(current);
-              if (isRange(current)) {
-                _current = _sliced_to_array(current, 2), left2 = _current[0], right2 = _current[1];
+              exactValueRef.current = innerValue;
+              if (isRange(innerValue)) {
+                _innerValue = _sliced_to_array(innerValue, 2), left2 = _innerValue[0], right2 = _innerValue[1];
                 middle = (left2 + right2) / 2;
                 if (value3 <= middle) {
                   updateValue([
@@ -12897,7 +12893,7 @@
         return _ref.apply(this, arguments);
       };
     }(), [
-      current,
+      innerValue,
       disabled,
       isRange,
       min,
@@ -12905,20 +12901,52 @@
       updateValue,
       vertical
     ]);
+    Taro.useReady(function() {
+      var getRootRect = /* @__PURE__ */ function() {
+        var _ref = _async_to_generator(function() {
+          var rect;
+          return __generator(this, function(_state) {
+            switch (_state.label) {
+              case 0:
+                if (!root2.current) return [
+                  3,
+                  2
+                ];
+                return [
+                  4,
+                  getRectInMultiPlatform(root2.current)
+                ];
+              case 1:
+                rect = _state.sent();
+                rootRect.current = rect;
+                _state.label = 2;
+              case 2:
+                return [
+                  2
+                ];
+            }
+          });
+        });
+        return function getRootRect2() {
+          return _ref.apply(this, arguments);
+        };
+      }();
+      Taro.nextTick(function() {
+        getRootRect();
+      });
+    });
     var onTouchStart = React.useCallback(function(event) {
-      if (disabled) {
-        return;
-      }
+      if (disabled) return;
       touch.start(event);
-      setExactValue(current);
-      if (isRange(current)) {
-        setStartValue(current.map(format2));
+      exactValueRef.current = innerValue;
+      if (isRange(innerValue)) {
+        setStartValue(innerValue.map(format2));
       } else {
-        setStartValue(format2(current));
+        setStartValue(format2(innerValue));
       }
-      setDragStatus("start");
+      dragStatusRef.current = "start";
     }, [
-      current,
+      innerValue,
       disabled,
       format2,
       isRange,
@@ -12926,60 +12954,59 @@
     ]);
     var onTouchMove = React.useCallback(/* @__PURE__ */ function() {
       var _ref = _async_to_generator(function(event) {
-        var rect, delta, total, diff, newValue;
+        var handleMove;
         return __generator(this, function(_state) {
-          switch (_state.label) {
-            case 0:
-              if (disabled || !root2.current) {
-                return [
+          if (disabled || !root2.current) return [
+            2
+          ];
+          if (dragStatusRef.current === "start") {
+            onStart && onStart();
+            dragStatusRef.current = "draging";
+          }
+          touch.move(event);
+          handleMove = /* @__PURE__ */ function() {
+            var _ref2 = _async_to_generator(function() {
+              var delta, total, diff, newValue;
+              return __generator(this, function(_state2) {
+                if (!rootRect.current) return [
                   2
                 ];
-              }
-              if (dragStatus === "start") {
-                onStart && onStart();
-              }
-              touch.move(event);
-              setDragStatus("draging");
-              return [
-                4,
-                getRectInMultiPlatform(root2.current)
-              ];
-            case 1:
-              rect = _state.sent();
-              if (!rect) return [
-                2
-              ];
-              delta = isHm ? parseFloat(pxTransform(touch.deltaX.current)) : touch.deltaX.current;
-              total = rect.width;
-              diff = delta / total * scope;
-              diff = rtl ? -diff : diff;
-              if (vertical) {
-                delta = isHm ? parseFloat(pxTransform(touch.deltaY.current)) : touch.deltaY.current;
-                total = rect.height;
+                delta = isHm ? parseFloat(pxTransform(touch.deltaX.current)) : touch.deltaX.current;
+                total = rootRect.current.width;
                 diff = delta / total * scope;
-              }
-              if (isRange(startValue)) {
-                newValue = exactValue.slice();
-                newValue[buttonIndex] = startValue[buttonIndex] + diff;
-              } else {
+                diff = rtl ? -diff : diff;
+                if (vertical) {
+                  delta = isHm ? parseFloat(pxTransform(touch.deltaY.current)) : touch.deltaY.current;
+                  total = rootRect.current.height;
+                  diff = delta / total * scope;
+                }
                 newValue = startValue + diff;
-              }
-              setExactValue(newValue);
-              updateValue(newValue);
-              return [
-                2
-              ];
-          }
+                if (isRange(startValue)) {
+                  newValue = exactValueRef.current.slice();
+                  newValue[buttonRef.current] = startValue[buttonRef.current] + diff;
+                }
+                exactValueRef.current = newValue;
+                updateValue(newValue);
+                return [
+                  2
+                ];
+              });
+            });
+            return function handleMove2() {
+              return _ref2.apply(this, arguments);
+            };
+          }();
+          requestAnimationFrame(handleMove);
+          return [
+            2
+          ];
         });
       });
       return function(event) {
         return _ref.apply(this, arguments);
       };
     }(), [
-      buttonIndex,
       disabled,
-      dragStatus,
-      exactValue,
       isRange,
       onStart,
       rtl,
@@ -12990,38 +13017,23 @@
       vertical
     ]);
     var onTouchEnd = React.useCallback(function() {
-      if (disabled) {
-        return;
-      }
-      if (dragStatus === "draging") {
-        updateValue(current, true);
+      if (disabled) return;
+      if (dragStatusRef.current === "draging") {
+        updateValue(innerValue, true);
       }
-      setDragStatus("");
+      dragStatusRef.current = "";
     }, [
-      current,
+      innerValue,
       disabled,
-      dragStatus,
       updateValue
     ]);
     var curValue = React.useCallback(function(idx) {
-      var modelVal = current;
+      var modelVal = innerValue;
       var value3 = typeof idx === "number" ? modelVal[idx] : modelVal;
       return value3;
     }, [
-      current
+      innerValue
     ]);
-    var buttonTransform = React.useMemo(function() {
-      var borderRadis = {
-        borderRadius: pxTransform(13)
-      };
-      var transform2 = {
-        transform: "translate(-50%, -50%)"
-      };
-      if (isHm) {
-        return _object_spread({}, borderRadis, transform2);
-      }
-      return _object_spread({}, transform2);
-    }, []);
     var buttonNumberTransform = React.useMemo(function() {
       return vertical ? "translate(100%, -50%)" : "translate(-50%, -100%)";
     }, [
@@ -13029,21 +13041,20 @@
     ]);
     var renderButton = React.useCallback(function(index2) {
       var _obj2, _obj12;
-      return /* @__PURE__ */ React.createElement(components.View, null, button || /* @__PURE__ */ React.createElement(components.View, {
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, button || /* @__PURE__ */ React.createElement(components.View, {
         className: classNames("".concat(classPrefix$f, "-button"), (_obj2 = {}, _define_property(_obj2, "".concat(verticalClassPrefix, "-button"), vertical), _define_property(_obj2, "".concat(rtlClassPrefix, "-button"), rtl), _obj2)),
-        // @ts-ignore
-        style: buttonTransform
+        style: {
+          transform: "translate(-50%, -50%)"
+        }
       }, currentDescription !== null && /* @__PURE__ */ React.createElement(components.Text, {
         className: classNames("".concat(classPrefix$f, "-button-number"), (_obj12 = {}, _define_property(_obj12, "".concat(verticalClassPrefix, "-button-number"), vertical), _define_property(_obj12, "".concat(rtlClassPrefix, "-button-number"), rtl), _obj12)),
         style: {
-          // @ts-ignore
           transform: buttonNumberTransform
         }
       }, currentDescription ? currentDescription(curValue(index2)) : curValue(index2))));
     }, [
       button,
       buttonNumberTransform,
-      buttonTransform,
       curValue,
       currentDescription,
       rtl,
@@ -13079,41 +13090,22 @@
       tickClass,
       vertical
     ]);
-    var wrapperTransform = React.useMemo(function() {
-      [
-        {
-          translateX: pxTransform(vertical ? -12 : -13)
-        },
-        {
-          translateY: pxTransform(-12)
-        }
-      ];
-      var wrapperTransform2 = "translate(-50%, -50%)";
-      return wrapperTransform2;
-    }, [
-      vertical
-    ]);
-    var rangeWrapperTransform = React.useMemo(function() {
-      return "translate(-50%, -50%)";
-    }, []);
     var renderRangeButton = React.useCallback(function() {
       return [
         0,
         1
-      ].map(function(item, index2) {
-        var isLeft = index2 === 0;
-        var suffix = isLeft ? "left" : "right";
+      ].map(function(_, index2) {
+        var suffix = index2 === 0 ? "left" : "right";
         var _obj2;
         var cls = classNames("".concat(classPrefix$f, "-button-wrapper-").concat(suffix), (_obj2 = {}, _define_property(_obj2, "".concat(verticalClassPrefix, "-button-wrapper-").concat(suffix), vertical), _define_property(_obj2, "".concat(rtlClassPrefix, "-button-wrapper-").concat(suffix), rtl), _obj2));
         return /* @__PURE__ */ React.createElement(components.View, {
           key: index2,
           className: cls,
           style: {
-            // @ts-ignore
-            transform: rangeWrapperTransform
+            transform: "translate(-50%, -50%)"
           },
           onTouchStart: function(e) {
-            setButtonIndex(index2);
+            buttonRef.current = index2;
             onTouchStart(e);
           },
           onTouchMove,
@@ -13129,7 +13121,6 @@
       onTouchMove,
       onTouchStart,
       renderButton,
-      rangeWrapperTransform,
       vertical,
       rtl,
       rtlClassPrefix
@@ -13139,8 +13130,7 @@
         catchMove: true,
         className: classNames("".concat(classPrefix$f, "-button-wrapper"), _define_property({}, "".concat(verticalClassPrefix, "-button-wrapper"), vertical)),
         style: {
-          // @ts-ignore
-          transform: wrapperTransform
+          transform: "translate(-50%, -50%)"
         },
         onTouchStart,
         onTouchMove,
@@ -13155,18 +13145,18 @@
       onTouchMove,
       onTouchStart,
       renderButton,
-      wrapperTransform,
       vertical
     ]);
     var renderButtonWrapper = React.useCallback(function() {
-      if (range2) {
-        return renderRangeButton();
-      }
-      return renderSingleButton();
+      return /* @__PURE__ */ React.createElement(components.View, {
+        className: "".concat(classPrefix$f, "-bar ").concat(isHm ? "" : "".concat(classPrefix$f, "-bar-animate"), "}"),
+        style: barStyle
+      }, range2 ? renderRangeButton() : renderSingleButton());
     }, [
       renderRangeButton,
       renderSingleButton,
-      range2
+      range2,
+      barStyle
     ]);
     return /* @__PURE__ */ React.createElement(components.View, {
       className: containerClasses,
@@ -13176,13 +13166,8 @@
     }, minDescription || min), /* @__PURE__ */ React.createElement(components.View, {
       ref: root2,
       className: classes,
-      onClick: function(e) {
-        return click(e);
-      }
-    }, renderMarks(), /* @__PURE__ */ React.createElement(components.View, {
-      className: "".concat(classPrefix$f, "-bar"),
-      style: barStyle()
-    }, renderButtonWrapper())), maxDescription !== null && /* @__PURE__ */ React.createElement(components.Text, {
+      onClick: handleClick
+    }, renderMarks(), renderButtonWrapper()), maxDescription !== null && /* @__PURE__ */ React.createElement(components.Text, {
       className: "".concat(classPrefix$f, "-max")
     }, maxDescription || max));
   };
@@ -13355,128 +13340,229 @@
     left: "",
     right: "",
     rightIn: "",
-    leftIn: /* @__PURE__ */ React.createElement(IconSVG$9, {
-      size: "16"
-    })
+    leftIn: /* @__PURE__ */ React.createElement(IconSVG$9, 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, right2 = _$_object_spread.right, left2 = _$_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 onInput = 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, right2 = _$_object_spread.right, left2 = _$_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 handleInput = React.useCallback(function(event) {
       var _event_detail;
-      var eventValue = event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value;
+      var eventValue = (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value;
       if (value2 === eventValue) return;
-      onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(eventValue, event));
+      onChange && onChange(eventValue, event);
       setValue(eventValue);
       eventValue === "" && forceFocus();
-    };
-    var focus = function(event) {
-      var _event_detail;
-      onFocus && onFocus(event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value, event);
-    };
-    var blur = function(event) {
+    }, [
+      onChange,
+      setValue,
+      forceFocus,
+      value2
+    ]);
+    var handleFocus = React.useCallback(function(event) {
       var _event_detail;
-      var searchSelf = searchRef.current;
-      searchSelf && searchSelf.blur();
-      onBlur && onBlur(event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value, event);
-    };
+      onFocus && onFocus((_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value, event);
+      if (tag) setInnerTag(false);
+    }, [
+      onFocus
+    ]);
+    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_detail;
+      (_searchInputRef_current = searchInputRef.current) === null || _searchInputRef_current === void 0 ? void 0 : _searchInputRef_current.blur();
+      onBlur && onBlur((_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value, event);
+      if (tag) {
+        var timer = setTimeout(function() {
+          if (Taro.getEnv() === "WEB") {
+            var _event_target;
+            setInnerTag(((_event_target = event.target) === null || _event_target === void 0 ? void 0 : _event_target.value) ? tag : false);
+          } else {
+            setInnerTag(tag);
+          }
+        }, 200);
+        setBlurTimer(timer);
+      }
+    }, [
+      onBlur,
+      tag,
+      value2
+    ]);
     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
+    ]);
+    var cls = React.useMemo(function() {
+      var _obj;
+      return classNames(classPrefix2, (_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-disabled"), disabled), _define_property(_obj, "".concat(classPrefix2, "-focus"), left2 || backable), _obj), className);
     }, [
-      outerValue
+      disabled,
+      backable,
+      left2,
+      className
     ]);
     React.useEffect(function() {
-      if (Taro.getEnv() === "WEB") {
-        autoFocus && forceFocus();
+      if (autoFocus) {
+        forceFocus();
+      }
+      if (tag && !innerTag) {
+        forceFocus();
       }
     }, [
-      autoFocus
+      autoFocus,
+      forceFocus,
+      innerTag
     ]);
     var renderField = function() {
-      return /* @__PURE__ */ React.createElement(components.Input, {
-        className: "".concat(classPrefix2, "-input ").concat(clearable ? "".concat(classPrefix2, "-input-clear") : ""),
-        ref: searchRef,
-        style,
-        value: (value2 || "").toString(),
+      var inputCls = classNames("".concat(classPrefix2, "-input"));
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, Taro.getEnv() === "WEB" ? /* @__PURE__ */ React.createElement(components.Input, {
+        className: inputCls,
+        ref: searchInputRef,
+        style: _object_spread({}, style, {
+          color: "".concat(innerTag ? "transparent" : "#333")
+        }),
+        value: value2,
         placeholder: placeholder || locale.placeholder,
         disabled: disabled || readOnly,
         maxlength: maxLength,
         autoFocus,
-        onInput,
-        onFocus: focus,
-        onBlur: blur,
-        onClick: clickInput,
+        onInput: handleInput,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onClick: onInputClick,
         onConfirm
-      });
-    };
-    var clickInput = function(e) {
-      onInputClick && onInputClick(e);
+      }) : /* @__PURE__ */ React.createElement(components.Input, {
+        className: inputCls,
+        ref: searchInputRef,
+        style: _object_spread({}, style, {
+          color: "".concat(innerTag ? "transparent" : "#333")
+        }),
+        value: value2,
+        placeholder: placeholder || locale.placeholder,
+        disabled: disabled || readOnly,
+        maxlength: maxLength,
+        focus: autoFocus,
+        onInput: handleInput,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onClick: onInputClick,
+        onConfirm
+      }));
     };
-    var renderLeftIn = function() {
+    var renderValueByTags = React.useCallback(function() {
+      if (!innerTag) return null;
+      if (!value2) {
+        setTimeout(function() {
+          forceFocus();
+        }, 0);
+        return null;
+      }
+      var list = value2.split(",");
+      if (!list) return null;
+      return /* @__PURE__ */ React.createElement(components.View, {
+        className: "nut-searchbar-values"
+      }, list.map(function(item, index2) {
+        return /* @__PURE__ */ React.createElement(components.View, {
+          key: "def-".concat(index2),
+          className: "nut-searchbar-value",
+          onClick: function(e) {
+            return onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, e);
+          }
+        }, item, /* @__PURE__ */ React.createElement(IconSVG$p, null));
+      }));
+    }, [
+      value2,
+      onItemClick,
+      innerTag
+    ]);
+    var renderLeftIn = React.useCallback(function() {
       if (!leftIn) return null;
       return /* @__PURE__ */ React.createElement(components.View, {
         className: "".concat(classPrefix2, "-leftin ").concat(classPrefix2, "-icon")
       }, leftIn);
-    };
-    var renderLeft = function() {
+    }, [
+      leftIn
+    ]);
+    var renderLeft = React.useCallback(function() {
       if (!backable && !left2) return null;
       return /* @__PURE__ */ React.createElement(components.View, {
         className: "".concat(classPrefix2, "-left")
-      }, backable ? /* @__PURE__ */ React.createElement(IconSVG$y, {
-        size: "16"
-      }) : left2);
-    };
-    var renderRightIn = function() {
+      }, backable ? /* @__PURE__ */ React.createElement(IconSVG$y, null) : left2);
+    }, [
+      backable,
+      left2
+    ]);
+    var renderRightIn = React.useCallback(function() {
       if (!rightIn) return null;
-      return /* @__PURE__ */ React.createElement(components.View, {
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.isValidElement(rightIn) ? /* @__PURE__ */ React.createElement(components.View, {
         className: "".concat(classPrefix2, "-rightin ").concat(classPrefix2, "-icon")
-      }, rightIn);
-    };
-    var renderRight = function() {
+      }, rightIn) : /* @__PURE__ */ React.createElement(components.View, {
+        className: "".concat(classPrefix2, "-rightin")
+      }, rightIn));
+    }, [
+      rightIn
+    ]);
+    var renderRight = React.useCallback(function() {
       if (!right2) return null;
       return /* @__PURE__ */ React.createElement(components.View, {
         className: "".concat(classPrefix2, "-right")
       }, right2);
-    };
-    var handleClear = function() {
+    }, [
+      right2
+    ]);
+    var renderClear = React.useCallback(function() {
       return /* @__PURE__ */ React.createElement(components.View, {
-        className: "".concat(classPrefix2, "-clear  ").concat(classPrefix2, "-icon"),
-        onClick: function(e) {
-          return clearaVal(e);
-        }
-      }, /* @__PURE__ */ React.createElement(IconSVG$f, {
-        size: 16
-      }));
-    };
-    var clearaVal = function(event) {
-      if (disabled || readOnly) {
-        return;
-      }
-      setValue("");
-      forceFocus();
-      onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(""));
-      onClear && onClear(event);
-    };
+        className: "".concat(classPrefix2, "-clear ").concat(classPrefix2, "-icon"),
+        style: {
+          visibility: "".concat(!innerTag && value2 && clearable ? "visible" : "hidden")
+        },
+        onClick: clearaVal,
+        "aria-label": "清除"
+      }, /* @__PURE__ */ React.createElement(IconSVG$f, null));
+    }, [
+      value2,
+      clearable,
+      clearaVal,
+      innerTag
+    ]);
     var onConfirm = function() {
       onSearch && onSearch(value2);
     };
     return /* @__PURE__ */ React.createElement(components.View, {
-      className: "".concat(classPrefix2, " ").concat(disabled ? "".concat(classPrefix2, "-disabled") : "", "  ").concat(className || ""),
+      className: cls,
       style
     }, renderLeft(), /* @__PURE__ */ React.createElement(components.View, {
-      className: "".concat(classPrefix2, "-content ").concat(shape === "round" ? "".concat(classPrefix2, "-round") : "")
+      className: classNames("".concat(classPrefix2, "-content"), _define_property({}, "".concat(classPrefix2, "-round"), shape === "round"))
     }, renderLeftIn(), /* @__PURE__ */ React.createElement(components.View, {
       className: "nut-searchbar-input-box"
-    }, renderField()), clearable && !value2 && renderRightIn(), clearable && value2 && handleClear()), renderRight());
+    }, renderField()), renderValueByTags(), renderClear(), renderRightIn()), renderRight());
   };
   SearchBar.displayName = "NutSearchBar";
   var defaultProps$O = _object_spread_props(_object_spread({}, ComponentDefaults), {
@@ -14008,8 +14094,14 @@
     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, animated = _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;
+    _ref.background;
+    _ref.color;
+    var strokeWidth = _ref.strokeWidth;
+    _ref.showText;
+    _ref.animated;
+    var children = _ref.children, lazy = _ref.lazy, delay = _ref.delay, showInfo = _ref.showInfo, borderRadius = _ref.borderRadius, fontSize = _ref.fontSize, activeColor = _ref.activeColor, backgroundColor = _ref.backgroundColor, active2 = _ref.active, activeMode = _ref.activeMode, duration = _ref.duration, ariaLabel = _ref.ariaLabel, onActiveEnd = _ref.onActiveEnd, rest = _object_without_properties(_ref, [
       "className",
       "style",
       "percent",
@@ -14020,24 +14112,50 @@
       "animated",
       "children",
       "lazy",
-      "delay"
+      "delay",
+      "showInfo",
+      "borderRadius",
+      "fontSize",
+      "activeColor",
+      "backgroundColor",
+      "active",
+      "activeMode",
+      "duration",
+      "ariaLabel",
+      "onActiveEnd"
     ]);
     var classPrefix2 = "nut-progress";
+    var _props_showText, _ref1;
+    var effectiveShowText = (_ref1 = (_props_showText = props.showText) !== null && _props_showText !== void 0 ? _props_showText : showInfo) !== null && _ref1 !== void 0 ? _ref1 : defaultProps$K.showText;
+    var _props_color, _ref2;
+    var effectiveColor = (_ref2 = (_props_color = props.color) !== null && _props_color !== void 0 ? _props_color : activeColor) !== null && _ref2 !== void 0 ? _ref2 : defaultProps$K.color;
+    var _props_background, _ref3;
+    var effectiveBgColor = (_ref3 = (_props_background = props.background) !== null && _props_background !== void 0 ? _props_background : backgroundColor) !== null && _ref3 !== void 0 ? _ref3 : defaultProps$K.background;
+    var _props_animated, _ref4;
+    var effectiveAnimated = (_ref4 = (_props_animated = props.animated) !== null && _props_animated !== void 0 ? _props_animated : active2) !== null && _ref4 !== void 0 ? _ref4 : defaultProps$K.animated;
     var _obj;
-    var classesInner = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-inner"), true), _define_property(_obj, "".concat(classPrefix2, "-active"), animated), _obj));
-    var stylesOuter = {
-      width: "100%",
-      backgroundColor: background
-    };
+    var classesInner = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-inner"), true), _define_property(_obj, "".concat(classPrefix2, "-active"), effectiveAnimated), _obj));
     var _useState = _sliced_to_array(React.useState(percent), 2), displayPercent = _useState[0], setDispalyPercent = _useState[1];
-    var stylesInner = {
-      width: "".concat(displayPercent, "%"),
-      background: color || "#FF0F23"
+    var getStyles = function() {
+      var baseStyles = {
+        height: strokeWidth && pxTransform(Number(strokeWidth)),
+        borderRadius: borderRadius && pxTransform(parseInt(borderRadius.toString()))
+      };
+      var transitionStyle = {
+        transition: "width ".concat(duration || 300, "ms ease-in-out")
+      };
+      return {
+        outer: _object_spread({
+          width: "100%",
+          backgroundColor: effectiveBgColor
+        }, baseStyles),
+        inner: _object_spread({
+          width: "".concat(displayPercent, "%"),
+          background: effectiveColor || "#FF0F23"
+        }, baseStyles, transitionStyle)
+      };
     };
-    if (strokeWidth) {
-      stylesOuter.height = pxTransform(Number(strokeWidth));
-      stylesInner.height = pxTransform(Number(strokeWidth));
-    }
+    var _getStyles = getStyles(), stylesOuter = _getStyles.outer, stylesInner = _getStyles.inner;
     var handlePercent = function() {
       var timer = null;
       if (delay) {
@@ -14052,9 +14170,24 @@
       };
     };
     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);
@@ -14122,36 +14255,12 @@
         handleOtherObserver();
       }
     }, []);
-    var getTextStyle = function() {
-      return rtl ? {
-        right: "100%"
-      } : {
-        left: "100%"
-      };
-    };
-    var computeRight = function() {
-      if (children) {
-        return 0;
-      }
-      if (!harmony()) {
-        return Math.floor("".concat(percent, "%").length * 9 / 2);
-      }
-      return Math.floor(("".concat(percent, "%").length * 9 + 4) / 2);
-    };
-    var computeInnerStyle = function() {
-      var style2 = {
-        backgroundColor: color || "#ff0f23"
-      };
-      if (harmony()) {
-        style2.width = harmony() ? pxTransform("".concat(percent, "%").length * 9 + 4) : "".concat(percent, "%").length * 9 + 4;
-      }
-      return style2;
-    };
     return /* @__PURE__ */ React.createElement(components.View, _object_spread({
       ref: progressRef,
       id: selector,
       className: classNames(classPrefix2, className),
-      style
+      style,
+      "aria-label": ariaLabel
     }, rest), /* @__PURE__ */ React.createElement(components.View, {
       className: "".concat(classPrefix2, "-outer"),
       style: stylesOuter
@@ -14159,25 +14268,14 @@
       className: classesInner,
       style: _object_spread_props(_object_spread({}, stylesInner), {
         position: "relative"
-      })
-    }, showText && /* @__PURE__ */ React.createElement(components.View, {
-      style: _define_property({
-        position: "relative"
-      }, rtl ? "left" : "right", computeRight())
-    }, /* @__PURE__ */ React.createElement(components.View, {
+      }),
+      onTransitionEnd: onActiveEnd
+    })), effectiveShowText && /* @__PURE__ */ React.createElement(components.View, {
       className: "".concat(classPrefix2, "-text"),
-      style: _object_spread_props(_object_spread({}, getTextStyle()), {
-        height: (
-          // eslint-disable-next-line no-nested-ternary
-          harmony() ? pxTransform(strokeWidth ? Number(strokeWidth) + 8 : 18) : strokeWidth ? Number(strokeWidth) + 8 : 18
-        ),
-        position: "absolute",
-        top: -(strokeWidth ? (Number(strokeWidth) + 8 - 9) / 2 + 5 : 9)
-      })
-    }, children || /* @__PURE__ */ React.createElement(components.View, {
-      className: "".concat(classPrefix2, "-text-inner"),
-      style: computeInnerStyle()
-    }, "".concat(percent, "%")))))));
+      style: {
+        fontSize: fontSize && parseInt(fontSize.toString())
+      }
+    }, children || "".concat(percent, "%")));
   };
   Progress.displayName = "NutProgress";
   var Preview = function(param) {
@@ -14401,7 +14499,8 @@
       if (disabled) {
         return;
       }
-      if (Taro.getEnv() === "WEB") {
+      var env = Taro.getEnv();
+      if (env === "WEB") {
         var el = document.getElementById("taroChooseImage");
         if (el) {
           el === null || el === void 0 ? void 0 : el.setAttribute("accept", accept);
@@ -14414,7 +14513,11 @@
           document.body.appendChild(obj);
         }
       }
-      if ((Taro.getEnv() === "WEAPP" || Taro.getEnv() === "JD") && Taro.chooseMedia) {
+      if ([
+        "WEAPP",
+        "JD",
+        "WEB"
+      ].includes(env) && Taro.chooseMedia) {
         Taro.chooseMedia({
           count: multiple ? maxCount * 1 - fileList.length : 1,
           /** 文件类型 */
@@ -14657,32 +14760,22 @@
     }();
     var onChangeImage = /* @__PURE__ */ function() {
       var _ref2 = _async_to_generator(function(res) {
-        var tempFiles, _files, files, filesArr;
+        var tempFiles, _files;
         return __generator(this, function(_state) {
-          switch (_state.label) {
-            case 0:
-              tempFiles = res.tempFiles;
-              _files = filterFiles(tempFiles);
-              files = [];
-              filesArr = new Array().slice.call(files);
-              if (!beforeUpload) return [
-                3,
-                2
-              ];
-              return [
-                4,
-                beforeUpload(filesArr)
-              ];
-            case 1:
-              files = _state.sent();
-              _state.label = 2;
-            case 2:
-              files = filterFiles(filesArr);
-              readFile(_files);
-              return [
-                2
-              ];
+          tempFiles = res.tempFiles;
+          _files = filterFiles(tempFiles);
+          if (beforeUpload) {
+            beforeUpload(new Array().slice.call(_files)).then(function(f) {
+              var _files2 = filterFiles(new Array().slice.call(f));
+              if (!_files2.length) res.tempFiles = [];
+              readFile(_files2);
+            });
+          } else {
+            readFile(_files);
           }
+          return [
+            2
+          ];
         });
       });
       return function onChangeImage2(res) {
@@ -39817,76 +39910,112 @@
     icon: null
   });
   var Step = function(props) {
-    var _ref = _object_spread({}, defaultProps$d, props);
-    _ref.children;
-    var title = _ref.title, description = _ref.description, value2 = _ref.value, icon = _ref.icon, className = _ref.className, restProps = _object_without_properties(_ref, [
-      "children",
-      "title",
-      "description",
-      "value",
-      "icon",
-      "className"
-    ]);
+    var _$_object_spread = _object_spread({}, defaultProps$d, props), type2 = _$_object_spread.type, title = _$_object_spread.title, description = _$_object_spread.description, value2 = _$_object_spread.value, icon = _$_object_spread.icon, className = _$_object_spread.className, style = _$_object_spread.style;
     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,
+      status
+    ]);
+    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,
+      description,
+      classPrefix2
+    ]);
+    var renderHeadType = React.useMemo(function() {
+      switch (type2 || parentType) {
+        case "text":
+          return /* @__PURE__ */ React.createElement(components.View, {
+            className: "".concat(classPrefix2, "-head-text")
+          }, value2);
+        case "dot":
+          return /* @__PURE__ */ React.createElement(components.View, {
+            className: "".concat(classPrefix2, "-head-dot")
+          });
+        case "icon":
+          return /* @__PURE__ */ React.createElement(components.View, {
+            className: "".concat(classPrefix2, "-head-icon")
+          }, icon || parentIcon);
+        default:
+          return null;
       }
-      return "".concat(classPrefix2, "-icon");
-    };
-    return /* @__PURE__ */ React.createElement("div", _object_spread_props(_object_spread({
-      className: classes
-    }, restProps), {
+    }, [
+      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(components.View, {
+        className: "".concat(classPrefix2, "-title")
+      }, title), description && /* @__PURE__ */ React.createElement(components.View, {
+        className: "".concat(classPrefix2, "-description")
+      }, description));
+    }, [
+      title,
+      description
+    ]);
+    return /* @__PURE__ */ React.createElement("div", {
+      className: classes,
+      style,
       onClick: handleClickStep
-    }), /* @__PURE__ */ React.createElement(components.View, {
-      className: "nut-step-head"
     }, /* @__PURE__ */ React.createElement(components.View, {
-      className: "nut-step-line"
-    }), /* @__PURE__ */ React.createElement(components.View, {
-      className: renderIconClass()
-    }, icon || !dot && /* @__PURE__ */ React.createElement("span", {
-      className: "nut-step-inner"
-    }, value2))), (title || description) && /* @__PURE__ */ React.createElement(components.View, {
-      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")
+    }, /* @__PURE__ */ React.createElement(components.View, {
+      className: "".concat(classPrefix2, "-head-").concat(type2 || parentType, "-wrap")
+    }, renderHeadType)), /* @__PURE__ */ React.createElement(components.View, {
+      className: "".concat(classPrefix2, "-line")
+    }, /* @__PURE__ */ React.createElement(components.View, {
+      className: "".concat(classPrefix2, "-line-inner")
+    })), renderContent);
   };
   Step.displayName = "NutStep";
   var defaultProps$c = _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$c, 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 = {
@@ -39894,12 +40023,22 @@
     };
     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) {