@linagora/twake-mui 8.0.0 → 9.1.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# @linagora/twake-mui [9.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.0.0...@linagora/twake-mui@9.1.0) (2026-09-22)
+
+
+### Features
+
+* **twake-mui:** Migrate Layout from cozy-ui ([fdcb499](https://github.com/linagora/twake-ui/commit/fdcb499c9790e4b8fc7aaaa12087a8eebf250d42))
+
+# @linagora/twake-mui [9.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@8.0.0...@linagora/twake-mui@9.0.0) (2026-09-21)
+
+
+### Features
+
+* **twake-mui:** Migrate Nav from cozy-ui ([5dd0516](https://github.com/linagora/twake-ui/commit/5dd05165741159437f796935f81d9d907eb808f2))
+* **twake-mui:** Migrate Sidebar from cozy-ui ([08f4179](https://github.com/linagora/twake-ui/commit/08f4179493090399cca1e59878d405b945777225))
+
+
+### BREAKING CHANGES
+
+* **twake-mui:** You need "twake-i18n" >= "0.5.0"
+
 # @linagora/twake-mui [8.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@7.1.0...@linagora/twake-mui@8.0.0) (2026-09-18)
 
 

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

@@ -1,12 +1,19 @@
-import { ButtonProps as MuiButtonProps } from '@mui/material';
+import { ButtonProps as MuiButtonProps, ButtonTypeMap as MuiButtonTypeMap } from '@mui/material';
+import { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent';
 import React from 'react';
 declare const legacyVariants: {
     readonly primary: "contained";
     readonly secondary: "outlined";
 };
 type LegacyVariant = keyof typeof legacyVariants;
-export interface ButtonProps extends Omit<MuiButtonProps, 'variant'> {
-    variant?: MuiButtonProps['variant'] | LegacyVariant;
+export interface ButtonTypeMap<AdditionalProps = object, RootComponent extends React.ElementType = 'button'> {
+    props: AdditionalProps & Omit<MuiButtonTypeMap['props'], 'variant'> & {
+        variant?: MuiButtonProps['variant'] | LegacyVariant;
+    };
+    defaultComponent: RootComponent;
 }
-export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export type ButtonProps<RootComponent extends React.ElementType = 'button', AdditionalProps = object> = OverrideProps<ButtonTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+export declare const Button: OverridableComponent<ButtonTypeMap> & {
+    displayName?: string;
+};
 export default Button;

package/dist/components/Layout/Content.d.ts

@@ -0,0 +1,7 @@
+import { SxProps } from '@mui/material';
+import { Theme } from '@mui/material/styles';
+import React from 'react';
+export interface ContentProps extends React.ComponentPropsWithoutRef<'div'> {
+    sx?: SxProps<Theme>;
+}
+export declare const Content: (props: ContentProps) => React.ReactElement;

package/dist/components/Layout/Content.js

@@ -0,0 +1,29 @@
+import { styled } from '@mui/material/styles';
+import React, { useContext } from 'react';
+import { LayoutContext } from './Layout';
+const ContentRoot = styled('div', {
+    shouldForwardProp: prop => prop !== 'monoColumn'
+})(({ theme }) => ({
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    flex: '1 1 auto',
+    boxSizing: 'border-box',
+    overflow: 'hidden auto',
+    backgroundColor: theme.vars.palette.background.paper,
+    height: '100%',
+    variants: [
+        {
+            props: { monoColumn: false },
+            style: {
+                margin: '16px 16px 16px 0',
+                borderRadius: 16,
+                [theme.breakpoints.down('lg')]: { margin: 0, borderRadius: 0 }
+            }
+        }
+    ]
+}));
+export const Content = (props) => {
+    const { monoColumn } = useContext(LayoutContext);
+    return React.createElement(ContentRoot, { role: "main", monoColumn: monoColumn, ...props });
+};

package/dist/components/Layout/Layout.d.ts

@@ -0,0 +1,21 @@
+import { SxProps } from '@mui/material';
+import { CSSObject, Theme } from '@mui/material/styles';
+import React from 'react';
+interface LayoutContextValue {
+    monoColumn: boolean;
+    withTopBar: boolean;
+}
+export declare const LayoutContext: React.Context<LayoutContextValue>;
+export interface TwoPanesProps {
+    monoColumn?: boolean;
+}
+export declare const twoPanes: (theme: Theme) => CSSObject;
+export interface LayoutProps extends React.ComponentPropsWithoutRef<'div'> {
+    sx?: SxProps<Theme>;
+    /** Used to add/remove top spacing when using with or without a topbar */
+    withTopBar?: boolean;
+    /** Should be true if no sidebar in the app */
+    monoColumn?: boolean;
+}
+export declare const Layout: ({ children, withTopBar, monoColumn, ...props }: LayoutProps) => React.ReactElement;
+export {};

package/dist/components/Layout/Layout.js

@@ -0,0 +1,31 @@
+import { styled } from '@mui/material/styles';
+import React, { createContext, useMemo } from 'react';
+import { SIDEBAR_MOBILE_HEIGHT } from '../Sidebar';
+export const LayoutContext = createContext({
+    monoColumn: false,
+    withTopBar: true
+});
+export const twoPanes = (theme) => ({
+    backgroundColor: theme.vars.palette.background.default,
+    [theme.breakpoints.down('lg')]: {
+        height: `calc(100vh - var(${SIDEBAR_MOBILE_HEIGHT}, 0px))`,
+        backgroundColor: 'transparent'
+    }
+});
+const LayoutRoot = styled('div', {
+    shouldForwardProp: prop => prop !== 'monoColumn'
+})(({ theme }) => ({
+    boxSizing: 'border-box',
+    display: 'flex',
+    maxWidth: '100%',
+    width: '100%',
+    height: '100%',
+    backgroundColor: theme.vars.palette.background.paper,
+    color: theme.vars.palette.text.primary,
+    variants: [{ props: { monoColumn: false }, style: twoPanes(theme) }]
+}));
+export const Layout = ({ children, withTopBar = true, monoColumn = false, ...props }) => {
+    const value = useMemo(() => ({ monoColumn, withTopBar }), [monoColumn, withTopBar]);
+    return (React.createElement(LayoutContext.Provider, { value: value },
+        React.createElement(LayoutRoot, { monoColumn: monoColumn, ...props }, children)));
+};

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

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

package/dist/components/Layout/Layout.stories.js

@@ -0,0 +1,89 @@
+import { Check, Download, Warn } from '@linagora/twake-icons';
+import { Box, Typography } from '@mui/material';
+import React, { useState } from 'react';
+import { Content, Layout, Main } from './index';
+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 '../Sidebar';
+const paragraph = 'Ada Lovelace was an English mathematician chiefly known for her work on Charles Babbage’s proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation.';
+const TopBar = () => (React.createElement(Box, { id: "coz-bar", role: "banner", sx: theme => ({
+        display: 'flex',
+        alignItems: 'center',
+        px: 2,
+        minHeight: 48,
+        width: '100%',
+        boxSizing: 'border-box',
+        backgroundColor: theme.vars.palette.background.paper,
+        borderBottom: `1px solid ${theme.vars.palette.divider}`,
+        position: 'fixed',
+        top: 0,
+        right: 0,
+        zIndex: theme.zIndex.appBar,
+        [theme.breakpoints.up('lg')]: { position: 'relative' }
+    }) }, "Fake TopBar"));
+const LayoutDemo = ({ monoColumn = false, withTopBar = true, ...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: { height: '100vh', display: 'flex', flexDirection: 'column' } },
+        withTopBar && React.createElement(TopBar, null),
+        React.createElement(Box, { role: "application", sx: { flex: '1 1 auto', minHeight: 0 } },
+            React.createElement(Layout, { monoColumn: monoColumn, withTopBar: withTopBar, ...props },
+                !monoColumn && (React.createElement(Sidebar, null,
+                    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(Main, null,
+                    React.createElement(Content, { sx: { p: 2 } },
+                        React.createElement(Typography, { variant: "h5" }, active.join(' / ')),
+                        React.createElement("p", null, "---Start---"),
+                        Array.from(Array(6).keys()).map(i => (React.createElement("p", { key: i }, paragraph))),
+                        React.createElement("p", null, "---END---")))))));
+};
+const meta = {
+    title: 'Layout',
+    component: Layout,
+    parameters: { layout: 'fullscreen' },
+    tags: ['autodocs'],
+    argTypes: {
+        monoColumn: { control: 'boolean' },
+        withTopBar: { control: 'boolean' }
+    },
+    render: args => React.createElement(LayoutDemo, { ...args })
+};
+export default meta;
+export const Default = {
+    args: { monoColumn: false, withTopBar: true }
+};
+// Visual Regression - Combined view for Argos testing
+export const Screenshot = {
+    tags: ['argos'],
+    args: { monoColumn: false, withTopBar: true }
+};

package/dist/components/Layout/Main.d.ts

@@ -0,0 +1,7 @@
+import { SxProps } from '@mui/material';
+import { Theme } from '@mui/material/styles';
+import React from 'react';
+export interface MainProps extends React.ComponentPropsWithoutRef<'main'> {
+    sx?: SxProps<Theme>;
+}
+export declare const Main: (props: MainProps) => React.ReactElement;

package/dist/components/Layout/Main.js

@@ -0,0 +1,37 @@
+import { styled } from '@mui/material/styles';
+import React, { useContext } from 'react';
+import { LayoutContext, twoPanes } from './Layout';
+/** Height of the top bar, which is out of the Layout but overlaps it */
+const TOP_BAR_HEIGHT = 48;
+const MainRoot = styled('main', {
+    shouldForwardProp: prop => prop !== 'monoColumn' && prop !== 'withTopBar'
+})(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'relative',
+    flex: '1 1 auto',
+    boxSizing: 'border-box',
+    overflow: 'hidden',
+    height: '100%',
+    variants: [
+        { props: { monoColumn: false }, style: twoPanes(theme) },
+        {
+            props: { withTopBar: true },
+            style: {
+                [theme.breakpoints.down('lg')]: {
+                    '&::before': {
+                        content: '""',
+                        display: 'block',
+                        height: TOP_BAR_HEIGHT,
+                        width: '100%',
+                        backgroundColor: theme.vars.palette.background.paper
+                    }
+                }
+            }
+        }
+    ]
+}));
+export const Main = (props) => {
+    const { monoColumn, withTopBar } = useContext(LayoutContext);
+    return React.createElement(MainRoot, { monoColumn: monoColumn, withTopBar: withTopBar, ...props });
+};

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

@@ -0,0 +1,6 @@
+export { Layout } from './Layout';
+export { Main } from './Main';
+export { Content } from './Content';
+export type { LayoutProps } from './Layout';
+export type { MainProps } from './Main';
+export type { ContentProps } from './Content';

package/dist/components/Layout/index.js

@@ -0,0 +1,3 @@
+export { Layout } from './Layout';
+export { Main } from './Main';
+export { Content } from './Content';

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

@@ -0,0 +1,8 @@
+import { Theme } from '@mui/material/styles';
+import React from 'react';
+declare const NavRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ListOwnProps & Omit<import("@mui/material").ListOwnProps, keyof import("@mui/material").ListOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
+    ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
+}, "style" | "className" | "children" | "classes" | "sx" | "dense" | "disablePadding" | "subheader"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export type NavProps = React.ComponentProps<typeof NavRoot>;
+export declare const Nav: (props: NavProps) => React.ReactElement;
+export {};

package/dist/components/Nav/index.js

@@ -0,0 +1,14 @@
+import { List } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import React from 'react';
+const NavRoot = styled(List)(({ theme }) => ({
+    margin: '24px 0',
+    padding: 0,
+    [theme.breakpoints.down('lg')]: {
+        display: 'flex',
+        justifyContent: 'space-around',
+        margin: '6px 0 4px'
+    }
+}));
+export const Nav = (props) => (React.createElement("nav", null,
+    React.createElement(NavRoot, { ...props })));

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface NavDesktopDropdownProps {
+    label: string;
+    children: React.ReactNode;
+    defaultOpen?: boolean;
+    limit?: number;
+}
+export declare const NavDesktopDropdown: ({ label, children, defaultOpen, limit }: NavDesktopDropdownProps) => React.ReactElement | null;

package/dist/components/NavDesktopDropdown/index.js

@@ -0,0 +1,24 @@
+import { Bottom, Icon } from '@linagora/twake-icons';
+import { ListItem, Typography } from '@mui/material';
+import React, { Children, isValidElement, useState } from 'react';
+import { useBreakpoints } from '../../hooks/useBreakpoints';
+export const NavDesktopDropdown = ({ label, children, defaultOpen = true, limit = 5 }) => {
+    const { isDesktop } = useBreakpoints();
+    const [open, setOpen] = useState(defaultOpen);
+    const isActivated = Children.toArray(children).filter(isValidElement).length > limit;
+    const onToggle = () => setOpen(current => !current);
+    if (!isDesktop)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ListItem, { onClick: isActivated ? onToggle : undefined, sx: {
+                minHeight: 48,
+                py: 1,
+                px: 2,
+                justifyContent: 'space-between',
+                cursor: isActivated ? 'pointer' : undefined
+            } },
+            React.createElement(Typography, { variant: "caption", sx: { color: 'text.secondary' } }, label),
+            isActivated && (React.createElement(Typography, { component: "span", sx: { display: 'flex', ml: '5px', color: 'text.secondary' } },
+                React.createElement(Icon, { icon: Bottom, size: 10, rotate: open ? 0 : -90 })))),
+        open && children));
+};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface NavDesktopLimiterProps {
+    children: React.ReactNode;
+    max?: number;
+}
+export declare const NavDesktopLimiter: ({ children, max }: NavDesktopLimiterProps) => React.ReactElement | null;

package/dist/components/NavDesktopLimiter/index.js

@@ -0,0 +1,31 @@
+import { Bottom, Top } from '@linagora/twake-icons';
+import React, { Children, isValidElement, useState } from 'react';
+import { useExtendI18n, useI18n } from 'twake-i18n';
+import { NavIcon } from '../NavIcon';
+import { NavItem } from '../NavItem';
+import { NavLink } from '../NavLink';
+import { NavText } from '../NavText';
+import en from './locales/en.json';
+import fr from './locales/fr.json';
+import ru from './locales/ru.json';
+import vi from './locales/vi.json';
+import { useBreakpoints } from '../../hooks/useBreakpoints';
+const locales = { en, fr, ru, vi };
+export const NavDesktopLimiter = ({ children, max = 5 }) => {
+    useExtendI18n(locales);
+    const { t } = useI18n();
+    const [viewingAll, setViewingAll] = useState(false);
+    const { isMobile } = useBreakpoints();
+    const items = Children.toArray(children).filter(isValidElement);
+    const amountHidden = Math.max(0, items.length - max);
+    if (isMobile)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        viewingAll ? items : items.slice(0, max),
+        amountHidden > 0 && (React.createElement(NavItem, { secondary: true },
+            React.createElement(NavLink, { onClick: () => setViewingAll(current => !current) },
+                React.createElement(NavIcon, { icon: viewingAll ? Top : Bottom }),
+                React.createElement(NavText, null, viewingAll
+                    ? t('NavDesktopLimiter.showLess')
+                    : `${t('NavDesktopLimiter.showMore')} (${amountHidden})`))))));
+};

