@nutui/nutui-react-taro 1.5.4 → 1.5.5-beta.0

package/dist/nutui.react.umd.js

@@ -8,7 +8,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react-taro v1.5.4 Wed May 10 2023 17:37:13 GMT+0800 (中国标准时间)
+* @nutui/nutui-react-taro v1.5.5-beta.0 Wed May 17 2023 16:18:17 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -31,10 +31,15 @@ var __publicField = (obj, key, value) => {
   }
   const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
   var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
-  function getDefaultExportFromCjs(x) {
-    return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
-  }
-  var classname = { exports: {} };
+  var classnameExports = {};
+  var classname = {
+    get exports() {
+      return classnameExports;
+    },
+    set exports(v) {
+      classnameExports = v;
+    }
+  };
   var classname_production_min = {};
   var hasRequiredClassname_production_min;
   function requireClassname_production_min() {
@@ -42,37 +47,37 @@ var __publicField = (obj, key, value) => {
       return classname_production_min;
     hasRequiredClassname_production_min = 1;
     function r(r2) {
-      function t2(t3, i, a, o) {
-        var f = i ? e + t3 + r2.e + i : e + t3, v = f;
+      function e2(e3, i, a, o) {
+        var f = i ? t + e3 + r2.e + i : t + e3, v = f;
         if (a) {
-          var s = " " + v + r2.m;
-          for (var u in a)
-            if (a.hasOwnProperty(u)) {
-              var p = a[u];
-              true === p ? v += s + u : p && (v += s + u + n + p);
+          var u = " " + v + r2.m;
+          for (var s in a)
+            if (a.hasOwnProperty(s)) {
+              var p = a[s];
+              true === p ? v += u + s : p && (v += u + s + n + p);
             }
         }
         if (void 0 !== o)
-          for (var y = 0, c = (o = Array.isArray(o) ? o : [o]).length; y < c; y++) {
-            var l = o[y];
-            if (l && "string" == typeof l.valueOf())
-              for (var g = l.valueOf().split(" "), d = 0; d < g.length; d++) {
+          for (var c = 0, l = o.length; c < l; c++) {
+            var y = o[c];
+            if (y && "string" == typeof y.valueOf())
+              for (var g = y.valueOf().split(" "), d = 0; d < g.length; d++) {
                 var h = g[d];
                 h !== f && (v += " " + h);
               }
           }
         return v;
       }
-      var e = r2.n || "", n = r2.v || r2.m;
-      return function(r3, e2) {
+      var t = r2.n || "", n = r2.v || r2.m;
+      return function(r3, t2) {
         return function(n2, i, a) {
-          return "string" == typeof n2 ? "string" == typeof i || Array.isArray(i) ? t2(r3, n2, void 0, i) : t2(r3, n2, i, a) : t2(r3, e2, n2, i);
+          return "string" == typeof n2 ? Array.isArray(i) ? e2(r3, n2, void 0, i) : e2(r3, n2, i, a) : e2(r3, t2, n2, i);
         };
       };
     }
     Object.defineProperty(classname_production_min, "__esModule", { value: true });
-    var t = r({ e: "-", m: "_" });
-    classname_production_min.cn = t, classname_production_min.withNaming = r;
+    var e = r({ e: "-", m: "_" });
+    classname_production_min.cn = e, classname_production_min.withNaming = r;
     return classname_production_min;
   }
   var classname_development = {};
@@ -102,7 +107,6 @@ var __publicField = (obj, key, value) => {
           }
         }
         if (mix !== void 0) {
-          mix = Array.isArray(mix) ? mix : [mix];
           for (var i = 0, len = mix.length; i < len; i++) {
             var value = mix[i];
             if (!value || typeof value.valueOf() !== "string")
@@ -121,7 +125,7 @@ var __publicField = (obj, key, value) => {
       return function cnGenerator(b2, e) {
         return function(elemOrMods, elemModsOrBlockMix, elemMix) {
           if (typeof elemOrMods === "string") {
-            if (typeof elemModsOrBlockMix === "string" || Array.isArray(elemModsOrBlockMix)) {
+            if (Array.isArray(elemModsOrBlockMix)) {
               return stringify(b2, elemOrMods, void 0, elemModsOrBlockMix);
             }
             return stringify(b2, elemOrMods, elemModsOrBlockMix, elemMix);
@@ -138,12 +142,13 @@ var __publicField = (obj, key, value) => {
     classname_development.withNaming = withNaming;
     return classname_development;
   }
-  if (process.env.NODE_ENV === "production") {
-    classname.exports = requireClassname_production_min();
-  } else {
-    classname.exports = requireClassname_development();
-  }
-  var classnameExports = classname.exports;
+  (function(module2) {
+    if (process.env.NODE_ENV === "production") {
+      module2.exports = requireClassname_production_min();
+    } else {
+      module2.exports = requireClassname_development();
+    }
+  })(classname);
   const cn = classnameExports.withNaming({ n: "nut-", e: "__", m: "--", v: "-" });
   const defaultProps$1v = {
     name: "",
@@ -759,7 +764,6 @@ var __publicField = (obj, key, value) => {
     return string.match(pattern) || [];
   }
   var lodash_kebabcase = kebabCase;
-  const kebabCase$1 = /* @__PURE__ */ getDefaultExportFromCjs(lodash_kebabcase);
   const zhCN = {
     save: "保存",
     confirm: "确认",
@@ -907,7 +911,7 @@ var __publicField = (obj, key, value) => {
   function convertThemeVarsToCSSVars(themeVars) {
     const cssVars = {};
     Object.keys(themeVars).forEach((key) => {
-      cssVars[`--${kebabCase$1(key)}`] = themeVars[key];
+      cssVars[`--${lodash_kebabcase(key)}`] = themeVars[key];
     });
     return cssVars;
   }
@@ -1024,7 +1028,15 @@ var __publicField = (obj, key, value) => {
   };
   Image$1.defaultProps = defaultProps$1q;
   Image$1.displayName = "NutImage";
-  var classnames = { exports: {} };
+  var classnamesExports = {};
+  var classnames = {
+    get exports() {
+      return classnamesExports;
+    },
+    set exports(v) {
+      classnamesExports = v;
+    }
+  };
   /*!
   	Copyright (c) 2018 Jed Watson.
   	Licensed under the MIT License (MIT), see
@@ -1071,8 +1083,7 @@ var __publicField = (obj, key, value) => {
       }
     })();
   })(classnames);
-  var classnamesExports = classnames.exports;
-  const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
+  const classNames = classnamesExports;
   const defaultOverlayProps = {
     zIndex: 2e3,
     duration: 0.3,
@@ -1198,8 +1209,24 @@ var __publicField = (obj, key, value) => {
     subClass.prototype.constructor = subClass;
     _setPrototypeOf(subClass, superClass);
   }
-  var propTypes = { exports: {} };
-  var reactIs = { exports: {} };
+  var propTypesExports = {};
+  var propTypes = {
+    get exports() {
+      return propTypesExports;
+    },
+    set exports(v) {
+      propTypesExports = v;
+    }
+  };
+  var reactIsExports = {};
+  var reactIs = {
+    get exports() {
+      return reactIsExports;
+    },
+    set exports(v) {
+      reactIsExports = v;
+    }
+  };
   var reactIs_production_min = {};
   /** @license React v16.13.1
    * react-is.production.min.js
@@ -1470,14 +1497,16 @@ var __publicField = (obj, key, value) => {
   var hasRequiredReactIs;
   function requireReactIs() {
     if (hasRequiredReactIs)
-      return reactIs.exports;
+      return reactIsExports;
     hasRequiredReactIs = 1;
-    if (process.env.NODE_ENV === "production") {
-      reactIs.exports = requireReactIs_production_min();
-    } else {
-      reactIs.exports = requireReactIs_development();
-    }
-    return reactIs.exports;
+    (function(module2) {
+      if (process.env.NODE_ENV === "production") {
+        module2.exports = requireReactIs_production_min();
+      } else {
+        module2.exports = requireReactIs_development();
+      }
+    })(reactIs);
+    return reactIsExports;
   }
   /*
   object-assign
@@ -2144,8 +2173,6 @@ var __publicField = (obj, key, value) => {
   } else {
     propTypes.exports = requireFactoryWithThrowingShims()();
   }
-  var propTypesExports = propTypes.exports;
-  const PropTypes = /* @__PURE__ */ getDefaultExportFromCjs(propTypesExports);
   function hasClass(element, className) {
     if (element.classList)
       return !!className && element.classList.contains(className);
@@ -2175,22 +2202,22 @@ var __publicField = (obj, key, value) => {
   const config$1 = {
     disabled: false
   };
-  var timeoutsShape = process.env.NODE_ENV !== "production" ? PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-    enter: PropTypes.number,
-    exit: PropTypes.number,
-    appear: PropTypes.number
+  var timeoutsShape = process.env.NODE_ENV !== "production" ? propTypesExports.oneOfType([propTypesExports.number, propTypesExports.shape({
+    enter: propTypesExports.number,
+    exit: propTypesExports.number,
+    appear: propTypesExports.number
   }).isRequired]) : null;
-  var classNamesShape = process.env.NODE_ENV !== "production" ? PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
-    enter: PropTypes.string,
-    exit: PropTypes.string,
-    active: PropTypes.string
-  }), PropTypes.shape({
-    enter: PropTypes.string,
-    enterDone: PropTypes.string,
-    enterActive: PropTypes.string,
-    exit: PropTypes.string,
-    exitDone: PropTypes.string,
-    exitActive: PropTypes.string
+  var classNamesShape = process.env.NODE_ENV !== "production" ? propTypesExports.oneOfType([propTypesExports.string, propTypesExports.shape({
+    enter: propTypesExports.string,
+    exit: propTypesExports.string,
+    active: propTypesExports.string
+  }), propTypesExports.shape({
+    enter: propTypesExports.string,
+    enterDone: propTypesExports.string,
+    enterActive: propTypesExports.string,
+    exit: propTypesExports.string,
+    exitDone: propTypesExports.string,
+    exitActive: propTypesExports.string
   })]) : null;
   const TransitionGroupContext = React.createContext(null);
   var forceReflow = function forceReflow2(node) {
@@ -2440,10 +2467,10 @@ var __publicField = (obj, key, value) => {
      *     (see
      *     [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).
      */
-    nodeRef: PropTypes.shape({
-      current: typeof Element === "undefined" ? PropTypes.any : function(propValue, key, componentName, location, propFullName, secret) {
+    nodeRef: propTypesExports.shape({
+      current: typeof Element === "undefined" ? propTypesExports.any : function(propValue, key, componentName, location, propFullName, secret) {
         var value = propValue[key];
-        return PropTypes.instanceOf(value && "ownerDocument" in value ? value.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location, propFullName, secret);
+        return propTypesExports.instanceOf(value && "ownerDocument" in value ? value.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location, propFullName, secret);
       }
     }),
     /**
@@ -2460,23 +2487,23 @@ var __publicField = (obj, key, value) => {
      * </Transition>
      * ```
      */
-    children: PropTypes.oneOfType([PropTypes.func.isRequired, PropTypes.element.isRequired]).isRequired,
+    children: propTypesExports.oneOfType([propTypesExports.func.isRequired, propTypesExports.element.isRequired]).isRequired,
     /**
      * Show the component; triggers the enter or exit states
      */
-    in: PropTypes.bool,
+    in: propTypesExports.bool,
     /**
      * By default the child component is mounted immediately along with
      * the parent `Transition` component. If you want to "lazy mount" the component on the
      * first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay
      * mounted, even on "exited", unless you also specify `unmountOnExit`.
      */
-    mountOnEnter: PropTypes.bool,
+    mountOnEnter: propTypesExports.bool,
     /**
      * By default the child component stays mounted after it reaches the `'exited'` state.
      * Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.
      */
-    unmountOnExit: PropTypes.bool,
+    unmountOnExit: propTypesExports.bool,
     /**
      * By default the child component does not perform the enter transition when
      * it first mounts, regardless of the value of `in`. If you want this
@@ -2488,15 +2515,15 @@ var __publicField = (obj, key, value) => {
      * > additional `.appear-*` classes, that way you can choose to style it
      * > differently.
      */
-    appear: PropTypes.bool,
+    appear: propTypesExports.bool,
     /**
      * Enable or disable enter transitions.
      */
-    enter: PropTypes.bool,
+    enter: propTypesExports.bool,
     /**
      * Enable or disable exit transitions.
      */
-    exit: PropTypes.bool,
+    exit: propTypesExports.bool,
     /**
      * The duration of the transition, in milliseconds.
      * Required unless `addEndListener` is provided.
@@ -2546,7 +2573,7 @@ var __publicField = (obj, key, value) => {
      * }}
      * ```
      */
-    addEndListener: PropTypes.func,
+    addEndListener: propTypesExports.func,
     /**
      * Callback fired before the "entering" status is applied. An extra parameter
      * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
@@ -2555,7 +2582,7 @@ var __publicField = (obj, key, value) => {
      *
      * @type Function(node: HtmlElement, isAppearing: bool) -> void
      */
-    onEnter: PropTypes.func,
+    onEnter: propTypesExports.func,
     /**
      * Callback fired after the "entering" status is applied. An extra parameter
      * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
@@ -2564,7 +2591,7 @@ var __publicField = (obj, key, value) => {
      *
      * @type Function(node: HtmlElement, isAppearing: bool)
      */
-    onEntering: PropTypes.func,
+    onEntering: propTypesExports.func,
     /**
      * Callback fired after the "entered" status is applied. An extra parameter
      * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
@@ -2573,7 +2600,7 @@ var __publicField = (obj, key, value) => {
      *
      * @type Function(node: HtmlElement, isAppearing: bool) -> void
      */
-    onEntered: PropTypes.func,
+    onEntered: propTypesExports.func,
     /**
      * Callback fired before the "exiting" status is applied.
      *
@@ -2581,7 +2608,7 @@ var __publicField = (obj, key, value) => {
      *
      * @type Function(node: HtmlElement) -> void
      */
-    onExit: PropTypes.func,
+    onExit: propTypesExports.func,
     /**
      * Callback fired after the "exiting" status is applied.
      *
@@ -2589,7 +2616,7 @@ var __publicField = (obj, key, value) => {
      *
      * @type Function(node: HtmlElement) -> void
      */
-    onExiting: PropTypes.func,
+    onExiting: propTypesExports.func,
     /**
      * Callback fired after the "exited" status is applied.
      *
@@ -2597,7 +2624,7 @@ var __publicField = (obj, key, value) => {
      *
      * @type Function(node: HtmlElement) -> void
      */
-    onExited: PropTypes.func
+    onExited: propTypesExports.func
   } : {};
   function noop$2() {
   }
@@ -2836,7 +2863,7 @@ var __publicField = (obj, key, value) => {
      *
      * @type Function(node: HtmlElement, isAppearing: bool)
      */
-    onEnter: PropTypes.func,
+    onEnter: propTypesExports.func,
     /**
      * A `<Transition>` callback fired immediately after the 'enter-active' or
      * 'appear-active' class is applied.
@@ -2845,7 +2872,7 @@ var __publicField = (obj, key, value) => {
      *
      * @type Function(node: HtmlElement, isAppearing: bool)
      */
-    onEntering: PropTypes.func,
+    onEntering: propTypesExports.func,
     /**
      * A `<Transition>` callback fired immediately after the 'enter' or
      * 'appear' classes are **removed** and the `done` class is added to the DOM node.
@@ -2854,7 +2881,7 @@ var __publicField = (obj, key, value) => {
      *
      * @type Function(node: HtmlElement, isAppearing: bool)
      */
-    onEntered: PropTypes.func,
+    onEntered: propTypesExports.func,
     /**
      * A `<Transition>` callback fired immediately after the 'exit' class is
      * applied.
@@ -2863,7 +2890,7 @@ var __publicField = (obj, key, value) => {
      *
      * @type Function(node: HtmlElement)
      */
-    onExit: PropTypes.func,
+    onExit: propTypesExports.func,
     /**
      * A `<Transition>` callback fired immediately after the 'exit-active' is applied.
      *
@@ -2871,7 +2898,7 @@ var __publicField = (obj, key, value) => {
      *
      * @type Function(node: HtmlElement)
      */
-    onExiting: PropTypes.func,
+    onExiting: propTypesExports.func,
     /**
      * A `<Transition>` callback fired immediately after the 'exit' classes
      * are **removed** and the `exit-done` class is added to the DOM node.
@@ -2880,7 +2907,7 @@ var __publicField = (obj, key, value) => {
      *
      * @type Function(node: HtmlElement)
      */
-    onExited: PropTypes.func
+    onExited: propTypesExports.func
   }) : {};
   const CSSTransition$1 = CSSTransition;
   const defaultProps$1p = {
@@ -7889,314 +7916,320 @@ var __publicField = (obj, key, value) => {
     slotButton: null,
     slotInput: null
   };
-  const Input = React.forwardRef((props, ref) => {
-    const { locale } = useConfig$1();
-    const {
-      children,
-      type,
-      name,
-      defaultValue,
-      placeholder,
-      label,
-      labelClass,
-      labelWidth,
-      labelAlign,
-      colon,
-      inputAlign,
-      center,
-      required,
-      disabled,
-      readonly,
-      error,
-      maxlength,
-      leftIcon,
-      leftIconSize,
-      rightIcon,
-      rightIconSize,
-      clearable,
-      clearIcon,
-      clearSize,
-      border,
-      formatTrigger,
-      rules,
-      errorMessage,
-      errorMessageAlign,
-      showWordLimit,
-      autofocus,
-      style,
-      className,
-      rows,
-      slotButton,
-      slotInput,
-      onChange,
-      onBlur,
-      onFocus,
-      onClear,
-      formatter,
-      keypress,
-      onClickInput,
-      onClickLeftIcon,
-      onClickRightIcon,
-      onClick,
-      iconClassPrefix,
-      iconFontClassName,
-      ...rest
-    } = {
-      ...defaultProps$X,
-      ...props
-    };
-    const inputPlaceholder = placeholder || locale.placeholder;
-    const [inputValue, SetInputValue] = React.useState("");
-    const [active, SetActive] = React.useState(false);
-    const [classes, setClasses] = React.useState("");
-    const getModelValue = () => String(inputValue ?? "");
-    const inputRef = React.useRef(null);
-    React.useEffect(() => {
-      setClasses(inputClass);
-      SetInputValue(defaultValue);
-    }, [defaultValue]);
-    React.useEffect(() => {
-      if (inputValue) {
-        updateValue(getModelValue());
-        resetValidation();
-      }
-    }, [inputValue]);
-    React.useImperativeHandle(ref, () => {
-      return inputRef.current;
-    });
-    const inputClass = React.useCallback(() => {
-      const prefixCls = "nut-input";
-      return [
-        prefixCls,
-        `${center ? "center" : ""}`,
-        `${disabled ? `${prefixCls}-disabled` : ""}`,
-        `${required ? `${prefixCls}-required` : ""}`,
-        `${error ? `${prefixCls}-error` : ""}`,
-        `${border ? `${prefixCls}-border` : ""}`,
-        `${slotButton || rightIcon ? `${prefixCls}-right-mark` : ""}`
-      ].filter(Boolean).join(" ");
-    }, [disabled, required, error, border, slotButton, rightIcon, center]);
-    React.useEffect(() => {
-      setClasses(inputClass);
-    }, [disabled, required, error, border, slotButton, rightIcon, center]);
-    const updateValue = (value, trigger = "onChange") => {
-      var _a;
-      let val = value;
-      if (type === "tel") {
-        val = formatNumber(val, false, false);
-      }
-      if (["number", "digit"].includes(type)) {
-        val = formatNumber(val, true, true);
-      }
-      if (type === "tel" && !formatter) {
-        const regTel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
-        const regNumber = /[^-0-9]/g;
-        val = !regTel.test(val) && val.length > 11 ? val.substring(0, 11) : val.replace(regNumber, "");
-      }
-      if (formatter && trigger === formatTrigger) {
-        val = formatter(val);
-      }
-      if (((_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.value) !== val) {
-        inputRef.current.value = val;
-      }
-      SetInputValue(val);
-    };
-    const handleFocus = (event) => {
-      const val = event.target.value;
-      SetActive(true);
-      onFocus && onFocus(val, event);
-    };
-    const handleInput = (event) => {
-      let val = event.target.value;
-      if (maxlength && val.length > Number(maxlength)) {
-        val = val.slice(0, Number(maxlength));
-      }
-      updateValue(val, "onChange");
-      onChange && onChange(val, event);
-    };
-    const handleBlur = (event) => {
-      setTimeout(() => {
-        SetActive(false);
-      }, 200);
-      let val = event.target.value;
-      if (maxlength && val.length > Number(maxlength)) {
-        val = val.slice(0, Number(maxlength));
-      }
-      updateValue(val, "onBlur");
-      onBlur && onBlur(val, event);
-    };
-    const handleClickInput = (event) => {
-      onClickInput && onClickInput(event);
-    };
-    const handleClickLeftIcon = (event) => {
-      onClickLeftIcon && onClickLeftIcon(event);
-    };
-    const handleClickRightIcon = (event) => {
-      onClickRightIcon && onClickRightIcon(event);
-    };
-    const resetValidation = () => {
-    };
-    const inputType = (type2) => {
-      if (type2 === "tel") {
-        return "text";
-      }
-      return type2;
-    };
-    const handleClear = (event) => {
-      updateValue("");
-      onClear && onClear("", event);
-    };
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: `${classes}  ${className || ""}`,
+  const Input = React.forwardRef(
+    (props, ref) => {
+      const { locale } = useConfig$1();
+      const {
+        children,
+        type,
+        name,
+        defaultValue,
+        placeholder,
+        label,
+        labelClass,
+        labelWidth,
+        labelAlign,
+        colon,
+        inputAlign,
+        center,
+        required,
+        disabled,
+        readonly,
+        error,
+        maxlength,
+        leftIcon,
+        leftIconSize,
+        rightIcon,
+        rightIconSize,
+        clearable,
+        clearIcon,
+        clearSize,
+        border,
+        formatTrigger,
+        rules,
+        errorMessage,
+        errorMessageAlign,
+        showWordLimit,
+        autofocus,
         style,
-        onClick: (e) => {
-          onClick && onClick(e);
+        className,
+        rows,
+        slotButton,
+        slotInput,
+        onChange,
+        onBlur,
+        onFocus,
+        onClear,
+        formatter,
+        keypress,
+        onClickInput,
+        onClickLeftIcon,
+        onClickRightIcon,
+        onClick,
+        iconClassPrefix,
+        iconFontClassName,
+        ...rest
+      } = {
+        ...defaultProps$X,
+        ...props
+      };
+      const inputPlaceholder = placeholder || locale.placeholder;
+      const [inputValue, SetInputValue] = React.useState("");
+      const [active, SetActive] = React.useState(false);
+      const [classes, setClasses] = React.useState("");
+      const getModelValue = () => String(inputValue ?? "");
+      const inputRef = React.useRef(null);
+      React.useEffect(() => {
+        setClasses(inputClass);
+        SetInputValue(defaultValue);
+      }, [defaultValue]);
+      React.useEffect(() => {
+        if (inputValue) {
+          updateValue(getModelValue());
+          resetValidation();
         }
-      },
-      slotInput ? /* @__PURE__ */ React.createElement(React.Fragment, null, label ? /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: `nut-input-label ${labelClass}`,
-          style: { width: `${labelWidth}px`, textAlign: labelAlign }
-        },
-        /* @__PURE__ */ React.createElement("div", { className: "label-string" }, label, colon ? ":" : "")
-      ) : null, /* @__PURE__ */ React.createElement("div", { className: "nut-input-value" }, /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: "nut-input-inner",
-          onClick: (e) => {
-            handleClickInput(e);
-          }
-        },
-        slotInput
-      ))) : /* @__PURE__ */ React.createElement(React.Fragment, null, leftIcon && leftIcon.length > 0 ? /* @__PURE__ */ React.createElement(
+      }, [inputValue]);
+      React.useImperativeHandle(ref, () => {
+        return inputRef.current;
+      });
+      const inputClass = React.useCallback(() => {
+        const prefixCls = "nut-input";
+        return [
+          prefixCls,
+          `${center ? "center" : ""}`,
+          `${disabled ? `${prefixCls}-disabled` : ""}`,
+          `${required ? `${prefixCls}-required` : ""}`,
+          `${error ? `${prefixCls}-error` : ""}`,
+          `${border ? `${prefixCls}-border` : ""}`,
+          `${slotButton || rightIcon ? `${prefixCls}-right-mark` : ""}`
+        ].filter(Boolean).join(" ");
+      }, [disabled, required, error, border, slotButton, rightIcon, center]);
+      React.useEffect(() => {
+        setClasses(inputClass);
+      }, [disabled, required, error, border, slotButton, rightIcon, center]);
+      const updateValue = (value, trigger = "onChange") => {
+        var _a;
+        let val = value;
+        if (type === "tel") {
+          val = formatNumber(val, false, false);
+        }
+        if (["number", "digit"].includes(type)) {
+          val = formatNumber(val, true, true);
+        }
+        if (type === "tel" && !formatter) {
+          const regTel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
+          const regNumber = /[^-0-9]/g;
+          val = !regTel.test(val) && val.length > 11 ? val.substring(0, 11) : val.replace(regNumber, "");
+        }
+        if (formatter && trigger === formatTrigger) {
+          val = formatter(val);
+        }
+        if (((_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.value) !== val) {
+          inputRef.current.value = val;
+        }
+        SetInputValue(val);
+      };
+      const handleFocus = (event) => {
+        const val = event.target.value;
+        SetActive(true);
+        onFocus && onFocus(val, event);
+      };
+      const handleInput = (event) => {
+        let val = event.target.value;
+        if (maxlength && val.length > Number(maxlength)) {
+          val = val.slice(0, Number(maxlength));
+        }
+        updateValue(val, "onChange");
+        onChange && onChange(val, event);
+      };
+      const handleBlur = (event) => {
+        SetActive(false);
+        let val = event.target.value;
+        if (maxlength && val.length > Number(maxlength)) {
+          val = val.slice(0, Number(maxlength));
+        }
+        updateValue(val, "onBlur");
+        onBlur && onBlur(val, event);
+      };
+      const handleClickInput = (event) => {
+        onClickInput && onClickInput(event);
+      };
+      const handleClickLeftIcon = (event) => {
+        onClickLeftIcon && onClickLeftIcon(event);
+      };
+      const handleClickRightIcon = (event) => {
+        onClickRightIcon && onClickRightIcon(event);
+      };
+      const resetValidation = () => {
+      };
+      const inputType = (type2) => {
+        if (type2 === "tel") {
+          return "text";
+        }
+        return type2;
+      };
+      const handleClear = (event) => {
+        setTimeout(() => {
+          updateValue("");
+          onClear && onClear("", event);
+        }, 50);
+      };
+      return /* @__PURE__ */ React.createElement(
         "div",
         {
-          className: "nut-input-left-icon",
+          className: `${classes}  ${className || ""}`,
+          style,
           onClick: (e) => {
-            handleClickLeftIcon(e);
+            onClick && onClick(e);
           }
         },
-        /* @__PURE__ */ React.createElement(
-          Icon$1,
+        slotInput ? /* @__PURE__ */ React.createElement(React.Fragment, null, label ? /* @__PURE__ */ React.createElement(
+          "div",
           {
-            classPrefix: iconClassPrefix,
-            fontClassName: iconFontClassName,
-            name: leftIcon,
-            size: leftIconSize
-          }
-        )
-      ) : null, label ? /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: `nut-input-label ${labelClass}`,
-          style: { width: `${labelWidth}px`, textAlign: labelAlign }
-        },
-        /* @__PURE__ */ React.createElement("div", { className: "label-string" }, label, colon ? ":" : "")
-      ) : null, /* @__PURE__ */ React.createElement("div", { className: "nut-input-value" }, /* @__PURE__ */ React.createElement("div", { className: "nut-input-main-con" }, /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: "nut-input-inner",
-          onClick: (e) => {
-            handleClickInput(e);
-          }
-        },
-        type === "textarea" ? /* @__PURE__ */ React.createElement(
-          "textarea",
+            className: `nut-input-label ${labelClass}`,
+            style: { width: `${labelWidth}px`, textAlign: labelAlign }
+          },
+          /* @__PURE__ */ React.createElement("div", { className: "label-string" }, label, colon ? ":" : "")
+        ) : null, /* @__PURE__ */ React.createElement("div", { className: "nut-input-value" }, /* @__PURE__ */ React.createElement(
+          "div",
           {
-            name,
-            className: "input-text",
-            ref: inputRef,
-            style: {
-              textAlign: inputAlign,
-              height: `${Number(rows) * 24}px`
-            },
-            maxLength: maxlength,
-            placeholder: inputPlaceholder,
-            disabled,
-            readOnly: readonly,
-            value: inputValue,
-            autoFocus: autofocus,
-            onBlur: (e) => {
-              handleBlur(e);
-            },
-            onFocus: (e) => {
-              handleFocus(e);
-            },
-            onInput: (e) => {
-              handleInput(e);
+            className: "nut-input-inner",
+            onClick: (e) => {
+              handleClickInput(e);
             }
-          }
-        ) : /* @__PURE__ */ React.createElement(
-          "input",
+          },
+          slotInput
+        ))) : /* @__PURE__ */ React.createElement(React.Fragment, null, leftIcon && leftIcon.length > 0 ? /* @__PURE__ */ React.createElement(
+          "div",
           {
-            ...rest,
-            name,
-            className: "input-text",
-            ref: inputRef,
-            style: { textAlign: inputAlign },
-            type: inputType(type),
-            maxLength: maxlength,
-            placeholder: inputPlaceholder,
-            disabled,
-            readOnly: readonly,
-            value: inputValue,
-            autoFocus: autofocus,
-            onBlur: (e) => {
-              handleBlur(e);
-            },
-            onFocus: (e) => {
-              handleFocus(e);
-            },
-            onInput: (e) => {
-              handleInput(e);
+            className: "nut-input-left-icon",
+            onClick: (e) => {
+              handleClickLeftIcon(e);
             }
-          }
-        ),
-        clearable && !readonly && active && inputValue.length > 0 ? /* @__PURE__ */ React.createElement(
-          Icon$1,
+          },
+          /* @__PURE__ */ React.createElement(
+            Icon$1,
+            {
+              classPrefix: iconClassPrefix,
+              fontClassName: iconFontClassName,
+              name: leftIcon,
+              size: leftIconSize
+            }
+          )
+        ) : null, label ? /* @__PURE__ */ React.createElement(
+          "div",
           {
-            classPrefix: iconClassPrefix,
-            fontClassName: iconFontClassName,
-            className: "nut-input-clear",
-            name: clearIcon,
-            size: clearSize,
+            className: `nut-input-label ${labelClass}`,
+            style: { width: `${labelWidth}px`, textAlign: labelAlign }
+          },
+          /* @__PURE__ */ React.createElement("div", { className: "label-string" }, label, colon ? ":" : "")
+        ) : null, /* @__PURE__ */ React.createElement("div", { className: "nut-input-value" }, /* @__PURE__ */ React.createElement("div", { className: "nut-input-main-con" }, /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: "nut-input-inner",
             onClick: (e) => {
-              handleClear(e);
+              handleClickInput(e);
             }
-          }
-        ) : null
-      ), rightIcon && rightIcon.length > 0 ? /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: "nut-input-right-icon",
-          onClick: (e) => {
-            handleClickRightIcon(e);
-          }
-        },
-        /* @__PURE__ */ React.createElement(
-          Icon$1,
+          },
+          type === "textarea" ? /* @__PURE__ */ React.createElement(
+            "textarea",
+            {
+              name,
+              className: "input-text",
+              ref: inputRef,
+              style: {
+                textAlign: inputAlign,
+                height: `${Number(rows) * 24}px`
+              },
+              maxLength: maxlength,
+              placeholder: inputPlaceholder,
+              disabled,
+              readOnly: readonly,
+              value: inputValue,
+              autoFocus: autofocus,
+              onBlur: (e) => {
+                handleBlur(e);
+              },
+              onFocus: (e) => {
+                handleFocus(e);
+              },
+              onInput: (e) => {
+                handleInput(e);
+              }
+            }
+          ) : /* @__PURE__ */ React.createElement(
+            "input",
+            {
+              ...rest,
+              name,
+              className: "input-text",
+              ref: inputRef,
+              style: { textAlign: inputAlign },
+              type: inputType(type),
+              maxLength: maxlength,
+              placeholder: inputPlaceholder,
+              disabled,
+              readOnly: readonly,
+              value: inputValue,
+              autoFocus: autofocus,
+              onBlur: (e) => {
+                handleBlur(e);
+              },
+              onFocus: (e) => {
+                handleFocus(e);
+              },
+              onInput: (e) => {
+                handleInput(e);
+              }
+            }
+          ),
+          /* @__PURE__ */ React.createElement(
+            Icon$1,
+            {
+              style: {
+                display: clearable && !readonly && active && inputValue.length > 0 ? "inline-flex" : "none",
+                alignItems: "center"
+              },
+              classPrefix: iconClassPrefix,
+              fontClassName: iconFontClassName,
+              className: "nut-input-clear",
+              name: clearIcon,
+              size: clearSize,
+              onClick: (e) => {
+                handleClear(e);
+              }
+            }
+          )
+        ), rightIcon && rightIcon.length > 0 ? /* @__PURE__ */ React.createElement(
+          "div",
           {
-            classPrefix: iconClassPrefix,
-            fontClassName: iconFontClassName,
-            name: rightIcon,
-            size: rightIconSize
-          }
-        )
-      ) : null, slotButton ? /* @__PURE__ */ React.createElement("div", { className: "nut-input-button" }, slotButton) : null, showWordLimit && maxlength ? /* @__PURE__ */ React.createElement("div", { className: "nut-input-word-limit" }, /* @__PURE__ */ React.createElement("span", { className: "nut-input-word-num" }, inputValue ? inputValue.length : 0), "/", maxlength) : null), errorMessage ? /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: "nut-input-error-message",
-          style: {
-            textAlign: errorMessageAlign
-          }
-        },
-        errorMessage
-      ) : /* @__PURE__ */ React.createElement("div", null)))
-    );
-  });
+            className: "nut-input-right-icon",
+            onClick: (e) => {
+              handleClickRightIcon(e);
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            Icon$1,
+            {
+              classPrefix: iconClassPrefix,
+              fontClassName: iconFontClassName,
+              name: rightIcon,
+              size: rightIconSize
+            }
+          )
+        ) : null, slotButton ? /* @__PURE__ */ React.createElement("div", { className: "nut-input-button" }, slotButton) : null, showWordLimit && maxlength ? /* @__PURE__ */ React.createElement("div", { className: "nut-input-word-limit" }, /* @__PURE__ */ React.createElement("span", { className: "nut-input-word-num" }, inputValue ? inputValue.length : 0), "/", maxlength) : null), errorMessage ? /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: "nut-input-error-message",
+            style: {
+              textAlign: errorMessageAlign
+            }
+          },
+          errorMessage
+        ) : /* @__PURE__ */ React.createElement("div", null)))
+      );
+    }
+  );
   Input.defaultProps = defaultProps$X;
   Input.displayName = "NutInput";
   const defaultProps$W = {