@linagora/twake-mui 6.0.0 → 7.1.0

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+# @linagora/twake-mui [7.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@7.0.0...@linagora/twake-mui@7.1.0) (2026-09-10)
+
+
+### Bug Fixes
+
+* **twake-mui:** Clean old IconButton override ([b5a7733](https://github.com/linagora/twake-ui/commit/b5a7733ad9451ea9950e93a787133a2f9bf951d5))
+
+
+### Features
+
+* **twake-mui:** Migrate IconButton from cozy-ui ([d6aca04](https://github.com/linagora/twake-ui/commit/d6aca0454195f1d3ffd5170b2463f5bec9254678))
+
+# @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/components/Chip/index.js

@@ -2,9 +2,9 @@ import { Icon, CrossSmall } from '@linagora/twake-icons';
 import { Box, Chip as MuiChip, IconButton } from '@mui/material';
 import cx from 'classnames';
 import React from 'react';
-export const Chip = ({ className, deleteIcon = (React.createElement(IconButton, null,
-    React.createElement(Icon, { icon: CrossSmall }))), label, endIcon, square = false, ...props }) => {
-    return (React.createElement(MuiChip, { className: cx(className, { square }), deleteIcon: deleteIcon, label: endIcon ? (React.createElement(Box, { component: "span", sx: { display: 'flex', alignItems: 'center', gap: 1 } },
+export const Chip = ({ className, label, endIcon, square = false, size, deleteIcon = (React.createElement(IconButton, { size: size === 'small' ? 'xsmall' : 'small' },
+    React.createElement(Icon, { icon: CrossSmall }))), ...props }) => {
+    return (React.createElement(MuiChip, { size: size, className: cx(className, { square }), deleteIcon: deleteIcon, label: endIcon ? (React.createElement(Box, { component: "span", sx: { display: 'flex', alignItems: 'center', gap: 1 } },
             label,
             React.createElement("span", null, endIcon))) : (label), ...props }));
 };

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

@@ -364,10 +364,41 @@ export const lightOverrides = {
         }
     },
     MuiIconButton: {
+        defaultProps: { size: 'large' },
         styleOverrides: {
             root: ({ theme }) => ({
-                color: alpha(theme.palette.grey[900], 0.48),
-                padding: '4px'
+                variants: [
+                    {
+                        props: { color: 'default' },
+                        style: {
+                            color: theme.palette.text.secondary
+                        }
+                    },
+                    {
+                        props: { size: 'xsmall' },
+                        style: {
+                            padding: '5px'
+                        }
+                    },
+                    {
+                        props: { size: 'small' },
+                        style: {
+                            padding: '8px'
+                        }
+                    },
+                    {
+                        props: { size: 'medium' },
+                        style: {
+                            padding: '12px'
+                        }
+                    },
+                    {
+                        props: { size: 'large' },
+                        style: {
+                            padding: '16px'
+                        }
+                    }
+                ]
             })
         }
     },

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

@@ -115,3 +115,8 @@ declare module '@mui/material/styles' {
         border?: Partial<BorderPalette>;
     }
 }
+declare module '@mui/material/IconButton' {
+    interface IconButtonPropsSizeOverrides {
+        xsmall: true;
+    }
+}

package/dist/stories/Chip.stories.js

@@ -81,8 +81,8 @@ export const Screenshot = {
                                 React.createElement("div", null,
                                     React.createElement(Chip, { color: color, variant: variant, label: "Avatar Chip", avatar: React.createElement(Avatar, null, "M"), square: square, size: size })),
                                 React.createElement("div", null,
-                                    React.createElement(Chip, { color: color, variant: variant, label: "Action chip", avatar: React.createElement(Avatar, null, "M"), deleteIcon: React.createElement(IconButton, null,
-                                            React.createElement(Icon, { icon: Right })), endIcon: React.createElement(IconButton, { sx: {
+                                    React.createElement(Chip, { color: color, variant: variant, label: "Action chip", avatar: React.createElement(Avatar, null, "M"), deleteIcon: React.createElement(IconButton, { size: size === 'small' ? 'xsmall' : 'small' },
+                                            React.createElement(Icon, { icon: Right })), endIcon: React.createElement(IconButton, { size: size === 'small' ? 'xsmall' : 'small', sx: {
                                                 color: color === 'default'
                                                     ? `${color}.main`
                                                     : `inherit`

package/dist/stories/IconButton.stories.d.ts

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

package/dist/stories/IconButton.stories.js

@@ -0,0 +1,59 @@
+import { Cross, Icon, People, Restore, Stop, Trash } from '@linagora/twake-icons';
+import { Button, IconButton, Stack, Typography } from '@mui/material';
+import React from 'react';
+const meta = {
+    title: 'IconButton',
+    component: IconButton,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        color: {
+            control: 'select',
+            options: ['default', 'inherit', 'primary', 'secondary', 'error']
+        },
+        size: {
+            control: 'select',
+            options: ['xsmall', 'small', 'medium', 'large']
+        },
+        disabled: { control: 'boolean' }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        children: React.createElement(Icon, { icon: People })
+    }
+};
+const sizes = ['xsmall', 'small', 'medium', 'large'];
+const Row = ({ size, disabled }) => (React.createElement(Stack, { direction: "row", spacing: 1, sx: { alignItems: 'center' } },
+    React.createElement(IconButton, { size: size, disabled: disabled },
+        React.createElement(Icon, { icon: People })),
+    React.createElement(IconButton, { color: "primary", size: size, disabled: disabled },
+        React.createElement(Icon, { icon: Restore })),
+    React.createElement(IconButton, { color: "secondary", size: size, disabled: disabled },
+        React.createElement(Icon, { icon: Cross })),
+    React.createElement(IconButton, { color: "error", size: size, disabled: disabled },
+        React.createElement(Icon, { icon: Trash }))));
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4, sx: { p: 4 } },
+        sizes.map(size => (React.createElement("section", { key: size },
+            React.createElement("h3", null, size),
+            React.createElement(Stack, { direction: "row", spacing: 4 },
+                React.createElement(Stack, { spacing: 1 },
+                    React.createElement(Typography, { variant: "caption" }, "default"),
+                    React.createElement(Row, { size: size })),
+                React.createElement(Stack, { spacing: 1 },
+                    React.createElement(Typography, { variant: "caption" }, "disabled"),
+                    React.createElement(Row, { size: size, disabled: true })))))),
+        React.createElement("section", null,
+            React.createElement("h3", null, "Embedded button"),
+            React.createElement(IconButton, { size: "small" },
+                React.createElement(Button, { component: "div", sx: {
+                        minWidth: 'auto',
+                        width: 16,
+                        height: 16,
+                        borderRadius: '50%'
+                    }, size: "small" },
+                    React.createElement(Icon, { icon: Stop, size: 12 }))))))
+};

package/package.json

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