@alveole/storybook 2.0.0-alpha.16 → 2.0.0-alpha.18

package/dist/components/ColorSwatch.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Typography, useToast } from '@alveole/components';
-import { useTheme } from '@alveole/theme';
+import { Spacings, useTheme } from '@alveole/theme';
 import { Pressable } from 'react-native';
 import { copier } from '../pressePapiers';
 /**
@@ -24,8 +24,8 @@ export const ColorSwatch = ({ entry }) => {
                 borderWidth: 1,
                 borderColor: color.light.border['default-grey'],
             }, children: [_jsx(Box, { style: { height: 56, backgroundColor: entry.value } }), _jsxs(Box, { style: {
-                        paddingHorizontal: 8,
-                        paddingVertical: 6,
+                        paddingHorizontal: Spacings['1W'],
+                        paddingVertical: Spacings['1,5V'],
                         backgroundColor: color.light.background['default-grey'],
                     }, children: [_jsx(Typography, { style: { fontSize: 11, fontWeight: '600', color: color.light.text['title-grey'], lineHeight: 14 }, numberOfLines: 1, children: tokenName }), _jsx(Typography, { style: {
                                 fontSize: 10,

package/dist/components/DocFooter.js

@@ -1,15 +1,15 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { ALVEOLE_COMPONENTS_VERSION, Box, Typography } from '@alveole/components';
-import { useTheme } from '@alveole/theme';
+import { Spacings, useTheme } from '@alveole/theme';
 export const DocFooter = () => {
     const { color, text } = useTheme();
     return (_jsx(Box, { tag: "footer", style: {
             borderTopWidth: 1,
             borderTopColor: color.light.border['default-grey'],
-            paddingTop: 12,
-            paddingBottom: 12,
-            paddingLeft: 24,
-            paddingRight: 24,
+            paddingTop: Spacings['3V'],
+            paddingBottom: Spacings['3V'],
+            paddingLeft: Spacings['3W'],
+            paddingRight: Spacings['3W'],
             display: 'flex',
             alignItems: 'center',
         }, children: _jsxs(Typography, { style: { ...text['Corps de texte'].XS.Regular, color: color.light.text['mention-grey'] }, children: ["Alveole UI Kit \u2014 v", ALVEOLE_COMPONENTS_VERSION] }) }));

package/dist/components/EcranDeCatalogue.js

@@ -11,6 +11,6 @@ export const filDuTheme = {
 };
 /** L'echafaudage d'un ecran du catalogue : la page, sa zone sur toute la grille, puis son titre. */
 export const EcranDeCatalogue = ({ title, description, sidebar, beforeContent, footerContent, breadcrumbsProps, sommaire, children, }) => {
-    const { grilles, spacingValue } = useTheme();
-    return (_jsx(Page, { scrollable: true, title: title, description: description, sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, children: sommaire ? (_jsx(StoryLayout, { sommaire: _jsx(StorySummary, { entrees: sommaire }), children: _jsxs(Box, { display: "flex", gap: spacingValue('6W'), children: [_jsx(PageTitle, { title: title, breadcrumbsProps: breadcrumbsProps }), children] }) })) : (_jsxs(ScreenZone, { largeur: grilles['12 colonnes'], children: [_jsx(PageTitle, { title: title, breadcrumbsProps: breadcrumbsProps }), children] })) }));
+    const { grilles } = useTheme();
+    return (_jsx(Page, { scrollable: true, title: title, description: description, sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, children: sommaire ? (_jsx(StoryLayout, { sommaire: _jsx(StorySummary, { entrees: sommaire }), children: _jsxs(Box, { display: "flex", gap: "6W", children: [_jsx(PageTitle, { title: title, breadcrumbsProps: breadcrumbsProps }), children] }) })) : (_jsxs(ScreenZone, { largeur: grilles['12 colonnes'], children: [_jsx(PageTitle, { title: title, breadcrumbsProps: breadcrumbsProps }), children] })) }));
 };

package/dist/components/EnTeteDeFiche.js

@@ -9,5 +9,5 @@ import { PageTitle } from './PageTitle';
  */
 export const EnTeteDeFiche = ({ meta }) => {
     const { color } = useTheme();
-    return (_jsxs(Box, { display: "flex", gap: 16, children: [_jsx(PageTitle, { title: meta.title }), _jsx(MarkdownDescription, { taille: "LG", color: color.light.text['mention-grey'], children: meta.description })] }));
+    return (_jsxs(Box, { display: "flex", gap: "2W", children: [_jsx(PageTitle, { title: meta.title }), _jsx(MarkdownDescription, { taille: "LG", color: color.light.text['mention-grey'], children: meta.description })] }));
 };

package/dist/components/ExampleBlock.js

@@ -61,7 +61,7 @@ const CommandeDeRepli = ({ deplie, onBascule }) => {
 };
 /** Le bloc d'exemple : une démonstration et sa source, dans un seul cadre. */
 export const ExampleBlock = ({ children, source, pleinEcran = false }) => {
-    const { color, radius } = useTheme();
+    const { color } = useTheme();
     const [deplie, setDeplie] = React.useState(false);
     const { visible, tronque } = decouperSource(source ?? '', LIGNES_VISIBLES);
     // La source entière, repliée ou non : copier un extrait tronqué donnerait du code qui ne
@@ -70,5 +70,5 @@ export const ExampleBlock = ({ children, source, pleinEcran = false }) => {
         if (source && typeof navigator !== 'undefined')
             navigator.clipboard?.writeText(source);
     };
-    return (_jsxs(Box, { borderColor: color.light.border['default-grey'], borderRadius: radius('md'), borderWidth: 1, style: { overflow: 'hidden' }, children: [_jsx(Scene, { pleinEcran: pleinEcran, children: children }), source ? (_jsxs(_Fragment, { children: [_jsx(BarreDeSource, { onCopier: copier }), _jsx(Highlight, { language: "tsx", variant: "embedded", children: deplie ? source : visible }), tronque ? _jsx(CommandeDeRepli, { deplie: deplie, onBascule: () => setDeplie(!deplie) }) : null] })) : null] }));
+    return (_jsxs(Box, { borderColor: color.light.border['default-grey'], borderRadius: "md", borderWidth: 1, style: { overflow: 'hidden' }, children: [_jsx(Scene, { pleinEcran: pleinEcran, children: children }), source ? (_jsxs(_Fragment, { children: [_jsx(BarreDeSource, { onCopier: copier }), _jsx(Highlight, { language: "tsx", variant: "embedded", children: deplie ? source : visible }), tronque ? _jsx(CommandeDeRepli, { deplie: deplie, onBascule: () => setDeplie(!deplie) }) : null] })) : null] }));
 };

package/dist/components/ExemplesDeLaStory.js

