@rabex-kit/rabex-ui 0.1.10 → 0.1.11

package/dist/rabex-ui.esm.js

@@ -2249,7 +2249,7 @@ var TabPanel = function TabPanel(_ref) {
 var Tabs = /*#__PURE__*/styled(MuiTabs, {
   name: 'MuiTabs',
   shouldForwardProp: function shouldForwardProp(prop) {
-    return !['hasBorder', 'isSeprate', 'size'].includes(prop);
+    return !['hasBorder', 'isSeprate', 'size', 'mode'].includes(prop);
   }
 })(function () {
   return {};
@@ -2261,7 +2261,8 @@ Tabs.defaultProps = {
   hasBorder: false,
   isSeprate: false,
   variant: 'fullWidth',
-  size: 'sm'
+  size: 'sm',
+  mode: 'underline'
 };
 
 var RabexTypography = {
@@ -3110,6 +3111,24 @@ var RabexTabs = {
           borderRadius: 8,
           minHeight: 'unset',
           color: theme.palette.base.A10
+        }, ownerState.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
+          },
+          '& .MuiTabs-flexContainer': {
+            padding: theme.spacing(1)
+          },
+          backgroundColor: theme.palette.mode === 'light' ? theme.palette.secondary.A100 : theme.palette.secondary.A100
         }, ownerState.size === 'sm' && {
           height: theme.spacing(8),
           borderRadius: theme.spacing(2),
@@ -3122,7 +3141,7 @@ var RabexTabs = {
           height: theme.spacing(14),
           borderRadius: theme.spacing(3),
           padding: theme.spacing(3, 4)
-        }, !ownerState.isSeprate && {
+        }, ownerState.mode === 'underline' && {
           '& .MuiTab-root.Mui-selected': {
             borderRadius: 4,
             color: theme.palette.mode === 'light' ? theme.palette.textColor.A60 : theme.palette.textColor.A0
@@ -3130,33 +3149,16 @@ var RabexTabs = {
           '& .MuiTabs-flexContainer': {
             padding: theme.spacing(1)
           },
-          backgroundColor: theme.palette.mode === 'light' ? theme.palette.secondary.A100 : theme.palette.secondary.A100
-        }, ownerState.isSeprate && {
-          backgroundColor: 'unset',
+          backgroundColor: 'unset'
+        }, ownerState.mode === 'pill' && {
+          '& .MuiTab-root.Mui-selected': {
+            borderRadius: 4,
+            color: theme.palette.mode === 'light' ? theme.palette.textColor.A60 : theme.palette.textColor.A0
+          },
           '& .MuiTabs-flexContainer': {
-            gridGap: theme.spacing(1.5),
             padding: theme.spacing(1)
           },
-          '& .MuiTab-root': {
-            borderRadius: '7px',
-            padding: theme.spacing(2, 3)
-          },
-          '& .MuiTab-root.Mui-selected': {
-            borderRadius: 5,
-            color: theme.palette.mode === 'light' ? theme.palette.textColor.A60 : theme.palette.textColor.A0,
-            boxShadow: theme.shadows[2]
-          },
-          '& .MuiTab-root::after': {
-            display: 'none'
-          }
-        }, ownerState.hasBorder && ownerState.isSeprate && {
-          '& .MuiTab-root': {
-            borderRadius: 5,
-            padding: theme.spacing(2, 3),
-            border: "2px dotted " + theme.palette.base.A40
-          }
-        }, ownerState.hasBorder && !ownerState.isSeprate && {
-          border: "2px dotted " + theme.palette.base.A40
+          backgroundColor: theme.palette.mode === 'light' ? theme.palette.secondary.A100 : theme.palette.secondary.A100
         }, ownerState.variant === 'fullWidth' && {
           width: '100%'
         }, ownerState.orientation === 'vertical' && {
@@ -3167,7 +3169,7 @@ var RabexTabs = {
         });
       },
       indicator: {
-        display: 'none'
+        display: 'show'
       }
     },
     variants: []
@@ -5743,12 +5745,10 @@ SegmentedControl.defaultProps = {
   hasBorder: false
 };
 
-// Custom SegmentedControlTab with styled applied based on size
+// Custom SegmentedControlTab with applied styles
 var SegmentedControlTab = /*#__PURE__*/styled(function (props) {
   return React.createElement(MuiTab, Object.assign({}, props, {
-    label:
-    // Render custom Typography for the label
-    React.createElement(Typography, {
+    label: React.createElement(Typography, {
       variant: "body2",
       weight: "semiBold"
     }, props.label)
@@ -5757,16 +5757,27 @@ var SegmentedControlTab = /*#__PURE__*/styled(function (props) {
   var theme = _ref.theme;
   return {
     minWidth: 80,
-    color: theme.palette.mode === 'light' ? theme.palette.textColor[900] : theme.palette.textColor.A40,
+    fontWeight: 600,
+    color: theme.palette.mode === 'light' ? theme.palette.textColor.A60 : theme.palette.textColor.A40,
+    padding: theme.spacing(0, 2),
     position: 'relative',
     minHeight: 24,
-    borderRadius: 'unset',
+    borderRadius: theme.spacing(1),
     '&::after': {
+      content: "''",
+      position: 'absolute',
+      width: 1,
+      height: 12,
+      background: theme.palette.grayBackground.A40,
+      top: 'calc(50% - 6px)',
+      left: 0
+    },
+    '&.Mui-selected::after, &:first-of-type::after, &.Mui-selected + .MuiTab-root::after': {
       content: 'unset',
       display: 'none'
     },
-    '&.MuiTab-root.Mui-selected': {
-      backgroundColor: theme.palette.mode === 'light' ? theme.palette.base[50] : theme.palette.secondary.A80,
+    '&.Mui-selected': {
+      backgroundColor: theme.palette.mode === 'light' ? theme.palette.base.A0 : theme.palette.secondary.A80,
       color: theme.palette.textColor[900]
     },
     '&.Mui-disabled': {