@linagora/twake-mui 7.0.0 → 8.0.0

package/dist/lib/lightOverrides.js

@@ -1,520 +0,0 @@
-import { menuItemClasses } from '@mui/material/MenuItem';
-import { alpha, darken } from '@mui/material/styles';
-import React from 'react';
-import { radius } from './radius';
-import AccordionExpandIcon from '../components/AccordionExpandIcon';
-export const lightOverrides = {
-    MuiButton: {
-        styleOverrides: {
-            root: {
-                borderRadius: radius.pill,
-                boxShadow: 'none',
-                '&:hover': {
-                    boxShadow: 'none'
-                },
-                '&:active': {
-                    boxShadow: 'none'
-                },
-                '&:focus': {
-                    boxShadow: 'none'
-                },
-                variants: [
-                    {
-                        props: { variant: 'contained', color: 'secondary' },
-                        style: ({ theme }) => ({
-                            backgroundColor: theme.palette.secondary.main,
-                            color: alpha(theme.palette.text.primary, 0.9),
-                            borderRadius: radius.sm,
-                            '&:hover': {
-                                backgroundColor: theme.palette.secondary.dark,
-                                color: alpha(theme.palette.text.primary, 0.9)
-                            },
-                            '&.Mui-disabled': {
-                                backgroundColor: theme.palette.action.disabledBackground
-                            }
-                        })
-                    },
-                    {
-                        props: { size: 'small' },
-                        style: {
-                            padding: '6px 16px'
-                        }
-                    },
-                    {
-                        props: { size: 'medium' },
-                        style: {
-                            padding: '9px 24px'
-                        }
-                    },
-                    {
-                        props: { size: 'large' },
-                        style: {
-                            padding: '12px 32px'
-                        }
-                    },
-                    {
-                        props: { variant: 'contained', size: 'small' },
-                        style: {
-                            paddingTop: '7px',
-                            paddingBottom: '7px'
-                        }
-                    },
-                    {
-                        props: { variant: 'contained', size: 'medium' },
-                        style: {
-                            paddingTop: '10px',
-                            paddingBottom: '10px'
-                        }
-                    },
-                    {
-                        props: { variant: 'contained', size: 'large' },
-                        style: {
-                            paddingTop: '13px',
-                            paddingBottom: '13px'
-                        }
-                    }
-                ]
-            },
-            contained: {
-                boxShadow: 'none',
-                '&:hover': {
-                    boxShadow: 'none'
-                },
-                '&:active': {
-                    boxShadow: 'none'
-                },
-                '&:focus': {
-                    boxShadow: 'none'
-                }
-            },
-            outlined: ({ theme }) => ({
-                backgroundColor: theme.palette.background.paper,
-                borderColor: alpha(theme.palette.grey[900], 0.28),
-                color: alpha(theme.palette.text.primary, 0.9),
-                '&:hover': {
-                    backgroundColor: alpha(theme.palette.primary.main, 0.04),
-                    color: theme.palette.primary.main,
-                    borderColor: alpha(theme.palette.primary.main, 0.32)
-                },
-                '&.Mui-disabled': {
-                    backgroundColor: theme.palette.background.paper,
-                    color: alpha(theme.palette.grey[900], 0.38),
-                    borderColor: alpha(theme.palette.grey[900], 0.28)
-                }
-            })
-        }
-    },
-    MuiOutlinedInput: {
-        styleOverrides: {
-            root: ({ theme }) => ({
-                borderRadius: radius.sm,
-                '&.Mui-focused fieldset': {
-                    borderWidth: '1px'
-                },
-                '& input::placeholder': {
-                    color: theme.palette.secondary.dark,
-                    opacity: 1
-                },
-                '& .MuiSvgIcon-root': {
-                    fontSize: '18px'
-                }
-            }),
-            input: {
-                padding: '11px 16px', // Default medium: 48px height
-                height: 'auto',
-                lineHeight: '24px',
-                variants: [
-                    {
-                        props: { size: 'small' },
-                        style: {
-                            padding: '8px 16px',
-                            fontSize: '14px',
-                            fontWeight: 400,
-                            lineHeight: '20px',
-                            minHeight: '26px'
-                        }
-                    }
-                ]
-            }
-        }
-    },
-    MuiSelect: {
-        styleOverrides: {
-            root: {
-                '&.MuiOutlinedInput-root': {
-                    '& .MuiSvgIcon-root': {
-                        fontSize: '25px'
-                    },
-                    '&.MuiInputBase-sizeSmall': {
-                        '& .MuiSelect-select': {
-                            padding: '10px 25px 10px 15px',
-                            fontSize: '14px',
-                            lineHeight: '20px',
-                            // Note: :has() selector removed due to jsdom compatibility in tests
-                            // If SVG is present, padding should be handled via component-level sx prop
-                            '& svg': {
-                                marginRight: '8px'
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    },
-    MuiAutocomplete: {
-        styleOverrides: {
-            root: {
-                // Using "&&" to increase CSS specificity
-                '&&': {
-                    '& .MuiOutlinedInput-root': {
-                        paddingLeft: '16px',
-                        borderRadius: radius.sm,
-                        '& fieldset.MuiOutlinedInput-notchedOutline': {
-                            borderRadius: radius.sm
-                        },
-                        '&.MuiInputBase-sizeSmall': {
-                            paddingTop: '8px',
-                            paddingBottom: '8px',
-                            paddingLeft: '16px',
-                            '& .MuiAutocomplete-input': {
-                                padding: '0px 4px 0px 8px'
-                            }
-                        }
-                    }
-                }
-            },
-            // Styling for chips in Autocomplete
-            tag: {
-                margin: '2px'
-            }
-        }
-    },
-    MuiDialog: {
-        styleOverrides: {
-            paper: {
-                borderRadius: radius.md,
-                boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15)',
-                maxWidth: '570px'
-            },
-            paperFullScreen: {
-                borderRadius: 0,
-                maxWidth: '100%'
-            }
-        }
-    },
-    MuiDialogTitle: {
-        styleOverrides: {
-            root: ({ theme }) => ({
-                ...theme.typography.h3,
-                padding: '12px 32px',
-                [theme.breakpoints.down('sm')]: {
-                    ...theme.typography.h4
-                }
-            })
-        }
-    },
-    MuiDialogContent: {
-        styleOverrides: {
-            root: {
-                padding: '24px 32px'
-            }
-        }
-    },
-    MuiDialogActions: {
-        styleOverrides: {
-            root: {
-                padding: '16px 32px'
-            }
-        }
-    },
-    MuiChip: {
-        styleOverrides: {
-            root: {
-                '&.square': {
-                    borderRadius: radius.md
-                }
-            }
-        }
-    },
-    MuiAvatar: {
-        styleOverrides: {
-            root: ({ theme }) => ({
-                fontWeight: 600,
-                '&.size-xs': {
-                    width: 18,
-                    height: 18,
-                    fontSize: '9.109px',
-                    fontWeight: 500,
-                    lineHeight: '18.219px',
-                    '& svg': {
-                        width: '50%',
-                        height: '50%'
-                    }
-                },
-                '&.size-s': {
-                    width: 28,
-                    height: 28,
-                    fontSize: '12.525px',
-                    fontWeight: 500,
-                    lineHeight: '18.219px',
-                    '& svg': {
-                        width: '50%',
-                        height: '50%'
-                    }
-                },
-                '&.size-m': {
-                    width: 36,
-                    height: 36,
-                    fontSize: '18.219px',
-                    fontWeight: 500,
-                    lineHeight: '27.328px',
-                    '& svg': {
-                        width: '50%',
-                        height: '50%'
-                    }
-                },
-                '&.size-l': {
-                    width: 54,
-                    height: 54,
-                    fontSize: '27.328px',
-                    fontWeight: 600,
-                    lineHeight: '36.438px',
-                    '& svg': {
-                        width: '50%',
-                        height: '50%'
-                    }
-                },
-                '&.size-xl': {
-                    width: 72,
-                    height: 72,
-                    fontSize: '36.438px',
-                    fontWeight: 600,
-                    lineHeight: '45.547px',
-                    '& svg': {
-                        width: '50%',
-                        height: '50%'
-                    }
-                },
-                '&.disabled': {
-                    color: theme.palette.primary.contrastText,
-                    background: theme.palette.grey[300],
-                    '& img': {
-                        filter: 'grayscale(1) brightness(2)',
-                        opacity: 0.5
-                    }
-                },
-                '&.displayInline': {
-                    display: 'inline-flex'
-                },
-                '&.border': {
-                    border: `2px solid ${theme.palette.background.paper}`
-                },
-                '&.innerBorder': {
-                    boxShadow: `inset 0px 0px 0px 1px ${theme.palette.divider}`
-                },
-                variants: [
-                    {
-                        props: { color: 'default' },
-                        style: {
-                            backgroundColor: theme.palette.background.paper,
-                            color: theme.palette.text.secondary
-                        }
-                    }
-                ]
-            })
-        }
-    },
-    MuiToggleButtonGroup: {
-        styleOverrides: {
-            root: ({ theme }) => ({
-                borderColor: theme.palette.secondary.dark,
-                '& .MuiToggleButton-root:not(.Mui-selected)': {
-                    color: theme.palette.text.secondary,
-                    backgroundColor: alpha(theme.palette.text.secondary, 0.08),
-                    '& svg, & .MuiSvgIcon-root': {
-                        color: theme.palette.text.secondary
-                    }
-                }
-            })
-        }
-    },
-    MuiToggleButton: {
-        styleOverrides: {
-            root: ({ theme }) => ({
-                color: theme.palette.text.primary,
-                '&.Mui-selected': {
-                    color: theme.palette.text.primary,
-                    backgroundColor: 'transparent',
-                    '&:hover': {
-                        backgroundColor: 'transparent'
-                    },
-                    '& svg, & .MuiSvgIcon-root': {
-                        color: theme.palette.primary.main
-                    }
-                },
-                variants: [
-                    {
-                        props: { size: 'medium' },
-                        style: {
-                            padding: '9px 24px'
-                        }
-                    }
-                ]
-            })
-        }
-    },
-    MuiIconButton: {
-        styleOverrides: {
-            root: ({ theme }) => ({
-                color: alpha(theme.palette.grey[900], 0.48),
-                padding: '4px'
-            })
-        }
-    },
-    MuiCheckbox: {
-        styleOverrides: {
-            root: {
-                '&.MuiCheckbox-sizeSmall': {
-                    padding: '6px'
-                }
-            }
-        }
-    },
-    MuiAccordion: {
-        styleOverrides: {
-            root: {
-                '&::before': {
-                    display: 'none'
-                }
-            }
-        }
-    },
-    MuiAccordionSummary: {
-        defaultProps: { expandIcon: React.createElement(AccordionExpandIcon, null) },
-        styleOverrides: {
-            root: ({ theme }) => ({
-                backgroundColor: theme.palette.grey[100],
-                textTransform: 'uppercase',
-                fontWeight: 'bold',
-                fontSize: '0.875rem',
-                minHeight: '3.5rem',
-                padding: 0,
-                color: theme.palette.text.primary,
-                '&.Mui-expanded': {
-                    minHeight: '3.5rem'
-                }
-            }),
-            expandIconWrapper: {
-                order: 0,
-                '&&': {
-                    marginLeft: '0.3125rem'
-                },
-                transform: 'rotate(-90deg)',
-                '&.Mui-expanded': {
-                    marginLeft: '0.3125rem',
-                    transform: 'rotate(0deg)'
-                }
-            },
-            content: {
-                margin: '0.75rem 0',
-                paddingLeft: '0.5rem',
-                paddingRight: '0.25rem',
-                order: 1,
-                '& > :last-child': {
-                    paddingRight: 0
-                },
-                '&.Mui-expanded': {
-                    margin: '0.75rem 0'
-                }
-            }
-        }
-    },
-    MuiFab: {
-        defaultProps: { size: 'medium' },
-        styleOverrides: {
-            root: ({ theme }) => ({
-                borderRadius: 28,
-                width: 96,
-                height: 96,
-                color: theme.palette.text.primary,
-                backgroundColor: theme.palette.background.paper,
-                '&:hover': {
-                    backgroundColor: darken(theme.palette.background.paper, 0.05)
-                },
-                '@media (hover: none)': {
-                    backgroundColor: theme.palette.background.paper
-                }
-            }),
-            primary: ({ theme }) => ({
-                color: theme.palette.primary.dark,
-                backgroundColor: theme.palette.primary.light,
-                '&:hover': {
-                    backgroundColor: darken(theme.palette.primary.light, 0.05)
-                },
-                '@media (hover: none)': {
-                    backgroundColor: theme.palette.primary.light
-                }
-            }),
-            extended: {
-                borderRadius: 16,
-                width: 'auto',
-                height: 56,
-                minWidth: 56,
-                padding: '0 20px',
-                '&.MuiFab-sizeSmall': {
-                    borderRadius: 16,
-                    width: 'auto',
-                    height: 42,
-                    minWidth: 42,
-                    padding: '0 12px'
-                },
-                '&.MuiFab-sizeMedium': {
-                    borderRadius: 16,
-                    width: 'auto',
-                    height: 48,
-                    minWidth: 48,
-                    padding: '0 16px'
-                }
-            },
-            sizeSmall: {
-                borderRadius: 12,
-                width: 40,
-                height: 40
-            },
-            sizeMedium: {
-                borderRadius: 16,
-                width: 56,
-                height: 56
-            }
-        }
-    },
-    MuiTooltip: {
-        defaultProps: { arrow: true },
-        styleOverrides: {
-            tooltip: ({ theme }) => ({
-                backgroundColor: alpha(theme.palette.grey[800], 0.9),
-                fontSize: '1rem',
-                lineHeight: 1.3,
-                borderRadius: '4px',
-                padding: '8px 12px'
-            })
-        }
-    },
-    MuiMenuItem: {
-        styleOverrides: {
-            root: ({ theme }) => ({
-                borderRadius: radius.md,
-                '&&&:hover': {
-                    backgroundColor: `${alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)}`
-                },
-                [`&.${menuItemClasses.selected}`]: {
-                    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
-                    '&:hover': {
-                        backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity +
-                            theme.palette.action.hoverOpacity)
-                    }
-                }
-            })
-        }
-    }
-};

package/dist/stories/Dialog.stories.js

@@ -1,40 +0,0 @@
-import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Stack } from '@mui/material';
-import React from 'react';
-const meta = {
-    title: 'Dialog',
-    component: Dialog,
-    parameters: { layout: 'centered' },
-    tags: ['autodocs']
-};
-export default meta;
-// Basic Dialog with open/close state
-const BasicDialogComponent = () => {
-    const [open, setOpen] = React.useState(false);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { variant: "contained", onClick: () => setOpen(true) }, "Open Dialog"),
-        React.createElement(Dialog, { open: open, onClose: () => setOpen(false) },
-            React.createElement(DialogTitle, null, "Dialog Title"),
-            React.createElement(DialogContent, null,
-                React.createElement(DialogContentText, null, "This is a basic dialog with a title, content, and action buttons. You can put any content here.")),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { onClick: () => setOpen(false) }, "Cancel"),
-                React.createElement(Button, { onClick: () => setOpen(false), variant: "contained" }, "Confirm")))));
-};
-export const Default = {
-    render: () => React.createElement(BasicDialogComponent, null)
-};
-// Visual Regression - Dialog styles
-export const Screenshot = {
-    tags: ['argos'],
-    render: () => (React.createElement(Stack, { spacing: 4 },
-        React.createElement("section", null,
-            React.createElement("h3", { style: { marginBottom: '12px' } }, "Dialog Components"),
-            React.createElement(Stack, { spacing: 2 },
-                React.createElement(Dialog, { open: true, disableAutoFocus: true },
-                    React.createElement(DialogTitle, null, "Standard Dialog"),
-                    React.createElement(DialogContent, null,
-                        React.createElement(DialogContentText, null, "This demonstrates the standard dialog appearance with all its subcomponents styled according to the Twake theme.")),
-                    React.createElement(DialogActions, null,
-                        React.createElement(Button, null, "Cancel"),
-                        React.createElement(Button, { variant: "contained" }, "Confirm")))))))
-};

