@alveole/storybook 0.41.0 → 0.42.1

package/dist/components/DocFooter.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocFooter.d.ts","sourceRoot":"","sources":["../../src/components/DocFooter.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,mCAoBrB,CAAC"}

package/dist/components/DocFooter.js

@@ -0,0 +1,16 @@
+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';
+export const DocFooter = () => {
+    const { color, text } = useTheme();
+    return (_jsx(Box, { style: {
+            borderTopWidth: 1,
+            borderTopColor: color.light.border['default-grey'],
+            paddingTop: 12,
+            paddingBottom: 12,
+            paddingLeft: 24,
+            paddingRight: 24,
+            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/UIKitTopBar.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export type UIKitTopBarItem = {
     key: string;
     label: string;
@@ -7,5 +8,5 @@ export type UIKitTopBarProps = {
     activeKey: string;
     items: UIKitTopBarItem[];
 };
-export declare const UIKitTopBar: ({ activeKey, items }: UIKitTopBarProps) => import("react").JSX.Element;
+export declare const UIKitTopBar: ({ activeKey, items }: 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":"AAIA,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,eAAe,EAAE,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,sBAAsB,gBAAgB,gCA+EjE,CAAC"}
+{"version":3,"file":"UIKitTopBar.d.ts","sourceRoot":"","sources":["../../src/components/UIKitTopBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,eAAe,EAAE,CAAC;CAC1B,CAAC;AAqBF,eAAO,MAAM,WAAW,GAAI,sBAAsB,gBAAgB,sBAoEjE,CAAC"}

package/dist/components/UIKitTopBar.js

@@ -1,35 +1,45 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ALVEOLE_COMPONENTS_VERSION, Box, Typography } from '@alveole/components';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Header, LucideIcon, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
-import { Pressable, useWindowDimensions } from 'react-native';
-export const UIKitTopBar = ({ activeKey, items }) => {
+import React from 'react';
+import { Pressable } from 'react-native';
+const AlveoleLogo = () => {
     const { color, radius, text } = useTheme();
-    const { width } = useWindowDimensions();
     return (_jsx(Box, { style: {
-            backgroundColor: color.light.background['default-grey'],
-            borderBottomColor: color.light.border['default-grey'],
-            borderBottomWidth: 1,
-        }, children: _jsxs(Box, { display: "flex", gap: 12, p: '150', style: {
-                alignItems: width >= 960 ? 'center' : 'flex-start',
-                flexDirection: width >= 960 ? 'row' : 'column',
-                justifyContent: 'space-between',
-            }, children: [_jsxs(Box, { display: "flex", gap: 2, children: [_jsx(Typography, { style: text['Corps de texte'].SM.Bold, children: "Alveole \u2022 UI Kit" }), _jsxs(Typography, { style: {
-                                ...text['Corps de texte'].XS.Regular,
-                                color: color.light.text['mention-grey'],
-                            }, children: ["Version ", ALVEOLE_COMPONENTS_VERSION] })] }), _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: items.map(item => {
-                        const isActive = item.key === activeKey;
-                        return (_jsx(Pressable, { accessibilityRole: "link", onPress: item.onPress, children: ({ pressed }) => (_jsx(Box, { borderColor: isActive ? color.light.border['action-low-primary'] : color.light.border['default-grey'], borderRadius: radius('full'), borderWidth: 1, pl: '100', pr: '100', pt: '075', pb: '075', style: {
-                                    backgroundColor: isActive
-                                        ? color.light.background['action-low-primary']
-                                        : pressed
-                                            ? color.light.background['alt-grey']
-                                            : color.light.background['default-grey'],
-                                    transitionDuration: '150ms',
-                                    transitionProperty: 'background-color, border-color, color',
-                                    transitionTimingFunction: 'ease',
-                                }, children: _jsx(Typography, { style: {
-                                        ...text['Corps de texte'].SM.Medium,
-                                        color: isActive ? color.light.text['action-high-primary'] : color.light.text['default-grey'],
-                                    }, children: item.label }) })) }, item.key));
-                    }) })] }) }));
+            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" }) }));
+};
+export const UIKitTopBar = ({ activeKey, items }) => {
+    const { color, isVariant, spacing } = useTheme();
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    if (isVariant('mobile')) {
+        return (_jsxs(_Fragment, { children: [_jsx(Header, { logo: _jsx(AlveoleLogo, {}), right: _jsx(Pressable, { onPress: () => setMenuOpen(v => !v), style: { padding: 8 }, children: _jsx(LucideIcon, { name: menuOpen ? 'X' : 'Menu', size: "md", color: color.light.text['title-grey'] }) }) }), menuOpen && (_jsx(Box, { style: {
+                        position: 'sticky',
+                        top: 64,
+                        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(item => (_jsx(Button, { variant: activeKey === item.key ? 'primary' : 'tertiary', title: item.label, size: "sm", onPress: () => {
+                            item.onPress();
+                            setMenuOpen(false);
+                        } }, item.key))) }))] }));
+    }
+    const right = (_jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: items.map(item => (_jsx(Button, { variant: activeKey === item.key ? 'primary' : 'tertiary', title: item.label, size: "sm", onPress: item.onPress }, item.key))) }));
+    return _jsx(Header, { logo: _jsx(AlveoleLogo, {}), title: "Alveole UI Kit", right: right });
 };

package/dist/index.d.ts

@@ -1,5 +1,7 @@
+export * from './components/DocFooter';
 export * from './components/JsonBlock';
 export * from './components/UIKitTopBar';
+export * from './pages/PhilosophyPage';
 export * from './pages/UIKitHomePage';
 export * from './pages/UIKitPage';
 export * from './pages/UIKitThemePage';

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,0BAA0B,CAAC;AACzC,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,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,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,8BAA8B,CAAC;AAC7C,cAAc,iCAAiC,CAAC;AAChD,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -1,5 +1,7 @@
+export * from './components/DocFooter';
 export * from './components/JsonBlock';
 export * from './components/UIKitTopBar';
+export * from './pages/PhilosophyPage';
 export * from './pages/UIKitHomePage';
 export * from './pages/UIKitPage';
 export * from './pages/UIKitThemePage';

package/dist/pages/PhilosophyPage.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type PhilosophyPageProps = {
+    beforeContent?: React.ReactNode;
+    footerContent?: React.ReactNode;
+};
+export declare const PhilosophyPage: ({ beforeContent, footerContent }: PhilosophyPageProps) => React.JSX.Element;
+//# sourceMappingURL=PhilosophyPage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PhilosophyPage.d.ts","sourceRoot":"","sources":["../../src/pages/PhilosophyPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkB1B,MAAM,MAAM,mBAAmB,GAAG;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,kCAAkC,mBAAmB,sBAoFnF,CAAC"}

package/dist/pages/PhilosophyPage.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Page, Section, Typography } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+const PhilosophySection = ({ title, children }) => {
+    const { text } = useTheme();
+    return (_jsxs(Box, { display: "flex", gap: 8, mb: '400', children: [_jsx(Typography, { style: text.Titres['H4 - SM'], children: title }), children] }));
+};
+export const PhilosophyPage = ({ beforeContent, footerContent }) => {
+    const { text } = useTheme();
+    return (_jsx(Page, { scrollable: true, title: "Philosophie", description: "Les principes qui guident Alveole", beforeContent: beforeContent, footerContent: footerContent, children: _jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: 0, style: { maxWidth: 720 }, children: [_jsx(PhilosophySection, { title: "Objectif", children: _jsxs(Typography, { style: text['Corps de texte'].MD.Regular, children: ["Alveole est un framework de composants conçu pour accélérer la construction d'outils B2B. L'ambition est", ' de proposer une expérience clé en main : installer les packages, utiliser les composants, livrer. Pas de', ' configuration interminable, pas de décisions de design à prendre à chaque écran.'] }) }), _jsx(PhilosophySection, { title: "Convention plut\u00F4t que configuration", children: _jsxs(Typography, { style: text['Corps de texte'].MD.Regular, children: ["Alveole s'inspire du principe ", _jsx(Typography, { style: text['Corps de texte'].MD.Regular, children: "Convention over Configuration" }), ' : le thème par défaut est pensé pour fonctionner sans ajustement. La customisation reste possible — palette,', ' typographie, espacements — mais elle est optionnelle et ciblée. Le but est de ne pas passer du temps à', ' configurer ce qui fonctionne déjà bien.'] }) }), _jsx(PhilosophySection, { title: "Des composants pens\u00E9s pour l'UX", children: _jsxs(Typography, { style: text['Corps de texte'].MD.Regular, children: ["Chaque composant embarque les meilleures pratiques UI et UX de sa catégorie. L'objectif n'est pas de", " fournir une brique neutre que chaque projet devra affiner, mais un composant fini qui propose d'emblée la", " meilleure expérience pour l'utilisateur final. Il ne faut pas réinventer la roue à chaque projet."] }) }), _jsx(PhilosophySection, { title: "Des choix assum\u00E9s", children: _jsxs(Typography, { style: text['Corps de texte'].MD.Regular, children: ['Certaines décisions ne sont pas exposées en configuration. Par exemple, les icônes Lucide utilisent', ' systématiquement un ', _jsx(Typography, { style: text['Corps de texte'].MD.Regular, children: "strokeWidth \u00E0 1.5" }), " — cette valeur n'est pas modifiable par le consommateur du composant. Ce type de choix garantit la cohérence", " visuelle de l'ensemble : un design system qui offre trop de flexibilité cesse d'être un design system."] }) }), _jsx(PhilosophySection, { title: "Inspirations", children: _jsxs(Typography, { style: text['Corps de texte'].MD.Regular, children: ["Alveole s'inspire de deux systèmes de design de référence dans l'écosystème B2B et open source :", " l'Atlassian Design System, reconnu pour sa rigueur dans les outils professionnels, et Primer, le design", ' system de GitHub, apprécié pour sa clarté et sa cohérence à grande échelle.'] }) }), _jsx(PhilosophySection, { title: "Construit dans la dur\u00E9e par Captive", children: _jsxs(Typography, { style: text['Corps de texte'].MD.Regular, children: ['Alveole est maintenu par Captive et évolue au fil des projets réels. Chaque composant est extrait,', ' généralisé et affiné à partir de besoins concrets. Le framework grandit progressivement, avec une', " attention constante à la qualité plutôt qu'à l'exhaustivité."] }) })] }) }) }));
+};

