@linagora/twake-mui 7.1.0 → 9.0.0

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

@@ -0,0 +1,7 @@
+import { IconProps } from '@linagora/twake-icons';
+import { ListItemIconProps } from '@mui/material';
+import React from 'react';
+export interface NavIconProps extends ListItemIconProps {
+    icon: IconProps['icon'];
+}
+export declare const NavIcon: ({ icon, ...props }: NavIconProps) => React.ReactElement;

package/dist/components/NavIcon/index.js

@@ -0,0 +1,17 @@
+import { Icon } from '@linagora/twake-icons';
+import { ListItemIcon } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import React from 'react';
+const NavIconRoot = styled(ListItemIcon)(({ theme }) => ({
+    minWidth: 0,
+    marginRight: 12,
+    color: theme.vars.palette.text.primary,
+    [theme.breakpoints.down('lg')]: {
+        display: 'block',
+        marginRight: 0,
+        color: theme.vars.palette.text.secondary,
+        '& svg': { margin: '4px auto 5px', width: 16, height: 16 }
+    }
+}));
+export const NavIcon = ({ icon, ...props }) => (React.createElement(NavIconRoot, { ...props },
+    React.createElement(Icon, { icon: icon, "aria-hidden": "true", focusable: "false" })));

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

@@ -0,0 +1,8 @@
+import { Theme } from '@mui/material/styles';
+import React from 'react';
+export declare const NavItem: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
+}, "style" | "className" | "children" | "classes" | "sx" | "alignItems" | "dense" | "divider" | "slotProps" | "slots" | "disableGutters" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    secondary?: boolean;
+}, {}, {}>;
+export type NavItemProps = React.ComponentProps<typeof NavItem>;

package/dist/components/NavItem/index.js

@@ -0,0 +1,29 @@
+import { ListItem, listItemButtonClasses } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const NavItem = styled(ListItem, {
+    shouldForwardProp: prop => prop !== 'secondary'
+})(({ theme, secondary }) => ({
+    padding: 0,
+    height: 36,
+    [theme.breakpoints.down('lg')]: {
+        display: 'block',
+        height: 'auto',
+        margin: '0 12px',
+        flex: '0 0 40px'
+    },
+    ...(secondary && {
+        height: 'auto',
+        margin: '3px 0',
+        [theme.breakpoints.down('lg')]: { display: 'none' },
+        [`& .${listItemButtonClasses.root}`]: {
+            margin: '0 16px 0 2.8rem',
+            padding: '8px 16px',
+            height: 'auto',
+            fontSize: theme.typography.pxToRem(14),
+            [`&.${listItemButtonClasses.selected}, &.active`]: {
+                color: theme.vars.palette.secondary.contrastText,
+                backgroundColor: theme.vars.palette.secondary.main
+            }
+        }
+    })
+}));

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

@@ -0,0 +1,3 @@
+import { ListItemButton, ListItemButtonProps } from '@mui/material';
+export type NavLinkProps = ListItemButtonProps;
+export declare const NavLink: typeof ListItemButton;

package/dist/components/NavLink/index.js

@@ -0,0 +1,36 @@
+import { ListItemButton, listItemButtonClasses, listItemIconClasses } from '@mui/material';
+import { styled } from '@mui/material/styles';
+// Cast keeps ListItemButton's `component` generic (react-router NavLink etc.)
+export const NavLink = styled(ListItemButton)(({ theme }) => ({
+    margin: '0 16px',
+    padding: '0 8px',
+    height: '100%',
+    borderRadius: 8,
+    lineHeight: 1.375,
+    color: theme.vars.palette.text.primary,
+    [`&.${listItemButtonClasses.selected}, &.active`]: {
+        color: theme.vars.palette.primary.main,
+        backgroundColor: theme.vars.palette.action.selected,
+        '&:hover': { backgroundColor: theme.vars.palette.action.selected },
+        [`& .${listItemIconClasses.root}`]: {
+            color: theme.vars.palette.primary.main
+        }
+    },
+    [theme.breakpoints.down('lg')]: {
+        display: 'block',
+        height: 'auto',
+        margin: 0,
+        padding: 0,
+        textAlign: 'center',
+        fontSize: theme.typography.pxToRem(11),
+        lineHeight: '12px',
+        color: theme.vars.palette.text.secondary,
+        [`&.${listItemButtonClasses.selected}, &.active`]: {
+            color: theme.vars.palette.text.primary,
+            backgroundColor: 'transparent',
+            [`& .${listItemIconClasses.root}`]: {
+                color: theme.vars.palette.text.primary
+            }
+        }
+    }
+}));

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

