@xaypay/tui 0.2.33 → 0.3.0

package/CHANGELOG.md

@@ -5,6 +5,19 @@ All notable changes to `@xaypay/tui` will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.2.34] - 2025-11-27
+
+### Fixed
+- **INPUT, SELECT, AUTOCOMPLETE** Reuse each component's label margin when rendering the "show more / show less" trigger so the toggle no longer collapses surrounding spacing.
+
+## [0.2.33] - 2025-11-25
+
+### Added
+- **INPUT, SELECT, TEXTAREA, AUTOCOMPLETE** Add label show more or less functionality on input, select, textarea, and autocomplete components like file component
+
+### Changed
+- **INPUT, SELECT, TEXTAREA, AUTOCOMPLETE, FILE** Change show less position in all labels
+
 ## [0.2.32] - 2025-11-10
 
 ### Fixed

package/dist/index.es.js

@@ -525,7 +525,6 @@ var packageResult = {
   BUTTON: {
     opacity: 1,
     width: '100%',
-    radius: '6px',
     className: '',
     type: 'button',
     height: '46px',
@@ -534,16 +533,16 @@ var packageResult = {
     disabled: false,
     cursor: 'pointer',
     contentWidth: false,
+    borderRadius: '6px',
+    outlineWidth: '2px',
     padding: '12px 20px',
+    disabledBorderWidth: '2px',
     transition: 'background-color 240ms, color 240ms',
-    box: {
-      sizing: boxSizing
-    },
     colors: {
       background: 'rgba(0, 35, 106, 1)',
       backgroundHover: '#CB3A3A',
       disabled: 'rgba(60, 57, 62, 1)',
-      disabledLine: 'rgba(60, 57, 62, 1)',
+      disabledBorderColor: 'rgba(60, 57, 62, 1)',
       disabledBackground: 'rgba(238, 238, 238, 1)',
       withoutStyling: {
         color: '#000000',
@@ -560,8 +559,7 @@ var packageResult = {
       }
     },
     icon: {
-      marginLeft: '10px',
-      marginRight: '10px'
+      gap: '10px'
     },
     withoutStyling: false
   },
@@ -1112,6 +1110,7 @@ var packageResult = {
       showLessText: 'Փակել',
       showMoreText: 'Ավելին',
       showMoreTextColor: '#2C46C1',
+      marginBottom: '6px',
       color: '#4A4A4D',
       font: {
         ...fontObject
@@ -1544,39 +1543,39 @@ var configStylesPromise = getProps();
 
 const Button = ({
   icon,
-  size,
-  style,
   type,
-  font,
   color,
-  label,
+  text,
   width,
   height,
   cursor,
-  weight,
   border,
-  radius,
   outline,
   padding,
   opacity,
   onClick,
+  iconGap,
   disabled,
+  fontSize,
   className,
-  boxSizing,
-  hoverIcon,
+  iconHover,
+  fontStyle,
   hoverColor,
   transition,
+  fontWeight,
+  fontFamily,
+  outlineWidth,
+  borderRadius,
   contentWidth,
-  iconRightSide,
   disabledColor,
   textTransform,
   withoutStyling,
   backgroundColor,
-  disabledLineColor,
-  btnIconMarginLeft,
-  btnIconMarginRight,
   withoutStylingColor,
+  disabledBorderColor,
+  disabledBorderWidth,
   backgroundHoverColor,
+  iconPosition = 'left',
   disabledBackgroundColor,
   withoutStylingHoverColor,
   ...props
@@ -1594,8 +1593,8 @@ const Button = ({
     className && setClassProps(() => classnames(className ?? configStyles.BUTTON.className));
   }, [className]);
   useEffect(() => {
-    if (!label && !icon) {
-      alert('Add icon or label props on Button component');
+    if (!text && !icon) {
+      alert('Add icon or text props on Button component');
     }
     configStylesPromise.then(data => {
       setClassProps(() => classnames(className ?? data.BUTTON.className));
@@ -1613,15 +1612,15 @@ const Button = ({
       display: 'flex',
       outline: 'none',
       alignItems: 'center',
+      boxSizing: 'border-box',
       justifyContent: 'center',
       height: height ?? configStyles.BUTTON.height,
       padding: padding ?? configStyles.BUTTON.padding,
-      fontSize: size ?? configStyles.BUTTON.font.size,
-      borderRadius: radius ?? configStyles.BUTTON.radius,
-      fontStyle: style ?? configStyles.BUTTON.font.style,
-      fontFamily: font ?? configStyles.BUTTON.font.family,
-      fontWeight: weight ?? configStyles.BUTTON.font.weight,
-      boxSizing: boxSizing ?? configStyles.BUTTON.box.sizing,
+      fontSize: fontSize ?? configStyles.BUTTON.font.size,
+      borderRadius: borderRadius ?? configStyles.BUTTON.borderRadius,
+      fontStyle: fontStyle ?? configStyles.BUTTON.font.style,
+      fontFamily: fontFamily ?? configStyles.BUTTON.font.family,
+      fontWeight: fontWeight ?? configStyles.BUTTON.font.weight,
       transition: transition ?? configStyles.BUTTON.transition,
       border: outline ? 'none' : border ?? configStyles.BUTTON.border,
       width: contentWidth ? 'auto' : width ?? configStyles.BUTTON.width,
@@ -1629,7 +1628,7 @@ const Button = ({
       cursor: disabled ? 'not-allowed' : cursor ?? configStyles.BUTTON.cursor,
       opacity: opacity ?? configStyles.BUTTON.opacity,
       backgroundColor: withoutStyling ?? configStyles.BUTTON.withoutStyling ? 'transparent' : (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : configStyles.BUTTON.colors.disabledBackground : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.colors.background : '#ffffff' : !outline && !disabled && isHover ? backgroundHoverColor ? backgroundHoverColor : configStyles.BUTTON.colors.backgroundHover : backgroundColor ? backgroundColor : configStyles.BUTTON.colors.background,
-      boxShadow: outline && !withoutStyling && !configStyles.BUTTON.withoutStyling ? disabled ? `inset 0 0 0 2px ${disabledLineColor ? disabledLineColor : configStyles.BUTTON.colors.disabledLine}` : `inset 0 0 0 2px ${backgroundColor ? backgroundColor : configStyles.BUTTON.colors.background}` : 'none',
+      boxShadow: outline && !withoutStyling && !configStyles.BUTTON.withoutStyling ? disabled ? `inset 0 0 0 ${disabledBorderWidth ?? configStyles.BUTTON.disabledBorderWidth} ${disabledBorderColor ?? configStyles.BUTTON.colors.disabledBorderColor}` : `inset 0 0 0 ${outlineWidth ?? configStyles.BUTTON.outlineWidth} ${backgroundColor ?? configStyles.BUTTON.colors.background}` : 'none',
       color: withoutStyling ?? configStyles.BUTTON.withoutStyling ? isHover ? withoutStylingHoverColor ?? configStyles.BUTTON.colors.withoutStyling.hoverColor : withoutStylingColor ?? configStyles.BUTTON.colors.withoutStyling.color : (outline || !outline) && disabled ? disabledColor ? disabledColor : configStyles.BUTTON.colors.disabled : outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.colors.background : !outline && !disabled && isHover ? hoverColor ? hoverColor : configStyles.BUTTON.text.colors.hover : color ? color : configStyles.BUTTON.color
     },
     type: type ?? configStyles.BUTTON.type,
@@ -1638,50 +1637,50 @@ const Button = ({
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     className: classProps
-  }, props), !iconRightSide ? isHover && hoverIcon ? hoverIcon : icon ?? null : ' ', ' ', label && /*#__PURE__*/React__default.createElement("span", {
+  }, props), iconPosition === 'left' ? isHover && iconHover ? iconHover : icon ?? null : ' ', ' ', text && /*#__PURE__*/React__default.createElement("span", {
     style: {
-      marginLeft: icon && !iconRightSide ? btnIconMarginRight ? btnIconMarginRight : configStyles.BUTTON.icon.marginRight : '0px',
-      marginRight: icon && iconRightSide ? btnIconMarginLeft ? btnIconMarginLeft : configStyles.BUTTON.icon.marginLeft : '0px'
+      marginLeft: icon && iconPosition === 'left' ? iconGap ?? configStyles.BUTTON.icon.gap : '0px',
+      marginRight: icon && iconPosition === 'right' ? iconGap ?? configStyles.BUTTON.icon.gap : '0px'
     }
-  }, label), ' ', iconRightSide ? isHover && hoverIcon ? hoverIcon : icon ?? null : ' ', !icon && !label && 'Add icon or label prop on Button component'));
+  }, text), ' ', iconPosition === 'right' ? isHover && iconHover ? iconHover : icon ?? null : ' ', !icon && !text && 'Add icon or text prop on Button component'));
 };
 Button.propTypes = {
   type: PropTypes.string,
-  size: PropTypes.string,
-  style: PropTypes.string,
-  font: PropTypes.string,
   icon: PropTypes.element,
   color: PropTypes.string,
   width: PropTypes.string,
   outline: PropTypes.bool,
   onClick: PropTypes.func,
-  label: PropTypes.string,
-  weight: PropTypes.string,
   height: PropTypes.string,
   cursor: PropTypes.string,
   border: PropTypes.string,
   disabled: PropTypes.bool,
-  radius: PropTypes.string,
   padding: PropTypes.string,
   opacity: PropTypes.number,
-  boxSizing: PropTypes.string,
   className: PropTypes.string,
-  hoverIcon: PropTypes.element,
+  iconHover: PropTypes.element,
   hoverColor: PropTypes.string,
   transition: PropTypes.string,
   contentWidth: PropTypes.bool,
-  iconRightSide: PropTypes.bool,
+  outlineWidth: PropTypes.string,
   withoutStyling: PropTypes.bool,
   textTransform: PropTypes.string,
   disabledColor: PropTypes.string,
   backgroundColor: PropTypes.string,
-  disabledLineColor: PropTypes.string,
-  btnIconMarginLeft: PropTypes.string,
-  btnIconMarginRight: PropTypes.string,
+  disabledBorderWidth: PropTypes.string,
   withoutStylingColor: PropTypes.string,
   backgroundHoverColor: PropTypes.string,
   disabledBackgroundColor: PropTypes.string,
-  withoutStylingHoverColor: PropTypes.string
+  withoutStylingHoverColor: PropTypes.string,
+  text: PropTypes.string,
+  fontFamily: PropTypes.string,
+  fontSize: PropTypes.string,
+  fontStyle: PropTypes.string,
+  fontWeight: PropTypes.string,
+  iconGap: PropTypes.string,
+  borderRadius: PropTypes.string,
+  disabledBorderColor: PropTypes.string,
+  iconPosition: PropTypes.oneOf(['left', 'right'])
 };
 
 const SvgSvg = ({
@@ -1879,6 +1878,7 @@ const File = /*#__PURE__*/forwardRef(({
   labelShowLessText,
   labelShowMoreText,
   showMoreTextColor,
+  labelMarginBottom,
   useLabelTooltip,
   labelTooltipColor,
   labelTooltipPadding,
@@ -2447,9 +2447,9 @@ const File = /*#__PURE__*/forwardRef(({
   }, /*#__PURE__*/React__default.createElement("div", {
     style: {
       display: 'flex',
-      marginBottom: '6px',
       alignItems: 'center',
       justifyContent: label ? 'space-between' : 'flex-end',
+      marginBottom: labelMarginBottom ?? configStyles.FILE.label.marginBottom,
       width: deleteComponent && useLabelTooltip && handleCheckTextWidth() === 'more' ? 'calc(100% - 26px)' : '100%'
     }
   }, label && /*#__PURE__*/React__default.createElement("div", {
@@ -2756,6 +2756,7 @@ File.propTypes = {
   labelShowLessText: PropTypes.string,
   labelShowMoreText: PropTypes.string,
   showMoreTextColor: PropTypes.string,
+  labelMarginBottom: PropTypes.string,
   useLabelTooltip: PropTypes.bool,
   labelTooltipColor: PropTypes.string,
   labelTooltipPadding: PropTypes.string,
@@ -5828,7 +5829,8 @@ const Input = ({
       fontStyle: labelStyle ?? configStyles.INPUT.label.font.style,
       fontWeight: labelWeight ?? configStyles.INPUT.label.font.weight,
       fontFamily: labelFontFamily ?? configStyles.INPUT.label.font.family,
-      color: showMoreTextColor ?? configStyles.INPUT.label.showMoreTextColor
+      color: showMoreTextColor ?? configStyles.INPUT.label.showMoreTextColor,
+      marginBottom: labelMarginBottom ?? configStyles.INPUT.label.marginBottom
     },
     onClick: handleChangeShowMore
   }, labelShowMoreText ?? configStyles.INPUT.label.showMoreText) : ''), /*#__PURE__*/React__default.createElement("div", {
@@ -6656,7 +6658,8 @@ const Select = ({
       fontStyle: labelFontStyle ?? configStyles.SELECT.label.font.style,
       fontWeight: labelWeight ?? configStyles.SELECT.label.font.weight,
       fontFamily: labelFontFamily ?? configStyles.SELECT.label.font.family,
-      color: showMoreTextColor ?? configStyles.SELECT.label.showMoreTextColor
+      color: showMoreTextColor ?? configStyles.SELECT.label.showMoreTextColor,
+      marginBottom: labelMarginBottom ?? configStyles.INPUT.label.marginBottom
     },
     onClick: handleChangeShowMore
   }, labelShowMoreText ?? configStyles.SELECT.label.showMoreText) : ''), /*#__PURE__*/React__default.createElement("div", {
@@ -9891,7 +9894,8 @@ const Autocomplete = ({
       fontStyle: labelStyle ?? configStyles.AUTOCOMPLETE.label.font.style,
       fontWeight: labelWeight ?? configStyles.AUTOCOMPLETE.label.font.weight,
       fontFamily: labelFontFamily ?? configStyles.AUTOCOMPLETE.label.font.family,
-      color: showMoreTextColor ?? configStyles.AUTOCOMPLETE.label.showMoreTextColor
+      color: showMoreTextColor ?? configStyles.AUTOCOMPLETE.label.showMoreTextColor,
+      marginBottom: labelMarginBottom ?? configStyles.AUTOCOMPLETE.label.marginBottom
     },
     onClick: handleChangeShowMore
   }, labelShowMoreText ?? configStyles.AUTOCOMPLETE.label.showMoreText) : ''), /*#__PURE__*/React__default.createElement("div", {

package/dist/index.js

@@ -556,7 +556,6 @@ var packageResult = {
   BUTTON: {
     opacity: 1,
     width: '100%',
-    radius: '6px',
     className: '',
     type: 'button',
     height: '46px',
@@ -565,16 +564,16 @@ var packageResult = {
     disabled: false,
     cursor: 'pointer',
     contentWidth: false,
+    borderRadius: '6px',
+    outlineWidth: '2px',
     padding: '12px 20px',
+    disabledBorderWidth: '2px',
     transition: 'background-color 240ms, color 240ms',
-    box: {
-      sizing: boxSizing
-    },
     colors: {
       background: 'rgba(0, 35, 106, 1)',
       backgroundHover: '#CB3A3A',
       disabled: 'rgba(60, 57, 62, 1)',
-      disabledLine: 'rgba(60, 57, 62, 1)',
+      disabledBorderColor: 'rgba(60, 57, 62, 1)',
       disabledBackground: 'rgba(238, 238, 238, 1)',
       withoutStyling: {
         color: '#000000',
@@ -591,8 +590,7 @@ var packageResult = {
       }
     },
     icon: {
-      marginLeft: '10px',
-      marginRight: '10px'
+      gap: '10px'
     },
     withoutStyling: false
   },
@@ -1143,6 +1141,7 @@ var packageResult = {
       showLessText: 'Փակել',
       showMoreText: 'Ավելին',
       showMoreTextColor: '#2C46C1',
+      marginBottom: '6px',
       color: '#4A4A4D',
       font: {
         ...fontObject
@@ -1575,39 +1574,39 @@ var configStylesPromise = getProps();
 
 const Button = ({
   icon,
-  size,
-  style,
   type,
-  font,
   color,
-  label,
+  text,
   width,
   height,
   cursor,
-  weight,
   border,
-  radius,
   outline,
   padding,
   opacity,
   onClick,
+  iconGap,
   disabled,
+  fontSize,
   className,
-  boxSizing,
-  hoverIcon,
+  iconHover,
+  fontStyle,
   hoverColor,
   transition,
+  fontWeight,
+  fontFamily,
+  outlineWidth,
+  borderRadius,
   contentWidth,
-  iconRightSide,
   disabledColor,
   textTransform,
   withoutStyling,
   backgroundColor,
-  disabledLineColor,
-  btnIconMarginLeft,
-  btnIconMarginRight,
   withoutStylingColor,
+  disabledBorderColor,
+  disabledBorderWidth,
   backgroundHoverColor,
+  iconPosition = 'left',
   disabledBackgroundColor,
   withoutStylingHoverColor,
   ...props
@@ -1625,8 +1624,8 @@ const Button = ({
     className && setClassProps(() => classnames__default["default"](className ?? configStyles.BUTTON.className));
   }, [className]);
   React.useEffect(() => {
-    if (!label && !icon) {
-      alert('Add icon or label props on Button component');
+    if (!text && !icon) {
+      alert('Add icon or text props on Button component');
     }
     configStylesPromise.then(data => {
       setClassProps(() => classnames__default["default"](className ?? data.BUTTON.className));
@@ -1644,15 +1643,15 @@ const Button = ({
       display: 'flex',
       outline: 'none',
       alignItems: 'center',
+      boxSizing: 'border-box',
       justifyContent: 'center',
       height: height ?? configStyles.BUTTON.height,
       padding: padding ?? configStyles.BUTTON.padding,
-      fontSize: size ?? configStyles.BUTTON.font.size,
-      borderRadius: radius ?? configStyles.BUTTON.radius,
-      fontStyle: style ?? configStyles.BUTTON.font.style,
-      fontFamily: font ?? configStyles.BUTTON.font.family,
-      fontWeight: weight ?? configStyles.BUTTON.font.weight,
-      boxSizing: boxSizing ?? configStyles.BUTTON.box.sizing,
+      fontSize: fontSize ?? configStyles.BUTTON.font.size,
+      borderRadius: borderRadius ?? configStyles.BUTTON.borderRadius,
+      fontStyle: fontStyle ?? configStyles.BUTTON.font.style,
+      fontFamily: fontFamily ?? configStyles.BUTTON.font.family,
+      fontWeight: fontWeight ?? configStyles.BUTTON.font.weight,
       transition: transition ?? configStyles.BUTTON.transition,
       border: outline ? 'none' : border ?? configStyles.BUTTON.border,
       width: contentWidth ? 'auto' : width ?? configStyles.BUTTON.width,
@@ -1660,7 +1659,7 @@ const Button = ({
       cursor: disabled ? 'not-allowed' : cursor ?? configStyles.BUTTON.cursor,
       opacity: opacity ?? configStyles.BUTTON.opacity,
       backgroundColor: withoutStyling ?? configStyles.BUTTON.withoutStyling ? 'transparent' : (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : configStyles.BUTTON.colors.disabledBackground : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.colors.background : '#ffffff' : !outline && !disabled && isHover ? backgroundHoverColor ? backgroundHoverColor : configStyles.BUTTON.colors.backgroundHover : backgroundColor ? backgroundColor : configStyles.BUTTON.colors.background,
-      boxShadow: outline && !withoutStyling && !configStyles.BUTTON.withoutStyling ? disabled ? `inset 0 0 0 2px ${disabledLineColor ? disabledLineColor : configStyles.BUTTON.colors.disabledLine}` : `inset 0 0 0 2px ${backgroundColor ? backgroundColor : configStyles.BUTTON.colors.background}` : 'none',
+      boxShadow: outline && !withoutStyling && !configStyles.BUTTON.withoutStyling ? disabled ? `inset 0 0 0 ${disabledBorderWidth ?? configStyles.BUTTON.disabledBorderWidth} ${disabledBorderColor ?? configStyles.BUTTON.colors.disabledBorderColor}` : `inset 0 0 0 ${outlineWidth ?? configStyles.BUTTON.outlineWidth} ${backgroundColor ?? configStyles.BUTTON.colors.background}` : 'none',
       color: withoutStyling ?? configStyles.BUTTON.withoutStyling ? isHover ? withoutStylingHoverColor ?? configStyles.BUTTON.colors.withoutStyling.hoverColor : withoutStylingColor ?? configStyles.BUTTON.colors.withoutStyling.color : (outline || !outline) && disabled ? disabledColor ? disabledColor : configStyles.BUTTON.colors.disabled : outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.colors.background : !outline && !disabled && isHover ? hoverColor ? hoverColor : configStyles.BUTTON.text.colors.hover : color ? color : configStyles.BUTTON.color
     },
     type: type ?? configStyles.BUTTON.type,
@@ -1669,50 +1668,50 @@ const Button = ({
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     className: classProps
-  }, props), !iconRightSide ? isHover && hoverIcon ? hoverIcon : icon ?? null : ' ', ' ', label && /*#__PURE__*/React__default["default"].createElement("span", {
+  }, props), iconPosition === 'left' ? isHover && iconHover ? iconHover : icon ?? null : ' ', ' ', text && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
-      marginLeft: icon && !iconRightSide ? btnIconMarginRight ? btnIconMarginRight : configStyles.BUTTON.icon.marginRight : '0px',
-      marginRight: icon && iconRightSide ? btnIconMarginLeft ? btnIconMarginLeft : configStyles.BUTTON.icon.marginLeft : '0px'
+      marginLeft: icon && iconPosition === 'left' ? iconGap ?? configStyles.BUTTON.icon.gap : '0px',
+      marginRight: icon && iconPosition === 'right' ? iconGap ?? configStyles.BUTTON.icon.gap : '0px'
     }
-  }, label), ' ', iconRightSide ? isHover && hoverIcon ? hoverIcon : icon ?? null : ' ', !icon && !label && 'Add icon or label prop on Button component'));
+  }, text), ' ', iconPosition === 'right' ? isHover && iconHover ? iconHover : icon ?? null : ' ', !icon && !text && 'Add icon or text prop on Button component'));
 };
 Button.propTypes = {
   type: PropTypes__default["default"].string,
-  size: PropTypes__default["default"].string,
-  style: PropTypes__default["default"].string,
-  font: PropTypes__default["default"].string,
   icon: PropTypes__default["default"].element,
   color: PropTypes__default["default"].string,
   width: PropTypes__default["default"].string,
   outline: PropTypes__default["default"].bool,
   onClick: PropTypes__default["default"].func,
-  label: PropTypes__default["default"].string,
-  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,
   opacity: PropTypes__default["default"].number,
-  boxSizing: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
-  hoverIcon: PropTypes__default["default"].element,
+  iconHover: PropTypes__default["default"].element,
   hoverColor: PropTypes__default["default"].string,
   transition: PropTypes__default["default"].string,
   contentWidth: PropTypes__default["default"].bool,
-  iconRightSide: PropTypes__default["default"].bool,
+  outlineWidth: PropTypes__default["default"].string,
   withoutStyling: PropTypes__default["default"].bool,
   textTransform: PropTypes__default["default"].string,
   disabledColor: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
-  disabledLineColor: PropTypes__default["default"].string,
-  btnIconMarginLeft: PropTypes__default["default"].string,
-  btnIconMarginRight: PropTypes__default["default"].string,
+  disabledBorderWidth: PropTypes__default["default"].string,
   withoutStylingColor: PropTypes__default["default"].string,
   backgroundHoverColor: PropTypes__default["default"].string,
   disabledBackgroundColor: PropTypes__default["default"].string,
-  withoutStylingHoverColor: PropTypes__default["default"].string
+  withoutStylingHoverColor: PropTypes__default["default"].string,
+  text: PropTypes__default["default"].string,
+  fontFamily: PropTypes__default["default"].string,
+  fontSize: PropTypes__default["default"].string,
+  fontStyle: PropTypes__default["default"].string,
+  fontWeight: PropTypes__default["default"].string,
+  iconGap: PropTypes__default["default"].string,
+  borderRadius: PropTypes__default["default"].string,
+  disabledBorderColor: PropTypes__default["default"].string,
+  iconPosition: PropTypes__default["default"].oneOf(['left', 'right'])
 };
 
 const SvgSvg = ({
@@ -1910,6 +1909,7 @@ const File = /*#__PURE__*/React.forwardRef(({
   labelShowLessText,
   labelShowMoreText,
   showMoreTextColor,
+  labelMarginBottom,
   useLabelTooltip,
   labelTooltipColor,
   labelTooltipPadding,
@@ -2478,9 +2478,9 @@ const File = /*#__PURE__*/React.forwardRef(({
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
-      marginBottom: '6px',
       alignItems: 'center',
       justifyContent: label ? 'space-between' : 'flex-end',
+      marginBottom: labelMarginBottom ?? configStyles.FILE.label.marginBottom,
       width: deleteComponent && useLabelTooltip && handleCheckTextWidth() === 'more' ? 'calc(100% - 26px)' : '100%'
     }
   }, label && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2787,6 +2787,7 @@ File.propTypes = {
   labelShowLessText: PropTypes__default["default"].string,
   labelShowMoreText: PropTypes__default["default"].string,
   showMoreTextColor: PropTypes__default["default"].string,
+  labelMarginBottom: PropTypes__default["default"].string,
   useLabelTooltip: PropTypes__default["default"].bool,
   labelTooltipColor: PropTypes__default["default"].string,
   labelTooltipPadding: PropTypes__default["default"].string,
@@ -5859,7 +5860,8 @@ const Input = ({
       fontStyle: labelStyle ?? configStyles.INPUT.label.font.style,
       fontWeight: labelWeight ?? configStyles.INPUT.label.font.weight,
       fontFamily: labelFontFamily ?? configStyles.INPUT.label.font.family,
-      color: showMoreTextColor ?? configStyles.INPUT.label.showMoreTextColor
+      color: showMoreTextColor ?? configStyles.INPUT.label.showMoreTextColor,
+      marginBottom: labelMarginBottom ?? configStyles.INPUT.label.marginBottom
     },
     onClick: handleChangeShowMore
   }, labelShowMoreText ?? configStyles.INPUT.label.showMoreText) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -6687,7 +6689,8 @@ const Select = ({
       fontStyle: labelFontStyle ?? configStyles.SELECT.label.font.style,
       fontWeight: labelWeight ?? configStyles.SELECT.label.font.weight,
       fontFamily: labelFontFamily ?? configStyles.SELECT.label.font.family,
-      color: showMoreTextColor ?? configStyles.SELECT.label.showMoreTextColor
+      color: showMoreTextColor ?? configStyles.SELECT.label.showMoreTextColor,
+      marginBottom: labelMarginBottom ?? configStyles.INPUT.label.marginBottom
     },
     onClick: handleChangeShowMore
   }, labelShowMoreText ?? configStyles.SELECT.label.showMoreText) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -9922,7 +9925,8 @@ const Autocomplete = ({
       fontStyle: labelStyle ?? configStyles.AUTOCOMPLETE.label.font.style,
       fontWeight: labelWeight ?? configStyles.AUTOCOMPLETE.label.font.weight,
       fontFamily: labelFontFamily ?? configStyles.AUTOCOMPLETE.label.font.family,
-      color: showMoreTextColor ?? configStyles.AUTOCOMPLETE.label.showMoreTextColor
+      color: showMoreTextColor ?? configStyles.AUTOCOMPLETE.label.showMoreTextColor,
+      marginBottom: labelMarginBottom ?? configStyles.AUTOCOMPLETE.label.marginBottom
     },
     onClick: handleChangeShowMore
   }, labelShowMoreText ?? configStyles.AUTOCOMPLETE.label.showMoreText) : ''), /*#__PURE__*/React__default["default"].createElement("div", {

package/package.json

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

package/tui.config.js

@@ -40,7 +40,6 @@ export default {
     BUTTON: {
         opacity: 1,
         width: '100%',
-        radius: '6px',
         className: '',
         type: 'button',
         height: '46px',
@@ -49,18 +48,17 @@ export default {
         disabled: false,
         cursor: 'pointer',
         contentWidth: false,
+        borderRadius: '6px',
+        outlineWidth: '2px',
         padding: '12px 20px',
+        disabledBorderWidth: '2px',
         transition: 'background-color 240ms, color 240ms',
-        
-        box: {
-            sizing: boxSizing,
-        },
 
         colors: {
             background: 'rgba(0, 35, 106, 1)',
             backgroundHover: '#CB3A3A',
             disabled: 'rgba(60, 57, 62, 1)',
-            disabledLine: 'rgba(60, 57, 62, 1)',
+            disabledBorderColor: 'rgba(60, 57, 62, 1)',
             disabledBackground: 'rgba(238, 238, 238, 1)',
             withoutStyling: {
                 color: '#000000',
@@ -78,8 +76,7 @@ export default {
         },
 
         icon: {
-            marginLeft: '10px',
-            marginRight: '10px'
+            gap: '10px',
         },
 
         withoutStyling: false
@@ -668,6 +665,7 @@ export default {
             showLessText: 'Փակել',
             showMoreText: 'Ավելին',
             showMoreTextColor: '#2C46C1',
+            marginBottom: '6px',
             color: '#4A4A4D',
 
             font: {...fontObject},