@xaypay/tui 0.0.65 → 0.0.67

package/dist/index.es.js

@@ -32,7 +32,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$d = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{bottom:0;display:block;height:190px;left:0;margin:auto;max-height:190px;position:absolute;right:0;top:0;width:auto}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}.file-module_file-form-wrap__qY--B{position:relative;transform:translateZ(0)}";
+var css_248z$d = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{display:block;height:auto;max-height:95%;object-fit:contain;width:27.8rem}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}.file-module_file-form-wrap__qY--B{position:relative;transform:translateZ(0)}";
 var styles$c = {"file-form-wrap":"file-module_file-form-wrap__qY--B","file-form":"file-module_file-form__l13d5","active":"file-module_active__L1gPt","delete-upload-icon":"file-module_delete-upload-icon__PWN66","file-form-inner-upload":"file-module_file-form-inner-upload__tq3Dn","upload-info":"file-module_upload-info__a8GFs","upload-info-txt":"file-module_upload-info-txt__l11uN","default":"file-module_default__t7KU0","error":"file-module_error__H-M4Z","accept":"file-module_accept__WTW6V","upload-file-content":"file-module_upload-file-content__QHMjn","file-form-title":"file-module_file-form-title__zWTSB"};
 styleInject(css_248z$d);
 
@@ -566,6 +566,7 @@ const Input = ({
   label,
   value,
   width,
+  regexp,
   height,
   radius,
   padding,
@@ -602,13 +603,18 @@ const Input = ({
   errorLineHeight,
   labelLineHeight,
   backgroundColor,
+  telErrorMessage,
   labelMarginBottom,
+  regexpErrorMessage,
   phoneJustifyContent,
   errorAnimationDuration,
   ...props
 }) => {
+  const phoneNumberRegex = /^\d{8}$/;
   const [show, setShow] = useState(false);
   const [isHover, setIsHover] = useState(false);
+  const [innerValue, setInnerValue] = useState('');
+  const [innerErrorMessage, setInnerErrorMessage] = useState('');
   const random = Math.floor(Math.random() * 1000 + 1);
   const configStyles = compereConfigs();
   const classProps = classnames(className ? className : configStyles.INPUT.className);
@@ -629,15 +635,21 @@ const Input = ({
         animation: ${errorAnimation ? animation : 'none'};
     `;
   const handleChange = event => {
-    // TODO: need to discuss
-    // onChange
-    //     ? type === 'tel'
-    //             ? phoneNumberRegex.test(event.target.value)
-    //                     ? onChange(event.target.value)
-    //                     : _ => _
-    //         : onChange(event.target.value)
-    //     : _ => _;
-    onChange ? onChange(event.target.value) : _ => _;
+    const currentValue = event.target.value;
+    if (onChange) {
+      onChange(currentValue);
+    } else {
+      setInnerValue(currentValue);
+      if (type === 'tel') {
+        !phoneNumberRegex.test(parseInt(currentValue)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
+      }
+      if (maxLength) {
+        currentValue.length > maxLength ? setInnerValue(currentValue.substr(0, maxLength)) : setInnerValue(currentValue);
+      }
+      if (regexp) {
+        !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
+      }
+    }
   };
   const handleMouseEnter = () => {
     setIsHover(true);
@@ -645,6 +657,38 @@ const Input = ({
   const handleMouseLeave = () => {
     setIsHover(false);
   };
+  useEffect(() => {
+    if (value !== undefined && value !== null) {
+      setInnerValue(value);
+      if (type === 'tel') {
+        !phoneNumberRegex.test(parseInt(value)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
+      }
+      if (maxLength) {
+        value.length > maxLength ? setInnerValue(value.substr(0, maxLength)) : setInnerValue(value);
+      }
+      if (regexp) {
+        !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
+      }
+    }
+    if (onChange && (value === undefined || value === null)) {
+      alert('Please add value prop on input component');
+    }
+  }, [value, onChange]);
+  useEffect(() => {
+    if (errorMessage) {
+      setInnerErrorMessage(errorMessage);
+    }
+  }, [errorMessage]);
+  useEffect(() => {
+    if (type === 'tel' && !telErrorMessage) {
+      alert('Please add telErrorMessage on input component');
+    }
+  }, [type]);
+  useEffect(() => {
+    if (regexp && !regexpErrorMessage) {
+      alert('Please add regexpErrorMessage prop on input component');
+    }
+  }, [regexp]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8["input-wrap"]}`
   }, label ? /*#__PURE__*/React__default.createElement("label", {
@@ -659,14 +703,14 @@ const Input = ({
     }
   }, label, " ", required && /*#__PURE__*/React__default.createElement("sup", {
     style: {
-      color: "#ee0000"
+      color: errorColor ? errorColor : "#ee0000"
     }
   }, "*")) : '', /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8["input-content"]}`,
     style: {
       width: width ? width : configStyles.INPUT.width,
       borderRadius: radius ? radius : configStyles.INPUT.radius,
-      boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
+      boxShadow: innerErrorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
     },
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
@@ -695,14 +739,12 @@ const Input = ({
       borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
       display: phoneDisplay ? phoneDisplay : configStyles.INPUT.phoneDisplay,
       alignItems: phoneAlignItems ? phoneAlignItems : configStyles.INPUT.phoneAlignItems,
-      color: errorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
+      color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
       justifyContent: phoneJustifyContent ? phoneJustifyContent : configStyles.INPUT.phoneJustifyContent,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
   }, "+374") : '', /*#__PURE__*/React__default.createElement("input", _extends({}, props, {
-    // TODO: need to discuss
-    // value={type === 'tel' ? phoneNumberRegex.test(value) ? value : '' : maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value}
-    value: maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value,
+    value: innerValue,
     className: classProps,
     onChange: handleChange,
     type: show ? 'text' : type,
@@ -721,7 +763,7 @@ const Input = ({
       borderRadius: radius ? radius : configStyles.INPUT.radius,
       boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
-      color: errorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color
+      color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color
     }
   })), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
     onMouseUp: type === 'password' ? _ => setShow(false) : _ => _,
@@ -737,7 +779,7 @@ const Input = ({
       borderBottomRightRadius: radius ? radius : configStyles.INPUT.radius,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
-  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', errorMessage ? /*#__PURE__*/React__default.createElement(P, {
+  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', innerErrorMessage ? /*#__PURE__*/React__default.createElement(P, {
     style: {
       left: errorLeft ? errorLeft : configStyles.INPUT.errorLeft,
       color: errorColor ? errorColor : configStyles.INPUT.errorColor,
@@ -749,7 +791,7 @@ const Input = ({
       transform: !errorAnimation ? 'scale3d(1,1,1)' : transform ? transform : configStyles.INPUT.transform
     },
     className: errorClassName ? errorClassName : configStyles.INPUT.errorClassName
-  }, errorMessage) : '');
+  }, innerErrorMessage) : '');
 };
 Input.propTypes = {
   name: PropTypes.string,
@@ -788,11 +830,14 @@ Input.propTypes = {
   errorPosition: PropTypes.string,
   boxShadowHover: PropTypes.string,
   errorClassName: PropTypes.string,
+  telErrorMessage: PropTypes.string,
   backgroundColor: PropTypes.string,
   phoneAlignItems: PropTypes.string,
   errorLineHeight: PropTypes.string,
   labelLineHeight: PropTypes.string,
   labelMarginBottom: PropTypes.string,
+  regexpErrorMessage: PropTypes.string,
+  regexp: PropTypes.instanceOf(RegExp),
   phoneJustifyContent: PropTypes.string,
   errorAnimationDuration: PropTypes.string,
   leftIcon: PropTypes.arrayOf(PropTypes.element),
@@ -951,24 +996,56 @@ Button.propTypes = {
   disabledBackgroundColor: PropTypes.string
 };
 
-var ReactCheckbox = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.2 0H12.8C14.5673 0 16 1.43269 16 3.2V12.8C16 14.5673 14.5673 16 12.8 16H3.2C1.43269 16 0 14.5673 0 12.8V3.2C0 1.43269 1.43269 0 3.2 0ZM3.2 1.6C2.31634 1.6 1.6 2.31634 1.6 3.2V12.8C1.6 13.6837 2.31634 14.4 3.2 14.4H12.8C13.6837 14.4 14.4 13.6837 14.4 12.8V3.2C14.4 2.31634 13.6837 1.6 12.8 1.6H3.2Z\" fill=\"#D1D1D1\"/>\n</svg>";
+const SvgCheckboxUnchecked = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M3.2 0h9.6A3.2 3.2 0 0 1 16 3.2v9.6a3.2 3.2 0 0 1-3.2 3.2H3.2A3.2 3.2 0 0 1 0 12.8V3.2A3.2 3.2 0 0 1 3.2 0Zm0 1.6a1.6 1.6 0 0 0-1.6 1.6v9.6a1.6 1.6 0 0 0 1.6 1.6h9.6a1.6 1.6 0 0 0 1.6-1.6V3.2a1.6 1.6 0 0 0-1.6-1.6H3.2Z",
+  fill: "#D1D1D1"
+}));
 
-var ReactCheckboxChecked = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.8 0H3.2C1.43269 0 0 1.43269 0 3.2V12.8C0 14.5673 1.43269 16 3.2 16H12.8C14.5673 16 16 14.5673 16 12.8V3.2C16 1.43269 14.5673 0 12.8 0ZM6.84979 10.9662C6.9178 10.9887 6.99067 11 7.0684 11C7.14613 11 7.219 10.9887 7.28701 10.9662C7.35502 10.944 7.41818 10.906 7.47647 10.8523L12.8397 5.91275C12.9466 5.81432 13 5.68671 13 5.52993C13 5.37351 12.9466 5.24609 12.8397 5.14765C12.7328 5.04922 12.5945 5 12.4246 5C12.2544 5 12.1158 5.04922 12.009 5.14765L7.0684 9.69799L4.98433 7.77852C4.87745 7.68009 4.74143 7.63087 4.57625 7.63087C4.41108 7.63087 4.27506 7.68009 4.16818 7.77852C4.06131 7.87696 4.00534 8.00438 4.00029 8.1608C3.99563 8.31758 4.04673 8.44519 4.15361 8.54362L6.66033 10.8523C6.71863 10.906 6.78178 10.944 6.84979 10.9662Z\" fill=\"#00236A\"/>\n</svg>";
+const SvgCheckboxChecked = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M12.8 0H3.2A3.2 3.2 0 0 0 0 3.2v9.6A3.2 3.2 0 0 0 3.2 16h9.6a3.2 3.2 0 0 0 3.2-3.2V3.2A3.2 3.2 0 0 0 12.8 0ZM6.85 10.966c.068.023.14.034.218.034.078 0 .151-.011.219-.034a.515.515 0 0 0 .19-.114l5.363-4.94A.496.496 0 0 0 13 5.53a.496.496 0 0 0-.16-.382.589.589 0 0 0-.415-.148.59.59 0 0 0-.416.148l-4.94 4.55-2.085-1.92a.579.579 0 0 0-.408-.147.579.579 0 0 0-.408.148A.52.52 0 0 0 4 8.16a.476.476 0 0 0 .154.383l2.506 2.308a.515.515 0 0 0 .19.114Z",
+  fill: "#00236A"
+}));
 
-const SelectCheckbox = ({
+const SingleCheckbox = ({
   checked
 }) => {
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       marginRight: '9px'
     }
-  }, checked ? /*#__PURE__*/React__default.createElement("img", {
-    src: ReactCheckboxChecked
-  }) : /*#__PURE__*/React__default.createElement("img", {
-    src: ReactCheckbox
-  }));
+  }, checked ? /*#__PURE__*/React__default.createElement(SvgCheckboxChecked, null) : /*#__PURE__*/React__default.createElement(SvgCheckboxUnchecked, null));
 };
-SelectCheckbox.propTypes = {
+SingleCheckbox.propTypes = {
   checked: PropTypes.bool
 };
 
@@ -1234,7 +1311,7 @@ const Select = ({
       boxShadow: optionsBoxShadow ? optionsBoxShadow : configStyles.SELECT.optionsBoxShadow,
       borderRadius: optionsBorderRadius ? optionsBorderRadius : configStyles.SELECT.optionsBorderRadius,
       backgroundColor: optionsBackgroundColor ? optionsBackgroundColor : configStyles.SELECT.optionsBackgroundColor,
-      top: selectedMinHeight ? selectedMinHeight.includes('rem') ? parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 3)) + 0.6 + 'rem' : parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 2)) + 6 + 'px' : configStyles.SELECT.selectedMinHeight.includes('rem') ? parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight - 3)) + 0.6 + 'rem' : parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight - 2)) + 6 + 'px'
+      top: selectedMinHeight ? selectedMinHeight.includes('rem') ? parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 3)) + 0.6 + 'rem' : parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 2)) + 6 + 'px' : configStyles.SELECT.selectedMinHeight.includes('rem') ? parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight.length - 3)) + 0.6 + 'rem' : parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight.length - 2)) + 6 + 'px'
     },
     className: `${styles$6['select-content-bottom']}`
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -1260,7 +1337,7 @@ const Select = ({
         marginBottom: optionItemMarginBottom ? optionItemMarginBottom : configStyles.SELECT.optionItemMarginBottom,
         backgroundColor: optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor
       }
-    }, multiple && multipleCheckbox ? /*#__PURE__*/React__default.createElement(SelectCheckbox, {
+    }, multiple && multipleCheckbox ? /*#__PURE__*/React__default.createElement(SingleCheckbox, {
       checked: option.checked
     }) : '', option[keyNames.name]);
   }))) : null)), errorMessage ? /*#__PURE__*/React__default.createElement("span", {
@@ -2168,4 +2245,4 @@ Autocomplate.defaultProps = {
   required: false
 };
 
-export { Autocomplate, Button, Captcha, Checkbox, File, Input, InputTypes, Modal, Pagination, Radio, Select, SelectCheckbox, Stepper, Table, Toaster, Tooltip, Typography, TypographyType, toast };
+export { Autocomplate, Button, Captcha, Checkbox, File, Input, InputTypes, Modal, Pagination, Radio, Select, SingleCheckbox, Stepper, Table, Toaster, Tooltip, Typography, TypographyType, toast };

package/dist/index.js

@@ -62,7 +62,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$d = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{bottom:0;display:block;height:190px;left:0;margin:auto;max-height:190px;position:absolute;right:0;top:0;width:auto}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}.file-module_file-form-wrap__qY--B{position:relative;transform:translateZ(0)}";
+var css_248z$d = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{display:block;height:auto;max-height:95%;object-fit:contain;width:27.8rem}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}.file-module_file-form-wrap__qY--B{position:relative;transform:translateZ(0)}";
 var styles$c = {"file-form-wrap":"file-module_file-form-wrap__qY--B","file-form":"file-module_file-form__l13d5","active":"file-module_active__L1gPt","delete-upload-icon":"file-module_delete-upload-icon__PWN66","file-form-inner-upload":"file-module_file-form-inner-upload__tq3Dn","upload-info":"file-module_upload-info__a8GFs","upload-info-txt":"file-module_upload-info-txt__l11uN","default":"file-module_default__t7KU0","error":"file-module_error__H-M4Z","accept":"file-module_accept__WTW6V","upload-file-content":"file-module_upload-file-content__QHMjn","file-form-title":"file-module_file-form-title__zWTSB"};
 styleInject(css_248z$d);
 
@@ -596,6 +596,7 @@ const Input = ({
   label,
   value,
   width,
+  regexp,
   height,
   radius,
   padding,
@@ -632,13 +633,18 @@ const Input = ({
   errorLineHeight,
   labelLineHeight,
   backgroundColor,
+  telErrorMessage,
   labelMarginBottom,
+  regexpErrorMessage,
   phoneJustifyContent,
   errorAnimationDuration,
   ...props
 }) => {
+  const phoneNumberRegex = /^\d{8}$/;
   const [show, setShow] = React.useState(false);
   const [isHover, setIsHover] = React.useState(false);
+  const [innerValue, setInnerValue] = React.useState('');
+  const [innerErrorMessage, setInnerErrorMessage] = React.useState('');
   const random = Math.floor(Math.random() * 1000 + 1);
   const configStyles = compereConfigs();
   const classProps = classnames__default["default"](className ? className : configStyles.INPUT.className);
@@ -659,15 +665,21 @@ const Input = ({
         animation: ${errorAnimation ? animation : 'none'};
     `;
   const handleChange = event => {
-    // TODO: need to discuss
-    // onChange
-    //     ? type === 'tel'
-    //             ? phoneNumberRegex.test(event.target.value)
-    //                     ? onChange(event.target.value)
-    //                     : _ => _
-    //         : onChange(event.target.value)
-    //     : _ => _;
-    onChange ? onChange(event.target.value) : _ => _;
+    const currentValue = event.target.value;
+    if (onChange) {
+      onChange(currentValue);
+    } else {
+      setInnerValue(currentValue);
+      if (type === 'tel') {
+        !phoneNumberRegex.test(parseInt(currentValue)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
+      }
+      if (maxLength) {
+        currentValue.length > maxLength ? setInnerValue(currentValue.substr(0, maxLength)) : setInnerValue(currentValue);
+      }
+      if (regexp) {
+        !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
+      }
+    }
   };
   const handleMouseEnter = () => {
     setIsHover(true);
@@ -675,6 +687,38 @@ const Input = ({
   const handleMouseLeave = () => {
     setIsHover(false);
   };
+  React.useEffect(() => {
+    if (value !== undefined && value !== null) {
+      setInnerValue(value);
+      if (type === 'tel') {
+        !phoneNumberRegex.test(parseInt(value)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
+      }
+      if (maxLength) {
+        value.length > maxLength ? setInnerValue(value.substr(0, maxLength)) : setInnerValue(value);
+      }
+      if (regexp) {
+        !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
+      }
+    }
+    if (onChange && (value === undefined || value === null)) {
+      alert('Please add value prop on input component');
+    }
+  }, [value, onChange]);
+  React.useEffect(() => {
+    if (errorMessage) {
+      setInnerErrorMessage(errorMessage);
+    }
+  }, [errorMessage]);
+  React.useEffect(() => {
+    if (type === 'tel' && !telErrorMessage) {
+      alert('Please add telErrorMessage on input component');
+    }
+  }, [type]);
+  React.useEffect(() => {
+    if (regexp && !regexpErrorMessage) {
+      alert('Please add regexpErrorMessage prop on input component');
+    }
+  }, [regexp]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$8["input-wrap"]}`
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
@@ -689,14 +733,14 @@ const Input = ({
     }
   }, label, " ", required && /*#__PURE__*/React__default["default"].createElement("sup", {
     style: {
-      color: "#ee0000"
+      color: errorColor ? errorColor : "#ee0000"
     }
   }, "*")) : '', /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$8["input-content"]}`,
     style: {
       width: width ? width : configStyles.INPUT.width,
       borderRadius: radius ? radius : configStyles.INPUT.radius,
-      boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
+      boxShadow: innerErrorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
     },
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
@@ -725,14 +769,12 @@ const Input = ({
       borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
       display: phoneDisplay ? phoneDisplay : configStyles.INPUT.phoneDisplay,
       alignItems: phoneAlignItems ? phoneAlignItems : configStyles.INPUT.phoneAlignItems,
-      color: errorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
+      color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
       justifyContent: phoneJustifyContent ? phoneJustifyContent : configStyles.INPUT.phoneJustifyContent,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
   }, "+374") : '', /*#__PURE__*/React__default["default"].createElement("input", _extends({}, props, {
-    // TODO: need to discuss
-    // value={type === 'tel' ? phoneNumberRegex.test(value) ? value : '' : maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value}
-    value: maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value,
+    value: innerValue,
     className: classProps,
     onChange: handleChange,
     type: show ? 'text' : type,
@@ -751,7 +793,7 @@ const Input = ({
       borderRadius: radius ? radius : configStyles.INPUT.radius,
       boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
-      color: errorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color
+      color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color
     }
   })), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
     onMouseUp: type === 'password' ? _ => setShow(false) : _ => _,
@@ -767,7 +809,7 @@ const Input = ({
       borderBottomRightRadius: radius ? radius : configStyles.INPUT.radius,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
-  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', errorMessage ? /*#__PURE__*/React__default["default"].createElement(P, {
+  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', innerErrorMessage ? /*#__PURE__*/React__default["default"].createElement(P, {
     style: {
       left: errorLeft ? errorLeft : configStyles.INPUT.errorLeft,
       color: errorColor ? errorColor : configStyles.INPUT.errorColor,
@@ -779,7 +821,7 @@ const Input = ({
       transform: !errorAnimation ? 'scale3d(1,1,1)' : transform ? transform : configStyles.INPUT.transform
     },
     className: errorClassName ? errorClassName : configStyles.INPUT.errorClassName
-  }, errorMessage) : '');
+  }, innerErrorMessage) : '');
 };
 Input.propTypes = {
   name: PropTypes__default["default"].string,
@@ -818,11 +860,14 @@ Input.propTypes = {
   errorPosition: PropTypes__default["default"].string,
   boxShadowHover: PropTypes__default["default"].string,
   errorClassName: PropTypes__default["default"].string,
+  telErrorMessage: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
   phoneAlignItems: PropTypes__default["default"].string,
   errorLineHeight: PropTypes__default["default"].string,
   labelLineHeight: PropTypes__default["default"].string,
   labelMarginBottom: PropTypes__default["default"].string,
+  regexpErrorMessage: PropTypes__default["default"].string,
+  regexp: PropTypes__default["default"].instanceOf(RegExp),
   phoneJustifyContent: PropTypes__default["default"].string,
   errorAnimationDuration: PropTypes__default["default"].string,
   leftIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
@@ -981,24 +1026,56 @@ Button.propTypes = {
   disabledBackgroundColor: PropTypes__default["default"].string
 };
 
-var ReactCheckbox = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.2 0H12.8C14.5673 0 16 1.43269 16 3.2V12.8C16 14.5673 14.5673 16 12.8 16H3.2C1.43269 16 0 14.5673 0 12.8V3.2C0 1.43269 1.43269 0 3.2 0ZM3.2 1.6C2.31634 1.6 1.6 2.31634 1.6 3.2V12.8C1.6 13.6837 2.31634 14.4 3.2 14.4H12.8C13.6837 14.4 14.4 13.6837 14.4 12.8V3.2C14.4 2.31634 13.6837 1.6 12.8 1.6H3.2Z\" fill=\"#D1D1D1\"/>\n</svg>";
+const SvgCheckboxUnchecked = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M3.2 0h9.6A3.2 3.2 0 0 1 16 3.2v9.6a3.2 3.2 0 0 1-3.2 3.2H3.2A3.2 3.2 0 0 1 0 12.8V3.2A3.2 3.2 0 0 1 3.2 0Zm0 1.6a1.6 1.6 0 0 0-1.6 1.6v9.6a1.6 1.6 0 0 0 1.6 1.6h9.6a1.6 1.6 0 0 0 1.6-1.6V3.2a1.6 1.6 0 0 0-1.6-1.6H3.2Z",
+  fill: "#D1D1D1"
+}));
 
-var ReactCheckboxChecked = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.8 0H3.2C1.43269 0 0 1.43269 0 3.2V12.8C0 14.5673 1.43269 16 3.2 16H12.8C14.5673 16 16 14.5673 16 12.8V3.2C16 1.43269 14.5673 0 12.8 0ZM6.84979 10.9662C6.9178 10.9887 6.99067 11 7.0684 11C7.14613 11 7.219 10.9887 7.28701 10.9662C7.35502 10.944 7.41818 10.906 7.47647 10.8523L12.8397 5.91275C12.9466 5.81432 13 5.68671 13 5.52993C13 5.37351 12.9466 5.24609 12.8397 5.14765C12.7328 5.04922 12.5945 5 12.4246 5C12.2544 5 12.1158 5.04922 12.009 5.14765L7.0684 9.69799L4.98433 7.77852C4.87745 7.68009 4.74143 7.63087 4.57625 7.63087C4.41108 7.63087 4.27506 7.68009 4.16818 7.77852C4.06131 7.87696 4.00534 8.00438 4.00029 8.1608C3.99563 8.31758 4.04673 8.44519 4.15361 8.54362L6.66033 10.8523C6.71863 10.906 6.78178 10.944 6.84979 10.9662Z\" fill=\"#00236A\"/>\n</svg>";
+const SvgCheckboxChecked = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M12.8 0H3.2A3.2 3.2 0 0 0 0 3.2v9.6A3.2 3.2 0 0 0 3.2 16h9.6a3.2 3.2 0 0 0 3.2-3.2V3.2A3.2 3.2 0 0 0 12.8 0ZM6.85 10.966c.068.023.14.034.218.034.078 0 .151-.011.219-.034a.515.515 0 0 0 .19-.114l5.363-4.94A.496.496 0 0 0 13 5.53a.496.496 0 0 0-.16-.382.589.589 0 0 0-.415-.148.59.59 0 0 0-.416.148l-4.94 4.55-2.085-1.92a.579.579 0 0 0-.408-.147.579.579 0 0 0-.408.148A.52.52 0 0 0 4 8.16a.476.476 0 0 0 .154.383l2.506 2.308a.515.515 0 0 0 .19.114Z",
+  fill: "#00236A"
+}));
 
-const SelectCheckbox = ({
+const SingleCheckbox = ({
   checked
 }) => {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       marginRight: '9px'
     }
-  }, checked ? /*#__PURE__*/React__default["default"].createElement("img", {
-    src: ReactCheckboxChecked
-  }) : /*#__PURE__*/React__default["default"].createElement("img", {
-    src: ReactCheckbox
-  }));
+  }, checked ? /*#__PURE__*/React__default["default"].createElement(SvgCheckboxChecked, null) : /*#__PURE__*/React__default["default"].createElement(SvgCheckboxUnchecked, null));
 };
