@rabex-kit/rabex-ui 0.2.73 → 0.2.75

package/dist/Switch/index.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { SwitchProps as MuiSwitchProps } from '@mui/material';
+export declare type SwitchProps = MuiSwitchProps;
+declare module '@mui/material/Switch' {
+    interface SwitchPropsSizeOverrides {
+        small: true;
+        medium: true;
+        sm: true;
+        xs: true;
+        '2xs': true;
+    }
+}
+/**
+ * Rabex Switch
+ *
+ * A thin wrapper around MUI Switch.
+ *
+ * Styling and behavior are controlled exclusively via theme overrides.
+ * This keeps the component lightweight, predictable, and consistent
+ * across the application.
+ *
+ * @example
+ * ```tsx
+ * import { Switch } from '@rabex-kit/rabex-ui';
+ *
+ * <Switch checked={value} onChange={handleChange} />
+ * ```
+ *
+ * For labeling, always use `FormControlLabel`.
+ */
+declare const Switch: React.FC<SwitchProps>;
+export default Switch;

package/dist/Theme/Switch/index.d.ts

@@ -0,0 +1,18 @@
+import { Theme } from '@mui/material';
+declare const _default: {
+    components: {
+        defaultProps?: Partial<import("@mui/material").SwitchProps> | undefined;
+        styleOverrides?: Partial<Record<"root" | "edgeStart" | "edgeEnd" | "switchBase" | "colorPrimary" | "colorSecondary" | "sizeSmall" | "sizeMedium" | "checked" | "disabled" | "input" | "thumb" | "track", string | number | boolean | import("@mui/styled-engine").CSSObject | import("@mui/styled-engine").ComponentSelector | import("@mui/styled-engine").Keyframes | import("@mui/styled-engine").SerializedStyles | import("@mui/styled-engine").ArrayCSSInterpolation | ((props: {
+            ownerState: import("@mui/material").SwitchProps & Record<string, unknown>;
+        } & {
+            theme: Pick<Theme, "unstable_sx" | "unstable_sxConfig" | "mixins" | "palette" | "shadows" | "transitions" | "typography" | "zIndex" | "unstable_strictMode" | "shape" | "breakpoints" | "direction" | "spacing">;
+        } & Record<string, unknown>) => import("@mui/styled-engine").CSSInterpolation) | null | undefined>> | undefined;
+        variants?: {
+            props: Partial<import("@mui/material").SwitchProps>;
+            style: import("@mui/styled-engine").Interpolation<{
+                theme: Theme;
+            }>;
+        }[] | undefined;
+    };
+};
+export default _default;

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

@@ -3246,15 +3246,15 @@ var RabexTypography = {
     },
     body1: {
       fontSize: '16px',
-      lineHeight: '26px'
+      lineHeight: '32px'
     },
     largeButton: {
       fontSize: '16px',
-      lineHeight: '26px'
+      lineHeight: '32px'
     },
     inputLabel: {
       fontSize: '16px',
-      lineHeight: '26px'
+      lineHeight: '32px'
     },
     body2: {
       fontSize: '14px',
@@ -5971,6 +5971,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,
@@ -6034,7 +6136,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,