@xaypay/tui 0.0.7 → 0.0.9

package/dist/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var React$1 = require('react');
 var PropTypes = require('prop-types');
 var classnames = require('classnames');
 var styled = require('styled-components');
@@ -27,8 +27,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
+var React__namespace = /*#__PURE__*/_interopNamespace(React$1);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
@@ -77,9 +77,9 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$3 = ".button-module_btn__ffRtT{border:none;border-radius:6px;box-sizing:border-box;cursor:pointer;font-size:16px;line-height:20px;min-height:46px;outline:none;overflow:hidden;padding:12px 20px;text-transform:capitalize;transition:background-color .24s,color .24s}.button-module_btn__ffRtT.button-module_full-size__vmV2E{width:100%}.button-module_btn__ffRtT.button-module_content-size__f7JSE{width:auto}.button-module_btn__ffRtT.button-module_type-filled__BiyVo{background-color:#00236a;color:#fff}.button-module_btn__ffRtT.button-module_type-filled__BiyVo:hover{background-color:#001745}.button-module_btn__ffRtT.button-module_type-filled__BiyVo:disabled{background-color:#eee;color:#3c393e;pointer-events:none}.button-module_btn__ffRtT.button-module_type-outline__RpZ2V{background-color:#fff;box-shadow:inset 0 0 0 2px #00236a}.button-module_btn__ffRtT.button-module_type-outline__RpZ2V:hover{background-color:#001745;color:#fff}.button-module_btn__ffRtT.button-module_type-outline__RpZ2V:disabled{box-shadow:inset 0 0 0 2px #eee;color:#3c393e;pointer-events:none}";
-var styles$2 = {"btn":"button-module_btn__ffRtT","full-size":"button-module_full-size__vmV2E","content-size":"button-module_content-size__f7JSE","size-default":"button-module_size-default__ydEgl","type-filled":"button-module_type-filled__BiyVo","with-icon":"button-module_with-icon__mfKU-","type-outline":"button-module_type-outline__RpZ2V"};
-styleInject(css_248z$3);
+var css_248z$8 = ".button-module_btn__ffRtT{border:none;border-radius:6px;box-sizing:border-box;cursor:pointer;font-size:16px;line-height:20px;min-height:46px;outline:none;overflow:hidden;padding:12px 20px;text-transform:capitalize;transition:background-color .24s,color .24s}.button-module_btn__ffRtT.button-module_full-size__vmV2E{width:100%}.button-module_btn__ffRtT.button-module_content-size__f7JSE{width:auto}.button-module_btn__ffRtT.button-module_type-filled__BiyVo{background-color:#00236a;color:#fff}.button-module_btn__ffRtT.button-module_type-filled__BiyVo:hover{background-color:#001745}.button-module_btn__ffRtT.button-module_type-filled__BiyVo:disabled{background-color:#eee;color:#3c393e;pointer-events:none}.button-module_btn__ffRtT.button-module_type-outline__RpZ2V{background-color:#fff;box-shadow:inset 0 0 0 2px #00236a}.button-module_btn__ffRtT.button-module_type-outline__RpZ2V:hover{background-color:#001745;color:#fff}.button-module_btn__ffRtT.button-module_type-outline__RpZ2V:disabled{box-shadow:inset 0 0 0 2px #eee;color:#3c393e;pointer-events:none}";
+var styles$6 = {"btn":"button-module_btn__ffRtT","full-size":"button-module_full-size__vmV2E","content-size":"button-module_content-size__f7JSE","size-default":"button-module_size-default__ydEgl","type-filled":"button-module_type-filled__BiyVo","with-icon":"button-module_with-icon__mfKU-","type-outline":"button-module_type-outline__RpZ2V"};
+styleInject(css_248z$8);
 
 /**
  * Primary UI component for user interaction
@@ -115,9 +115,9 @@ const Button = ({
   outline,
   ...props
 }) => {
-  console.log(styles$2);
+  console.log(styles$6);
   console.log(backgroundColor);
-  const classProps = classnames__default["default"](styles$2.btn, styles$2[theme], styles$2[size], outline ? styles$2['type-outline'] : styles$2['type-filled'], className); // className='btn type-outline size-default' 
+  const classProps = classnames__default["default"](styles$6.btn, styles$6[theme], styles$6[size], outline ? styles$6['type-outline'] : styles$6['type-filled'], className); // className='btn type-outline size-default' 
 
   console.log(classProps);
   return /*#__PURE__*/React__default["default"].createElement("button", _extends({
@@ -169,8 +169,8 @@ Button.defaultProps = {
   outline: false
 };
 
-var css_248z$2 = "h1{font-size:70px;line-height:70px}h1,h2{font-weight:400;text-transform:uppercase}h2{font-size:50px;line-height:50px}h3{font-size:38px;font-weight:400;line-height:38px}h3,h4{text-transform:uppercase}h4{font-size:24px;font-weight:600;line-height:24px}h5{font-size:20px;font-size:16px;line-height:20px;line-height:22px;text-transform:uppercase}h5,p{font-weight:600;text-transform:capitalize}p{font-size:14px;line-height:20px}span{font-size:12px;font-weight:500;line-height:16px;text-transform:capitalize}i{font-family:icomoon;font-style:inherit}";
-styleInject(css_248z$2);
+var css_248z$7 = "h1{font-size:70px;line-height:70px}h1,h2{font-weight:400;text-transform:uppercase}h2{font-size:50px;line-height:50px}h3{font-size:38px;font-weight:400;line-height:38px}h3,h4{text-transform:uppercase}h4{font-size:24px;font-weight:600;line-height:24px}h5{font-size:20px;font-size:16px;line-height:20px;line-height:22px;text-transform:uppercase}h5,p{font-weight:600;text-transform:capitalize}p{font-size:14px;line-height:20px}span{font-size:12px;font-weight:500;line-height:16px;text-transform:capitalize}i{font-family:icomoon;font-style:inherit}";
+styleInject(css_248z$7);
 
 const TypographyType = {
   h1: 'h1',
@@ -219,9 +219,9 @@ Typography.defaultProps = {
   variant: 'h1'
 };
 
-var css_248z$1 = ".autocomplate-module_autocomplate-content__UbIUT{display:flex;flex-direction:column}.autocomplate-module_autocomplate-content-top__FVgCp{border:2px solid #d1d1d1;border-radius:6px;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;flex-direction:row;font-size:16px;font-weight:500;height:46px;line-height:22px;max-width:400px;padding:0 15px;transition:border-color .24s}.autocomplate-module_autocomplate-content-top__FVgCp.autocomplate-module_active__40fdV{border-color:#00236a}.autocomplate-module_autocomplate-content-top__FVgCp:hover{border-color:#3c393e}.autocomplate-module_autocomplate-content-bottom__yk0zP{animation:autocomplate-module_select-show__7Uap4 .64s linear forwards;background:#fbfbfb;border-radius:6px;box-shadow:0 0 10px rgba(60,57,62,.08);max-height:0;max-width:400px;overflow:hidden;position:relative;top:6px}.autocomplate-module_autocomplate-content-bottom-inner__rF5IF{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes autocomplate-module_select-show__7Uap4{to{max-height:400px}}.autocomplate-module_autocomplate-content-bottom-row__dRsZa{align-items:center;background:#fff;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;font-size:16px;font-weight:500;height:46px;line-height:22px;margin-bottom:2px;padding:0 15px;transition:background .24s,color .24s}.autocomplate-module_autocomplate-content-bottom-row__dRsZa .autocomplate-module_no-option__xv0-E{color:red}.autocomplate-module_autocomplate-content-bottom-row__dRsZa:hover{background:unset;color:#00236a}.autocomplate-module_option-active__WuH4I .autocomplate-module_autocomplate-content-bottom-row__dRsZa{color:#00236a}";
-var styles$1 = {"autocomplate-content":"autocomplate-module_autocomplate-content__UbIUT","autocomplate-content-top":"autocomplate-module_autocomplate-content-top__FVgCp","active":"autocomplate-module_active__40fdV","autocomplate-content-bottom":"autocomplate-module_autocomplate-content-bottom__yk0zP","select-show":"autocomplate-module_select-show__7Uap4","autocomplate-content-bottom-inner":"autocomplate-module_autocomplate-content-bottom-inner__rF5IF","autocomplate-content-bottom-row":"autocomplate-module_autocomplate-content-bottom-row__dRsZa","no-option":"autocomplate-module_no-option__xv0-E","option-active":"autocomplate-module_option-active__WuH4I"};
-styleInject(css_248z$1);
+var css_248z$6 = ".autocomplate-module_autocomplate-content__UbIUT{display:flex;flex-direction:column}.autocomplate-module_autocomplate-content-top__FVgCp{border:2px solid #d1d1d1;border-radius:6px;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;flex-direction:row;font-size:16px;font-weight:500;height:46px;line-height:22px;max-width:400px;padding:0 15px;transition:border-color .24s}.autocomplate-module_autocomplate-content-top__FVgCp.autocomplate-module_active__40fdV{border-color:#00236a}.autocomplate-module_autocomplate-content-top__FVgCp:hover{border-color:#3c393e}.autocomplate-module_autocomplate-content-bottom__yk0zP{animation:autocomplate-module_select-show__7Uap4 .64s linear forwards;background:#fbfbfb;border-radius:6px;box-shadow:0 0 10px rgba(60,57,62,.08);max-height:0;max-width:400px;overflow:hidden;position:relative;top:6px}.autocomplate-module_autocomplate-content-bottom-inner__rF5IF{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes autocomplate-module_select-show__7Uap4{to{max-height:400px}}.autocomplate-module_autocomplate-content-bottom-row__dRsZa{align-items:center;background:#fff;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;font-size:16px;font-weight:500;height:46px;line-height:22px;margin-bottom:2px;padding:0 15px;transition:background .24s,color .24s}.autocomplate-module_autocomplate-content-bottom-row__dRsZa .autocomplate-module_no-option__xv0-E{color:red}.autocomplate-module_autocomplate-content-bottom-row__dRsZa:hover{background:unset;color:#00236a}.autocomplate-module_option-active__WuH4I .autocomplate-module_autocomplate-content-bottom-row__dRsZa{color:#00236a}";
+var styles$5 = {"autocomplate-content":"autocomplate-module_autocomplate-content__UbIUT","autocomplate-content-top":"autocomplate-module_autocomplate-content-top__FVgCp","active":"autocomplate-module_active__40fdV","autocomplate-content-bottom":"autocomplate-module_autocomplate-content-bottom__yk0zP","select-show":"autocomplate-module_select-show__7Uap4","autocomplate-content-bottom-inner":"autocomplate-module_autocomplate-content-bottom-inner__rF5IF","autocomplate-content-bottom-row":"autocomplate-module_autocomplate-content-bottom-row__dRsZa","no-option":"autocomplate-module_no-option__xv0-E","option-active":"autocomplate-module_option-active__WuH4I"};
+styleInject(css_248z$6);
 
 const Autocomplate = ({
   className,
@@ -234,11 +234,11 @@ const Autocomplate = ({
   searchCount,
   ...props
 }) => {
-  classnames__default["default"](styles$1.searchBox, className);
-  const [inputValue, setInputValue] = React.useState("");
-  const [activeOption, setActiveOption] = React.useState(0);
-  const [filteredOptions, setFilteredOptions] = React.useState([]);
-  const [showOptions, setShowOptions] = React.useState(false);
+  classnames__default["default"](styles$5.searchBox, className);
+  const [inputValue, setInputValue] = React$1.useState("");
+  const [activeOption, setActiveOption] = React$1.useState(0);
+  const [filteredOptions, setFilteredOptions] = React$1.useState([]);
+  const [showOptions, setShowOptions] = React$1.useState(false);
   const parseOptionsData = jsonOptionsData.length !== 0 ? JSON.parse(jsonOptionsData).sort() : [];
 
   const handleChange = e => {
@@ -262,9 +262,9 @@ const Autocomplate = ({
   if (showOptions && inputValue) {
     if (filteredOptions.length && inputValue.length >= searchCount) {
       optionList = /*#__PURE__*/React__default["default"].createElement("div", {
-        className: styles$1['autocomplate-content-bottom']
+        className: styles$5['autocomplate-content-bottom']
       }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: styles$1['autocomplate-content-bottom-inner']
+        className: styles$5['autocomplate-content-bottom-inner']
       }, filteredOptions.map((optionName, index) => {
         let className;
 
@@ -273,33 +273,33 @@ const Autocomplate = ({
         }
 
         return /*#__PURE__*/React__default["default"].createElement("div", {
-          className: styles$1[className],
+          className: styles$5[className],
           key: optionName,
           onClick: handleClick
         }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: styles$1['autocomplate-content-bottom-row']
+          className: styles$5['autocomplate-content-bottom-row']
         }, optionName));
       })));
     } else {
       optionList = /*#__PURE__*/React__default["default"].createElement("div", {
-        className: styles$1['autocomplate-content-bottom']
+        className: styles$5['autocomplate-content-bottom']
       }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: styles$1['autocomplate-content-bottom-inner']
+        className: styles$5['autocomplate-content-bottom-inner']
       }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: styles$1['autocomplate-content-bottom-row']
+        className: styles$5['autocomplate-content-bottom-row']
       }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: styles$1['no-option']
+        className: styles$5['no-option']
       }, "No Option!"))));
     }
   }
 
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, label ? /*#__PURE__*/React__default["default"].createElement("label", {
-    className: styles$1.labelInput
+    className: styles$5.labelInput
   }, label) : "", /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$1['autocomplate-content']
+    className: styles$5['autocomplate-content']
   }, /*#__PURE__*/React__default["default"].createElement("input", _extends({
     type: "text",
-    className: styles$1['autocomplate-content-top'],
+    className: styles$5['autocomplate-content-top'],
     required: required,
     disabled: disabled,
     onChange: handleChange,
@@ -322,9 +322,9 @@ Autocomplate.defaultProps = {
   searchCount: 2
 };
 
-var css_248z = ".checkbox-module_checkbox-wrap__Xrg-m{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.checkbox-module_checkbox-wrap__Xrg-m>input{height:0;opacity:0;position:absolute;width:0}.checkbox-module_checkbox-wrap__Xrg-m .checkbox-module_checkmark__M8DY6{border:1px solid #d9d9d9;border-radius:3px;display:inline-block;height:14px;left:0;margin-right:4px;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.checkbox-module_checkbox-wrap__Xrg-m>.checkbox-module_checkmark__M8DY6:after{border:solid #1890ff;border-width:0 2px 2px 0;content:\"\";display:block;height:8px;left:4px;opacity:0;position:absolute;top:1px;transform:rotate(45deg);transition:opacity .24s;width:4px}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6:after{opacity:1}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6,.checkbox-module_checkbox-wrap__Xrg-m:hover input~.checkbox-module_checkmark__M8DY6{border-color:#1890ff}";
-var styles = {"checkbox-wrap":"checkbox-module_checkbox-wrap__Xrg-m","checkmark":"checkbox-module_checkmark__M8DY6"};
-styleInject(css_248z);
+var css_248z$5 = ".checkbox-module_checkbox-wrap__Xrg-m{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.checkbox-module_checkbox-wrap__Xrg-m>input{height:0;opacity:0;position:absolute;width:0}.checkbox-module_checkbox-wrap__Xrg-m .checkbox-module_checkmark__M8DY6{border:1px solid #d9d9d9;border-radius:3px;display:inline-block;height:14px;left:0;margin-right:4px;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.checkbox-module_checkbox-wrap__Xrg-m>.checkbox-module_checkmark__M8DY6:after{border:solid #1890ff;border-width:0 2px 2px 0;content:\"\";display:block;height:8px;left:4px;opacity:0;position:absolute;top:1px;transform:rotate(45deg);transition:opacity .24s;width:4px}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6:after{opacity:1}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6,.checkbox-module_checkbox-wrap__Xrg-m:hover input~.checkbox-module_checkmark__M8DY6{border-color:#1890ff}";
+var styles$4 = {"checkbox-wrap":"checkbox-module_checkbox-wrap__Xrg-m","checkmark":"checkbox-module_checkmark__M8DY6"};
+styleInject(css_248z$5);
 
 const Checkbox = ({
   disabled,
@@ -338,9 +338,9 @@ const Checkbox = ({
   keyNames,
   ...props
 }) => {
-  const classProps = classnames__default["default"](styles.checkbox, className);
+  const classProps = classnames__default["default"](styles$4.checkbox, className);
   const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
-  const [data, setData] = React.useState(parseData);
+  const [data, setData] = React$1.useState(parseData);
 
   const handleChange = e => {
     if (e.target.checked) {
@@ -362,7 +362,7 @@ const Checkbox = ({
 
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, data.map(element => {
     return /*#__PURE__*/React__default["default"].createElement("label", {
-      className: styles["checkbox-wrap"],
+      className: styles$4["checkbox-wrap"],
       key: element.value
     }, /*#__PURE__*/React__default["default"].createElement("input", _extends({
       type: "checkbox",
@@ -373,9 +373,9 @@ const Checkbox = ({
       name: name ? name : element.name,
       onChange: handleChange
     }, props)), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: styles["checkmark"]
+      className: styles$4["checkmark"]
     }), element.label ? /*#__PURE__*/React__default["default"].createElement("span", {
-      className: styles.labelRadio
+      className: styles$4.labelRadio
     }, label ? label : element.label) : "");
   }));
 };
@@ -534,16 +534,400 @@ const SvgStarOutline = ({
   d: "m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
 }));
 
+var css_248z$4 = ".input-module_input-wrap__NunrE{position:relative}.input-module_input__-ipHD{border:none;border-radius:6px;box-shadow:inset 0 0 0 2px #d1d1d1;box-sizing:border-box;color:#3c393e;cursor:pointer;font-size:16px;line-height:20px;outline:none;overflow:hidden;text-transform:capitalize;transition:background-color .24s,color .24s}.input-module_input__-ipHD.input-module_full-size__38YG7{width:100%}.input-module_input__-ipHD.input-module_content-size__rZ5EA{width:auto}.input-module_input__-ipHD.input-module_size-medium__frTDq{min-height:46px;padding:12px 15px}.input-module_input__-ipHD:hover{box-shadow:inset 0 0 0 2px #3c393e}.input-module_input__-ipHD:active{box-shadow:inset 0 0 0 2px #00236a}.input-module_inputErrorMessages__hx490{animation:input-module_error-message-show__OrVSo .24s forwards;bottom:0;color:#e00;font-size:14px;left:0;line-height:19px;position:absolute;transform:scale3d(0,0,0);z-index:1}.input-module_labelInput__sUMKQ{color:#000}.input-module_input__-ipHD.input-module_state-disabled__402v0{background-color:#fbfbfb;pointer-events:none}.input-module_input__-ipHD.input-module_error-message__7NphF{box-shadow:inset 0 0 0 2px #e00}@keyframes input-module_error-message-show__OrVSo{to{bottom:-20px;transform:scaleX(1)}}";
+var styles$3 = {"input-wrap":"input-module_input-wrap__NunrE","input":"input-module_input__-ipHD","full-size":"input-module_full-size__38YG7","content-size":"input-module_content-size__rZ5EA","size-medium":"input-module_size-medium__frTDq","with-icon":"input-module_with-icon__w3jTW","inputErrorMessages":"input-module_inputErrorMessages__hx490","error-message-show":"input-module_error-message-show__OrVSo","labelInput":"input-module_labelInput__sUMKQ","state-disabled":"input-module_state-disabled__402v0","error-message":"input-module_error-message__7NphF"};
+styleInject(css_248z$4);
+
+const InputTypes = {
+  TEXT: "text",
+  PASSWORD: "password",
+  EMAIL: "email",
+  NUMBER: "number",
+  TEL: "tel"
+};
+const InputSizes = {
+  SMALL: "size-small",
+  MEDIUM: "size-medium",
+  LARGE: "size-large"
+};
+const Input = ({
+  size,
+  color,
+  className,
+  label,
+  regexp,
+  regexpError,
+  errorMesage,
+  required,
+  disabled,
+  type,
+  ...props
+}) => {
+  const [inputValue, setInputValue] = React$1.useState("");
+
+  const handleChange = event => {
+    setInputValue(event.target.value);
+  };
+
+  let eMessage = "";
+
+  if (errorMesage) {
+    eMessage = errorMesage;
+  } else if (regexp) {
+    const regex = new RegExp(regexp);
+    eMessage = regex.test(inputValue) ? "" : regexpError;
+  }
+
+  const classProps = classnames__default["default"](styles$3.input, styles$3[size], eMessage != '' ? styles$3['error-message'] : "", className);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$3['input-wrap']
+  }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
+    className: styles$3.labelInput
+  }, label) : "", /*#__PURE__*/React__default["default"].createElement("input", _extends({}, props, {
+    type: type,
+    className: classProps,
+    style: color && {
+      color
+    },
+    disabled: disabled ? disabled : "",
+    onChange: handleChange,
+    value: inputValue
+  })), eMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: styles$3.inputErrorMessages
+  }, eMessage) : "");
+};
+Input.propTypes = {
+  type: PropTypes__default["default"].oneOf(Object.values(InputTypes)),
+  size: PropTypes__default["default"].oneOf(Object.values(InputSizes)),
+  color: PropTypes__default["default"].string,
+  className: PropTypes__default["default"].string,
+  onChange: PropTypes__default["default"].func,
+  required: PropTypes__default["default"].bool,
+  errorMesage: PropTypes__default["default"].string,
+  regexp: PropTypes__default["default"].string,
+  regexpError: PropTypes__default["default"].string,
+  label: PropTypes__default["default"].string.isRequired,
+  disabled: PropTypes__default["default"].bool
+};
+Input.defaultProps = {
+  label: "",
+  color: null,
+  size: InputSizes.MEDIUM,
+  onChange: undefined,
+  required: true,
+  errorMesage: "",
+  type: "text"
+};
+
+var css_248z$3 = ".pagination-module_listItem__b1-WN:focus{background-color:#4caf50;color:#fff}.pagination-module_listItem__b1-WN:hover:not(.pagination-module_active__KwBDp){background-color:#ddd}.pagination-module_pagination-bar__MrtYT{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px}.pagination-module_pagination-btn__w8Yh8{border:none;border-radius:6px;outline:none}.pagination-module_pagination-btn__w8Yh8,.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{align-items:center;background-color:#fff;box-shadow:0 0 0 1px #eee;cursor:pointer;display:flex;height:34px;justify-content:center;width:34px}.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{border-radius:6px;flex:0 0 auto;font-size:16px;line-height:22px;position:relative;transition:background-color .24s}.pagination-module_pagination-item__t3emS:hover{background-color:#eee}.pagination-module_pagination-item__t3emS.pagination-module_selected__EXzCA{background-color:#00236a;color:#fff}.pagination-module_pagination-jump-next-arrow__aEVD8,.pagination-module_pagination-jump-next-txt__e7nFj{align-items:center;bottom:0;display:flex;font-size:12px;justify-content:center;left:0;line-height:14px;margin:auto;position:absolute;right:0;top:0;transition:opacity .24s,color .24s}.pagination-module_pagination-jump-next-arrow__aEVD8{opacity:0}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-arrow__aEVD8{opacity:1}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-txt__e7nFj{opacity:0}i{color:#3c393e;font-size:12px;line-height:12px}";
+var styles$2 = {"listItem":"pagination-module_listItem__b1-WN","active":"pagination-module_active__KwBDp","pagination-bar":"pagination-module_pagination-bar__MrtYT","pagination-btn":"pagination-module_pagination-btn__w8Yh8","pagination-item":"pagination-module_pagination-item__t3emS","pagination-jump-next":"pagination-module_pagination-jump-next__LAb9Z","selected":"pagination-module_selected__EXzCA","pagination-jump-next-txt":"pagination-module_pagination-jump-next-txt__e7nFj","pagination-jump-next-arrow":"pagination-module_pagination-jump-next-arrow__aEVD8"};
+styleInject(css_248z$3);
+
+const Dots = "...";
+
+const range = (start, end) => {
+  const length = end - start + 1;
+  return Array.from({
+    length
+  }, (_, idx) => idx + start);
+};
+
+const PaginationRange = ({
+  currentTotalCount,
+  offset,
+  siblingCountNumber,
+  currentPageNumber
+}) => {
+  const paginationRange = React$1.useMemo(() => {
+    const totalPageCount = Math.ceil(currentTotalCount / offset); //currentPage + 2*Dots + start + end = 5
+
+    const totalPageNumber = siblingCountNumber + 5;
+
+    if (totalPageNumber >= totalPageCount) {
+      return range(1, totalPageCount);
+    }
+
+    const rightSiblingIndex = Math.min(currentPageNumber + siblingCountNumber, totalPageCount);
+    const leftSiblingIndex = Math.max(currentPageNumber - siblingCountNumber, 1);
+    const shouldShowLeftDots = leftSiblingIndex > 2;
+    const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
+    const firstPageIndex = 1;
+    const lastPageIndex = totalPageCount;
+
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      let leftItemCount = currentPageNumber === 4 && lastPageIndex > 7 ? 4 + siblingCountNumber : 3 + siblingCountNumber;
+      let leftRange = range(1, leftItemCount);
+      return [...leftRange, Dots, totalPageCount];
+    }
+
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      let rightItemCount = currentPageNumber === lastPageIndex - 3 && lastPageIndex > 7 ? rightItemCount = 4 + siblingCountNumber : rightItemCount = 3 + siblingCountNumber;
+      let rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);
+      return [firstPageIndex, Dots, ...rightRange];
+    }
+
+    if (shouldShowLeftDots && shouldShowRightDots) {
+      let middleRange = range(leftSiblingIndex, rightSiblingIndex);
+      return [firstPageIndex, Dots, ...middleRange, Dots, lastPageIndex];
+    }
+  }, [currentTotalCount, offset, siblingCountNumber, currentPageNumber]);
+  return paginationRange;
+};
+
+var css_248z$2 = "@font-face{font-display:block;font-family:icomoon;font-style:normal;font-weight:400;src:url(fonts/icomoon.eot?b29ky3);src:url(fonts/icomoon.eot?b29ky3#iefix) format(\"embedded-opentype\"),url(fonts/icomoon.ttf?b29ky3) format(\"truetype\"),url(fonts/icomoon.woff?b29ky3) format(\"woff\"),url(fonts/icomoon.svg?b29ky3#icomoon) format(\"svg\")}[class*=\" icon-\"],[class^=icon-]{speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:icomoon!important;font-style:normal;font-variant:normal;font-weight:400;line-height:1;text-transform:none}.icon-close:before{content:\"\\e907\"}.icon-arrow-up:before{content:\"\\e905\"}.icon-arrow-down:before{content:\"\\e906\"}.icon-arrow:before{content:\"\\e900\"}.icon-arrow-jump-next:before{content:\"\\e901\"}.icon-arrow-jump-back:before{content:\"\\e902\"}.icon-text:before{content:\"\\e903\"}.icon-arrow-back:before{content:\"\\e904\"}";
+styleInject(css_248z$2);
+
+/**
+ * Created by aleksanyan.tigran on 10/7/2022.
+ */
+
+const Icon = props => /*#__PURE__*/React.createElement("i", {
+  className: css_248z$2[props.className]
+});
+
+const Pagination = ({
+  onChange,
+  totalCount,
+  siblingCount,
+  currentPage,
+  offset,
+  className
+}) => {
+  const [siblingCountNumber, setSibilingCountNumber] = React$1.useState(2);
+  const [currentPageNumber, setCurrentPage] = React$1.useState(1);
+  const [currentTotalCount, setcurrentTotalCount] = React$1.useState(10);
+  React$1.useEffect(() => {
+    setcurrentTotalCount(totalCount);
+  }, [totalCount]);
+  React$1.useEffect(() => {
+    setSibilingCountNumber(siblingCount);
+  }, [siblingCount]);
+  React$1.useEffect(() => {
+    setCurrentPage(currentPage);
+  }, [currentPage]);
+
+  const onPageChange = page => {
+    setCurrentPage(page);
+  };
+
+  onChange(currentPageNumber);
+  const paginationRange = PaginationRange({
+    currentPageNumber,
+    currentTotalCount,
+    siblingCountNumber,
+    offset
+  });
+
+  if (currentPageNumber === 0 || paginationRange.length < 2) {
+    return null;
+  }
+
+  const classProps = classnames__default["default"](styles$2.list, className ? className : styles$2["pagination-bar"]);
+
+  const onNext = () => {
+    onPageChange(currentPageNumber + 1);
+  };
+
+  const onPrevious = () => {
+    onPageChange(currentPageNumber - 1);
+  };
+
+  const onNextFive = () => {
+    currentPageNumber !== lastPage - 4 ? onPageChange(currentPageNumber + 5) : onPageChange(currentPageNumber + 4);
+  };
+
+  const onPreviousFive = e => {
+    currentPageNumber !== 5 ? onPageChange(currentPageNumber - 5) : onPageChange(currentPageNumber - 4);
+  };
+
+  let lastPage = paginationRange[paginationRange.length - 1];
+  return /*#__PURE__*/React$1.React.createElement("ul", {
+    className: classProps
+  }, /*#__PURE__*/React$1.React.createElement("button", {
+    className: styles$2["pagination-btn"],
+    onClick: onPrevious,
+    disabled: currentPage === 1 ? true : false
+  }, /*#__PURE__*/React$1.React.createElement(Icon, {
+    className: "icon-arrow-back"
+  })), paginationRange.map((pageNumber, id) => {
+    if (pageNumber === Dots) {
+      let currentPageIndex = paginationRange.indexOf(currentPageNumber);
+      return /*#__PURE__*/React$1.React.createElement("li", {
+        key: id,
+        className: classnames__default["default"](styles$2['pagination-jump-next'], styles$2.listItem),
+        onClick: id < currentPageIndex ? onPreviousFive : onNextFive,
+        disabled: currentPageIndex === 0 ? true : false
+      }, /*#__PURE__*/React$1.React.createElement("span", {
+        className: styles$2['pagination-jump-next-txt']
+      }, "..."), /*#__PURE__*/React$1.React.createElement("span", {
+        className: styles$2['pagination-jump-next-arrow']
+      }, /*#__PURE__*/React$1.React.createElement(Icon, {
+        className: "icon-arrow-jump-next"
+      })));
+    }
+
+    return /*#__PURE__*/React$1.React.createElement("li", {
+      onClick: () => onPageChange(pageNumber),
+      key: id,
+      className: classnames__default["default"](`${pageNumber === currentPageNumber ? styles$2.selected : styles$2.listItem}`, styles$2['pagination-item'])
+    }, pageNumber);
+  }), /*#__PURE__*/React$1.React.createElement("button", {
+    onClick: onNext,
+    className: styles$2["pagination-btn"],
+    disabled: currentPageNumber === lastPage ? true : false
+  }, /*#__PURE__*/React$1.React.createElement(Icon, {
+    className: "icon-arrow"
+  })));
+};
+Pagination.propTypes = {
+  offset: PropTypes__default["default"].number,
+  totalCount: PropTypes__default["default"].number,
+  className: PropTypes__default["default"].string,
+  siblingCount: PropTypes__default["default"].number,
+  currentPage: PropTypes__default["default"].number
+};
+Pagination.defaultProps = {
+  offset: 2,
+  siblingCount: 2
+};
+
+var css_248z$1 = ".radio-module_radio-wrap__-lO7V{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.radio-module_radio-wrap__-lO7V>input{height:0;opacity:0;position:absolute;width:0}.radio-module_radio-wrap__-lO7V .radio-module_radio-checkmark__Kvol0{border:1px solid #d9d9d9;border-radius:50%;display:inline-block;height:14px;left:0;margin-right:4px;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.radio-module_radio-wrap__-lO7V>.radio-module_radio-checkmark__Kvol0:after{background-color:#d9d9d9;border-radius:50%;bottom:0;content:\"\";height:8px;left:0;margin:auto;opacity:0;position:absolute;right:0;top:0;transition:opacity .24s,background-color .24s;width:8px}.radio-module_radio-wrap__-lO7V input:checked~.radio-module_radio-checkmark__Kvol0:after{background-color:#1890ff;opacity:1}.radio-module_radio-wrap__-lO7V:hover input~.radio-module_radio-checkmark__Kvol0:after{opacity:1}.radio-module_radio-wrap__-lO7V input:checked~.radio-module_radio-checkmark__Kvol0{border-color:#1890ff}";
+var styles$1 = {"radio-wrap":"radio-module_radio-wrap__-lO7V","radio-checkmark":"radio-module_radio-checkmark__Kvol0"};
+styleInject(css_248z$1);
+
+const Radio = ({
+  disabled,
+  defaultChecked,
+  required,
+  className,
+  name,
+  value,
+  jsonData,
+  label,
+  keyNames,
+  ...props
+}) => {
+  const classProps = classnames__default["default"](styles$1.checkbox, className);
+  const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, parseData.map((element, id) => {
+    return /*#__PURE__*/React__default["default"].createElement("label", {
+      className: styles$1["radio-wrap"],
+      key: element.value
+    }, /*#__PURE__*/React__default["default"].createElement("input", _extends({
+      type: "radio",
+      className: classProps,
+      disabled: disabled,
+      required: required,
+      defaultChecked: id === 0 ? defaultChecked : "",
+      value: value ? value : element.value,
+      name: name ? name : element.name
+    }, props)), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: styles$1["radio-checkmark"]
+    }), element.label ? /*#__PURE__*/React__default["default"].createElement("span", {
+      className: styles$1.labelRadio
+    }, label ? label : element.label) : "");
+  }));
+};
+Radio.propTypes = {
+  className: PropTypes__default["default"].string,
+  onChange: PropTypes__default["default"].func,
+  required: PropTypes__default["default"].bool,
+  defaultChecked: PropTypes__default["default"].bool,
+  disabled: PropTypes__default["default"].bool,
+  name: PropTypes__default["default"].string,
+  value: PropTypes__default["default"].string,
+  jsonData: PropTypes__default["default"].string,
+  label: PropTypes__default["default"].string,
+  keyNames: PropTypes__default["default"].object
+};
+Radio.defaultProps = {
+  onChange: undefined,
+  jsonData: '[{"value":"email", "name":"contact", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact", "label":"Phone", "id":"contactChoice2"}]'
+};
+
+var css_248z = "*{margin:0;padding:0}.captcha-module_main__Ys3EH{margin:0;padding:0;position:relative;width:40%}.captcha-module_slider__KLYny{-webkit-appearance:none;background-color:hsla(0,0%,100%,.575);border:.1px solid hsla(0,0%,59%,.432);height:7px;outline:none;width:100%}.captcha-module_slider__KLYny::-webkit-slider-thumb{-webkit-appearance:none;height:48px;position:relative;width:48px;z-index:3}.captcha-module_selector__JFhb4{bottom:-20px;height:48px;left:50%;position:absolute;width:48px;z-index:2}.captcha-module_selectBtn__GP1iH{background-image:url(https://i.ibb.co/rQZNNzN/blue.png);background-position:50%;background-size:cover;border-radius:50%;bottom:40px;height:40px;position:absolute;right:30px;width:40px}.captcha-module_progressBar__mhdtM{background:#7070ee;bottom:38px;height:7px;left:0;margin:0;padding:0;position:absolute;width:50%}.captcha-module_range__k24I2{color:blue;margin-bottom:15px;margin-top:15px}";
+var styles = {"main":"captcha-module_main__Ys3EH","slider":"captcha-module_slider__KLYny","selector":"captcha-module_selector__JFhb4","selectBtn":"captcha-module_selectBtn__GP1iH","progressBar":"captcha-module_progressBar__mhdtM","range":"captcha-module_range__k24I2"};
+styleInject(css_248z);
+
+const Captcha = ({
+  onclick,
+  rangeCount
+}) => {
+  const [data, setData] = React$1.useState("");
+  const [right, setRight] = React$1.useState(false);
+  let range = rangeCount <= 100 ? rangeCount : 0;
+  let rangeElement = document.getElementsByClassName(styles.range);
+  React$1.useEffect(() => {
+    for (let element of rangeElement) {
+      element.style.marginLeft = `${range - 3}%`;
+      element.style.color = data;
+    }
+  }, [range, data]);
+
+  function sliderInput(event) {
+    setData(rangeCount == event.target.value ? 'green' : 'indianred');
+    let selector = document.getElementsByClassName(styles.selector);
+    let selectBtn = document.getElementsByClassName(styles.selectBtn);
+    let progressBar = document.getElementsByClassName(styles.progressBar);
+    selector[0].style.left = event.target.value + '%';
+    progressBar[0].style.width = event.target.value + '%';
+
+    if (rangeCount == event.target.value) {
+      selectBtn[0].style.backgroundImage = "url('https://i.ibb.co/b1HDRtd/green.png')";
+    } else {
+      selectBtn[0].style.backgroundImage = "url('https://i.ibb.co/QvXjjLM/red.png')";
+    }
+  }
+
+  function sliderChange(e) {
+    setRight(rangeCount == e.target.value ? true : false);
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.main
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.range
+  }, "\u25BC"), /*#__PURE__*/React__default["default"].createElement("input", {
+    type: "range",
+    className: styles.slider,
+    onClick: right ? onclick : null,
+    onInput: sliderInput,
+    onMouseUp: sliderChange
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.selector
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.selectBtn
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.progressBar
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.range
+  }, "\u25B2")));
+};
+Captcha.propTypes = {
+  onclick: PropTypes__default["default"].func,
+  className: PropTypes__default["default"].string,
+  rangeCount: PropTypes__default["default"].number
+};
+Captcha.defaultProps = {
+  onclick: undefined
+};
+
 exports.Autocomplate = Autocomplate;
 exports.Button = Button;
 exports.ButtonSize = ButtonSize;
 exports.ButtonTheme = ButtonTheme;
 exports.ButtonType = ButtonType;
+exports.Captcha = Captcha;
 exports.Checkbox = Checkbox;
 exports.HeartFilled = SvgHeartFilled;
 exports.HeartOutline = SvgHeartOutline;
+exports.Input = Input;
+exports.InputSizes = InputSizes;
+exports.InputTypes = InputTypes;
 exports.LikeFilled = SvgLikeFilled;
 exports.LikeOutline = SvgLikeOutline;
+exports.Pagination = Pagination;
+exports.Radio = Radio;
 exports.StarFilled = SvgStarFilled;
 exports.StarOutline = SvgStarOutline;
 exports.Typography = Typography;

package/package.json

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

package/src/index.js

@@ -3,8 +3,8 @@ export * from './components/typography';
 export * from './components/autocomplate';
 export * from './components/checkbox';
 export * from './components/icon';
-// export * from './components/input';
-// export * from './components/pagination';
-// export * from './components/radio';
-// export * from './components/captcha';
+export * from './components/input';
+export * from './components/pagination';
+export * from './components/radio';
+export * from './components/captcha';
 // export * from './components/select';