@rabex-kit/rabex-ui 0.1.33 → 0.1.35

package/dist/rabex-ui.esm.js

@@ -3126,20 +3126,32 @@ var RabexTabs = {
       root: function root(_ref) {
         var ownerState = _ref.ownerState,
           theme = _ref.theme;
-        return _extends({
+        // The ownerState now contains all the props you need
+        var _ref2 = ownerState || {},
+          hasBorder = _ref2.hasBorder,
+          isSeparate = _ref2.isSeparate,
+          size = _ref2.size,
+          mode = _ref2.mode,
+          variant = _ref2.variant,
+          orientation = _ref2.orientation;
+        // Default styles applied to all tabs
+        var baseStyles = {
           borderRadius: 8,
           minHeight: 'unset',
-          color: theme.palette.base.A10
-        }, ownerState.mode === 'underline' && {
+          color: theme.palette.base.A10,
+          /// remove the separation border
+          '& .MuiTab-root::after': {
+            display: 'none'
+          }
+        };
+        // Mode-specific styles
+        var modeStyles = mode === 'underline' ? {
           '& .MuiTab-root.Mui-selected': {
             borderRadius: 4,
             color: theme.palette.mode === 'light' ? theme.palette.textColor.A60 : theme.palette.textColor.A0
           },
-          '& .MuiTabs-flexContainer': {
-            // padding: theme.spacing(1)
-          },
           backgroundColor: 'unset'
-        }, ownerState.mode === 'pill' && {
+        } : {
           '& .MuiTab-root.Mui-selected': {
             borderRadius: 4,
             color: theme.palette.mode === 'light' ? theme.palette.textColor.A60 : theme.palette.textColor.A0
@@ -3148,58 +3160,97 @@ var RabexTabs = {
             padding: theme.spacing(1)
           },
           backgroundColor: theme.palette.mode === 'light' ? theme.palette.secondary.A100 : theme.palette.secondary.A100
-        }, ownerState.size === 'sm' && {
-          '& .MuiTabs-fixed': {
-            padding: theme.spacing(1, 2),
-            marginBottom: theme.spacing(2)
-          },
-          height: theme.spacing(8),
-          borderRadius: theme.spacing(2)
-        }, ownerState.size === 'md' && {
-          '& .MuiTabs-fixed': {
-            padding: theme.spacing(2, 4),
-            marginBottom: theme.spacing(2)
-          },
-          height: theme.spacing(10),
-          borderRadius: theme.spacing(2)
-        }, ownerState.size === 'lg' && {
-          '& .MuiTabs-fixed': {
-            padding: theme.spacing(3, 4),
-            marginBottom: theme.spacing(3)
-          },
-          height: theme.spacing(12),
-          borderRadius: theme.spacing(3)
-        }, ownerState.mode === 'underline' && {
-          '& .MuiTab-root.Mui-selected': {
-            borderRadius: 4,
-            color: theme.palette.mode === 'light' ? theme.palette.textColor.A60 : theme.palette.textColor.A0
+        };
+        // Size-specific styles
+        var sizeMap = mode === 'underline' ? {
+          sm: {
+            '& .MuiTabs-fixed': {
+              '& .MuiTab-root': {
+                padding: theme.spacing(1, 2)
+              },
+              // padding: theme.spacing(1, 2),
+              marginBottom: theme.spacing(2)
+            },
+            height: theme.spacing(8),
+            borderRadius: theme.spacing(2)
           },
-          '& .MuiTabs-flexContainer': {
-            padding: theme.spacing(1)
+          md: {
+            '& .MuiTabs-fixed': {
+              '& .MuiTab-root': {
+                padding: theme.spacing(2, 4)
+              },
+              // padding: theme.spacing(2, 4),
+              marginBottom: theme.spacing(2)
+            },
+            height: theme.spacing(10),
+            borderRadius: theme.spacing(2)
           },
-          backgroundColor: 'unset'
-        }, ownerState.mode === 'pill' && {
-          '& .MuiTab-root.Mui-selected': {
-            borderRadius: 4,
-            color: theme.palette.mode === 'light' ? theme.palette.textColor.A60 : theme.palette.textColor.A0
+          lg: {
+            '& .MuiTabs-fixed': {
+              '& .MuiTab-root': {
+                padding: theme.spacing(3, 4)
+              },
+              // padding: theme.spacing(3, 4),
+              marginBottom: theme.spacing(3)
+            },
+            height: theme.spacing(12),
+            borderRadius: theme.spacing(3)
+          }
+        } : {
+          sm: {
+            '& .MuiTabs-fixed': {
+              padding: theme.spacing(1, 2),
+              marginBottom: theme.spacing(2)
+            },
+            height: theme.spacing(8),
+            borderRadius: theme.spacing(2)
           },
-          '& .MuiTabs-flexContainer': {
-            padding: theme.spacing(1)
+          md: {
+            '& .MuiTabs-fixed': {
+              padding: theme.spacing(2, 4),
+              marginBottom: theme.spacing(2)
+            },
+            height: theme.spacing(10),
+            borderRadius: theme.spacing(2)
           },
-          backgroundColor: theme.palette.mode === 'light' ? theme.palette.secondary.A100 : theme.palette.secondary.A100
-        }, ownerState.variant === 'fullWidth' && {
+          lg: {
+            '& .MuiTabs-fixed': {
+              padding: theme.spacing(3, 4),
+              marginBottom: theme.spacing(3)
+            },
+            height: theme.spacing(12),
+            borderRadius: theme.spacing(3)
+          }
+        };
+        var sizeStyles = sizeMap[size || 'sm'] || sizeMap.sm;
+        // Variant-specific styles
+        var variantStyles = variant === 'fullWidth' ? {
           width: '100%'
-        }, ownerState.orientation === 'vertical' && {
+        } : {};
+        // Orientation-specific styles
+        var orientationStyles = orientation === 'vertical' ? {
           '& .MuiTab-root::after': {
             content: 'unset',
             display: 'none'
           }
-        });
+        } : {};
+        // Border styles
+        var borderStyles = hasBorder ? isSeparate ? {
+          '& .MuiTab-root': {
+            borderRadius: 5,
+            padding: theme.spacing(2, 3),
+            border: "2px dotted " + theme.palette.base.A40
+          }
+        } : {
+          border: "2px dotted " + theme.palette.base.A40
+        } : {};
+        // Return combined styles
+        return _extends({}, baseStyles, modeStyles, sizeStyles, variantStyles, orientationStyles, borderStyles);
       },
-      indicator: function indicator(_ref2) {
-        var ownerState = _ref2.ownerState;
+      indicator: function indicator(_ref3) {
+        var ownerState = _ref3.ownerState;
         return {
-          display: ownerState.mode === 'underline' ? 'show' : 'none'
+          display: (ownerState === null || ownerState === void 0 ? void 0 : ownerState.mode) === 'underline' ? 'show' : 'none'
         };
       }
     },