@alveole/components 1.10.0 → 2.0.0-alpha

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

@@ -1 +1 @@
-{"version":3,"file":"ActionMenu.d.ts","sourceRoot":"","sources":["../../../src/ui/ActionMenu/ActionMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,OAAO,EAAW,YAAY,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,MAAM,MAAM,eAAe,GAAG,QAAQ,GACpC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEJ,QAAA,MAAM,cAAc,GAAI,OAAO,eAAe,gCAU7C,CAAC;AAEF,KAAK,2BAA2B,GAAG,OAAO,cAAc,GAAG;IACzD,IAAI,EAAE,OAAO,cAAc,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,2BAEvB,CAAC"}
+{"version":3,"file":"ActionMenu.d.ts","sourceRoot":"","sources":["../../../src/ui/ActionMenu/ActionMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAW,YAAY,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,MAAM,MAAM,eAAe,GAAG,QAAQ,GACpC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEJ,QAAA,MAAM,cAAc,GAAI,OAAO,eAAe,gCAU7C,CAAC;AAEF,KAAK,2BAA2B,GAAG,OAAO,cAAc,GAAG;IACzD,IAAI,EAAE,OAAO,cAAc,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,2BAEvB,CAAC"}

package/dist/ui/ActionMenu/ActionMenu.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
 import { Popover } from '../Popover';
 import { ActionMenuItem } from './ActionMenuItem';
 const ActionMenuBase = (props) => {

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

@@ -16,5 +16,11 @@ export default _default;
 export declare const Default: () => React.JSX.Element;
 export declare const Filters: () => React.JSX.Element;
 export declare const AvatarMenu: () => React.JSX.Element;
+/**
+ * `leading` accepte aussi un élément : ici un avatar par compte, pour passer de l'un à l'autre.
+ * L'avatar occupe l'emplacement de l'icône, si bien que les lignes gardent leur hauteur et
+ * restent alignées avec celles qui portent une icône.
+ */
+export declare const ChangerDeCompte: () => React.JSX.Element;
 export * as Sources from './ActionMenu.stories.sources';
 //# sourceMappingURL=ActionMenu.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ActionMenu.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ActionMenu/ActionMenu.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;AAQ1B,wBAWkB;AAElB,eAAO,MAAM,OAAO,yBAsCnB,CAAC;AAIF,eAAO,MAAM,OAAO,yBAqFnB,CAAC;AAEF,eAAO,MAAM,UAAU,yBA4BtB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"ActionMenu.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ActionMenu/ActionMenu.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;AAQ1B,wBAWkB;AAElB,eAAO,MAAM,OAAO,yBAsCnB,CAAC;AAsDF,eAAO,MAAM,OAAO,yBAsDnB,CAAC;AAEF,eAAO,MAAM,UAAU,yBA8BtB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,yBAW3B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}

package/dist/ui/ActionMenu/ActionMenu.stories.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTheme } from '@alveole/theme';
 import React from 'react';
 import { Platform, Pressable, ScrollView } from 'react-native';
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
 import { Avatar } from '../Avatar';
 import { Button } from '../Button';
 import { ActionMenu } from './ActionMenu';
@@ -32,7 +32,15 @@ export const Default = () => {
         'left-start',
         'left-end',
     ];
-    return (_jsx(Box, { display: "flex", flexWrap: "wrap", gap: "1W", flexDirection: "row", width: "100%", style: { justifyContent: 'center', alignItems: 'center' }, children: alignments.map(alignment => (_jsxs(ActionMenu, { placement: alignment, renderTrigger: () => _jsx(Button, { variant: "secondary", title: alignment }), children: [_jsx(ActionMenu.Item, { title: "Contenu de l'action menu", icon: "Settings", selected: true }), _jsx(ActionMenu.Item, { title: "Contenu de l'action menu", icon: "Copy" }), _jsx(ActionMenu.Item, { title: "Contenu de l'action menu", icon: "Trash" })] }, alignment))) }));
+    return (_jsx(Box, { display: "flex", flexWrap: "wrap", gap: "1W", flexDirection: "row", width: "100%", style: { justifyContent: 'center', alignItems: 'center' }, children: alignments.map(alignment => (_jsxs(ActionMenu, { placement: alignment, renderTrigger: () => _jsx(Button, { variant: "secondary", title: alignment }), children: [_jsx(ActionMenu.Item, { title: "Contenu de l'action menu", leading: "Settings", selected: true }), _jsx(ActionMenu.Item, { title: "Contenu de l'action menu", leading: "Copy" }), _jsx(ActionMenu.Item, { title: "Contenu de l'action menu", leading: "Trash" })] }, alignment))) }));
+};
+// Un menu de filtre isolé : il dérive son affichage (libellé du bouton, options cochées) de la
+// sélection reçue, sans connaître la forme du state parent. L'extraire de Filters évite de mêler
+// gestion d'état et rendu dans une même fonction et supprime la logique dupliquée entre options.
+const FilterMenu = ({ filter, isOpen, onOpenChange, selection, onToggle, }) => {
+    const selectedValues = Array.isArray(selection) ? selection : selection != null ? [selection] : [];
+    const hasSelection = selectedValues.length > 0;
+    return (_jsx(ActionMenu, { placement: "bottom-start", scrollable: false, open: isOpen, setOpen: onOpenChange, renderTrigger: () => (_jsx(Button, { variant: "secondary", title: filter.multi ? filter.title : (selectedValues[0] ?? filter.title), trailing: "ChevronDown", size: "sm", selected: hasSelection, expanded: isOpen })), children: filter.options.map(option => (_jsx(ActionMenu.Item, { title: option, selected: selectedValues.includes(option), onPress: () => onToggle(option) }, option))) }));
 };
 export const Filters = () => {
     const filters = [
@@ -48,44 +56,40 @@ export const Filters = () => {
     const [openId, setOpenId] = React.useState(null);
     const [singleSelected, setSingleSelected] = React.useState({});
     const [multiSelected, setMultiSelected] = React.useState({});
-    return (_jsx(ScrollView, { horizontal: true, nestedScrollEnabled: true, directionalLockEnabled: Platform.OS === 'ios', showsHorizontalScrollIndicator: false, contentContainerStyle: { flexDirection: 'row', gap: 8, paddingHorizontal: 16 }, children: filters.map(filter => {
-            const isOpen = openId === filter.id;
-            const hasSelection = filter.multi
-                ? (multiSelected[filter.id]?.length ?? 0) > 0
-                : singleSelected[filter.id] != null;
-            return (_jsx(ActionMenu, { placement: "bottom-start", scrollable: false, open: isOpen, setOpen: open => setOpenId(open ? filter.id : null), renderTrigger: () => (_jsx(Button, { variant: "secondary", title: filter.multi ? filter.title : (singleSelected[filter.id] ?? filter.title), endIcon: "ChevronDown", size: "sm", selected: hasSelection, active: isOpen })), children: filter.options.map(option => {
-                    const isSelected = filter.multi
-                        ? (multiSelected[filter.id] ?? []).includes(option)
-                        : singleSelected[filter.id] === option;
-                    return (_jsx(ActionMenu.Item, { title: option, selected: isSelected, onPress: () => {
-                            if (filter.multi) {
-                                setMultiSelected(prev => {
-                                    const current = prev[filter.id] ?? [];
-                                    return {
-                                        ...prev,
-                                        [filter.id]: current.includes(option)
-                                            ? current.filter(o => o !== option)
-                                            : [...current, option],
-                                    };
-                                });
-                            }
-                            else {
-                                setSingleSelected(prev => ({
-                                    ...prev,
-                                    [filter.id]: prev[filter.id] === option ? undefined : option,
-                                }));
-                                setOpenId(null);
-                            }
-                        } }, option));
-                }) }, filter.id));
-        }) }));
+    const toggle = (filter, option) => {
+        if (filter.multi) {
+            setMultiSelected(prev => {
+                const current = prev[filter.id] ?? [];
+                return {
+                    ...prev,
+                    [filter.id]: current.includes(option) ? current.filter(o => o !== option) : [...current, option],
+                };
+            });
+        }
+        else {
+            setSingleSelected(prev => ({
+                ...prev,
+                [filter.id]: prev[filter.id] === option ? undefined : option,
+            }));
+            setOpenId(null);
+        }
+    };
+    return (_jsx(ScrollView, { horizontal: true, nestedScrollEnabled: true, directionalLockEnabled: Platform.OS === 'ios', showsHorizontalScrollIndicator: false, contentContainerStyle: { flexDirection: 'row', gap: 8, paddingHorizontal: 16 }, children: filters.map(filter => (_jsx(FilterMenu, { filter: filter, isOpen: openId === filter.id, onOpenChange: open => setOpenId(open ? filter.id : null), selection: filter.multi ? multiSelected[filter.id] : singleSelected[filter.id], onToggle: option => toggle(filter, option) }, filter.id))) }));
 };
 export const AvatarMenu = () => {
     const { color, radius } = useTheme();
-    return (_jsx(Box, { style: { display: 'flex', alignItems: 'center', height: 200 }, children: _jsxs(ActionMenu, { placement: "bottom-end", renderTrigger: ({ open }) => (_jsx(Pressable, { style: {
+    return (_jsx(Box, { style: { display: 'flex', alignItems: 'center', height: 200 }, children: _jsxs(ActionMenu, { placement: "bottom-end", renderTrigger: ({ open }) => (_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Menu du compte", style: {
                     borderRadius: radius('sm'),
-                    outline: open ? `1px solid ${color.light.system.focus}` : 'none',
+                    outlineWidth: open ? 1 : 0,
+                    outlineStyle: 'solid',
+                    outlineColor: color.light.system.focus,
                     backgroundColor: open ? `${color.light.system.focus}1A` : 'transparent',
-                }, children: _jsx(Avatar, { size: "md", src: "https://www.loremfaces.net/96/id/1.jpg", fallbackText: "Cl\u00E9ment Prod'homme" }) })), children: [_jsx(ActionMenu.Item, { title: "Mon profil", icon: "User" }), _jsx(ActionMenu.Item, { title: "Param\u00E8tres", icon: "Settings" }), _jsx(ActionMenu.Item, { title: "Aide", icon: "Info" }), _jsx(ActionMenu.Item, { title: "D\u00E9connexion", icon: "LogOut" })] }) }));
+                }, children: _jsx(Avatar, { size: "md", src: "https://www.loremfaces.net/96/id/1.jpg", fallbackText: "Cl\u00E9ment Prod'homme" }) })), children: [_jsx(ActionMenu.Item, { title: "Mon profil", leading: "User" }), _jsx(ActionMenu.Item, { title: "Param\u00E8tres", leading: "Settings" }), _jsx(ActionMenu.Item, { title: "Aide", leading: "Info" }), _jsx(ActionMenu.Item, { title: "D\u00E9connexion", leading: "LogOut" })] }) }));
 };
