@rabex-kit/rabex-ui 0.2.4 → 0.2.7

package/dist/Grid/index.d.ts

@@ -9,7 +9,7 @@ export declare type GridProps = MuiGridProps;
  * 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';
  *  ```
  *
  *

package/dist/IconButton/index.d.ts

@@ -1,5 +1,16 @@
 /// <reference types="react" />
 import { IconButtonProps as MuiIconButtonProps } from '@mui/material';
+declare module '@mui/material/IconButton' {
+    interface IconButtonPropsSizeOverrides {
+        xs: true;
+        sm: true;
+        md: true;
+        lg: true;
+        small: false;
+        medium: false;
+        large: false;
+    }
+}
 export interface IconButtonProps extends MuiIconButtonProps {
     variant?: 'circular' | 'square' | 'rounded';
     hasBg?: boolean;
@@ -7,12 +18,11 @@ export interface IconButtonProps extends MuiIconButtonProps {
     bgColor?: string;
 }
 /**
- *
  * 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';

package/dist/Theme/IconButton/index.d.ts

@@ -6,20 +6,27 @@ declare const _default: {
                 ownerState: any;
                 theme: any;
             }) => {
-                borderRadius?: string | number;
+                color: string;
+                '&:hover': {
+                    backgroundColor: string;
+                };
             };
         };
         variants: ({
             props: Partial<IconButtonProps>;
             style: ({ theme, ownerState }: any) => {
+                backgroundColor: any;
                 '&:hover': {
                     backgroundColor: any;
                 };
             };
         } | {
             props: Partial<IconButtonProps>;
-            style: () => {
-                color: string;
+            style: ({ theme }: any) => {
+                color: any;
+                '&:hover': {
+                    backgroundColor: any;
+                };
             };
         })[];
     };

package/dist/rabex-ui.cjs.development.js

@@ -1257,7 +1257,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';
  *  ```
  *
  *
@@ -1270,12 +1270,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';
@@ -1287,15 +1286,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) {
@@ -1803,7 +1848,11 @@ var SelectItem = function SelectItem(props) {
  */
 var Skeleton = function Skeleton(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return React__default.createElement(MuiSkeleton, Object.assign({}, props));
+  var _useTheme = useTheme$1(),
+    palette = _useTheme.palette;
+  return React__default.createElement(MuiSkeleton, Object.assign({
+    color: palette.base[200]
+  }, props));
 };
 
 /**
@@ -3885,12 +3934,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'
+          }
         });
       }
     },
@@ -3902,18 +3950,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
+          }
         };
       }
     }]