@@ -0,0 +1,7 @@
+import { SxProps } from '@mui/material';
+import { Theme } from '@mui/material/styles';
+import React from 'react';
+export interface NavTextProps extends React.ComponentPropsWithoutRef<'span'> {
+    sx?: SxProps<Theme>;
+}
+export declare const NavText: React.FC<NavTextProps>;

package/dist/components/NavText/index.js

@@ -0,0 +1,14 @@
+import { styled } from '@mui/material/styles';
+// Explicit annotation: declaration emit for styled('span') otherwise
+// widens the element props to the whole JSX.IntrinsicElements map.
+export const NavText = styled('span')(({ theme }) => ({
+    fontSize: theme.typography.pxToRem(14),
+    fontWeight: 500,
+    letterSpacing: '.15px',
+    [theme.breakpoints.down('lg')]: {
+        display: 'block',
+        textAlign: 'center',
+        whiteSpace: 'nowrap',
+        fontSize: theme.typography.pxToRem(12)
+    }
+}));

package/dist/components/Sidebar/Sidebar.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Sidebar } from './index';
+declare const meta: Meta<typeof Sidebar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Screenshot: Story;

package/dist/components/Sidebar/Sidebar.stories.js

@@ -0,0 +1,57 @@
+import { Check, Download, Warn } from '@linagora/twake-icons';
+import { Box, Typography } from '@mui/material';
+import React, { useState } from 'react';
+import { Nav } from '../Nav';
+import { NavDesktopDropdown } from '../NavDesktopDropdown';
+import { NavDesktopLimiter } from '../NavDesktopLimiter';
+import { NavIcon } from '../NavIcon';
+import { NavItem } from '../NavItem';
+import { NavLink } from '../NavLink';
+import { NavText } from '../NavText';
+import { Sidebar } from './index';
+const SidebarDemo = (props) => {
+    const [active, setActive] = useState(['Section 1', 'Subsection 1']);
+    const makeProps = (route) => ({
+        selected: active.slice(0, route.length).join('/') === route.join('/'),
+        onClick: () => setActive(route)
+    });
+    return (React.createElement(Box, { sx: { display: 'flex' } },
+        React.createElement(Sidebar, { ...props },
+            React.createElement(Nav, null,
+                React.createElement(NavItem, null,
+                    React.createElement(NavLink, { ...makeProps(['Section 1']) },
+                        React.createElement(NavIcon, { icon: Warn }),
+                        React.createElement(NavText, null, "Section 1"))),
+                React.createElement(NavDesktopLimiter, null, Array.from(Array(10).keys()).map(i => (React.createElement(NavItem, { secondary: true, key: i },
+                    React.createElement(NavLink, { ...makeProps(['Section 1', `Subsection ${i}`]) },
+                        React.createElement(NavText, null,
+                            "Subsection ",
+                            i)))))),
+                React.createElement(NavItem, null,
+                    React.createElement(NavLink, { ...makeProps(['Section 2']) },
+                        React.createElement(NavIcon, { icon: Check }),
+                        React.createElement(NavText, null, "Section 2"))),
+                React.createElement(NavItem, null,
+                    React.createElement(NavLink, { ...makeProps(['Section 3']) },
+                        React.createElement(NavIcon, { icon: Download }),
+                        React.createElement(NavText, null, "Section 3"))),
+                React.createElement(NavDesktopDropdown, { label: "Section 4" }, Array.from(Array(6).keys()).map(i => (React.createElement(NavItem, { secondary: true, key: i },
+                    React.createElement(NavLink, { ...makeProps(['Section 4', `Subsection ${i}`]) },
+                        React.createElement(NavText, null,
+                            "Subsection ",
+                            i)))))))),
+        React.createElement(Box, { sx: { flex: 1, p: 2 } },
+            React.createElement(Typography, { variant: "h5" }, active.join(' / ')))));
+};
+const meta = {
+    title: 'Sidebar',
+    component: Sidebar,
+    tags: ['autodocs'],
+    render: args => React.createElement(SidebarDemo, { ...args })
+};
+export default meta;
+export const Default = {};
+// Visual Regression - Combined view for Argos testing
+export const Screenshot = {
+    tags: ['argos']
+};

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

