@rabex-kit/rabex-ui 0.2.74 → 0.2.76

package/dist/rabex-ui.esm.js

@@ -119,6 +119,7 @@ import MuiStepper from '@mui/material/Stepper/Stepper.js';
 import MuiSwipeableDrawer from '@mui/material/SwipeableDrawer/SwipeableDrawer.js';
 import { ClickAwayListener as ClickAwayListener$1 } from '@mui/base/ClickAwayListener';
 import MuiZoom from '@mui/material/Zoom/Zoom.js';
+import MuiSwitch from '@mui/material/Switch/Switch.js';
 
 /**
  * The accordion component allows the user to show and hide sections of related content on a page.
@@ -5967,6 +5968,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 +6133,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,
@@ -7196,5 +7300,27 @@ var SegmentedControlTab = /*#__PURE__*/styled(function (props) {
 });
 SegmentedControlTab.defaultProps = {};
 
-export { Accordion, AccordionActions, AccordionDetails, AccordionSummary, Alert, AlertAction, AlertTimer, AlertTitle, Autocomplete, Avatar, Backdrop, Box, Breadcrumbs, Button, Checkbox, Chip, CircularProgress, ClickAwayListener, Collapse, Container, CurrencyPairsTitle, Dialog, DialogActions, DialogContent, DialogTitle, Divider, Drawer, DynamicBackground, DynamicBackgroundContainer, Fade, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, FormikInput, FormikSelect, FormikTextField, Grid, Grow, IconButton, Input, InputAdornment, InputLabel, LinearProgress, Link, List, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemSecondaryAction, listItemText as ListItemText, ListSubHeader, LoadingButton, Menu, MenuItem, MenuList, MobileStepper, Modal, ModalContent, NoSsr, Pagination, PaginationItem, Paper, Popover, Popper, RTable, RTableHead, RTableRow, Radio, RadioGroup, SeeMore, SegmentedControl, SegmentedControlTab, Select, SelectItem, Skeleton, Slide, Slider, SliderContent, Snackbar, SnackbarContent, Stack, Step, StepButton, StepConnector, StepContent, StepIcon, StepLabel, Stepper, SvgIcon, SwipeableDrawer, Tab, TabContext, TabList, TabPanel, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, Tabs, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography, UploadButton, Zoom, numberUtils, handleSearch as searchUtils, theme, useCopyToClipboard, useOnScreen, useResponsive, useTime, useWindowSize };
+/**
+ * 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`.
+ */
+var Switch = function Switch(props) {
+  return React.createElement(MuiSwitch, Object.assign({}, props));
+};
+
+export { Accordion, AccordionActions, AccordionDetails, AccordionSummary, Alert, AlertAction, AlertTimer, AlertTitle, Autocomplete, Avatar, Backdrop, Box, Breadcrumbs, Button, Checkbox, Chip, CircularProgress, ClickAwayListener, Collapse, Container, CurrencyPairsTitle, Dialog, DialogActions, DialogContent, DialogTitle, Divider, Drawer, DynamicBackground, DynamicBackgroundContainer, Fade, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, FormikInput, FormikSelect, FormikTextField, Grid, Grow, IconButton, Input, InputAdornment, InputLabel, LinearProgress, Link, List, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemSecondaryAction, listItemText as ListItemText, ListSubHeader, LoadingButton, Menu, MenuItem, MenuList, MobileStepper, Modal, ModalContent, NoSsr, Pagination, PaginationItem, Paper, Popover, Popper, RTable, RTableHead, RTableRow, Radio, RadioGroup, SeeMore, SegmentedControl, SegmentedControlTab, Select, SelectItem, Skeleton, Slide, Slider, SliderContent, Snackbar, SnackbarContent, Stack, Step, StepButton, StepConnector, StepContent, StepIcon, StepLabel, Stepper, SvgIcon, SwipeableDrawer, Switch, Tab, TabContext, TabList, TabPanel, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, Tabs, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography, UploadButton, Zoom, numberUtils, handleSearch as searchUtils, theme, useCopyToClipboard, useOnScreen, useResponsive, useTime, useWindowSize };
 //# sourceMappingURL=rabex-ui.esm.js.map