@alveole/components 0.16.12 → 0.17.0

package/dist/core/Section/Section.styles.js

@@ -1,6 +1,6 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ isVariant, spacing }) => {
-    const paddingValue = isVariant('mobile') ? spacing('100') : spacing('150');
+export const useStyles = makeStyles(({ externalPadding, spacing }) => {
+    const paddingValue = externalPadding();
     return {
         section: {
             display: 'flex',

package/dist/ui/Avatar/Avatar.d.ts

@@ -5,6 +5,7 @@ export type AvatarProps = {
     fallbackText?: string;
     style?: CSSProperties;
     src?: AvatarImageProps['src'];
+    carre?: boolean;
 };
 export declare const Avatar: (props: AvatarProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Avatar.d.ts.map

package/dist/ui/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/ui/Avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAA2B,MAAM,SAAS,CAAC;AAIpE,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,GAAG,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;CAC/B,CAAC;AASF,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,4CAsBxC,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/ui/Avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAA2B,MAAM,SAAS,CAAC;AAIpE,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,GAAG,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AASF,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,4CA2BxC,CAAC"}

package/dist/ui/Avatar/Avatar.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTheme } from '@alveole/theme';
 import { Avatar as TamaguiAvatar } from 'tamagui';
 import { Typography } from '../../core';
-import { useStyles } from '././Avatar.styles';
+import { useStyles } from './Avatar.styles';
 const getInitials = (name) => {
     const words = name.trim().split(/\s+/);
     if (words.length === 0)
@@ -12,7 +12,7 @@ const getInitials = (name) => {
     return (words[0][0] + words[1][0]).toUpperCase();
 };
 export const Avatar = (props) => {
-    const { style, fallbackText, src, size, ...avatarProps } = props;
+    const { style, fallbackText, src, size, carre, ...avatarProps } = props;
     const initials = getInitials(fallbackText ?? '');
     const { spacing } = useTheme();
     const styles = useStyles();
@@ -23,5 +23,5 @@ export const Avatar = (props) => {
         lg: spacing('5W'),
         xl: spacing('8W'),
     };
-    return (_jsxs(TamaguiAvatar, { style: { ...styles.avatar, ...style }, circular: true, size: avatarSize[size], ...avatarProps, children: [_jsx(TamaguiAvatar.Image, { src: src }), _jsx(Typography, { style: styles.fallbackText, children: initials })] }));
+    return (_jsxs(TamaguiAvatar, { style: { ...styles.avatar, ...(carre ? styles.carre : {}), ...style }, circular: !carre, size: avatarSize[size], ...avatarProps, children: [_jsx(TamaguiAvatar.Image, { src: src }), _jsx(Typography, { style: styles.fallbackText, children: initials })] }));
 };

package/dist/ui/Avatar/Avatar.stories.d.ts

@@ -7,9 +7,13 @@ declare const _default: {
     component: (props: import("./Avatar").AvatarProps) => import("react/jsx-runtime").JSX.Element;
     styleFn: () => {
         avatar: {
-            backgroundColor: "#D2E8FE";
+            backgroundColor: "#232427";
+        };
+        carre: {
+            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
         };
         fallbackText: {
+            color: "#CED5E1";
             display: "flex";
             justifyContent: "center";
             textAlign: "center";
@@ -23,5 +27,6 @@ declare const _default: {
 };
 export default _default;
 export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
-export declare const Variants: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithFallbackText: () => import("react/jsx-runtime").JSX.Element;
+export declare const Carre: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Avatar.stories.d.ts.map

package/dist/ui/Avatar/Avatar.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Avatar/Avatar.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAQkB;AAElB,eAAO,MAAM,KAAK,+CAQjB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAMpB,CAAC"}
+{"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Avatar/Avatar.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAQkB;AAUlB,eAAO,MAAM,KAAK,+CAQjB,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CAK5B,CAAC;AAEF,eAAO,MAAM,KAAK,+CAQjB,CAAC"}

package/dist/ui/Avatar/Avatar.stories.js

@@ -11,5 +11,13 @@ export default {
     component: Avatar,
     styleFn: useStyles,
 };
-export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 8, flexWrap: "wrap", children: [_jsx(Avatar, { size: "xs", src: "https://picsum.photos/100/200" }), _jsx(Avatar, { size: "sm", src: "https://picsum.photos/100/200" }), _jsx(Avatar, { size: "md", src: "https://picsum.photos/100/200" }), _jsx(Avatar, { size: "lg", src: "https://picsum.photos/100/200" }), _jsx(Avatar, { size: "xl", src: "https://picsum.photos/100/200" })] }));
-export const Variants = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 8, flexWrap: "wrap", children: [_jsx(Avatar, { size: "sm", src: "https://picsum.photos/100/200" }), _jsx(Avatar, { size: "sm", fallbackText: "Jean Pierre" }), _jsx(Avatar, { size: "sm", fallbackText: "Jean-Pierre" })] }));
+const styleContainer = {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 8,
+    alignItems: 'center',
+    flexWrap: 'wrap',
+};
+export const Sizes = () => (_jsxs(Box, { style: styleContainer, children: [_jsx(Avatar, { size: "xs", src: "https://picsum.photos/100/200" }), _jsx(Avatar, { size: "sm", src: "https://picsum.photos/100/200" }), _jsx(Avatar, { size: "md", src: "https://picsum.photos/100/200" }), _jsx(Avatar, { size: "lg", src: "https://picsum.photos/100/200" }), _jsx(Avatar, { size: "xl", src: "https://picsum.photos/100/200" })] }));
+export const WithFallbackText = () => (_jsxs(Box, { style: styleContainer, children: [_jsx(Avatar, { size: "lg", fallbackText: "Jean Pierre" }), _jsx(Avatar, { size: "md", fallbackText: "Jean Pierre" })] }));
+export const Carre = () => (_jsxs(Box, { style: styleContainer, children: [_jsx(Avatar, { size: "xs", src: "https://picsum.photos/100/200", carre: true }), _jsx(Avatar, { size: "sm", src: "https://picsum.photos/100/200", carre: true }), _jsx(Avatar, { size: "md", src: "https://picsum.photos/100/200", carre: true }), _jsx(Avatar, { size: "lg", src: "https://picsum.photos/100/200", carre: true }), _jsx(Avatar, { size: "xl", src: "https://picsum.photos/100/200", carre: true })] }));

package/dist/ui/Avatar/Avatar.styles.d.ts

@@ -1,8 +1,12 @@
 export declare const useStyles: () => {
     avatar: {
-        backgroundColor: "#D2E8FE";
+        backgroundColor: "#232427";
+    };
+    carre: {
+        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
     };
     fallbackText: {
+        color: "#CED5E1";
         display: "flex";
         justifyContent: "center";
         textAlign: "center";

package/dist/ui/Avatar/Avatar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Avatar/Avatar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;CAWnB,CAAC"}
+{"version":3,"file":"Avatar.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Avatar/Avatar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAenB,CAAC"}

package/dist/ui/Avatar/Avatar.styles.js

@@ -1,10 +1,14 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ color, text }) => ({
+export const useStyles = makeStyles(({ color, text, radius }) => ({
     avatar: {
-        backgroundColor: color.background['open-bleu-captive'],
+        backgroundColor: color.dark.background['contrast-grey'],
+    },
+    carre: {
+        borderRadius: radius('md'),
     },
     fallbackText: {
-        ...text['Corps de texte'].MD.Regular,
+        ...text['Corps de texte'].MD.Medium,
+        color: color.dark.text['default-grey'],
         display: 'flex',
         justifyContent: 'center',
         textAlign: 'center',

package/dist/ui/EmptyState/EmptyState.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/EmptyState/EmptyState.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDnB,CAAC"}
+{"version":3,"file":"EmptyState.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/EmptyState/EmptyState.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DpB,CAAC"}

package/dist/ui/EmptyState/EmptyState.styles.js

@@ -1,58 +1,61 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
-    container: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: spacing('150'),
-        paddingTop: 0,
-        paddingBottom: spacing('2W'),
-        paddingLeft: spacing('2W'),
-        paddingRight: spacing('2W'),
-        textAlign: 'center',
-        height: '100%',
-        width: '100%',
-    },
-    contenu: {
-        display: 'flex',
-        gap: spacing('2W'),
-        alignItems: 'center',
-        textAlign: 'center',
-        flex: 1,
-        justifyContent: 'center',
-        width: '100%',
-    },
-    media: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        color: color.light.text['active-primary'],
-        backgroundColor: color.light.background['alt-primary'],
-        borderRadius: radius('full'),
-        padding: spacing('075'),
-    },
-    messageEtDescription: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: spacing('2W'),
-        width: '100%',
-        justifyContent: 'center',
-    },
-    title: {
-        color: color.light.text['title-grey'],
-        ...text.Titres['H6 - XXS'],
-        textAlign: 'center',
-    },
-    description: {
-        color: color.light.text['mention-grey'],
-        ...text['Corps de texte'].SM.Regular,
-        textAlign: 'center',
-    },
-    footer: {
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: spacing('100'),
-    },
-}));
+export const useStyles = makeStyles(({ externalPadding, text, color, spacing, radius }) => {
+    const paddingValue = externalPadding();
+    return {
+        container: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: spacing('150'),
+            paddingTop: 0,
+            paddingBottom: spacing('2W'),
+            paddingLeft: paddingValue,
+            paddingRight: paddingValue,
+            textAlign: 'center',
+            height: '100%',
+            width: '100%',
+        },
+        contenu: {
+            display: 'flex',
+            gap: spacing('2W'),
+            alignItems: 'center',
+            textAlign: 'center',
+            flex: 1,
+            justifyContent: 'center',
+            width: '100%',
+        },
+        media: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: color.light.text['active-primary'],
+            backgroundColor: color.light.background['alt-primary'],
+            borderRadius: radius('full'),
+            padding: spacing('075'),
+        },
+        messageEtDescription: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: spacing('2W'),
+            width: '100%',
+            justifyContent: 'center',
+        },
+        title: {
+            color: color.light.text['title-grey'],
+            ...text.Titres['H6 - XXS'],
+            textAlign: 'center',
+        },
+        description: {
+            color: color.light.text['mention-grey'],
+            ...text['Corps de texte'].SM.Regular,
+            textAlign: 'center',
+        },
+        footer: {
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: spacing('100'),
+        },
+    };
+});

