@nutui/nutui-react-taro 1.5.4 → 1.5.5

package/dist/nutui.react.mjs

@@ -5,7 +5,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 Wed May 17 2023 16:28:35 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -15,10 +15,15 @@ import Taro, { redirectTo, navigateTo, getEnv, usePageScroll, getSystemInfoSync,
 import { View, ScrollView, PickerView, PickerViewColumn, Image as Image$2 } from "@tarojs/components";
 import ReactDOM, { createPortal, unstable_batchedUpdates } from "react-dom";
 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() {
@@ -26,37 +31,37 @@ function requireClassname_production_min() {
     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 = {};
@@ -86,7 +91,6 @@ function requireClassname_development() {
         }
       }
       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")
@@ -105,7 +109,7 @@ function requireClassname_development() {
     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);
@@ -122,12 +126,13 @@ function requireClassname_development() {
   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(module) {
+  if (process.env.NODE_ENV === "production") {
+    module.exports = requireClassname_production_min();
+  } else {
+    module.exports = requireClassname_development();
+  }
+})(classname);
 const cn = classnameExports.withNaming({ n: "nut-", e: "__", m: "--", v: "-" });
 const defaultProps$1v = {
   name: "",
@@ -743,7 +748,6 @@ function words(string, pattern, guard) {
   return string.match(pattern) || [];
 }
 var lodash_kebabcase = kebabCase;
-const kebabCase$1 = /* @__PURE__ */ getDefaultExportFromCjs(lodash_kebabcase);
 const zhCN = {
   save: "保存",
   confirm: "确认",
@@ -891,7 +895,7 @@ const useConfig$1 = () => {
 function convertThemeVarsToCSSVars(themeVars) {
   const cssVars = {};
   Object.keys(themeVars).forEach((key) => {
-    cssVars[`--${kebabCase$1(key)}`] = themeVars[key];
+    cssVars[`--${lodash_kebabcase(key)}`] = themeVars[key];
   });
   return cssVars;
 }
@@ -1008,7 +1012,15 @@ const Image$1 = (props) => {
 };
 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
@@ -1055,8 +1067,7 @@ var classnames = { exports: {} };
     }
   })();
 })(classnames);
-var classnamesExports = classnames.exports;
-const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
+const classNames = classnamesExports;
 const defaultOverlayProps = {
   zIndex: 2e3,
   duration: 0.3,
@@ -1182,8 +1193,24 @@ function _inheritsLoose(subClass, superClass) {
   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
@@ -1454,14 +1481,16 @@ function requireReactIs_development() {
 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(module) {
+    if (process.env.NODE_ENV === "production") {
+      module.exports = requireReactIs_production_min();
+    } else {
+      module.exports = requireReactIs_development();
+    }
+  })(reactIs);
+  return reactIsExports;
 }
 /*
 object-assign
@@ -2128,8 +2157,6 @@ if (process.env.NODE_ENV !== "production") {
 } 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);
@@ -2159,22 +2186,22 @@ function removeClass$1(element, className) {
 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__default.createContext(null);
 var forceReflow = function forceReflow2(node) {
@@ -2424,10 +2451,10 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *     (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);
     }
   }),
   /**
@@ -2444,23 +2471,23 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    * </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
@@ -2472,15 +2499,15 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    * > 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.
@@ -2530,7 +2557,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    * }}
    * ```
    */
-  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
@@ -2539,7 +2566,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @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
@@ -2548,7 +2575,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @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
@@ -2557,7 +2584,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement, isAppearing: bool) -> void
    */
-  onEntered: PropTypes.func,
+  onEntered: propTypesExports.func,
   /**
    * Callback fired before the "exiting" status is applied.
    *
@@ -2565,7 +2592,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement) -> void
    */
-  onExit: PropTypes.func,
+  onExit: propTypesExports.func,
   /**
    * Callback fired after the "exiting" status is applied.
    *
@@ -2573,7 +2600,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement) -> void
    */
-  onExiting: PropTypes.func,
+  onExiting: propTypesExports.func,
   /**
    * Callback fired after the "exited" status is applied.
    *
@@ -2581,7 +2608,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement) -> void
    */