+/**
+ * `leading` accepte aussi un élément : ici un avatar par compte, pour passer de l'un à l'autre.
+ * L'avatar occupe l'emplacement de l'icône, si bien que les lignes gardent leur hauteur et
+ * restent alignées avec celles qui portent une icône.
+ */
+export const ChangerDeCompte = () => (_jsx(Box, { display: "flex", flexDirection: "row", style: { justifyContent: 'center' }, children: _jsxs(ActionMenu, { placement: "bottom", renderTrigger: () => _jsx(Button, { variant: "tertiary", title: "Changer de compte", trailing: "ChevronDown" }), children: [_jsx(ActionMenu.Item, { title: "Marie Curie", leading: _jsx(Avatar, { size: "xs", fallbackText: "Marie Curie" }), selected: true }), _jsx(ActionMenu.Item, { title: "Pierre Curie", leading: _jsx(Avatar, { size: "xs", fallbackText: "Pierre Curie" }) }), _jsx(ActionMenu.Item, { title: "Ajouter un compte", leading: "Plus" })] }) }));
 export * as Sources from './ActionMenu.stories.sources';

package/dist/ui/ActionMenu/ActionMenu.stories.sources.d.ts

@@ -1,10 +1,13 @@
 export declare const Default: () => string;
 export declare const Filters: () => string;
 export declare const AvatarMenu: () => string;