@@ -0,0 +1,7 @@
+import { SxProps } from '@mui/material';
+import { Theme } from '@mui/material/styles';
+import React from 'react';
+export interface SidebarProps extends React.ComponentPropsWithoutRef<'aside'> {
+    sx?: SxProps<Theme>;
+}
+export declare const Sidebar: React.FC<SidebarProps>;

package/dist/components/Sidebar/index.js

@@ -0,0 +1,21 @@
+import { styled } from '@mui/material/styles';
+export const Sidebar = styled('aside')(({ theme }) => ({
+    width: 236,
+    flex: '0 0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    overflowX: 'hidden',
+    overflowY: 'auto',
+    backgroundColor: theme.vars.palette.background.default,
+    [theme.breakpoints.down('lg')]: {
+        position: 'fixed',
+        bottom: 0,
+        left: 0,
+        width: '100%',
+        height: 52,
+        boxSizing: 'content-box',
+        display: 'block',
+        borderTop: `1px solid ${theme.vars.palette.divider}`,
+        zIndex: theme.zIndex.appBar
+    }
+}));

package/dist/components/Switch/Switch.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Switch } from './index';
+declare const meta: Meta<typeof Switch>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Screenshot: Story;

package/dist/components/Switch/Switch.stories.js

@@ -0,0 +1,58 @@
+import { Check } from '@linagora/twake-icons';
+import { Divider, FormControlLabel, FormGroup, Stack, Typography } from '@mui/material';
+import React from 'react';
+import { Switch } from './index';
+const colors = ['primary', 'secondary', 'success', 'default'];
+const meta = {
+    title: 'Switch',
+    component: Switch,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        color: { control: 'select', options: colors },
+        checked: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        icon: { control: 'boolean', mapping: { true: Check, false: undefined } }
+    }
+};
+export default meta;
+const StateSwitch = ({ defaultChecked, ...props }) => {
+    const [checked, setChecked] = React.useState(!!defaultChecked);
+    return (React.createElement(Switch, { checked: checked, onChange: event => setChecked(event.target.checked), ...props }));
+};
+export const Default = {
+    args: { color: 'primary' },
+    render: args => React.createElement(StateSwitch, { defaultChecked: true, ...args })
+};
+const Labelled = ({ labelPlacement }) => (React.createElement(Stack, { spacing: 1 },
+    React.createElement(Typography, { variant: "h4" }, "With labels"),
+    React.createElement(FormGroup, { row: true },
+        React.createElement(FormControlLabel, { control: React.createElement(Switch, { color: "primary" }), label: "With label", labelPlacement: labelPlacement }),
+        React.createElement(FormControlLabel, { control: React.createElement(Switch, { color: "primary", checked: true }), label: "With label - checked", labelPlacement: labelPlacement })),
+    React.createElement(Typography, { variant: "h5" }, "With disable"),
+    colors.map(color => (React.createElement(FormGroup, { key: color, row: true },
+        React.createElement(FormControlLabel, { control: React.createElement(Switch, { color: color, disabled: true }), label: color, labelPlacement: labelPlacement }),
+        React.createElement(FormControlLabel, { control: React.createElement(Switch, { color: color, checked: true, disabled: true }), label: `${color} - checked`, labelPlacement: labelPlacement })))),
+    React.createElement(FormGroup, { row: true },
+        React.createElement(FormControlLabel, { control: React.createElement(Switch, { color: "primary", icon: Check, disabled: true }), label: "primary with icon", labelPlacement: labelPlacement }),
+        React.createElement(FormControlLabel, { control: React.createElement(Switch, { color: "primary", icon: Check, checked: true, disabled: true }), label: "primary with icon - checked", labelPlacement: labelPlacement }))));
+// Visual Regression - Every example of the cozy-ui Switch doc
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 2 },
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Colors, with icon"),
+            colors.map(color => (React.createElement(Stack, { key: color, direction: "row", sx: { alignItems: 'center' } },
+                React.createElement(Typography, { sx: { width: 96 } },
+                    color,
+                    ":"),
+                React.createElement(Switch, { color: color, icon: Check }),
+                React.createElement(Switch, { color: color, icon: Check, checked: true }))))),
+        React.createElement(Divider, null),
+        React.createElement("section", null,
+            React.createElement(Labelled, null)),
+        React.createElement(Divider, null),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Label before"),
+            React.createElement(Labelled, { labelPlacement: "start" }))))
+};

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

