@webpros/mui-theme 0.1.6 → 0.2.0

package/dist/src/components/index.js

@@ -1,5 +1,6 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
 export * from './utils/CssBaseline';
+export * from './utils/Backdrop';
 export * from './feedback/Alert';
 export * from './feedback/Snackbar';
 export * from './feedback/CircularProgress';
@@ -21,6 +22,7 @@ export * from './navigation/Drawer';
 export * from './inputs/Fab';
 export * from './inputs/IconButton';
 export * from './data-display/Divider';
+export * from './data-display/List';
 export * from './data-display/ListItem';
 export * from './data-display/ListItemButton';
 export * from './data-display/ListItemIcon';
@@ -31,14 +33,21 @@ export * from './data-display/Table';
 export * from './navigation/Menu';
 export * from './navigation/MenuItem';
 export * from './surfaces/Paper';
+export * from './surfaces/Popover';
 export * from './inputs/Switch';
 export * from './navigation/Link';
+export * from './navigation/Breadcrumbs';
 export * from './navigation/PaginationItem';
 export * from './navigation/Tab';
-export * from './navigation/TabList';
+export * from './navigation/Tabs';
 export * from './inputs/TextField';
 export * from './inputs/ToggleButton';
 export * from './inputs/ToggleButtonGroup';
 export * from './data-display/Tooltip';
 export * from './data-display/Typography';
 export * from './inputs/InputBase';
+export * from './data-display/Skeleton';
+export * from './inputs/FormLabel';
+export * from './inputs/OutlinedInput';
+export * from './inputs/FormHelperText';
+export * from './inputs/Radio';

package/dist/src/components/inputs/Autocomplete/Autocomplete.theme.d.ts

@@ -6,5 +6,5 @@ interface M3Autocomplete {
         variants?: ComponentsVariants['MuiAutocomplete'];
     };
 }
-export declare const getAutocomplete: (theme: Theme) => M3Autocomplete;
+export declare const getAutocomplete: () => M3Autocomplete;
 export {};

package/dist/src/components/inputs/Autocomplete/Autocomplete.theme.js

