@tendaui/react 1.2.4 → 1.3.0

package/es/index.js

@@ -20,13 +20,18 @@ export { Switch } from './switch/index.js';
 export { Form } from './form/index.js';
 import './ip-input/index.js';
 export { Fireworks } from './fireworks/index.js';
+export { Tooltip } from './tooltip/index.js';
 export { Drawer } from './drawer/index.js';
 export { Slider } from './slider/index.js';
 export { ColorPicker, ColorPickerPanel } from './color-picker/index.js';
-export { C as ConfigContext } from './_chunks/dep-5U9UjDaf.js';
+export { default as ConfigContext } from './config-provider/ConfigContext.js';
 export { default as ConfigProvider, merge } from './config-provider/ConfigProvider.js';
 export { NotificationProvider, useNotification } from './notification/NotifyContext.js';
-export { I as IPInput, e as extractIPFromText, b as isValidCIDRMask, a as isValidIPv4, i as isValidIPv4Segment, c as isValidIPv6, p as parseIPv4ToSegments, s as segmentsToIPv4 } from './_chunks/dep-D68MD94M.js';
+export { F as FormItem } from './_chunks/dep-BOj-ayw6.js';
+export { default as FormList } from './form/FormList.js';
+export { u as useForm } from './_chunks/dep-4LYjB3c6.js';
+export { u as useWatch } from './_chunks/dep-CSzOEACo.js';
+export { I as IPInput, e as extractIPFromText, b as isValidCIDRMask, a as isValidIPv4, i as isValidIPv4Segment, c as isValidIPv6, p as parseIPv4ToSegments, s as segmentsToIPv4 } from './_chunks/dep-BZdpKjaa.js';
 import './loading/Loading.js';
 import './_chunks/dep-Cwish4GD.js';
 import './_chunks/dep-D-UKOauR.js';
@@ -35,12 +40,12 @@ import 'react';
 import 'classnames';
 import './_chunks/dep-DRwijJcv.js';
 import 'lodash-es';
-import './_chunks/dep-gy8uvBaS.js';
+import './_chunks/dep-u1x3x6MJ.js';
 import './common/Portal.js';
 import 'react-dom';
 import './_chunks/dep-BRbJGDI9.js';
 import './loading/Gradient.js';
-import './_chunks/dep-DQ6kXoi8.js';
+import './_chunks/dep-DHWwZ2Nj.js';
 import './_chunks/dep-DN7d1SzH.js';
 import './_chunks/dep-PPA-yoAy.js';
 import './_chunks/dep-DGvfel3I.js';
@@ -48,8 +53,8 @@ import './_chunks/dep-DbVHGoUC.js';
 import './loading/style/css.js';
 import './popup/Popup.js';
 import './portal/Portal.js';
-import './_chunks/dep-DwWrhxkd.js';
-import './_chunks/dep-CkmtEv0Y.js';
+import './_chunks/dep-grkSd2UB.js';
+import './_chunks/dep-B2D1svZy.js';
 import 'react-is';
 import './_chunks/dep-C1XcmShP.js';
 import './_chunks/dep-Ccktr_jk.js';
@@ -59,26 +64,26 @@ import 'react-fast-compare';
 import 'react-transition-group';
 import './popup/style/css.js';
 import './button/Button.js';
-import './_chunks/dep-D6YxJv-F.js';
+import './_chunks/dep-spxR0DG0.js';
 import './button/style/css.js';
 import './input/Input.js';
 import '@tendaui/icons';
-import './_chunks/dep-CD_4-1Xb.js';
+import './_chunks/dep-UHQn9biR.js';
 import './input/InputGroup.js';
 import './input/style/css.js';
 import './alert/Alert.js';
 import './_chunks/dep-U1T8CQY9.js';
-import './_chunks/dep-ByzdZjUR.js';
+import './_chunks/dep-bWaVq_y3.js';
 import './alert/style/css.js';
 import './badge/Badge.js';
 import './badge/style/css.js';
-import './_chunks/dep-Dr5wkz0z.js';
+import './_chunks/dep--svkhMCP.js';
 import './_chunks/dep-BP0-apUT.js';
 import 'hoist-non-react-statics';
 import './common/Check.js';
-import './_chunks/dep-DTlQ2dCA.js';
+import './_chunks/dep--qagmRQa.js';
 import './radio/style/css.js';
