@astral/ui 0.48.4 → 1.0.0-test.1670422830

package/esm/theme/components/MuiButton.js

@@ -1,38 +1,37 @@
 import { ButtonStates } from '../../ButtonBase';
-import { getBgColor, getButtonHeight, getButtonPadding, getColor, getDisabledBgColor, } from '../../ButtonBase/styled';
-export var MuiButton = {
+import { getBgColor, getButtonHeight, getButtonPadding, getColor, getDisabledBgColor, } from '../../ButtonBase/styles';
+export const MuiButton = {
     defaultProps: {
         disableRipple: true,
     },
     styleOverrides: {
-        root: function (_a) {
-            var ownerState = _a.ownerState, theme = _a.theme;
-            var customVariant = ownerState.variant;
-            var customColor = ownerState.color;
-            var selected = ownerState.selected;
+        root({ ownerState, theme }) {
+            const customVariant = ownerState.variant;
+            const customColor = ownerState.color;
+            const selected = ownerState.selected;
             return {
                 display: 'inline-flex',
                 gap: theme.spacing(1),
                 color: getColor({
-                    selected: selected,
-                    theme: theme,
-                    customVariant: customVariant,
-                    customColor: customColor,
-                    buttonState: ButtonStates.DEFAULT,
+                    selected,
+                    theme,
+                    customVariant,
+                    customColor,
+                    buttonState: ButtonStates.Default,
                 }),
                 backgroundColor: getBgColor({
-                    selected: selected,
-                    customColor: customColor,
-                    customVariant: customVariant,
-                    buttonState: ButtonStates.DEFAULT,
-                    theme: theme,
+                    selected,
+                    customColor,
+                    customVariant,
+                    buttonState: ButtonStates.Default,
+                    theme,
                 }),
                 height: getButtonHeight({
-                    theme: theme,
+                    theme,
                     size: ownerState.size,
                 }),
                 padding: getButtonPadding({
-                    theme: theme,
+                    theme,
                     size: ownerState.size,
                 }),
                 fontWeight: theme.typography.button.fontWeight,
@@ -43,61 +42,61 @@ export var MuiButton = {
                 boxShadow: 'none',
                 '&:hover': {
                     color: getColor({
-                        selected: selected,
-                        theme: theme,
-                        customVariant: customVariant,
-                        customColor: customColor,
-                        buttonState: ButtonStates.HOVER,
+                        selected,
+                        theme,
+                        customVariant,
+                        customColor,
+                        buttonState: ButtonStates.Hover,
                     }),
                     backgroundColor: getBgColor({
-                        selected: selected,
-                        customColor: customColor,
-                        customVariant: customVariant,
-                        theme: theme,
-                        buttonState: ButtonStates.HOVER,
+                        selected,
+                        customColor,
+                        customVariant,
+                        theme,
+                        buttonState: ButtonStates.Hover,
                     }),
                     boxShadow: 'none',
                 },
                 '&:active': {
                     color: getColor({
-                        selected: selected,
-                        customColor: customColor,
-                        customVariant: customVariant,
-                        theme: theme,
-                        buttonState: ButtonStates.ACTIVE,
+                        selected,
+                        customColor,
+                        customVariant,
+                        theme,
+                        buttonState: ButtonStates.Active,
                     }),
                     backgroundColor: getBgColor({
-                        selected: selected,
-                        customColor: customColor,
-                        customVariant: customVariant,
-                        theme: theme,
-                        buttonState: ButtonStates.ACTIVE,
+                        selected,
+                        customColor,
+                        customVariant,
+                        theme,
+                        buttonState: ButtonStates.Active,
                     }),
                     outline: 'none',
                 },
                 '&.Mui-disabled': {
                     color: theme.palette.grey['500'],
                     backgroundColor: getDisabledBgColor({
-                        theme: theme,
-                        customVariant: customVariant,
+                        theme,
+                        customVariant,
                     }),
                 },
                 '&.Mui-focusVisible': {
                     color: getColor({
-                        selected: selected,
-                        theme: theme,
-                        customVariant: customVariant,
-                        customColor: customColor,
-                        buttonState: ButtonStates.FOCUS,
+                        selected,
+                        theme,
+                        customVariant,
+                        customColor,
+                        buttonState: ButtonStates.Focus,
                     }),
                     backgroundColor: getBgColor({
-                        selected: selected,
-                        customColor: customColor,
-                        customVariant: customVariant,
-                        theme: theme,
-                        buttonState: ButtonStates.FOCUS,
+                        selected,
+                        customColor,
+                        customVariant,
+                        theme,
+                        buttonState: ButtonStates.Focus,
                     }),
-                    outline: "2px solid ".concat(theme.palette.primary['400']),
+                    outline: `2px solid ${theme.palette.primary['400']}`,
                     boxShadow: 'none',
                 },
                 '&.MuiButton-root .MuiButton-startIcon': {

package/esm/theme/components/MuiButtonBase.js

@@ -1,4 +1,4 @@
-export var MuiButtonBase = {
+export const MuiButtonBase = {
     defaultProps: {
         disableRipple: true,
     },

package/esm/theme/components/MuiCircularProgress.js

@@ -1,10 +1,9 @@
-export var MuiCircularProgress = {
+export const MuiCircularProgress = {
     styleOverrides: {
-        root: function (_a) {
-            var ownerState = _a.ownerState, theme = _a.theme;
+        root({ ownerState, theme }) {
             // В данном случае появилась необходимость использования data- атрибута
             // Подробнее: https://github.com/kaluga-astral/frontend/pull/199/files/5b42598b80e5b199e1b1a1298844a51b489e9c5a#r857514116
-            var color = ownerState["data-color"];
+            const { 'data-color': color } = ownerState;
             return {
                 color: color === 'primary'
                     ? theme.palette.grey[900]

package/esm/theme/components/MuiDialog.js

@@ -1,13 +1,11 @@
-export var MuiDialog = {
+export const MuiDialog = {
     styleOverrides: {
-        root: function (_a) {
-            var theme = _a.theme;
+        root({ theme }) {
             return {
                 background: theme.palette.background.modalShadow,
             };
         },
-        paper: function (_a) {
-            var theme = _a.theme;
+        paper({ theme }) {
             return {
                 borderRadius: theme.shape.small,
             };

package/esm/theme/components/MuiDialogActions.js

@@ -1,7 +1,6 @@
-export var MuiDialogActions = {
+export const MuiDialogActions = {
     styleOverrides: {
-        root: function (_a) {
-            var theme = _a.theme;
+        root: ({ theme }) => {
             return {
                 padding: theme.spacing(4, 6, 6, 6),
                 '>div': {

package/esm/theme/components/MuiDialogContent.js

@@ -1,7 +1,6 @@
-export var MuiDialogContent = {
+export const MuiDialogContent = {
     styleOverrides: {
-        root: function (_a) {
-            var theme = _a.theme;
+        root({ theme }) {
             return {
                 padding: theme.spacing(0, 6),
             };

package/esm/theme/components/MuiDialogTitle.js

@@ -1,13 +1,13 @@
-export var MuiDialogTitle = {
+import { buttonClasses } from '@mui/material';
+export const MuiDialogTitle = {
     styleOverrides: {
-        root: function (_a) {
-            var theme = _a.theme;
+        root({ theme }) {
             return {
-                padding: theme.spacing(6),
+                padding: theme.spacing(6, 6, 4),
                 fontSize: theme.typography.h4.fontSize,
                 fontWeight: theme.typography.h4.fontWeight,
                 lineHeight: theme.typography.h4.lineHeight,
-                '& .ButtonUnstyled-root': {
+                [`& .${buttonClasses.root}`]: {
                     position: 'absolute',
                     right: theme.spacing(5),
                     top: theme.spacing(5),

package/esm/theme/components/MuiFormHelperText.js

@@ -1,7 +1,6 @@
-export var MuiFormHelperText = {
+export const MuiFormHelperText = {
     styleOverrides: {
-        root: function (_a) {
-            var theme = _a.theme;
+        root({ theme }) {
             return {
                 display: 'flex',
                 minHeight: theme.typography.small.lineHeight,

package/esm/theme/components/MuiFormLabel.js

@@ -1,6 +1,6 @@
-export var MuiFormLabel = {
+export const MuiFormLabel = {
     styleOverrides: {
-        root: function () {
+        root() {
             return {
                 position: 'relative',
                 transform: 'none',

package/esm/theme/components/MuiInputLabel.js

@@ -1,10 +1,9 @@
-export var MuiInputLabel = {
+export const MuiInputLabel = {
     defaultProps: {
         shrink: true,
     },
     styleOverrides: {
-        root: function (_a) {
-            var theme = _a.theme;
+        root({ theme }) {
             return {
                 position: 'relative',
                 transform: 'none',

package/esm/theme/components/MuiListItemButton.js

@@ -1,7 +1,6 @@
-export var MuiListItemButton = {
+export const MuiListItemButton = {
     styleOverrides: {
-        root: function (_a) {
-            var theme = _a.theme;
+        root({ theme }) {
             return {
                 '&.Mui-selected': {
                     color: theme.palette.primary[800],

package/esm/theme/components/MuiListItemText.js

@@ -1,6 +1,6 @@
-export var MuiListItemText = {
+export const MuiListItemText = {
     styleOverrides: {
-        root: function () {
+        root() {
             return {
                 overflow: 'hidden',
                 whiteSpace: 'nowrap',

package/esm/theme/components/MuiLoadingButton.js

@@ -1,26 +1,24 @@
 import { loadingButtonClasses } from '@mui/lab';
 import { ButtonStates } from '../../ButtonBase';
-import { getBgColor } from '../../ButtonBase/styled';
-export var MuiLoadingButton = {
+import { getBgColor } from '../../ButtonBase/styles';
+export const MuiLoadingButton = {
     defaultProps: {
         disableRipple: true,
     },
     styleOverrides: {
-        root: function (_a) {
-            var _b;
-            var ownerState = _a.ownerState, theme = _a.theme;
-            var customVariant = ownerState.variant;
-            var customColor = ownerState.color;
-            return _b = {},
-                _b["&.".concat(loadingButtonClasses.loading)] = {
+        root({ ownerState, theme }) {
+            const customVariant = ownerState.variant;
+            const customColor = ownerState.color;
+            return {
+                [`&.${loadingButtonClasses.loading}`]: {
                     backgroundColor: getBgColor({
-                        customColor: customColor,
-                        customVariant: customVariant,
-                        theme: theme,
-                        buttonState: ButtonStates.DEFAULT,
+                        customColor,
+                        customVariant,
+                        theme,
+                        buttonState: ButtonStates.Default,
                     }),
                 },
-                _b;
+            };
         },
     },
 };

package/esm/theme/components/MuiMenu.js

@@ -1,10 +1,9 @@
-export var MuiMenu = {
+export const MuiMenu = {
     defaultProps: {
         autoFocus: false,
     },
     styleOverrides: {
-        paper: function (_a) {
-            var theme = _a.theme;
+        paper({ theme }) {
             return {
                 marginTop: theme.spacing(2),
                 '&.MuiPaper-root': {
@@ -13,8 +12,7 @@ export var MuiMenu = {
                 },
             };
         },
-        list: function (_a) {
-            var theme = _a.theme;
+        list({ theme }) {
             return {
                 padding: theme.spacing(1, 0),
             };

package/esm/theme/components/MuiMenuItem.js

@@ -1,8 +1,8 @@
-export var MuiMenuItem = {
+export const MuiMenuItem = {
     styleOverrides: {
-        root: function (_a) {
-            var theme = _a.theme;
+        root({ theme }) {
             return {
+                padding: theme.spacing(1.5, 10, 1.5, 3),
                 '&:hover': {
                     backgroundColor: theme.palette.background.elementHover,
                 },

package/esm/theme/components/MuiOutlinedInput.js

@@ -1,10 +1,9 @@
-export var MuiOutlinedInput = {
+export const MuiOutlinedInput = {
     defaultProps: {
         notched: false,
     },
     styleOverrides: {
-        root: function (_a) {
-            var theme = _a.theme;
+        root({ theme }) {
             return {
                 fontSize: theme.typography.pxToRem(14),
                 borderRadius: theme.shape.small,
@@ -30,8 +29,7 @@ export var MuiOutlinedInput = {
                 },
             };
         },
-        input: function (_a) {
-            var theme = _a.theme;
+        input({ theme }) {
             return {
                 height: 20,
                 padding: theme.spacing(2.5, 2),
@@ -45,27 +43,24 @@ export var MuiOutlinedInput = {
                 },
             };
         },
-        inputSizeSmall: function (_a) {
-            var theme = _a.theme;
+        inputSizeSmall({ theme }) {
             return {
                 paddingBlock: theme.spacing(1.5),
                 paddingInline: theme.spacing(2),
             };
         },
-        notchedOutline: function (_a) {
-            var theme = _a.theme;
+        notchedOutline({ theme }) {
             return {
                 borderWidth: 2,
                 borderColor: theme.palette.grey[300],
             };
         },
-        multiline: function () {
+        multiline() {
             return {
                 padding: 0,
             };
         },
-        inputMultiline: function (_a) {
-            var theme = _a.theme;
+        inputMultiline({ theme }) {
             return {
                 padding: theme.spacing(2),
             };

package/esm/theme/components/MuiPaginationItem.js

@@ -1,14 +1,12 @@
-export var MuiPaginationItem = {
+export const MuiPaginationItem = {
     styleOverrides: {
-        root: function (_a) {
-            var _b;
-            var theme = _a.theme;
-            return _b = {},
-                _b['&.Mui-selected'] = {
+        root({ theme }) {
+            return {
+                ['&.Mui-selected']: {
                     backgroundColor: theme.palette.grey['900'],
                     color: theme.palette.primary.contrastText,
                 },
-                _b;
+            };
         },
     },
 };

package/esm/theme/components/MuiStep.d.ts

@@ -0,0 +1,3 @@
+import { Components } from '@mui/material';
+import type { Theme } from '../baseTheme';
+export declare const MuiStep: Components<Theme>['MuiStep'];

package/esm/theme/components/MuiStep.js

@@ -0,0 +1,12 @@
+export const MuiStep = {
+    styleOverrides: {
+        horizontal({ theme }) {
+            return {
+                '&:first-child': {
+                    paddingLeft: 0,
+                },
+                padding: theme.spacing(0, 2.5),
+            };
+        },
+    },
+};

package/esm/theme/components/MuiStepConnector.d.ts

@@ -0,0 +1,3 @@
+import { Components } from '@mui/material';
+import type { Theme } from '../baseTheme';
+export declare const MuiStepConnector: Components<Theme>['MuiStepConnector'];

package/esm/theme/components/MuiStepConnector.js

@@ -0,0 +1,7 @@
+export const MuiStepConnector = {
+    styleOverrides: {
+        lineHorizontal({ theme }) {
+            return { borderTopWidth: 2, borderColor: theme.palette.grey[300] };
+        },
+    },
+};

package/esm/theme/components/MuiStepLabel.d.ts

@@ -0,0 +1,3 @@
+import { Components } from '@mui/material';
+import type { Theme } from '../baseTheme';
+export declare const MuiStepLabel: Components<Theme>['MuiStepLabel'];

package/esm/theme/components/MuiStepLabel.js

@@ -0,0 +1,25 @@
+import { stepLabelClasses } from '@mui/material';
+export const MuiStepLabel = {
+    styleOverrides: {
+        label({ theme }) {
+            const { active, completed, error } = stepLabelClasses;
+            return {
+                fontSize: theme.typography.small.fontSize,
+                lineHeight: theme.typography.small.lineHeight,
+                fontWeight: theme.typography.small.fontWeight,
+                color: theme.palette.grey[700],
+                [`&.${active}, &.${completed}, &.${error}`]: {
+                    color: theme.palette.grey[900],
+                    fontSize: theme.typography.small.fontSize,
+                    lineHeight: theme.typography.small.lineHeight,
+                    fontWeight: theme.typography.small.fontWeight,
+                },
+            };
+        },
+        iconContainer({ theme }) {
+            return {
+                paddingRight: theme.spacing(2.5),
+            };
+        },
+    },
+};

package/esm/theme/components/MuiSwitch.d.ts

@@ -0,0 +1,3 @@
+import { Components } from '@mui/material';
+import type { Theme } from '../baseTheme';
+export declare const MuiSwitch: Components<Theme>['MuiSwitch'];

package/esm/theme/components/MuiSwitch.js

@@ -0,0 +1,122 @@
+const prepareColorToUrl = (color) => color.replace('#', '%23');
+const getCheckBackgroundImage = (color) => {
+    const preparedColor = prepareColorToUrl(color);
+    return `url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M2 6L4.5 8.5L10 3.5" stroke="${preparedColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>')`;
+};
+const getCrossBackgroundImage = (color) => {
+    const preparedColor = prepareColorToUrl(color);
+    return `url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6.00005 5.41087L3.79463 3.20545C3.71605 3.12955 3.6108 3.08755 3.50155 3.0885C3.3923 3.08945 3.28779 3.13327 3.21054 3.21053C3.13329 3.28778 3.08947 3.39228 3.08852 3.50153C3.08757 3.61078 3.12957 3.71603 3.20546 3.79462L5.41088 6.00003L3.20546 8.20545C3.12957 8.28403 3.08757 8.38929 3.08852 8.49853C3.08947 8.60778 3.13329 8.71229 3.21054 8.78954C3.28779 8.86679 3.3923 8.91062 3.50155 8.91156C3.6108 8.91251 3.71605 8.87052 3.79463 8.79462L6.00005 6.5892L8.20546 8.79462C8.28405 8.87052 8.3893 8.91251 8.49855 8.91156C8.6078 8.91062 8.7123 8.86679 8.78956 8.78954C8.86681 8.71229 8.91063 8.60778 8.91158 8.49853C8.91253 8.38929 8.87053 8.28403 8.79463 8.20545L6.58921 6.00003L8.79463 3.79462C8.83443 3.75618 8.86617 3.7102 8.88801 3.65937C8.90984 3.60853 8.92134 3.55386 8.92182 3.49853C8.9223 3.44321 8.91176 3.38834 8.89081 3.33714C8.86986 3.28593 8.83892 3.23941 8.7998 3.20029C8.76067 3.16116 8.71415 3.13023 8.66294 3.10927C8.61174 3.08832 8.55687 3.07778 8.50155 3.07826C8.44622 3.07874 8.39155 3.09024 8.34071 3.11207C8.28988 3.13391 8.2439 3.16565 8.20546 3.20545L6.00005 5.41087Z" fill="${preparedColor}" stroke="${preparedColor}" stroke-width="1.5" /></svg>')`;
+};
+export const MuiSwitch = {
+    styleOverrides: {
+        root({ theme }) {
+            return {
+                width: 'fit-content',
+                height: 'fit-content',
+                padding: theme.spacing(1),
+                // CHECKED
+                '& .Mui-checked.MuiSwitch-switchBase': {
+                    padding: 0,
+                    '& + .MuiSwitch-track': {
+                        backgroundColor: theme.palette.primary.main[800],
+                        opacity: 1,
+                    },
+                },
+                // NOT CHECKED
+                '& :not(.Mui-checked).MuiSwitch-switchBase': {
+                    padding: 0,
+                    '& + .MuiSwitch-track': {
+                        backgroundColor: theme.palette.grey[700],
+                        opacity: 1,
+                    },
+                },
+                // CHECKED HOVER
+                '& .Mui-checked:hover + .MuiSwitch-track': {
+                    backgroundColor: theme.palette.primary[700],
+                },
+                // NOT CHECKED HOVER
+                '& :not(.Mui-checked):hover + .MuiSwitch-track': {
+                    backgroundColor: theme.palette.grey[500],
+                },
+                // DISABLED TRACK
+                '& .MuiButtonBase-root.MuiSwitch-switchBase.Mui-disabled': {
+                    '& + .MuiSwitch-track': {
+                        backgroundColor: theme.palette.grey[200],
+                        '&::before': {
+                            backgroundImage: getCheckBackgroundImage(theme.palette.grey[500]),
+                        },
+                        '&::after': {
+                            backgroundImage: getCrossBackgroundImage(theme.palette.grey[500]),
+                        },
+                    },
+                },
+                // ACTIVE TRACK
+                '& :not(.Mui-disabled):active + .MuiSwitch-track': {
+                    border: `2px solid ${theme.palette.primary[400]}`,
+                },
+            };
+        },
+        switchBase: {
+            padding: 0,
+            '&:hover, &.Mui-checked:hover': {
+                backgroundColor: 'transparent',
+            },
+        },
+        track({ theme }) {
+            return {
+                borderRadius: 10,
+                boxSizing: 'border-box',
+                '&::before, &::after': {
+                    position: 'absolute',
+                    top: '50%',
+                    transform: 'translateY(-50%)',
+                    content: '""',
+                    backgroundSize: 'cover',
+                },
+                '&::before': {
+                    left: theme.spacing(2),
+                    backgroundImage: getCheckBackgroundImage(theme.palette.background.default),
+                },
+                '&::after': {
+                    right: theme.spacing(2),
+                    backgroundImage: getCrossBackgroundImage(theme.palette.background.default),
+                },
+            };
+        },
+        thumb({ theme }) {
+            return {
+                backgroundColor: theme.palette.background.default,
+                boxShadow: 'none',
+                margin: theme.spacing(1.5),
+            };
+        },
+        sizeSmall: {
+            '& .MuiSwitch-track': {
+                width: 32,
+                height: 16,
+                '&::before, &::after': {
+                    width: 8,
+                    height: 8,
+                },
+            },
+            '& .MuiSwitch-thumb': {
+                width: 12,
+                height: 12,
+            },
+        },
+        sizeMedium: {
+            '& .MuiSwitch-track': {
+                width: 40,
+                height: 20,
+                '&::before, &::after': {
+                    width: 12,
+                    height: 12,
+                },
+            },
+            '& .MuiSwitch-thumb': {
+                width: 16,
+                height: 16,
+            },
+        },
+    },
+};

package/esm/theme/components/MuiTab.d.ts

@@ -0,0 +1,3 @@
+import { Components } from '@mui/material';
+import type { Theme } from '../baseTheme';
+export declare const MuiTab: Components<Theme>['MuiTab'];

package/esm/theme/components/MuiTab.js

@@ -0,0 +1,11 @@
+export const MuiTab = {
+    styleOverrides: {
+        root({ theme }) {
+            return {
+                minWidth: 0,
+                padding: theme.spacing(0, 2),
+                textTransform: 'none',
+            };
+        },
+    },
+};