package/dist/components/NavDesktopLimiter/locales/en.json

@@ -0,0 +1,6 @@
+{
+    "NavDesktopLimiter": {
+        "showMore": "Show More",
+        "showLess": "Show Less"
+    }
+}

package/dist/components/NavDesktopLimiter/locales/fr.json

@@ -0,0 +1,6 @@
+{
+    "NavDesktopLimiter": {
+        "showMore": "Voir plus",
+        "showLess": "Voir moins"
+    }
+}

package/dist/components/NavDesktopLimiter/locales/ru.json

@@ -0,0 +1,6 @@
+{
+    "NavDesktopLimiter": {
+        "showMore": "Показать больше",
+        "showLess": "Показать меньше"
+    }
+}

package/dist/components/NavDesktopLimiter/locales/vi.json

@@ -0,0 +1,6 @@
+{
+    "NavDesktopLimiter": {
+        "showMore": "Hiện thêm",
+        "showLess": "Hiện ít hơn"
+    }
+}

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,8 @@
+import { SxProps } from '@mui/material';
+import { Theme } from '@mui/material/styles';
+import React from 'react';
+export declare const SIDEBAR_MOBILE_HEIGHT = "--sidebarHeight";
+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,28 @@
+import { GlobalStyles } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import React from 'react';
+export const SIDEBAR_MOBILE_HEIGHT = '--sidebarHeight';
+const makeSidebarHeightCSSVar = (React.createElement(GlobalStyles, { styles: { ':root': { [SIDEBAR_MOBILE_HEIGHT]: '52px' } } }));
+const SidebarRoot = 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: `var(${SIDEBAR_MOBILE_HEIGHT})`,
+        boxSizing: 'content-box',
+        display: 'block',
+        borderTop: `1px solid ${theme.vars.palette.divider}`,
+        zIndex: theme.zIndex.appBar
+    }
+}));
+export const Sidebar = props => (React.createElement(React.Fragment, null,
+    makeSidebarHeightCSSVar,
+    React.createElement(SidebarRoot, { ...props })));

