@alveole/storybook 2.0.0-alpha.1 → 2.0.0-alpha.11

package/dist/components/BarreDeFiltres.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarreDeFiltres.d.ts","sourceRoot":"","sources":["../../src/components/BarreDeFiltres.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAKzC,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACpC,gBAAgB,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;IAC9C,YAAY,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;CACjE,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,GAAI,qFAQ5B,mBAAmB,sBA2CrB,CAAC"}
+{"version":3,"file":"BarreDeFiltres.d.ts","sourceRoot":"","sources":["../../src/components/BarreDeFiltres.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAKzC,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACpC,gBAAgB,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;IAC9C,YAAY,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;CACjE,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,GAAI,qFAQ5B,mBAAmB,sBAiDrB,CAAC"}

package/dist/components/BarreDeFiltres.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
 import React from 'react';
 import { Platform, ScrollView } from 'react-native';
 import { ALL_STORY_FLAGS } from '../utils';
@@ -13,12 +14,17 @@ import { SearchField } from './SearchField';
  * l'ecran n'a besoin de savoir quel menu est ouvert.
  */
 export const BarreDeFiltres = ({ recherche, onRecherche, tags, tagChoisi, onTag, indicateurChoisi, onIndicateur, }) => {
+    const { isVariant, spacingValue } = useTheme();
+    const marge = isVariant('mobile') ? spacingValue('3W') : 0;
     const [menuOuvert, setMenuOuvert] = React.useState(null);
     const deroule = (menu) => ({
         ouvert: menuOuvert === menu,
         onOuvrir: (ouvert) => setMenuOuvert(ouvert ? menu : null),
     });
-    return (_jsxs(ScrollView, { horizontal: true, nestedScrollEnabled: true, directionalLockEnabled: Platform.OS === 'ios', showsHorizontalScrollIndicator: false, contentContainerStyle: { flexDirection: 'row', gap: 8, alignItems: 'center' }, children: [_jsx(Box, { style: { minWidth: 200 }, children: _jsx(SearchField, { placeholder: "Button, Tabs, Card...", value: recherche, onChangeText: onRecherche, size: "sm" }) }), _jsx(FiltreDeroulant, { libelle: "Tags", options: tags.map(tag => ({ key: tag, label: tag })), choisi: tagChoisi, onChoisir: tag => {
+    return (_jsxs(ScrollView, { horizontal: true, nestedScrollEnabled: true, directionalLockEnabled: Platform.OS === 'ios', showsHorizontalScrollIndicator: false, 
+        // La zone défile jusqu'aux bords ; seuls le premier et le dernier contrôle
+        // gardent la marge de ScreenZone, à l'intérieur du contenu défilant.
+        style: { marginHorizontal: -marge, flexGrow: 0, flexShrink: 0 }, contentInsetAdjustmentBehavior: "never", contentContainerStyle: { flexDirection: 'row', gap: 8, alignItems: 'center', paddingHorizontal: marge }, children: [_jsx(Box, { style: { minWidth: 200 }, children: _jsx(SearchField, { placeholder: "Button, Tabs, Card...", value: recherche, onChangeText: onRecherche, size: "sm" }) }), _jsx(FiltreDeroulant, { libelle: "Tags", options: tags.map(tag => ({ key: tag, label: tag })), choisi: tagChoisi, onChoisir: tag => {
                     onTag(tag);
                     setMenuOuvert(null);
                 }, ...deroule('tags') }), _jsx(FiltreDeroulant, { libelle: "Indicateurs", options: ALL_STORY_FLAGS, choisi: indicateurChoisi, onChoisir: indicateur => {

package/dist/components/ExampleBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleBlock.d.ts","sourceRoot":"","sources":["../../src/components/ExampleBlock.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AA6F1B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,0FAA0F;IAC1F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kFAAkF;IAClF,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,2FAA2F;IAC3F,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,YAAY,GAAI,kCAA0C,iBAAiB,sBAkCvF,CAAC"}
+{"version":3,"file":"ExampleBlock.d.ts","sourceRoot":"","sources":["../../src/components/ExampleBlock.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AA8F1B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,0FAA0F;IAC1F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kFAAkF;IAClF,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,2FAA2F;IAC3F,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,YAAY,GAAI,kCAA0C,iBAAiB,sBAkCvF,CAAC"}

package/dist/components/ExampleBlock.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Box, Button, Highlight, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
 import React from 'react';
+import { Platform } from 'react-native';
 import { decouperSource } from '../storySource';
 /** Au delà, la source prend plus de place que ce qu'elle documente. */
 const LIGNES_VISIBLES = 12;
@@ -16,7 +17,7 @@ const PAS_DE_LA_TRAME = 16;
  */
 const Scene = ({ children, pleinEcran }) => {
     const { color } = useTheme();
-    return (_jsx(Box, { p: '150', style: {
+    return (_jsx(Box, { p: Platform.OS === 'web' ? '3W' : '1W', style: {
             backgroundColor: color.light.background['default-grey'],
             backgroundImage: `radial-gradient(circle, ${color.light.border['default-grey']} 1px, transparent 1px)`,
             backgroundSize: `${PAS_DE_LA_TRAME}px ${PAS_DE_LA_TRAME}px`,
@@ -40,8 +41,8 @@ const BarreDeSource = ({ onCopier }) => {
             justifyContent: 'space-between',
             // Les côtés s'alignent sur la colonne du code, qui est le contenu principal du bas
             // du bloc ; la hauteur reste au plus juste de ce que la barre porte.
-            paddingLeft: spacingValue('2W'),
-            paddingRight: spacingValue('2W'),
+            paddingLeft: spacingValue(Platform.OS === 'web' ? '2W' : '1W'),
+            paddingRight: spacingValue(Platform.OS === 'web' ? '2W' : '1W'),
             paddingTop: spacingValue('1W'),
             paddingBottom: spacingValue('1W'),
         }, children: [_jsx(Typography, { style: { ...text['Corps de texte'].XS.CapsBold, color: color.light.text['mention-grey'] }, children: "tsx" }), _jsx(Button, { title: "Copier", size: "sm", variant: "tertiary", leading: "Copy", onPress: onCopier })] }));

package/dist/components/ExemplesDeLaStory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExemplesDeLaStory.d.ts","sourceRoot":"","sources":["../../src/components/ExemplesDeLaStory.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAiB,eAAe,EAAE,MAAM,UAAU,CAAC;AAuEnE,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,8FAA8F;IAC9F,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,4FAA4F;AAC5F,eAAO,MAAM,iBAAiB,GAAI,8BAA8B,sBAAsB,gCAUrF,CAAC"}
+{"version":3,"file":"ExemplesDeLaStory.d.ts","sourceRoot":"","sources":["../../src/components/ExemplesDeLaStory.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAiB,eAAe,EAAE,MAAM,UAAU,CAAC;AAiEnE,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,8FAA8F;IAC9F,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,4FAA4F;AAC5F,eAAO,MAAM,iBAAiB,GAAI,8BAA8B,sBAAsB,gCAUrF,CAAC"}

package/dist/components/ExemplesDeLaStory.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AnchorHeading, Box, MarkdownDescription, Tag, Typography } from '@alveole/components';
-import { FOCUS_ATTRIBUTE, useTheme } from '@alveole/theme';
+import { A, AnchorHeading, Box, MarkdownDescription, Tag, Typography } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
 import { descriptionDeLExemple, sourceDeLExemple } from '../screens/sourcesDExemples';
 import { getStoryFlags } from '../utils';
 import { ExampleBlock } from './ExampleBlock';
@@ -21,7 +21,7 @@ const UnExemple = ({ story, nom, Rendu, gabarit }) => {
  */
 const StatutDeLaFiche = ({ meta }) => {
     const { color, text } = useTheme();
-    return (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: [meta.tags.map(tag => (_jsx(Tag, { size: "md", children: tag }, tag))), getStoryFlags(meta).map(flag => (_jsx(Tag, { size: "md", children: flag.label }, flag.key)))] }), meta.figmaURL ? (_jsx("a", { href: meta.figmaURL, rel: "noreferrer", style: { textDecoration: 'none' }, target: "_blank", [FOCUS_ATTRIBUTE]: 'ring', children: _jsx(Typography, { style: { ...text['Corps de texte'].SM.Bold, color: color.light.text['action-high-primary'] }, children: "Ouvrir Figma" }) })) : null] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: [meta.tags.map(tag => (_jsx(Tag, { size: "md", children: tag }, tag))), getStoryFlags(meta).map(flag => (_jsx(Tag, { size: "md", children: flag.label }, flag.key)))] }), meta.figmaURL ? (_jsx(A, { href: meta.figmaURL, target: "_blank", children: _jsx(Typography, { style: { ...text['Corps de texte'].SM.Bold, color: color.light.text['action-high-primary'] }, children: "Ouvrir Figma" }) })) : null] }));
 };
 /** Les demonstrations d'une fiche, les unes sous les autres, sous le statut de la fiche. */
 export const ExemplesDeLaStory = ({ story, exemples, gabarit }) => (_jsxs(Box, { display: "flex", gap: 40, mt: '5W', children: [_jsx(StatutDeLaFiche, { meta: story.default }), exemples.map(([nom, Rendu]) => (_jsx(UnExemple, { story: story, nom: nom, Rendu: Rendu, gabarit: gabarit }, nom)))] }));

package/dist/components/StorySummary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StorySummary.d.ts","sourceRoot":"","sources":["../../src/components/StorySummary.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,6EAA6E;IAC7E,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,CAAC;AAEF,wFAAwF;AACxF,eAAO,MAAM,YAAY,GAAI,aAAa,iBAAiB,gCA0B1D,CAAC"}
+{"version":3,"file":"StorySummary.d.ts","sourceRoot":"","sources":["../../src/components/StorySummary.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,6EAA6E;IAC7E,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,CAAC;AAEF,wFAAwF;AACxF,eAAO,MAAM,YAAY,GAAI,aAAa,iBAAiB,gCAqB1D,CAAC"}

package/dist/components/StorySummary.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, toSlug, Typography } from '@alveole/components';
 import { FOCUS_ATTRIBUTE, useTheme } from '@alveole/theme';
+import { styleDuLienBrut } from './styleDuLienBrut';
 /** Le sommaire d'une page : une entrée par section, vers l'ancre que pose son titre. */
 export const StorySummary = ({ entrees }) => {
     const { color, text } = useTheme();
-    return (_jsxs(Box, { display: "flex", gap: 8, children: [_jsx(Typography, { style: { ...text['Corps de texte'].XS.CapsBold, color: color.light.text['mention-grey'] }, children: "Sur cette page" }), entrees.map(entree => (_jsx("a", { href: `#${toSlug(entree)}`, style: { textDecoration: 'none' }, [FOCUS_ATTRIBUTE]: 'ring', children: _jsx(Typography, { style: { ...text['Corps de texte'].SM.Regular, color: color.light.text['default-grey'] }, children: entree }) }, entree)))] }));
+    return (_jsxs(Box, { display: "flex", gap: 8, children: [_jsx(Typography, { style: { ...text['Corps de texte'].XS.CapsBold, color: color.light.text['mention-grey'] }, children: "Sur cette page" }), entrees.map(entree => (_jsx("a", { href: `#${toSlug(entree)}`, style: styleDuLienBrut, [FOCUS_ATTRIBUTE]: 'ring', children: _jsx(Typography, { style: { ...text['Corps de texte'].SM.Regular, color: color.light.text['default-grey'] }, children: entree }) }, entree)))] }));
 };

package/dist/components/UIKitTopBar.d.ts

@@ -10,6 +10,7 @@ export type UIKitTopBarItem = {
 export type UIKitTopBarProps = {
     activeKey: string;
     items: UIKitTopBarItem[];
+    logo?: React.ReactNode;
     /**
      * Niveau 2 de la rubrique courante. Sur desktop il est rendu par la colonne ; sous 992px
      * la colonne se replie et son contenu descend ici, pour que le menu de la barre reste la
@@ -17,5 +18,5 @@ export type UIKitTopBarProps = {
      */
     columnGroups?: UIKitColumnGroup[];
 };
-export declare const UIKitTopBar: ({ activeKey, items, columnGroups }: UIKitTopBarProps) => React.JSX.Element;
+export declare const UIKitTopBar: ({ activeKey, items, columnGroups, logo }: UIKitTopBarProps) => React.JSX.Element;
 //# sourceMappingURL=UIKitTopBar.d.ts.map

package/dist/components/UIKitTopBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UIKitTopBar.d.ts","sourceRoot":"","sources":["../../src/components/UIKitTopBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAA2E,MAAM,qBAAqB,CAAC;AAEjH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC,CAAC;AAwJF,eAAO,MAAM,WAAW,GAAI,oCAAyC,gBAAgB,sBAgBpF,CAAC"}
+{"version":3,"file":"UIKitTopBar.d.ts","sourceRoot":"","sources":["../../src/components/UIKitTopBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAA2E,MAAM,qBAAqB,CAAC;AAGjH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC,CAAC;AAsJF,eAAO,MAAM,WAAW,GAAI,0CAAsD,gBAAgB,sBAkBjG,CAAC"}

package/dist/components/UIKitTopBar.js

@@ -1,20 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { A, Box, Divider, Header, LucideIcon, SidebarGroup, SidebarItem, Typography } from '@alveole/components';
 import { makeStyles, useTheme } from '@alveole/theme';
+import { usePathname } from 'expo-router';
 import React from 'react';
-import { Pressable } from 'react-native';
-const AlveoleLogo = () => {
-    const { color, radius, text } = useTheme();
-    return (_jsx(Box, { style: {
-            width: 32,
-            height: 32,
-            borderRadius: radius('md'),
-            backgroundColor: color.light.background['action-high-primary'],
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-        }, children: _jsx(Typography, { style: { ...text['Corps de texte'].XS.Bold, color: '#fff' }, children: "A" }) }));
-};
+import { Platform, Pressable, ScrollView, useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 const useNavItemStyles = makeStyles(({ color, radius, spacingValue, text }) => {
     const activeLabelTypography = text['Corps de texte'].MD.Medium;
     return {
@@ -60,43 +50,39 @@ const useNavItemStyles = makeStyles(({ color, radius, spacingValue, text }) => {
  */
 const NavItem = ({ label, href, current, block = false }) => {
     const styles = useNavItemStyles();
-    return (_jsxs(A, { href: href, direction: "replace", ariaCurrent: current ? 'page' : undefined, style: { ...styles.container, alignItems: block ? 'flex-start' : 'center' }, hoverStyle: styles.containerHover, children: [_jsx(Typography, { style: current ? styles.labelCurrent : styles.label, children: label }), _jsx(Box, { "aria-hidden": true, children: _jsx(Typography, { style: styles.labelGhost, children: label }) })] }));
+    return (_jsxs(A, { href: href, direction: "replace", ariaCurrent: current ? 'page' : undefined, style: { ...styles.container, alignItems: block ? 'flex-start' : 'center' }, backgroundColor: { hover: styles.containerHover.backgroundColor }, children: [_jsx(Typography, { style: current ? styles.labelCurrent : styles.label, children: label }), _jsx(Box, { "aria-hidden": true, children: _jsx(Typography, { style: styles.labelGhost, children: label }) })] }));
 };
-/**
- * La barre en version mobile : un menu qui se deplie sous l'entete. L'etat d'ouverture vit ici,
- * avec le seul rendu qui s'en sert, plutot que dans la barre qui n'en a pas besoin autrement.
- */
-const BarreMobile = ({ activeKey, items, columnGroups }) => {
-    const { color, spacing } = useTheme();
-    // Les items sont des ancres : la navigation ne passe plus par un callback qui pourrait
-    // refermer le menu au clic. On retient donc la page pour laquelle le menu a été ouvert,
-    // et il se referme de lui-même dès qu'on arrive ailleurs, sans effet de synchronisation.
-    const [openedFor, setOpenedFor] = React.useState(null);
-    const menuOpen = openedFor === activeKey;
-    const toggleMenu = () => setOpenedFor(menuOpen ? null : activeKey);
-    return (_jsxs(_Fragment, { children: [_jsx(Header, { logo: _jsx(AlveoleLogo, {}), right: _jsx(Pressable, { accessibilityRole: "button", onPress: toggleMenu, style: { padding: 8 }, children: _jsx(LucideIcon, { name: menuOpen ? 'X' : 'Menu', size: "md", color: color.light.text['title-grey'] }) }) }), menuOpen && (_jsxs(Box, { style: {
-                    position: 'sticky',
-                    top: 64,
+const MobileMenuItems = ({ activeKey, items, columnGroups }) => (_jsxs(_Fragment, { children: [items.map(({ key, ...item }) => (_jsx(NavItem, { ...item, current: activeKey === key, block: true }, key))), columnGroups.length > 0 && _jsx(Divider, {}), columnGroups.map(group => (_jsx(SidebarGroup, { title: group.title, children: group.items.map(item => (_jsx(SidebarItem, { title: item.title, href: item.href }, item.key))) }, group.title)))] }));
+/** La barre mobile garde sa commande visible et fait défiler le menu sous celle-ci. */
+const BarreMobile = ({ activeKey, items, columnGroups, logo }) => {
+    const { color, spacingValue } = useTheme();
+    const { height } = useWindowDimensions();
+    const { top, bottom } = useSafeAreaInsets();
+    const [barHeight, setBarHeight] = React.useState(0);
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    const toggleMenu = () => setMenuOpen(open => !open);
+    // En natif, le menu remplit le bas de l'écran, zone de l'indicateur d'accueil comprise.
+    const menuHeight = Math.max(0, height - top - barHeight - (Platform.OS === 'web' ? bottom : 0));
+    const header = (_jsx(Header, { logo: logo, right: _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: menuOpen ? 'Fermer le menu' : 'Ouvrir le menu', accessibilityState: { expanded: menuOpen }, onPress: toggleMenu, style: { padding: 8 }, children: _jsx(LucideIcon, { name: menuOpen ? 'X' : 'Menu', size: "md", color: color.light.text['title-grey'] }) }) }));
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { style: { position: Platform.OS === 'web' ? 'sticky' : 'relative', top: 0, zIndex: 100, flexShrink: 0 }, onLayout: event => setBarHeight(event.nativeEvent.layout.height), children: header }), menuOpen && (_jsx(Box, { style: {
+                    position: Platform.OS === 'web' ? 'sticky' : 'relative',
+                    top: Platform.OS === 'web' ? 64 : 0,
                     left: 0,
                     right: 0,
                     zIndex: 99,
                     backgroundColor: color.light.background['default-grey'],
                     borderBottomWidth: 1,
                     borderBottomColor: color.light.border['default-grey'],
-                    paddingTop: spacing('2W'),
-                    paddingBottom: spacing('2W'),
-                    paddingLeft: spacing('2W'),
-                    paddingRight: spacing('2W'),
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: spacing('050'),
-                }, children: [items.map(({ key, ...item }) => (_jsx(NavItem, { ...item, current: activeKey === key, block: true }, key))), columnGroups.length > 0 && _jsx(Divider, {}), columnGroups.map(group => (_jsx(SidebarGroup, { title: group.title, children: group.items.map(item => (_jsx(SidebarItem, { title: item.title, href: item.href }, item.key))) }, group.title)))] }))] }));
+                    flexShrink: 0,
+                }, children: _jsx(ScrollView, { style: { ...(Platform.OS === 'web' ? { maxHeight: menuHeight } : { height: menuHeight }), flexGrow: 0 }, contentContainerStyle: { padding: spacingValue('2W'), gap: spacingValue('050') }, keyboardShouldPersistTaps: "handled", children: _jsx(MobileMenuItems, { activeKey: activeKey, items: items, columnGroups: columnGroups }) }) }))] }));
 };
-export const UIKitTopBar = ({ activeKey, items, columnGroups = [] }) => {
+export const UIKitTopBar = ({ activeKey, items, columnGroups = [], logo = null }) => {
     const { isVariant } = useTheme();
+    const pathname = usePathname();
     if (isVariant('mobile')) {
-        return _jsx(BarreMobile, { activeKey: activeKey, items: items, columnGroups: columnGroups });
+        // Toute nouvelle fiche repart avec un menu fermé, y compris dans la même rubrique.
+        return _jsx(BarreMobile, { activeKey: activeKey, items: items, columnGroups: columnGroups, logo: logo }, pathname);
     }
     const right = (_jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: items.map(({ key, ...item }) => (_jsx(NavItem, { ...item, current: activeKey === key }, key))) }));
-    return _jsx(Header, { logo: _jsx(AlveoleLogo, {}), title: "Alveole UI Kit", right: right });
+    return _jsx(Header, { logo: logo, title: "Alveole UI Kit", right: right });
 };

package/dist/components/styleDuLienBrut.d.ts

@@ -0,0 +1,9 @@
+import type { CSSProperties } from 'react';
+/**
+ * Le style d'un `<a>` brut du catalogue qui enveloppe un libellé. En flex, le libellé devient
+ * un bloc à sa propre hauteur de ligne : sinon le lien garde celle de la police que Tamagui v2
+ * remet sur chaque vue, plus haute, et décale son libellé. En colonne, le libellé s'étire à la
+ * largeur du lien et passe à la ligne, là où une rangée le laissait déborder.
+ */
+export declare const styleDuLienBrut: CSSProperties;
+//# sourceMappingURL=styleDuLienBrut.d.ts.map

package/dist/components/styleDuLienBrut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleDuLienBrut.d.ts","sourceRoot":"","sources":["../../src/components/styleDuLienBrut.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;;GAKG;AACH,eAAO,MAAM,eAAe,EAAE,aAAoF,CAAC"}

package/dist/components/styleDuLienBrut.js

@@ -0,0 +1,7 @@
+/**
+ * Le style d'un `<a>` brut du catalogue qui enveloppe un libellé. En flex, le libellé devient
+ * un bloc à sa propre hauteur de ligne : sinon le lien garde celle de la police que Tamagui v2
+ * remet sur chaque vue, plus haute, et décale son libellé. En colonne, le libellé s'étire à la
+ * largeur du lien et passe à la ligne, là où une rangée le laissait déborder.
+ */
+export const styleDuLienBrut = { display: 'flex', flexDirection: 'column', textDecoration: 'none' };

package/dist/pages/migrationV2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"migrationV2.d.ts","sourceRoot":"","sources":["../../src/pages/migrationV2.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,4BAA4B,gfAKV,CAAC;AAEhC,eAAO,MAAM,wBAAwB,EAAE,SAAS,kBAAkB,EA6lBjE,CAAC"}
+{"version":3,"file":"migrationV2.d.ts","sourceRoot":"","sources":["../../src/pages/migrationV2.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,4BAA4B,gfAKV,CAAC;AAEhC,eAAO,MAAM,wBAAwB,EAAE,SAAS,kBAAkB,EAopBjE,CAAC"}

package/dist/pages/migrationV2.js

@@ -471,7 +471,7 @@ de la liste : \`options={[...selectedOption ? [selectedOption] : [], ...suggesti
     },
     {
         titre: '5. Icônes → leading / trailing',
-        markdown: `Détail et justification : [leading-trailing.md](https://github.com/Captive-Studio/alveole-js/blob/main/docs/migrations/leading-trailing.md).
+        markdown: `Détail et justification : [leading-trailing.md](https://github.com/captive-studio/alveole-js/blob/main/docs/migrations/leading-trailing.md).
 
 \`\`\`bash
 git grep -nE "startIcon|endIcon|\\bicon[=:]"
@@ -597,7 +597,62 @@ Les clés de spacing dépréciées existent toujours (non cassant) mais leurs us
 l'échelle V/W quand on y passe.`,
     },
     {
-        titre: '8. Vérification finale',
+        titre: '8. Tamagui v2',
+        markdown: `Détail, changements de rendu et relevé par application : [tamagui-v2.md](https://github.com/captive-studio/alveole-js/blob/main/docs/migrations/tamagui-v2.md).
+
+Alveole 2.0 exige Tamagui 3 (section 8 bis) : une application en Tamagui 1 fait d'abord ce saut
+vers la v2, puis celui vers la v3, dans cet ordre. Monter **tous** les paquets \`tamagui\` /
+\`@tamagui/*\` de l'application au même numéro exact, et aligner la clé \`allowScripts\` sur la
+version des paquets \`@alveole/*\` (version unique, ADR 0029).
+
+\`\`\`bash
+git grep -nE "[^a-zA-Z]animation=|onHover(In|Out)|disablePassBorderRadius"
+\`\`\`
+
+| Avant                                                   | Après                             |
+| ------------------------------------------------------- | --------------------------------- |
+| \`animation="…"\` sur un composant Tamagui                | \`transition="…"\`                  |
+| \`onHoverIn\` / \`onHoverOut\` sur Tamagui ou \`Box\`         | \`onMouseEnter\` / \`onMouseLeave\`   |
+| \`disablePassBorderRadius\`                               | retirer                           |
+| \`dataSet\` sur un composant Tamagui                      | attribut direct \`data-x="…"\`      |
+
+\`onHoverIn\` reste valable sur un \`Pressable\` React Native. Ne change pas : \`tag\` de \`Box\` et
+\`Typography\`, et les éléments DOM rendus (un sélecteur CSS sur \`data-table\` reste valable).
+
+Changements de rendu, invisibles au typecheck et en jsdom :
+
+- **chaque vue reprend la police de l'app**, hauteur de ligne comprise : un style de texte posé sur
+  une vue ne descend plus aux enfants, et un texte sans hauteur de ligne prend celle de la config
+  (23 px en \`@tamagui/config\` v3). Les \`Typography\` d'Alveole posent \`normal\` par défaut ;
+- **plus de \`position: relative\` par défaut** : poser \`position: 'relative'\` sur le conteneur d'un
+  enfant absolu, ou \`settings.defaultPosition: 'relative'\` ;
+- **\`flex: 1\` devient \`1 1 0px\`** sur le web : \`flexGrow: 1\`, ou \`settings.styleCompat: 'legacy'\` ;
+- \`Image\` rend un vrai \`<img>\` (\`alt\` exigé) ; \`Switch\` ne compte plus padding ni bordure.`,
+    },
+    {
+        titre: '8 bis. Tamagui v3',
+        markdown: `Détail, changements de rendu et relevé par application : [tamagui-v3.md](https://github.com/captive-studio/alveole-js/blob/main/docs/migrations/tamagui-v3.md).
+
+Les peer dependencies Tamagui d'Alveole sont en \`^3.0.0\` seul.
+
+- **config** : \`@tamagui/config/v3\` et \`/v4\` n'existent plus ; passer à \`@tamagui/config/v5\` avec
+  les animations de \`@tamagui/config/v5-css\` ;
+- **\`SafeAreaProvider\`** enveloppe \`TamaguiProvider\`, tests compris ;
+- **\`@tamagui/babel-plugin\`** n'a pas de version 3 : le retirer de \`package.json\` et de
+  \`babel.config.js\` ;
+- **pseudo-états en clauses** : \`hoverStyle\` et ses voisins disparaissent, de \`Box\` et
+  \`Typography\` aussi (ADR 0031). La valeur de repos et sa clause vivent sur la même prop :
+  \`backgroundColor={{ default: repos, hover: survol }}\`, propriété sortie de \`style\`.
+
+\`\`\`bash
+git grep -nwE "hoverStyle|pressStyle|focusStyle|focusVisibleStyle|enterStyle|exitStyle|disabledStyle"
+\`\`\`
+
+Ce qu'Alveole ne prend pas en charge suit le guide officiel :
+[How to upgrade](https://tamagui.dev/docs/guides/how-to-upgrade).`,
+    },
+    {
+        titre: '9. Vérification finale',
         markdown: `\`\`\`bash
 git grep -nE "\\b(TextField|TextareaField|EmailField|EmailInput|PasswordField|PhoneField|PhoneInput|NumberField|OtpField|FileField|SelectMultiple|Autocomplete\\w*|NativePicker|SelectInput)\\b|startIcon|endIcon|variant=['\\"]link['\\"]|size=['\\"]xs['\\"]|noPadding|borderNone|leftAlign|\\boptional(Text)?[=:]|onActions|actionsIcon|<Tag\\b[^>]*\\bcolor=|Inter-|Barlow-"
 \`\`\`

package/dist/screens/ThemeTypographyScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeTypographyScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemeTypographyScreen.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,0BAA0B,GAAG;IACvC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAwGF,eAAO,MAAM,qBAAqB,GAAI,4EAOnC,0BAA0B,gCAqC5B,CAAC"}
+{"version":3,"file":"ThemeTypographyScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemeTypographyScreen.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,0BAA0B,GAAG;IACvC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAwGF,eAAO,MAAM,qBAAqB,GAAI,4EAOnC,0BAA0B,gCAqC5B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/storybook",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.11",
   "description": "Catalog screens and helpers for Alveole stories and theme tokens.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,8 +20,8 @@
   "devDependencies": {
     "@alveole/eslint-config": "file:../eslint-config",
     "@testing-library/react": "16.3.3",
-    "babel-preset-expo": "57.0.14",
-    "eslint": "10.10.0",
+    "babel-preset-expo": "57.0.16",
+    "eslint": "10.13.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "30.5.2",
     "jest-expo": "57.0.5",
@@ -29,7 +29,7 @@
     "react-dom": "19.2.3",
     "react-native": "0.86.3",
     "react-native-web": "0.21.4",
-    "tamagui": "1.144.4"
+    "tamagui": "3.0.18"
   },
   "peerDependencies": {
     "@alveole/components": "*",