package/dist/stories/Input.stories.js

@@ -1,41 +0,0 @@
-import { TextField, Select, MenuItem, Stack, Box } from '@mui/material';
-import React from 'react';
-const meta = {
-    title: 'Input',
-    component: TextField,
-    parameters: { layout: 'centered' },
-    tags: ['autodocs']
-};
-export default meta;
-export const Default = {
-    args: {
-        label: 'Label',
-        variant: 'outlined',
-        defaultValue: 'Sample text'
-    }
-};
-// Visual Regression - All inputs combined
-export const Screenshot = {
-    tags: ['argos'],
-    render: () => (React.createElement(Stack, { spacing: 4 },
-        React.createElement("section", null,
-            React.createElement("h3", { style: { marginBottom: '12px' } }, "TextField Variants"),
-            React.createElement(Stack, { spacing: 2 },
-                React.createElement(TextField, { label: "Outlined", variant: "outlined", defaultValue: "Sample text" }),
-                React.createElement(TextField, { label: "Filled", variant: "filled", defaultValue: "Sample text" }),
-                React.createElement(TextField, { label: "Standard", variant: "standard", defaultValue: "Sample text" }))),
-        React.createElement("section", null,
-            React.createElement("h3", { style: { marginBottom: '12px' } }, "TextField States"),
-            React.createElement(Stack, { spacing: 2 },
-                React.createElement(TextField, { label: "Normal", variant: "outlined", defaultValue: "Sample text" }),
-                React.createElement(TextField, { label: "Disabled", variant: "outlined", defaultValue: "Cannot edit", disabled: true }),
-                React.createElement(TextField, { label: "Error", variant: "outlined", defaultValue: "Invalid value", error: true, helperText: "This field has an error" }),
-                React.createElement(TextField, { label: "Required", variant: "outlined", required: true }))),
-        React.createElement("section", null,
-            React.createElement("h3", { style: { marginBottom: '12px' } }, "Select"),
-            React.createElement(Box, { sx: { minWidth: 200 } },
-                React.createElement(Select, { value: 10, fullWidth: true },
-                    React.createElement(MenuItem, { value: 10 }, "Ten"),
-                    React.createElement(MenuItem, { value: 20 }, "Twenty"),
-                    React.createElement(MenuItem, { value: 30 }, "Thirty"))))))
-};

