@linagora/twake-mui 11.3.0 → 12.0.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# @linagora/twake-mui [12.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@11.4.0...@linagora/twake-mui@12.0.0) (2026-10-08)
+
+
+* fix(twake-mui)!: Move @linagora/twake-css to peerDependencies ([672aa48](https://github.com/linagora/twake-ui/commit/672aa48a266ee10bbc3b421ce64b6ced83adbf85))
+
+
+### BREAKING CHANGES
+
+* apps must install @linagora/twake-css themselves and
+import @linagora/twake-css/dist/utils.css once.
+
+Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
+
+# @linagora/twake-mui [11.4.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@11.3.0...@linagora/twake-mui@11.4.0) (2026-10-08)
+
+
+### Features
+
+* **twake-mui:** Migrate ColorList from cozy-ui ([870fd92](https://github.com/linagora/twake-ui/commit/870fd9265f0a23904570e910644a74700cd41178))
+
 # @linagora/twake-mui [11.3.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@11.2.0...@linagora/twake-mui@11.3.0) (2026-10-08)
 
 

package/README.md

@@ -14,6 +14,14 @@ npm install @linagora/twake-mui
 
 Don't forget to also install peerDependencies (see package.json)
 
+`@linagora/twake-css` is one of them: twake-mui builds its theme from its
+`palette.json`, and some components (NavItem, NavDropdown, VirtualizedTable)
+use its `.u-*` utility classes. Import the stylesheet once in your app:
+
+```js
+import '@linagora/twake-css/dist/utils.css'
+```
+
 ## Usage
 
 ### Basic Usage

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

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

package/dist/components/ColorList/ColorList.stories.js

@@ -0,0 +1,48 @@
+import { Box, Stack } from '@mui/material';
+import React, { useState } from 'react';
+import { COLORS } from './helpers';
+import ColorList from './index';
+const meta = {
+    title: 'ColorList',
+    component: ColorList,
+    parameters: { layout: 'padded' },
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'select',
+            options: [undefined, 'small', 'medium']
+        },
+        selectedColor: {
+            control: 'select',
+            options: [undefined, ...COLORS]
+        },
+        customColorProps: { control: 'object' }
+    }
+};
+export default meta;
+const SelectableColorList = props => {
+    const [selectedColor, setSelectedColor] = useState(props.selectedColor);
+    return (React.createElement(ColorList, { ...props, selectedColor: selectedColor, onClick: setSelectedColor }));
+};
+export const Default = {
+    args: {
+        customColorProps: { enabled: true }
+    },
+    render: args => (React.createElement(Box, { sx: { width: args.size === 'medium' ? '100%' : { xs: '100%', md: 200 } } },
+        React.createElement(SelectableColorList, { key: args.selectedColor, ...args })))
+};
+const Section = ({ title, width, children }) => (React.createElement("section", null,
+    React.createElement("h3", { style: { marginBottom: '12px' } }, title),
+    React.createElement(Box, { sx: { width } }, children)));
+const customColorProps = { enabled: true };
+// Visual Regression - Combined view for Argos testing
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement(Section, { title: "Small", width: 200 },
+            React.createElement(ColorList, { size: "small", selectedColor: COLORS[4], customColorProps: customColorProps })),
+        React.createElement(Section, { title: "Medium" },
+            React.createElement(ColorList, { size: "medium", selectedColor: COLORS[4], customColorProps: customColorProps })),
+        React.createElement(Section, { title: "Without custom color", width: 200 },
+            React.createElement(ColorList, { size: "small" }))))
+};

package/dist/components/ColorList/helpers.d.ts

@@ -0,0 +1 @@
+export declare const COLORS: string[];

package/dist/components/ColorList/helpers.js

@@ -0,0 +1,22 @@
+export const COLORS = [
+    '#273891',
+    '#7E57E3',
+    '#9E83E8',
+    '#91CEF6',
+    '#2D83FF', // file-folder color, don't remove it
+    '#006BD8',
+    '#038199',
+    '#51B588',
+    '#457D6C',
+    '#1EBBCC',
+    '#E0465C',
+    '#ED20A4',
+    '#ED768D',
+    '#B85B17',
+    '#EDA91D',
+    '#BA8144',
+    '#ED916B',
+    '#EDC661',
+    '#131326',
+    '#646580'
+];

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

@@ -0,0 +1,29 @@
+import { ImageListProps } from '@mui/material';
+import React from 'react';
+declare const sizes: {
+    small: {
+        avatar: number;
+        icon: number;
+        cols: number;
+        gap: number;
+    };
+    medium: {
+        avatar: number;
+        icon: number;
+        cols: number;
+        gap: number;
+    };
+};
+export type ColorListSize = keyof typeof sizes;
+export interface ColorListProps extends Omit<ImageListProps, 'children' | 'onClick'> {
+    /** Defaults to `medium` on mobile and `small` otherwise */
+    size?: ColorListSize;
+    selectedColor?: string;
+    customColorProps?: {
+        enabled?: boolean;
+        onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    };
+    onClick?: (color: string) => void;
+}
+declare const ColorList: React.FC<ColorListProps>;
+export default ColorList;

package/dist/components/ColorList/index.js

