@linagora/twake-mui 5.0.0 → 5.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# @linagora/twake-mui [5.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@5.0.0...@linagora/twake-mui@5.1.0) (2026-09-01)
+
+
+### Features
+
+* **twake-mui:** Add Apptitle component ([4e9cf51](https://github.com/linagora/twake-ui/commit/4e9cf51c3c7fbceeed3fb99cfac0a0028ee0b12f))
+
 # @linagora/twake-mui [5.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@4.3.1...@linagora/twake-mui@5.0.0) (2026-08-31)
 
 

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

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

package/dist/components/Apptitle/Apptitle.stories.js

@@ -0,0 +1,36 @@
+import { CalendarApp as Calendar, CalendarText, Camera, Chat, ChatText, Contacts, ContactText, Drive, DriveText, Mail, MailText, Notes, NoteText, Profile, ProText, VisioText } from '@linagora/twake-icons';
+import { Box, Stack } from '@mui/material';
+import React from 'react';
+import AppTitle from './index';
+const meta = {
+    title: 'AppTitle',
+    component: AppTitle,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        appIcon: {
+            control: false,
+            description: 'Icon component for the app logo'
+        },
+        appTextIcon: {
+            control: false,
+            description: 'Icon component for the app text/name'
+        }
+    }
+};
+export default meta;
+const appLogotypes = [
+    { name: 'Calendar', icon: Calendar, textIcon: CalendarText },
+    { name: 'Chat', icon: Chat, textIcon: ChatText },
+    { name: 'Contacts', icon: Contacts, textIcon: ContactText },
+    { name: 'Drive', icon: Drive, textIcon: DriveText },
+    { name: 'Mail', icon: Mail, textIcon: MailText },
+    { name: 'Notes', icon: Notes, textIcon: NoteText },
+    { name: 'Pro', icon: Profile, textIcon: ProText },
+    { name: 'Visio', icon: Camera, textIcon: VisioText }
+];
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 3 }, appLogotypes.map(app => (React.createElement(Box, { key: app.name },
+        React.createElement(AppTitle, { appIcon: app.icon, appTextIcon: app.textIcon }))))))
+};

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

@@ -0,0 +1,7 @@
+import React, { FC } from 'react';
+interface AppTitleProps {
+    appIcon: React.ElementType;
+    appTextIcon: React.ElementType;
+}
+declare const AppTitle: FC<AppTitleProps>;
+export default AppTitle;

package/dist/components/Apptitle/index.js

@@ -0,0 +1,15 @@
+import { Icon, TwakeText } from '@linagora/twake-icons';
+import { Box, useTheme } from '@mui/material';
+import React from 'react';
+const AppTitle = ({ appIcon, appTextIcon }) => {
+    const theme = useTheme();
+    const isLight = theme.palette.mode === 'light';
+    if (!appIcon || !appTextIcon)
+        return null;
+    const AppTextIcon = appTextIcon;
+    return (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } },
+        React.createElement(Icon, { icon: appIcon, size: "32" }),
+        React.createElement(TwakeText, { height: "22", style: { fill: isLight ? '#000' : '#fff' } }),
+        React.createElement(AppTextIcon, { height: 22, style: { width: 'auto', fill: isLight ? '#000' : '#fff' } })));
+};
+export default AppTitle;

package/package.json

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