package/dist/stories/Selection.stories.js

@@ -1,37 +0,0 @@
-import FormatBoldIcon from '@mui/icons-material/FormatBold';
-import FormatItalicIcon from '@mui/icons-material/FormatItalic';
-import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';
-import { Checkbox, FormControlLabel, ToggleButton, ToggleButtonGroup, Stack, Box } from '@mui/material';
-import React from 'react';
-const meta = {
-    title: 'Selection',
-    component: Checkbox,
-    parameters: { layout: 'centered' },
-    tags: ['autodocs']
-};
-export default meta;
-export const Default = {
-    render: () => React.createElement(FormControlLabel, { control: React.createElement(Checkbox, null), label: "Checkbox" })
-};
-// Visual Regression - All selection components
-export const Screenshot = {
-    tags: ['argos'],
-    render: () => (React.createElement(Stack, { spacing: 4 },
-        React.createElement("section", null,
-            React.createElement("h3", { style: { marginBottom: '12px' } }, "Checkbox States"),
-            React.createElement(Stack, { direction: "row", spacing: 4 },
-                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: false }), label: "Unchecked" }),
-                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: true }), label: "Checked" }),
-                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { indeterminate: true }), label: "Indeterminate" }),
-                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { disabled: true }), label: "Disabled" }))),
-        React.createElement("section", null,
-            React.createElement("h3", { style: { marginBottom: '12px' } }, "Toggle Buttons"),
-            React.createElement(Box, null,
-                React.createElement(ToggleButtonGroup, { value: ['bold'] },
-                    React.createElement(ToggleButton, { value: "bold", "aria-label": "bold" },
-                        React.createElement(FormatBoldIcon, null)),
-                    React.createElement(ToggleButton, { value: "italic", "aria-label": "italic" },
-                        React.createElement(FormatItalicIcon, null)),
-                    React.createElement(ToggleButton, { value: "underlined", "aria-label": "underlined" },
-                        React.createElement(FormatUnderlinedIcon, null)))))))
-};