@linagora/twake-mui 5.2.0 → 7.0.0

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# @linagora/twake-mui [7.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@6.0.0...@linagora/twake-mui@7.0.0) (2026-09-08)
+
+
+### Bug Fixes
+
+* **theme:** Align breakpoint values on cozy-ui bounds ([0fb7dd0](https://github.com/linagora/twake-ui/commit/0fb7dd0bb73e845cb2c62ea1c45f28016c2f9a31))
+
+
+### Features
+
+* Add useBreakpoints hook ([f7780d5](https://github.com/linagora/twake-ui/commit/f7780d5d2fbb194752688c54ec4421e8b51fa83e))
+
+
+### BREAKING CHANGES
+
+* **theme:** theme.breakpoints.values move from
+{sm:480, md:768, lg:1023, xl:1200} to {sm:544, md:769, lg:1024,
+xl:1201}. Consumers calling breakpoints.up/down/between keep the same
+call sites but resolve at the cozy-ui thresholds. down('sm') now
+covers up to 543px instead of 479px.
+
+# @linagora/twake-mui [6.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@5.2.0...@linagora/twake-mui@6.0.0) (2026-09-08)
+
+
+### Features
+
+* **twake-mui:** Drop app-specific overrides from the theme ([b67cec4](https://github.com/linagora/twake-ui/commit/b67cec4bd20ebc9c04d998966e0f8c00c72830e1))
+* **twake-mui:** Remove inert rules from light overrides ([d50595c](https://github.com/linagora/twake-ui/commit/d50595c35ac30e6e2a32be74a0cde5b45798cc44))
+
+
+### BREAKING CHANGES
+
+* **twake-mui:** Custom style for `Popover`, `Backdrop`,
+`SwipeableDrawer` and `ListItem inside Accordion` has been
+removed
+* **twake-mui:** size="large" no longer typechecks on TextField and InputBase.
+
 # @linagora/twake-mui [5.2.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@5.1.1...@linagora/twake-mui@5.2.0) (2026-09-08)
 
 

package/dist/hooks/useBreakpoints.d.ts

@@ -0,0 +1,7 @@
+export type Breakpoints = {
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+    isExtraLarge: boolean;
+};
+export declare const useBreakpoints: () => Breakpoints;

package/dist/hooks/useBreakpoints.js

@@ -0,0 +1,7 @@
+import { useMediaQuery } from '@mui/material';
+export const useBreakpoints = () => ({
+    isMobile: useMediaQuery(theme => theme.breakpoints.down('md')),
+    isTablet: useMediaQuery(theme => theme.breakpoints.between('md', 'lg')),
+    isDesktop: useMediaQuery(theme => theme.breakpoints.up('lg')),
+    isExtraLarge: useMediaQuery(theme => theme.breakpoints.up('xl'))
+});

package/dist/hooks/useBreakpoints.stories.d.ts

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

package/dist/hooks/useBreakpoints.stories.js

@@ -0,0 +1,32 @@
+import { Box, Chip, Stack, Typography, useTheme } from '@mui/material';
+import React from 'react';
+import { useBreakpoints } from './useBreakpoints';
+const meta = {
+    title: 'Hooks/useBreakpoints',
+    parameters: { layout: 'padded' },
+    tags: ['autodocs']
+};
+export default meta;
+const expectedRanges = {
+    isMobile: '0 – 768',
+    isTablet: '769 – 1023',
+    isDesktop: '1024 – ∞',
+    isExtraLarge: '1201 – ∞'
+};
+const BreakpointsTable = () => {
+    const theme = useTheme();
+    const breakpoints = useBreakpoints();
+    return (React.createElement(Stack, { spacing: 2 },
+        React.createElement(Typography, { variant: "body2" },
+            "Valeurs du th\u00E8me : ",
+            JSON.stringify(theme.breakpoints.values)),
+        Object.entries(breakpoints).map(([key, isActive]) => (React.createElement(Stack, { key: key, direction: "row", spacing: 2, sx: { alignItems: 'center' } },
+            React.createElement(Box, { sx: { width: 140 } },
+                React.createElement(Typography, { variant: "body1" }, key)),
+            React.createElement(Box, { sx: { width: 120 } },
+                React.createElement(Typography, { variant: "body2", color: "text.secondary" }, expectedRanges[key])),
+            React.createElement(Chip, { label: String(isActive), color: isActive ? 'success' : 'default', size: "small" }))))));
+};
+export const Default = {
+    render: () => React.createElement(BreakpointsTable, null)
+};

package/dist/index.d.ts

@@ -10,6 +10,8 @@ export { Avatar, default as AvatarDefault } from './components/Avatar';
 export { default as Chip } from './components/Chip';
 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 { AvatarProps } from './components/Avatar';
 export type { ChipProps } from './components/Chip';
+export type { Breakpoints } from './hooks/useBreakpoints';

package/dist/index.js

@@ -13,3 +13,4 @@ export { Avatar, default as AvatarDefault } from './components/Avatar';
 export { default as Chip } from './components/Chip';
 export { nameToColor, supportedColors } from './components/Avatar/helpers';
 export { default as AccordionExpandIcon } from './components/AccordionExpandIcon';
+export { useBreakpoints } from './hooks/useBreakpoints';

package/dist/lib/lightOverrides.js

@@ -104,21 +104,6 @@ export const lightOverrides = {
             })
         }
     },
-    MuiTextField: {
-        defaultProps: {
-            size: 'medium'
-        },
-        styleOverrides: {
-            root: {
-                '& .MuiOutlinedInput-root': {
-                    borderRadius: radius.sm,
-                    '& fieldset': {
-                        borderRadius: radius.sm
-                    }
-                }
-            }
-        }
-    },
     MuiOutlinedInput: {
         styleOverrides: {
             root: ({ theme }) => ({
@@ -151,25 +136,6 @@ export const lightOverrides = {
                     }
                 ]
             }
-        },
-        variants: [
-            {
-                props: { size: 'large' },
-                style: {
-                    '& .MuiOutlinedInput-input': {
-                        padding: '14px 16px' // Large: 54px height
-                    }
-                }
-            }
-        ]
-    },
-    MuiInputBase: {
-        styleOverrides: {
-            root: {
-                '&.MuiInputBase-sizeLarge': {
-                    fontSize: '16px'
-                }
-            }
         }
     },
     MuiSelect: {
@@ -261,14 +227,6 @@ export const lightOverrides = {
             }
         }
     },
-    MuiPopover: {
-        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)'
-            }
-        }
-    },
     MuiChip: {
         styleOverrides: {
             root: {
@@ -422,20 +380,6 @@ export const lightOverrides = {
             }
         }
     },
-    MuiBackdrop: {
-        styleOverrides: {
-            root: {
-                variants: [
-                    {
-                        props: { invisible: false },
-                        style: ({ theme }) => ({
-                            backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.focusOpacity)
-                        })
-                    }
-                ]
-            }
-        }
-    },
     MuiAccordion: {
         styleOverrides: {
             root: {
@@ -556,23 +500,6 @@ export const lightOverrides = {
             })
         }
     },
-    MuiCssBaseline: {
-        styleOverrides: theme => ({
-            '.MuiAccordion-root .MuiListItem-root': {
-                padding: '0',
-                borderRadius: '4px',
-                '&:hover': {
-                    backgroundColor: alpha(theme.palette.grey[900], 0.04)
-                }
-            },
-            '.MuiAccordion-root .MuiListItem-root label': {
-                fontSize: '14px',
-                fontStyle: 'normal',
-                fontWeight: 400,
-                color: alpha(theme.palette.grey[900], 0.9)
-            }
-        })
-    },
     MuiMenuItem: {
         styleOverrides: {
             root: ({ theme }) => ({
@@ -589,26 +516,5 @@ export const lightOverrides = {
                 }
             })
         }
-    },
-    MuiSwipeableDrawer: {
-        defaultProps: {
-            sx: theme => ({
-                '& .MuiDrawer-paper': {
-                    borderTopLeftRadius: radius.md,
-                    borderTopRightRadius: radius.md,
-                    '&::before': {
-                        content: '""',
-                        display: 'block',
-                        width: '64px',
-                        height: '4px',
-                        backgroundColor: theme.palette.action.disabledBackground,
-                        borderRadius: radius.md,
-                        margin: '12px auto',
-                        marginTop: '30px',
-                        flexShrink: 0
-                    }
-                }
-            })
-        }
     }
 };

package/dist/lib/makeTheme.js

@@ -12,10 +12,10 @@ const themesCommonConfig = {
     breakpoints: {
         values: {
             xs: 0,
-            sm: 480,
-            md: 768,
-            lg: 1023,
-            xl: 1200
+            sm: 544,
+            md: 769,
+            lg: 1024,
+            xl: 1201
         }
     },
     zIndex: {

package/dist/lib/types.d.ts

@@ -72,16 +72,6 @@ export interface PaletteJson {
     Common: CommonColor;
 }
 export type TypographyOptions = TypographyVariantsOptions;
-declare module '@mui/material/TextField' {
-    interface TextFieldPropsSizeOverrides {
-        large: true;
-    }
-}
-declare module '@mui/material/InputBase' {
-    interface InputBasePropsSizeOverrides {
-        large: true;
-    }
-}
 export interface TypographyConfig {
     fontFamily?: string;
     fontSize?: number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "5.2.0",
+  "version": "7.0.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",