package/dist/screens/StoriesScreen.d.ts

@@ -6,9 +6,10 @@ export type StoriesScreenProps = {
     description?: string;
     emptyMessage?: string;
     beforeContent?: React.ReactNode;
+    footerContent?: React.ReactNode;
     createLabel?: string;
     onCreatePress?: () => void;
     onSelectStory?: (story: StorybookModule) => void;
 };
-export declare const StoriesScreen: ({ stories, title, description, emptyMessage, beforeContent, createLabel, onCreatePress, onSelectStory, }: StoriesScreenProps) => React.JSX.Element;
+export declare const StoriesScreen: ({ stories, title, description, emptyMessage, beforeContent, footerContent, createLabel, onCreatePress, onSelectStory, }: StoriesScreenProps) => React.JSX.Element;
 //# sourceMappingURL=StoriesScreen.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"StoriesScreen.d.ts","sourceRoot":"","sources":["../../src/screens/StoriesScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAiB,eAAe,EAAE,MAAM,UAAU,CAAC;AAW1D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,0GAS3B,kBAAkB,sBAgKpB,CAAC"}
+{"version":3,"file":"StoriesScreen.d.ts","sourceRoot":"","sources":["../../src/screens/StoriesScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAiB,eAAe,EAAE,MAAM,UAAU,CAAC;AAW1D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,yHAU3B,kBAAkB,sBAiKpB,CAAC"}

package/dist/screens/StoriesScreen.js

@@ -14,7 +14,7 @@ const AVAILABLE_FLAGS = [
     { key: 'webOnly', label: 'Web only' },
     { key: 'mobileOnly', label: 'Mobile only' },
 ];
-export const StoriesScreen = ({ stories, title = 'UI Kit - Components', description = 'Shared component catalog', emptyMessage = 'No story found.', beforeContent, createLabel, onCreatePress, onSelectStory, }) => {
+export const StoriesScreen = ({ stories, title = 'UI Kit - Components', description = 'Shared component catalog', emptyMessage = 'No story found.', beforeContent, footerContent, createLabel, onCreatePress, onSelectStory, }) => {
     const { text, color, radius } = useTheme();
     const { width } = useWindowDimensions();
     const columns = width >= 1200 ? 3 : width >= 768 ? 2 : 1;
@@ -51,5 +51,5 @@ export const StoriesScreen = ({ stories, title = 'UI Kit - Components', descript
                                     } })) : null] }), _jsx(SearchField, { label: "Recherche", placeholder: "Button, Tabs, Card...", value: query, onChangeText: setQuery }), _jsxs(Box, { display: "flex", gap: 16, style: {
                                 alignItems: 'flex-start',
                                 flexDirection: width >= 1024 ? 'row' : 'column',
-                            }, children: [_jsxs(Box, { display: "flex", gap: 8, style: { flex: 1, width: '100%' }, children: [_jsx(Typography, { style: text['Corps de texte'].XS.CapsBold, children: "Tags" }), _jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: [_jsx(FilterBadge, { active: selectedTag === null, label: "Tous", onPress: () => setSelectedTag(null) }), allTags.map(tag => (_jsx(FilterBadge, { active: selectedTag === tag, label: tag, onPress: () => setSelectedTag(current => (current === tag ? null : tag)) }, tag)))] })] }), _jsxs(Box, { display: "flex", gap: 8, style: { flex: 1, width: '100%' }, children: [_jsx(Typography, { style: text['Corps de texte'].XS.CapsBold, children: "Indicateurs" }), _jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: [_jsx(FilterBadge, { active: selectedFlag === null, label: "Tous", onPress: () => setSelectedFlag(null) }), AVAILABLE_FLAGS.map(flag => (_jsx(FilterBadge, { active: selectedFlag === flag.key, label: flag.label, onPress: () => setSelectedFlag(current => (current === flag.key ? null : flag.key)) }, flag.key)))] })] })] })] }) }), groupedStories.length === 0 ? (_jsx(Section, { withPaddingY: true, children: _jsx(Typography, { style: text['Corps de texte'].MD.Regular, children: emptyMessage }) })) : (groupedStories.map(([tag, taggedStories]) => (_jsx(Section, { withPaddingY: true, children: _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: taggedStories.map(story => (_jsx(Box, { style: { alignSelf: 'stretch', width: columnStyle.width }, children: _jsx(StoryCard, { story: story, onPress: onSelectStory }) }, story.default.title))) })] }) }, tag))))] }));
+                            }, children: [_jsxs(Box, { display: "flex", gap: 8, style: { flex: 1, width: '100%' }, children: [_jsx(Typography, { style: text['Corps de texte'].XS.CapsBold, children: "Tags" }), _jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: [_jsx(FilterBadge, { active: selectedTag === null, label: "Tous", onPress: () => setSelectedTag(null) }), allTags.map(tag => (_jsx(FilterBadge, { active: selectedTag === tag, label: tag, onPress: () => setSelectedTag(current => (current === tag ? null : tag)) }, tag)))] })] }), _jsxs(Box, { display: "flex", gap: 8, style: { flex: 1, width: '100%' }, children: [_jsx(Typography, { style: text['Corps de texte'].XS.CapsBold, children: "Indicateurs" }), _jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: [_jsx(FilterBadge, { active: selectedFlag === null, label: "Tous", onPress: () => setSelectedFlag(null) }), AVAILABLE_FLAGS.map(flag => (_jsx(FilterBadge, { active: selectedFlag === flag.key, label: flag.label, onPress: () => setSelectedFlag(current => (current === flag.key ? null : flag.key)) }, flag.key)))] })] })] })] }) }), groupedStories.length === 0 ? (_jsx(Section, { withPaddingY: true, children: _jsx(Typography, { style: text['Corps de texte'].MD.Regular, children: emptyMessage }) })) : (groupedStories.map(([tag, taggedStories]) => (_jsx(Section, { withPaddingY: true, children: _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: taggedStories.map(story => (_jsx(Box, { style: { alignSelf: 'stretch', width: columnStyle.width }, children: _jsx(StoryCard, { story: story, onPress: onSelectStory }) }, story.default.title))) })] }) }, tag)))), footerContent] }));
 };