+export declare const ChangerDeCompte: () => string;
 export declare const storySources: {
     readonly Default: () => string;
     readonly Filters: () => string;
     readonly AvatarMenu: () => string;
+    readonly ChangerDeCompte: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
+export declare const storyDescriptions: Partial<Record<StorySourceName, string>>;
 //# sourceMappingURL=ActionMenu.stories.sources.d.ts.map

package/dist/ui/ActionMenu/ActionMenu.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionMenu.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/ActionMenu/ActionMenu.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA6/B,CAAC;AAElhC,eAAO,MAAM,OAAO,cAAunG,CAAC;AAE5oG,eAAO,MAAM,UAAU,cAAoiC,CAAC;AAE5jC,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"ActionMenu.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/ActionMenu/ActionMenu.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAsgC,CAAC;AAE3hC,eAAO,MAAM,OAAO,cAA61D,CAAC;AAEl3D,eAAO,MAAM,UAAU,cAAupC,CAAC;AAE/qC,eAAO,MAAM,eAAe,cAA8nB,CAAC;AAE3pB,eAAO,MAAM,YAAY;;;;;CAKf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAEtE,CAAC"}

package/dist/ui/ActionMenu/ActionMenu.stories.sources.js

@@ -1,10 +1,15 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/ActionMenu/ActionMenu.stories.tsx
-export const Default = () => "export const Default = () => {\n  const alignments = [\n    'top',\n    'right',\n    'bottom',\n    'left',\n    'top-start',\n    'top-end',\n    'right-start',\n    'right-end',\n    'bottom-start',\n    'bottom-end',\n    'left-start',\n    'left-end',\n  ] as const;\n\n  return (\n    <Box\n      display=\"flex\"\n      flexWrap=\"wrap\"\n      gap=\"1W\"\n      flexDirection=\"row\"\n      width=\"100%\"\n      style={{ justifyContent: 'center', alignItems: 'center' }}\n    >\n      {alignments.map(alignment => (\n        <ActionMenu\n          key={alignment}\n          placement={alignment}\n          renderTrigger={() => <Button variant=\"secondary\" title={alignment} />}\n        >\n          <ActionMenu.Item title=\"Contenu de l'action menu\" icon=\"Settings\" selected />\n          <ActionMenu.Item title=\"Contenu de l'action menu\" icon=\"Copy\" />\n          <ActionMenu.Item title=\"Contenu de l'action menu\" icon=\"Trash\" />\n        </ActionMenu>\n      ))}\n    </Box>\n  );\n};";
-export const Filters = () => "export const Filters = () => {\n  const filters: { id: FilterId; title: string; options: string[]; multi?: boolean }[] = [\n    { id: 'epic', title: 'Epic', options: ['Refonte design', 'Onboarding', 'Facturation'] },\n    { id: 'type', title: 'Type', options: ['Bug', 'Story', 'Tâche'] },\n    {\n      id: 'filtresRapides',\n      title: 'Filtres rapides',\n      options: ['Assigné à moi', 'En cours', 'En retard'],\n      multi: true,\n    },\n  ];\n\n  const [openId, setOpenId] = React.useState<FilterId | null>(null);\n  const [singleSelected, setSingleSelected] = React.useState<Partial<Record<FilterId, string>>>({});\n  const [multiSelected, setMultiSelected] = React.useState<Partial<Record<FilterId, string[]>>>({});\n\n  return (\n    <ScrollView\n      horizontal\n      nestedScrollEnabled\n      directionalLockEnabled={Platform.OS === 'ios'}\n      showsHorizontalScrollIndicator={false}\n      contentContainerStyle={{ flexDirection: 'row', gap: 8, paddingHorizontal: 16 }}\n    >\n      {filters.map(filter => {\n        const isOpen = openId === filter.id;\n        const hasSelection = filter.multi\n          ? (multiSelected[filter.id]?.length ?? 0) > 0\n          : singleSelected[filter.id] != null;\n\n        return (\n          <ActionMenu\n            key={filter.id}\n            placement=\"bottom-start\"\n            scrollable={false}\n            open={isOpen}\n            setOpen={open => setOpenId(open ? filter.id : null)}\n            renderTrigger={() => (\n              <Button\n                variant=\"secondary\"\n                title={filter.multi ? filter.title : (singleSelected[filter.id] ?? filter.title)}\n                endIcon=\"ChevronDown\"\n                size=\"sm\"\n                selected={hasSelection}\n                active={isOpen}\n              />\n            )}\n          >\n            {filter.options.map(option => {\n              const isSelected = filter.multi\n                ? (multiSelected[filter.id] ?? []).includes(option)\n                : singleSelected[filter.id] === option;\n\n              return (\n                <ActionMenu.Item\n                  key={option}\n                  title={option}\n                  selected={isSelected}\n                  onPress={() => {\n                    if (filter.multi) {\n                      setMultiSelected(prev => {\n                        const current = prev[filter.id] ?? [];\n                        return {\n                          ...prev,\n                          [filter.id]: current.includes(option)\n                            ? current.filter(o => o !== option)\n                            : [...current, option],\n                        };\n                      });\n                    } else {\n                      setSingleSelected(prev => ({\n                        ...prev,\n                        [filter.id]: prev[filter.id] === option ? undefined : option,\n                      }));\n                      setOpenId(null);\n                    }\n                  }}\n                />\n              );\n            })}\n          </ActionMenu>\n        );\n      })}\n    </ScrollView>\n  );\n};";
-export const AvatarMenu = () => "export const AvatarMenu = () => {\n  const { color, radius } = useTheme();\n\n  return (\n    <Box style={{ display: 'flex', alignItems: 'center', height: 200 }}>\n      <ActionMenu\n        placement=\"bottom-end\"\n        renderTrigger={({ open }) => (\n          <Pressable\n            style={\n              {\n                borderRadius: radius('sm'),\n                outline: open ? `1px solid ${color.light.system.focus}` : 'none',\n                backgroundColor: open ? `${color.light.system.focus}1A` : 'transparent',\n              } as any\n            }\n          >\n            <Avatar size=\"md\" src=\"https://www.loremfaces.net/96/id/1.jpg\" fallbackText=\"Clément Prod'homme\" />\n          </Pressable>\n        )}\n      >\n        <ActionMenu.Item title=\"Mon profil\" icon=\"User\" />\n        <ActionMenu.Item title=\"Paramètres\" icon=\"Settings\" />\n        <ActionMenu.Item title=\"Aide\" icon=\"Info\" />\n        <ActionMenu.Item title=\"Déconnexion\" icon=\"LogOut\" />\n      </ActionMenu>\n    </Box>\n  );\n};";
+export const Default = () => "export const Default = () => {\n  const alignments = [\n    'top',\n    'right',\n    'bottom',\n    'left',\n    'top-start',\n    'top-end',\n    'right-start',\n    'right-end',\n    'bottom-start',\n    'bottom-end',\n    'left-start',\n    'left-end',\n  ] as const;\n\n  return (\n    <Box\n      display=\"flex\"\n      flexWrap=\"wrap\"\n      gap=\"1W\"\n      flexDirection=\"row\"\n      width=\"100%\"\n      style={{ justifyContent: 'center', alignItems: 'center' }}\n    >\n      {alignments.map(alignment => (\n        <ActionMenu\n          key={alignment}\n          placement={alignment}\n          renderTrigger={() => <Button variant=\"secondary\" title={alignment} />}\n        >\n          <ActionMenu.Item title=\"Contenu de l'action menu\" leading=\"Settings\" selected />\n          <ActionMenu.Item title=\"Contenu de l'action menu\" leading=\"Copy\" />\n          <ActionMenu.Item title=\"Contenu de l'action menu\" leading=\"Trash\" />\n        </ActionMenu>\n      ))}\n    </Box>\n  );\n};";
+export const Filters = () => "export const Filters = () => {\n  const filters: Filter[] = [\n    { id: 'epic', title: 'Epic', options: ['Refonte design', 'Onboarding', 'Facturation'] },\n    { id: 'type', title: 'Type', options: ['Bug', 'Story', 'Tâche'] },\n    {\n      id: 'filtresRapides',\n      title: 'Filtres rapides',\n      options: ['Assigné à moi', 'En cours', 'En retard'],\n      multi: true,\n    },\n  ];\n\n  const [openId, setOpenId] = React.useState<FilterId | null>(null);\n  const [singleSelected, setSingleSelected] = React.useState<Partial<Record<FilterId, string>>>({});\n  const [multiSelected, setMultiSelected] = React.useState<Partial<Record<FilterId, string[]>>>({});\n\n  const toggle = (filter: Filter, option: string) => {\n    if (filter.multi) {\n      setMultiSelected(prev => {\n        const current = prev[filter.id] ?? [];\n        return {\n          ...prev,\n          [filter.id]: current.includes(option) ? current.filter(o => o !== option) : [...current, option],\n        };\n      });\n    } else {\n      setSingleSelected(prev => ({\n        ...prev,\n        [filter.id]: prev[filter.id] === option ? undefined : option,\n      }));\n      setOpenId(null);\n    }\n  };\n\n  return (\n    <ScrollView\n      horizontal\n      nestedScrollEnabled\n      directionalLockEnabled={Platform.OS === 'ios'}\n      showsHorizontalScrollIndicator={false}\n      contentContainerStyle={{ flexDirection: 'row', gap: 8, paddingHorizontal: 16 }}\n    >\n      {filters.map(filter => (\n        <FilterMenu\n          key={filter.id}\n          filter={filter}\n          isOpen={openId === filter.id}\n          onOpenChange={open => setOpenId(open ? filter.id : null)}\n          selection={filter.multi ? multiSelected[filter.id] : singleSelected[filter.id]}\n          onToggle={option => toggle(filter, option)}\n        />\n      ))}\n    </ScrollView>\n  );\n};";
+export const AvatarMenu = () => "export const AvatarMenu = () => {\n  const { color, radius } = useTheme();\n\n  return (\n    <Box style={{ display: 'flex', alignItems: 'center', height: 200 }}>\n      <ActionMenu\n        placement=\"bottom-end\"\n        renderTrigger={({ open }) => (\n          <Pressable\n            accessibilityRole=\"button\"\n            accessibilityLabel=\"Menu du compte\"\n            style={{\n              borderRadius: radius('sm'),\n              outlineWidth: open ? 1 : 0,\n              outlineStyle: 'solid',\n              outlineColor: color.light.system.focus,\n              backgroundColor: open ? `${color.light.system.focus}1A` : 'transparent',\n            }}\n          >\n            <Avatar size=\"md\" src=\"https://www.loremfaces.net/96/id/1.jpg\" fallbackText=\"Clément Prod'homme\" />\n          </Pressable>\n        )}\n      >\n        <ActionMenu.Item title=\"Mon profil\" leading=\"User\" />\n        <ActionMenu.Item title=\"Paramètres\" leading=\"Settings\" />\n        <ActionMenu.Item title=\"Aide\" leading=\"Info\" />\n        <ActionMenu.Item title=\"Déconnexion\" leading=\"LogOut\" />\n      </ActionMenu>\n    </Box>\n  );\n};";
+export const ChangerDeCompte = () => "export const ChangerDeCompte = () => (\n  <Box display=\"flex\" flexDirection=\"row\" style={{ justifyContent: 'center' }}>\n    <ActionMenu\n      placement=\"bottom\"\n      renderTrigger={() => <Button variant=\"tertiary\" title=\"Changer de compte\" trailing=\"ChevronDown\" />}\n    >\n      <ActionMenu.Item title=\"Marie Curie\" leading={<Avatar size=\"xs\" fallbackText=\"Marie Curie\" />} selected />\n      <ActionMenu.Item title=\"Pierre Curie\" leading={<Avatar size=\"xs\" fallbackText=\"Pierre Curie\" />} />\n      <ActionMenu.Item title=\"Ajouter un compte\" leading=\"Plus\" />\n    </ActionMenu>\n  </Box>\n);";
 export const storySources = {
     Default,
     Filters,
     AvatarMenu,
+    ChangerDeCompte,
+};
+export const storyDescriptions = {
+    ChangerDeCompte: "`leading` accepte aussi un élément : ici un avatar par compte, pour passer de l'un à l'autre.\nL'avatar occupe l'emplacement de l'icône, si bien que les lignes gardent leur hauteur et\nrestent alignées avec celles qui portent une icône.",
 };