package/dist/ui/LucideIcon/LucideIcon.props.d.ts

@@ -8,10 +8,10 @@ export type IconName = LucideIconName | LabIconName;
 export declare const isLucideIconName: (name: string) => name is LucideIconName;
 declare const PublicPropsSchema: z.ZodObject<{
     size: z.ZodEnum<{
-        xs: "xs";
         sm: "sm";
         md: "md";
         lg: "lg";
+        xs: "xs";
         xl: "xl";
     }>;
     name: z.ZodEnum<{
@@ -2073,10 +2073,10 @@ type PrivateProps = {
 export type LucideIconProps = z.infer<typeof PublicPropsSchema> & PrivateProps;
 export declare const LucideIconPropsJSON: z.core.ZodStandardJSONSchemaPayload<z.ZodObject<{
     size: z.ZodEnum<{
-        xs: "xs";
         sm: "sm";
         md: "md";
         lg: "lg";
+        xs: "xs";
         xl: "xl";
     }>;
     name: z.ZodEnum<{

package/dist/ui/LucideIcon/LucideIcon.stories.d.ts

@@ -6,10 +6,10 @@ declare const _default: {
     description: string;
     props: import("zod/v4/core").ZodStandardJSONSchemaPayload<import("zod").ZodObject<{
         size: import("zod").ZodEnum<{
-            xs: "xs";
             sm: "sm";
             md: "md";
             lg: "lg";
+            xs: "xs";
             xl: "xl";
         }>;
         name: import("zod").ZodEnum<{

package/dist/ui/ToolbarTop/ToolbarTop.d.ts

@@ -1,13 +1,16 @@
 import React from 'react';
-export type ToolbarTopVariant = 'default' | 'large' | 'compactLarge';
-export type ToolbarTopProps = {
-    variant?: ToolbarTopVariant;
+import { BoxProps } from '../../core';
+import { AvatarProps } from '../Avatar';
+import { IconProps } from '../LucideIcon';
+export type ToolbarTopProps = BoxProps & {
+    variant?: 'default' | 'large' | 'compactLarge';
     title: string;
-    subtitle?: string;
-    background?: boolean;
-    showSubtitle?: boolean;
-    canGoBack?: boolean;
-    onNavigateBack?: () => void;
+    AvatarProps?: Omit<AvatarProps, 'size'>;
+    onNavigate?: () => void;
+    navigationIcon?: IconProps['name'];
+    sousTitre?: string;
+    onActions?: () => void;
+    actionsIcon?: IconProps['name'];
     actions?: React.ReactNode;
 };
 export declare const ToolbarTop: (props: ToolbarTopProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/ToolbarTop/ToolbarTop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarTop.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,OAAO,GAAG,cAAc,CAAC;AAErE,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,4CAwChD,CAAC"}
+{"version":3,"file":"ToolbarTop.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AACvD,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG;IACvC,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,cAAc,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,4CAmFhD,CAAC"}

package/dist/ui/ToolbarTop/ToolbarTop.js

@@ -1,19 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRouter } from 'expo-router';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Typography } from '../../core';
+import { Avatar } from '../Avatar';
 import { ButtonIcon } from '../Button';
 import { useStyles } from './ToolbarTop.styles';
 export const ToolbarTop = (props) => {
-    const { title, subtitle, background, canGoBack, actions, variant, onNavigateBack } = props;
-    const router = useRouter();
+    const { variant = 'default', style, title, onNavigate, navigationIcon = 'ChevronLeft', AvatarProps, sousTitre, actions, ...toolbarProps } = props;
     const styles = useStyles();
-    const handleBack = () => {
-        if (onNavigateBack) {
-            onNavigateBack();
-        }
-        else if (router.canGoBack()) {
-            router.back();
-        }
-    };
-    return (_jsxs(Box, { tag: "toolbar", style: { ...styles.container, ...(background && styles.containerWithBackground) }, children: [variant !== 'compactLarge' && (_jsxs(Box, { tag: "toolbar-haut", style: styles.toolbarHaut, children: [_jsx(Box, { tag: "toolbar-navigation", children: canGoBack && _jsx(ButtonIcon, { size: "lg", variant: "tertiary", icon: "ArrowLeft", onPress: handleBack }) }), _jsx(Box, { tag: "toolbar-actions", children: actions })] })), _jsxs(Box, { tag: "toolbar-informations", style: { ...styles.informations, ...(variant === 'compactLarge' && styles.compactLargeInformations) }, children: [_jsx(Box, { tag: "toolbar-titre", children: _jsx(Typography, { style: styles.titre, children: title }) }), subtitle && (_jsx(Box, { tag: "toolbar-sous-titre", children: _jsx(Typography, { style: styles.sousTitre, children: subtitle }) }))] })] }));
+    const toolbarNavigation = onNavigate ? (_jsx(Box, { tag: "toolbar-navigation", style: styles.toolbarNavigation, children: _jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: navigationIcon, onPress: onNavigate }) })) : (_jsx(_Fragment, {}));
+    const toolbarInformation = (_jsxs(Box, { tag: "toolbar-information", style: { ...styles.toolbarInformation, ...(variant === 'compactLarge' ? styles.compactLargeInformations : {}) }, children: [AvatarProps && _jsx(Avatar, { ...AvatarProps, size: "md" }), _jsxs(Box, { tag: "toolbar-information-title", style: styles.toolbarInformationTitle, children: [_jsx(Typography, { style: {
+                            ...styles.toolbarInformationTitleText,
+                            ...(variant === 'compactLarge' || variant === 'large' ? styles.largeInformationTitleText : {}),
+                        }, children: title }), sousTitre && (_jsx(Typography, { style: {
+                            ...styles.toolbarInformationTitleSubText,
+                            ...(variant === 'compactLarge' || variant === 'large' ? styles.largeToolbarInformationTitleSubText : {}),
+                        }, children: sousTitre }))] })] }));
+    const toolbarActions = actions ? (_jsx(Box, { tag: "toolbar-actions", style: styles.toolbarActions, children: actions })) : (_jsx(_Fragment, {}));
+    if (variant === 'large') {
+        return (_jsxs(Box, { tag: "toolbar", style: [styles.toolbarContainer, styles.largeToolbarContainer, style], ...toolbarProps, children: [toolbarNavigation, _jsxs(Box, { tag: "toolbar-bas", children: [toolbarInformation, toolbarActions] })] }));
+    }
+    return (_jsxs(Box, { tag: "toolbar", style: [styles.toolbarContainer, variant === 'compactLarge' ? styles.compactLargetoolbarContainer : {}, style], ...toolbarProps, children: [toolbarNavigation, toolbarInformation, toolbarActions] }));
 };

package/dist/ui/ToolbarTop/ToolbarTop.stories.d.ts

@@ -2,58 +2,106 @@ declare const _default: {
     title: string;
     tags: ["Composant"];
     experimental: false;
-    description: string;
     figmaURL: string;
+    description: string;
+    mobileOnly: true;
     component: (props: import("./ToolbarTop").ToolbarTopProps) => import("react/jsx-runtime").JSX.Element;
     styleFn: () => {
-        container: {
+        toolbarContainer: {
+            backgroundColor: "white";
             display: "flex";
-            width: "100%";
+            flexDirection: "row";
+            alignItems: "center";
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+            paddingTop: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
         };
-        containerWithBackground: {
-            backgroundColor: "#FFFFFF";
+        compactLargetoolbarContainer: {
+            paddingTop: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
         };
-        toolbarHaut: {
+        largeToolbarContainer: {
+            paddingTop: number;
+            paddingBottom: number;
+            paddingLeft: number;
+            paddingRight: number;
+            flexDirection: "column";
+            alignItems: "flex-start";
+        };
+        toolbarNavigation: {
+            display: "flex";
+            justifyContent: "center";
+            gap: import("@alveole/theme").Spacing;
+        };
+        toolbarInformation: {
             display: "flex";
             flexDirection: "row";
-            justifyContent: "space-between";
             alignItems: "center";
-            width: "100%";
-            minHeight: import("@alveole/theme").Spacing;
+            gap: import("@alveole/theme").Spacing;
+            flex: number;
         };
-        informations: {
+        toolbarInformationTitle: {
             display: "flex";
-            paddingLeft: import("@alveole/theme").Spacing;
-            paddingRight: import("@alveole/theme").Spacing;
-            paddingBottom: import("@alveole/theme").Spacing;
+            flexDirection: "column";
+            justifyContent: "center";
+            alignItems: "flex-start";
+            flex: number;
         };
         compactLargeInformations: {
             paddingBottom: number;
-            minHeight: number;
             justifyContent: "center";
         };
-        titre: {
+        toolbarInformationTitleText: {
             color: "#151617";
+            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+        };
+        largeInformationTitleText: {
             fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
             fontSize: 32 | 40;
             lineHeight: 48 | 40;
             letterSpacing: 0;
         };
-        sousTitre: {
+        toolbarInformationTitleSubText: {
             color: "#5F6571";
+            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            fontSize: 12;
+            lineHeight: 20;
+            letterSpacing: 0;
+        };
+        largeToolbarInformationTitleSubText: {
             fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
         };
+        toolbarActions: {
+            display: "flex";
+            flexDirection: "row";
+            justifyContent: "flex-end";
+            alignItems: "center";
+        };
+        toolbarInformationContainer: {
+            flex: number;
+            alignItems: "center";
+            display: "flex";
+            flexDirection: "row";
+            justifyContent: "space-between";
+        };
     };
 };
 export default _default;
 export declare const Default: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithSubtitle: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithBackground: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithBackButton: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithActions: () => import("react/jsx-runtime").JSX.Element;
-export declare const Full: () => import("react/jsx-runtime").JSX.Element;
+export declare const SansAvatarEtAvecActions: () => import("react/jsx-runtime").JSX.Element;
+export declare const AvecAvatarSansActions: () => import("react/jsx-runtime").JSX.Element;
+export declare const AvecAvatarEtActions: () => import("react/jsx-runtime").JSX.Element;
+export declare const AvecPlusieursActions: () => import("react/jsx-runtime").JSX.Element;
+export declare const AvecTitreEtSansSousTitre: () => import("react/jsx-runtime").JSX.Element;
 export declare const CompactLarge: () => import("react/jsx-runtime").JSX.Element;
+export declare const Large: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ToolbarTop.stories.d.ts.map

package/dist/ui/ToolbarTop/ToolbarTop.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarTop.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBASkB;AAElB,eAAO,MAAM,OAAO,+CAAyC,CAAC;AAE9D,eAAO,MAAM,YAAY,+CAA4E,CAAC;AAEtG,eAAO,MAAM,cAAc,+CAE1B,CAAC;AAEF,eAAO,MAAM,cAAc,+CAO1B,CAAC;AAEF,eAAO,MAAM,WAAW,+CAUvB,CAAC;AAEF,eAAO,MAAM,IAAI,+CAShB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAA0E,CAAC"}
+{"version":3,"file":"ToolbarTop.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAWkB;AAElB,eAAO,MAAM,OAAO,+CAA4D,CAAC;AAEjF,eAAO,MAAM,uBAAuB,+CAOnC,CAAC;AAEF,eAAO,MAAM,qBAAqB,+CAEjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,+CAQ/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,+CAahC,CAAC;AAEF,eAAO,MAAM,wBAAwB,+CAYpC,CAAC;AAEF,eAAO,MAAM,YAAY,+CAA0E,CAAC;AAEpG,eAAO,MAAM,KAAK,+CAEjB,CAAC"}

package/dist/ui/ToolbarTop/ToolbarTop.stories.js

@@ -1,20 +1,22 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ButtonIcon } from '../Button';
+import { ButtonIcon } from '../Button/ButtonIcon';
+import { ToolbarTop } from './ToolbarTop';
 import { useStyles } from './ToolbarTop.styles';
-import { ToolbarTop } from './index';
 export default {
     title: 'ToolbarTop',
     tags: ['Composant'],
     experimental: false,
-    description: "Barre d'outils en haut de page avec titre, sous-titre optionnel, bouton retour et actions.",
-    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=1749-4674&t=baZKFA9BpkeQGeZm-4',
+    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=1749-4674&t=qyctNCnE5tT5rKRk-4',
+    description: "La ToolbarTop est un composant de navigation et d'action. A utiliser uniquement sur Mobile. Elle dispose de 3 variantes : default, large et compactLarge.",
+    mobileOnly: true,
     component: ToolbarTop,
     styleFn: useStyles,
 };
-export const Default = () => _jsx(ToolbarTop, { title: "Mon titre" });
-export const WithSubtitle = () => _jsx(ToolbarTop, { title: "Mon titre", subtitle: "Un sous-titre optionnel" });
-export const WithBackground = () => (_jsx(ToolbarTop, { title: "Page avec fond", subtitle: "Le fond utilise la couleur par d\u00E9faut", background: true }));
-export const WithBackButton = () => (_jsx(ToolbarTop, { title: "Page d\u00E9tails", subtitle: "Avec bouton de retour", canGoBack: true, onNavigateBack: () => console.log('Retour') }));
-export const WithActions = () => (_jsx(ToolbarTop, { title: "Page avec actions", actions: _jsxs(_Fragment, { children: [_jsx(ButtonIcon, { variant: "tertiary", icon: "Search", onPress: () => console.log('Recherche') }), _jsx(ButtonIcon, { variant: "tertiary", icon: "MoveVertical", onPress: () => console.log('Menu') })] }) }));
-export const Full = () => (_jsx(ToolbarTop, { title: "Tous les options", subtitle: "Sous-titre avec fond et actions", background: true, canGoBack: true, onNavigateBack: () => console.log('Retour'), actions: _jsx(ButtonIcon, { variant: "tertiary", icon: "Share", onPress: () => console.log('Partager') }) }));
+export const Default = () => _jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre" });
+export const SansAvatarEtAvecActions = () => (_jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", onNavigate: console.log, actions: _jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Plus', onPress: console.log }) }));
+export const AvecAvatarSansActions = () => (_jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", AvatarProps: { src: 'https://picsum.photos/100/200' } }));
+export const AvecAvatarEtActions = () => (_jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", onNavigate: console.log, AvatarProps: { src: 'https://picsum.photos/100/200' }, actions: _jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Plus', onPress: console.log }) }));
+export const AvecPlusieursActions = () => (_jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", onNavigate: console.log, AvatarProps: { src: 'https://picsum.photos/100/200' }, actions: _jsxs(_Fragment, { children: [_jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Plus', onPress: console.log }), _jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Download', onPress: console.log })] }) }));
+export const AvecTitreEtSansSousTitre = () => (_jsx(ToolbarTop, { title: "Titre", onNavigate: console.log, AvatarProps: { src: 'https://picsum.photos/100/200' }, actions: _jsxs(_Fragment, { children: [_jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Plus', onPress: console.log }), _jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Download', onPress: console.log })] }) }));
 export const CompactLarge = () => _jsx(ToolbarTop, { title: "Titre compact large", variant: "compactLarge" });
+export const Large = () => (_jsx(ToolbarTop, { title: "Titre large", variant: "large", onNavigate: console.log, sousTitre: "Sous-titre" }));

package/dist/ui/ToolbarTop/ToolbarTop.styles.d.ts

@@ -1,43 +1,89 @@
 export declare const useStyles: () => {
-    container: {
+    toolbarContainer: {
+        backgroundColor: "white";
         display: "flex";
-        width: "100%";
+        flexDirection: "row";
+        alignItems: "center";
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+        paddingTop: import("@alveole/theme").Spacing;
+        paddingBottom: import("@alveole/theme").Spacing;
+    };
+    compactLargetoolbarContainer: {
+        paddingTop: import("@alveole/theme").Spacing;
+        paddingBottom: import("@alveole/theme").Spacing;
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
     };
-    containerWithBackground: {
-        backgroundColor: "#FFFFFF";
+    largeToolbarContainer: {
+        paddingTop: number;
+        paddingBottom: number;
+        paddingLeft: number;
+        paddingRight: number;
+        flexDirection: "column";
+        alignItems: "flex-start";
     };
-    toolbarHaut: {
+    toolbarNavigation: {
+        display: "flex";
+        justifyContent: "center";
+        gap: import("@alveole/theme").Spacing;
+    };
+    toolbarInformation: {
         display: "flex";
         flexDirection: "row";
-        justifyContent: "space-between";
         alignItems: "center";
-        width: "100%";
-        minHeight: import("@alveole/theme").Spacing;
+        gap: import("@alveole/theme").Spacing;
+        flex: number;
     };
-    informations: {
+    toolbarInformationTitle: {
         display: "flex";
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
-        paddingBottom: import("@alveole/theme").Spacing;
+        flexDirection: "column";
+        justifyContent: "center";
+        alignItems: "flex-start";
+        flex: number;
     };
     compactLargeInformations: {
         paddingBottom: number;
-        minHeight: number;
         justifyContent: "center";
     };
-    titre: {
+    toolbarInformationTitleText: {
         color: "#151617";
+        fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+    };
+    largeInformationTitleText: {
         fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
         fontSize: 32 | 40;
         lineHeight: 48 | 40;
         letterSpacing: 0;
     };
-    sousTitre: {
+    toolbarInformationTitleSubText: {
         color: "#5F6571";
+        fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+        fontSize: 12;
+        lineHeight: 20;
+        letterSpacing: 0;
+    };
+    largeToolbarInformationTitleSubText: {
         fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
     };
+    toolbarActions: {
+        display: "flex";
+        flexDirection: "row";
+        justifyContent: "flex-end";
+        alignItems: "center";
+    };
+    toolbarInformationContainer: {
+        flex: number;
+        alignItems: "center";
+        display: "flex";
+        flexDirection: "row";
+        justifyContent: "space-between";
+    };
 };
 //# sourceMappingURL=ToolbarTop.styles.d.ts.map

package/dist/ui/ToolbarTop/ToolbarTop.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarTop.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCnB,CAAC"}
+{"version":3,"file":"ToolbarTop.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2EnB,CAAC"}

package/dist/ui/ToolbarTop/ToolbarTop.styles.js

@@ -1,37 +1,77 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ text, spacing, color }) => ({
-    container: {
+export const useStyles = makeStyles(({ text, color, spacing }) => ({
+    toolbarContainer: {
+        backgroundColor: 'white',
         display: 'flex',
-        width: '100%',
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingLeft: spacing('025'),
+        paddingRight: spacing('025'),
+        paddingTop: spacing('050'),
+        paddingBottom: spacing('050'),
+    },
+    compactLargetoolbarContainer: {
+        paddingTop: spacing('3V'),
+        paddingBottom: spacing('1W'),
+        paddingLeft: spacing('2W'),
+        paddingRight: spacing('2W'),
     },
-    containerWithBackground: {
-        backgroundColor: color.background.default,
+    largeToolbarContainer: {
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        flexDirection: 'column',
+        alignItems: 'flex-start',
     },
-    toolbarHaut: {
+    toolbarNavigation: {
+        display: 'flex',
+        justifyContent: 'center',
+        gap: spacing('075'),
+    },
+    toolbarInformation: {
         display: 'flex',
         flexDirection: 'row',
-        justifyContent: 'space-between',
         alignItems: 'center',
-        width: '100%',
-        minHeight: spacing('300'),
+        gap: spacing('075'),
+        flex: 1,
     },
-    informations: {
+    toolbarInformationTitle: {
         display: 'flex',
-        paddingLeft: spacing('2W'),
-        paddingRight: spacing('2W'),
-        paddingBottom: spacing('050'),
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'flex-start',
+        flex: 1,
     },
     compactLargeInformations: {
         paddingBottom: 0,
-        minHeight: 60,
         justifyContent: 'center',
     },
-    titre: {
-        ...text.Titres['H1 - XL'],
+    toolbarInformationTitleText: {
+        ...text['Corps de texte'].SM.SemiBold,
         color: color.light.text['title-grey'],
     },
-    sousTitre: {
-        ...text['Corps de texte'].SM.Regular,
+    largeInformationTitleText: {
+        ...text.Titres['H1 - XL'],
+    },
+    toolbarInformationTitleSubText: {
+        ...text['Corps de texte'].XS.Regular,
         color: color.light.text['mention-grey'],
     },
+    largeToolbarInformationTitleSubText: {
+        ...text['Corps de texte'].SM.Regular,
+    },
+    toolbarActions: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+    },
+    toolbarInformationContainer: {
+        flex: 1,
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/components",
-  "version": "0.16.12",
+  "version": "0.17.0",
   "description": "Shared UI components.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",