package/dist/screens/StoryDetailScreen.d.ts

@@ -4,6 +4,7 @@ export type StoryDetailScreenProps = {
     story?: StorybookModule | null;
     notFoundMessage?: string;
     beforeContent?: React.ReactNode;
+    footerContent?: React.ReactNode;
 };
-export declare const StoryDetailScreen: ({ story, notFoundMessage, beforeContent, }: StoryDetailScreenProps) => React.JSX.Element;
+export declare const StoryDetailScreen: ({ story, notFoundMessage, beforeContent, footerContent, }: StoryDetailScreenProps) => React.JSX.Element;
 //# sourceMappingURL=StoryDetailScreen.d.ts.map

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;AAG1B,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG3C,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;CACjC,CAAC;AAiIF,eAAO,MAAM,iBAAiB,GAAI,4CAI/B,sBAAsB,sBAwJxB,CAAC"}
+{"version":3,"file":"StoryDetailScreen.d.ts","sourceRoot":"","sources":["../../src/screens/StoryDetailScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG3C,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,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAiIF,eAAO,MAAM,iBAAiB,GAAI,2DAK/B,sBAAsB,sBAmKxB,CAAC"}

package/dist/screens/StoryDetailScreen.js

@@ -41,10 +41,10 @@ const DetailTabs = ({ tabs, defaultValue }) => {
     const activeTab = tabs.find(tab => tab.value === activeValue) ?? tabs[0];
     return (_jsxs(Box, { display: "flex", gap: 16, children: [_jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: tabs.map(tab => (_jsx(Button, { title: tab.label, size: "sm", variant: "tertiary", selected: tab.value === activeTab?.value, onPress: () => setActiveValue(tab.value) }, tab.value))) }), activeTab?.scrollable ? (_jsx(ScrollView, { style: { flex: 1 }, contentContainerStyle: { paddingBottom: 16 }, keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: true, children: activeTab.content })) : (activeTab?.content)] }));
 };