-import './_chunks/dep-B4_O1Vgv.js';
+import './_chunks/dep-Dr3i7zFt.js';
 import './checkbox/style/css.js';
 import './input-number/InputNumber.js';
 import './input-number/useInputNumber.js';
@@ -95,12 +100,12 @@ import './tag-input/hooks/useTagList.js';
 import './hooks/useDragSorter.js';
 import './tag-input/style/css.js';
 import './select/Select.js';
-import './_chunks/dep-CJCt0IS0.js';
-import './_chunks/dep-Bjfn7Zv_.js';
+import './_chunks/dep-Cd1UOXnJ.js';
+import './_chunks/dep-2HsCYcmp.js';
 import './select/Option.js';
 import './_chunks/dep-Dlppf0JU.js';
 import './common/FakeArrow.js';
-import './_chunks/dep-aX8qrQpB.js';
+import './_chunks/dep-BbOvNxhg.js';
 import './select/style/css.js';
 import './select-input/SelectInput.js';
 import './select-input/hook/useSingle.js';
@@ -112,27 +117,21 @@ import './list/ListItemMeta.js';
 import './list/style/css.js';
 import './notification/style/css.js';
 import './dialog/Dialog.js';
-import './_chunks/dep-C_wPqvpm.js';
-import './_chunks/dep-CsSvR9wN.js';
+import './_chunks/dep-D_qcGLah.js';
+import './_chunks/dep-DfsP8eqT.js';
 import './_chunks/dep-BbeHB7S3.js';
 import './dialog/plugin.js';
-import './_chunks/dep-DX65P8M9.js';
+import './_chunks/dep-CPjkUfQu.js';
+import './_chunks/dep--nQ-cjme.js';
 import './common/PluginContainer.js';
 import './dialog/style/css.js';
 import './switch/Switch.js';
 import './switch/style/css.js';
-import './form/Form.js';
-import './form/hooks/useInstance.js';
-import './form/utils/index.js';
-import './_chunks/dep-4LYjB3c6.js';
-import './_chunks/dep-Chz4ZJCb.js';
-import './form/FormContext.js';
-import './_chunks/dep-BYlJzn45.js';
-import './_chunks/dep-BuIAffJt.js';
-import './form/FormList.js';
 import './form/style/css.js';
 import './fireworks/Fireworks.js';
 import './fireworks/style/css.js';
+import './tooltip/Tooltip.js';
+import './css.js';
 import './drawer/Drawer.js';
 import './drawer/utils/index.js';
 import './drawer/style/css.js';
@@ -140,20 +139,28 @@ import './slider/Slider.js';
 import './slider/SliderHandleButton.js';
 import './slider/style/css.js';
 import './color-picker/ColorPickPanel.js';
-import './_chunks/dep-DURB9x8g.js';
+import './_chunks/dep-Dnwq3YvL.js';
 import './color-picker/utils/color-picker/index.js';
-import './_chunks/dep-DJmE940f.js';
-import './_chunks/dep-oUgTcXgm.js';
+import './_chunks/dep-CHpQ3xhh.js';
+import './_chunks/dep-Chz4ZJCb.js';
+import './_chunks/dep-BK4_iOSv.js';
+import './_chunks/dep-Blkje0_M.js';
 import './color-picker/components/panel/alpha.js';
 import './color-picker/components/panel/slider.js';
 import './color-picker/components/panel/hue.js';
 import './color-picker/components/panel/saturation.js';
 import './color-picker/components/panel/swatches.js';
+import './color-picker/components/panel/format/index.js';
+import './color-picker/components/panel/format/inputs.js';
 import './color-picker/ColorPicker.js';
 import './color-picker/components/trigger.js';
 import './color-picker/style/css.js';
 import 'dayjs';
 import './notification/NotifyContainer.js';
 import './notification/NotifyItem.js';
+import './_chunks/dep-BI5F2D3y.js';
+import './form/FormContext.js';
+import './form/utils/index.js';
+import './form/hooks/useInstance.js';
 import './ip-input/style/css.js';
 //# sourceMappingURL=index.js.map

package/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/input/Input.js

@@ -1,19 +1,20 @@
 import { _ as _defineProperty } from '../_chunks/dep-Cwish4GD.js';
 import { _ as _objectWithoutProperties } from '../_chunks/dep-DN7d1SzH.js';
 import { _ as _slicedToArray } from '../_chunks/dep-CzLhKWCf.js';
