@rabex-kit/rabex-ui 0.2.74 → 0.2.75

package/dist/rabex-ui.esm.js

@@ -5967,6 +5967,108 @@ var RabexSkeleton = {
   components: components$a
 };
 
+var SIZE_MAP = {
+  sm: {
+    trackWidth: 60,
+    trackHeight: 32,
+    thumb: 24,
+    translateX: 28,
+    top: 2,
+    left: 2
+  },
+  xs: {
+    trackWidth: 44,
+    trackHeight: 24,
+    thumb: 16,
+    translateX: 20,
+    top: 2,
+    left: 2
+  },
+  '2xs': {
+    trackWidth: 32,
+    trackHeight: 16,
+    thumb: 12,
+    translateX: 16,
+    top: 0,
+    left: 0
+  }
+};
+var components$b = {
+  styleOverrides: {
+    root: function root(_ref) {
+      var ownerState = _ref.ownerState,
+        theme = _ref.theme;
+      var size = SIZE_MAP[ownerState.size] || SIZE_MAP['2xs'];
+      return {
+        padding: 0,
+        width: size.trackWidth,
+        height: size.trackHeight,
+        marginRight: 8,
+        '&.Mui-disabled + .MuiFormControlLabel-label': {
+          color: theme.palette.textColor[400],
+          opacity: '32%'
+        },
+        '& + .MuiFormControlLabel-label': {
+          color: theme.palette.textColor[900]
+        }
+      };
+    },
+    switchBase: function switchBase(_ref2) {
+      var ownerState = _ref2.ownerState,
+        theme = _ref2.theme;
+      var size = SIZE_MAP[ownerState.size] || SIZE_MAP['2xs'];
+      return {
+        padding: 0,
+        margin: 2,
+        top: size.top,
+        left: size.left,
+        '&.Mui-checked': {
+          transform: "translateX(" + size.translateX + "px)",
+          color: theme.palette.base[50],
+          '& + .MuiSwitch-track': {
+            backgroundColor: theme.palette.primary[500],
+            opacity: 1
+          }
+        },
+        '&.Mui-disabled': {
+          color: theme.palette.base[200],
+          opacity: '32%',
+          '& + .MuiSwitch-track': {
+            backgroundColor: theme.palette.base[200],
+            opacity: '32%'
+          }
+        }
+      };
+    },
+    thumb: function thumb(_ref3) {
+      var ownerState = _ref3.ownerState,
+        theme = _ref3.theme;
+      var size = SIZE_MAP[ownerState.size] || SIZE_MAP['2xs'];
+      return {
+        width: size.thumb,
+        height: size.thumb,
+        backgroundColor: theme.palette.base[50],
+        boxShadow: 'none'
+      };
+    },
+    track: function track(_ref4) {
+      var ownerState = _ref4.ownerState,
+        theme = _ref4.theme;
+      var size = SIZE_MAP[ownerState.size] || SIZE_MAP['2xs'];
+      return {
+        width: size.trackWidth,
+        height: size.trackHeight,
+        borderRadius: size.trackHeight / 2,
+        backgroundColor: theme.palette.base[300],
+        opacity: 1
+      };
+    }
+  }
+};
+var RabexSwitch = {
+  components: components$b
+};
+
 var getDesignTokens = function getDesignTokens(_ref) {
   var deviceType = _ref.deviceType,
     _ref$mode = _ref.mode,
@@ -6030,7 +6132,8 @@ var getDesignTokens = function getDesignTokens(_ref) {
       MuiGrid: RabexGrid.components,
       MuiLoadingButton: RabexLoadingButton.components,
       MuiAutocomplete: RabexAutocomplete.components,
-      MuiSkeleton: RabexSkeleton.components
+      MuiSkeleton: RabexSkeleton.components,
+      MuiSwitch: RabexSwitch.components
     }),
     palette: _extends({}, mode === 'light' ? createPalette(RabexLightPalette) : createPalette(RabexDarkPalette)),
     typography: RabexTypography.typography,