@xaypay/tui 0.0.94 → 0.0.96

package/dist/index.es.js

@@ -66,9 +66,9 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$f = ".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 css_248z$g = ".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$f);
+styleInject(css_248z$g);
 
 const File = ({
   name,
@@ -190,6 +190,63 @@ File.defaultProps = {
   fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
 };
 
+const _ = require('lodash');
+const compereConfigs = () => {
+  let projectConfig = {};
+  let packageConfig = {};
+  try {
+    packageConfig = require('../tui.config.js');
+  } catch (e) {
+    try {
+      packageConfig = require('../../tui.config.js');
+    } catch (err) {
+      packageConfig = {};
+    }
+  }
+  try {
+    projectConfig = require('../../../../tui.config.js');
+  } catch (error) {
+    projectConfig = {};
+    // console.log(error, 'Project: if you want to use custom styles, create tui.config.js file in your project root');
+  }
+
+  return _.merge(packageConfig, projectConfig);
+};
+
+var css_248z$f = "";
+styleInject(css_248z$f);
+
+const Chart = ({
+  width,
+  height
+}) => {
+  compereConfigs();
+  useEffect(() => {
+    const canvas = document.getElementById('myChart');
+    // const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    const data = [10, 20, 30, 15, 25];
+    const barWidth = 40;
+    const chartHeight = 200;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    data.forEach((value, index) => {
+      const x = index * (barWidth + 10);
+      const y = chartHeight - value;
+      ctx.fillStyle = 'blue';
+      ctx.fillRect(x, y, barWidth, value);
+    });
+  }, []);
+  return /*#__PURE__*/React__default.createElement("canvas", {
+    id: "myChart",
+    width: width,
+    height: height
+  });
+};
+Chart.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number
+};
+
 const SvgCheckboxUnchecked = ({
   title,
   titleId,
@@ -271,29 +328,6 @@ SingleCheckbox.propTypes = {
 var css_248z$e = ".table-module_sorting-arrows__BaN-G:after{content:\"▲\";font-size:11px;position:absolute;right:0;top:calc(50% - 12px)}.table-module_sorting-arrows__BaN-G:before{bottom:calc(50% - 12px);content:\"▼\";font-size:11px;position:absolute;right:0}.table-module_td-span__XHo6k{cursor:pointer;display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}";
 styleInject(css_248z$e);
 
-const _ = require('lodash');
-const compereConfigs = () => {
-  let projectConfig = {};
-  let packageConfig = {};
-  try {
-    packageConfig = require('../tui.config.js');
-  } catch (e) {
-    try {
-      packageConfig = require('../../tui.config.js');
-    } catch (err) {
-      packageConfig = {};
-    }
-  }
-  try {
-    projectConfig = require('../../../../tui.config.js');
-  } catch (error) {
-    projectConfig = {};
-    // console.log(error, 'Project: if you want to use custom styles, create tui.config.js file in your project root');
-  }
-
-  return _.merge(packageConfig, projectConfig);
-};
-
 ({
   dataBody: PropTypes.array,
   dataHeader: PropTypes.array,
@@ -421,6 +455,8 @@ const Modal = ({
   headerSize,
   imageHeight,
   headerColor,
+  borderStyle,
+  borderWidth,
   outsideClose,
   headerWeight,
   headerHeight,
@@ -507,39 +543,38 @@ const Modal = ({
     className: `${classProps} ${styles$b['animation__modal']}`,
     onClick: handleStopClosing,
     style: {
-      overflow: 'auto',
-      boxSizing: 'border-box',
       width: width ? width : configStyles.MODAL.width,
       height: height ? height : configStyles.MODAL.height,
+      position: 'relative',
+      display: 'grid',
+      overflow: 'hidden',
+      boxSizing: 'border-box',
+      gridTemplateRows: 'auto 10fr',
       borderRadius: radius ? radius : configStyles.MODAL.radius,
       maxWidth: mMaxWidth ? mMaxWidth : configStyles.MODAL.mMaxWidth,
       maxHeight: mMaxHeight ? mMaxHeight : configStyles.MODAL.mMaxHeight,
       minWidth: type === 'content' ? minWidth ? minWidth : configStyles.MODAL.minWidth : '',
-      padding: type === 'content' ? padding ? padding : configStyles.MODAL.padding : '10px',
       backgroundColor: backgroundColor ? backgroundColor : configStyles.MODAL.backgroundColor,
       minHeight: type === 'content' ? minHeight ? minHeight : configStyles.MODAL.minHeight : ''
     }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      position: 'relative',
-      width: '100%',
-      height: '100%'
-    }
   }, type === 'content' ? /*#__PURE__*/React__default.createElement("div", {
     style: {
       width: '100%',
       display: 'flex',
       alignItems: 'center',
+      backgroundColor: '#FBFBFB',
+      boxSizing: 'border-box',
+      justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end',
       height: headerHeight ? headerHeight : configStyles.MODAL.headerHeight,
-      justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end'
+      padding: padding ? padding : configStyles.MODAL.padding
     }
   }, headerText && type === 'content' && /*#__PURE__*/React__default.createElement("p", {
     style: {
+      flex: '1',
       overflow: 'hidden',
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis',
       margin: '0px 16px 0px 0px',
-      maxWidth: 'calc(100% - 30px)',
       fontSize: headerSize ? headerSize : configStyles.MODAL.headerSize,
       color: headerColor ? headerColor : configStyles.MODAL.headerColor,
       fontWeight: headerWeight ? headerWeight : configStyles.MODAL.headerWeight
@@ -562,15 +597,21 @@ const Modal = ({
       border: 'none',
       outline: 'none',
       cursor: 'pointer',
+      zIndex: '1',
       backgroundColor: 'transparent'
     }
   }, /*#__PURE__*/React__default.createElement(SvgCloseSlide, null)), /*#__PURE__*/React__default.createElement("div", {
     style: {
       display: 'flex',
+      position: 'relative',
+      width: '100%',
+      height: '100%',
       alignItems: 'center',
       boxSizing: 'border-box',
       justifyContent: 'center',
-      paddingTop: type === 'content' ? '10px' : '0px'
+      overflow: 'auto',
+      borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth,
+      borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle
     }
   }, type === 'content' ? children ? children : '' : /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -624,7 +665,7 @@ const Modal = ({
       top: 'calc(50% - 12px)',
       backgroundColor: 'transparent'
     }
-  }, /*#__PURE__*/React__default.createElement(SvgNext, null)))))))));
+  }, /*#__PURE__*/React__default.createElement(SvgNext, null))))))));
 };
 Modal.propTypes = {
   data: PropTypes.array,
@@ -645,6 +686,8 @@ Modal.propTypes = {
   imageWidth: PropTypes.string,
   headerSize: PropTypes.string,
   outsideClose: PropTypes.bool,
+  borderStyle: PropTypes.string,
+  borderWidth: PropTypes.string,
   headerColor: PropTypes.string,
   imageHeight: PropTypes.string,
   headerWeight: PropTypes.string,
@@ -752,7 +795,7 @@ const Input = ({
   const handleChange = event => {
     const currentValue = event.target.value;
     let prevValue = innerValue;
-    setInnerValue(currentValue);
+    setInnerValue(() => currentValue);
     if (change) {
       change(currentValue);
     }
@@ -780,9 +823,10 @@ const Input = ({
     if (type === 'number') {
       const regNum = /^\d+(\.)?(\d+)?$/;
       if (!regNum.test(currentValue)) {
-        setInnerValue(prevValue);
+        const newStr = currentValue.replace(/[^\d+]/g, '');
+        setInnerValue(newStr);
         if (change) {
-          change(prevValue);
+          change(newStr);
         }
       }
       if (minNumSize && currentValue < minNumSize) {
@@ -807,6 +851,15 @@ const Input = ({
             change(`${int}.${float.substr(0, floatToFix)}`);
           }
         }
+      } else if (floatToFix === 0) {
+        const floatNumParts = typeof currentValue === 'string' ? currentValue.split('.') : currentValue;
+        const int = floatNumParts[0];
+        if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
+          setInnerValue(`${int}`);
+          if (change) {
+            change(`${int}`);
+          }
+        }
       }
       if (currentValue === '') {
         setInnerValue('');
@@ -866,9 +919,10 @@ const Input = ({
         if (type === 'number') {
           const regNum = /^\d+(\.)?(\d+)?$/;
           if (!regNum.test(value)) {
-            setInnerValue('');
+            const newStr = value.replace(/[^\d+]/g, '');
+            setInnerValue(newStr);
             if (change) {
-              change('');
+              change(newStr);
             }
           }
           if (minNumSize && value < minNumSize) {
@@ -4204,4 +4258,4 @@ NewAutocomplete.defaultProps = {
   disabled: false
 };
 
-export { Autocomplate, Button, Captcha, Checkbox, File, Input, InputTypes, Modal, NewAutocomplete, NewFile, Pagination, Radio, Select, SingleCheckbox, Stepper, Textarea, Toaster, Tooltip, Typography, TypographyType, toast };
+export { Autocomplate, Button, Captcha, Chart, Checkbox, File, Input, InputTypes, Modal, NewAutocomplete, NewFile, Pagination, Radio, Select, SingleCheckbox, Stepper, Textarea, Toaster, Tooltip, Typography, TypographyType, toast };

package/dist/index.js

@@ -96,9 +96,9 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$f = ".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 css_248z$g = ".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$f);
+styleInject(css_248z$g);
 
 const File = ({
   name,
@@ -220,6 +220,63 @@ File.defaultProps = {
   fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
 };
 
+const _ = require('lodash');
+const compereConfigs = () => {
+  let projectConfig = {};
+  let packageConfig = {};
+  try {
+    packageConfig = require('../tui.config.js');
+  } catch (e) {
+    try {
+      packageConfig = require('../../tui.config.js');
+    } catch (err) {
+      packageConfig = {};
+    }
+  }
+  try {
+    projectConfig = require('../../../../tui.config.js');
+  } catch (error) {
+    projectConfig = {};
+    // console.log(error, 'Project: if you want to use custom styles, create tui.config.js file in your project root');
+  }
+
+  return _.merge(packageConfig, projectConfig);
+};
+
+var css_248z$f = "";
+styleInject(css_248z$f);
+
+const Chart = ({
+  width,
+  height
+}) => {
+  compereConfigs();
+  React.useEffect(() => {
+    const canvas = document.getElementById('myChart');
+    // const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    const data = [10, 20, 30, 15, 25];
+    const barWidth = 40;
+    const chartHeight = 200;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    data.forEach((value, index) => {
+      const x = index * (barWidth + 10);
+      const y = chartHeight - value;
+      ctx.fillStyle = 'blue';
+      ctx.fillRect(x, y, barWidth, value);
+    });
+  }, []);
+  return /*#__PURE__*/React__default["default"].createElement("canvas", {
+    id: "myChart",
+    width: width,
+    height: height
+  });
+};
+Chart.propTypes = {
+  width: PropTypes__default["default"].number,
+  height: PropTypes__default["default"].number
+};
+
 const SvgCheckboxUnchecked = ({
   title,
   titleId,
@@ -301,29 +358,6 @@ SingleCheckbox.propTypes = {
 var css_248z$e = ".table-module_sorting-arrows__BaN-G:after{content:\"▲\";font-size:11px;position:absolute;right:0;top:calc(50% - 12px)}.table-module_sorting-arrows__BaN-G:before{bottom:calc(50% - 12px);content:\"▼\";font-size:11px;position:absolute;right:0}.table-module_td-span__XHo6k{cursor:pointer;display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}";
 styleInject(css_248z$e);
 
-const _ = require('lodash');
-const compereConfigs = () => {
-  let projectConfig = {};
-  let packageConfig = {};
-  try {
-    packageConfig = require('../tui.config.js');
-  } catch (e) {
-    try {
-      packageConfig = require('../../tui.config.js');
-    } catch (err) {
-      packageConfig = {};
-    }
-  }
-  try {
-    projectConfig = require('../../../../tui.config.js');
-  } catch (error) {
-    projectConfig = {};
-    // console.log(error, 'Project: if you want to use custom styles, create tui.config.js file in your project root');
-  }
-
-  return _.merge(packageConfig, projectConfig);
-};
-
 ({
   dataBody: PropTypes__default["default"].array,
   dataHeader: PropTypes__default["default"].array,
@@ -451,6 +485,8 @@ const Modal = ({
   headerSize,
   imageHeight,
   headerColor,
+  borderStyle,
+  borderWidth,
   outsideClose,
   headerWeight,
   headerHeight,
@@ -537,39 +573,38 @@ const Modal = ({
     className: `${classProps} ${styles$b['animation__modal']}`,
     onClick: handleStopClosing,
     style: {
-      overflow: 'auto',
-      boxSizing: 'border-box',
       width: width ? width : configStyles.MODAL.width,
       height: height ? height : configStyles.MODAL.height,
+      position: 'relative',
+      display: 'grid',
+      overflow: 'hidden',
+      boxSizing: 'border-box',
+      gridTemplateRows: 'auto 10fr',
       borderRadius: radius ? radius : configStyles.MODAL.radius,
       maxWidth: mMaxWidth ? mMaxWidth : configStyles.MODAL.mMaxWidth,
       maxHeight: mMaxHeight ? mMaxHeight : configStyles.MODAL.mMaxHeight,
       minWidth: type === 'content' ? minWidth ? minWidth : configStyles.MODAL.minWidth : '',
-      padding: type === 'content' ? padding ? padding : configStyles.MODAL.padding : '10px',
       backgroundColor: backgroundColor ? backgroundColor : configStyles.MODAL.backgroundColor,
       minHeight: type === 'content' ? minHeight ? minHeight : configStyles.MODAL.minHeight : ''
     }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      position: 'relative',
-      width: '100%',
-      height: '100%'
-    }
   }, type === 'content' ? /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: '100%',
       display: 'flex',
       alignItems: 'center',
+      backgroundColor: '#FBFBFB',
+      boxSizing: 'border-box',
+      justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end',
       height: headerHeight ? headerHeight : configStyles.MODAL.headerHeight,
-      justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end'
+      padding: padding ? padding : configStyles.MODAL.padding
     }
   }, headerText && type === 'content' && /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
+      flex: '1',
       overflow: 'hidden',
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis',
       margin: '0px 16px 0px 0px',
-      maxWidth: 'calc(100% - 30px)',
       fontSize: headerSize ? headerSize : configStyles.MODAL.headerSize,
       color: headerColor ? headerColor : configStyles.MODAL.headerColor,
       fontWeight: headerWeight ? headerWeight : configStyles.MODAL.headerWeight
@@ -592,15 +627,21 @@ const Modal = ({
       border: 'none',
       outline: 'none',
       cursor: 'pointer',
+      zIndex: '1',
       backgroundColor: 'transparent'
     }
   }, /*#__PURE__*/React__default["default"].createElement(SvgCloseSlide, null)), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
+      position: 'relative',
+      width: '100%',
+      height: '100%',
       alignItems: 'center',
       boxSizing: 'border-box',
       justifyContent: 'center',
-      paddingTop: type === 'content' ? '10px' : '0px'
+      overflow: 'auto',
+      borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth,
+      borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle
     }
   }, type === 'content' ? children ? children : '' : /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
@@ -654,7 +695,7 @@ const Modal = ({
       top: 'calc(50% - 12px)',
       backgroundColor: 'transparent'
     }
-  }, /*#__PURE__*/React__default["default"].createElement(SvgNext, null)))))))));
+  }, /*#__PURE__*/React__default["default"].createElement(SvgNext, null))))))));
 };
 Modal.propTypes = {
   data: PropTypes__default["default"].array,
@@ -675,6 +716,8 @@ Modal.propTypes = {
   imageWidth: PropTypes__default["default"].string,
   headerSize: PropTypes__default["default"].string,
   outsideClose: PropTypes__default["default"].bool,
+  borderStyle: PropTypes__default["default"].string,
+  borderWidth: PropTypes__default["default"].string,
   headerColor: PropTypes__default["default"].string,
   imageHeight: PropTypes__default["default"].string,
   headerWeight: PropTypes__default["default"].string,
@@ -782,7 +825,7 @@ const Input = ({
   const handleChange = event => {
     const currentValue = event.target.value;
     let prevValue = innerValue;
-    setInnerValue(currentValue);
+    setInnerValue(() => currentValue);
     if (change) {
       change(currentValue);
     }
@@ -810,9 +853,10 @@ const Input = ({
     if (type === 'number') {
       const regNum = /^\d+(\.)?(\d+)?$/;
       if (!regNum.test(currentValue)) {
-        setInnerValue(prevValue);
+        const newStr = currentValue.replace(/[^\d+]/g, '');
+        setInnerValue(newStr);
         if (change) {
-          change(prevValue);
+          change(newStr);
         }
       }
       if (minNumSize && currentValue < minNumSize) {
@@ -837,6 +881,15 @@ const Input = ({
             change(`${int}.${float.substr(0, floatToFix)}`);
           }
         }
+      } else if (floatToFix === 0) {
+        const floatNumParts = typeof currentValue === 'string' ? currentValue.split('.') : currentValue;
+        const int = floatNumParts[0];
+        if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
+          setInnerValue(`${int}`);
+          if (change) {
+            change(`${int}`);
+          }
+        }
       }
       if (currentValue === '') {
         setInnerValue('');
@@ -896,9 +949,10 @@ const Input = ({
         if (type === 'number') {
           const regNum = /^\d+(\.)?(\d+)?$/;
           if (!regNum.test(value)) {
-            setInnerValue('');
+            const newStr = value.replace(/[^\d+]/g, '');
+            setInnerValue(newStr);
             if (change) {
-              change('');
+              change(newStr);
             }
           }
           if (minNumSize && value < minNumSize) {
@@ -4237,6 +4291,7 @@ NewAutocomplete.defaultProps = {
 exports.Autocomplate = Autocomplate;
 exports.Button = Button;
 exports.Captcha = Captcha;
+exports.Chart = Chart;
 exports.Checkbox = Checkbox;
 exports.File = File;
 exports.Input = Input;

package/package.json

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

package/src/components/chart/chart.stories.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { Chart } from './index';
+
+export default {
+  component: Chart,
+  title: "Components/Chart",
+};
+
+const Template = (args) => {
+    return <Chart width={500} height={200} {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  
+};

package/src/components/chart/index.js

@@ -0,0 +1,42 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { compereConfigs } from './../../utils';
+
+import styles from "./chart.module.css";
+
+export const Chart = ({
+    width,
+    height
+}) => {
+    const configStyles = compereConfigs();
+    useEffect(() => {
+        const canvas = document.getElementById('myChart');
+        // const canvas = canvasRef.current;
+        const ctx = canvas.getContext('2d');
+
+        const data = [10, 20, 30, 15, 25];
+        const barWidth = 40;
+        const chartHeight = 200;
+
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        data.forEach((value, index) => {
+            const x = index * (barWidth + 10);
+            const y = chartHeight - value;
+
+            ctx.fillStyle = 'blue';
+            ctx.fillRect(x, y, barWidth, value);
+        });
+
+    }, []);
+
+
+    return (
+        <canvas id='myChart' width={width} height={height}></canvas>
+    );
+};
+
+Chart.propTypes = {
+    width: PropTypes.number,
+    height: PropTypes.number,
+};

package/src/components/input/index.js

@@ -108,7 +108,7 @@ export const Input = ({
 
         let prevValue = innerValue;
         
-        setInnerValue(currentValue);
+        setInnerValue(() => currentValue);
         if (change) {
             change(currentValue);
         }
@@ -138,9 +138,10 @@ export const Input = ({
         if (type === 'number') {
             const regNum = /^\d+(\.)?(\d+)?$/;
             if (!regNum.test(currentValue)) {
-                setInnerValue(prevValue);
+                const newStr = currentValue.replace(/[^\d+]/g, '');
+                setInnerValue(newStr);
                 if (change) {
-                    change(prevValue);
+                    change(newStr);
                 }
             }
             if (minNumSize && currentValue < minNumSize) {
@@ -165,8 +166,18 @@ export const Input = ({
                     if (change) {
                         change(`${int}.${float.substr(0, floatToFix)}`);
                     }
-                }   
+                } 
+            } else if (floatToFix === 0) {
+                const floatNumParts = typeof currentValue === 'string' ? currentValue.split('.') : currentValue;
+                const int = floatNumParts[0];
+                if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
+                    setInnerValue(`${int}`);
+                    if (change) {
+                        change(`${int}`);
+                    }
+                }
             }
+
             if (currentValue === '') {
                 setInnerValue('');
                 if (change) {
@@ -233,9 +244,10 @@ export const Input = ({
                 if (type === 'number') {
                     const regNum = /^\d+(\.)?(\d+)?$/;
                     if (!regNum.test(value)) {
-                        setInnerValue('');
+                        const newStr = value.replace(/[^\d+]/g, '');
+                        setInnerValue(newStr);
                         if (change) {
-                            change('');
+                            change(newStr);
                         }
                     }
                     if (minNumSize && value < minNumSize) {

package/src/components/modal/index.js

@@ -31,6 +31,8 @@ export const Modal = ({
     headerSize,
     imageHeight,
     headerColor,
+    borderStyle,
+    borderWidth,
     outsideClose,
     headerWeight,
     headerHeight,
@@ -128,26 +130,21 @@ export const Modal = ({
                     className={`${classProps} ${styles['animation__modal']}`}
                     onClick={handleStopClosing}
                     style={{
-                        overflow: 'auto',
-                        boxSizing: 'border-box',
                         width: width ? width : configStyles.MODAL.width,
                         height: height ? height : configStyles.MODAL.height,
+                        position: 'relative',
+                        display: 'grid',
+                        overflow: 'hidden',
+                        boxSizing: 'border-box',
+                        gridTemplateRows: 'auto 10fr',
                         borderRadius: radius ? radius : configStyles.MODAL.radius,
                         maxWidth: mMaxWidth ? mMaxWidth : configStyles.MODAL.mMaxWidth,
                         maxHeight: mMaxHeight ? mMaxHeight : configStyles.MODAL.mMaxHeight,
                         minWidth: type === 'content' ? minWidth ? minWidth : configStyles.MODAL.minWidth : '',
-                        padding: type === 'content' ? padding ? padding : configStyles.MODAL.padding : '10px',
                         backgroundColor: backgroundColor ? backgroundColor : configStyles.MODAL.backgroundColor,
                         minHeight: type === 'content' ? minHeight ? minHeight : configStyles.MODAL.minHeight : '',
                     }}
                 >
-                    <div
-                        style={{
-                            position: 'relative',
-                            width: '100%',
-                            height: '100%'
-                        }}
-                    >
                         {
                             type === 'content'
                             ? 
@@ -156,18 +153,21 @@ export const Modal = ({
                                         width: '100%',
                                         display: 'flex',
                                         alignItems: 'center',
-                                        height: headerHeight ? headerHeight : configStyles.MODAL.headerHeight,
+                                        backgroundColor: '#FBFBFB',
+                                        boxSizing: 'border-box',
                                         justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end',
+                                        height: headerHeight ? headerHeight : configStyles.MODAL.headerHeight,
+                                        padding: padding ? padding : configStyles.MODAL.padding
                                     }}
                                 >
                                     {
                                         headerText && type === 'content' && <p
                                             style={{
+                                                flex: '1',
                                                 overflow: 'hidden',
                                                 whiteSpace: 'nowrap',
                                                 textOverflow: 'ellipsis',
                                                 margin: '0px 16px 0px 0px',
-                                                maxWidth: 'calc(100% - 30px)',
                                                 fontSize: headerSize ? headerSize : configStyles.MODAL.headerSize,
                                                 color: headerColor ? headerColor : configStyles.MODAL.headerColor,
                                                 fontWeight: headerWeight ? headerWeight : configStyles.MODAL.headerWeight
@@ -197,6 +197,7 @@ export const Modal = ({
                                         border: 'none',
                                         outline: 'none',
                                         cursor: 'pointer',
+                                        zIndex: '1',
                                         backgroundColor: 'transparent'
                                     }}
                                 >
@@ -207,10 +208,15 @@ export const Modal = ({
                         <div
                             style={{
                                 display: 'flex',
+                                position: 'relative',
+                                width: '100%',
+                                height: '100%',
                                 alignItems: 'center',
                                 boxSizing: 'border-box',
                                 justifyContent: 'center',
-                                paddingTop: type === 'content' ? '10px' : '0px'
+                                overflow: 'auto',
+                                borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth,
+                                borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle
                             }}
                         >
                             {
@@ -290,7 +296,7 @@ export const Modal = ({
                                     </div>
                             }
                         </div>
-                    </div>
+                    {/* </div> */}
                 </div>
             </div>
         </div>
@@ -316,6 +322,8 @@ Modal.propTypes = {
     imageWidth: PropTypes.string,
     headerSize: PropTypes.string,
     outsideClose: PropTypes.bool,
+    borderStyle: PropTypes.string,
+    borderWidth: PropTypes.string,
     headerColor: PropTypes.string,
     imageHeight: PropTypes.string,
     headerWeight: PropTypes.string,

package/src/index.js

@@ -1,4 +1,5 @@
 export * from './components/file';
+export * from './components/chart';
 export * from './components/table';
 export * from './components/modal';
 export * from './components/input';

package/src/stories/configuration.stories.mdx

@@ -599,5 +599,7 @@ import StackAlt from './assets/stackalt.svg';
   backgroundColor: 'white',                             // for modal background color
   padding: '10px 20px 20px',                            // for modal padding
   layerBackgroundColor: 'rgba(0,0,0,0.4)',              // for modal parent layer background color
+  borderWidth: '20px',                                  // for modal padding from border transparent
+  borderStyle: 'solid',                                 // for modal border style
 }
-```
+```

package/tui.config.js

@@ -388,13 +388,15 @@ module.exports = {
         imageWidth: '600px',                                  // for modal image width on images mode
         headerWeight: '600',                                  // for modal header font weight
         imageHeight: '300px',                                 // for modal image height on images mode
-        headerHeight: '27px',                                 // for modal header height
+        headerHeight: '30px',                                 // for modal header height
         width: 'fit-content',                                 // for modal width
         height: 'fit-content',                                // for modal width
         headerColor: '#00236a',                               // for modal header color
         backgroundColor: 'white',                             // for modal background color
-        padding: '10px 20px 20px',                            // for modal padding
+        padding: '20px 20px 20px',                            // for modal padding
         layerBackgroundColor: 'rgba(0,0,0,0.4)',              // for modal parent layer background color
+        borderWidth: '20px',                                  // for modal padding from border transparent
+        borderStyle: 'solid',                                 // for modal border style
     },
     // default properties for <Table /> component
     TABLE: {