@webpros/mui-theme 0.1.6 → 0.3.0

package/dist/src/components/feedback/LinearProgress/LinearProgress.theme.js

@@ -1,13 +1,95 @@
-export const getLinearProgress = (_theme) => ({
-    MuiLinearProgress: {
-        styleOverrides: {
-            root: {
-                borderRadius: '20px',
+export const getLinearProgress = (theme) => {
+    const getLinearProgressColors = (color, viewContext) => {
+        const isInverseView = viewContext === 'inverse';
+        const { colors } = theme;
+        const schemesPath = isInverseView ? 'inverseSchemes' : 'schemes';
+        const layersPath = isInverseView ? 'inverseStateLayers' : 'stateLayers';
+        const palette = colors[schemesPath];
+        const layers = colors[layersPath];
+        const colorMap = {
+            primary: {
+                primary: palette.base.primary,
+                secondary: layers.base.primary.opacity28,
+            },
+            secondary: {
+                primary: palette.base.secondary,
+                secondary: layers.base.secondary.opacity12,
+            },
+            error: {
+                primary: palette.status.error,
+                secondary: layers.status.error.opacity28,
+            },
+            info: {
+                primary: palette.status.info,
+                secondary: layers.status.info.opacity28,
+            },
+            success: {
+                primary: palette.status.success,
+                secondary: layers.status.success.opacity28,
+            },
+            warning: {
+                primary: palette.status.warning,
+                secondary: layers.status.warning.opacity28,
+            },
+            inherit: {
+                primary: palette.surfaces.onSurface,
+                secondary: layers.surfaces.onSurface.opacity28,
+            },
+        };
+        const simpleVariants = ['determinate', 'indeterminate', 'query'].map((variant) => ({
+            props: { color, viewContext, variant },
+            style: {
+                background: colorMap[color].secondary,
                 '.MuiLinearProgress-bar': {
-                    strokeLinecap: 'round',
-                    borderRadius: '20px',
+                    background: colorMap[color].primary,
+                },
+            },
+        }));
+        return [
+            ...simpleVariants,
+            {
+                props: { color, viewContext, variant: 'buffer' },
+                style: {
+                    '.MuiLinearProgress-bar1': {
+                        background: colorMap[color].primary,
+                    },
+                    '.MuiLinearProgress-bar2': {
+                        background: colorMap[color].secondary,
+                    },
+                    '.MuiLinearProgress-dashed': {
+                        background: colorMap[color].secondary,
+                    },
+                },
+            },
+        ];
+    };
+    return {
+        MuiLinearProgress: {
+            styleOverrides: {
+                root: {
+                    borderRadius: '2px',
+                    '.MuiLinearProgress-bar': {
+                        strokeLinecap: 'round',
+                        borderRadius: '2px',
+                    },
                 },
             },
+            variants: [
+                ...getLinearProgressColors('primary'),
+                ...getLinearProgressColors('secondary'),
+                ...getLinearProgressColors('error'),
+                ...getLinearProgressColors('info'),
+                ...getLinearProgressColors('success'),
+                ...getLinearProgressColors('warning'),
+                ...getLinearProgressColors('inherit'),
+                ...getLinearProgressColors('primary', 'inverse'),
+                ...getLinearProgressColors('secondary', 'inverse'),
+                ...getLinearProgressColors('error', 'inverse'),
+                ...getLinearProgressColors('info', 'inverse'),
+                ...getLinearProgressColors('success', 'inverse'),
+                ...getLinearProgressColors('warning', 'inverse'),
+                ...getLinearProgressColors('inherit', 'inverse'),
+            ],
         },
-    },
-});
+    };
+};

package/dist/src/components/feedback/Snackbar/Snackbar.theme.d.ts

@@ -1,9 +1,9 @@
 import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
 interface M3Snackbar {
-    MuiSnackbarContent: {
-        defaultProps?: ComponentsProps['MuiSnackbarContent'];
-        styleOverrides?: ComponentsOverrides<Theme>['MuiSnackbarContent'];
-        variants?: ComponentsVariants['MuiSnackbarContent'];
+    MuiSnackbar: {
+        defaultProps?: ComponentsProps['MuiSnackbar'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiSnackbar'];
+        variants?: ComponentsVariants['MuiSnackbar'];
     };
 }
 export declare const getSnackbar: (theme: Theme) => M3Snackbar;

package/dist/src/components/feedback/Snackbar/Snackbar.theme.js

@@ -1,11 +1,19 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
 export const getSnackbar = (theme) => {
-    const { spacing } = theme;
+    const { colors } = theme;
     return {
-        MuiSnackbarContent: {
+        MuiSnackbar: {
             styleOverrides: {
                 root: {
-                    borderRadius: spacing(1),
+                    borderRadius: '10px',
+                    '& .MuiSnackbarContent-root': {
+                        backgroundColor: colors.inverseSchemes.surfaces.elevatedContainerLowest,
+                        alignItems: 'baseline',
+                        paddingTop: 0,
+                    },
+                    '& .MuiSnackbarContent-action': {
+                        marginRight: 0,
+                    },
                 },
             },
         },

package/dist/src/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './utils/CssBaseline';
+export * from './utils/Backdrop';
 export * from './feedback/Alert';
 export * from './feedback/Snackbar';
 export * from './feedback/CircularProgress';
@@ -20,6 +21,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';
@@ -30,14 +32,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/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 {