@xaypay/tui 0.0.54 → 0.0.55

package/dist/index.js

@@ -5,12 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var PropTypes = require('prop-types');
 var classnames = require('classnames');
+var styled = require('styled-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -400,18 +402,47 @@ const Typography = ({
   size,
   color,
   weight,
-  onClick,
+  radius,
+  border,
+  cursor,
+  margin,
+  padding,
   variant,
+  bgColor,
+  onClick,
   children,
+  textAlign,
+  fontStyle,
   className,
+  textShadow,
+  lineHeight,
+  colorHover,
+  fontFamily,
+  textTransform,
+  textDecoration,
   ...props
 }) => {
   const configStyles = compereConfigs();
   const classProps = classnames__default["default"](className);
+  const [isHover, setIsHover] = React.useState(false);
   const [validVariant, setValidVariant] = React.useState(false);
   const [style, setStyle] = React.useState({
-    fontSize: size ? size : configStyles.TYPOGRAPHY['fSize' + variant],
-    fontWeight: weight ? weight : configStyles.TYPOGRAPHY['fWeight' + variant]
+    border: border ? border : configStyles.TYPOGRAPHY.border,
+    cursor: cursor ? cursor : configStyles.TYPOGRAPHY.cursor,
+    borderRadius: radius ? radius : configStyles.TYPOGRAPHY.radius,
+    fontSize: size ? size : configStyles.TYPOGRAPHY['size' + variant],
+    margin: margin ? margin : configStyles.TYPOGRAPHY['margin' + variant],
+    fontWeight: weight ? weight : configStyles.TYPOGRAPHY['weight' + variant],
+    padding: padding ? padding : configStyles.TYPOGRAPHY['padding' + variant],
+    textShadow: textShadow ? textShadow : configStyles.TYPOGRAPHY.textShadow,
+    textAlign: textAlign ? textAlign : configStyles.TYPOGRAPHY['textAlign' + variant],
+    backgroundColor: bgColor ? bgColor : configStyles.TYPOGRAPHY['bgColor' + variant],
+    fontStyle: fontStyle ? fontStyle : configStyles.TYPOGRAPHY['fontStyle' + variant],
+    lineHeight: lineHeight ? lineHeight : configStyles.TYPOGRAPHY['lineHeight' + variant],
+    fontFamily: fontFamily ? fontFamily : configStyles.TYPOGRAPHY['fontFamily' + variant],
+    textTransform: textTransform ? textTransform : configStyles.TYPOGRAPHY['textTransform' + variant],
+    textDecoration: textDecoration ? textDecoration : configStyles.TYPOGRAPHY['textDecoration' + variant],
+    color: isHover ? colorHover ? colorHover : configStyles.TYPOGRAPHY['colorHover' + variant] : color ? color : configStyles.TYPOGRAPHY['color' + variant]
   });
   React.useEffect(() => {
     if (!Object.values(TypographyType).includes(variant)) {
@@ -428,20 +459,42 @@ const Typography = ({
       });
     }
   }, [color]);
+  const handleMouseEnter = () => {
+    setIsHover(true);
+  };
+  const handleMouseLeave = () => {
+    setIsHover(false);
+  };
   const tagT = /*#__PURE__*/React__default["default"].createElement(variant, {
     style,
     ...props,
     className: classProps,
-    onClick: onClick ? onClick : _ => _
+    onClick: onClick ? onClick : _ => _,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
   }, [children]);
   return validVariant ? 'Please set Typography valid variant' : tagT;
 };
 Typography.propTypes = {
   size: PropTypes__default["default"].string,
   color: PropTypes__default["default"].string,
-  weight: PropTypes__default["default"].string,
   onClick: PropTypes__default["default"].func,
+  weight: PropTypes__default["default"].string,
+  border: PropTypes__default["default"].string,
+  cursor: PropTypes__default["default"].string,
+  margin: PropTypes__default["default"].string,
+  radius: PropTypes__default["default"].string,
+  bgColor: PropTypes__default["default"].string,
+  padding: PropTypes__default["default"].string,
+  textAlign: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
+  fontStyle: PropTypes__default["default"].string,
+  lineHeight: PropTypes__default["default"].string,
+  textShadow: PropTypes__default["default"].string,
+  fontFamily: PropTypes__default["default"].string,
+  colorHover: PropTypes__default["default"].string,
+  textTransform: PropTypes__default["default"].string,
+  textDecoration: PropTypes__default["default"].string,
   variant: PropTypes__default["default"].oneOf(Object.values(TypographyType)).isRequired
 };
 