package/dist/ui/ActionMenu/ActionMenuItem.d.ts

@@ -1,8 +1,8 @@
-import { BoxProps } from '../../core';
-import { LucideIconProps } from '../LucideIcon';
+import { BoxProps } from '../../core/Box';
+import { Leading } from '../Leading';
 export type ActionMenuItemProps = Omit<BoxProps, 'children'> & {
     title: string;
-    icon?: LucideIconProps['name'];
+    leading?: Leading;
     onPress?: () => void;
     selected?: boolean;
 };

package/dist/ui/ActionMenu/ActionMenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionMenuItem.d.ts","sourceRoot":"","sources":["../../../src/ui/ActionMenu/ActionMenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AACvD,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAI5D,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,gCA2CxD,CAAC"}
+{"version":3,"file":"ActionMenuItem.d.ts","sourceRoot":"","sources":["../../../src/ui/ActionMenu/ActionMenuItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAe,MAAM,YAAY,CAAC;AAIlD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,gCA+CxD,CAAC"}

package/dist/ui/ActionMenu/ActionMenuItem.js

@@ -1,15 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Typography } from '../../core';
-import { LucideIcon } from '../LucideIcon';
+import { Pressable } from 'react-native';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { LeadingSlot } from '../Leading';
 import { useStyles } from '../Sidebar/Sidebar.styles';
 import { useStyles as useActionMenuItemStyles } from './ActionMenuItem.styles';
 export const ActionMenuItem = (props) => {
-    const { title, icon, onPress, selected = false, style, ...boxProps } = props;
+    const { title, leading, onPress, selected = false, style, ...boxProps } = props;
     const styles = useStyles();
     const actionMenuItemStyles = useActionMenuItemStyles();
     const itemStyleSelected = selected ? styles.sidebarItemSelectedDesktop : {};
     const titleStyleSelected = selected ? styles.sidebarItemTitleSelectedDesktop : {};
-    const sidebarItemHover = selected ? styles.sidebarItemCurrentHover : styles.sidebarItemHover;
     const sidebarItemTitleDesktop = selected ? styles.sidebarItemTitleCurrentHoverDesktop : {};
-    return (_jsx(Box, { tag: "action-menu-item", onPress: onPress, style: style, ...boxProps, children: _jsxs(Box, { style: { ...styles.sidebarItemContainerDesktop, ...actionMenuItemStyles.actionMenuItemContainerDesktop }, children: [selected && (_jsx(Box, { tag: "sidebar-item-indicator", style: styles.sidebarItemSelectedIndicator, children: _jsx(Box, { style: styles.sidebarItemSelectedIndicatorContent }) })), _jsxs(Box, { tag: "sidebar-item", style: { ...styles.sidebarItemDesktop, ...itemStyleSelected }, hoverStyle: { ...sidebarItemHover }, children: [icon && (_jsx(LucideIcon, { size: "md", name: icon, color: selected ? styles.sidebarItemTitleSelectedDesktop.color : styles.sidebarItemTitleSelectedDesktop.stroke })), _jsx(Typography, { style: { ...styles.sidebarItemTitleDesktop, ...titleStyleSelected }, hoverStyle: { ...sidebarItemTitleDesktop }, children: title })] })] }) }));
+    return (_jsx(Pressable, { accessibilityRole: "button", onPress: onPress, children: _jsx(Box, { tag: "action-menu-item", style: style, ...boxProps, children: _jsxs(Box, { style: { ...styles.sidebarItemContainerDesktop, ...actionMenuItemStyles.actionMenuItemContainerDesktop }, children: [selected && (_jsx(Box, { tag: "sidebar-item-indicator", style: styles.sidebarItemSelectedIndicator, children: _jsx(Box, { style: styles.sidebarItemSelectedIndicatorContent }) })), _jsxs(Box, { tag: "sidebar-item", style: { ...styles.sidebarItemDesktop, ...itemStyleSelected }, 
+                        // L'entrée sélectionnée se survole comme les autres. Lui réserver une teinte propre
+                        // n'ajoutait qu'un cas particulier, et celle qui était posée valait son fond de repos :
+                        // le survol ne produisait rien.
+                        hoverStyle: { ...styles.sidebarItemHover }, children: [_jsx(LeadingSlot, { contenu: leading, apparence: {
+                                    size: 'md',
+                                    color: selected
+                                        ? styles.sidebarItemTitleSelectedDesktop.color
+                                        : styles.sidebarItemTitleSelectedDesktop.stroke,
+                                } }), _jsx(Typography, { style: { ...styles.sidebarItemTitleDesktop, ...titleStyleSelected }, hoverStyle: { ...sidebarItemTitleDesktop }, children: title })] })] }) }) }));
 };

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;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AASF,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,gCA2BxC,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,gCA0CxC,CAAC"}

