@xaypay/tui 0.1.4 → 0.1.6

package/dist/index.es.js

@@ -2768,10 +2768,10 @@ const Modal = ({
       display: 'flex',
       alignItems: 'center',
       boxSizing: 'border-box',
-      backgroundColor: '#FBFBFB',
       padding: padding ?? merge.MODAL.padding,
       height: headerHeight ?? merge.MODAL.header.height,
-      justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end'
+      justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end',
+      backgroundColor: closeAreaBackgroundColor ?? merge.MODAL.closeAreaBackgroundColor
     }
   }, headerText && type === 'content' && /*#__PURE__*/React__default.createElement("p", {
     style: {
@@ -3078,6 +3078,7 @@ const TextInput = ({
   inputChange,
   maxLength,
   inpStyles,
+  disabled,
   inpAttributes
 }) => {
   const [innerValue, setInnerValue] = useState('');
@@ -3105,6 +3106,7 @@ const TextInput = ({
   return /*#__PURE__*/React__default.createElement("input", {
     type: "text",
     value: innerValue,
+    disabled: disabled,
     onInput: handleChange,
     name: inpAttributes?.iName,
     placeholder: inpAttributes?.placeholder,
@@ -3125,6 +3127,7 @@ const PassInput = ({
   inputChange,
   maxLength,
   inpAttributes,
+  disabled,
   inpStyles
 }) => {
   const [innerShow, setInnerShow] = useState('');
@@ -3156,6 +3159,7 @@ const PassInput = ({
   return /*#__PURE__*/React__default.createElement("input", {
     type: innerShow ? 'text' : 'password',
     value: innerValue,
+    disabled: disabled,
     onInput: handleChange,
     name: inpAttributes?.iName,
     placeholder: inpAttributes?.placeholder,
@@ -3174,6 +3178,7 @@ const NumberInput = ({
   value,
   float,
   radius,
+  disabled,
   maxLength,
   inpStyles,
   minNumSize,
@@ -3218,6 +3223,7 @@ const NumberInput = ({
   return /*#__PURE__*/React__default.createElement("input", {
     type: "text",
     value: innerValue,
+    disabled: disabled,
     name: inpAttributes?.iName,
     placeholder: inpAttributes?.placeholder,
     autoComplete: inpAttributes?.autoComplete,
@@ -3419,9 +3425,10 @@ const Input = ({
     telBorderRightColorHover: telBorderRightColorHover ?? merge.INPUT.tel.borderRight.colors.hover
   }) : type === 'number' ? /*#__PURE__*/React__default.createElement(NumberInput, {
     value: value,
-    inputChange: change,
     dots: withoutDot,
     float: floatToFix,
+    disabled: disabled,
+    inputChange: change,
     maxLength: maxLength,
     inpStyles: inpStyles,
     inpAttributes: inpAttributes,
@@ -3432,7 +3439,6 @@ const Input = ({
     show: show,
     type: type,
     value: value,
-    isHover: isHover,
     disabled: disabled,
     inputChange: change,
     maxLength: maxLength,
@@ -3441,6 +3447,7 @@ const Input = ({
     radius: radius ?? merge.INPUT.radius
   }) : /*#__PURE__*/React__default.createElement(TextInput, {
     value: value,
+    disabled: disabled,
     inputChange: change,
     inpStyles: inpStyles,
     maxLength: maxLength,
@@ -5019,7 +5026,7 @@ const Textarea = ({
       alert('Please add value prop on Textarea component');
     }
     if (errorMessage) {
-      value === '' ? setError(errorMessage) : setError('');
+      setError(errorMessage);
     } else {
       setError('');
     }
@@ -5628,12 +5635,10 @@ const Autocomplete = ({
     value.length > 0 ? setShow(true) : setShow(false);
     setInnerError('');
     setInnerValue(value);
-    if (value.length >= searchCount) {
-      change({
-        name: value,
-        id: currentId
-      });
-    }
+    change({
+      name: value,
+      id: currentId
+    });
   };
   const handleClick = selectedValue => {
     setShow(false);
@@ -5735,7 +5740,10 @@ const Autocomplete = ({
     setInnerError(errorMessage);
   }, [errorMessage]);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: classProps
+    className: classProps,
+    style: {
+      width: contentTopMaxWidth ?? merge.AUTOCOMPLETE.maxWidth
+    }
   }, label ? /*#__PURE__*/React__default.createElement("label", {
     style: {
       color: labelColor ?? merge.AUTOCOMPLETE.label.color,
@@ -5753,7 +5761,7 @@ const Autocomplete = ({
     style: {
       display: contentDisplay ?? merge.AUTOCOMPLETE.parent.display,
       position: contentPosition ?? merge.AUTOCOMPLETE.parent.position,
-      maxWidth: contentTopMaxWidth ?? merge.AUTOCOMPLETE.maxWidth,
+      width: '100%',
       flexDirection: contentDirection ?? merge.AUTOCOMPLETE.parent.direction
     }
   }, /*#__PURE__*/React__default.createElement("input", _extends({

package/dist/index.js

@@ -2798,10 +2798,10 @@ const Modal = ({
       display: 'flex',
       alignItems: 'center',
       boxSizing: 'border-box',
-      backgroundColor: '#FBFBFB',
       padding: padding ?? merge.MODAL.padding,
       height: headerHeight ?? merge.MODAL.header.height,
-      justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end'
+      justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end',
+      backgroundColor: closeAreaBackgroundColor ?? merge.MODAL.closeAreaBackgroundColor
     }
   }, headerText && type === 'content' && /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
@@ -3108,6 +3108,7 @@ const TextInput = ({
   inputChange,
   maxLength,
   inpStyles,
+  disabled,
   inpAttributes
 }) => {
   const [innerValue, setInnerValue] = React.useState('');
@@ -3135,6 +3136,7 @@ const TextInput = ({
   return /*#__PURE__*/React__default["default"].createElement("input", {
     type: "text",
     value: innerValue,
+    disabled: disabled,
     onInput: handleChange,
     name: inpAttributes?.iName,
     placeholder: inpAttributes?.placeholder,
@@ -3155,6 +3157,7 @@ const PassInput = ({
   inputChange,
   maxLength,
   inpAttributes,
+  disabled,
   inpStyles
 }) => {
   const [innerShow, setInnerShow] = React.useState('');
@@ -3186,6 +3189,7 @@ const PassInput = ({
   return /*#__PURE__*/React__default["default"].createElement("input", {
     type: innerShow ? 'text' : 'password',
     value: innerValue,
+    disabled: disabled,
     onInput: handleChange,
     name: inpAttributes?.iName,
     placeholder: inpAttributes?.placeholder,
@@ -3204,6 +3208,7 @@ const NumberInput = ({
   value,
   float,
   radius,
+  disabled,
   maxLength,
   inpStyles,
   minNumSize,
@@ -3248,6 +3253,7 @@ const NumberInput = ({
   return /*#__PURE__*/React__default["default"].createElement("input", {
     type: "text",
     value: innerValue,
+    disabled: disabled,
     name: inpAttributes?.iName,
     placeholder: inpAttributes?.placeholder,
     autoComplete: inpAttributes?.autoComplete,
@@ -3449,9 +3455,10 @@ const Input = ({
     telBorderRightColorHover: telBorderRightColorHover ?? merge.INPUT.tel.borderRight.colors.hover
   }) : type === 'number' ? /*#__PURE__*/React__default["default"].createElement(NumberInput, {
     value: value,
-    inputChange: change,
     dots: withoutDot,
     float: floatToFix,
+    disabled: disabled,
+    inputChange: change,
     maxLength: maxLength,
     inpStyles: inpStyles,
     inpAttributes: inpAttributes,
@@ -3462,7 +3469,6 @@ const Input = ({
     show: show,
     type: type,
     value: value,
-    isHover: isHover,
     disabled: disabled,
     inputChange: change,
     maxLength: maxLength,
@@ -3471,6 +3477,7 @@ const Input = ({
     radius: radius ?? merge.INPUT.radius
   }) : /*#__PURE__*/React__default["default"].createElement(TextInput, {
     value: value,
+    disabled: disabled,
     inputChange: change,
     inpStyles: inpStyles,
     maxLength: maxLength,
@@ -5049,7 +5056,7 @@ const Textarea = ({
       alert('Please add value prop on Textarea component');
     }
     if (errorMessage) {
-      value === '' ? setError(errorMessage) : setError('');
+      setError(errorMessage);
     } else {
       setError('');
     }
@@ -5658,12 +5665,10 @@ const Autocomplete = ({
     value.length > 0 ? setShow(true) : setShow(false);
     setInnerError('');
     setInnerValue(value);
-    if (value.length >= searchCount) {
-      change({
-        name: value,
-        id: currentId
-      });
-    }
+    change({
+      name: value,
+      id: currentId
+    });
   };
   const handleClick = selectedValue => {
     setShow(false);
@@ -5765,7 +5770,10 @@ const Autocomplete = ({
     setInnerError(errorMessage);
   }, [errorMessage]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classProps
+    className: classProps,
+    style: {
+      width: contentTopMaxWidth ?? merge.AUTOCOMPLETE.maxWidth
+    }
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
     style: {
       color: labelColor ?? merge.AUTOCOMPLETE.label.color,
@@ -5783,7 +5791,7 @@ const Autocomplete = ({
     style: {
       display: contentDisplay ?? merge.AUTOCOMPLETE.parent.display,
       position: contentPosition ?? merge.AUTOCOMPLETE.parent.position,
-      maxWidth: contentTopMaxWidth ?? merge.AUTOCOMPLETE.maxWidth,
+      width: '100%',
       flexDirection: contentDirection ?? merge.AUTOCOMPLETE.parent.direction
     }
   }, /*#__PURE__*/React__default["default"].createElement("input", _extends({

package/package.json

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

package/tui.config.js

@@ -91,7 +91,7 @@ export default {
 
         colors: {
             background: 'white',
-            backgroundDisable: presetColors.extraLight,
+            backgroundDisable: presetColors.secondary,
         },
         
         font: {...fontObject},
@@ -309,7 +309,7 @@ export default {
             colors: {
                 hover: '#373538',
                 background: presetColors.extraLight,
-                backgroundDisable: presetColors.extraLight,
+                backgroundDisable: presetColors.secondary,
             },
 
             font: {...fontObject}
@@ -440,7 +440,7 @@ export default {
         },
 
         colors: {
-            backgroundDisable: presetColors.extraLight,
+            backgroundDisable: presetColors.secondary,
         },
 
         label: {