-export const StoryDetailScreen = ({ story, notFoundMessage = 'Story not found.', beforeContent, }) => {
+export const StoryDetailScreen = ({ story, notFoundMessage = 'Story not found.', beforeContent, footerContent, }) => {
     const { text, color, radius } = useTheme();
     if (!story) {
-        return (_jsx(Page, { title: "Story not found", description: notFoundMessage, beforeContent: beforeContent, children: _jsx(Section, { withPaddingY: true, children: _jsx(Typography, { style: text['Corps de texte'].MD.Regular, children: notFoundMessage }) }) }));
+        return (_jsx(Page, { title: "Story not found", description: notFoundMessage, beforeContent: beforeContent, footerContent: footerContent, children: _jsx(Section, { withPaddingY: true, children: _jsx(Typography, { style: text['Corps de texte'].MD.Regular, children: notFoundMessage }) }) }));
     }
     const meta = story.default;
     const flags = getStoryFlags(meta);
@@ -57,7 +57,7 @@ export const StoryDetailScreen = ({ story, notFoundMessage = 'Story not found.',
                             minHeight: isTemplate ? 420 : undefined,
                         }, children: _jsx(Example, {}) }), _jsx(Divider, { mt: "1W", mb: "1,5V" }), source ? _jsx(JsonBlock, { language: "tsx", value: source }) : null] }, key));
         }) }));