-SelectCheckbox.propTypes = {
+SingleCheckbox.propTypes = {
   checked: PropTypes__default["default"].bool
 };
 
@@ -1264,7 +1341,7 @@ const Select = ({
       boxShadow: optionsBoxShadow ? optionsBoxShadow : configStyles.SELECT.optionsBoxShadow,
       borderRadius: optionsBorderRadius ? optionsBorderRadius : configStyles.SELECT.optionsBorderRadius,
       backgroundColor: optionsBackgroundColor ? optionsBackgroundColor : configStyles.SELECT.optionsBackgroundColor,
-      top: selectedMinHeight ? selectedMinHeight.includes('rem') ? parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 3)) + 0.6 + 'rem' : parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 2)) + 6 + 'px' : configStyles.SELECT.selectedMinHeight.includes('rem') ? parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight - 3)) + 0.6 + 'rem' : parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight - 2)) + 6 + 'px'
+      top: selectedMinHeight ? selectedMinHeight.includes('rem') ? parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 3)) + 0.6 + 'rem' : parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 2)) + 6 + 'px' : configStyles.SELECT.selectedMinHeight.includes('rem') ? parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight.length - 3)) + 0.6 + 'rem' : parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight.length - 2)) + 6 + 'px'
     },
     className: `${styles$6['select-content-bottom']}`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1290,7 +1367,7 @@ const Select = ({
         marginBottom: optionItemMarginBottom ? optionItemMarginBottom : configStyles.SELECT.optionItemMarginBottom,
         backgroundColor: optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor
       }
-    }, multiple && multipleCheckbox ? /*#__PURE__*/React__default["default"].createElement(SelectCheckbox, {
+    }, multiple && multipleCheckbox ? /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
       checked: option.checked
     }) : '', option[keyNames.name]);
   }))) : null)), errorMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