@@ -0,0 +1,9 @@
+import { IconProps } from '@linagora/twake-icons';
+import { SwitchProps as MuiSwitchProps } from '@mui/material';
+import React from 'react';
+export interface SwitchProps extends Omit<MuiSwitchProps, 'icon' | 'checkedIcon'> {
+    /** A twake icon drawn inside the thumb */
+    icon?: IconProps['icon'];
+}
+export declare const Switch: React.FC<SwitchProps>;
+export default Switch;

package/dist/components/Switch/index.js

@@ -0,0 +1,8 @@
+import { Icon } from '@linagora/twake-icons';
+import { Switch as MuiSwitch } from '@mui/material';
+import React from 'react';
+export const Switch = ({ icon, ...props }) => {
+    const thumb = (React.createElement("span", { className: "switchThumb" }, !!icon && React.createElement(Icon, { icon: icon, size: 14 })));
+    return React.createElement(MuiSwitch, { icon: thumb, checkedIcon: thumb, ...props });
+};
+export default Switch;

package/dist/components/Tabs/Tabs.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Tabs } from './index';
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Screenshot: Story;

package/dist/components/Tabs/Tabs.stories.js

@@ -0,0 +1,52 @@
+import { Stack, Tab } from '@mui/material';
+import React from 'react';
+import { Tabs } from './index';
+const variants = ['standard', 'fullWidth', 'scrollable'];
+const meta = {
+    title: 'Tabs',
+    component: Tabs,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        variant: { control: 'select', options: variants },
+        narrowed: { control: 'boolean' },
+        segmented: { control: 'boolean' },
+        centered: { control: 'boolean' }
+    }
+};
+export default meta;
+const Example = props => {
+    const [value, setValue] = React.useState(0);
+    const scrollable = props.variant === 'scrollable';
+    return (React.createElement(Tabs, { value: value, "aria-label": "simple tabs example", onChange: (_event, newValue) => setValue(newValue), ...props },
+        React.createElement(Tab, { label: "Item One", id: "simple-tab-0", "aria-controls": "simple-tabpanel-0" }),
+        React.createElement(Tab, { label: "Item Two", id: "simple-tab-1", "aria-controls": "simple-tabpanel-1" }),
+        React.createElement(Tab, { label: "Item Disabled", id: "simple-tab-3", "aria-controls": "simple-tabpanel-3", disabled: true }),
+        React.createElement(Tab, { label: "Item Three", id: "simple-tab-2", "aria-controls": "simple-tabpanel-2" }),
+        scrollable && React.createElement(Tab, { label: "Item Four", id: "simple-tab-4" }),
+        scrollable && React.createElement(Tab, { label: "Item Five", id: "simple-tab-5" }),
+        scrollable && React.createElement(Tab, { label: "Item Six", id: "simple-tab-6" })));
+};
+export const Default = {
+    args: { variant: 'standard' },
+    render: args => React.createElement(Example, { ...args })
+};
+// Visual Regression - Every example of the cozy-ui Tabs doc
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4, sx: { width: 800 } },
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Default"),
+            React.createElement(Example, null)),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Narrowed"),
+            React.createElement(Example, { narrowed: true })),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Segmented"),
+            React.createElement(Example, { segmented: true })),
+        variants.map(variant => (React.createElement("section", { key: variant },
+            React.createElement("h3", { style: { marginBottom: '12px' } }, variant),
+            React.createElement(Stack, { spacing: 4 },
+                React.createElement(Example, { variant: variant }),
+                React.createElement(Example, { variant: variant, segmented: true })))))))
+};

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

