@rabex-kit/rabex-ui 0.2.4 → 0.2.7

package/dist/rabex-ui.esm.js

@@ -14,6 +14,7 @@ import _includes from 'lodash-es/includes';
 import bigDecimal from 'js-big-decimal';
 import _filter from 'lodash-es/filter';
 import _isUndefined from 'lodash-es/isUndefined';
+import useTheme$1 from '@mui/material/styles/useTheme';
 export { default as useTheme } from '@mui/material/styles/useTheme';
 import MuiAlertTitle from '@mui/material/AlertTitle/AlertTitle.js';
 import MuiAvatar from '@mui/material/Avatar/Avatar.js';
@@ -1252,7 +1253,7 @@ var FormLabel = function FormLabel(_ref) {
  * You can read Material-UI Button Documentation [here](https://mui.com/material-ui/react-grid2/).
  *
  * ```typescript
- *  import { Grid } from '@rabex-kit/core';
+ *  import { Grid } from '@rabex-kit/rabex-ui';
  *  ```
  *
  *
@@ -1265,12 +1266,11 @@ var Grid = function Grid(_ref) {
 };
 
 /**
- *
  * Icon buttons are commonly found in app bars and toolbars.
  * Icons are also appropriate for toggle buttons that allow a single choice to be selected or deselected,
  * such as adding or removing a star to an item.
  *
- * You can read Material-UI Button Documentation [here](https://mui.com/material-ui/api/icon-button/).
+ * You can read Material-UI IconButton Documentation [here](https://mui.com/material-ui/api/icon-button/).
  *
  * ```typescript
  *  import { IconButton } from '@rabex-kit/rabex-ui';
@@ -1282,15 +1282,61 @@ var Grid = function Grid(_ref) {
 var IconButton = /*#__PURE__*/styled(MuiIconButton, {
   name: 'MuiIconButton',
   shouldForwardProp: function shouldForwardProp(prop) {
-    return !['hasBg', 'disableOpacity', 'bgColor'].includes(prop.toString());
+    return !['hasBg', 'disableOpacity', 'bgColor', 'variant'].includes(prop.toString());
   }
-})(function () {
-  return {};
+})(function (_ref) {
+  var theme = _ref.theme,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'circular' : _ref$variant;
+  // Size configurations
+  var sizeConfig = {
+    xs: {
+      button: 24,
+      icon: 16,
+      padding: 4
+    },
+    sm: {
+      button: 32,
+      icon: 16,
+      padding: 8
+    },
+    md: {
+      button: 40,
+      icon: 24,
+      padding: 8
+    },
+    lg: {
+      button: 48,
+      icon: 24,
+      padding: 12
+    }
+  };
+  var config = sizeConfig[size];
+  return _extends({
+    width: config.button,
+    height: config.button,
+    padding: theme.spacing(config.padding / 4),
+    // Icon size
+    '& .MuiSvgIcon-root': {
+      fontSize: config.icon
+    }
+  }, variant === 'circular' && {
+    borderRadius: '50%'
+  }, variant === 'rounded' && {
+    borderRadius: theme.spacing(1)
+  }, variant === 'square' && {
+    borderRadius: 0
+  });
 });
+// Set default props
 IconButton.defaultProps = {
   variant: 'circular',
   hasBg: false,
-  disableOpacity: false
+  disableOpacity: false,
+  size: 'md',
+  disableRipple: true
 };
 
 function _handleHelperColor(props, key) {
@@ -1798,7 +1844,11 @@ var SelectItem = function SelectItem(props) {
  */
 var Skeleton = function Skeleton(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return React.createElement(MuiSkeleton, Object.assign({}, props));
+  var _useTheme = useTheme$1(),
+    palette = _useTheme.palette;
+  return React.createElement(MuiSkeleton, Object.assign({
+    color: palette.base[200]
+  }, props));
 };
 
 /**
@@ -3880,12 +3930,11 @@ var RabexIconButton = {
     styleOverrides: {
       root: function root(_ref) {
         var ownerState = _ref.ownerState;
-        return _extends({}, ownerState.variant === 'circular' && {
-          borderRadius: '50%'
-        }, ownerState.variant === 'rounded' && {
-          borderRadius: 8
-        }, ownerState.variant === 'square' && {
-          borderRadius: 0
+        return _extends({}, ownerState.disableOpacity && {
+          color: 'inherit',
+          '&:hover': {
+            backgroundColor: 'transparent'
+          }
         });
       }
     },
@@ -3897,18 +3946,63 @@ var RabexIconButton = {
         var theme = _ref2.theme,
           ownerState = _ref2.ownerState;
         return {
+          backgroundColor: (ownerState === null || ownerState === void 0 ? void 0 : ownerState.bgColor) || theme.palette.secondary.A100,
           '&:hover': {
-            backgroundColor: (ownerState === null || ownerState === void 0 ? void 0 : ownerState.bgColor) || theme.palette.secondary.main
+            backgroundColor: ownerState !== null && ownerState !== void 0 && ownerState.bgColor ? ownerState.bgColor + "CC" // Add opacity to custom color
+            : theme.palette.secondary.A60
           }
         };
       }
     }, {
       props: {
-        disableOpacity: true
+        color: 'primary'
       },
-      style: function style() {
+      style: function style(_ref3) {
+        var theme = _ref3.theme;
         return {
-          color: 'inherit'
+          color: theme.palette.primary.A100,
+          '&:hover': {
+            backgroundColor: theme.palette.mode === 'light' ? theme.palette.primary.A10 : theme.palette.primary.A60
+          }
+        };
+      }
+    }, {
+      props: {
+        color: 'secondary'
+      },
+      style: function style(_ref4) {
+        var theme = _ref4.theme;
+        return {
+          color: theme.palette.secondary.A100,
+          '&:hover': {
+            backgroundColor: theme.palette.mode === 'light' ? theme.palette.secondary.A10 : theme.palette.secondary.A60
+          }
+        };
+      }
+    }, {
+      props: {
+        color: 'error'
+      },
+      style: function style(_ref5) {
+        var theme = _ref5.theme;
+        return {
+          color: theme.palette.error.A100,
+          '&:hover': {
+            backgroundColor: theme.palette.mode === 'light' ? theme.palette.error.A10 : theme.palette.error.A60
+          }
+        };
+      }
+    }, {
+      props: {
+        color: 'success'
+      },
+      style: function style(_ref6) {
+        var theme = _ref6.theme;
+        return {
+          color: theme.palette.success.A100,
+          '&:hover': {
+            backgroundColor: theme.palette.mode === 'light' ? theme.palette.success.A10 : theme.palette.success.A60
+          }
         };
       }
     }]