@linagora/twake-mui 4.2.0 → 4.3.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# @linagora/twake-mui [4.3.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@4.2.0...@linagora/twake-mui@4.3.0) (2026-08-27)
+
+
+### Features
+
+* Override chip component ([70b6e72](https://github.com/linagora/twake-ui/commit/70b6e720bff2e672940ef01963877671de531121))
+
 # @linagora/twake-mui [4.2.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@4.1.1...@linagora/twake-mui@4.2.0) (2026-08-27)
 
 

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

@@ -0,0 +1,8 @@
+import { ChipProps as MuiChipProps } from '@mui/material';
+import React from 'react';
+export interface ChipProps extends MuiChipProps {
+    endIcon?: React.ReactNode;
+    square?: boolean;
+}
+export declare const Chip: React.FC<ChipProps>;
+export default Chip;

package/dist/components/Chip/index.js

@@ -0,0 +1,11 @@
+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 } },
+            label,
+            React.createElement("span", null, endIcon))) : (label), ...props }));
+};
+export default Chip;

package/dist/index.d.ts

@@ -7,7 +7,9 @@ export { theme } from './lib/theme';
 export { radius } from './lib/radius';
 export { TwakeMuiThemeProvider } from './components/ThemeProvider';
 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 type { TwakeTheme } from './lib/theme';
 export type { AvatarProps } from './components/Avatar';
+export type { ChipProps } from './components/Chip';

package/dist/index.js

@@ -10,5 +10,6 @@ export { radius } from './lib/radius';
 // COMPONENTS & HELPERS
 export { TwakeMuiThemeProvider } from './components/ThemeProvider';
 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';

package/dist/lib/makeLightOverrides.js

@@ -272,6 +272,15 @@ export const makeLightOverrides = (theme) => {
                 }
             }
         },
+        MuiChip: {
+            styleOverrides: {
+                root: {
+                    '&.square': {
+                        borderRadius: radius.md
+                    }
+                }
+            }
+        },
         MuiAvatar: {
             styleOverrides: {
                 root: {

package/dist/stories/Chip.stories.d.ts

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

package/dist/stories/Chip.stories.js

@@ -0,0 +1,100 @@
+/* eslint-disable no-console */
+import { Icon, FileOutline, Openwith, Right } from '@linagora/twake-icons';
+import { Avatar, Grid, Stack, Typography, IconButton } from '@mui/material';
+import React from 'react';
+import { Chip } from '../components/Chip';
+const meta = {
+    title: 'Chip',
+    component: Chip,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        color: {
+            control: 'select',
+            options: [
+                'default',
+                'primary',
+                'secondary',
+                'error',
+                'warning',
+                'success'
+            ]
+        },
+        variant: {
+            control: 'select',
+            options: ['filled', 'outlined']
+        },
+        disabled: {
+            control: 'boolean'
+        },
+        size: {
+            control: 'select',
+            options: ['small', 'medium']
+        }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        color: 'default',
+        variant: 'filled',
+        label: 'Chip Content'
+    },
+    render: args => React.createElement(Chip, { ...args })
+};
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => {
+        const colors = [
+            'default',
+            'primary',
+            'secondary',
+            'success',
+            'error',
+            'warning',
+            'info'
+        ];
+        const variants = ['filled', 'outlined'];
+        const squareProps = [false, true];
+        const sizeProps = ['small', 'medium'];
+        return (React.createElement(Stack, { spacing: 4 }, sizeProps.map(size => (React.createElement("div", { key: size },
+            React.createElement(Typography, { variant: "h3", sx: { mb: 2 } }, size),
+            squareProps.map(square => (React.createElement("div", { key: String(square) },
+                React.createElement(Typography, { variant: "h4", sx: { mb: 2 } }, square ? 'Square' : 'Rounded'),
+                colors.map(color => (React.createElement("div", { key: color },
+                    React.createElement(Typography, { variant: "h4", sx: { textTransform: 'capitalize', mt: 2 } }, color),
+                    React.createElement(Grid, { container: true, spacing: 4 }, variants.map(variant => (React.createElement(Grid, { key: variant, size: { xs: 12, sm: 6 } },
+                        React.createElement(Stack, { spacing: 2 },
+                            React.createElement(Typography, { variant: "h6", sx: { textTransform: 'capitalize' } }, variant),
+                            React.createElement(Stack, { spacing: 1 },
+                                React.createElement(Typography, { variant: "caption", sx: { color: 'text.secondary' } }, "default"),
+                                React.createElement("div", null,
+                                    React.createElement(Chip, { color: color, variant: variant, label: "Simple Chip", square: square, size: size })),
+                                React.createElement("div", null,
+                                    React.createElement(Chip, { color: color, variant: variant, label: "Clickable Chip", clickable: true, onClick: () => console.info('click'), square: square, size: size })),
+                                React.createElement("div", null,
+                                    React.createElement(Chip, { color: color, variant: variant, label: "Deletable chip", onDelete: () => console.info('delete'), square: square, size: size })),
+                                React.createElement("div", null,
+                                    React.createElement(Chip, { color: color, variant: variant, label: "Chip with Icon", icon: React.createElement(Icon, { icon: FileOutline }), square: square, size: size })),
+                                React.createElement("div", null,
+                                    React.createElement(Chip, { color: color, variant: variant, label: "Deletable chip with icon", icon: React.createElement(Icon, { icon: FileOutline }), onDelete: () => console.info('delete'), square: square, size: size })),
+                                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: {
+                                                color: color === 'default'
+                                                    ? `${color}.main`
+                                                    : `inherit`
+                                            }, onClick: () => console.info('end adornment clicked') },
+                                            React.createElement(Icon, { icon: Openwith })), onDelete: () => console.info('delete'), square: square, size: size }))),
+                            React.createElement(Stack, { spacing: 1 },
+                                React.createElement(Typography, { variant: "caption", sx: { color: 'text.secondary' } }, "disabled"),
+                                React.createElement("div", null,
+                                    React.createElement(Chip, { color: color, variant: variant, label: "Chip Content", disabled: true, square: square, size: size })),
+                                React.createElement("div", null,
+                                    React.createElement(Chip, { color: color, variant: variant, label: "Chip Content", onDelete: () => { }, disabled: true, square: square, size: size })),
+                                React.createElement("div", null,
+                                    React.createElement(Chip, { color: color, variant: variant, label: "Chip Content", icon: React.createElement(Icon, { icon: FileOutline }), disabled: true, square: square, size: size })))))))))))))))))));
+    }
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
@@ -56,6 +56,9 @@
     "react": "^18",
     "react-dom": "^18"
   },
+  "dependencies": {
+    "classnames": "^2.5.1"
+  },
   "devDependencies": {
     "@argos-ci/cli": "4.2.0",
     "@argos-ci/storybook": "5.3.2",
@@ -70,6 +73,7 @@
     "@storybook/builder-vite": "10.3.5",
     "@storybook/react": "10.3.5",
     "@storybook/react-vite": "10.3.5",
+    "@types/classnames": "^2.3.1",
     "@types/lodash": "4.17.24",
     "@types/react": "18.2.0",
     "@types/react-dom": "^18.2.0",