@alveole/storybook 0.41.0 → 0.42.0

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":"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;AAqBF,eAAO,MAAM,WAAW,GAAI,sBAAsB,gBAAgB,gCA+CjE,CAAC"}

package/dist/components/UIKitTopBar.js

@@ -1,35 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ALVEOLE_COMPONENTS_VERSION, Box, Typography } from '@alveole/components';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Header, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
-import { Pressable, useWindowDimensions } from 'react-native';
-export const UIKitTopBar = ({ activeKey, items }) => {
+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, radius, text } = useTheme();
+    const right = (_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));
+        }) }));
+    return _jsx(Header, { logo: _jsx(AlveoleLogo, {}), title: "Alveole UI Kit", right: right });
 };

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.0",
   "description": "Catalog screens and helpers for Alveole stories and theme tokens.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",