package/dist/ui/Avatar/Avatar.js

@@ -1,7 +1,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 { Typography } from '../../core/Typography';
 import { useStyles } from './Avatar.styles';
 const getInitials = (name) => {
     const words = name.trim().split(/\s+/);
@@ -23,5 +23,18 @@ export const Avatar = (props) => {
         lg: spacingValue('5W'),
         xl: spacingValue('8W'),
     };
-    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 })] }));
+    // Pas de prop `size` : Tamagui y lit une valeur qui est aussi une clé de jeton de taille
+    // ($0 à $20) comme ce jeton. `xs` (20) donnait $20, soit 284 px, et la photo débordait du
+    // cercle. Largeur et hauteur en pixels n'ont pas cette ambiguïté.
+    const px = avatarSize[size];
+    return (_jsxs(TamaguiAvatar, { style: {
+            width: px,
+            height: px,
+            minWidth: px,
+            maxWidth: px,
+            minHeight: px,
+            maxHeight: px,
+            ...(carre ? styles.carre : {}),
+            ...style,
+        }, circular: !carre, ...avatarProps, children: [_jsx(TamaguiAvatar.Image, { src: src, width: px, height: px }), _jsx(TamaguiAvatar.Fallback, { style: styles.fallback, children: _jsx(Typography, { style: styles.fallbackText, children: initials }) })] }));
 };

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