@@ -12,7 +12,7 @@ import { ExampleBlock } from './ExampleBlock';
 const UnExemple = ({ story, nom, Rendu, gabarit }) => {
     const { text } = useTheme();
     const description = descriptionDeLExemple(story, nom);
-    return (_jsxs(Box, { display: "flex", gap: 12, children: [!gabarit ? (_jsxs(Box, { display: "flex", gap: 6, children: [_jsx(AnchorHeading, { style: text.Titres['H5 - XS'], children: nom }), description ? _jsx(MarkdownDescription, { children: description }) : null] })) : null, _jsx(ExampleBlock, { source: sourceDeLExemple(story, nom), pleinEcran: gabarit, children: _jsx(Rendu, {}) })] }));
+    return (_jsxs(Box, { display: "flex", gap: "3V", children: [!gabarit ? (_jsxs(Box, { display: "flex", gap: "1,5V", children: [_jsx(AnchorHeading, { style: text.Titres['H5 - XS'], children: nom }), description ? _jsx(MarkdownDescription, { children: description }) : null] })) : null, _jsx(ExampleBlock, { source: sourceDeLExemple(story, nom), pleinEcran: gabarit, children: _jsx(Rendu, {}) })] }));
 };
 /**
  * Les tags et le lien Figma : ils documentent l'onglet Examples qu'on regarde, pas la fiche en
@@ -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, target: "_blank", 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: "1W", 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)))] }));
+export const ExemplesDeLaStory = ({ story, exemples, gabarit }) => (_jsxs(Box, { display: "flex", gap: "5W", 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/GrilleDeFiches.js

@@ -10,5 +10,5 @@ export const GrilleDeFiches = ({ groupes, largeurDeFiche, getStoryHref, messageV
     const { text } = useTheme();
     if (groupes.length === 0)
         return _jsx(Typography, { style: text['Corps de texte'].MD.Regular, children: messageVide });
-    return groupes.map(([tag, fiches]) => (_jsxs(Box, { display: "flex", gap: 16, children: [_jsx(Typography, { style: text.Titres['H4 - SM'], children: tag }), _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 16, children: fiches.map(fiche => (_jsx(Box, { style: { alignSelf: 'stretch', width: largeurDeFiche }, children: _jsx(StoryCard, { story: fiche, href: getStoryHref(fiche) }) }, fiche.default.title))) })] }, tag)));
+    return groupes.map(([tag, fiches]) => (_jsxs(Box, { display: "flex", gap: "2W", children: [_jsx(Typography, { style: text.Titres['H4 - SM'], children: tag }), _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: "2W", children: fiches.map(fiche => (_jsx(Box, { style: { alignSelf: 'stretch', width: largeurDeFiche }, children: _jsx(StoryCard, { story: fiche, href: getStoryHref(fiche) }) }, fiche.default.title))) })] }, tag)));
 };

package/dist/components/MenuCard.js

@@ -4,5 +4,5 @@ import { useTheme } from '@alveole/theme';
 /** Une entree de menu du kit : un titre, ce qu'on trouve derriere, et le moyen d'y aller. */
 export const MenuCard = ({ title, description, onPress }) => {
     const { text } = useTheme();
-    return (_jsx(Card, { onPress: onPress, children: _jsxs(Box, { display: "flex", gap: 8, p: '150', children: [_jsx(Typography, { style: text.Titres['H4 - SM'], children: title }), _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: description })] }) }));
+    return (_jsx(Card, { onPress: onPress, children: _jsxs(Box, { display: "flex", gap: "1W", p: "3W", children: [_jsx(Typography, { style: text.Titres['H4 - SM'], children: title }), _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: description })] }) }));
 };

package/dist/components/PageTitle.js

@@ -11,6 +11,6 @@ import { useTheme } from '@alveole/theme';
  * prend le cran le plus haut de notre échelle, celui que les deux premiers emploient : 40.
  */
 export const PageTitle = ({ title, breadcrumbsProps }) => {
-    const { spacingValue, text, color } = useTheme();
-    return (_jsxs(Box, { display: "flex", gap: spacingValue('4W'), children: [_jsx(Breadcrumbs, { ...breadcrumbsProps }), _jsx(Typography, { tag: "h1", style: { ...text.Titres['H1 - XL'], color: color.light.text['title-grey'] }, children: title })] }));
+    const { text, color } = useTheme();
+    return (_jsxs(Box, { display: "flex", gap: "4W", children: [_jsx(Breadcrumbs, { ...breadcrumbsProps }), _jsx(Typography, { tag: "h1", style: { ...text.Titres['H1 - XL'], color: color.light.text['title-grey'] }, children: title })] }));
 };

package/dist/components/SearchField.js

@@ -18,7 +18,7 @@ export const SearchField = ({ label, placeholder, value, onChangeText, size = 'm
         document.addEventListener('keydown', handleKeyDown);
         return () => document.removeEventListener('keydown', handleKeyDown);
     }, []);
-    return (_jsxs(Box, { display: "flex", gap: 8, children: [label ? _jsx(Typography, { style: text['Corps de texte'].XS.CapsBold, children: label }) : null, _jsx(TextInput, { ref: inputRef, placeholder: placeholder, value: value, onChangeText: onChangeText, placeholderTextColor: color.light.text['mention-grey'], autoCapitalize: "none", autoCorrect: false, style: {
+    return (_jsxs(Box, { display: "flex", gap: "1W", children: [label ? _jsx(Typography, { style: text['Corps de texte'].XS.CapsBold, children: label }) : null, _jsx(TextInput, { ref: inputRef, placeholder: placeholder, value: value, onChangeText: onChangeText, placeholderTextColor: color.light.text['mention-grey'], autoCapitalize: "none", autoCorrect: false, style: {
                     borderWidth: 1,
                     borderColor: color.light.border['default-grey'],
                     borderRadius: radius('md'),

package/dist/components/StoryCard.js

@@ -9,5 +9,5 @@ export const StoryCard = ({ story, href }) => {
     const flags = getStoryFlags(meta);
     const height = hauteurDeCarte(isVariant('mobile'));
     const description = meta.shortDescription ?? stripMarkdown(meta.description);
-    return (_jsx(A, { href: href, style: { height }, children: _jsx(Card, { height: height, children: _jsxs(Box, { display: "flex", gap: 12, p: '100', style: { height }, children: [_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: [meta.tags.map(tag => (_jsx(Badge, { variant: "info", size: "sm", style: { marginRight: 0 }, children: tag }, tag))), flags.map(flag => (_jsx(Badge, { variant: "default", size: "sm", style: { marginRight: 0 }, children: flag.label }, flag.key)))] }), _jsx(Typography, { style: text.Titres['H5 - XS'], children: meta.title }), _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: description })] }) }) }));
+    return (_jsx(A, { href: href, style: { height }, children: _jsx(Card, { height: height, children: _jsxs(Box, { display: "flex", gap: "3V", p: "2W", style: { height }, children: [_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: "1W", children: [meta.tags.map(tag => (_jsx(Badge, { variant: "info", size: "sm", style: { marginRight: 0 }, children: tag }, tag))), flags.map(flag => (_jsx(Badge, { variant: "default", size: "sm", style: { marginRight: 0 }, children: flag.label }, flag.key)))] }), _jsx(Typography, { style: text.Titres['H5 - XS'], children: meta.title }), _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: description })] }) }) }));
 };

package/dist/components/StorySummary.js

@@ -5,5 +5,5 @@ 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: styleDuLienBrut, [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: "1W", 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.js

@@ -74,7 +74,7 @@ const BarreMobile = ({ activeKey, items, columnGroups, logo }) => {
                     borderBottomWidth: 1,
                     borderBottomColor: color.light.border['default-grey'],
                     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 }) }) }))] }));
+                }, children: _jsx(ScrollView, { style: { ...(Platform.OS === 'web' ? { maxHeight: menuHeight } : { height: menuHeight }), flexGrow: 0 }, contentContainerStyle: { padding: spacingValue('2W'), gap: spacingValue('1W') }, keyboardShouldPersistTaps: "handled", children: _jsx(MobileMenuItems, { activeKey: activeKey, items: items, columnGroups: columnGroups }) }) }))] }));
 };
 export const UIKitTopBar = ({ activeKey, items, columnGroups = [], logo = null }) => {
     const { isVariant } = useTheme();
@@ -83,6 +83,6 @@ export const UIKitTopBar = ({ activeKey, items, columnGroups = [], logo = null }
         // 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))) }));
+    const right = (_jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: "1W", children: items.map(({ key, ...item }) => (_jsx(NavItem, { ...item, current: activeKey === key }, key))) }));
     return _jsx(Header, { logo: logo, title: "Alveole UI Kit", right: right });
 };

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export * from './pages/PhilosophyPage';
 export * from './pages/UIKitHomePage';
 export * from './pages/UIKitPage';
 export * from './pages/UIKitThemePage';
+export { resumeDeLaFiche } from './screens/sourcesDExemples';
 export * from './screens/StoriesScreen';
 export * from './screens/StoryDetailScreen';
 export * from './screens/ThemeConstantDetailScreen';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iCAAiC,CAAC;AAChD,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iCAAiC,CAAC;AAChD,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -10,6 +10,7 @@ export * from './pages/PhilosophyPage';
 export * from './pages/UIKitHomePage';
 export * from './pages/UIKitPage';
 export * from './pages/UIKitThemePage';
+export { resumeDeLaFiche } from './screens/sourcesDExemples';
 export * from './screens/StoriesScreen';
 export * from './screens/StoryDetailScreen';
 export * from './screens/ThemeConstantDetailScreen';

package/dist/pages/FormulairesPage.js

