@linagora/twake-mui 18.0.0 → 18.2.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# @linagora/twake-mui [18.2.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@18.1.0...@linagora/twake-mui@18.2.0) (2026-10-22)
+
+
+### Features
+
+* **twake-mui:** Migrate IntentHeader from cozy-ui ([fd35f2c](https://github.com/linagora/twake-ui/commit/fd35f2c0715d9ec2fac81940b584074aefdf7532))
+
+# @linagora/twake-mui [18.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@18.0.0...@linagora/twake-mui@18.1.0) (2026-10-22)
+
+
+### Features
+
+* **twake-mui:** Lighten the Backdrop to 12% black in light theme ([48ea234](https://github.com/linagora/twake-ui/commit/48ea234e6ccd1d69cc6164a291e0d5c4976c1897))
+
 # @linagora/twake-mui [18.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@17.1.0...@linagora/twake-mui@18.0.0) (2026-10-22)
 
 

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

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

package/dist/components/IntentHeader/IntentHeader.stories.js

@@ -0,0 +1,37 @@
+import { Stack } from '@mui/material';
+import React from 'react';
+import IntentHeader from './index';
+const appIcon = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="10" fill="#297EF2"/></svg>')}`;
+const meta = {
+    title: 'IntentHeader',
+    component: IntentHeader,
+    tags: ['autodocs'],
+    argTypes: {
+        appName: { control: 'text' },
+        appEditor: { control: 'text' },
+        appIcon: { control: 'text' }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        appName: 'Drive',
+        appEditor: 'Twake',
+        appIcon
+    }
+};
+const Row = ({ title, children }) => (React.createElement("section", null,
+    React.createElement("h3", null, title),
+    children));
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 2 },
+        React.createElement(Row, { title: "Name only" },
+            React.createElement(IntentHeader, { appName: "Drive" })),
+        React.createElement(Row, { title: "With editor" },
+            React.createElement(IntentHeader, { appName: "Drive", appEditor: "Twake" })),
+        React.createElement(Row, { title: "With icon" },
+            React.createElement(IntentHeader, { appName: "Drive", appIcon: appIcon })),
+        React.createElement(Row, { title: "With editor and icon" },
+            React.createElement(IntentHeader, { appName: "Drive", appEditor: "Twake", appIcon: appIcon }))))
+};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface IntentHeaderProps {
+    appName: string;
+    /** Shown in a regular weight before the app name */
+    appEditor?: string;
+    /** URL of the app icon */
+    appIcon?: string;
+    className?: string;
+}
+declare const IntentHeader: React.FC<IntentHeaderProps>;
+export default IntentHeader;

package/dist/components/IntentHeader/index.js

@@ -0,0 +1,23 @@
+import { Box, Typography } from '@mui/material';
+import React from 'react';
+const IntentHeader = ({ appName, appEditor, appIcon, className }) => (React.createElement(Box, { className: className, sx: {
+        display: 'flex',
+        alignItems: 'center',
+        flexShrink: 0,
+        height: 48,
+        px: 2,
+        py: 1,
+        bgcolor: 'background.contrast'
+    } },
+    React.createElement(Typography, { component: "h1", color: "textPrimary", sx: theme => ({
+            display: 'flex',
+            alignItems: 'center',
+            fontSize: theme.typography.pxToRem(20),
+            fontWeight: 'fontWeightBold'
+        }) },
+        appIcon && (React.createElement(Box, { component: "img", src: appIcon, alt: "", sx: { height: 18, mr: 1 } })),
+        appEditor && (React.createElement(Box, { component: "span", sx: { fontWeight: 'fontWeightRegular' } },
+            appEditor,
+            "\u00A0")),
+        appName)));
+export default IntentHeader;

package/dist/components/NavItem/NavBadge.d.ts

@@ -1,2 +1,2 @@
 import { Theme } from '@mui/material/styles';
-export declare const NavBadge: import("@emotion/styled").StyledComponent<import("@mui/material").BadgeOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style" | "color" | "className" | "max" | "children" | "classes" | "sx" | "variant" | "slotProps" | "slots" | "anchorOrigin" | "badgeContent" | "invisible" | "overlap" | "showZero"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const NavBadge: import("@emotion/styled").StyledComponent<import("@mui/material").BadgeOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style" | "color" | "className" | "max" | "children" | "classes" | "sx" | "variant" | "slotProps" | "slots" | "invisible" | "anchorOrigin" | "badgeContent" | "overlap" | "showZero"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;

package/dist/index.d.ts

@@ -61,6 +61,7 @@ export { ExtendableFab } from './components/ExtendableFab';
 export { default as Filename } from './components/Filename';
 export { default as FilePath } from './components/FilePath';
 export { default as FilePathLink } from './components/FilePathLink';
+export { default as IntentHeader } from './components/IntentHeader';
 export { default as ListItem } from './components/ListItem';
 export { default as ListItemButton } from './components/ListItemButton';
 export { default as ListItemText } from './components/ListItemText';
@@ -176,6 +177,7 @@ export type { ExtendableFabProps, ScrollOptions } from './components/ExtendableF
 export type { FilenameProps } from './components/Filename';
 export type { FilePathProps } from './components/FilePath';
 export type { FilePathLinkProps } from './components/FilePathLink';
+export type { IntentHeaderProps } from './components/IntentHeader';
 export type { ListItemProps, ListItemGutters, ListItemSize } from './components/ListItem';
 export type { ListItemButtonProps } from './components/ListItemButton';
 export type { ListItemTextProps } from './components/ListItemText';

package/dist/index.js

@@ -64,6 +64,7 @@ export { ExtendableFab } from './components/ExtendableFab';
 export { default as Filename } from './components/Filename';
 export { default as FilePath } from './components/FilePath';
 export { default as FilePathLink } from './components/FilePathLink';
+export { default as IntentHeader } from './components/IntentHeader';
 export { default as ListItem } from './components/ListItem';
 export { default as ListItemButton } from './components/ListItemButton';
 export { default as ListItemText } from './components/ListItemText';

package/dist/lib/overrides.js

@@ -424,6 +424,23 @@ export const overrides = {
             }
         }
     },
+    MuiBackdrop: {
+        styleOverrides: {
+            root: ({ theme }) => ({
+                variants: [
+                    {
+                        props: { invisible: false },
+                        style: {
+                            backgroundColor: alpha(theme.palette.common.black, 0.12),
+                            ...theme.applyStyles('dark', {
+                                backgroundColor: alpha(theme.palette.common.black, 0.5)
+                            })
+                        }
+                    }
+                ]
+            })
+        }
+    },
     MuiDialog: {
         defaultProps: { disableEnforceFocus: true },
         styleOverrides: {

package/package.json

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