@@ -6,12 +6,14 @@ declare const _default: {
     description: string;
     component: (props: import("./Avatar").AvatarProps) => import("react").JSX.Element;
     styleFn: () => {
-        avatar: {
-            backgroundColor: string;
-        };
         carre: {
             borderRadius: import("@alveole/theme").Radius;
         };
+        fallback: {
+            backgroundColor: string;
+            alignItems: "center";
+            justifyContent: "center";
+        };
         fallbackText: {
             color: string;
             display: "flex";
@@ -23,7 +25,6 @@ declare const _default: {
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        image: {};
     };
 };
 export default _default;

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;AAUlB,eAAO,MAAM,KAAK,mCAQjB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAK5B,CAAC;AAEF,eAAO,MAAM,KAAK,mCAQjB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Avatar/Avatar.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAQkB;AAUlB,eAAO,MAAM,KAAK,mCAQjB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAK5B,CAAC;AAEF,eAAO,MAAM,KAAK,mCAQjB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,0BAA0B,CAAC"}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
 import { Avatar } from './Avatar';
 import { useStyles } from './Avatar.styles';
 export default {

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

@@ -1,10 +1,12 @@
 export declare const useStyles: () => {
-    avatar: {
-        backgroundColor: string;
-    };
     carre: {
         borderRadius: import("@alveole/theme").Radius;
     };
+    fallback: {
+        backgroundColor: string;
+        alignItems: "center";
+        justifyContent: "center";
+    };
     fallbackText: {
         color: string;
         display: "flex";
@@ -16,6 +18,5 @@ export declare const useStyles: () => {
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
-    image: {};
 };
 //# sourceMappingURL=Avatar.styles.d.ts.map

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;;;;;;;;;;;;;;;;;;;CAiBnB,CAAC"}
+{"version":3,"file":"Avatar.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Avatar/Avatar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAgBnB,CAAC"}

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

@@ -1,19 +1,18 @@
 import { makeStyles } from '@alveole/theme';
 export const useStyles = makeStyles(({ color, text, radius }) => ({
-    avatar: {
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
-        backgroundColor: color.dark.background['contrast-grey'],
-    },
     carre: {
         borderRadius: radius('md'),
     },
+    fallback: {
+        backgroundColor: color.dark.background['contrast-grey'],
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
     fallbackText: {
         ...text['Corps de texte'].MD.Medium,
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
         color: color.dark.text['default-grey'],
         display: 'flex',
         justifyContent: 'center',
         textAlign: 'center',
     },
-    image: {},
 }));

package/dist/ui/Badge/Badge.d.ts

@@ -1,7 +1,7 @@
 import { TypographyProps } from '../../core/Typography';
 import { LucideIconProps } from '../LucideIcon';
 export type BadgeProps = TypographyProps & {
-    variant: 'default' | 'info' | 'success' | 'error' | 'new' | 'warning' | 'disabled';
+    variant: 'default' | 'info' | 'success' | 'error' | 'new' | 'warning';
     size: 'sm' | 'md';
     icon?: LucideIconProps['name'];
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/ui/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG;IACzC,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;IACnF,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CAChC,CAAC;AACF,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,gCAsCtC,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/ui/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG;IACzC,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IACtE,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CAChC,CAAC;AACF,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,gCAoCtC,CAAC"}

package/dist/ui/Badge/Badge.js

@@ -21,8 +21,6 @@ export const Badge = (props) => {
                 return styles.badgeInfo;
             case 'new':
                 return styles.badgeNew;
-            case 'disabled':
-                return styles.badgeDisabled;
             default:
                 ((_) => { })(variant);
         }

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

@@ -38,10 +38,6 @@ declare const _default: {
             color: string;
             backgroundColor: string;
         };
-        badgeDisabled: {
-            color: string;
-            backgroundColor: string;
-        };
         badgeSm: {
             fontSize: 12;
             lineHeight: 20;
@@ -49,9 +45,10 @@ declare const _default: {
             textTransform: "uppercase";
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            paddingLeft: string | number;
-            paddingRight: string | number;
-            gap: string | number;
+            height: number;
+            paddingLeft: number;
+            paddingRight: number;
+            gap: number;
         };
         badgeMd: {
             fontSize: 14;
@@ -60,9 +57,10 @@ declare const _default: {
             textTransform: "uppercase";
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            paddingLeft: string | number;
-            paddingRight: string | number;
-            gap: string | number;
+            height: number;
+            paddingLeft: number;
+            paddingRight: number;
+            gap: number;
         };
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Badge/Badge.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAQkB;AAElB,eAAO,MAAM,QAAQ,mCA0BpB,CAAC;AAEF,eAAO,MAAM,KAAK,mCASjB,CAAC;AAEF,eAAO,MAAM,KAAK,mCAMjB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"Badge.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Badge/Badge.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAQkB;AAElB,eAAO,MAAM,QAAQ,mCAuBpB,CAAC;AAEF,eAAO,MAAM,KAAK,mCASjB,CAAC;AAEF,eAAO,MAAM,KAAK,mCAMjB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,yBAAyB,CAAC"}

package/dist/ui/Badge/Badge.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
 import { Badge } from './Badge';
 import { useStyles } from './Badge.styles';
 export default {
@@ -11,7 +11,7 @@ export default {
     component: Badge,
     styleFn: useStyles,
 };
-export const Variants = () => (_jsx(Box, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 4, children: [_jsx(Badge, { size: "md", variant: "default", children: "Badge default" }), _jsx(Badge, { size: "md", variant: "info", children: "Badge info" }), _jsx(Badge, { size: "md", variant: "error", children: "Badge error" }), _jsx(Badge, { size: "md", variant: "new", children: "Badge new" }), _jsx(Badge, { size: "md", variant: "success", children: "Badge success" }), _jsx(Badge, { size: "md", variant: "warning", children: "Badge warning" }), _jsx(Badge, { size: "md", variant: "disabled", children: "Badge disabled" })] }) }));
-export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, flexWrap: "wrap", children: [_jsx(Badge, { size: "sm", variant: "info", m: "auto", children: "Badge small" }), _jsx(Badge, { size: "md", variant: "info", children: "Badge medium" })] }));
-export const Icons = () => (_jsx(Box, { display: "flex", flexDirection: "row", gap: 4, flexWrap: "wrap", children: _jsx(Badge, { size: "sm", variant: "info", icon: "Check", children: "Badge small" }) }));
+export const Variants = () => (_jsx(Box, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(Badge, { size: "md", variant: "default", children: "Badge default" }), _jsx(Badge, { size: "md", variant: "info", children: "Badge info" }), _jsx(Badge, { size: "md", variant: "error", children: "Badge error" }), _jsx(Badge, { size: "md", variant: "new", children: "Badge new" }), _jsx(Badge, { size: "md", variant: "success", children: "Badge success" }), _jsx(Badge, { size: "md", variant: "warning", children: "Badge warning" })] }) }));
+export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, flexWrap: "wrap", children: [_jsx(Badge, { size: "sm", variant: "info", m: "auto", children: "Badge small" }), _jsx(Badge, { size: "md", variant: "info", children: "Badge medium" })] }));
+export const Icons = () => (_jsx(Box, { display: "flex", flexDirection: "row", gap: 24, flexWrap: "wrap", children: _jsx(Badge, { size: "sm", variant: "info", icon: "Check", children: "Badge small" }) }));
 export * as Sources from './Badge.stories.sources';