@@ -0,0 +1,35 @@
+import { Icon, Check, Palette } from '@linagora/twake-icons';
+import { ButtonBase, ImageList, ImageListItem, imageListItemClasses } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import React from 'react';
+import { useBreakpoints } from '../../hooks/useBreakpoints';
+import { Avatar } from '../Avatar';
+import { COLORS } from './helpers';
+const sizes = {
+    small: { avatar: 21, icon: 10, cols: 7, gap: 5 },
+    medium: { avatar: 41, icon: 16, cols: 5, gap: 16 }
+};
+const ColorListRoot = styled(ImageList)({
+    margin: 0,
+    [`& .${imageListItemClasses.root}`]: { alignItems: 'center' }
+});
+const ColorList = ({ size, selectedColor, customColorProps, onClick, ...props }) => {
+    const { isMobile } = useBreakpoints();
+    const { avatar, icon, cols, gap } = sizes[size ?? (isMobile ? 'medium' : 'small')];
+    return (React.createElement(ColorListRoot, { cols: cols, rowHeight: avatar, gap: gap, ...props },
+        COLORS.map(color => (React.createElement(ImageListItem, { key: color },
+            React.createElement(ButtonBase, { component: "div", className: "u-bdrs-circle", onClick: () => onClick?.(color) },
+                React.createElement(Avatar, { color: color, size: avatar }, selectedColor?.toUpperCase() === color ? (React.createElement(Icon, { icon: Check, size: icon })) : (' ')))))),
+        customColorProps?.enabled && (React.createElement(ImageListItem, null,
+            React.createElement(ButtonBase, { sx: {
+                    width: avatar,
+                    height: avatar,
+                    borderRadius: '50%',
+                    border: '1px solid transparent',
+                    backgroundImage: 'linear-gradient(#fff, #fff), conic-gradient(from 0deg, #FB2C36, #AD46FF, #2B7FFF, #FB2C36)',
+                    backgroundOrigin: 'border-box',
+                    backgroundClip: 'padding-box, border-box'
+                }, onClick: customColorProps.onClick },
+                React.createElement(Icon, { icon: Palette, size: icon, color: "#000" }))))));
+};
+export default ColorList;

package/dist/index.d.ts

@@ -37,6 +37,7 @@ export { default as BottomSheetItem } from './components/BottomSheet/BottomSheet
 export { default as BottomSheetHeader } from './components/BottomSheet/BottomSheetHeader';
 export { default as BottomSheetTitle } from './components/BottomSheet/BottomSheetTitle';
 export { default as Chip } from './components/Chip';
+export { default as ColorList } from './components/ColorList';
 export { Dialog, default as DialogDefault } from './components/Dialog';
 export { ContactPopover, default as ContactPopoverDefault } from './components/ContactPopover';
 export { default as DropdownButton } from './components/DropdownButton';
@@ -67,6 +68,7 @@ export { default as NavText } from './components/NavText';
 export { NavDesktopLimiter } from './components/NavDesktopLimiter';
 export { NavDesktopDropdown } from './components/NavDesktopDropdown';
 export { nameToColor, supportedColors, getInitials } from './components/Avatar/helpers';
+export { COLORS } from './components/ColorList/helpers';
 export { default as AccordionExpandIcon } from './components/AccordionExpandIcon';
 export { default as VirtualizedTable } from './components/VirtualizedTable';
 export { VirtuosoMockContext } from 'react-virtuoso';
@@ -109,6 +111,7 @@ export type { SpaceOverlay, SpaceOverlayStatus } from './components/SpaceOverlay
 export type { SpaceOverlayProviderProps } from './components/SpaceOverlay/SpaceOverlay';
 export type { OverlayBox, OverlayRegion } from './components/SpaceOverlay/region';
 export type { OverlayFrameProps } from './components/SpaceOverlay/OverlayFrame';
+export type { ColorListProps, ColorListSize } from './components/ColorList';
 export type { DialogProps, DialogSize } from './components/Dialog';
 export type { PointerAlertProps, PointerAlertDirection } from './components/PointerAlert';
 export type { ProgressionBannerProps } from './components/ProgressionBanner';

package/dist/index.js

@@ -40,6 +40,7 @@ export { default as BottomSheetItem } from './components/BottomSheet/BottomSheet
 export { default as BottomSheetHeader } from './components/BottomSheet/BottomSheetHeader';
 export { default as BottomSheetTitle } from './components/BottomSheet/BottomSheetTitle';
 export { default as Chip } from './components/Chip';
+export { default as ColorList } from './components/ColorList';
 export { Dialog, default as DialogDefault } from './components/Dialog';
 export { ContactPopover, default as ContactPopoverDefault } from './components/ContactPopover';
 export { default as DropdownButton } from './components/DropdownButton';
@@ -70,6 +71,7 @@ export { default as NavText } from './components/NavText';
 export { NavDesktopLimiter } from './components/NavDesktopLimiter';
 export { NavDesktopDropdown } from './components/NavDesktopDropdown';
 export { nameToColor, supportedColors, getInitials } from './components/Avatar/helpers';
+export { COLORS } from './components/ColorList/helpers';
 export { default as AccordionExpandIcon } from './components/AccordionExpandIcon';
 export { default as VirtualizedTable } from './components/VirtualizedTable';
 export { VirtuosoMockContext } from 'react-virtuoso';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "11.3.0",
+  "version": "12.0.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
@@ -50,6 +50,7 @@
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
+    "@linagora/twake-css": ">=1.0.0",
     "@linagora/twake-icons": ">=2.10.0",
     "@mui/lab": "^9.0.0-beta.6",
     "@mui/material": "^9.2.0",
@@ -59,7 +60,6 @@
     "twake-i18n": ">=0.6.0"
   },
   "dependencies": {
-    "@linagora/twake-css": "^1.0.0",
     "@mui/utils": "^9.2.0",
     "@react-spring/web": "10.1.2",
     "@use-gesture/react": "10.3.1",
@@ -77,6 +77,7 @@
     "@argos-ci/storybook": "6.4.1",
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
+    "@linagora/twake-css": "^1.0.0",
     "@linagora/twake-icons": "^2.10.0",
     "@mui/icons-material": "^9.2.0",
     "@mui/lab": "^9.0.0-beta.6",