@rabex-kit/rabex-ui 0.2.30 → 0.2.32

package/dist/rabex-ui.esm.js

@@ -2682,7 +2682,7 @@ var components = {
       // const primaryColor = palette.primary[500] || palette[color].A100;
       var primaryColor = color !== 'primary' ? palette[color][400] : palette.primary[500];
       var textColor = palette.textColor[50] || palette[color].A0;
-      var disableBackgroundColor = palette.primary[400] || palette[color].A60;
+      var disableBackgroundColor = color === 'primary' ? palette.primary[400] : palette[color][200];
       return {
         // backgroundColor: palette[color].A100,
         backgroundColor: primaryColor,
@@ -2698,7 +2698,10 @@ var components = {
         },
         '&.Mui-disabled': {
           color: palette.mode === 'light' ? textColor : palette.textColor.A90,
-          backgroundColor: palette.mode === 'light' ? disableBackgroundColor : darken(palette[color].A100, 0.1)
+          backgroundColor: disableBackgroundColor
+          // palette.mode === 'light'
+          //   ? disableBackgroundColor
+          //   : darken(palette[color].A100 as string, 0.1),
         }
       };
     },
@@ -2706,7 +2709,7 @@ var components = {
       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);
+      var hoverColor = palette.secondary[400] || darken(palette.secondary.A100, 0.05);
       return {
         backgroundColor: palette.mode === 'light' ? secondaryColor : palette.secondary.A60,
         color: palette.mode === 'light' ? textColor : palette.textColor.A0,
@@ -2714,11 +2717,11 @@ var components = {
           backgroundColor: palette.mode === 'light' ? hoverColor : palette.secondary.A60
         },
         '&:active': {
-          backgroundColor: palette.mode === 'light' ? palette.secondary[600] || darken(palette.secondary.A100, 0.05) : palette.secondary.A60,
+          backgroundColor: palette.mode === 'light' ? palette.secondary[400] || darken(palette.secondary.A100, 0.05) : palette.secondary.A60,
           boxShadow: '0px 0px 0px 4px #0000000D'
         },
         '&:focused': {
-          backgroundColor: palette.mode === 'light' ? palette.secondary[600] || darken(palette.secondary.A100, 0.05) : palette.secondary.A60,
+          backgroundColor: palette.mode === 'light' ? palette.secondary[400] || darken(palette.secondary.A100, 0.05) : palette.secondary.A60,
           boxShadow: '0px 0px 0px 4px #0000000D'
         },
         '&.Mui-disabled': {
@@ -3355,6 +3358,9 @@ var RabexTabs = {
               borderRadius: theme.spacing(2),
               backgroundColor: theme.palette.secondary[500],
               color: theme.palette.textColor[900],
+              '&.Mui-disabled': {
+                color: theme.palette.textColor[200]
+              },
               '&:hover': {
                 backgroundColor: theme.palette.primary[600],
                 color: theme.palette.textColor[50]
@@ -4801,8 +4807,8 @@ var RabexModal = {
         var theme = _ref.theme;
         return {
           '&:not(.MuiMenu-root, .MuiPopover-root) .MuiBackdrop-root': {
-            backdropFilter: 'blur(2px)',
-            backgroundColor: alpha(theme.palette.grayBackground.A100 || '', 0.4)
+            // backdropFilter: 'blur(2px)',
+            backgroundColor: alpha(theme.palette.base[600] || '', 0.7)
           }
         };
       }
@@ -5097,6 +5103,74 @@ var RabexLoadingButton = {
   components: components$8
 };
 
+var components$9 = {
+  styleOverrides: {
+    root: function root(_ref) {
+      return {
+        '&.MuiAutocomplete-root': {}
+      };
+    },
+    input: function input(_ref2) {
+      return {
+        padding: '0 !important'
+      };
+    },
+    paper: function paper(_ref3) {
+      return {
+        borderRadius: '8px !important'
+      };
+    },
+    listbox: function listbox(_ref4) {
+      var theme = _ref4.theme;
+      return {
+        padding: '8px 4px !important',
+        borderRadius: '8px !important',
+        backgroundColor: theme.palette.base[50] + " !important",
+        gap: '4px !important',
+        display: 'flex',
+        flexDirection: 'column'
+      };
+    },
+    option: function option(_ref5) {
+      var theme = _ref5.theme;
+      return {
+        backgroundColor: 'transparent !important',
+        borderRadius: '8px !important',
+        padding: '0 !important',
+        transition: theme.transitions.create(['background-color', 'transform'], {
+          duration: theme.transitions.duration.shorter
+        }),
+        // Hover state - FIXED syntax
+        '&:hover': {
+          backgroundColor: theme.palette.base[200] + " !important",
+          boxShadow: 'unset'
+        },
+        // Selected state
+        '&[aria-selected="true"]': {
+          backgroundColor: theme.palette.base[200] + " !important",
+          '&:hover': {
+            boxShadow: '0px 0px 0px 4px rgba(0, 0, 0, 0.05)',
+            backgroundColor: theme.palette.base[200] + " !important"
+          }
+        },
+        // Focused state (keyboard navigation)
+        '&.Mui-focused': {
+          backgroundColor: theme.palette.base[200] + " !important"
+        }
+      };
+    },
+    noOptions: function noOptions(_ref6) {
+      return {};
+    },
+    loading: function loading(_ref7) {
+      return {};
+    }
+  }
+};
+var RabexAutocomplete = {
+  components: components$9
+};
+
 var getDesignTokens = function getDesignTokens(_ref) {
   var deviceType = _ref.deviceType,
     _ref$mode = _ref.mode,
@@ -5158,7 +5232,8 @@ var getDesignTokens = function getDesignTokens(_ref) {
       MuiPagination: RabexPagination.components,
       MuiPaginationItem: RabexPaginationItem.components,
       MuiGrid: RabexGrid.components,
-      MuiLoadingButton: RabexLoadingButton.components
+      MuiLoadingButton: RabexLoadingButton.components,
+      MuiAutocomplete: RabexAutocomplete.components
     }),
     palette: _extends({}, mode === 'light' ? createPalette(RabexLightPalette) : createPalette(RabexDarkPalette)),
     typography: RabexTypography.typography,
@@ -6201,6 +6276,15 @@ var SegmentedControl = /*#__PURE__*/styled(MuiTabs, {
       '& .MuiTab-root.Mui-selected': {
         backgroundColor: theme.palette.base[50],
         color: theme.palette.textColor[900]
+      },
+      '& .MuiTab-root.Mui-disabled': {
+        backgroundColor: theme.palette.base[50],
+        color: theme.palette.textColor[200]
+      },
+      '& .MuiTab-root:hover': {
+        backgroundColor: 'transparent',
+        color: theme.palette.textColor[900],
+        border: "1px solid " + theme.palette.base[50]
       }
     }
   }, ownerState.size === 'sm' && {
@@ -6300,7 +6384,7 @@ var SegmentedControlTab = /*#__PURE__*/styled(function (props) {
     },
     '&.Mui-disabled': {
       cursor: 'not-allowed',
-      color: theme.palette.mode === 'light' ? theme.palette.textColor.A40 : theme.palette.textColor.A60
+      color: theme.palette.textColor[200]
     },
     '& .MuiTab-iconWrapper': {
       fontSize: '14px'