@@ -1,64 +1,36 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { alpha, } from '@mui/material';
-import { ChipDeleteIcon } from '../../../components/data-display/Chip/components/ChipDeleteIcon';
-import { AutocompletePopupIcon } from '../../../components/inputs/Autocomplete/components/AutocompletePopupIcon';
-export const getAutocomplete = (theme) => {
-    const { palette } = theme;
+import { outlinedInputClasses, inputBaseClasses, } from '@mui/material';
+import { AutocompleteCaretDownIcon } from '../../../components/inputs/Autocomplete/components/AutocompleteCaretDownIcon';
+import { AutocompleteXIcon } from '../../../components/inputs/Autocomplete/components/AutocompleteXIcon';
+export const getAutocomplete = () => {
     return {
         MuiAutocomplete: {
             defaultProps: {
-                clearIcon: ChipDeleteIcon,
-                popupIcon: AutocompletePopupIcon,
+                clearIcon: AutocompleteXIcon,
+                popupIcon: AutocompleteCaretDownIcon,
+                slotProps: {
+                    paper: {
+                        elevation: 3,
+                    },
+                },
             },
             styleOverrides: {
                 root: {
-                    '.MuiOutlinedInput-root.MuiInputBase-sizeSmall': {
-                        padding: '4px 8px',
-                        '.MuiAutocomplete-input': {
-                            padding: '6px 8px',
-                            height: '21px',
-                        },
-                        '.MuiAutocomplete-popupIndicator': {
-                            width: '20px',
-                            marginRight: '-4px',
-                        },
-                    },
-                    svg: {
-                        width: '16px',
-                        height: '16px',
-                        fontSize: '16px',
-                        color: palette.supportive.main,
-                    },
-                },
-                paper: {
-                    borderRadius: 16,
-                    backgroundColor: palette.surfaceContainerHigh.light,
-                    boxShadow: theme.shadows[2],
-                    color: palette.onSurface.main,
-                },
-                popupIndicator: {
-                    fontSize: '16px',
-                    ':hover': {
-                        background: 'none',
+                    [`& .${outlinedInputClasses.root}.${inputBaseClasses.sizeSmall}`]: {
+                        // Don't specify paddingRight, as it overrides the default value set when there is only
+                        // one of the popup or clear icon as the specificity is equal so the latter one wins
+                        paddingTop: 4.5,
+                        paddingBottom: 4.5,
+                        paddingLeft: 6,
                     },
-                    '> svg': {
-                        color: palette.supportive.main,
+                    [`& .${outlinedInputClasses.root}`]: {
+                        padding: '3.5px 9px 3.5px',
                     },
                 },
-                listbox: {
-                    '& .MuiAutocomplete-option': {
-                        padding: '8px 12px',
-                        '&:hover': {
-                            backgroundColor: alpha(palette.onSurface.main, 0.04),
-                        },
-                        '&[aria-selected="true"]': {
-                            backgroundColor: palette.secondaryContainer.main,
-                        },
-                    },
-                },
-                clearIndicator: {
-                    ':hover': {
-                        background: 'none',
+                endAdornment: {
+                    svg: {
+                        width: 20,
+                        height: 20,
                     },
                 },
             },

package/dist/src/components/inputs/Autocomplete/components/AutocompleteCaretDownIcon.d.ts

@@ -0,0 +1 @@
+export declare const AutocompleteCaretDownIcon: import("react/jsx-runtime").JSX.Element;

package/dist/src/components/inputs/Autocomplete/components/{AutocompletePopupIcon.js → AutocompleteCaretDownIcon.js}

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 2025 WebPros International GmbH. All rights reserved.
 import { CaretDownIcon } from '@phosphor-icons/react';
-export const AutocompletePopupIcon = _jsx(CaretDownIcon, { size: 18 });
+export const AutocompleteCaretDownIcon = _jsx(CaretDownIcon, {});

package/dist/src/components/inputs/Autocomplete/components/AutocompleteXIcon.d.ts

@@ -0,0 +1 @@
+export declare const AutocompleteXIcon: import("react/jsx-runtime").JSX.Element;

package/dist/src/components/inputs/Autocomplete/components/AutocompleteXIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { XIcon } from '@phosphor-icons/react';
+export const AutocompleteXIcon = _jsx(XIcon, {});

package/dist/src/components/inputs/Button/Button.theme.d.ts

@@ -1,4 +1,5 @@
 import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+import { ComponentWithViewContextOwnProps } from '../../../shared/viewContext';
 declare module '@mui/material/Button' {
     interface ButtonPropsVariantOverrides {
         elevated: true;
@@ -12,6 +13,9 @@ declare module '@mui/material/Button' {
     interface ButtonPropsColorOverrides {
         tertiary: true;
         surface: true;
+        default: true;
+    }
+    interface ButtonOwnProps extends ComponentWithViewContextOwnProps {
     }
 }
 interface M3Button {

package/dist/src/components/inputs/Button/Button.theme.js

@@ -1,241 +1,108 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { alpha, } from '@mui/material';
-import { StateLayer, getStateLayerColor } from '../../../utils/getStateLayerColor';
+import { flatten } from '../../../utils/flatten';
+import { buttonClasses, circularProgressClasses, iconButtonClasses, touchRippleClasses, } from '@mui/material';
+import { getButtonColorsMap } from './get-button-colors-map';
+import { rippleEnterKeyframe } from '../../../shared/rippleEnterKeyframe';
 export const getButton = (theme) => {
-    const { palette } = theme;
-    return {
-        MuiButton: {
-            styleOverrides: {
-                root: {
-                    height: 40,
-                    minWidth: 0,
-                    padding: '0 6px',
-                    borderRadius: 14,
-                    textTransform: 'none',
-                    fontWeight: 500,
-                    '&.Mui-disabled': {
-                        color: alpha(palette.onSurface.main, 0.38),
+    const { typography } = theme;
+    const sizes = [
+        {
+            props: { size: 'small' },
+            style: Object.assign(Object.assign({}, typography.LabelSmall), { padding: '2px 8px', height: 20, borderRadius: '17px', 
+                // `!important` is the only way in this case to rewrite loader icon size
+                [`& .${circularProgressClasses.root}`]: {
+                    width: '12px !important',
+                    height: '12px !important',
+                } }),
+        },
+        {
+            props: { size: 'medium' },
+            style: Object.assign(Object.assign({}, typography.LabelMedium), { borderRadius: '17px', height: 34, padding: '7px 17px' }),
+        },
+        {
+            props: { size: 'large' },
+            style: Object.assign(Object.assign({}, typography.LabelLarge), { borderRadius: '24px', height: 42, padding: '9px 24px' }),
+        },
+    ];
+    const getStylesByColor = (color, viewContext) => {
+        const colorsMap = getButtonColorsMap(theme);
+        const inverseColorsMap = getButtonColorsMap(theme, 'inverse');
+        const colorsPalette = viewContext === 'inverse' ? inverseColorsMap[color] : colorsMap[color];
+        // variants = [filled?, tonal, ghost]
+        const variantsStyles = Object.entries(colorsPalette).map(([variant, variantColors]) => [
+            {
+                props: { variant: variant, color, viewContext },
+                style: {
+                    background: variantColors.background,
+                    color: variantColors.color,
+                    '&:hover': {
+                        background: variantColors.hover,
+                    },
+                    '&:active': {
+                        background: variantColors.active,
+                    },
+                    '&:focus': {
+                        background: variantColors.focus,
+                    },
+                    [`& .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible}`]: {
+                        color: variantColors.ripple,
                     },
-                    '.MuiButton-startIcon': { marginRight: 4 },
-                    '.MuiButton-endIcon': { marginLeft: 4 },
                 },
             },
-            variants: [
-                {
-                    props: { size: 'small' },
-                    style: {
-                        height: 32,
-                        borderRadius: 10,
-                        fontSize: '0.875rem',
-                    },
-                },
-                {
-                    props: { variant: 'filled' },
-                    style: {
-                        backgroundColor: palette.primary.main,
-                        color: palette.onPrimary.main,
-                        boxShadow: theme.shadows[0],
-                        padding: '0 24px',
-                        '&:hover': {
-                            backgroundColor: getStateLayerColor(StateLayer.Hover, palette.primary.main, palette.onPrimary.main),
-                            boxShadow: theme.shadows[1],
-                        },
-                        '&:focus': {
-                            backgroundColor: getStateLayerColor(StateLayer.Focus, palette.primary.main, palette.onPrimary.main),
-                            boxShadow: theme.shadows[0],
-                        },
-                        '&:active': {
-                            backgroundColor: getStateLayerColor(StateLayer.Press, palette.primary.main, palette.onPrimary.main),
-                            boxShadow: theme.shadows[0],
-                            outline: `2px solid ${getStateLayerColor(StateLayer.Press, palette.primary.main, palette.onPrimary.main)}`,
-                            outlineOffset: 2,
-                        },
-                        '&.Mui-disabled': {
-                            backgroundColor: alpha(palette.onSurface.main, 0.04),
-                            boxShadow: theme.shadows[0],
-                        },
-                        '.MuiButton-startIcon': { marginLeft: -8 },
-                        '.MuiButton-endIcon': { marginRight: -8 },
-                    },
-                },
-                {
-                    props: { variant: 'filled', size: 'small' },
-                    style: {
-                        padding: '0 12px',
-                        '.MuiButton-startIcon': { marginLeft: -4 },
-                        '.MuiButton-endIcon': { marginRight: -4 },
-                    },
-                },
-                {
-                    props: { variant: 'outlined' },
-                    style: {
-                        color: palette.primary.main,
-                        borderColor: palette.outline.main,
-                        borderWidth: 1,
-                        padding: '0 24px',
-                        '&:hover': {
-                            backgroundColor: alpha(palette.primary.main, 0.08),
-                            borderColor: palette.outline.main,
-                        },
-                        '&:focus': {
-                            backgroundColor: alpha(palette.primary.main, 0.12),
-                            borderColor: palette.primary.main,
-                        },
-                        '&:active': {
-                            backgroundColor: alpha(palette.primary.main, 0.12),
-                            borderColor: palette.outline.main,
-                        },
-                        '&.Mui-disabled': {
-                            borderColor: alpha(palette.onSurface.main, 0.12),
-                        },
-                        '.MuiButton-startIcon': { marginLeft: -8 },
-                        '.MuiButton-endIcon': { marginRight: -8 },
-                    },
-                },
-                {
-                    props: { variant: 'outlined', size: 'small' },
-                    style: {
-                        padding: '0 12px',
-                        '.MuiButton-startIcon': { marginLeft: 0 },
-                        '.MuiButton-endIcon': { marginRight: 0 },
-                    },
-                },
-                {
-                    props: { variant: 'text' },
-                    style: {
-                        backgroundColor: 'transparent',
-                        color: palette.primary.main,
-                        '&:hover': {
-                            backgroundColor: alpha(palette.primary.main, 0.08),
-                        },
-                        '&:focus': {
-                            backgroundColor: alpha(palette.primary.main, 0.12),
-                        },
-                        '&:active': {
-                            backgroundColor: alpha(palette.primary.main, 0.12),
-                        },
-                        '.MuiButton-startIcon': { marginLeft: -2 },
-                        '.MuiButton-endIcon': { marginRight: -2 },
-                    },
-                },
-                {
-                    props: { variant: 'text', size: 'small' },
-                    style: {
-                        padding: '0 6px',
+            {
+                props: { variant: variant, color, viewContext, disabled: true },
+                style: {
+                    [`&.${buttonClasses.disabled}`]: {
+                        color: variantColors.disabledColor,
+                        background: variantColors.disabledBackground,
                     },
                 },
-                {
-                    props: { variant: 'ghost' },
-                    style: {
-                        backgroundColor: 'transparent',
-                        color: palette.onSurfaceVariant.main,
-                        '&:hover': {
-                            backgroundColor: alpha(palette.primary.main, 0.08),
-                        },
-                        '&:focus': {
-                            backgroundColor: alpha(palette.primary.main, 0.12),
-                        },
-                        '&:active': {
-                            backgroundColor: alpha(palette.primary.main, 0.12),
-                        },
-                        '& .MuiButton-startIcon': {
-                            marginRight: 4,
-                        },
-                        '.MuiButton-startIcon': { marginLeft: -2 },
-                        '.MuiButton-endIcon': { marginRight: -2 },
-                    },
-                },
-                {
-                    props: { variant: 'ghost', size: 'small' },
-                    style: {
-                        padding: '0 6px',
-                    },
-                },
-                {
-                    props: { variant: 'elevated' },
-                    style: {
-                        boxShadow: theme.shadows[1],
-                        backgroundColor: palette.surfaceContainerLow.main,
-                        color: palette.primary.main,
-                        padding: '0 24px',
-                        '&:hover': {
-                            background: getStateLayerColor(StateLayer.Hover, palette.surfaceContainerLow.main, palette.primary.main),
-                            boxShadow: theme.shadows[2],
-                        },
-                        '&:focus': {
-                            background: getStateLayerColor(StateLayer.Focus, palette.surfaceContainerLow.main, palette.primary.main),
-                        },
-                        '&:active': {
-                            background: getStateLayerColor(StateLayer.Press, palette.surfaceContainerLow.main, palette.primary.main),
-                        },
-                        '&.Mui-disabled': {
-                            backgroundColor: alpha(palette.onSurface.main, 0.04),
-                            boxShadow: theme.shadows[0],
-                        },
-                        '.MuiButton-startIcon': { marginLeft: -8 },
-                        '.MuiButton-endIcon': { marginRight: -8 },
-                    },
-                },
-                {
-                    props: { variant: 'elevated', size: 'small' },
-                    style: {
-                        padding: '0 12px',
-                        '.MuiButton-startIcon': { marginLeft: -4 },
-                        '.MuiButton-endIcon': { marginRight: -4 },
-                    },
-                },
-                {
-                    props: { variant: 'tonal' },
-                    style: {
-                        backgroundColor: palette.secondaryContainer.main,
-                        color: palette.onSecondaryContainer.main,
-                        padding: '0 24px',
-                        '&:hover': {
-                            backgroundColor: palette.primary.main,
-                            color: palette.onPrimary.main,
-                        },
-                        '&:focus': {
-                            backgroundColor: getStateLayerColor(StateLayer.Focus, palette.primary.main, palette.onSecondaryContainer.main),
-                            color: palette.onPrimary.main,
-                        },
-                        '&:active': {
-                            backgroundColor: getStateLayerColor(StateLayer.Press, palette.primary.main, palette.onSecondaryContainer.main),
-                            color: palette.onPrimary.main,
-                            outline: `2px solid ${getStateLayerColor(StateLayer.Press, palette.primary.main, palette.onSecondaryContainer.main)}`,
-                            outlineOffset: 2,
-                        },
-                        '&.Mui-disabled': {
-                            backgroundColor: alpha(palette.onSurface.main, 0.04),
-                        },
-                        '.MuiButton-startIcon': { marginLeft: -8 },
-                        '.MuiButton-endIcon': { marginRight: -8 },
-                    },
-                },
-                {
-                    props: { variant: 'tonal', size: 'small' },
-                    style: {
-                        padding: '0 12px',
-                        '.MuiButton-startIcon': { marginLeft: -4 },
-                        '.MuiButton-endIcon': { marginRight: -4 },
+            },
+            {
+                props: { variant: variant, color, viewContext, loading: true },
+                style: {
+                    [`&.${iconButtonClasses.disabled}`]: {
+                        color: variantColors.loadingColor,
+                        background: variantColors.loadingBackground,
                     },
-                },
-                {
-                    props: { variant: 'filled', color: 'error' },
-                    style: {
-                        backgroundColor: palette.error.main,
-                        color: palette.background.default,
-                        '&:hover': {
-                            backgroundColor: palette.error.main,
-                        },
+                    [`.${buttonClasses.loadingIndicator}`]: {
+                        color: variantColors.loadingIndicator,
                     },
                 },
-                {
-                    props: { variant: 'ghost', color: 'error' },
-                    style: {
-                        backgroundColor: 'transparent',
-                        color: palette.onSurface.main,
+            },
+        ]);
+        return flatten(variantsStyles);
+    };
+    return {
+        MuiButton: {
+            styleOverrides: {
+                root: {
+                    textTransform: 'none',
+                    boxShadow: 'none',
+                    '.MuiButton-startIcon': { marginRight: 4 },
+                    '.MuiButton-endIcon': { marginLeft: 4 },
+                    minWidth: 'auto', // Overriding for small buttons
+                    [`& .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible}`]: {
+                        opacity: 1,
+                        animationName: rippleEnterKeyframe,
                     },
                 },
+            },
+            variants: [
+                // First we define size variants to ensure proper sizing. Do not couple size with variant and colors.
+                ...sizes,
+                // Now we define variants and colors. Name the variants and states according to the Figma file.
+                // Is there is required difference in namings - you should contract design team to clarify it and fix it.
+                ...getStylesByColor('primary'),
+                ...getStylesByColor('default'),
+                ...getStylesByColor('secondary'),
+                ...getStylesByColor('error'),
+                ...getStylesByColor('success'),
+                ...getStylesByColor('primary', 'inverse'),
+                ...getStylesByColor('default', 'inverse'),
+                ...getStylesByColor('secondary', 'inverse'),
+                ...getStylesByColor('error', 'inverse'),
+                ...getStylesByColor('success', 'inverse'),
             ],
         },
     };

package/dist/src/components/inputs/Button/get-button-colors-map.d.ts

@@ -0,0 +1,24 @@
+import { Theme } from '@mui/material';
+import { ViewContext } from '../../../shared/viewContext';
+type IconButtonColors = {
+    background: string;
+    color: string;
+    disabledBackground: string;
+    disabledColor: string;
+    loadingBackground: string;
+    loadingColor: string;
+    loadingIndicator: string;
+    hover: string;
+    active: string;
+    focus: string;
+    ripple?: string;
+};
+export type Variant = 'filled' | 'tonal' | 'ghost';
+export declare const getButtonColorsMap: (theme: Theme, viewContext?: ViewContext) => {
+    primary: Partial<Record<Variant, IconButtonColors>>;
+    default: Partial<Record<Variant, IconButtonColors>>;
+    secondary: Partial<Record<Variant, IconButtonColors>>;
+    error: Partial<Record<Variant, IconButtonColors>>;
+    success: Partial<Record<Variant, IconButtonColors>>;
+};
+export {};