-  onExited: PropTypes.func
+  onExited: propTypesExports.func
 } : {};
 function noop$2() {
 }
@@ -2820,7 +2847,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$3({},
    *
    * @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.
@@ -2829,7 +2856,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$3({},
    *
    * @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.
@@ -2838,7 +2865,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$3({},
    *
    * @type Function(node: HtmlElement, isAppearing: bool)
    */
-  onEntered: PropTypes.func,
+  onEntered: propTypesExports.func,
   /**
    * A `<Transition>` callback fired immediately after the 'exit' class is
    * applied.
@@ -2847,7 +2874,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$3({},
    *
    * @type Function(node: HtmlElement)
    */
-  onExit: PropTypes.func,
+  onExit: propTypesExports.func,
   /**
    * A `<Transition>` callback fired immediately after the 'exit-active' is applied.
    *
@@ -2855,7 +2882,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$3({},
    *
    * @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.
@@ -2864,7 +2891,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$3({},
    *
    * @type Function(node: HtmlElement)
    */
-  onExited: PropTypes.func
+  onExited: propTypesExports.func
 }) : {};
 const CSSTransition$1 = CSSTransition;
 const defaultProps$1p = {
@@ -7873,314 +7900,320 @@ const defaultProps$X = {
   slotButton: null,
   slotInput: null
 };
-const Input = 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] = useState("");
-  const [active, SetActive] = useState(false);
-  const [classes, setClasses] = useState("");
-  const getModelValue = () => String(inputValue ?? "");
-  const inputRef = useRef(null);
-  useEffect(() => {
-    setClasses(inputClass);
-    SetInputValue(defaultValue);
-  }, [defaultValue]);
-  useEffect(() => {
-    if (inputValue) {
-      updateValue(getModelValue());
-      resetValidation();
-    }
-  }, [inputValue]);
-  useImperativeHandle(ref, () => {
-    return inputRef.current;
-  });
-  const inputClass = 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]);
-  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__default.createElement(
-    "div",
-    {
-      className: `${classes}  ${className || ""}`,
+const Input = 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] = useState("");
+    const [active, SetActive] = useState(false);
+    const [classes, setClasses] = useState("");
+    const getModelValue = () => String(inputValue ?? "");
+    const inputRef = useRef(null);
+    useEffect(() => {
+      setClasses(inputClass);
+      SetInputValue(defaultValue);
+    }, [defaultValue]);
+    useEffect(() => {
+      if (inputValue) {
+        updateValue(getModelValue());
+        resetValidation();
       }
-    },
-    slotInput ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, label ? /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        className: `nut-input-label ${labelClass}`,
-        style: { width: `${labelWidth}px`, textAlign: labelAlign }
-      },
-      /* @__PURE__ */ React__default.createElement("div", { className: "label-string" }, label, colon ? ":" : "")
-    ) : null, /* @__PURE__ */ React__default.createElement("div", { className: "nut-input-value" }, /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        className: "nut-input-inner",
-        onClick: (e) => {
-          handleClickInput(e);
-        }
-      },
-      slotInput
-    ))) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, leftIcon && leftIcon.length > 0 ? /* @__PURE__ */ React__default.createElement(
+    }, [inputValue]);
+    useImperativeHandle(ref, () => {
+      return inputRef.current;
+    });
+    const inputClass = 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]);
+    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__default.createElement(
       "div",
       {
-        className: "nut-input-left-icon",
+        className: `${classes}  ${className || ""}`,
+        style,
         onClick: (e) => {
-          handleClickLeftIcon(e);
+          onClick && onClick(e);
         }
       },
-      /* @__PURE__ */ React__default.createElement(
-        Icon$1,
+      slotInput ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, label ? /* @__PURE__ */ React__default.createElement(
+        "div",
         {
-          classPrefix: iconClassPrefix,
-          fontClassName: iconFontClassName,
-          name: leftIcon,
-          size: leftIconSize
-        }
-      )
-    ) : null, label ? /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        className: `nut-input-label ${labelClass}`,
-        style: { width: `${labelWidth}px`, textAlign: labelAlign }
-      },
-      /* @__PURE__ */ React__default.createElement("div", { className: "label-string" }, label, colon ? ":" : "")
-    ) : null, /* @__PURE__ */ React__default.createElement("div", { className: "nut-input-value" }, /* @__PURE__ */ React__default.createElement("div", { className: "nut-input-main-con" }, /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        className: "nut-input-inner",
-        onClick: (e) => {
-          handleClickInput(e);
-        }
-      },
-      type === "textarea" ? /* @__PURE__ */ React__default.createElement(
-        "textarea",
+          className: `nut-input-label ${labelClass}`,
+          style: { width: `${labelWidth}px`, textAlign: labelAlign }
+        },
+        /* @__PURE__ */ React__default.createElement("div", { className: "label-string" }, label, colon ? ":" : "")
+      ) : null, /* @__PURE__ */ React__default.createElement("div", { className: "nut-input-value" }, /* @__PURE__ */ React__default.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__default.createElement(
-        "input",
+        },
+        slotInput
+      ))) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, leftIcon && leftIcon.length > 0 ? /* @__PURE__ */ React__default.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__default.createElement(
-        Icon$1,
+        },
+        /* @__PURE__ */ React__default.createElement(
+          Icon$1,
+          {
+            classPrefix: iconClassPrefix,
+            fontClassName: iconFontClassName,
+            name: leftIcon,
+            size: leftIconSize
+          }
+        )
+      ) : null, label ? /* @__PURE__ */ React__default.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__default.createElement("div", { className: "label-string" }, label, colon ? ":" : "")
+      ) : null, /* @__PURE__ */ React__default.createElement("div", { className: "nut-input-value" }, /* @__PURE__ */ React__default.createElement("div", { className: "nut-input-main-con" }, /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: "nut-input-inner",
           onClick: (e) => {
-            handleClear(e);
+            handleClickInput(e);
           }
-        }
-      ) : null
-    ), rightIcon && rightIcon.length > 0 ? /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        className: "nut-input-right-icon",
-        onClick: (e) => {
-          handleClickRightIcon(e);
-        }
-      },
-      /* @__PURE__ */ React__default.createElement(
-        Icon$1,
+        },
+        type === "textarea" ? /* @__PURE__ */ React__default.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__default.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__default.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__default.createElement(
+        "div",
         {
-          classPrefix: iconClassPrefix,
-          fontClassName: iconFontClassName,
-          name: rightIcon,
-          size: rightIconSize
-        }
-      )
-    ) : null, slotButton ? /* @__PURE__ */ React__default.createElement("div", { className: "nut-input-button" }, slotButton) : null, showWordLimit && maxlength ? /* @__PURE__ */ React__default.createElement("div", { className: "nut-input-word-limit" }, /* @__PURE__ */ React__default.createElement("span", { className: "nut-input-word-num" }, inputValue ? inputValue.length : 0), "/", maxlength) : null), errorMessage ? /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        className: "nut-input-error-message",
-        style: {
-          textAlign: errorMessageAlign
-        }
-      },
-      errorMessage
-    ) : /* @__PURE__ */ React__default.createElement("div", null)))
-  );
-});
+          className: "nut-input-right-icon",
+          onClick: (e) => {
+            handleClickRightIcon(e);
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(
+          Icon$1,
+          {
+            classPrefix: iconClassPrefix,
+            fontClassName: iconFontClassName,
+            name: rightIcon,
+            size: rightIconSize
+          }
+        )
+      ) : null, slotButton ? /* @__PURE__ */ React__default.createElement("div", { className: "nut-input-button" }, slotButton) : null, showWordLimit && maxlength ? /* @__PURE__ */ React__default.createElement("div", { className: "nut-input-word-limit" }, /* @__PURE__ */ React__default.createElement("span", { className: "nut-input-word-num" }, inputValue ? inputValue.length : 0), "/", maxlength) : null), errorMessage ? /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: "nut-input-error-message",
+          style: {
+            textAlign: errorMessageAlign
+          }
+        },
+        errorMessage
+      ) : /* @__PURE__ */ React__default.createElement("div", null)))
+    );
+  }
+);
 Input.defaultProps = defaultProps$X;
 Input.displayName = "NutInput";
 const defaultProps$W = {