@@ -9,8 +9,8 @@ const DEMOS = { Anatomie, Clavier, Fichiers, FormulaireDeBase, Validation };
 const SectionDeFormulairesView = ({ titre, markdown, demo }) => {
     const { text } = useTheme();
     const Demo = demo ? DEMOS[demo] : null;
-    return (_jsxs(Box, { display: "flex", gap: 8, mb: '400', children: [_jsx(AnchorHeading, { style: text.Titres['H4 - SM'], children: titre }), _jsx(MarkdownDescription, { children: markdown }), demo && Demo ? (_jsxs(Box, { display: "flex", gap: 8, children: [_jsx(Demo, {}), _jsx(JsonBlock, { language: "tsx", value: Sources.storySources[demo]() })] })) : null] }));
+    return (_jsxs(Box, { display: "flex", gap: "1W", mb: "8W", children: [_jsx(AnchorHeading, { style: text.Titres['H4 - SM'], children: titre }), _jsx(MarkdownDescription, { children: markdown }), demo && Demo ? (_jsxs(Box, { display: "flex", gap: "1W", children: [_jsx(Demo, {}), _jsx(JsonBlock, { language: "tsx", value: Sources.storySources[demo]() })] })) : null] }));
 };
 export const FormulairesPage = ({ beforeContent, sidebar, footerContent }) => {
-    return (_jsx(EcranDeCatalogue, { title: "Formulaires", description: "Construire un formulaire avec les champs Alveole", sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, sommaire: SECTIONS_DE_FORMULAIRES.map(({ titre }) => titre), children: _jsx(Box, { display: "flex", gap: 0, children: SECTIONS_DE_FORMULAIRES.map(section => (_jsx(SectionDeFormulairesView, { ...section }, section.titre))) }) }));
+    return (_jsx(EcranDeCatalogue, { title: "Formulaires", description: "Construire un formulaire avec les champs Alveole", sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, sommaire: SECTIONS_DE_FORMULAIRES.map(({ titre }) => titre), children: _jsx(Box, { display: "flex", gap: "0V", children: SECTIONS_DE_FORMULAIRES.map(section => (_jsx(SectionDeFormulairesView, { ...section }, section.titre))) }) }));
 };

package/dist/pages/InstallationPage.js

@@ -6,8 +6,8 @@ import { JsonBlock } from '../components/JsonBlock';
 import { ETAPES_D_INSTALLATION } from './installation';
 const EtapeDInstallationSection = ({ titre, paragraphes, extraits = [] }) => {
     const { text } = useTheme();
-    return (_jsxs(Box, { display: "flex", gap: 8, mb: '400', children: [_jsx(AnchorHeading, { style: text.Titres['H4 - SM'], children: titre }), paragraphes.map(paragraphe => (_jsx(Typography, { style: text['Corps de texte'].MD.Regular, children: paragraphe }, paragraphe))), extraits.map(({ langage, fichier, source }) => (_jsxs(Box, { display: "flex", gap: 4, children: [fichier ? _jsx(Typography, { style: text['Corps de texte'].SM.Bold, children: fichier }) : null, _jsx(JsonBlock, { language: langage, value: source })] }, source)))] }));
+    return (_jsxs(Box, { display: "flex", gap: "1W", mb: "8W", children: [_jsx(AnchorHeading, { style: text.Titres['H4 - SM'], children: titre }), paragraphes.map(paragraphe => (_jsx(Typography, { style: text['Corps de texte'].MD.Regular, children: paragraphe }, paragraphe))), extraits.map(({ langage, fichier, source }) => (_jsxs(Box, { display: "flex", gap: "1V", children: [fichier ? _jsx(Typography, { style: text['Corps de texte'].SM.Bold, children: fichier }) : null, _jsx(JsonBlock, { language: langage, value: source })] }, source)))] }));
 };
 export const InstallationPage = ({ beforeContent, sidebar, footerContent }) => {
-    return (_jsx(EcranDeCatalogue, { title: "Installation", description: "Installer et configurer Alveole dans une application Expo", sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, sommaire: ETAPES_D_INSTALLATION.map(({ titre }) => titre), children: _jsx(Box, { display: "flex", gap: 0, children: ETAPES_D_INSTALLATION.map(etape => (_jsx(EtapeDInstallationSection, { ...etape }, etape.titre))) }) }));
+    return (_jsx(EcranDeCatalogue, { title: "Installation", description: "Installer et configurer Alveole dans une application Expo", sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, sommaire: ETAPES_D_INSTALLATION.map(({ titre }) => titre), children: _jsx(Box, { display: "flex", gap: "0V", children: ETAPES_D_INSTALLATION.map(etape => (_jsx(EtapeDInstallationSection, { ...etape }, etape.titre))) }) }));
 };

package/dist/pages/MigrationV2Page.js

@@ -5,8 +5,8 @@ import { EcranDeCatalogue } from '../components/EcranDeCatalogue';
 import { INTRODUCTION_DE_MIGRATION_V2, SECTIONS_DE_MIGRATION_V2 } from './migrationV2';
 const SectionDeMigrationV2 = ({ titre, markdown }) => {
     const { text } = useTheme();
-    return (_jsxs(Box, { display: "flex", gap: 8, mb: '400', children: [_jsx(AnchorHeading, { style: text.Titres['H4 - SM'], children: titre }), _jsx(MarkdownDescription, { children: markdown })] }));
+    return (_jsxs(Box, { display: "flex", gap: "1W", mb: "8W", children: [_jsx(AnchorHeading, { style: text.Titres['H4 - SM'], children: titre }), _jsx(MarkdownDescription, { children: markdown })] }));
 };
 export const MigrationV2Page = ({ beforeContent, sidebar, footerContent }) => {
-    return (_jsx(EcranDeCatalogue, { title: "Migration v2", description: "Migrer une application d'Alveole 1.x vers 2.0", sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, sommaire: SECTIONS_DE_MIGRATION_V2.map(({ titre }) => titre), children: _jsxs(Box, { display: "flex", gap: 0, children: [_jsx(Box, { mb: '400', children: _jsx(MarkdownDescription, { children: INTRODUCTION_DE_MIGRATION_V2 }) }), SECTIONS_DE_MIGRATION_V2.map(section => (_jsx(SectionDeMigrationV2, { ...section }, section.titre)))] }) }));
+    return (_jsx(EcranDeCatalogue, { title: "Migration v2", description: "Migrer une application d'Alveole 1.x vers 2.0", sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, sommaire: SECTIONS_DE_MIGRATION_V2.map(({ titre }) => titre), children: _jsxs(Box, { display: "flex", gap: "0V", children: [_jsx(Box, { mb: "8W", children: _jsx(MarkdownDescription, { children: INTRODUCTION_DE_MIGRATION_V2 }) }), SECTIONS_DE_MIGRATION_V2.map(section => (_jsx(SectionDeMigrationV2, { ...section }, section.titre)))] }) }));
 };

package/dist/pages/PhilosophyPage.js

@@ -5,8 +5,8 @@ import { EcranDeCatalogue } from '../components/EcranDeCatalogue';
 import { SECTIONS_DE_PHILOSOPHIE } from './philosophie';
 const PhilosophySection = ({ titre, paragraphes }) => {
     const { text } = useTheme();
-    return (_jsxs(Box, { display: "flex", gap: 8, mb: '400', children: [_jsx(AnchorHeading, { style: text.Titres['H4 - SM'], children: titre }), paragraphes.map(paragraphe => (_jsx(Typography, { style: text['Corps de texte'].MD.Regular, children: paragraphe }, paragraphe)))] }));
+    return (_jsxs(Box, { display: "flex", gap: "1W", mb: "8W", children: [_jsx(AnchorHeading, { style: text.Titres['H4 - SM'], children: titre }), paragraphes.map(paragraphe => (_jsx(Typography, { style: text['Corps de texte'].MD.Regular, children: paragraphe }, paragraphe)))] }));
 };
 export const PhilosophyPage = ({ beforeContent, sidebar, footerContent }) => {
-    return (_jsx(EcranDeCatalogue, { title: "Philosophie", description: "Les principes qui guident Alveole", sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, sommaire: SECTIONS_DE_PHILOSOPHIE.map(({ titre }) => titre), children: _jsx(Box, { display: "flex", gap: 0, children: SECTIONS_DE_PHILOSOPHIE.map(section => (_jsx(PhilosophySection, { ...section }, section.titre))) }) }));
+    return (_jsx(EcranDeCatalogue, { title: "Philosophie", description: "Les principes qui guident Alveole", sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, sommaire: SECTIONS_DE_PHILOSOPHIE.map(({ titre }) => titre), children: _jsx(Box, { display: "flex", gap: "0V", children: SECTIONS_DE_PHILOSOPHIE.map(section => (_jsx(PhilosophySection, { ...section }, section.titre))) }) }));
 };