@@ -515,16 +568,18 @@ Modal.propTypes = {
   data: PropTypes__default["default"].array
 };
 
-var css_248z$7 = ".input-module_input-wrap__NunrE{width:100%}.input-module_input-content__kP7lZ{display:flex;width:100%}.input-module_input-title__giCsY{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px}.input-module_inputErrorMessages__hx490{color:#e00;font-size:14px;line-height:19px}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}";
-var styles$7 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","input-title":"input-module_input-title__giCsY","inputErrorMessages":"input-module_inputErrorMessages__hx490"};
+var css_248z$7 = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
+var styles$7 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k"};
 styleInject(css_248z$7);
 
 const InputTypes = {
+  TEL: 'tel',
   TEXT: "text",
   PASSWORD: "password"
 };
 const Input = ({
   type,
+  size,
   name,
   color,
   label,
@@ -532,25 +587,39 @@ const Input = ({
   width,
   height,
   radius,
-  border,
   padding,
   tooltip,
-  bgColor,
   leftIcon,
-  fontSize,
   required,
   disabled,
   onChange,
+  transform,
   iconWidth,
   rightIcon,
   className,
   boxSizing,
   boxShadow,
-  errorMesage,
-  borderColor,
+  errorLeft,
+  errorSize,
+  labelSize,
+  labelColor,
+  errorColor,
   placeholder,
+  errorZindex,
+  errorBottom,
+  labelWeight,
+  errorMessage,
   autoComplete,
+  labelDisplay,
+  errorPosition,
   boxShadowHover,
+  errorClassName,
+  errorAnimation,
+  errorLineHeight,
+  labelLineHeight,
+  backgroundColor,
+  labelMarginBottom,
+  errorAnimationDuration,
   ...props
 }) => {
   const [show, setShow] = React.useState(false);
@@ -558,7 +627,7 @@ const Input = ({
   const [tooltipStatus, setTooltipStatus] = React.useState(false);
   const random = Math.floor(Math.random() * 1000 + 1);
   const configStyles = compereConfigs();
-  const classProps = classnames__default["default"](className);
+  const classProps = classnames__default["default"](className ? className : configStyles.INPUT.className);
   const handleChange = event => {
     onChange ? onChange(event.target.value) : _ => _;
   };
@@ -568,10 +637,34 @@ const Input = ({
   const handleMouseLeave = () => {
     setIsHover(false);
   };
+  const errorShow = styled.keyframes`
+        100% {
+            bottom: '-20px';
+            transform: scale3d(1,1,1);
+            -webkit-transform: scale3d(1,1,1);
+            -moz-transform: scale3d(1,1,1);
+            -ms-transform: scale3d(1,1,1);
+            -o-transform: scale3d(1,1,1);
+        }
+    `;
+  const animation = _ => styled.css`
+        ${errorShow} ${errorAnimationDuration ? errorAnimationDuration : configStyles.INPUT.errorAnimationDuration} forwards
+    `;
+  const P = styled__default["default"].p`
+        animation: ${errorAnimation ? animation : 'none'};
+    `;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$7["input-wrap"]}`
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
-    className: `${styles$7["input-title"]}`
+    className: `${styles$7["input-title"]}`,
+    style: {
+      color: labelColor ? labelColor : configStyles.INPUT.labelColor,
+      fontSize: labelSize ? labelSize : configStyles.INPUT.labelSize,
+      display: labelDisplay ? labelDisplay : configStyles.INPUT.labelDisplay,
+      fontWeight: labelWeight ? labelWeight : configStyles.INPUT.labelWeight,
+      lineHeight: labelLineHeight ? labelLineHeight : configStyles.INPUT.labelLineHeight,
+      marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.INPUT.labelMarginBottom
+    }
   }, label, " ", required && /*#__PURE__*/React__default["default"].createElement("sup", {
     style: {
       color: "#ee0000"
@@ -580,11 +673,11 @@ const Input = ({
     className: `${styles$7["input-content"]}`,
     style: {
       borderRadius: radius ? radius : configStyles.INPUT.radius,
-      boxShadow: isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
+      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
     },
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }, leftIcon && leftIcon.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, leftIcon && leftIcon.length > 0 && type != 'tel' ? /*#__PURE__*/React__default["default"].createElement("div", {
     onMouseUp: type === 'password' ? _ => setShow(false) : _ => _,
     onMouseDown: type === 'password' ? _ => setShow(true) : _ => _,
     onMouseOut: type === 'password' ? _ => setShow(false) : _ => _,
@@ -596,9 +689,21 @@ const Input = ({
       boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
       borderTopLeftRadius: radius ? radius : configStyles.INPUT.radius,
       borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
-      backgroundColor: disabled ? '#FBFBFB' : bgColor ? bgColor : configStyles.INPUT.bgColor
+      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
+    }
+  }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', type === 'tel' ? /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      pointerEvents: disabled ? 'none' : 'auto',
+      fontSize: size ? size : configStyles.INPUT.size,
+      height: height ? height : configStyles.INPUT.height,
+      padding: padding ? padding : configStyles.INPUT.padding,
+      boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
+      borderTopLeftRadius: radius ? radius : configStyles.INPUT.radius,
+      borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
+      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
+      color: errorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color
     }
-  }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', /*#__PURE__*/React__default["default"].createElement("input", _extends({}, props, {
+  }, "+374") : '', /*#__PURE__*/React__default["default"].createElement("input", _extends({}, props, {
     value: value,
     className: classProps,
     onChange: handleChange,
@@ -612,13 +717,13 @@ const Input = ({
       outline: 'none',
       pointerEvents: disabled ? 'none' : 'auto',
       width: width ? width : configStyles.INPUT.width,
+      fontSize: size ? size : configStyles.INPUT.size,
       height: height ? height : configStyles.INPUT.height,
       padding: padding ? padding : configStyles.INPUT.padding,
       borderRadius: radius ? radius : configStyles.INPUT.radius,
-      fontSize: fontSize ? fontSize : configStyles.INPUT.fontSize,
       boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
-      color: errorMesage ? 'rgba(238, 0, 0, 1)' : color ? color : configStyles.INPUT.color,
-      backgroundColor: disabled ? '#FBFBFB' : bgColor ? bgColor : configStyles.INPUT.bgColor
+      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
+      color: errorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color
     }
   })), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
     onMouseUp: type === 'password' ? _ => setShow(false) : _ => _,
@@ -626,21 +731,30 @@ const Input = ({
     onMouseOut: type === 'password' ? _ => setShow(false) : _ => _,
     style: {
       cursor: type === 'password' ? 'pointer' : 'default',
-      border: border ? border : configStyles.INPUT.border,
       height: height ? height : configStyles.INPUT.height,
       padding: padding ? padding : configStyles.INPUT.padding,
       width: iconWidth ? iconWidth : configStyles.INPUT.iconWidth,
       boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
       borderTopRightRadius: radius ? radius : configStyles.INPUT.radius,
       borderBottomRightRadius: radius ? radius : configStyles.INPUT.radius,
-      backgroundColor: disabled ? '#FBFBFB' : bgColor ? bgColor : configStyles.INPUT.bgColor
+      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
   }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? /*#__PURE__*/React__default["default"].createElement(Typography, {
     variant: "p",
     onClick: () => setTooltipStatus(!tooltipStatus)
-  }, "\u24D8") : null, tooltipStatus ? /*#__PURE__*/React__default["default"].createElement("p", null, tooltip) : null, errorMesage ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: styles$7.inputErrorMessages
-  }, errorMesage) : "");
+  }, "\u24D8") : null, tooltipStatus ? /*#__PURE__*/React__default["default"].createElement("p", null, tooltip) : null, errorMessage ? /*#__PURE__*/React__default["default"].createElement(P, {
+    style: {
+      left: errorLeft ? errorLeft : configStyles.INPUT.errorLeft,
+      color: errorColor ? errorColor : configStyles.INPUT.errorColor,
+      fontSize: errorSize ? errorSize : configStyles.INPUT.errorSize,
+      bottom: errorBottom ? errorBottom : configStyles.INPUT.errorBottom,
+      zIndex: errorZindex ? errorZindex : configStyles.INPUT.errorZindex,
+      position: errorPosition ? errorPosition : configStyles.INPUT.errorPosition,
+      lineHeight: errorLineHeight ? errorLineHeight : configStyles.INPUT.errorLineHeight,
+      transform: !errorAnimation ? 'scale3d(1,1,1)' : transform ? transform : configStyles.INPUT.transform
+    },
+    className: errorClassName ? errorClassName : configStyles.INPUT.errorClassName
+  }, errorMessage) : '');
 };
 Input.propTypes = {
   name: PropTypes__default["default"].string,
@@ -653,17 +767,35 @@ Input.propTypes = {
   disabled: PropTypes__default["default"].bool,
   height: PropTypes__default["default"].string,
   radius: PropTypes__default["default"].string,
-  bgColor: PropTypes__default["default"].string,
+  padding: PropTypes__default["default"].string,
   fontSize: PropTypes__default["default"].string,
   tooltip: PropTypes__default["default"].element,
+  transform: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
   iconWidth: PropTypes__default["default"].string,
   boxSizing: PropTypes__default["default"].string,
   boxShadow: PropTypes__default["default"].string,
+  errorSize: PropTypes__default["default"].string,
+  errorLeft: PropTypes__default["default"].string,
+  labelSize: PropTypes__default["default"].string,
+  errorColor: PropTypes__default["default"].string,
+  labelColor: PropTypes__default["default"].string,
   placeholder: PropTypes__default["default"].string,
-  errorMesage: PropTypes__default["default"].string,
+  errorZindex: PropTypes__default["default"].string,
+  errorBottom: PropTypes__default["default"].string,
+  labelWeight: PropTypes__default["default"].string,
+  errorMessage: PropTypes__default["default"].string,
   autoComplete: PropTypes__default["default"].string,
+  errorAnimation: PropTypes__default["default"].bool,
+  labelDisplay: PropTypes__default["default"].string,
+  errorPosition: PropTypes__default["default"].string,
   boxShadowHover: PropTypes__default["default"].string,
+  errorClassName: PropTypes__default["default"].string,
+  backgroundColor: PropTypes__default["default"].string,
+  errorLineHeight: PropTypes__default["default"].string,
+  labelLineHeight: PropTypes__default["default"].string,
+  labelMarginBottom: PropTypes__default["default"].string,
+  errorAnimationDuration: PropTypes__default["default"].string,
   leftIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
   rightIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
   type: PropTypes__default["default"].oneOf(Object.values(InputTypes))
@@ -727,27 +859,30 @@ Radio.defaultProps = {
 };
 
 const Button = ({
+  size,
   type,
+  font,
   color,
   label,
   width,
   height,
   cursor,
+  weight,
   border,
+  radius,
   outline,
   padding,
+  bgColor,
   onClick,
-  fontSize,
   disabled,
   className,
   boxSizing,
   transition,
   contentWidth,
-  borderRadius,
-  backgroundColor,
-  disabledThemeColor,
-  disabledThemeBgColor,
-  disabledThemeLineColor,
+  disabledColor,
+  textTransform,
+  disabledBgColor,
+  disabledLineColor,
   ...props
 }) => {
   const [isHover, setIsHover] = React.useState(false);
@@ -766,18 +901,21 @@ const Button = ({
   };
   return /*#__PURE__*/React__default["default"].createElement("button", _extends({
     style: {
+      fontSize: size ? size : configStyles.BUTTON.size,
+      fontFamily: font ? font : configStyles.BUTTON.font,
       height: height ? height : configStyles.BUTTON.height,
+      fontWeight: weight ? weight : configStyles.BUTTON.weight,
       padding: padding ? padding : configStyles.BUTTON.padding,
-      fontSize: fontSize ? fontSize : configStyles.BUTTON.fontSize,
+      borderRadius: radius ? radius : configStyles.BUTTON.radius,
       boxSizing: boxSizing ? boxSizing : configStyles.BUTTON.boxSizing,
       transition: transition ? transition : configStyles.BUTTON.transition,
       border: outline ? 'none' : border ? border : configStyles.BUTTON.border,
       width: contentWidth ? 'auto' : width ? width : configStyles.BUTTON.width,
-      borderRadius: borderRadius ? borderRadius : configStyles.BUTTON.borderRadius,
       cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.BUTTON.cursor,
-      backgroundColor: (outline || !outline) && disabled ? disabledThemeBgColor ? disabledThemeBgColor : configStyles.BUTTON.disabledThemeBgColor : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor : '#ffffff' : backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor,
-      boxShadow: outline ? disabled ? `inset 0 0 0 2px ${disabledThemeLineColor ? disabledThemeLineColor : configStyles.BUTTON.disabledThemeLineColor}` : `inset 0 0 0 2px ${backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor}` : 'none',
-      color: (outline || !outline) && disabled ? disabledThemeColor ? disabledThemeColor : configStyles.BUTTON.disabledThemeColor : outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor : color ? color : configStyles.BUTTON.color
+      textTransform: textTransform ? textTransform : configStyles.BUTTON.textTransform,
+      backgroundColor: (outline || !outline) && disabled ? disabledBgColor ? disabledBgColor : configStyles.BUTTON.disabledBgColor : outline && !disabled ? isHover ? bgColor ? bgColor : configStyles.BUTTON.bgColor : '#ffffff' : bgColor ? bgColor : configStyles.BUTTON.bgColor,
+      boxShadow: outline ? disabled ? `inset 0 0 0 2px ${disabledLineColor ? disabledLineColor : configStyles.BUTTON.disabledLineColor}` : `inset 0 0 0 2px ${bgColor ? bgColor : configStyles.BUTTON.bgColor}` : 'none',
+      color: (outline || !outline) && disabled ? disabledColor ? disabledColor : configStyles.BUTTON.disabledColor : outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : bgColor ? bgColor : configStyles.BUTTON.bgColor : color ? color : configStyles.BUTTON.color
     },
     type: type ? type : configStyles.BUTTON.type,
     disabled: disabled ? disabled : configStyles.BUTTON.disabled,
@@ -789,26 +927,29 @@ const Button = ({
 };
 Button.propTypes = {
   type: PropTypes__default["default"].string,
+  size: PropTypes__default["default"].string,
+  font: PropTypes__default["default"].string,
   color: PropTypes__default["default"].string,
   width: PropTypes__default["default"].string,
   outline: PropTypes__default["default"].bool,
   onClick: PropTypes__default["default"].func,
+  weight: PropTypes__default["default"].string,
   height: PropTypes__default["default"].string,
   cursor: PropTypes__default["default"].string,
   border: PropTypes__default["default"].string,
   disabled: PropTypes__default["default"].bool,
+  radius: PropTypes__default["default"].string,
   padding: PropTypes__default["default"].string,
-  fontSize: PropTypes__default["default"].string,
+  bgColor: PropTypes__default["default"].string,
   boxSizing: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
   transition: PropTypes__default["default"].string,
   contentWidth: PropTypes__default["default"].bool,
-  borderRadius: PropTypes__default["default"].string,
-  backgroundColor: PropTypes__default["default"].string,
+  textTransform: PropTypes__default["default"].string,
+  disabledColor: PropTypes__default["default"].string,
+  disabledBgColor: PropTypes__default["default"].string,
   label: PropTypes__default["default"].string.isRequired,
-  disabledThemeColor: PropTypes__default["default"].string,
-  disabledThemeBgColor: PropTypes__default["default"].string,
-  disabledThemeLineColor: PropTypes__default["default"].string
+  disabledLineColor: PropTypes__default["default"].string
 };
 
 var css_248z$5 = ".select-module_select-title__c8bR7{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}.select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{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}.select-module_select-content-top__Aw-fB.select-module_active__v2Dce{border-color:#00236a}.select-module_select-content-top__Aw-fB:hover{border-color:#3c393e}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;background:#fbfbfb;border-radius:6px;box-shadow:0 0 10px rgba(60,57,62,.08);left:0;max-height:0;max-width:400px;overflow:hidden;position:absolute;top:52px;width:100%;z-index:1}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes select-module_select-show__391hQ{to{max-height:400px}}.select-module_select-content-top-text__euajq{align-items:center;display:flex;flex:1;flex-direction:row;flex-wrap:nowrap}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>i{color:#3c393e;font-size:12px!important}.select-module_select-content-top-icon__MBrGK>i:not(:last-child){align-items:center;border-right:1px solid #eee;display:flex;height:22px;margin-right:8px;padding:0 8px}.select-module_select-content-bottom-row__eKq5L{align-items:center;background:#fff;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;font-size:16px;font-weight:500;line-height:22px;margin-bottom:2px;min-height:46px;padding:0 15px;transition:background .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}.select-module_select-content-bottom-row__eKq5L:hover{background:unset;color:#00236a}.select-module_error-message__-ac6X{border:2px solid #e00!important}.select-module_eMessage__Mm-F7{color:#e00}";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.54",
+  "version": "0.0.55",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -8,7 +8,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "build-lib": "rollup -c",
+    "build-lib": "rollup --config rollup.config.js",
     "svgr": "svgr --icon --title-prop --replace-attr-values '#1D1D1D=currentColor' -d src/components/icon -- src/assets"
   },
   "author": "",
@@ -21,8 +21,9 @@
     "@storybook/addon-essentials": "^6.5.10",
     "@storybook/addon-interactions": "^6.5.10",
     "@storybook/addon-links": "^6.5.10",
-    "@storybook/builder-webpack4": "^6.5.10",
-    "@storybook/manager-webpack4": "^6.5.10",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/preset-create-react-app": "^4.1.2",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.5.10",
     "@storybook/testing-library": "^0.0.13",
@@ -57,5 +58,6 @@
   "dependencies": {
     "lodash": "^4.17.21",
     "react-icons": "^4.7.1"
-  }
+  },
+  "bin": "./cli-command.js"
 }

package/src/components/button/index.js

@@ -4,27 +4,30 @@ import classnames from 'classnames';
 import { compereConfigs } from './../../utils';
 
 export const Button = ({
+  size,
   type,
+  font,
   color,
   label,
   width,
   height,
   cursor,
+  weight,
   border,
+  radius,
   outline,
   padding,
+  bgColor,
   onClick,
-  fontSize,
   disabled,
   className,
   boxSizing,
   transition,
   contentWidth,
-  borderRadius,
-  backgroundColor,
-  disabledThemeColor,
-  disabledThemeBgColor,
-  disabledThemeLineColor,
+  disabledColor,
+  textTransform,
+  disabledBgColor,
+  disabledLineColor,
   ...props
 }) => {
 
@@ -52,27 +55,30 @@ export const Button = ({
   return (
     <button
       style={{
+        fontSize: size ? size : configStyles.BUTTON.size,
+        fontFamily: font ? font : configStyles.BUTTON.font,
         height: height ? height : configStyles.BUTTON.height,
+        fontWeight: weight ? weight : configStyles.BUTTON.weight,
         padding: padding ? padding : configStyles.BUTTON.padding,
-        fontSize: fontSize ? fontSize : configStyles.BUTTON.fontSize,
+        borderRadius: radius ? radius : configStyles.BUTTON.radius,
         boxSizing: boxSizing ? boxSizing : configStyles.BUTTON.boxSizing,
         transition: transition ? transition : configStyles.BUTTON.transition,
         border: outline ? 'none' : border ? border : configStyles.BUTTON.border,
         width: contentWidth ? 'auto' : width ? width : configStyles.BUTTON.width,
-        borderRadius: borderRadius ? borderRadius : configStyles.BUTTON.borderRadius,
         cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.BUTTON.cursor,
+        textTransform: textTransform ? textTransform : configStyles.BUTTON.textTransform,
         backgroundColor:
-          (outline || !outline) && disabled ? disabledThemeBgColor ? disabledThemeBgColor : configStyles.BUTTON.disabledThemeBgColor :
-          outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor : '#ffffff' : backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor,
+          (outline || !outline) && disabled ? disabledBgColor ? disabledBgColor : configStyles.BUTTON.disabledBgColor :
+          outline && !disabled ? isHover ? bgColor ? bgColor : configStyles.BUTTON.bgColor : '#ffffff' : bgColor ? bgColor : configStyles.BUTTON.bgColor,
         boxShadow:
           outline ?
             disabled ?
-            `inset 0 0 0 2px ${disabledThemeLineColor ? disabledThemeLineColor : configStyles.BUTTON.disabledThemeLineColor}` :
-            `inset 0 0 0 2px ${backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor}` :
+            `inset 0 0 0 2px ${disabledLineColor ? disabledLineColor : configStyles.BUTTON.disabledLineColor}` :
+            `inset 0 0 0 2px ${bgColor ? bgColor : configStyles.BUTTON.bgColor}` :
           'none',
         color:          
-          (outline || !outline) && disabled ? disabledThemeColor ? disabledThemeColor : configStyles.BUTTON.disabledThemeColor :
-          outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor : color ? color : configStyles.BUTTON.color
+          (outline || !outline) && disabled ? disabledColor ? disabledColor : configStyles.BUTTON.disabledColor :
+          outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : bgColor ? bgColor : configStyles.BUTTON.bgColor : color ? color : configStyles.BUTTON.color
       }}
       type={type ? type : configStyles.BUTTON.type}
       disabled={disabled ? disabled : configStyles.BUTTON.disabled}
@@ -89,24 +95,27 @@ export const Button = ({
 
 Button.propTypes = {
   type: PropTypes.string,
+  size: PropTypes.string,
+  font: PropTypes.string,
   color: PropTypes.string,
   width: PropTypes.string,
   outline: PropTypes.bool,
   onClick: PropTypes.func,
+  weight: PropTypes.string,
   height: PropTypes.string,
   cursor: PropTypes.string,
   border: PropTypes.string,
   disabled: PropTypes.bool,
+  radius: PropTypes.string,
   padding: PropTypes.string,
-  fontSize: PropTypes.string,
+  bgColor: PropTypes.string,
   boxSizing: PropTypes.string,
   className: PropTypes.string,
   transition: PropTypes.string,
   contentWidth: PropTypes.bool,
-  borderRadius: PropTypes.string,
-  backgroundColor: PropTypes.string,
+  textTransform: PropTypes.string,
+  disabledColor: PropTypes.string,
+  disabledBgColor: PropTypes.string,
   label: PropTypes.string.isRequired,
-  disabledThemeColor: PropTypes.string,
-  disabledThemeBgColor: PropTypes.string,
-  disabledThemeLineColor: PropTypes.string,
+  disabledLineColor: PropTypes.string,
 };