package/dist/index.d.ts

@@ -12,6 +12,15 @@ 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, SIDEBAR_MOBILE_HEIGHT } from './components/Sidebar';
+export { Layout, Main, Content } from './components/Layout';
+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';
@@ -23,4 +32,13 @@ 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 { LayoutProps, MainProps, ContentProps } from './components/Layout';
+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

@@ -15,6 +15,15 @@ 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, SIDEBAR_MOBILE_HEIGHT } from './components/Sidebar';
+export { Layout, Main, Content } from './components/Layout';
+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/stories/Checkbox.stories.js

@@ -1,7 +1,4 @@
-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 { Checkbox, FormControlLabel, Stack } from '@mui/material';
 import React from 'react';
 const meta = {
     title: 'Checkbox',
@@ -58,15 +55,5 @@ export const Screenshot = {
             React.createElement(FormControlLabel, { control: React.createElement(Checkbox, null), label: React.createElement(React.Fragment, null,
                     "This is a ",
                     React.createElement("strong", null, "complex"),
-                    " text") })),
-        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)))))))
+                    " text") }))))
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "8.0.0",
+  "version": "9.1.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
@@ -54,7 +54,8 @@
     "@mui/lab": "^9.0.0-beta.6",
     "@mui/material": "^9.2.0",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "twake-i18n": ">=0.5.0"
   },
   "dependencies": {
     "@mui/utils": "^9.2.0",
@@ -88,6 +89,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "10.3.5",
+    "twake-i18n": "^0.5.0",
     "vite": "8.0.9",
     "vitest": "4.1.5"
   }