@@ -2209,7 +2286,7 @@ exports.Modal = Modal;
 exports.Pagination = Pagination;
 exports.Radio = Radio;
 exports.Select = Select;
-exports.SelectCheckbox = SelectCheckbox;
+exports.SingleCheckbox = SingleCheckbox;
 exports.Stepper = Stepper;
 exports.Table = Table;
 exports.Toaster = Toaster;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.65",
+  "version": "0.0.67",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/components/file/file.module.css

@@ -97,16 +97,11 @@
     overflow: hidden;
 }
 .upload-file-content > img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
     display: block;
-    width: auto;
-    height: 190px;
-    max-height: 190px;
+    width: 27.8rem;
+    height: auto;
+    max-height: 95%;
+    object-fit: contain;
 }
 .file-form-title {
     margin-bottom: 10px;

package/src/components/input/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 import { compereConfigs } from "./../../utils";
@@ -20,6 +20,7 @@ export const Input = ({
     label,
     value,
     width,
+    regexp,
     height,
     radius,
     padding,
@@ -56,14 +57,18 @@ export const Input = ({
     errorLineHeight,
     labelLineHeight,
     backgroundColor,
+    telErrorMessage,
     labelMarginBottom,
+    regexpErrorMessage,
     phoneJustifyContent,
     errorAnimationDuration,
     ...props
 }) => {
-    const phoneNumberRegex = /^\d{0,8}$/;
+    const phoneNumberRegex = /^\d{8}$/;
     const [show, setShow] = useState(false);
     const [isHover, setIsHover] = useState(false);
+    const [innerValue, setInnerValue] = useState('');
+    const [innerErrorMessage, setInnerErrorMessage] = useState('');
     
     const random = Math.floor((Math.random() * 1000) + 1);
     const configStyles = compereConfigs();
@@ -91,15 +96,23 @@ export const Input = ({
     `;
 
     const handleChange = (event) => {
-        // TODO: need to discuss
-        // onChange
-        //     ? type === 'tel'
-        //             ? phoneNumberRegex.test(event.target.value)
-        //                     ? onChange(event.target.value)
-        //                     : _ => _
-        //         : onChange(event.target.value)
-        //     : _ => _;
-        onChange ? onChange(event.target.value) : _ => _
+        const currentValue = event.target.value;
+        if (onChange) {
+            onChange(currentValue);
+        } else {
+            setInnerValue(currentValue);
+            if (type === 'tel') {
+                !phoneNumberRegex.test(parseInt(currentValue)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
+            } 
+
+            if (maxLength) {
+                currentValue.length > maxLength ? setInnerValue(currentValue.substr(0, maxLength)) : setInnerValue(currentValue);
+            }
+
+            if (regexp) {
+                !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
+            }
+        }
     };
 
     const handleMouseEnter = () => {
@@ -109,6 +122,45 @@ export const Input = ({
     const handleMouseLeave = () => {
         setIsHover(false);
     };
+
+    useEffect(() => {
+        if (value !== undefined && value !== null) {
+            setInnerValue(value);
+            if (type === 'tel') {
+                !phoneNumberRegex.test(parseInt(value)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
+            }
+
+            if (maxLength) {
+                value.length > maxLength ? setInnerValue(value.substr(0, maxLength)) : setInnerValue(value);
+            }
+
+            if (regexp) {
+                !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
+            }
+        }
+
+        if (onChange && (value === undefined || value === null)) {
+            alert('Please add value prop on input component');
+        }
+    }, [value, onChange]);
+
+    useEffect(() => {
+        if (errorMessage) {
+            setInnerErrorMessage(errorMessage);
+        }
+    }, [errorMessage]);
+
+    useEffect(() => {
+        if (type === 'tel' && !telErrorMessage) {
+            alert('Please add telErrorMessage on input component');
+        }
+    }, [type]);
+
+    useEffect(() => {
+        if (regexp && !regexpErrorMessage) {
+            alert('Please add regexpErrorMessage prop on input component');
+        }
+    }, [regexp]);
     
     return (
         <div className={`${styles["input-wrap"]}`}>
@@ -124,7 +176,7 @@ export const Input = ({
                         marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.INPUT.labelMarginBottom
                     }}
                 >
-                    {label} {required && <sup style={{ color: "#ee0000" }}>*</sup>}
+                    {label} {required && <sup style={{ color: errorColor ? errorColor : "#ee0000" }}>*</sup>}
                 </label>
                 : ''
             }
@@ -133,7 +185,7 @@ export const Input = ({
                 style={{
                     width: width ? width : configStyles.INPUT.width,
                     borderRadius: radius ? radius : configStyles.INPUT.radius,
-                    boxShadow: errorMessage ? errorColor ?  `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
+                    boxShadow: innerErrorMessage ? errorColor ?  `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
                 }}
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
@@ -171,7 +223,7 @@ export const Input = ({
                                 borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
                                 display: phoneDisplay ? phoneDisplay : configStyles.INPUT.phoneDisplay,
                                 alignItems: phoneAlignItems ? phoneAlignItems : configStyles.INPUT.phoneAlignItems,
-                                color: errorMessage  && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
+                                color: innerErrorMessage  && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
                                 justifyContent: phoneJustifyContent ? phoneJustifyContent : configStyles.INPUT.phoneJustifyContent,
                                 backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
                             }}
@@ -182,9 +234,7 @@ export const Input = ({
                 }
                 <input
                     {...props}
-                    // TODO: need to discuss
-                    // value={type === 'tel' ? phoneNumberRegex.test(value) ? value : '' : maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value}
-                    value={maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value}
+                    value={innerValue}
                     className={classProps}
                     onChange={handleChange}
                     type={show ? 'text' : type}
@@ -203,7 +253,7 @@ export const Input = ({
                         borderRadius: radius ? radius : configStyles.INPUT.radius,
                         boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
                         backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,                       
-                        color: errorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
+                        color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
                     }}
                 />
                 {
@@ -231,7 +281,7 @@ export const Input = ({
                 tooltip ? tooltip : ''
             }
             {
-                errorMessage ?
+                innerErrorMessage ?
                     <P
                         style={{
                             left: errorLeft ? errorLeft : configStyles.INPUT.errorLeft,
@@ -245,7 +295,7 @@ export const Input = ({
                         }}
                         className={errorClassName ? errorClassName : configStyles.INPUT.errorClassName}
                     >
-                        {errorMessage}
+                        {innerErrorMessage}
                     </P> 
                     : ''
             }
@@ -290,11 +340,14 @@ Input.propTypes = {
     errorPosition: PropTypes.string,
     boxShadowHover: PropTypes.string,
     errorClassName: PropTypes.string,
+    telErrorMessage: PropTypes.string,
     backgroundColor: PropTypes.string,
     phoneAlignItems: PropTypes.string,
     errorLineHeight: PropTypes.string,
     labelLineHeight: PropTypes.string,
     labelMarginBottom: PropTypes.string,
+    regexpErrorMessage: PropTypes.string,
+    regexp: PropTypes.instanceOf(RegExp),
     phoneJustifyContent: PropTypes.string,
     errorAnimationDuration: PropTypes.string,
     leftIcon: PropTypes.arrayOf(PropTypes.element),

package/src/components/input/input.stories.js

@@ -6,7 +6,7 @@ export default {
   title: "Components/Input",
   argsType: {
     onChange: {
-      control: { type: 'object' }
+      control: { type: 'function' }
     }
   }
 };
@@ -19,7 +19,3 @@ Default.args = {
   onChange: (val) => {}
 };
 
-export const PASSWORD = Template.bind({});
-PASSWORD.args = {
-  type: InputTypes.PASSWORD,
-};

package/src/components/select/index.js

@@ -2,7 +2,7 @@ import React, {useEffect, useState, useRef} from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { compereConfigs } from "./../../utils";
-import { SelectCheckbox } from './../selectCheckbox';
+import { SingleCheckbox } from '../singleCheckbox';
 
 import ReactArrowIcon from '../icon/Arrow';
 import ReactCloseIcon from '../icon/CloseIcon';
@@ -287,8 +287,8 @@ export const Select = ({
                                                 parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 3)) + 0.6 + 'rem' :
                                                 parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 2)) + 6 + 'px'
                                             : configStyles.SELECT.selectedMinHeight.includes('rem') ?
-                                                parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight - 3)) + 0.6 + 'rem' :
-                                                parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight - 2)) + 6 + 'px'                         
+                                                parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight.length - 3)) + 0.6 + 'rem' :
+                                                parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight.length - 2)) + 6 + 'px'                         
                                 }}
                                 className={`${styles['select-content-bottom']}`}
                             >
@@ -316,7 +316,7 @@ export const Select = ({
                                                             backgroundColor: optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor,
                                                         }}
                                                     >
-                                                        {multiple && multipleCheckbox ? <SelectCheckbox checked={option.checked} /> : ''}
+                                                        {multiple && multipleCheckbox ? <SingleCheckbox checked={option.checked} /> : ''}
                                                         {option[keyNames.name]}
                                                     </div>
                                         })

package/src/components/singleCheckbox/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import ReactCheckbox from '../icon/CheckboxUnchecked';
+import ReactCheckboxChecked from '../icon/CheckboxChecked';
+
+export const SingleCheckbox = ({ checked }) => {
+
+  return <div
+    style={{
+      marginRight: '9px'
+    }}
+  >
+    { checked ? <ReactCheckboxChecked /> : <ReactCheckbox /> }
+  </div>;
+};
+
+SingleCheckbox.propTypes = {
+  checked: PropTypes.bool,
+}

package/src/components/singleCheckbox/singleCheckbox.stories.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { SingleCheckbox } from ".";
+export default {
+  component: SingleCheckbox,
+  title: "Components/SingleCheckbox",
+};
+
+const Template = (args) => <SingleCheckbox {...args} />;
+
+export const Default = Template.bind({});

package/src/components/textarea/index.js

@@ -0,0 +1,153 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { compereConfigs } from "./../../utils";
+
+import './textarea.module.css';
+
+export const Textarea = ({
+    size,
+    label,
+    width,
+    value,
+    height,
+    resize,
+    border,
+    radius,
+    padding,
+    required,
+    onChange,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    boxSizing,
+    maxLength,
+    labelSize,
+    labelColor,
+    borderColor,
+    labelWeight,
+    placeholder,
+    labelDisplay,
+    backgroundColor,
+    borderFocusColor,
+    borderHoverColor,
+    labelRequiredColor
+}) => {
+    const [isHover, setIsHover] = useState(false);
+    const [isFocus, setIsFocus] = useState(false);
+
+    const configStyles = compereConfigs();
+
+    const handleMouseEnter = () => {
+        setIsHover(true);
+    };
+      
+    const handleMouseLeave = () => {
+        setIsHover(false);
+    };
+
+    const handleFocus = () => {
+        setIsFocus(true);
+    };
+
+    const handleBlur = () => {
+        setIsFocus(false);
+    };
+
+    useEffect(() => {
+        if (value === undefined) {
+            alert('Please add value prop on Textarea component');
+        }
+
+        if (!onChange) {
+            alert('Please add onChange function on Textarea component');
+        }
+    }, [value, onChange]);
+
+    return (
+        <>
+            {
+                label
+                ? <label
+                    style={{
+                        color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
+                        fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize,
+                        display: labelDisplay ? labelDisplay : configStyles.TEXTAREA.labelDisplay,
+                        fontWeight: labelWeight ? labelWeight : configStyles.TEXTAREA.labelWeight
+                    }}
+                  >
+                    {label}
+                    {
+                        required &&
+                        <sup style={{color: labelRequiredColor ? labelRequiredColor : configStyles.TEXTAREA.labelRequiredColor}}>*</sup>
+                    }
+                  </label>
+                : ''
+            }
+            <textarea
+                style={{
+                    outline: 'none',
+                    overflow: 'auto',
+                    fontSize: size ? size : configStyles.TEXTAREA.size,
+                    width: width ? width : configStyles.TEXTAREA.width,
+                    height: height ? height : configStyles.TEXTAREA.height,
+                    border: border ? border : configStyles.TEXTAREA.border,
+                    padding: padding ? padding : configStyles.TEXTAREA.padding,
+                    borderRadius: radius ? radius : configStyles.TEXTAREA.radius,
+                    minWidth: minWidth ? minWidth : configStyles.TEXTAREA.minWidth,
+                    maxWidth: maxWidth ? maxWidth : configStyles.TEXTAREA.maxWidth,
+                    minHeight: minHeight ? minHeight : configStyles.TEXTAREA.minHeight,
+                    maxHeight: maxHeight ? maxHeight : configStyles.TEXTAREA.maxHeight,
+                    boxSizing: boxSizing ? boxSizing : configStyles.TEXTAREA.boxSizing,
+                    backgroundColor: backgroundColor ? backgroundColor : configStyles.TEXTAREA.backgroundColor,
+                    borderColor: isFocus ? borderFocusColor ? borderFocusColor : configStyles.TEXTAREA.borderFocusColor :
+                                 isHover ? borderHoverColor ? borderHoverColor : configStyles.TEXTAREA.borderHoverColor :
+                                 borderColor ? borderColor : configStyles.TEXTAREA.borderColor,
+                    resize: resize ? resize : configStyles.TEXTAREA.resize,
+                }}
+                onBlur={handleBlur}
+                onChange={onChange}
+                onFocus={handleFocus}
+                placeholder={placeholder}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+                value={
+                    maxLength ? value.length > maxLength ? value.substr(0, maxLength) : value :
+                    configStyles.TEXTAREA.maxLength ? value.length > configStyles.TEXTAREA.maxLength ? value.substr(0, configStyles.TEXTAREA.maxLength) : value :
+                    value
+                }
+            ></textarea>
+        </>
+    );
+};
+
+Textarea.propTypes = {
+    size: PropTypes.string,
+    label: PropTypes.string,
+    width: PropTypes.string,
+    height: PropTypes.string,
+    resize: PropTypes.string,
+    border: PropTypes.string,
+    radius: PropTypes.string,
+    required: PropTypes.bool,
+    padding: PropTypes.string,
+    minWidth: PropTypes.string,
+    maxWidth: PropTypes.string,
+    boxSizing: PropTypes.string,
+    minHeight: PropTypes.string,
+    maxHeight: PropTypes.string,
+    maxLength: PropTypes.number,
+    labelSize: PropTypes.string,
+    labelColor: PropTypes.string,
+    labelWeight: PropTypes.string,
+    borderColor: PropTypes.string,
+    placeholder: PropTypes.string,
+    labelDisplay: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    value: PropTypes.string.isRequired,
+    borderFocusColor: PropTypes.string,
+    borderHoverColor: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    labelRequiredColor: PropTypes.string
+}

package/src/components/textarea/textarea.module.css

@@ -0,0 +1,21 @@
+textarea::-webkit-scrollbar {
+    width: 6px;
+}
+  
+textarea::-webkit-scrollbar-track {
+    background: #EEEEEE;
+    border-radius: 3px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    -ms-border-radius: 3px;
+    -o-border-radius: 3px;
+}
+
+textarea::-webkit-scrollbar-thumb {
+    background: #D1D1D1;
+    border-radius: 3px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    -ms-border-radius: 3px;
+    -o-border-radius: 3px;
+}

package/src/components/textarea/textarea.stories.js

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { Textarea } from '.';
+
+export default {
+    Comment: Textarea,
+    title: 'Components/Textarea'
+}
+
+const Template = (args) => {
+    const [val, setVal] = useState('');
+
+    const handleChangeValue = (e) => {
+        setVal(e.target.value);
+    }
+
+    return (
+        <Textarea value={val} onChange={handleChangeValue} {...args} />
+    );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+    label: 'Label for textarea',
+    required: true,
+    size: '16px',
+    radius: '6px',
+    width: '400px',
+    noResize: false,
+    height: '134px',
+    maxLength: 1500,
+    color: '#3C393E',
+    minWidth: '200px',
+    maxWidth: '500px',
+    labelSize: '16px',
+    resize: 'vertical',
+    minHeight: '100px',
+    maxHeight: '300px',
+    border: '2px solid',
+    padding: '12px 15px',
+    labelColor: '#3C393E',
+    labelWeight: 'normal',
+    labelDisplay: 'block',
+    borderColor: '#D1D1D1',
+    boxSizing: 'border-box',
+    backgroundColor: 'white',
+    borderHoverColor: '#3C393E',
+    borderFocusColor: '#00236A',
+    labelRequiredColor: '#ee0000',
+}

package/src/index.js

@@ -14,4 +14,4 @@ export * from './components/icon/Icon';
 export * from './components/typography';
 export * from './components/pagination';
 export * from './components/autocomplate';
-export * from './components/selectCheckbox';
+export * from './components/singleCheckbox';

package/src/stories/configuration.stories.mdx

@@ -403,3 +403,33 @@ import StackAlt from './assets/stackalt.svg';
   });
 }
 ```
+
+### Textarea
+
+```
+{
+  size: '16px',                                         // for font size
+  radius: '6px',                                        // for border radius
+  width: '400px',                                       // for width
+  resize: 'none',                                       // for resize
+  height: '134px',                                      // for height
+  maxLength: 1500,                                      // for characters maximum count
+  color: '#3C393E',                                     // for color
+  minWidth: '200px',                                    // for minimum width
+  maxWidth: '500px',                                    // for maximum width
+  labelSize: '16px',                                    // for label font size
+  minHeight: '100px',                                   // for minimum height
+  maxHeight: '300px',                                   // for maximum height
+  border: '2px solid',                                  // for border
+  padding: '12px 15px',                                 // for padding
+  labelColor: '#3C393E',                                // for label color
+  labelWeight: 'normal',                                // for label font weight
+  labelDisplay: 'block',                                // for label display
+  borderColor: '#D1D1D1',                               // for border color
+  boxSizing: 'border-box',                              // for box sizing
+  backgroundColor: 'white',                             // for background color
+  borderHoverColor: '#3C393E',                          // for border color when hover action is happaning
+  borderFocusColor: '#00236A',                          // for boredr color when focus action is happaning
+  labelRequiredColor: '#ee0000',                        // for label required mark color
+}
+```

package/src/stories/usage.stories.mdx

@@ -12,7 +12,8 @@ import buttonImage from './static/button-usage.png';
 import selectImage from './static/select-usage.png';
 import inputTooltipImage from './static/input-tooltip-usage.png';
 import toasterImage from './static/toaster-container-usage.png';
-import toastImage from './static/toaster-usage.png'
+import toastImage from './static/toaster-usage.png';
+import textareaImage from './static/textarea-usage.png';
 
 <Meta title="Intro/Usage" />
 
@@ -145,3 +146,7 @@ import toastImage from './static/toaster-usage.png'
 
 #### createToast function usage
 <img src={toastImage} alt="toaster image" />
+
+### Textarea
+
+<img src={textareaImage} alt="textarea image" />

package/tui.config.js

@@ -225,5 +225,30 @@ module.exports = {
         optionItemBoxSizing: 'border-box',                 // for option box sizing
         optionItemBackgroudColor: '#ffffff',               // for option background color
         optionItemBackgroudColorHover: 'unset',            // for option background color ( when hover )
+    },
+    // default properties for <Textarea /> component
+    TEXTAREA: {
+        size: '16px',
+        radius: '6px',
+        width: '400px',
+        height: '134px',
+        color: '#3C393E',
+        minWidth: '200px',
+        maxWidth: '500px',
+        labelSize: '16px',
+        resize: 'vertical',
+        minHeight: '100px',
+        maxHeight: '300px',
+        border: '2px solid',
+        padding: '12px 15px',
+        labelColor: '#3C393E',
+        labelWeight: 'normal',
+        labelDisplay: 'block',
+        borderColor: '#D1D1D1',
+        boxSizing: 'border-box',
+        backgroundColor: 'white',
+        borderHoverColor: '#3C393E',
+        borderFocusColor: '#00236A',
+        labelRequiredColor: '#ee0000',
     }
 };

package/src/components/selectCheckbox/index.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import ReactCheckbox from './../../assets/icons/checkbox-unchecked.svg';
-import ReactCheckboxChecked from './../../assets/icons/checkbox-checked.svg';
-
-export const SelectCheckbox = ({ checked }) => {
-
-  return <div
-    style={{
-      marginRight: '9px'
-    }}
-  >
-    { checked ? <img src={ReactCheckboxChecked} /> : <img src={ReactCheckbox} /> }
-  </div>;
-};
-
-SelectCheckbox.propTypes = {
-  checked: PropTypes.bool,
-}

package/src/components/selectCheckbox/selectCheckbox.stories.js

@@ -1,10 +0,0 @@
-import React from "react";
-import { SelectCheckbox } from ".";
-export default {
-  component: SelectCheckbox,
-  title: "Components/SelectCheckbox",
-};
-
-const Template = (args) => <SelectCheckbox {...args} />;
-
-export const Default = Template.bind({});