@webpros/mui-theme 0.1.2 → 0.1.4

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

@@ -0,0 +1,30 @@
+import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+interface M3Dialog {
+    MuiDialog: {
+        defaultProps?: ComponentsProps['MuiDialog'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiDialog'];
+        variants?: ComponentsVariants['MuiDialog'];
+    };
+    MuiDialogTitle: {
+        defaultProps?: ComponentsProps['MuiDialogTitle'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiDialogTitle'];
+        variants?: ComponentsVariants['MuiDialogTitle'];
+    };
+    MuiDialogContent: {
+        defaultProps?: ComponentsProps['MuiDialogContent'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiDialogContent'];
+        variants?: ComponentsVariants['MuiDialogContent'];
+    };
+    MuiDialogActions: {
+        defaultProps?: ComponentsProps['MuiDialogActions'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiDialogContent'];
+        variants?: ComponentsVariants['MuiDialogActions'];
+    };
+    MuiDialogContentText: {
+        defaultProps?: ComponentsProps['MuiDialogContentText'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiDialogContentText'];
+        variants?: ComponentsVariants['MuiDialogContentText'];
+    };
+}
+export declare const getDialog: (theme: Theme) => M3Dialog;
+export {};

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

@@ -0,0 +1,67 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { modalClasses, dialogContentClasses, dialogClasses, } from '@mui/material';
+export const getDialog = (theme) => {
+    const { spacing, palette } = theme;
+    return {
+        MuiDialogTitle: {
+            defaultProps: {
+                variant: 'TitleLarge',
+            },
+            styleOverrides: {
+                root: {
+                    padding: `${spacing(2)} ${spacing(3)} ${spacing(1.5)}`,
+                    // By default, MUI removes top padding from DialogContent when it follows DialogTitle,
+                    // which can cause content to appear 'behind' the title. We're changing default padding to
+                    // create proper spacing between title and content without adjusting design of all dialogs
+                    //  important set because with value 1 it does not work
+                    [`& + .${dialogContentClasses.root}`]: {
+                        paddingTop: `${spacing(1)} !important`,
+                    },
+                },
+            },
+        },
+        MuiDialog: {
+            styleOverrides: {
+                paper: {
+                    borderRadius: spacing(3.5),
+                    [`&.${dialogClasses.paperFullScreen}`]: {
+                        borderRadius: 0,
+                        maxWidth: 'none',
+                        maxHeight: 'none',
+                    },
+                },
+                root: {
+                    height: 'auto',
+                    [`&.${modalClasses.root}.${dialogClasses.root} .${dialogClasses.paper}`]: {
+                        height: 'auto',
+                        minHeight: '200px',
+                    },
+                    borderRadius: spacing(1),
+                },
+            },
+        },
+        MuiDialogContent: {
+            styleOverrides: {
+                root: {
+                    color: palette.onSurfaceVariant.main,
+                    padding: `0 ${spacing(3)} ${spacing(3)}`,
+                },
+            },
+        },
+        MuiDialogActions: {
+            styleOverrides: {
+                root: {
+                    padding: `${spacing(1)} ${spacing(3)} ${spacing(3)}`,
+                    justifyContent: 'flex-start',
+                },
+            },
+        },
+        MuiDialogContentText: {
+            styleOverrides: {
+                root: {
+                    color: palette.onSurfaceVariant.main,
+                },
+            },
+        },
+    };
+};

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

@@ -0,0 +1 @@
+export * from './Dialog.theme';

package/dist/src/components/feedback/Dialog/index.js

@@ -0,0 +1,2 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export * from './Dialog.theme';

package/dist/src/components/feedback/LinearProgress/LinearProgress.d.ts

@@ -0,0 +1,4 @@
+import { LinearProgress as MuiLinearProgress } from '@mui/material';
+import './LinearProgress.theme';
+export declare const LinearProgress: typeof MuiLinearProgress;
+export type LinearProgressComponentType = typeof LinearProgress;

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

@@ -0,0 +1,4 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { LinearProgress as MuiLinearProgress } from '@mui/material';
+import './LinearProgress.theme';
+export const LinearProgress = MuiLinearProgress;

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

@@ -0,0 +1,10 @@
+import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+interface M3LinearProgress {
+    MuiLinearProgress: {
+        defaultProps?: ComponentsProps['MuiLinearProgress'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiLinearProgress'];
+        variants?: ComponentsVariants['MuiLinearProgress'];
+    };
+}
+export declare const getLinearProgress: (_theme: Theme) => M3LinearProgress;
+export {};

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

@@ -0,0 +1,13 @@
+export const getLinearProgress = (_theme) => ({
+    MuiLinearProgress: {
+        styleOverrides: {
+            root: {
+                borderRadius: '20px',
+                '.MuiLinearProgress-bar': {
+                    strokeLinecap: 'round',
+                    borderRadius: '20px',
+                },
+            },
+        },
+    },
+});

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

@@ -0,0 +1 @@
+export * from './LinearProgress.theme';

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

@@ -0,0 +1,2 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export * from './LinearProgress.theme';

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

@@ -0,0 +1,4 @@
+import { Snackbar as MuiSnackbar } from '@mui/material';
+import './Snackbar.theme';
+export declare const Snackbar: typeof MuiSnackbar;
+export type SnackbarComponentType = typeof Snackbar;

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

@@ -0,0 +1,4 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { Snackbar as MuiSnackbar } from '@mui/material';
+import './Snackbar.theme';
+export const Snackbar = MuiSnackbar;

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

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

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

@@ -0,0 +1,13 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export const getSnackbar = (theme) => {
+    const { spacing } = theme;
+    return {
+        MuiSnackbarContent: {
+            styleOverrides: {
+                root: {
+                    borderRadius: spacing(1),
+                },
+            },
+        },
+    };
+};

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

@@ -0,0 +1 @@
+export * from './Snackbar.theme';

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

@@ -0,0 +1,2 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export * from './Snackbar.theme';

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

@@ -0,0 +1,43 @@
+export * from './utils/CssBaseline';
+export * from './feedback/Alert';
+export * from './feedback/Snackbar';
+export * from './feedback/CircularProgress';
+export * from './feedback/LinearProgress';
+export * from './feedback/Dialog';
+export * from './surfaces/Accordion';
+export * from './surfaces/AppBar';
+export * from './data-display/Avatar';
+export * from './inputs/Select';
+export * from './inputs/InputLabel';
+export * from './inputs/TimePicker';
+export * from './inputs/Autocomplete';
+export * from './data-display/Badge';
+export * from './inputs/Button';
+export * from './surfaces/Card';
+export * from './inputs/Checkbox';
+export * from './data-display/Chip';
+export * from './navigation/Drawer';
+export * from './inputs/Fab';
+export * from './inputs/IconButton';
+export * from './data-display/Divider';
+export * from './data-display/ListItem';
+export * from './data-display/ListItemButton';
+export * from './data-display/ListItemIcon';
+export * from './data-display/ListItemAvatar';
+export * from './data-display/ListSubheader';
+export * from './data-display/DataGrid';
+export * from './data-display/Table';
+export * from './navigation/Menu';
+export * from './navigation/MenuItem';
+export * from './surfaces/Paper';
+export * from './inputs/Switch';
+export * from './navigation/Link';
+export * from './navigation/PaginationItem';
+export * from './navigation/Tab';
+export * from './navigation/TabList';
+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';

package/dist/src/components/index.js

@@ -0,0 +1,44 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export * from './utils/CssBaseline';
+export * from './feedback/Alert';
+export * from './feedback/Snackbar';
+export * from './feedback/CircularProgress';
+export * from './feedback/LinearProgress';
+export * from './feedback/Dialog';
+export * from './surfaces/Accordion';
+export * from './surfaces/AppBar';
+export * from './data-display/Avatar';
+export * from './inputs/Select';
+export * from './inputs/InputLabel';
+export * from './inputs/TimePicker';
+export * from './inputs/Autocomplete';
+export * from './data-display/Badge';
+export * from './inputs/Button';
+export * from './surfaces/Card';
+export * from './inputs/Checkbox';
+export * from './data-display/Chip';
+export * from './navigation/Drawer';
+export * from './inputs/Fab';
+export * from './inputs/IconButton';
+export * from './data-display/Divider';
+export * from './data-display/ListItem';
+export * from './data-display/ListItemButton';
+export * from './data-display/ListItemIcon';
+export * from './data-display/ListItemAvatar';
+export * from './data-display/ListSubheader';
+export * from './data-display/DataGrid';
+export * from './data-display/Table';
+export * from './navigation/Menu';
+export * from './navigation/MenuItem';
+export * from './surfaces/Paper';
+export * from './inputs/Switch';
+export * from './navigation/Link';
+export * from './navigation/PaginationItem';
+export * from './navigation/Tab';
+export * from './navigation/TabList';
+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';

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

@@ -0,0 +1,4 @@
+import { Autocomplete as MuiAutocomplete } from '@mui/material';
+import './Autocomplete.theme';
+export declare const Autocomplete: typeof MuiAutocomplete;
+export type AutocompleteComponentType = typeof Autocomplete;

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

@@ -0,0 +1,4 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { Autocomplete as MuiAutocomplete } from '@mui/material';
+import './Autocomplete.theme';
+export const Autocomplete = MuiAutocomplete;

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

@@ -0,0 +1,10 @@
+import { ComponentsProps, ComponentsOverrides, ComponentsVariants, Theme } from '@mui/material';
+interface M3Autocomplete {
+    MuiAutocomplete: {
+        defaultProps?: ComponentsProps['MuiAutocomplete'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiAutocomplete'];
+        variants?: ComponentsVariants['MuiAutocomplete'];
+    };
+}
+export declare const getAutocomplete: (theme: Theme) => M3Autocomplete;
+export {};

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

@@ -0,0 +1,67 @@
+// 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;
+    return {
+        MuiAutocomplete: {
+            defaultProps: {
+                clearIcon: ChipDeleteIcon,
+                popupIcon: AutocompletePopupIcon,
+            },
+            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',
+                    },
+                    '> svg': {
+                        color: palette.supportive.main,
+                    },
+                },
+                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',
+                    },
+                },
+            },
+        },
+    };
+};

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

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

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

@@ -0,0 +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 });

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

@@ -0,0 +1 @@
+export * from './Autocomplete.theme';

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

@@ -0,0 +1,2 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export * from './Autocomplete.theme';

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

@@ -0,0 +1,3 @@
+import './Button.theme';
+export declare const Button: import("@mui/material").ExtendButtonBase<import("@mui/material").ButtonTypeMap<{}, "button">>;
+export type ButtonComponentType = typeof Button;

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

@@ -0,0 +1,4 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { Button as MuiButton } from '@mui/material';
+import './Button.theme';
+export const Button = MuiButton;

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

@@ -0,0 +1,26 @@
+import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+declare module '@mui/material/Button' {
+    interface ButtonPropsVariantOverrides {
+        elevated: true;
+        filled: true;
+        tonal: true;
+        outlined: true;
+        text: true;
+        ghost: true;
+        contained: false;
+    }
+    interface ButtonPropsColorOverrides {
+        tertiary: true;
+        surface: true;
+    }
+}
+interface M3Button {
+    MuiButton: {
+        defaultProps?: ComponentsProps['MuiButton'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiButton'];
+        variants?: ComponentsVariants['MuiButton'];
+    };
+}
+export declare const getButton: (theme: Theme) => M3Button;
+declare const _default: {};
+export default _default;