package/dist/pages/UIKitHomePage.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Page, Section } from '@alveole/components';
 import { MenuCard } from '../components/MenuCard';
 export const UIKitHomePage = ({ title = 'UI Kit', description = 'Documentation du design system', onOpenComponents, onOpenTheme, onOpenConstants, }) => {
-    return (_jsx(Page, { scrollable: true, title: title, description: description, children: _jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: 16, children: [_jsx(MenuCard, { title: "Composants", description: "Liste des composants disponibles pour le d\u00E9veloppement.", onPress: onOpenComponents }), _jsx(MenuCard, { title: "Th\u00E8me", description: "Th\u00E8me de l\u2019application, liste des tokens issus du design system.", onPress: onOpenTheme }), _jsx(MenuCard, { title: "Constantes", description: "Liste des constantes de th\u00E8me expos\u00E9es par la librairie.", onPress: onOpenConstants })] }) }) }));
+    return (_jsx(Page, { scrollable: true, title: title, description: description, children: _jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: "2W", children: [_jsx(MenuCard, { title: "Composants", description: "Liste des composants disponibles pour le d\u00E9veloppement.", onPress: onOpenComponents }), _jsx(MenuCard, { title: "Th\u00E8me", description: "Th\u00E8me de l\u2019application, liste des tokens issus du design system.", onPress: onOpenTheme }), _jsx(MenuCard, { title: "Constantes", description: "Liste des constantes de th\u00E8me expos\u00E9es par la librairie.", onPress: onOpenConstants })] }) }) }));
 };

package/dist/pages/UIKitThemePage.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Page, Section } from '@alveole/components';
 import { MenuCard } from '../components/MenuCard';
 export const UIKitThemePage = ({ title = 'UI Kit - Thème', description = 'Tokens du thème', onOpenColors, onOpenTypography, onOpenCSSVariables, sidebar, footerContent, beforeContent, }) => {
-    return (_jsx(Page, { scrollable: true, title: title, description: description, sidebar: sidebar, footerContent: footerContent, beforeContent: beforeContent, children: _jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: 16, children: [_jsx(MenuCard, { title: "Couleurs", description: "Palette et couleurs du th\u00E8me.", onPress: onOpenColors }), _jsx(MenuCard, { title: "Typographies", description: "Styles de texte et hi\u00E9rarchie typographique.", onPress: onOpenTypography }), onOpenCSSVariables ? (_jsx(MenuCard, { title: "Variables CSS", description: "Les jetons du th\u00E8me expos\u00E9s en variables CSS.", onPress: onOpenCSSVariables })) : null] }) }) }));
+    return (_jsx(Page, { scrollable: true, title: title, description: description, sidebar: sidebar, footerContent: footerContent, beforeContent: beforeContent, children: _jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: "2W", children: [_jsx(MenuCard, { title: "Couleurs", description: "Palette et couleurs du th\u00E8me.", onPress: onOpenColors }), _jsx(MenuCard, { title: "Typographies", description: "Styles de texte et hi\u00E9rarchie typographique.", onPress: onOpenTypography }), onOpenCSSVariables ? (_jsx(MenuCard, { title: "Variables CSS", description: "Les jetons du th\u00E8me expos\u00E9s en variables CSS.", onPress: onOpenCSSVariables })) : null] }) }) }));
 };

package/dist/pages/ecransDuKit.js

@@ -7,5 +7,5 @@ export const InternalHeader = ({ canGoBack, onBack }) => {
     return (_jsx(Section, { withPaddingY: true, children: _jsx(Box, { children: _jsx(Button, { title: "Retour", variant: "tertiary", size: "sm", onPress: onBack }) }) }));
 };
 export const HomeScreen = ({ title, description, blankPage, onOpenComponents, onOpenTheme, onOpenConstants, onOpenBlank, onOpenPhilosophy, }) => {
-    return (_jsx(Page, { scrollable: true, title: title, description: description, children: _jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: 16, children: [_jsx(MenuCard, { title: "Composants", description: "Catalogue des composants et de leurs variantes.", onPress: onOpenComponents }), _jsx(MenuCard, { title: "Th\u00E8me", description: "Couleurs et typographies du design system.", onPress: onOpenTheme }), _jsx(MenuCard, { title: "Constantes", description: "Constantes expos\u00E9es par le th\u00E8me.", onPress: onOpenConstants }), _jsx(MenuCard, { title: "Philosophie", description: "Les principes qui guident Alveole.", onPress: onOpenPhilosophy }), blankPage ? (_jsx(MenuCard, { title: blankPage.title ?? 'Page vierge', description: blankPage.description ?? 'Espace de test libre pour expérimenter.', onPress: onOpenBlank })) : null] }) }) }));
+    return (_jsx(Page, { scrollable: true, title: title, description: description, children: _jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: "2W", children: [_jsx(MenuCard, { title: "Composants", description: "Catalogue des composants et de leurs variantes.", onPress: onOpenComponents }), _jsx(MenuCard, { title: "Th\u00E8me", description: "Couleurs et typographies du design system.", onPress: onOpenTheme }), _jsx(MenuCard, { title: "Constantes", description: "Constantes expos\u00E9es par le th\u00E8me.", onPress: onOpenConstants }), _jsx(MenuCard, { title: "Philosophie", description: "Les principes qui guident Alveole.", onPress: onOpenPhilosophy }), blankPage ? (_jsx(MenuCard, { title: blankPage.title ?? 'Page vierge', description: blankPage.description ?? 'Espace de test libre pour expérimenter.', onPress: onOpenBlank })) : null] }) }) }));
 };

package/dist/pages/formulaires.stories.js

@@ -21,7 +21,7 @@ export const FormulaireDeBase = () => {
         setEnvoi(true);
         setTimeout(() => setEnvoi(false), 1500);
     };
-    return (_jsx(Form, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 16, children: [_jsx(FormControl, { label: "Nom", required: true, children: _jsx(TextInput, { value: nom, onChangeText: setNom }) }), _jsx(FormControl, { label: "Pays", children: _jsx(Select, { placeholder: "Choisir...", options: PAYS, value: pays, onChange: setPays }) }), _jsx(Checkbox, { label: "J'accepte les conditions", checked: cgu, onCheckedChange: c => setCgu(c === true) }), _jsx(Button, { type: "submit", variant: "primary", title: "Envoyer", isLoading: envoi, disabled: !cgu, onPress: soumettre })] }) }));
+    return (_jsx(Form, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "2W", children: [_jsx(FormControl, { label: "Nom", required: true, children: _jsx(TextInput, { value: nom, onChangeText: setNom }) }), _jsx(FormControl, { label: "Pays", children: _jsx(Select, { placeholder: "Choisir...", options: PAYS, value: pays, onChange: setPays }) }), _jsx(Checkbox, { label: "J'accepte les conditions", checked: cgu, onCheckedChange: c => setCgu(c === true) }), _jsx(Button, { type: "submit", variant: "primary", title: "Envoyer", isLoading: envoi, disabled: !cgu, onPress: soumettre })] }) }));
 };
 export const Validation = () => {
     const [email, setEmail] = useState('');
@@ -29,14 +29,14 @@ export const Validation = () => {
     // L'erreur n'apparaît qu'après la première soumission : on ne reproche pas un champ pas encore rempli.
     const error = soumis && !email.includes('@') ? 'Adresse email invalide' : undefined;
     const success = soumis && !error ? 'Adresse valide' : undefined;
-    return (_jsx(Form, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 16, children: [_jsx(FormControl, { label: "Adresse email", error: error, success: success, required: true, children: _jsx(TextInput, { type: "email", value: email, onChangeText: setEmail, error: error, success: success }) }), _jsx(Button, { type: "submit", variant: "primary", title: "Valider", onPress: () => setSoumis(true) })] }) }));
+    return (_jsx(Form, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "2W", children: [_jsx(FormControl, { label: "Adresse email", error: error, success: success, required: true, children: _jsx(TextInput, { type: "email", value: email, onChangeText: setEmail, error: error, success: success }) }), _jsx(Button, { type: "submit", variant: "primary", title: "Valider", onPress: () => setSoumis(true) })] }) }));
 };
 export const Fichiers = () => {
     const [pieces, setPieces] = useState(null);
-    return (_jsx(FileDropZone, { value: pieces, onChange: setPieces, multiple: true, children: _jsx(Box, { p: 16, children: _jsx(FormControl, { label: "Pi\u00E8ces jointes", hint: "Glissez des fichiers n'importe o\u00F9 sur le formulaire.", children: _jsx(FileInput, { value: pieces, onChange: setPieces, multiple: true }) }) }) }));
+    return (_jsx(FileDropZone, { value: pieces, onChange: setPieces, multiple: true, children: _jsx(Box, { p: "2W", children: _jsx(FormControl, { label: "Pi\u00E8ces jointes", hint: "Glissez des fichiers n'importe o\u00F9 sur le formulaire.", children: _jsx(FileInput, { value: pieces, onChange: setPieces, multiple: true }) }) }) }));
 };
 export const Clavier = () => {
     const prenom = React.useRef(null);
-    return (_jsx(Form, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 16, children: [_jsx(FormControl, { label: "Nom", children: _jsx(TextInput, { returnKeyType: "next", submitBehavior: "submit", onSubmitEditing: () => prenom.current?.focus() }) }), _jsx(FormControl, { label: "Pr\u00E9nom", children: _jsx(TextInput, { ref: prenom, returnKeyType: "done" }) })] }) }));
+    return (_jsx(Form, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "2W", children: [_jsx(FormControl, { label: "Nom", children: _jsx(TextInput, { returnKeyType: "next", submitBehavior: "submit", onSubmitEditing: () => prenom.current?.focus() }) }), _jsx(FormControl, { label: "Pr\u00E9nom", children: _jsx(TextInput, { ref: prenom, returnKeyType: "done" }) })] }) }));
 };
 export * as Sources from './formulaires.stories.sources';