package/dist/ui/Badge/Badge.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Badge/Badge.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,cAAotB,CAAC;AAE1uB,eAAO,MAAM,KAAK,cAAiS,CAAC;AAEpT,eAAO,MAAM,KAAK,cAAyN,CAAC;AAE5O,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Badge.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Badge/Badge.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,cAA6nB,CAAC;AAEnpB,eAAO,MAAM,KAAK,cAAkS,CAAC;AAErT,eAAO,MAAM,KAAK,cAA0N,CAAC;AAE7O,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/Badge/Badge.stories.sources.js

@@ -1,8 +1,8 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Badge/Badge.stories.tsx
-export const Variants = () => "export const Variants = () => (\n  <Box>\n    <Box display=\"flex\" flexDirection=\"column\" gap={4}>\n      <Badge size=\"md\" variant=\"default\">\n        Badge default\n      </Badge>\n      <Badge size=\"md\" variant=\"info\">\n        Badge info\n      </Badge>\n      <Badge size=\"md\" variant=\"error\">\n        Badge error\n      </Badge>\n      <Badge size=\"md\" variant=\"new\">\n        Badge new\n      </Badge>\n      <Badge size=\"md\" variant=\"success\">\n        Badge success\n      </Badge>\n      <Badge size=\"md\" variant=\"warning\">\n        Badge warning\n      </Badge>\n      <Badge size=\"md\" variant=\"disabled\">\n        Badge disabled\n      </Badge>\n    </Box>\n  </Box>\n);";
-export const Sizes = () => "export const Sizes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={4} flexWrap=\"wrap\">\n    <Badge size=\"sm\" variant=\"info\" m=\"auto\">\n      Badge small\n    </Badge>\n    <Badge size=\"md\" variant=\"info\">\n      Badge medium\n    </Badge>\n  </Box>\n);";
-export const Icons = () => "export const Icons = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={4} flexWrap=\"wrap\">\n    <Badge size=\"sm\" variant=\"info\" icon=\"Check\">\n      Badge small\n    </Badge>\n  </Box>\n);";
+export const Variants = () => "export const Variants = () => (\n  <Box>\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <Badge size=\"md\" variant=\"default\">\n        Badge default\n      </Badge>\n      <Badge size=\"md\" variant=\"info\">\n        Badge info\n      </Badge>\n      <Badge size=\"md\" variant=\"error\">\n        Badge error\n      </Badge>\n      <Badge size=\"md\" variant=\"new\">\n        Badge new\n      </Badge>\n      <Badge size=\"md\" variant=\"success\">\n        Badge success\n      </Badge>\n      <Badge size=\"md\" variant=\"warning\">\n        Badge warning\n      </Badge>\n    </Box>\n  </Box>\n);";
+export const Sizes = () => "export const Sizes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={24} flexWrap=\"wrap\">\n    <Badge size=\"sm\" variant=\"info\" m=\"auto\">\n      Badge small\n    </Badge>\n    <Badge size=\"md\" variant=\"info\">\n      Badge medium\n    </Badge>\n  </Box>\n);";
+export const Icons = () => "export const Icons = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={24} flexWrap=\"wrap\">\n    <Badge size=\"sm\" variant=\"info\" icon=\"Check\">\n      Badge small\n    </Badge>\n  </Box>\n);";
 export const storySources = {
     Variants,
     Sizes,

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

@@ -31,10 +31,6 @@ export declare const useStyles: () => {
         color: string;
         backgroundColor: string;
     };
-    badgeDisabled: {
-        color: string;
-        backgroundColor: string;
-    };
     badgeSm: {
         fontSize: 12;
         lineHeight: 20;
@@ -42,9 +38,10 @@ export declare const useStyles: () => {
         textTransform: "uppercase";
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        paddingLeft: string | number;
-        paddingRight: string | number;
-        gap: string | number;
+        height: number;
+        paddingLeft: number;
+        paddingRight: number;
+        gap: number;
     };
     badgeMd: {
         fontSize: 14;
@@ -53,9 +50,10 @@ export declare const useStyles: () => {
         textTransform: "uppercase";
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        paddingLeft: string | number;
-        paddingRight: string | number;
-        gap: string | number;
+        height: number;
+        paddingLeft: number;
+        paddingRight: number;
+        gap: number;
     };
 };
 //# sourceMappingURL=Badge.styles.d.ts.map

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

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

package/dist/ui/Badge/Badge.styles.js

@@ -1,5 +1,5 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ radius, text, color, spacing }) => ({
+export const useStyles = makeStyles(({ radius, text, color, pill }) => ({
     badge: {
         borderRadius: radius('sm'),
         marginRight: 'auto',
@@ -33,21 +33,19 @@ export const useStyles = makeStyles(({ radius, text, color, spacing }) => ({
         color: color.light.text['default-grey'],
         backgroundColor: color.light.background['contrast-grey'],
     },
-    badgeDisabled: {
-        color: color.light.text['disabled-grey'],
-        backgroundColor: color.light.background['disabled-grey'],
-    },
     // Sizes
     badgeSm: {
-        paddingLeft: spacing('1,5V'),
-        paddingRight: spacing('1,5V'),
-        gap: spacing('1V'),
+        height: pill('sm').height,
+        paddingLeft: pill('sm').paddingInline,
+        paddingRight: pill('sm').paddingInline,
+        gap: pill('sm').gap,
         ...text['Corps de texte'].XS.CapsBold,
     },
     badgeMd: {
-        paddingLeft: spacing('1W'),
-        paddingRight: spacing('1W'),
-        gap: spacing('1V'),
+        height: pill('md').height,
+        paddingLeft: pill('md').paddingInline,
+        paddingRight: pill('md').paddingInline,
+        gap: pill('md').gap,
         ...text['Corps de texte'].SM.CapsBold,
     },
 }));

package/dist/ui/BottomSheet/BottomSheet.d.ts

@@ -12,6 +12,8 @@ export type BottomSheetProps = React.PropsWithChildren<{
     open: TamaguiSheetProps['open'];
     title: string;
     action?: React.ReactNode | undefined;
+    /** Remonte le sheet avec le clavier. Réservé aux sheets portant un champ de saisie. */
+    moveOnKeyboardChange?: boolean;
     setOpen: (value: boolean) => void;
 } & (BottomSheetWithoutPoints | BottomSheetWithPoints)>;
 export declare const BottomSheet: (props: BottomSheetProps) => React.JSX.Element;