-    return (_jsx(Page, { scrollable: true, title: meta.title, description: meta.description, beforeContent: beforeContent, children: _jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: 20, children: [_jsxs(Box, { borderColor: color.light.border['default-grey'], borderRadius: radius('lg'), borderWidth: 1, display: "flex", gap: 16, p: '150', style: { backgroundColor: color.light.background['alt-grey'] }, children: [_jsxs(Box, { display: "flex", gap: 12, style: {
+    return (_jsx(Page, { scrollable: true, title: meta.title, description: meta.description, beforeContent: beforeContent, footerContent: footerContent, children: _jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: 20, children: [_jsxs(Box, { borderColor: color.light.border['default-grey'], borderRadius: radius('lg'), borderWidth: 1, display: "flex", gap: 16, p: '150', style: { backgroundColor: color.light.background['alt-grey'] }, children: [_jsxs(Box, { display: "flex", gap: 12, style: {
                                     alignItems: 'flex-start',
                                     flexDirection: 'row',
                                     justifyContent: 'space-between',

package/dist/screens/ThemeConstantDetailScreen.d.ts

@@ -1,7 +1,9 @@
+import React from 'react';
 export type ThemeConstantDetailScreenProps = {
     name: string;
     value: unknown;
     beforeContent?: React.ReactNode;
+    footerContent?: React.ReactNode;
 };
-export declare const ThemeConstantDetailScreen: ({ name, value, beforeContent }: ThemeConstantDetailScreenProps) => import("react").JSX.Element;
+export declare const ThemeConstantDetailScreen: ({ name, value, beforeContent, footerContent, }: ThemeConstantDetailScreenProps) => React.JSX.Element;
 //# sourceMappingURL=ThemeConstantDetailScreen.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeConstantDetailScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemeConstantDetailScreen.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,8BAA8B,GAAG;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,gCAAgC,8BAA8B,gCAsBvG,CAAC"}
+{"version":3,"file":"ThemeConstantDetailScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemeConstantDetailScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,8BAA8B,GAAG;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,gDAKvC,8BAA8B,sBAsBhC,CAAC"}

package/dist/screens/ThemeConstantDetailScreen.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Page, Section, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
 import { JsonBlock } from '../components/JsonBlock';
-export const ThemeConstantDetailScreen = ({ name, value, beforeContent }) => {
+export const ThemeConstantDetailScreen = ({ name, value, beforeContent, footerContent, }) => {
     const { text } = useTheme();
     const entries = typeof value === 'object' && value != null ? Object.entries(value) : [];
-    return (_jsx(Page, { scrollable: true, title: name, description: name, beforeContent: beforeContent, children: _jsx(Section, { withPaddingY: true, 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(Page, { scrollable: true, title: name, description: name, beforeContent: beforeContent, footerContent: footerContent, children: _jsx(Section, { withPaddingY: true, 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)))) }) }) }));
 };

package/dist/screens/ThemeConstantsScreen.d.ts

@@ -4,10 +4,11 @@ export type ThemeConstantsScreenProps = {
     title?: string;
     description?: string;
     beforeContent?: React.ReactNode;
+    footerContent?: React.ReactNode;
     onSelectConstant?: (entry: {
         name: string;
         value: unknown;
     }) => void;
 };
-export declare const ThemeConstantsScreen: ({ constants, title, description, beforeContent, onSelectConstant, }: ThemeConstantsScreenProps) => React.JSX.Element;
+export declare const ThemeConstantsScreen: ({ constants, title, description, beforeContent, footerContent, onSelectConstant, }: ThemeConstantsScreenProps) => React.JSX.Element;
 //# sourceMappingURL=ThemeConstantsScreen.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeConstantsScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemeConstantsScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CACtE,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,qEAMlC,yBAAyB,sBAgC3B,CAAC"}
+{"version":3,"file":"ThemeConstantsScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemeConstantsScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CACtE,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,oFAOlC,yBAAyB,sBAsC3B,CAAC"}

package/dist/screens/ThemeConstantsScreen.js

@@ -3,12 +3,12 @@ import { Box, Card, Page, Section, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
 import React from 'react';
 import { Pressable, useWindowDimensions } from 'react-native';
-export const ThemeConstantsScreen = ({ constants, title = 'UI Kit - Constants', description = 'Theme constants', beforeContent, onSelectConstant, }) => {
+export const ThemeConstantsScreen = ({ constants, title = 'UI Kit - Constants', description = 'Theme constants', beforeContent, footerContent, onSelectConstant, }) => {
     const { text } = useTheme();
     const { width } = useWindowDimensions();
     const columns = width >= 1200 ? 3 : width >= 768 ? 2 : 1;
     const entries = React.useMemo(() => Object.entries(constants)
         .filter(([, value]) => typeof value === 'object' && value != null)
         .sort((left, right) => left[0].localeCompare(right[0])), [constants]);
-    return (_jsx(Page, { scrollable: true, title: title, description: description, beforeContent: beforeContent, children: _jsx(Section, { withPaddingY: true, 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, { 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(Page, { scrollable: true, title: title, description: description, beforeContent: beforeContent, footerContent: footerContent, children: _jsx(Section, { withPaddingY: true, 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, { 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))) }) }) }));
 };

package/dist/screens/ThemeTypographyScreen.d.ts

@@ -3,6 +3,7 @@ export type ThemeTypographyScreenProps = {
     title?: string;
     description?: string;
     beforeContent?: React.ReactNode;
+    footerContent?: React.ReactNode;
 };
-export declare const ThemeTypographyScreen: ({ typography, title, description, beforeContent, }: ThemeTypographyScreenProps) => import("react").JSX.Element;
+export declare const ThemeTypographyScreen: ({ typography, title, description, beforeContent, footerContent, }: ThemeTypographyScreenProps) => import("react").JSX.Element;
 //# sourceMappingURL=ThemeTypographyScreen.d.ts.map

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;CACjC,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,oDAKnC,0BAA0B,gCAgC5B,CAAC"}
+{"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,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,mEAMnC,0BAA0B,gCAsC5B,CAAC"}

package/dist/screens/ThemeTypographyScreen.js

@@ -3,9 +3,9 @@ import { Box, Card, Page, Section, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
 import { useWindowDimensions } from 'react-native';
 import { JsonBlock } from '../components/JsonBlock';
-export const ThemeTypographyScreen = ({ typography, title = 'UI Kit - Theme typography', description = 'Theme text styles', beforeContent, }) => {
+export const ThemeTypographyScreen = ({ typography, title = 'UI Kit - Theme typography', description = 'Theme text styles', beforeContent, footerContent, }) => {
     const { text } = useTheme();
     const { width } = useWindowDimensions();
     const columns = width >= 1200 ? 3 : width >= 768 ? 2 : 1;
-    return (_jsx(Page, { scrollable: true, title: title, description: description, beforeContent: beforeContent, children: _jsx(Section, { withPaddingY: true, children: _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 16, children: Object.entries(typography).map(([key, value]) => (_jsx(Box, { width: columns === 1 ? '100%' : columns === 2 ? '48%' : '31%', children: _jsx(Card, { children: _jsxs(Box, { display: "flex", gap: 16, p: '100', children: [_jsx(Typography, { style: text.Titres['H5 - XS'], children: key }), typeof value === 'object' && value != null ? (Object.entries(value).map(([subKey, subValue]) => (_jsxs(Box, { display: "flex", gap: 8, children: [_jsx(Typography, { style: text['Corps de texte'].XS.SemiBold, children: subKey }), _jsx(JsonBlock, { value: subValue })] }, subKey)))) : (_jsx(JsonBlock, { value: value }))] }) }) }, key))) }) }) }));
+    return (_jsx(Page, { scrollable: true, title: title, description: description, beforeContent: beforeContent, footerContent: footerContent, children: _jsx(Section, { withPaddingY: true, children: _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 16, children: Object.entries(typography).map(([key, value]) => (_jsx(Box, { width: columns === 1 ? '100%' : columns === 2 ? '48%' : '31%', children: _jsx(Card, { children: _jsxs(Box, { display: "flex", gap: 16, p: '100', children: [_jsx(Typography, { style: text.Titres['H5 - XS'], children: key }), typeof value === 'object' && value != null ? (Object.entries(value).map(([subKey, subValue]) => (_jsxs(Box, { display: "flex", gap: 8, children: [_jsx(Typography, { style: text['Corps de texte'].XS.SemiBold, children: subKey }), _jsx(JsonBlock, { value: subValue })] }, subKey)))) : (_jsx(JsonBlock, { value: value }))] }) }) }, key))) }) }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/storybook",
-  "version": "0.41.0",
+  "version": "0.42.1",
   "description": "Catalog screens and helpers for Alveole stories and theme tokens.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",