@linagora/twake-mui 6.0.0 → 7.0.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# @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)
 
 

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/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/package.json

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