@alveole/components 1.10.0 → 2.0.0-alpha

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

@@ -1,78 +1,67 @@
 export declare const useStyles: () => {
-    sidebar: {
-        backgroundColor: "#FFFFFF";
-        borderRightWidth: number;
-        borderColor: string;
-        display: "flex";
-        flexDirection: "column";
-        alignItems: "flex-start";
-        alignSelf: "stretch";
-    };
-    header: {};
-    headerContent: {
-        display: "flex";
-        flexDirection: "row";
-        padding: import("@alveole/theme").Spacing;
-    };
-    logo: {
-        marginLeft: string | number;
+    sidebarItemSelectedIndicator: {
+        height: "100%";
+        width: import("@alveole/theme").Spacing;
+        position: "absolute";
+        left: number;
     };
-    sidebarContent: {
-        flex: number;
-        justifyContent: "space-between";
+    sidebarItemSelectedIndicatorContent: {
         width: "100%";
+        minHeight: string | number;
+        backgroundColor: string;
+        margin: string;
+        borderRadius: string | number;
     };
-    scrollView: {
-        flex: number;
-        paddingTop: string | number;
-        paddingBottom: string | number;
-        zIndex: number;
-        backgroundColor: "#FFFFFF";
-    };
-    groupTitleDesktop: {
-        paddingLeft: string | number;
-        paddingTop: string | number;
-        fontSize: 12;
+    sidebarItemTitleSelectedDesktop: {
+        color: string;
+        stroke: string;
+        fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
-    groupTitleMobile: {
+    sidebarItemTitleSelectedMobile: {
         color: string;
-        paddingLeft: string | number;
-        paddingRight: string | number;
-        paddingTop: string | number;
-        paddingBottom: string | number;
+        stroke: string;
         fontSize: 16;
         lineHeight: 24;
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
-    sidebarItemDesktop: {
-        borderRadius: string | number;
-        display: "flex";
-        flexDirection: "row";
-        alignItems: "center";
-        gap: string | number;
-        padding: string | number;
-        width: "100%";
+    sidebarItemTitleDesktop: {
         color: string;
         stroke: string;
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
-    sidebarItemMobile: {
-        display: "flex";
-        flexDirection: "row";
-        alignItems: "center";
-        gap: string | number;
-        paddingLeft: string | number;
-        paddingRight: string | number;
-        paddingTop: string | number;
-        paddingBottom: string | number;
-        width: "100%";
+    sidebarItemTitleMobile: {
         color: string;
         stroke: string;
+        fontSize: 16;
+        lineHeight: 24;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    sidebarItemTitleCurrentHoverDesktop: {
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    sidebarItemTitleCurrentHoverMobile: {
+        color: string;
+        fontSize: 16;
+        lineHeight: 24;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     sidebarItemSelectedDesktop: {
         backgroundColor: string;
@@ -81,12 +70,6 @@ export declare const useStyles: () => {
         borderRadius: import("@alveole/theme").Radius;
         backgroundColor: string;
     };
-    sidebarItemHover: {
-        backgroundColor: string;
-    };
-    sidebarItemCurrentHover: {
-        backgroundColor: "#EFF1F6";
-    };
     sidebarItemContainerDesktop: {
         paddingLeft: string | number;
         paddingRight: string | number;
@@ -109,69 +92,91 @@ export declare const useStyles: () => {
         marginLeft: string | number;
         marginRight: string | number;
     };
-    sidebarItemTitleSelectedDesktop: {
+    sidebarItemDesktop: {
+        borderRadius: string | number;
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        gap: string | number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+        width: "100%";
         color: string;
         stroke: string;
-        fontSize: 16;
-        lineHeight: 24;
-        letterSpacing: 0;
-        fontFamily: string;
-        fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
-    sidebarItemTitleSelectedMobile: {
+    sidebarItemMobile: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        gap: string | number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
+        width: "100%";
         color: string;
         stroke: string;
-        fontSize: 16;
-        lineHeight: 24;
-        letterSpacing: 0;
-        fontFamily: string;
-        fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
-    sidebarItemTitleDesktop: {
+    sidebarItemHover: {
+        backgroundColor: string;
+    };
+    groupDesktop: {
+        marginTop: string | number;
+    };
+    groupTitleDesktop: {
         color: string;
-        stroke: string;
-        fontSize: 16;
-        lineHeight: 24;
+        paddingLeft: number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
+        fontSize: 12;
+        lineHeight: 20;
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
-    sidebarItemTitleMobile: {
+    groupTitleMobile: {
         color: string;
-        stroke: string;
-        fontSize: 16;
-        lineHeight: 24;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
+        fontSize: 14;
+        lineHeight: 20;
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
-    sidebarItemTitleCurrentHoverDesktop: {
-        fontSize: 16;
-        lineHeight: 24;
-        letterSpacing: 0;
-        fontFamily: string;
-        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    sidebar: {
+        backgroundColor: "#FFFFFF";
+        borderRightWidth: number;
+        borderColor: string;
+        display: "flex";
+        flexDirection: "column";
+        alignItems: "flex-start";
+        alignSelf: "stretch";
     };
-    sidebarItemTitleCurrentHoverMobile: {
-        color: string;
-        fontSize: 16;
-        lineHeight: 24;
-        letterSpacing: 0;
-        fontFamily: string;
-        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    header: {};
+    headerContent: {
+        display: "flex";
+        flexDirection: "row";
+        padding: import("@alveole/theme").Spacing;
     };
-    sidebarItemSelectedIndicator: {
-        height: "100%";
-        width: import("@alveole/theme").Spacing;
-        position: "absolute";
-        left: number;
+    logo: {
+        marginLeft: string | number;
     };
-    sidebarItemSelectedIndicatorContent: {
+    sidebarContent: {
+        flex: number;
+        justifyContent: "space-between";
         width: "100%";
-        minHeight: string | number;
-        backgroundColor: string;
-        margin: string;
-        borderRadius: string | number;
+    };
+    scrollView: {
+        flex: number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
+        zIndex: number;
+        backgroundColor: "#FFFFFF";
     };
 };
 //# sourceMappingURL=Sidebar.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiJnB,CAAC"}
+{"version":3,"file":"Sidebar.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.styles.ts"],"names":[],"mappings":"AA+MA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOnB,CAAC"}

package/dist/ui/Sidebar/Sidebar.styles.js

@@ -1,5 +1,10 @@
-import { Colors, makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ text, color, spacing, spacingValue, isVariant, radius }) => ({
+import { makeStyles } from '@alveole/theme';
+// Titre de groupe et libellé d'item partent de la même verticale, comme chez Primer qui les
+// aligne au pixel. L'item y arrive par trois retraits emboîtés : la marge de son conteneur,
+// le padding de ce conteneur, puis celui de la pastille qui porte le texte. Le titre n'en a
+// qu'un seul, d'où cette somme explicite : sans elle les deux dérivent au premier réglage.
+const retraitDuContenu = (spacingValue) => spacingValue('075') + spacingValue('050') + spacingValue('050');
+const coque = ({ color, spacing, spacingValue, isVariant }) => ({
     sidebar: {
         backgroundColor: '#FFFFFF',
         borderRightWidth: 1,
@@ -16,7 +21,7 @@ export const useStyles = makeStyles(({ text, color, spacing, spacingValue, isVar
         padding: spacingValue('050'),
     },
     logo: {
-        marginLeft: isVariant('mobile') || isVariant('tablet') ? spacing('150') : 0,
+        marginLeft: isVariant('mobile') || isVariant('tablet') ? spacing('3W') : 0,
     },
     sidebarContent: {
         flex: 1,
@@ -25,31 +30,61 @@ export const useStyles = makeStyles(({ text, color, spacing, spacingValue, isVar
     },
     scrollView: {
         flex: 1,
-        paddingTop: spacing('100'),
-        paddingBottom: spacing('100'),
+        paddingTop: spacing('2W'),
+        paddingBottom: spacing('2W'),
         zIndex: 1000,
         backgroundColor: '#FFFFFF',
     },
+});
+const groupe = ({ text, color, spacing, spacingValue }) => ({
+    // L'écart qui détache deux groupes appartient au groupe, pas à son titre : porté par le
+    // titre, il le collerait à sa propre liste tout en le faisant flotter sous la précédente.
+    groupDesktop: {
+        // 8, et non 16 : le titre porte déjà 8 de padding haut. C'est la somme des deux qui fait
+        // face à l'écart posé au-dessus du séparateur, et qui le laisse à égale distance des
+        // deux groupes qu'il sépare.
+        marginTop: spacing('1W'),
+    },
+    // Le titre de groupe recule derrière ses items, et ne se signale que par deux dimensions à
+    // la fois : ici le gris de mention et la graisse. Les références divergent sur lesquelles
+    // (Primer prend graisse et taille à couleur égale, Atlassian la couleur), mais aucune ne
+    // cumule couleur plus sombre et graisse supérieure à celles des items. Voir docs/adr/0010.
     groupTitleDesktop: {
-        ...text['Corps de texte'].XS.SemiBold,
-        paddingLeft: spacing('050'),
-        paddingTop: spacing('100'),
+        ...text['Corps de texte'].XS.Bold,
+        color: color.light.text['mention-grey'],
+        paddingLeft: retraitDuContenu(spacingValue),
+        paddingTop: spacing('1W'),
+        paddingBottom: spacing('1W'),
     },
+    // Même rapport que sur bureau, décalé d'un cran vers le haut de l'échelle puisque les items
+    // du tiroir sont plus grands : le titre se pose un cran sous eux, en gris et plus gras.
+    // À corps et graisse égaux, il se lisait comme une entrée cliquable de plus.
     groupTitleMobile: {
-        ...text['Corps de texte'].MD.Medium,
+        ...text['Corps de texte'].SM.Bold,
         color: color.light.text['mention-grey'],
-        paddingLeft: spacing('3V'),
-        paddingRight: spacing('3V'),
-        paddingTop: spacing('2W'),
-        paddingBottom: spacing('2W'),
-    },
+        // `2W` et non `3V` : c'est le retrait de l'item du tiroir, et quatre pixels d'écart ne
+        // se lisent ni comme une indentation voulue ni comme un alignement.
+        paddingLeft: spacing('2W'),
+        paddingRight: spacing('2W'),
+        // Moins haut qu'un item : un libellé qui occupe la hauteur d'une cible tactile se lit
+        // comme cliquable, et coûte cette hauteur à chaque groupe d'une liste qu'on fait défiler.
+        paddingTop: spacing('3V'),
+        paddingBottom: spacing('3V'),
+    },
+});
+const item = ({ color, spacing }) => ({
+    // 32px de haut en tout : 20 de hauteur de ligne plus 6 de part et d'autre, comme dans la
+    // maquette. Le retrait horizontal reste à 8, c'est lui qui porte la verticale du contenu.
     sidebarItemDesktop: {
-        borderRadius: spacing('050'),
+        borderRadius: spacing('1W'),
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
-        gap: spacing('050'),
-        padding: spacing('050'),
+        gap: spacing('1W'),
+        paddingTop: spacing('1,5V'),
+        paddingBottom: spacing('1,5V'),
+        paddingLeft: spacing('1W'),
+        paddingRight: spacing('1W'),
         width: '100%',
         color: color.light.text['title-grey'],
         stroke: color.light.text['title-grey'],
@@ -67,27 +102,26 @@ export const useStyles = makeStyles(({ text, color, spacing, spacingValue, isVar
         color: color.light.text['title-grey'],
         stroke: color.light.text['title-grey'],
     },
+    sidebarItemHover: {
+        backgroundColor: color.light.background['default-grey-hover'],
+    },
+});
+const etatDeLItem = ({ color, spacing, radius }) => ({
     sidebarItemSelectedDesktop: {
-        backgroundColor: color.background.badge.default,
+        backgroundColor: color.light.background['contrast-grey'],
     },
     sidebarItemSelectedMobile: {
         borderRadius: radius('lg'),
         backgroundColor: color.light.background['alt-primary'],
     },
-    sidebarItemHover: {
-        backgroundColor: color.light.background['default-grey-hover'],
-    },
-    sidebarItemCurrentHover: {
-        backgroundColor: Colors.Neutre[950],
-    },
     sidebarItemContainerDesktop: {
-        paddingLeft: spacing('050'),
-        paddingRight: spacing('050'),
+        paddingLeft: spacing('1W'),
+        paddingRight: spacing('1W'),
         display: 'flex',
         flexDirection: 'row',
         cursor: 'pointer',
-        marginLeft: spacing('075'),
-        marginRight: spacing('025'),
+        marginLeft: spacing('3V'),
+        marginRight: spacing('1V'),
     },
     sidebarItemContainerMobile: {
         paddingLeft: spacing('2W'),
@@ -99,11 +133,13 @@ export const useStyles = makeStyles(({ text, color, spacing, spacingValue, isVar
         flexDirection: 'row',
         cursor: 'pointer',
         borderRadius: radius('md'),
-        marginLeft: spacing('075'),
-        marginRight: spacing('025'),
+        marginLeft: spacing('3V'),
+        marginRight: spacing('1V'),
     },
+});
+const titreDeLItem = ({ text, color }) => ({
     sidebarItemTitleSelectedDesktop: {
-        ...text['Corps de texte'].MD.SemiBold,
+        ...text['Corps de texte'].SM.Bold,
         color: color.light.text['default-grey'],
         stroke: color.light.text['default-grey'],
     },
@@ -113,9 +149,9 @@ export const useStyles = makeStyles(({ text, color, spacing, spacingValue, isVar
         stroke: color.light.text['mention-grey'],
     },
     sidebarItemTitleDesktop: {
-        ...text['Corps de texte'].MD.Regular,
-        color: color.light.text['title-grey'],
-        stroke: color.light.text['title-grey'],
+        ...text['Corps de texte'].SM.Regular,
+        color: color.light.text['default-grey'],
+        stroke: color.light.text['default-grey'],
     },
     sidebarItemTitleMobile: {
         ...text['Corps de texte'].MD.Medium,
@@ -123,12 +159,14 @@ export const useStyles = makeStyles(({ text, color, spacing, spacingValue, isVar
         stroke: color.light.text['default-grey'],
     },
     sidebarItemTitleCurrentHoverDesktop: {
-        ...text['Corps de texte'].MD.SemiBold,
+        ...text['Corps de texte'].SM.Bold,
     },
     sidebarItemTitleCurrentHoverMobile: {
         ...text['Corps de texte'].MD.Medium,
         color: color.light.background['action-high-primary'],
     },
+});
+const indicateur = ({ color, spacing, spacingValue }) => ({
     sidebarItemSelectedIndicator: {
         height: '100%',
         width: spacingValue('025'),
@@ -137,9 +175,17 @@ export const useStyles = makeStyles(({ text, color, spacing, spacingValue, isVar
     },
     sidebarItemSelectedIndicatorContent: {
         width: '100%',
-        minHeight: spacing('150'),
+        minHeight: spacing('3W'),
         backgroundColor: color.light.border['default-primary'],
         margin: 'auto',
-        borderRadius: spacing('050'),
-    },
+        borderRadius: spacing('1W'),
+    },
+});
+export const useStyles = makeStyles(theme => ({
+    ...coque(theme),
+    ...groupe(theme),
+    ...item(theme),
+    ...etatDeLItem(theme),
+    ...titreDeLItem(theme),
+    ...indicateur(theme),
 }));

package/dist/ui/Sidebar/SidebarDivider.d.ts

@@ -0,0 +1,2 @@
+export declare const SidebarDivider: () => import("react").JSX.Element;
+//# sourceMappingURL=SidebarDivider.d.ts.map

package/dist/ui/Sidebar/SidebarDivider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarDivider.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarDivider.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc,mCAI1B,CAAC"}

package/dist/ui/Sidebar/SidebarDivider.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '../../core/Box';
+import { Divider } from '../Divider';
+export const SidebarDivider = () => (_jsx(Box, { tag: "sidebar-divider", pl: "3W", pr: "3W", pt: "1V", pb: "1V", children: _jsx(Divider, {}) }));

package/dist/ui/Sidebar/SidebarFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarFooter.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarFooter.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,iBAAiB,CAAC;AAEzD,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,sBAYtD,CAAC"}
+{"version":3,"file":"SidebarFooter.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarFooter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,iBAAiB,CAAC;AAEzD,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,sBAYtD,CAAC"}

package/dist/ui/Sidebar/SidebarFooter.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Version } from '../../core';
+import { Box } from '../../core/Box';
+import { Version } from '../../core/Version';
 import { Divider } from '../Divider';
 export const SidebarFooter = (props) => {
     const { children } = props;

package/dist/ui/Sidebar/SidebarGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarGroup.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,GAAG;IACxD,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AA4BF,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBAIpD,CAAC"}
+{"version":3,"file":"SidebarGroup.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,GAAG;IACxD,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AA4BF,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBAIpD,CAAC"}

package/dist/ui/Sidebar/SidebarGroup.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTheme } from '@alveole/theme';
 import React from 'react';
-import { Box, Typography } from '../../core';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
 import { useStyles } from './Sidebar.styles';
 const SidebarGroupDesktop = (props) => {
     const { children, title } = props;
     const styles = useStyles();
-    return (_jsxs(Box, { tag: "sidebar-group", children: [_jsx(Typography, { style: styles.groupTitleDesktop, children: title }), children] }));
+    return (_jsxs(Box, { tag: "sidebar-group", style: styles.groupDesktop, children: [_jsx(Typography, { style: styles.groupTitleDesktop, children: title }), children] }));
 };
 const SidebarGroupMobile = (props) => {
     const { children, title } = props;

package/dist/ui/Sidebar/SidebarHeader.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { SidebarController } from './useSidebar';
 export type SidebarHeaderProps = {
     controller?: SidebarController;
-    logo: React.ReactNode;
+    logo?: React.ReactNode;
 };
 export declare const SidebarHeader: (props: SidebarHeaderProps) => React.JSX.Element;
 //# sourceMappingURL=SidebarHeader.d.ts.map

package/dist/ui/Sidebar/SidebarHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarHeader.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB,CAAC;AAiCF,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,sBAKtD,CAAC"}
+{"version":3,"file":"SidebarHeader.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AA0CF,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,sBAKtD,CAAC"}

package/dist/ui/Sidebar/SidebarHeader.js

@@ -3,20 +3,24 @@ import { useTheme } from '@alveole/theme';
 import React from 'react';
 import { Platform } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
 import { ButtonIcon } from '../Button';
 import { Divider } from '../Divider';
 import { useStyles } from './Sidebar.styles';
 const SidebarHeaderDesktop = (props) => {
     const { logo } = props;
     const styles = useStyles();
+    // Sans logo, l'en-tête n'a plus rien à porter : le rendre laisserait un filet orphelin en
+    // haut de la barre. La variante mobile, elle, garde le sien : il porte la fermeture.
+    if (logo == null)
+        return null;
     return (_jsxs(Box, { tag: "sidebar-header", style: styles.header, children: [_jsx(Box, { style: styles.headerContent, children: _jsx(Box, { flex: 1, children: logo }) }), _jsx(Divider, {})] }));
 };
 const SidebarHeaderMobile = (props) => {
     const { controller } = props;
     const styles = useStyles();
     const { top } = useSafeAreaInsets();
-    return (_jsxs(Box, { tag: "sidebar-header", style: styles.header, children: [_jsxs(Box, { style: styles.headerContent, pt: (Platform.OS === 'android' ? top : 0) + styles.headerContent.padding, children: [_jsx(Box, { flex: 1 }), _jsx(ButtonIcon, { icon: "X", variant: "tertiary", onPress: () => controller?.setOpen(false) })] }), _jsx(Divider, {})] }));
+    return (_jsxs(Box, { tag: "sidebar-header", style: styles.header, children: [_jsxs(Box, { style: styles.headerContent, pt: (Platform.OS === 'android' ? top : 0) + styles.headerContent.padding, children: [_jsx(Box, { flex: 1 }), _jsx(ButtonIcon, { icon: "X", variant: "tertiary", accessibilityLabel: "Fermer le menu", onPress: () => controller?.setOpen(false) })] }), _jsx(Divider, {})] }));
 };
 export const SidebarHeader = (props) => {
     const { isVariant } = useTheme();

package/dist/ui/Sidebar/SidebarItem.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { AProps } from '../../core';
-import { LucideIconProps } from '../LucideIcon';
+import { AProps } from '../../core/A';
+import { Leading } from '../Leading';
 export type SidebarItemNavigable = {
     pressable?: undefined;
     title: string;
-    icon?: LucideIconProps['name'];
+    leading?: Leading;
     href: AProps['href'];
     direction?: AProps['direction'];
     routeName?: string;
@@ -12,7 +12,7 @@ export type SidebarItemNavigable = {
 export type SidebarItemPressable = {
     pressable: true;
     title: string;
-    icon?: LucideIconProps['name'];
+    leading?: Leading;
     onPress: () => void;
 };
 export type SidebarItemProps = SidebarItemNavigable | SidebarItemPressable;

package/dist/ui/Sidebar/SidebarItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarItem.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAK,MAAM,EAAmB,MAAM,YAAY,CAAC;AACxD,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,oBAAoB,CAAC;AA0G3E,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAIlD,CAAC"}
+{"version":3,"file":"SidebarItem.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAK,MAAM,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAE,OAAO,EAAe,MAAM,YAAY,CAAC;AAGlD,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,oBAAoB,CAAC;AAoH3E,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAIlD,CAAC"}