-import React, { forwardRef, useRef, useState, useEffect, useImperativeHandle } from 'react';
+import React__default, { useMemo, useEffect, forwardRef, useRef, useState, useImperativeHandle } from 'react';
 import classNames from 'classnames';
 import { IconClose, IconEyeClosed, IconEyeOpened } from '@tendaui/icons';
 import { u as useIsomorphicLayoutEffect } from '../_chunks/dep-BRbJGDI9.js';
-import { u as useControlled } from '../_chunks/dep-DwWrhxkd.js';
-import { p as parseTNode } from '../_chunks/dep-D6YxJv-F.js';
+import { u as useControlled } from '../_chunks/dep-grkSd2UB.js';
+import { p as parseTNode } from '../_chunks/dep-spxR0DG0.js';
 import { u as useDefaultProps } from '../_chunks/dep-DGvfel3I.js';
-import { isFunction } from 'lodash-es';
-import { u as useConfig } from '../_chunks/dep-gy8uvBaS.js';
-import { u as useLocaleReceiver } from '../_chunks/dep-CD_4-1Xb.js';
-import '../_chunks/dep-D-UKOauR.js';
+import { isNumber, isFunction } from 'lodash-es';
+import { u as useConfig } from '../_chunks/dep-u1x3x6MJ.js';
+import { u as useLocaleReceiver } from '../_chunks/dep-UHQn9biR.js';
+import { _ as _typeof } from '../_chunks/dep-D-UKOauR.js';
 import '../_chunks/dep-DRwijJcv.js';
-import '../_chunks/dep-5U9UjDaf.js';
+import '../config-provider/ConfigContext.js';
+import '../_chunks/dep--nQ-cjme.js';
 import 'dayjs';
 import '../config-provider/index.js';
 import '../config-provider/ConfigProvider.js';
@@ -39,17 +40,122 @@ var inputDefaultProps = {
   defaultValue: ""
 };
 
