@rabex-kit/rabex-ui 0.2.16 → 0.2.18

package/dist/rabex-ui.esm.js

@@ -1279,17 +1279,21 @@ var Grid = function Grid(_ref) {
  * @param props
  * @returns
  */
-var IconButton = /*#__PURE__*/styled(MuiIconButton, {
+// Create the styled component
+var StyledIconButton = /*#__PURE__*/styled(MuiIconButton, {
   name: 'MuiIconButton',
   shouldForwardProp: function shouldForwardProp(prop) {
-    return !['hasBg', 'disableOpacity', 'bgColor', 'variant', 'size'].includes(prop.toString());
+    return !['bgColor', 'hasBg', 'disableOpacity', 'variant', 'size'].includes(prop.toString());
   }
 })(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;
+    variant = _ref$variant === void 0 ? 'circular' : _ref$variant,
+    hasBg = _ref.hasBg,
+    disableOpacity = _ref.disableOpacity,
+    bgColor = _ref.bgColor;
   // Size configurations
   var sizeConfig = {
     xs: {
@@ -1311,9 +1315,26 @@ var IconButton = /*#__PURE__*/styled(MuiIconButton, {
       button: 48,
       icon: 24,
       padding: 12
+    },
+    // Add MUI default sizes for compatibility
+    small: {
+      button: 40,
+      icon: 20,
+      padding: 8
+    },
+    medium: {
+      button: 48,
+      icon: 24,
+      padding: 12
+    },
+    large: {
+      button: 56,
+      icon: 28,
+      padding: 16
     }
   };
-  var config = sizeConfig[size];
+  // Use the size config, default to md if not found
+  var config = sizeConfig[size] || sizeConfig.md;
   return _extends({
     width: config.button,
     height: config.button,
@@ -1328,8 +1349,27 @@ var IconButton = /*#__PURE__*/styled(MuiIconButton, {
     borderRadius: theme.spacing(1)
   }, variant === 'square' && {
     borderRadius: 0
+  }, disableOpacity && {
+    color: 'inherit',
+    '&:hover': {
+      backgroundColor: 'transparent'
+    }
+  }, hasBg && {
+    backgroundColor: bgColor || theme.palette.secondary.A100,
+    '&:hover': {
+      backgroundColor: bgColor ? bgColor + "CC" // Add opacity to custom color
+      : theme.palette.secondary.A60
+    }
   });
 });
+// Create a simple React wrapper component that doesn't use componentsProps
+var IconButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return React.createElement(StyledIconButton, Object.assign({
+    ref: ref
+  }, props));
+});
+// Set display name for debugging
+IconButton.displayName = 'IconButton';
 // Set default props
 IconButton.defaultProps = {
   variant: 'circular',
@@ -3933,7 +3973,7 @@ var RabexIconButton = {
         return _extends({}, ownerState.disableOpacity && {
           color: 'inherit',
           '&:hover': {
-            backgroundColor: 'transparent'
+            backgroundColor: 'unset'
           }
         });
       }
@@ -3943,12 +3983,12 @@ var RabexIconButton = {
         hasBg: true
       },
       style: function style(_ref2) {
-        var theme = _ref2.theme,
-          ownerState = _ref2.ownerState;
+        var bgColor = _ref2.bgColor,
+          theme = _ref2.theme;
         return {
-          backgroundColor: (ownerState === null || ownerState === void 0 ? void 0 : ownerState.bgColor) || theme.palette.secondary.A100,
+          backgroundColor: bgColor || theme.palette.secondary.A100,
           '&:hover': {
-            backgroundColor: ownerState !== null && ownerState !== void 0 && ownerState.bgColor ? ownerState.bgColor + "CC" // Add opacity to custom color
+            backgroundColor: bgColor ? bgColor + "CC" // Add opacity to custom color
             : theme.palette.secondary.A60
           }
         };
@@ -5363,7 +5403,7 @@ var FormikSelect = function FormikSelect(_ref) {
   }, text));
 };
 
-var _excluded$i = ["title", "helperTextEndAdornment", "helperTextEndAdornmentProps", "titleProps", "helperText", "helperTextIcon", "helperTextProps", "value", "onChange", "valueFormat", "valueFormatOption", "fullWidth"];
+var _excluded$i = ["title", "helperTextEndAdornment", "helperTextEndAdornmentProps", "titleProps", "helperText", "helperTextIcon", "helperTextProps", "value", "onChange", "valueFormat", "valueFormatOption", "fullWidth", "size"];
 function _handleHelperColor$1(props, key) {
   var _props$key;
   if (props.error) return 'error.A100';
@@ -5381,7 +5421,7 @@ function _handleHelperColor$1(props, key) {
  * You can read Material-UI TextField Documentation [here](https://mui.com/material-ui/api/text-field/)
  *
  *
-typescript
+ typescript
  *  import { TextField } from '@rabex-kit/rabex-ui';
  *