@@ -0,0 +1,10 @@
+import { TabsProps as MuiTabsProps } from '@mui/material';
+import React from 'react';
+export interface TabsProps extends MuiTabsProps {
+    /** Drops the minimum tab width */
+    narrowed?: boolean;
+    /** Pill container with the selected tab raised on a white pill */
+    segmented?: boolean;
+}
+export declare const Tabs: React.FC<TabsProps>;
+export default Tabs;

package/dist/components/Tabs/index.js

@@ -0,0 +1,5 @@
+import { Tabs as MuiTabs } from '@mui/material';
+import cx from 'classnames';
+import React from 'react';
+export const Tabs = ({ className, narrowed, segmented, ...props }) => React.createElement(MuiTabs, { className: cx(className, { narrowed, segmented }), ...props });
+export default Tabs;

package/dist/components/ThemeProvider/index.js

@@ -1,16 +1,15 @@
 import { CssBaseline } from '@mui/material';
-import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles';
+import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
 import React, { useMemo } from 'react';
 import { makeTheme } from '../../lib/makeTheme';
-export const TwakeMuiThemeProvider = ({ children, mode = 'light', themeOptions }) => {
-    const theme = useMemo(() => {
-        const baseTheme = makeTheme(mode);
-        if (!themeOptions) {
-            return baseTheme;
-        }
-        return createTheme(baseTheme, themeOptions);
-    }, [mode, themeOptions]);
-    return (React.createElement(MuiThemeProvider, { theme: theme },
+export const TwakeMuiThemeProvider = ({ children, mode = 'light', palette, themeOptions }) => {
+    // The palette holds plain JSON, so comparing it by content lets consumers
+    // pass it inline without rebuilding the whole theme on every render.
+    const paletteKey = JSON.stringify(palette);
+    const theme = useMemo(() => makeTheme(mode, palette, themeOptions), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [mode, paletteKey, themeOptions]);
+    return (React.createElement(MuiThemeProvider, { theme: theme, defaultMode: mode },
         React.createElement(CssBaseline, null),
         children));
 };

package/dist/components/ThemeProvider/types.d.ts

@@ -1,7 +1,13 @@
 import { ThemeOptions } from '@mui/material/styles';
 import { ReactNode } from 'react';
+import { PaletteJson } from '../../lib/types';
 export interface ThemeProviderProps {
     children: ReactNode;
+    /**
+     * @deprecated Only sets `defaultColorScheme` now (both schemes are always
+     * present) - switch theme at runtime with MUI's `useColorScheme()` instead.
+     */
     mode?: 'light' | 'dark';
+    palette?: Partial<PaletteJson>;
     themeOptions?: Partial<ThemeOptions>;
 }

package/dist/index.d.ts

@@ -1,17 +1,42 @@
 export * from '@mui/material';
 export * from '@mui/lab';
-export { createTheme, ThemeProvider, styled, alpha, darken, lighten, useTheme } from '@mui/material/styles';
+export { createTheme, ThemeProvider, styled, alpha, darken, lighten, useTheme, useColorScheme } from '@mui/material/styles';
 export { default as Autocomplete } from '@mui/material/Autocomplete';
 export { makePalette } from './lib/makePalette';
 export { theme } from './lib/theme';
 export { radius } from './lib/radius';
 export { TwakeMuiThemeProvider } from './components/ThemeProvider';
 export { Avatar, default as AvatarDefault } from './components/Avatar';
+export { Button, default as ButtonDefault } from './components/Button';
 export { default as Chip } from './components/Chip';
+export { Dialog, default as DialogDefault } from './components/Dialog';
+export { Tabs, default as TabsDefault } from './components/Tabs';
+export { Switch, default as SwitchDefault } from './components/Switch';
+export { Sidebar } from './components/Sidebar';
+export { Nav } from './components/Nav';
+export { NavItem } from './components/NavItem';
+export { NavLink } from './components/NavLink';
+export { NavIcon } from './components/NavIcon';
+export { NavText } from './components/NavText';
+export { NavDesktopLimiter } from './components/NavDesktopLimiter';
+export { NavDesktopDropdown } from './components/NavDesktopDropdown';
 export { nameToColor, supportedColors } from './components/Avatar/helpers';
 export { default as AccordionExpandIcon } from './components/AccordionExpandIcon';
 export { useBreakpoints } from './hooks/useBreakpoints';
 export type { TwakeTheme } from './lib/theme';
+export type { PaletteJson } from './lib/types';
 export type { AvatarProps } from './components/Avatar';
+export type { ButtonProps } from './components/Button';
 export type { ChipProps } from './components/Chip';
+export type { DialogProps, DialogSize } from './components/Dialog';
+export type { TabsProps } from './components/Tabs';
+export type { SwitchProps } from './components/Switch';
+export type { SidebarProps } from './components/Sidebar';
+export type { NavProps } from './components/Nav';
+export type { NavItemProps } from './components/NavItem';
+export type { NavLinkProps } from './components/NavLink';
+export type { NavIconProps } from './components/NavIcon';
+export type { NavTextProps } from './components/NavText';
+export type { NavDesktopLimiterProps } from './components/NavDesktopLimiter';
+export type { NavDesktopDropdownProps } from './components/NavDesktopDropdown';
 export type { Breakpoints } from './hooks/useBreakpoints';

package/dist/index.js

@@ -1,7 +1,7 @@
 // MUI
 export * from '@mui/material';
 export * from '@mui/lab';
-export { createTheme, ThemeProvider, styled, alpha, darken, lighten, useTheme } from '@mui/material/styles';
+export { createTheme, ThemeProvider, styled, alpha, darken, lighten, useTheme, useColorScheme } from '@mui/material/styles';
 export { default as Autocomplete } from '@mui/material/Autocomplete';
 // LIB
 export { makePalette } from './lib/makePalette';
@@ -10,7 +10,19 @@ export { radius } from './lib/radius';
 // COMPONENTS & HELPERS
 export { TwakeMuiThemeProvider } from './components/ThemeProvider';
 export { Avatar, default as AvatarDefault } from './components/Avatar';
+export { Button, default as ButtonDefault } from './components/Button';
 export { default as Chip } from './components/Chip';
+export { Dialog, default as DialogDefault } from './components/Dialog';
+export { Tabs, default as TabsDefault } from './components/Tabs';
+export { Switch, default as SwitchDefault } from './components/Switch';
+export { Sidebar } from './components/Sidebar';
+export { Nav } from './components/Nav';
+export { NavItem } from './components/NavItem';
+export { NavLink } from './components/NavLink';
+export { NavIcon } from './components/NavIcon';
+export { NavText } from './components/NavText';
+export { NavDesktopLimiter } from './components/NavDesktopLimiter';
+export { NavDesktopDropdown } from './components/NavDesktopDropdown';
 export { nameToColor, supportedColors } from './components/Avatar/helpers';
 export { default as AccordionExpandIcon } from './components/AccordionExpandIcon';
 export { useBreakpoints } from './hooks/useBreakpoints';

package/dist/lib/makePalette.d.ts

@@ -1,6 +1,6 @@
 import { PaletteOptions } from '@mui/material/styles';
 import { PaletteJson, BackgroundPalette, GreyPalette, BorderPalette } from './types';
-export declare const makePalette: (mode?: "light" | "dark", palette?: PaletteJson) => PaletteOptions & {
+export declare const makePalette: (mode?: "light" | "dark", overrides?: Partial<PaletteJson>) => PaletteOptions & {
     background: BackgroundPalette;
     grey: GreyPalette;
     border: BorderPalette;

package/dist/lib/makePalette.js

@@ -1,7 +1,9 @@
 import { alpha } from '@mui/material/styles';
+import { deepmerge } from '@mui/utils';
 import paletteJson from './palette.json';
 const paletteData = paletteJson;
-export const makePalette = (mode = 'light', palette = paletteData) => {
+export const makePalette = (mode = 'light', overrides = {}) => {
+    const palette = deepmerge(paletteData, overrides);
     if (mode === 'dark') {
         return {
             mode,

package/dist/lib/makeShadows.d.ts

@@ -1,3 +1,3 @@
 import { Shadows } from '@mui/material/styles';
 import { PaletteJson } from './types';
-export declare const makeShadows: (mode?: "light" | "dark", palette?: PaletteJson) => Shadows;
+export declare const makeShadows: (palette?: PaletteJson) => Shadows;

package/dist/lib/makeShadows.js

@@ -39,8 +39,8 @@ const OUTLINE_OPACITY = 0.12;
  * through the type. Kept to stay iso with cozy-ui.
  */
 const EXTRA_ELEVATION_OPACITY = 0.04;
-export const makeShadows = (mode = 'light', palette = paletteData) => {
-    const shadowColor = mode === 'dark' ? palette.Common.black : palette.Grey[900];
+export const makeShadows = (palette = paletteData) => {
+    const shadowColor = palette.Common.black;
     const outline = `0px 0px 0px 0.5px ${alpha(shadowColor, OUTLINE_OPACITY)}`;
     const shadows = elevations.map(([y1, blur1, spread1, o1, y2, blur2, spread2, o2]) => [
         `0px ${y1}px ${blur1}px ${spread1}px ${alpha(shadowColor, o1)}`,

package/dist/lib/makeTheme.d.ts

@@ -1,2 +1,3 @@
-import { createTheme } from '@mui/material/styles';
-export declare const makeTheme: (mode?: "light" | "dark") => ReturnType<typeof createTheme>;
+import { createTheme, ThemeOptions } from '@mui/material/styles';
+import { PaletteJson } from './types';
+export declare const makeTheme: (mode?: "light" | "dark", paletteOverrides?: Partial<PaletteJson>, themeOptions?: ThemeOptions) => ReturnType<typeof createTheme>;

package/dist/lib/makeTheme.js

@@ -1,9 +1,9 @@
 import { createTheme } from '@mui/material/styles';
-import { darkOverrides } from './darkOverrides';
-import { lightOverrides } from './lightOverrides';
+import { deepmerge } from '@mui/utils';
 import { makePalette } from './makePalette';
 import { makeShadows } from './makeShadows';
 import { makeTypography } from './makeTypography';
+import { overrides } from './overrides';
 // DatePicker styles are applied through component overrides
 const themesCommonConfig = {
     shape: {
@@ -22,19 +22,18 @@ const themesCommonConfig = {
         modal: 1300
     }
 };
-export const makeTheme = (mode = 'light') => {
-    const palette = makePalette(mode);
-    const typography = makeTypography();
-    const theme = createTheme({
+export const makeTheme = (mode = 'light', paletteOverrides, themeOptions) => {
+    const baseOptions = {
         ...themesCommonConfig,
-        palette,
-        typography,
-        shadows: makeShadows(mode)
-    });
-    const components = mode === 'dark' ? darkOverrides : lightOverrides;
-    // Create the final theme with components
-    return createTheme({
-        ...theme,
-        components
-    });
+        cssVariables: { colorSchemeSelector: 'data-theme' },
+        defaultColorScheme: mode,
+        colorSchemes: {
+            light: { palette: makePalette('light', paletteOverrides) },
+            dark: { palette: makePalette('dark', paletteOverrides) }
+        },
+        typography: makeTypography(),
+        shadows: makeShadows(),
+        components: overrides
+    };
+    return createTheme(deepmerge(baseOptions, themeOptions ?? {}));
 };

package/dist/lib/overrides.d.ts

@@ -0,0 +1,2 @@
+import { ThemeOptions } from '@mui/material/styles';
+export declare const overrides: NonNullable<ThemeOptions['components']>;