-var _excluded = ["type", "autoWidth", "borderless", "placeholder", "disabled", "size", "className", "inputClass", "style", "prefixIcon", "suffixIcon", "clearable", "tips", "align", "showClearIconOnEmpty", "autofocus", "autocomplete", "readonly", "label", "suffix", "showInput", "keepWrapperWidth", "allowInput", "name", "format", "onClick", "onClear", "onEnter", "onKeydown", "onKeyup", "onKeypress", "onFocus", "onBlur", "onPaste", "onMouseenter", "onMouseleave", "onWheel", "onCompositionstart", "onCompositionend", "onChange"];
+function getCharacterLength(str, maxCharacter) {
+  var hasMaxCharacter = isNumber(maxCharacter);
+  if (!str || str.length === 0) {
+    if (hasMaxCharacter) {
+      return {
+        length: 0,
+        characters: str
+      };
+    }
+    return 0;
+  }
+  var len = 0;
+  for (var i = 0; i < str.length; i++) {
+    var currentStringLength = 0;
+    if (str.charCodeAt(i) > 127) {
+      currentStringLength = 2;
+    } else {
+      currentStringLength = 1;
+    }
+    if (hasMaxCharacter && len + currentStringLength > maxCharacter) {
+      return {
+        length: len,
+        characters: str.slice(0, i)
+      };
+    }
+    len += currentStringLength;
+  }
+  if (hasMaxCharacter) {
+    return {
+      length: len,
+      characters: str
+    };
+  }
+  return len;
+}
+function getUnicodeLength(str) {
+  return Array.from(str).length;
+}
+function limitUnicodeMaxLength(str, maxLength) {
+  return Array.from(str).slice(0, maxLength).join("");
+}
+function useLengthLimit(params) {
+  var getValueByLimitNumber = function getValueByLimitNumber(inputValue) {
+    var allowInputOverMax = params.allowInputOverMax,
+      maxlength = params.maxlength,
+      maxcharacter = params.maxcharacter;
+    if (!(maxlength || maxcharacter) || allowInputOverMax || !inputValue) return inputValue;
+    if (maxlength) {
+      return limitUnicodeMaxLength(inputValue, maxlength);
+    }
+    if (maxcharacter) {
+      var r = getCharacterLength(inputValue, maxcharacter);
+      if (_typeof(r) === "object") {
+        return r.characters;
+      }
+    }
+    return inputValue;
+  };
+  var limitNumber = useMemo(function () {
+    var maxlength = params.maxlength,
+      maxcharacter = params.maxcharacter,
+      value = params.value;
+    if (typeof value === "number") return String(value);
+    if (maxlength && maxcharacter) {
+      console.warn("Input", "Pick one of maxlength and maxcharacter please.");
+    }
+    if (maxlength) {
+      var length = value !== null && value !== void 0 && value.length ? getUnicodeLength(value) : 0;
+      return "".concat(length, "/").concat(maxlength);
+    }
+    if (maxcharacter) {
+      return "".concat(getCharacterLength(value || ""), "/").concat(maxcharacter);
+    }
+    return "";
+  }, [params.maxcharacter, params.maxlength, params.value]);
+  var innerStatus = useMemo(function () {
+    if (limitNumber) {
+      var _limitNumber$split = limitNumber.split("/"),
+        _limitNumber$split2 = _slicedToArray(_limitNumber$split, 2),
+        current = _limitNumber$split2[0],
+        total = _limitNumber$split2[1];
+      return Number(current) > Number(total) ? "error" : "";
+    }
+    return "";
+  }, [limitNumber]);
+  var tStatus = useMemo(function () {
+    return params.status || innerStatus;
+  }, [params.status, innerStatus]);
+  var onValidateChange = function onValidateChange() {
+    var _params$onValidate;
+    (_params$onValidate = params.onValidate) === null || _params$onValidate === void 0 || _params$onValidate.call(params, {
+      error: innerStatus ? "exceed-maximum" : void 0
+    });
+  };
+  useEffect(function () {
+    onValidateChange();
+  }, [innerStatus]);
+  return {
+    tStatus: tStatus,
+    limitNumber: limitNumber,
+    getValueByLimitNumber: getValueByLimitNumber
+  };
+}
+
+var _excluded = ["type", "autoWidth", "borderless", "placeholder", "disabled", "size", "className", "inputClass", "style", "prefixIcon", "suffixIcon", "clearable", "tips", "align", "showClearIconOnEmpty", "autofocus", "autocomplete", "readonly", "label", "suffix", "showInput", "keepWrapperWidth", "allowInput", "name", "format", "onClick", "onClear", "onEnter", "onKeydown", "onKeyup", "onKeypress", "onFocus", "onBlur", "onPaste", "onMouseenter", "onMouseleave", "onWheel", "onCompositionstart", "onCompositionend", "onChange", "maxlength", "maxcharacter", "allowInputOverMax", "status", "onValidate", "showLimitNumber"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var renderIcon = function renderIcon(classPrefix, type, icon) {
   var result = parseTNode(icon);
   var iconClassName = icon ? "".concat(classPrefix, "-input__").concat(type, "-icon") : "";
-  return result ? /* @__PURE__ */React.createElement("span", {
+  return result ? /* @__PURE__ */React__default.createElement("span", {
     className: "".concat(classPrefix, "-input__").concat(type, " ").concat(iconClassName)
   }, result) : null;
 };
 var Input = /*#__PURE__*/forwardRef(function (originalProps, ref) {
+  var _classNames2;
   var props = useDefaultProps(originalProps, inputDefaultProps);
   var _useConfig = useConfig(),
     classPrefix = _useConfig.classPrefix;
@@ -100,6 +206,14 @@ var Input = /*#__PURE__*/forwardRef(function (originalProps, ref) {
     onCompositionstart = props.onCompositionstart,
     onCompositionend = props.onCompositionend,
     onChangeFromProps = props.onChange,
+    maxlength = props.maxlength,
+    maxcharacter = props.maxcharacter,
+    _props$allowInputOver = props.allowInputOverMax,
+    allowInputOverMax = _props$allowInputOver === void 0 ? false : _props$allowInputOver,
+    status = props.status,
+    onValidate = props.onValidate,
+    _props$showLimitNumbe = props.showLimitNumber,
+    showLimitNumber = _props$showLimitNumbe === void 0 ? true : _props$showLimitNumbe,
     restProps = _objectWithoutProperties(props, _excluded);
   var composingRef = useRef(false);
   var _useControlled = useControlled(props, "value", onChangeFromProps),
@@ -128,20 +242,31 @@ var Input = /*#__PURE__*/forwardRef(function (originalProps, ref) {
   var isInnerInputReadonly = readonly || !allowInput;
   var isValueEnabled = value && !disabled;
   var isShowClearIcon = (clearable && isValueEnabled || showClearIconOnEmpty) && isHover;
+  var _useLengthLimit = useLengthLimit({
+      value: value === void 0 ? void 0 : String(value),
+      status: status,
+      maxlength: maxlength,
+      maxcharacter: maxcharacter,
+      allowInputOverMax: allowInputOverMax,
+      onValidate: onValidate
+    }),
+    limitNumber = _useLengthLimit.limitNumber,
+    getValueByLimitNumber = _useLengthLimit.getValueByLimitNumber,
+    tStatus = _useLengthLimit.tStatus;
   var suffixIconNew = suffixIcon;
-  if (isShowClearIcon) suffixIconNew = /* @__PURE__ */React.createElement(IconClose, {
+  if (isShowClearIcon) suffixIconNew = /* @__PURE__ */React__default.createElement(IconClose, {
     className: "".concat(classPrefix, "-input__suffix-clear ").concat(classPrefix, "-icon"),
     onMouseDown: handleMouseDown,
     onClick: handleClear
   });
   if (type === "password" && typeof suffixIcon === "undefined") {
     if (renderType === "password") {
-      suffixIconNew = /* @__PURE__ */React.createElement(IconEyeClosed, {
+      suffixIconNew = /* @__PURE__ */React__default.createElement(IconEyeClosed, {
         className: "".concat(classPrefix, "-input__suffix-clear ").concat(classPrefix, "-icon"),
         onClick: togglePasswordVisible
       });
     } else if (renderType === "text") {
-      suffixIconNew = /* @__PURE__ */React.createElement(IconEyeOpened, {
+      suffixIconNew = /* @__PURE__ */React__default.createElement(IconEyeOpened, {
         className: "".concat(classPrefix, "-input__suffix-clear ").concat(classPrefix, "-icon"),
         onClick: togglePasswordVisible
       });
@@ -151,6 +276,9 @@ var Input = /*#__PURE__*/forwardRef(function (originalProps, ref) {
   var suffixIconContent = renderIcon("t", "suffix", parseTNode(suffixIconNew));
   var labelContent = isFunction(label) ? label() : label;
   var suffixContent = isFunction(suffix) ? suffix() : suffix;
+  var limitNumberNode = limitNumber && showLimitNumber ? /* @__PURE__ */React__default.createElement("div", {
+    className: "".concat(classPrefix, "-input__limit-number")
+  }, limitNumber) : null;
   var updateInputWidth = function updateInputWidth() {
     var _inputPreRef$current;
     if (!autoWidth || !inputRef.current) return;
@@ -181,9 +309,19 @@ var Input = /*#__PURE__*/forwardRef(function (originalProps, ref) {
   useEffect(function () {
     setRenderType(type);
   }, [type]);
+  useEffect(function () {
+    if (value) {
+      var limitedValue = getValueByLimitNumber(value);
+      if (limitedValue.length !== value.length && !allowInputOverMax) {
+        onChange === null || onChange === void 0 || onChange(limitedValue, {
+          trigger: "initial"
+        });
+      }
+    }
+  }, []);
   var innerValue = composingRef.current ? composingValue : value !== null && value !== void 0 ? value : "";
   var formatDisplayValue = format && !isFocused ? format(innerValue) : innerValue;
-  var renderInput = /* @__PURE__ */React.createElement("input", {
+  var renderInput = /* @__PURE__ */React__default.createElement("input", {
     ref: inputRef,
     placeholder: placeholder,
     type: renderType,
@@ -204,8 +342,8 @@ var Input = /*#__PURE__*/forwardRef(function (originalProps, ref) {
     onPaste: handlePaste,
     name: name
   });
-  var renderInputNode = /* @__PURE__ */React.createElement("div", {
-    className: classNames(inputClass, "".concat(classPrefix, "-input"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(classPrefix, "-is-readonly"), readonly), "".concat(classPrefix, "-is-disabled"), disabled), "".concat(classPrefix, "-is-focused"), isFocused), "".concat(classPrefix, "-size-s"), size === "small"), "".concat(classPrefix, "-size-l"), size === "large"), "".concat(classPrefix, "-align-").concat(align), align), "".concat(classPrefix, "-inpu").concat(classPrefix, "--prefix"), prefixIcon || labelContent), "".concat(classPrefix, "-inpu").concat(classPrefix, "--suffix"), suffixIconContent || suffixContent), "".concat(classPrefix, "-inpu").concat(classPrefix, "--borderless"), borderless), "".concat(classPrefix, "-input--focused"), isFocused)),
+  var renderInputNode = /* @__PURE__ */React__default.createElement("div", {
+    className: classNames(inputClass, "".concat(classPrefix, "-input"), (_classNames2 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classNames2, "".concat(classPrefix, "-is-readonly"), readonly), "".concat(classPrefix, "-is-disabled"), disabled), "".concat(classPrefix, "-is-focused"), isFocused), "".concat(classPrefix, "-size-s"), size === "small"), "".concat(classPrefix, "-size-l"), size === "large"), "".concat(classPrefix, "-align-").concat(align), align), "".concat(classPrefix, "-is-").concat(tStatus), tStatus && tStatus !== "default"), "".concat(classPrefix, "-input--prefix"), prefixIcon || labelContent), "".concat(classPrefix, "-input--suffix"), suffixIconContent || suffixContent || limitNumberNode), "".concat(classPrefix, "-input--borderless"), borderless), _defineProperty(_classNames2, "".concat(classPrefix, "-input--focused"), isFocused))),
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     onWheel: function onWheel(e) {
@@ -220,14 +358,14 @@ var Input = /*#__PURE__*/forwardRef(function (originalProps, ref) {
         e: e
       });
     }
-  }, prefixIconContent, labelContent ? /* @__PURE__ */React.createElement("div", {
+  }, prefixIconContent, labelContent ? /* @__PURE__ */React__default.createElement("div", {
     className: "".concat(classPrefix, "-input__prefix")
-  }, labelContent) : null, renderInput, autoWidth && /* @__PURE__ */React.createElement("span", {
+  }, labelContent) : null, renderInput, autoWidth && /* @__PURE__ */React__default.createElement("span", {
     ref: inputPreRef,
     className: "".concat(classPrefix, "-input__inpu").concat(classPrefix, "-pre")
-  }, innerValue || placeholder), suffixContent ? /* @__PURE__ */React.createElement("div", {
+  }, innerValue || placeholder), suffixContent || limitNumberNode ? /* @__PURE__ */React__default.createElement("div", {
     className: "".concat(classPrefix, "-input__suffix")
-  }, suffixContent) : null, suffixIconContent);
+  }, suffixContent, limitNumberNode) : null, suffixIconContent);
   useIsomorphicLayoutEffect(function () {
     requestAnimationFrame(function () {
       updateInputWidth();
@@ -247,11 +385,12 @@ var Input = /*#__PURE__*/forwardRef(function (originalProps, ref) {
   function handleChange(e) {
     var trigger = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "input";
     var newStr = e.currentTarget.value;
+    var limitedValue = getValueByLimitNumber(newStr);
     if (composingRef.current) {
-      setComposingValue(newStr);
+      setComposingValue(limitedValue);
     } else {
-      setComposingValue(newStr);
-      onChange(newStr, {
+      setComposingValue(limitedValue);
+      onChange(limitedValue, {
         e: e,
         trigger: trigger
       });
@@ -369,12 +508,12 @@ var Input = /*#__PURE__*/forwardRef(function (originalProps, ref) {
       }
     };
   });
-  return /* @__PURE__ */React.createElement("div", _objectSpread({
+  return /* @__PURE__ */React__default.createElement("div", _objectSpread({
     ref: wrapperRef,
     style: style,
     className: classNames("".concat(classPrefix, "-input__wrap"), className, _defineProperty({}, "".concat(classPrefix, "-input--auto-width"), autoWidth && !keepWrapperWidth))
-  }, restProps), renderInputNode, tips && /* @__PURE__ */React.createElement("div", {
-    className: classNames("".concat(classPrefix, "-input__tips"))
+  }, restProps), renderInputNode, tips && /* @__PURE__ */React__default.createElement("div", {
+    className: classNames("".concat(classPrefix, "-input__tips"), "".concat(classPrefix, "-input__tips--").concat(tStatus || "default"))
   }, tips));
 });
 Input.displayName = "Input";