@rabex-kit/rabex-ui 0.1.10 → 0.1.13

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

@@ -2254,7 +2254,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 {};
@@ -2266,7 +2266,8 @@ Tabs.defaultProps = {
   hasBorder: false,
   isSeprate: false,
   variant: 'fullWidth',
-  size: 'sm'
+  size: 'sm',
+  mode: 'underline'
 };
 
 var RabexTypography = {
@@ -3114,7 +3115,32 @@ var RabexTabs = {
         return _extends({
           borderRadius: 8,
           minHeight: 'unset',
-          color: theme.palette.base.A10
+          color: theme.palette.base.A10,
+          '& .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)
+          }
+        }, 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),
@@ -3127,7 +3153,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
@@ -3135,33 +3161,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' && {
@@ -3172,7 +3181,7 @@ var RabexTabs = {
         });
       },
       indicator: {
-        display: 'none'
+        display: 'show'
       }
     },
     variants: []
@@ -5668,7 +5677,7 @@ var _excluded$m = ["theme"];
 var SegmentedControl = /*#__PURE__*/styled(MuiTabs, {
   name: 'SegmentedControl',
   shouldForwardProp: function shouldForwardProp(prop) {
-    return !['size', 'isSeparate', 'hasBorder'].includes(prop);
+    return !['size'].includes(prop);
   }
 })(function (_ref) {
   var theme = _ref.theme,
@@ -5716,22 +5725,6 @@ var SegmentedControl = /*#__PURE__*/styled(MuiTabs, {
       color: 'inherit',
       borderRadius: theme.spacing(2)
     }
-  }, ownerState.isSeparate && {
-    '& .MuiTabs-flexContainer': {
-      gap: theme.spacing(1),
-      padding: theme.spacing(1)
-    },
-    '& .MuiTab-root': {
-      borderRadius: theme.spacing(1),
-      padding: theme.spacing(2, 3)
-    }
-  }, ownerState.hasBorder && {
-    border: "2px dotted " + theme.palette.divider,
-    '& .MuiTab-root': {
-      borderRadius: theme.spacing(1),
-      border: "2px dotted " + theme.palette.divider,
-      lineHeight: theme.spacing(2)
-    }
   }, ownerState.variant === 'fullWidth' && {
     width: '100%'
   }, {
@@ -5743,17 +5736,13 @@ var SegmentedControl = /*#__PURE__*/styled(MuiTabs, {
 });
 SegmentedControl.defaultProps = {
   variant: 'fullWidth',
-  size: 'sm',
-  isSeparate: false,
-  hasBorder: false
+  size: 'sm'
 };
 
-// Custom SegmentedControlTab with styled applied based on size
+// Custom SegmentedControlTab with applied styles
 var SegmentedControlTab = /*#__PURE__*/styled(function (props) {
   return React__default.createElement(MuiTab, Object.assign({}, props, {
-    label:
-    // Render custom Typography for the label
-    React__default.createElement(Typography, {
+    label: React__default.createElement(Typography, {
       variant: "body2",
       weight: "semiBold"
     }, props.label)
@@ -5762,16 +5751,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': {