@rabex-kit/rabex-ui 0.1.4 → 0.1.7

package/dist/rabex-ui.esm.js

@@ -808,7 +808,6 @@ var typographySizes = {
     weight: 'semiBold'
   }
 };
-// Define icon sizes for different button sizes
 var iconSizes = {
   xs: 16,
   sm: 16,
@@ -816,22 +815,12 @@ var iconSizes = {
   lg: 24,
   xl: 24
 };
-/**
- * Buttons allow users to take actions, and make choices, with a single tap.
- *
- * This is a custom wrapper component made of Material-UI Button.
- *
- * You can read Material-UI Button Documentation [here](https://mui.com/material-ui/api/Button/).
- *
- * ```typescript
- *  import { Button } from '@rabex-kit/core';
- *  ```
- *
- *
- * @param props
- * @returns
- */
-var StyledButton = /*#__PURE__*/styled(MuiButton)(function (_ref) {
+// Styled button with shouldForwardProp to exclude 'isIcon' from DOM
+var StyledButton = /*#__PURE__*/styled(MuiButton, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'isIcon';
+  }
+})(function (_ref) {
   var size = _ref.size;
   return {
     display: 'flex',
@@ -847,20 +836,21 @@ var StyledButton = /*#__PURE__*/styled(MuiButton)(function (_ref) {
     }
   };
 });
-var Button = function Button(props) {
+var Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$size = props.size,
     size = _props$size === void 0 ? 'md' : _props$size,
     isIcon = props.isIcon,
     children = props.children,
     rest = _objectWithoutPropertiesLoose(props, _excluded$2);
   return React.createElement(StyledButton, Object.assign({
+    ref: ref,
     size: size,
     isIcon: isIcon
   }, rest), isIcon ? children : React.createElement(Typography, {
     variant: typographySizes[size].variant,
     weight: typographySizes[size].weight
   }, children));
-};
+});
 Button.defaultProps = {
   variant: 'contained',
   size: 'md',
@@ -2486,43 +2476,49 @@ var components = {
       var palette = _ref2.theme.palette,
         ownerState = _ref2.ownerState;
       var color = (ownerState === null || ownerState === void 0 ? void 0 : ownerState.color) || 'primary';
+      var primaryColor = palette.primary[500] || palette[color].A100;
+      var textColor = palette.text[50] || palette[color].A0;
+      var disableBackgroundColor = palette.primary[400] || palette[color].A60;
       return {
         // backgroundColor: palette[color].A100,
-        backgroundColor: palette.primary[500],
+        backgroundColor: primaryColor,
         '&:hover': {
-          backgroundColor: darken(palette.primary[500], 0.1)
+          backgroundColor: darken(primaryColor, 0.1)
         },
         '&:active': {
-          backgroundColor: darken(palette.primary[500], 0.1)
+          backgroundColor: darken(primaryColor, 0.1)
         },
         '&:focused': {
-          backgroundColor: darken(palette.primary[500], 0.1),
+          backgroundColor: darken(primaryColor, 0.1),
           boxShadow: '0px 0px 0px 4px #0000000D'
         },
         '&.Mui-disabled': {
-          color: palette.mode === 'light' ? palette.textColor[50] : palette.textColor.A90,
-          backgroundColor: palette.mode === 'light' ? palette.primary[400] : darken(palette[color].A100, 0.1)
+          color: palette.mode === 'light' ? textColor : palette.textColor.A90,
+          backgroundColor: palette.mode === 'light' ? disableBackgroundColor : darken(palette[color].A100, 0.1)
         }
       };
     },
     containedSecondary: function containedSecondary(_ref3) {
       var palette = _ref3.theme.palette;
+      var secondaryColor = palette.secondary[500] || palette.secondary.A100;
+      var textColor = palette.textColor[900] || palette.textColor.A80;
+      var hoverColor = palette.secondary[600] || darken(palette.secondary.A100, 0.05);
       return {
-        backgroundColor: palette.mode === 'light' ? palette.secondary[500] : palette.secondary.A60,
-        color: palette.mode === 'light' ? palette.textColor[900] : palette.textColor.A0,
+        backgroundColor: palette.mode === 'light' ? secondaryColor : palette.secondary.A60,
+        color: palette.mode === 'light' ? textColor : palette.textColor.A0,
         '&:hover': {
-          backgroundColor: palette.mode === 'light' ? palette.secondary[600] : palette.secondary.A60
+          backgroundColor: palette.mode === 'light' ? hoverColor : palette.secondary.A60
         },
         '&:active': {
-          backgroundColor: palette.mode === 'light' ? palette.secondary[600] : palette.secondary.A60,
+          backgroundColor: palette.mode === 'light' ? palette.secondary[600] || darken(palette.secondary.A100, 0.05) : palette.secondary.A60,
           boxShadow: '0px 0px 0px 4px #0000000D'
         },
         '&:focused': {
-          backgroundColor: palette.mode === 'light' ? palette.secondary[600] : palette.secondary.A60,
+          backgroundColor: palette.mode === 'light' ? palette.secondary[600] || darken(palette.secondary.A100, 0.05) : palette.secondary.A60,
           boxShadow: '0px 0px 0px 4px #0000000D'
         },
         '&.Mui-disabled': {
-          color: palette.textColor[100],
+          color: palette.textColor[100] || palette.textColor.A40,
           backgroundColor: palette.mode === 'light' ? palette.secondary[400] : palette.secondary.A60
         }
       };
@@ -2533,24 +2529,24 @@ var components = {
       var color = (ownerState === null || ownerState === void 0 ? void 0 : ownerState.color) || 'primary';
       return {
         backgroundColor: 'transparent',
-        color: color === 'primary' ? palette.primary[500] : palette[color].A100,
+        color: color === 'primary' ? palette.primary[500] || palette[color].A100 : palette[color].A100,
         border: '1.5px solid',
-        borderColor: color === 'primary' ? palette.primary[500] : palette[color].A100,
+        borderColor: color === 'primary' ? palette.primary[500] || palette[color].A100 : palette[color].A100,
         '&:hover': {
-          backgroundColor: palette.mode === 'light' ? color === 'primary' ? palette.primary[500] : palette.secondary.A60 : 'transparent',
+          backgroundColor: palette.mode === 'light' ? color === 'primary' ? palette.primary[500] || palette[color].A100 : palette.secondary.A60 : 'transparent',
           border: '1px solid',
-          borderColor: color === 'primary' ? palette.primary[600] : palette[color].A100,
-          color: palette.textColor[50]
+          borderColor: color === 'primary' ? palette.primary[600] || palette[color].A100 : palette[color].A100,
+          color: palette.textColor[50] || palette[color].A0
         },
         '&:focused': {
           boxShadow: '0px 0px 0px 4px #0000000D',
           border: '1px solid',
           borderColor: color === 'primary' ? palette.primary[500] : palette[color].A100,
-          color: palette.textColor[50]
+          color: palette.textColor[50] || palette[color].A0
         },
         '&.Mui-disabled': {
-          borderColor: palette.mode === 'light' ? color === 'primary' ? palette.primary[400] : palette[color].A60 : alpha(palette[color].A100, 0.3),
-          color: palette.mode === 'light' ? color === 'primary' ? palette.primary[400] : palette[color].A60 : alpha(palette[color].A100, 0.3)
+          borderColor: palette.mode === 'light' ? color === 'primary' ? palette.primary[400] || palette[color].A60 : palette[color].A60 : alpha(palette[color].A100, 0.3),
+          color: palette.mode === 'light' ? color === 'primary' ? palette.primary[400] || palette[color].A60 : palette[color].A60 : alpha(palette[color].A100, 0.3)
         }
       };
     },
@@ -2560,7 +2556,7 @@ var components = {
       var color = (ownerState === null || ownerState === void 0 ? void 0 : ownerState.color) || 'primary';
       return {
         backgroundColor: 'transparent',
-        color: palette.mode === 'light' ? palette.textColor[900] : palette[color].A100,
+        color: palette.mode === 'light' ? palette.textColor[900] || palette.textColor.A80 : palette[color].A100,
         border: 'none',
         '&:hover': {
           backgroundColor: palette.mode === 'light' ? palette.secondary.A80 : alpha(palette.secondary.A100, 0.7)
@@ -2577,7 +2573,7 @@ var components = {
         '&.Mui-disabled': {
           backgroundColor: 'transparent',
           borderColor: 'none',
-          color: palette.mode === 'light' ? palette.textColor[100] : alpha(palette[color].A100, 0.3)
+          color: palette.mode === 'light' ? palette.textColor[100] || palette.textColor.A40 : alpha(palette[color].A100, 0.3)
         }
       };
     }