package/dist/pages/formulaires.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formulaires.stories.sources.d.ts","sourceRoot":"","sources":["../../src/pages/formulaires.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,cAA8Y,CAAC;AAEpa,eAAO,MAAM,gBAAgB,cAAk+B,CAAC;AAEhgC,eAAO,MAAM,UAAU,cAAq1B,CAAC;AAE72B,eAAO,MAAM,QAAQ,cAAmc,CAAC;AAEzd,eAAO,MAAM,OAAO,cAAsiB,CAAC;AAE3jB,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"formulaires.stories.sources.d.ts","sourceRoot":"","sources":["../../src/pages/formulaires.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,cAA8Y,CAAC;AAEpa,eAAO,MAAM,gBAAgB,cAAo+B,CAAC;AAElgC,eAAO,MAAM,UAAU,cAAu1B,CAAC;AAE/2B,eAAO,MAAM,QAAQ,cAAqc,CAAC;AAE3d,eAAO,MAAM,OAAO,cAAwiB,CAAC;AAE7jB,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/pages/formulaires.stories.sources.js

@@ -1,10 +1,10 @@
 // This file is generated. Do not edit manually.
 // Source: src/pages/formulaires.stories.tsx
 export const Anatomie = () => "export const Anatomie = () => {\n  const [email, setEmail] = useState('jean@');\n  const error = email.includes('.') ? undefined : 'Adresse email invalide';\n  return (\n    <FormControl label=\"Adresse email\" hint=\"Votre email professionnel\" error={error} required>\n      <TextInput type=\"email\" value={email} onChangeText={setEmail} error={error} />\n    </FormControl>\n  );\n};";
-export const FormulaireDeBase = () => "export const FormulaireDeBase = () => {\n  const [nom, setNom] = useState('');\n  const [pays, setPays] = useState<string | null>(null);\n  const [cgu, setCgu] = useState(false);\n  const [envoi, setEnvoi] = useState(false);\n\n  const soumettre = () => {\n    setEnvoi(true);\n    setTimeout(() => setEnvoi(false), 1500);\n  };\n\n  return (\n    <Form>\n      <Box display=\"flex\" flexDirection=\"column\" gap={16}>\n        <FormControl label=\"Nom\" required>\n          <TextInput value={nom} onChangeText={setNom} />\n        </FormControl>\n        <FormControl label=\"Pays\">\n          <Select placeholder=\"Choisir...\" options={PAYS} value={pays} onChange={setPays} />\n        </FormControl>\n        <Checkbox label=\"J'accepte les conditions\" checked={cgu} onCheckedChange={c => setCgu(c === true)} />\n        <Button type=\"submit\" variant=\"primary\" title=\"Envoyer\" isLoading={envoi} disabled={!cgu} onPress={soumettre} />\n      </Box>\n    </Form>\n  );\n};";
-export const Validation = () => "export const Validation = () => {\n  const [email, setEmail] = useState('');\n  const [soumis, setSoumis] = useState(false);\n  // L'erreur n'apparaît qu'après la première soumission : on ne reproche pas un champ pas encore rempli.\n  const error = soumis && !email.includes('@') ? 'Adresse email invalide' : undefined;\n  const success = soumis && !error ? 'Adresse valide' : undefined;\n\n  return (\n    <Form>\n      <Box display=\"flex\" flexDirection=\"column\" gap={16}>\n        <FormControl label=\"Adresse email\" error={error} success={success} required>\n          <TextInput type=\"email\" value={email} onChangeText={setEmail} error={error} success={success} />\n        </FormControl>\n        <Button type=\"submit\" variant=\"primary\" title=\"Valider\" onPress={() => setSoumis(true)} />\n      </Box>\n    </Form>\n  );\n};";
-export const Fichiers = () => "export const Fichiers = () => {\n  const [pieces, setPieces] = useState<FileInputValue>(null);\n  return (\n    <FileDropZone value={pieces} onChange={setPieces} multiple>\n      <Box p={16}>\n        <FormControl label=\"Pièces jointes\" hint=\"Glissez des fichiers n'importe où sur le formulaire.\">\n          <FileInput value={pieces} onChange={setPieces} multiple />\n        </FormControl>\n      </Box>\n    </FileDropZone>\n  );\n};";
-export const Clavier = () => "export const Clavier = () => {\n  const prenom = React.useRef<React.ComponentRef<typeof TextInput>>(null);\n  return (\n    <Form>\n      <Box display=\"flex\" flexDirection=\"column\" gap={16}>\n        <FormControl label=\"Nom\">\n          <TextInput returnKeyType=\"next\" submitBehavior=\"submit\" onSubmitEditing={() => prenom.current?.focus()} />\n        </FormControl>\n        <FormControl label=\"Prénom\">\n          <TextInput ref={prenom} returnKeyType=\"done\" />\n        </FormControl>\n      </Box>\n    </Form>\n  );\n};";
+export const FormulaireDeBase = () => "export const FormulaireDeBase = () => {\n  const [nom, setNom] = useState('');\n  const [pays, setPays] = useState<string | null>(null);\n  const [cgu, setCgu] = useState(false);\n  const [envoi, setEnvoi] = useState(false);\n\n  const soumettre = () => {\n    setEnvoi(true);\n    setTimeout(() => setEnvoi(false), 1500);\n  };\n\n  return (\n    <Form>\n      <Box display=\"flex\" flexDirection=\"column\" gap=\"2W\">\n        <FormControl label=\"Nom\" required>\n          <TextInput value={nom} onChangeText={setNom} />\n        </FormControl>\n        <FormControl label=\"Pays\">\n          <Select placeholder=\"Choisir...\" options={PAYS} value={pays} onChange={setPays} />\n        </FormControl>\n        <Checkbox label=\"J'accepte les conditions\" checked={cgu} onCheckedChange={c => setCgu(c === true)} />\n        <Button type=\"submit\" variant=\"primary\" title=\"Envoyer\" isLoading={envoi} disabled={!cgu} onPress={soumettre} />\n      </Box>\n    </Form>\n  );\n};";
+export const Validation = () => "export const Validation = () => {\n  const [email, setEmail] = useState('');\n  const [soumis, setSoumis] = useState(false);\n  // L'erreur n'apparaît qu'après la première soumission : on ne reproche pas un champ pas encore rempli.\n  const error = soumis && !email.includes('@') ? 'Adresse email invalide' : undefined;\n  const success = soumis && !error ? 'Adresse valide' : undefined;\n\n  return (\n    <Form>\n      <Box display=\"flex\" flexDirection=\"column\" gap=\"2W\">\n        <FormControl label=\"Adresse email\" error={error} success={success} required>\n          <TextInput type=\"email\" value={email} onChangeText={setEmail} error={error} success={success} />\n        </FormControl>\n        <Button type=\"submit\" variant=\"primary\" title=\"Valider\" onPress={() => setSoumis(true)} />\n      </Box>\n    </Form>\n  );\n};";
+export const Fichiers = () => "export const Fichiers = () => {\n  const [pieces, setPieces] = useState<FileInputValue>(null);\n  return (\n    <FileDropZone value={pieces} onChange={setPieces} multiple>\n      <Box p=\"2W\">\n        <FormControl label=\"Pièces jointes\" hint=\"Glissez des fichiers n'importe où sur le formulaire.\">\n          <FileInput value={pieces} onChange={setPieces} multiple />\n        </FormControl>\n      </Box>\n    </FileDropZone>\n  );\n};";
+export const Clavier = () => "export const Clavier = () => {\n  const prenom = React.useRef<React.ComponentRef<typeof TextInput>>(null);\n  return (\n    <Form>\n      <Box display=\"flex\" flexDirection=\"column\" gap=\"2W\">\n        <FormControl label=\"Nom\">\n          <TextInput returnKeyType=\"next\" submitBehavior=\"submit\" onSubmitEditing={() => prenom.current?.focus()} />\n        </FormControl>\n        <FormControl label=\"Prénom\">\n          <TextInput ref={prenom} returnKeyType=\"done\" />\n        </FormControl>\n      </Box>\n    </Form>\n  );\n};";
 export const storySources = {
     Anatomie,
     FormulaireDeBase,

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

@@ -1 +1 @@
-{"version":3,"file":"installation.d.ts","sourceRoot":"","sources":["../../src/pages/installation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAG1D;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,SAAS,aAAa,EAAE,CAAC;CACrC,CAAC;AA4NF,eAAO,MAAM,qBAAqB,EAAE,SAAS,kBAAkB,EAA+C,CAAC"}
+{"version":3,"file":"installation.d.ts","sourceRoot":"","sources":["../../src/pages/installation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAG1D;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,SAAS,aAAa,EAAE,CAAC;CACrC,CAAC;AAmNF,eAAO,MAAM,qBAAqB,EAAE,SAAS,kBAAkB,EAA+C,CAAC"}

package/dist/pages/installation.js

@@ -128,37 +128,28 @@ export default config;`,
         ],
     },
     {
-        titre: '5. Brancher le ThemeProvider',
+        titre: '5. Brancher l’AlveoleProvider',
         paragraphes: [
-            'ThemeProvider (@alveole/theme) charge les polices et fournit les couleurs et typographies à tous les composants. Il se place à la racine, dans app/_layout.tsx, au-dessus du TamaguiProvider de l’application.',
-            'Par défaut, ThemeProvider affiche un indicateur de chargement le temps de charger les polices. Une application qui a son propre splash screen passe loader={false} et masque son splash dans onReady.',
-            'Toasts (@alveole/components) est nécessaire pour afficher les notifications ; PageMetaProvider gère les balises <meta> sur le web.',
+            'AlveoleProvider (@alveole/components) monte, dans l’ordre attendu par les composants, la pile obligatoire : zones sûres, thème Alveole (polices, couleurs, typographies), Tamagui, clavier et notifications. Il se place à la racine, dans app/_layout.tsx, et reçoit la config Tamagui de l’application.',
+            'Par défaut, AlveoleProvider affiche un indicateur de chargement le temps de charger les polices. Une application qui a son propre splash screen passe loader={false} et masque son splash dans onReady.',
+            'Les providers propres à l’application (PageMetaProvider pour les balises <meta> sur le web, AppUpdateProvider, LinkAccessContext) se placent sous AlveoleProvider. Une application qui monte déjà son propre KeyboardProvider passe keyboardProvider={false}.',
         ],
         extraits: [
             {
                 langage: 'tsx',
                 fichier: 'app/_layout.tsx',
-                source: `import { PageMetaProvider, Toasts } from '@alveole/components';
-import { ThemeProvider } from '@alveole/theme';
+                source: `import { AlveoleProvider, PageMetaProvider } from '@alveole/components';
 import { Slot } from 'expo-router';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { TamaguiProvider } from 'tamagui';
 import tamaguiConfig from '../tamagui.config';
 import config from '../alveole.config';
 
 export default function RootLayout() {
   return (
-    <ThemeProvider color={config.palette}>
-      <SafeAreaProvider>
-        <TamaguiProvider defaultTheme="light" config={tamaguiConfig}>
-          <PageMetaProvider meta={[]}>
-            <Toasts>
-              <Slot />
-            </Toasts>
-          </PageMetaProvider>
-        </TamaguiProvider>
-      </SafeAreaProvider>
-    </ThemeProvider>
+    <AlveoleProvider tamaguiConfig={tamaguiConfig} palette={config.palette}>
+      <PageMetaProvider meta={[]}>
+        <Slot />
+      </PageMetaProvider>
+    </AlveoleProvider>
   );
 }`,
             },
@@ -167,7 +158,7 @@ export default function RootLayout() {
     {
         titre: '6. Personnaliser les couleurs',
         paragraphes: [
-            'Les couleurs se surchargent dans un fichier alveole.config.ts à la racine du projet, importé par le layout et passé au ThemeProvider via la prop color.',
+            'Les couleurs se surchargent dans un fichier alveole.config.ts à la racine du projet, importé par le layout et passé à AlveoleProvider via la prop palette.',
             'La palette est partielle : seules les clés fournies remplacent celles d’Alveole. Les valeurs viennent de préférence des nuanciers exportés par @alveole/theme (Colors.RougeGroseille, Colors.BleuCaptive…) ; la rubrique Thème › Couleurs liste les clés disponibles.',
             'La clé light cible les jetons sémantiques du thème clair (artwork, background, border, text) ; les clés de premier niveau (primary, background.button, stepper…) ciblent les couleurs propres aux composants.',
         ],

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

@@ -1 +1 @@
-{"version":3,"file":"StoryDetailScreen.d.ts","sourceRoot":"","sources":["../../src/screens/StoryDetailScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAI3C,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,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;AAwBF,eAAO,MAAM,iBAAiB,GAAI,sCAI/B,sBAAsB,sBAgCxB,CAAC"}
+{"version":3,"file":"StoryDetailScreen.d.ts","sourceRoot":"","sources":["../../src/screens/StoryDetailScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAI3C,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,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;AAwBF,eAAO,MAAM,iBAAiB,GAAI,sCAI/B,sBAAsB,sBA8BxB,CAAC"}

package/dist/screens/StoryDetailScreen.js

@@ -20,11 +20,10 @@ const ongletsDeLaFiche = (meta, exemples) => [
     ...(meta.props != null ? [{ value: 'props', label: 'Props', content: _jsx(JsonBlock, { value: meta.props }) }] : []),
 ];
 export const StoryDetailScreen = ({ story, notFoundMessage = 'Story not found.', ...cadre }) => {
-    const { spacingValue } = useTheme();
     if (!story)
         return _jsx(FicheIntrouvable, { message: notFoundMessage, ...cadre });
     const meta = story.default;
     const exemples = getStoryExamples(story);
     const gabarit = meta.tags.includes('Template');
-    return (_jsx(Page, { scrollable: true, title: meta.title, description: resumeDeLaFiche(meta), ...cadre, children: _jsx(StoryLayout, { sommaire: exemples.length > 0 ? _jsx(StorySummary, { entrees: exemples.map(([nom]) => nom) }) : null, children: _jsxs(Box, { display: "flex", gap: spacingValue('6W'), children: [_jsx(EnTeteDeFiche, { meta: meta }), _jsx(Tabs, { defaultValue: "examples", urlAnchorPrefix: "story", tabs: ongletsDeLaFiche(meta, _jsx(ExemplesDeLaStory, { story: story, exemples: exemples, gabarit: gabarit })) })] }) }) }));
+    return (_jsx(Page, { scrollable: true, title: meta.title, description: resumeDeLaFiche(meta), ...cadre, children: _jsx(StoryLayout, { sommaire: exemples.length > 0 ? _jsx(StorySummary, { entrees: exemples.map(([nom]) => nom) }) : null, children: _jsxs(Box, { display: "flex", gap: "6W", children: [_jsx(EnTeteDeFiche, { meta: meta }), _jsx(Tabs, { defaultValue: "examples", urlAnchorPrefix: "story", tabs: ongletsDeLaFiche(meta, _jsx(ExemplesDeLaStory, { story: story, exemples: exemples, gabarit: gabarit })) })] }) }) }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeCSSVariablesScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemeCSSVariablesScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAwI1B,MAAM,MAAM,4BAA4B,GAAG;IACzC,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;AAIF,eAAO,MAAM,uBAAuB,GAAI,2CAA2C,4BAA4B,sBAsD9G,CAAC"}
+{"version":3,"file":"ThemeCSSVariablesScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemeCSSVariablesScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AA+I1B,MAAM,MAAM,4BAA4B,GAAG;IACzC,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;AAIF,eAAO,MAAM,uBAAuB,GAAI,2CAA2C,4BAA4B,sBAsD9G,CAAC"}

package/dist/screens/ThemeCSSVariablesScreen.js

@@ -1,51 +1,59 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Accordion, Box, Typography, useToast } from '@alveole/components';
-import { useTheme } from '@alveole/theme';
+import { RadiusList, Spacings, useTheme } from '@alveole/theme';
 import React from 'react';
 import { Platform, Pressable } from 'react-native';
 import { EcranDeCatalogue, filDuTheme } from '../components/EcranDeCatalogue';
 import { buildGroups } from './variablesCSSDuTheme';
 // ─── Preview components ────────────────────────────────────────────────────────
-const ColorPreview = ({ value }) => (_jsx(Box, { style: {
-        width: 28,
-        height: 28,
-        borderRadius: 6,
-        backgroundColor: value,
-        borderWidth: 1,
-        borderColor: 'rgba(0,0,0,0.1)',
-        flexShrink: 0,
-    } }));
+const ColorPreview = ({ value }) => {
+    const { color } = useTheme();
+    return (_jsx(Box, { style: {
+            width: 28,
+            height: 28,
+            borderRadius: RadiusList.md,
+            backgroundColor: value,
+            borderWidth: 1,
+            borderColor: color.light.border['default-grey'],
+            flexShrink: 0,
+        } }));
+};
 const SpacingPreview = ({ value }) => {
+    const { color } = useTheme();
     const px = parseInt(value, 10);
     const width = Math.min(px, 96);
     return (_jsx(Box, { style: {
             width,
             height: 12,
-            borderRadius: 2,
-            backgroundColor: '#3B82F6',
+            borderRadius: RadiusList.sm,
+            backgroundColor: color.light.background['flat-info'],
             flexShrink: 0,
             alignSelf: 'center',
         } }));
 };
 const RadiusPreview = ({ value }) => {
+    const { color } = useTheme();
     const px = Math.min(parseInt(value, 10), 14);
     return (_jsx(Box, { style: {
             width: 28,
             height: 28,
             borderRadius: px,
             borderWidth: 2,
-            borderColor: '#3B82F6',
+            borderColor: color.light.border['plain-info'],
             flexShrink: 0,
         } }));
 };
-const ElevationPreview = ({ value }) => Platform.OS === 'web' ? (_jsx(Box, { style: {
-        width: 28,
-        height: 28,
-        borderRadius: 4,
-        backgroundColor: 'white',
-        boxShadow: value,
-        flexShrink: 0,
-    } })) : null;
+const ElevationPreview = ({ value }) => {
+    const { color } = useTheme();
+    return Platform.OS === 'web' ? (_jsx(Box, { style: {
+            width: 28,
+            height: 28,
+            borderRadius: RadiusList.sm,
+            backgroundColor: color.light.background['default-grey'],
+            boxShadow: value,
+            flexShrink: 0,
+        } })) : null;
+};
 // ─── Row ──────────────────────────────────────────────────────────────────────
 const VarRow = ({ entry }) => {
     const { color } = useTheme();
@@ -60,12 +68,12 @@ const VarRow = ({ entry }) => {
     return (_jsx(Pressable, { accessibilityRole: "button", onPress: copy, children: ({ pressed }) => (_jsxs(Box, { style: {
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 12,
-                paddingVertical: 6,
-                paddingHorizontal: 12,
-                borderRadius: 6,
+                gap: Spacings['3V'],
+                paddingVertical: Spacings['1,5V'],
+                paddingHorizontal: Spacings['3V'],
+                borderRadius: RadiusList.md,
                 backgroundColor: pressed ? color.light.background['transparent-hover'] : 'transparent',
-            }, children: [entry.preview === 'color' && _jsx(ColorPreview, { value: entry.rawValue }), entry.preview === 'spacing' && _jsx(SpacingPreview, { value: entry.rawValue }), entry.preview === 'radius' && _jsx(RadiusPreview, { value: entry.rawValue }), entry.preview === 'elevation' && _jsx(ElevationPreview, { value: entry.rawValue }), entry.preview === 'none' && _jsx(Box, { style: { width: 28 } }), _jsxs(Box, { style: { flex: 1, gap: 1 }, children: [_jsx(Typography, { style: {
+            }, children: [entry.preview === 'color' && _jsx(ColorPreview, { value: entry.rawValue }), entry.preview === 'spacing' && _jsx(SpacingPreview, { value: entry.rawValue }), entry.preview === 'radius' && _jsx(RadiusPreview, { value: entry.rawValue }), entry.preview === 'elevation' && _jsx(ElevationPreview, { value: entry.rawValue }), entry.preview === 'none' && _jsx(Box, { style: { width: 28 } }), _jsxs(Box, { style: { flex: 1, gap: Spacings['0,5V'] }, children: [_jsx(Typography, { style: {
                                 fontSize: 12,
                                 fontFamily: 'monospace',
                                 color: color.light.text['title-grey'],

package/dist/screens/ThemeConstantDetailScreen.js

@@ -6,5 +6,5 @@ import { JsonBlock } from '../components/JsonBlock';
 export const ThemeConstantDetailScreen = ({ name, value, beforeContent, sidebar, footerContent, }) => {
     const { text } = useTheme();
     const entries = typeof value === 'object' && value != null ? Object.entries(value) : [];
-    return (_jsx(EcranDeCatalogue, { title: name, description: name, sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, children: _jsx(Box, { display: "flex", gap: 16, children: entries.length === 0 ? (_jsx(JsonBlock, { value: value })) : (entries.map(([entryName, entryValue]) => (_jsxs(Box, { display: "flex", gap: 8, children: [_jsx(Typography, { style: text.Titres['H6 - XXS'], children: entryName }), _jsx(JsonBlock, { value: entryValue })] }, entryName)))) }) }));
+    return (_jsx(EcranDeCatalogue, { title: name, description: name, sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, children: _jsx(Box, { display: "flex", gap: "2W", children: entries.length === 0 ? (_jsx(JsonBlock, { value: value })) : (entries.map(([entryName, entryValue]) => (_jsxs(Box, { display: "flex", gap: "1W", children: [_jsx(Typography, { style: text.Titres['H6 - XXS'], children: entryName }), _jsx(JsonBlock, { value: entryValue })] }, entryName)))) }) }));
 };

package/dist/screens/ThemeConstantsScreen.js

@@ -10,5 +10,5 @@ export const ThemeConstantsScreen = ({ constants, title = 'UI Kit - Constants',
     const { width } = useWindowDimensions();
     const columns = width >= 1200 ? 3 : width >= 768 ? 2 : 1;
     const entries = React.useMemo(() => getConstantEntries(constants), [constants]);
-    return (_jsx(EcranDeCatalogue, { title: title, description: description, sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, children: _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 16, children: entries.map(([name, value]) => (_jsx(Box, { width: columns === 1 ? '100%' : columns === 2 ? '48%' : '31%', children: _jsx(Pressable, { accessibilityRole: "button", onPress: onSelectConstant ? () => onSelectConstant({ name, value }) : undefined, children: _jsx(Card, { children: _jsx(Box, { p: '100', children: _jsx(Typography, { style: text.Titres['H5 - XS'], children: name }) }) }) }) }, name))) }) }));
+    return (_jsx(EcranDeCatalogue, { title: title, description: description, sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, children: _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: "2W", children: entries.map(([name, value]) => (_jsx(Box, { width: columns === 1 ? '100%' : columns === 2 ? '48%' : '31%', children: _jsx(Pressable, { accessibilityRole: "button", onPress: onSelectConstant ? () => onSelectConstant({ name, value }) : undefined, children: _jsx(Card, { children: _jsx(Box, { p: "2W", children: _jsx(Typography, { style: text.Titres['H5 - XS'], children: name }) }) }) }) }, name))) }) }));
 };

package/dist/screens/ThemePaletteScreen.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Accordion, Box, Typography } from '@alveole/components';
-import { useTheme } from '@alveole/theme';
+import { Spacings, useTheme } from '@alveole/theme';
 import React from 'react';
 import { ColorSwatch } from '../components/ColorSwatch';
 import { EcranDeCatalogue, filDuTheme } from '../components/EcranDeCatalogue';
@@ -8,7 +8,7 @@ import { buildSections, compteDeJetons, sectionsOuvertesAuDepart } from './palet
 /** Une famille de couleurs, depliable, avec le nombre de jetons qu'elle contient. */
 const SectionDeCouleurs = ({ section }) => {
     const { color } = useTheme();
-    return (_jsx(Accordion.Item, { value: section.title, label: section.title, variant: "alt", labelChildren: _jsx(Typography, { style: { fontSize: 11, color: color.light.text['mention-grey'] }, children: compteDeJetons(section) }), noPadding: true, children: _jsx(Box, { style: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, padding: 8 }, children: section.entries.map(entry => (_jsx(ColorSwatch, { entry: entry }, entry.path))) }) }));
+    return (_jsx(Accordion.Item, { value: section.title, label: section.title, variant: "alt", labelChildren: _jsx(Typography, { style: { fontSize: 11, color: color.light.text['mention-grey'] }, children: compteDeJetons(section) }), noPadding: true, children: _jsx(Box, { style: { flexDirection: 'row', flexWrap: 'wrap', gap: Spacings['1W'], padding: Spacings['1W'] }, children: section.entries.map(entry => (_jsx(ColorSwatch, { entry: entry }, entry.path))) }) }));
 };
 export const ThemePaletteScreen = ({ palette, title = 'UI Kit - Couleurs du thème', description = 'Palette et couleurs du thème', beforeContent, sidebar, footerContent, }) => {
     const { color } = useTheme();

package/dist/screens/ThemeTypographyScreen.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Card, Typography } from '@alveole/components';
-import { useTheme } from '@alveole/theme';
+import { Spacings, useTheme } from '@alveole/theme';
 import { View } from 'react-native';
 import { EcranDeCatalogue, filDuTheme } from '../components/EcranDeCatalogue';
 const isLeafStyle = (value) => typeof value === 'object' && value !== null && 'fontSize' in value && typeof value.fontSize === 'number';
@@ -38,10 +38,10 @@ const getFontInfo = (style) => {
 const DIVIDER_COLOR = '#E5E7EB';
 const MUTED_COLOR = '#6B7280';
 const PREVIEW_WIDTH = 96;
-const TableHeader = ({ labelStyle }) => (_jsxs(Box, { display: "flex", gap: 0, children: [_jsxs(Box, { display: "flex", flexDirection: "row", style: { paddingVertical: 8 }, children: [_jsx(Box, { style: { width: PREVIEW_WIDTH }, children: _jsx(Typography, { style: labelStyle, children: "Aper\u00E7u" }) }), _jsx(Box, { style: { flex: 2 }, children: _jsx(Typography, { style: labelStyle, children: "Nom" }) }), _jsx(Box, { style: { flex: 1 }, children: _jsx(Typography, { style: labelStyle, children: "Police" }) }), _jsx(Box, { style: { flex: 1 }, children: _jsx(Typography, { style: labelStyle, children: "Graisse" }) }), _jsx(Box, { style: { flex: 1 }, children: _jsx(Typography, { style: labelStyle, children: "Taille" }) }), _jsx(Box, { style: { flex: 1 }, children: _jsx(Typography, { style: labelStyle, children: "Hauteur" }) })] }), _jsx(View, { style: { height: 1, backgroundColor: DIVIDER_COLOR } })] }));
+const TableHeader = ({ labelStyle }) => (_jsxs(Box, { display: "flex", gap: "0V", children: [_jsxs(Box, { display: "flex", flexDirection: "row", style: { paddingVertical: Spacings['1W'] }, children: [_jsx(Box, { style: { width: PREVIEW_WIDTH }, children: _jsx(Typography, { style: labelStyle, children: "Aper\u00E7u" }) }), _jsx(Box, { style: { flex: 2 }, children: _jsx(Typography, { style: labelStyle, children: "Nom" }) }), _jsx(Box, { style: { flex: 1 }, children: _jsx(Typography, { style: labelStyle, children: "Police" }) }), _jsx(Box, { style: { flex: 1 }, children: _jsx(Typography, { style: labelStyle, children: "Graisse" }) }), _jsx(Box, { style: { flex: 1 }, children: _jsx(Typography, { style: labelStyle, children: "Taille" }) }), _jsx(Box, { style: { flex: 1 }, children: _jsx(Typography, { style: labelStyle, children: "Hauteur" }) })] }), _jsx(View, { style: { height: 1, backgroundColor: DIVIDER_COLOR } })] }));
 const TableRow = ({ entry, valueStyle }) => {
     const { family, weight } = getFontInfo(entry.style);
-    return (_jsxs(Box, { display: "flex", gap: 0, children: [_jsxs(Box, { display: "flex", flexDirection: "row", style: { paddingVertical: 12, alignItems: 'center' }, children: [_jsx(Box, { style: { width: PREVIEW_WIDTH }, children: _jsx(Typography, { style: entry.style, children: "Aa" }) }), _jsx(Box, { style: { flex: 2 }, children: _jsx(Typography, { style: valueStyle, children: entry.label }) }), _jsx(Box, { style: { flex: 1 }, children: _jsx(Typography, { style: [valueStyle, { color: MUTED_COLOR }], children: family }) }), _jsx(Box, { style: { flex: 1 }, children: _jsx(Typography, { style: [valueStyle, { color: MUTED_COLOR }], children: weight }) }), _jsx(Box, { style: { flex: 1 }, children: _jsxs(Typography, { style: [valueStyle, { color: MUTED_COLOR }], children: [entry.style.fontSize, "px"] }) }), _jsx(Box, { style: { flex: 1 }, children: _jsxs(Typography, { style: [valueStyle, { color: MUTED_COLOR }], children: [entry.style.lineHeight, "px"] }) })] }), _jsx(View, { style: { height: 1, backgroundColor: DIVIDER_COLOR } })] }));
+    return (_jsxs(Box, { display: "flex", gap: "0V", children: [_jsxs(Box, { display: "flex", flexDirection: "row", style: { paddingVertical: Spacings['3V'], alignItems: 'center' }, children: [_jsx(Box, { style: { width: PREVIEW_WIDTH }, children: _jsx(Typography, { style: entry.style, children: "Aa" }) }), _jsx(Box, { style: { flex: 2 }, children: _jsx(Typography, { style: valueStyle, children: entry.label }) }), _jsx(Box, { style: { flex: 1 }, children: _jsx(Typography, { style: [valueStyle, { color: MUTED_COLOR }], children: family }) }), _jsx(Box, { style: { flex: 1 }, children: _jsx(Typography, { style: [valueStyle, { color: MUTED_COLOR }], children: weight }) }), _jsx(Box, { style: { flex: 1 }, children: _jsxs(Typography, { style: [valueStyle, { color: MUTED_COLOR }], children: [entry.style.fontSize, "px"] }) }), _jsx(Box, { style: { flex: 1 }, children: _jsxs(Typography, { style: [valueStyle, { color: MUTED_COLOR }], children: [entry.style.lineHeight, "px"] }) })] }), _jsx(View, { style: { height: 1, backgroundColor: DIVIDER_COLOR } })] }));
 };
 export const ThemeTypographyScreen = ({ typography, title = 'UI Kit - Theme typography', description = 'Theme text styles', beforeContent, sidebar, footerContent, }) => {
     const { text } = useTheme();
@@ -51,5 +51,5 @@ export const ThemeTypographyScreen = ({ typography, title = 'UI Kit - Theme typo
         key,
         entries: flattenStyles(value),
     }));
-    return (_jsx(EcranDeCatalogue, { title: title, description: description, sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, breadcrumbsProps: filDuTheme, children: _jsx(Box, { display: "flex", gap: 16, children: categories.map(({ key, entries }) => (_jsx(Card, { children: _jsxs(Box, { display: "flex", gap: 16, p: "150", children: [_jsx(Typography, { style: text.Titres['H4 - SM'], children: key }), _jsxs(Box, { display: "flex", gap: 0, children: [_jsx(TableHeader, { labelStyle: labelStyle }), entries.map(entry => (_jsx(TableRow, { entry: entry, valueStyle: valueStyle }, entry.label)))] })] }) }, key))) }) }));
+    return (_jsx(EcranDeCatalogue, { title: title, description: description, sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, breadcrumbsProps: filDuTheme, children: _jsx(Box, { display: "flex", gap: "2W", children: categories.map(({ key, entries }) => (_jsx(Card, { children: _jsxs(Box, { display: "flex", gap: "2W", p: "3W", children: [_jsx(Typography, { style: text.Titres['H4 - SM'], children: key }), _jsxs(Box, { display: "flex", gap: "0V", children: [_jsx(TableHeader, { labelStyle: labelStyle }), entries.map(entry => (_jsx(TableRow, { entry: entry, valueStyle: valueStyle }, entry.label)))] })] }) }, key))) }) }));
 };

package/package.json

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