@alveole/storybook 0.26.0 → 0.28.0

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

@@ -1 +1 @@
-{"version":3,"file":"FilterBadge.d.ts","sourceRoot":"","sources":["../../src/components/FilterBadge.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,4BAA4B,gBAAgB,4CAQvE,CAAC"}
+{"version":3,"file":"FilterBadge.d.ts","sourceRoot":"","sources":["../../src/components/FilterBadge.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,4BAA4B,gBAAgB,4CA+BvE,CAAC"}

package/dist/components/FilterBadge.js

@@ -1,4 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Badge, Box } from '@alveole/components';
+import { Box, Typography } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
 import { Pressable } from 'react-native';
-export const FilterBadge = ({ active, label, onPress }) => (_jsx(Pressable, { onPress: onPress, children: _jsx(Box, { children: _jsx(Badge, { variant: active ? 'new' : 'default', size: "sm", children: label }) }) }));
+export const FilterBadge = ({ active, label, onPress }) => {
+    const { color, radius, text, spacing } = useTheme();
+    return (_jsx(Pressable, { onPress: onPress, children: _jsx(Box, { borderColor: active ? color.light.border['action-low-primary'] : color.light.border['default-grey'], borderRadius: radius('full'), borderWidth: 1, p: '000', style: {
+                backgroundColor: active ? color.light.background['contrast-info'] : color.light.background['default-grey'],
+                paddingLeft: spacing('1W'),
+                paddingRight: spacing('1W'),
+                paddingTop: spacing('0,5V'),
+                paddingBottom: spacing('0,5V'),
+            }, children: _jsx(Typography, { style: [
+                    text['Corps de texte'].XS.CapsBold,
+                    {
+                        color: active ? color.light.text['default-info'] : color.light.text['default-grey'],
+                    },
+                ], children: label }) }) }));
+};

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

@@ -1 +1 @@
-{"version":3,"file":"JsonBlock.d.ts","sourceRoot":"","sources":["../../src/components/JsonBlock.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,WAAW,cAAc,4CAyBlD,CAAC"}
+{"version":3,"file":"JsonBlock.d.ts","sourceRoot":"","sources":["../../src/components/JsonBlock.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,WAAW,cAAc,4CA0BlD,CAAC"}

package/dist/components/JsonBlock.js

@@ -3,7 +3,7 @@ import { Box, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
 export const JsonBlock = ({ value }) => {
     const { text, color, radius } = useTheme();
-    return (_jsx(Box, { backgroundColor: color.light.background['alt-grey'], borderColor: color.light.border['plain-grey'], borderRadius: radius('md'), borderWidth: 1, p: '100', width: '100%', children: _jsx(Typography, { style: [
+    return (_jsx(Box, { backgroundColor: color.light.background['alt-grey'], borderColor: color.light.border['plain-grey'], borderRadius: radius('md'), borderWidth: 1, p: '100', mt: '1,5V', width: '100%', children: _jsx(Typography, { style: [
                 text['Corps de texte'].SM.Regular,
                 {
                     fontFamily: 'monospace',

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

@@ -1 +1 @@
-{"version":3,"file":"SearchField.d.ts","sourceRoot":"","sources":["../../src/components/SearchField.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,6CAA6C,gBAAgB,4CAuBxF,CAAC"}
+{"version":3,"file":"SearchField.d.ts","sourceRoot":"","sources":["../../src/components/SearchField.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,6CAA6C,gBAAgB,4CA0BxF,CAAC"}

package/dist/components/SearchField.js

@@ -4,13 +4,14 @@ import { useTheme } from '@alveole/theme';
 import { TextInput } from 'react-native';
 export const SearchField = ({ label, placeholder, value, onChangeText }) => {
     const { text, color, radius, spacing } = useTheme();
-    return (_jsxs(Box, { display: "flex", gap: 8, children: [_jsx(Typography, { style: text['Corps de texte'].SM.SemiBold, children: label }), _jsx(TextInput, { placeholder: placeholder, value: value, onChangeText: onChangeText, placeholderTextColor: color.light.text['mention-grey'], style: {
+    return (_jsxs(Box, { display: "flex", gap: 8, children: [_jsx(Typography, { style: text['Corps de texte'].XS.CapsBold, children: label }), _jsx(TextInput, { placeholder: placeholder, value: value, onChangeText: onChangeText, placeholderTextColor: color.light.text['mention-grey'], autoCapitalize: "none", autoCorrect: false, style: {
                     borderWidth: 1,
-                    borderColor: color.light.border['plain-grey'],
+                    borderColor: color.light.border['default-grey'],
                     borderRadius: radius('md'),
-                    paddingVertical: spacing('075'),
-                    paddingHorizontal: spacing('100'),
+                    paddingVertical: spacing('1W'),
+                    paddingHorizontal: spacing('2W'),
                     backgroundColor: color.light.background['default-grey'],
                     color: color.light.text['default-grey'],
+                    ...text['Corps de texte'].MD.Regular,
                 } })] }));
 };

package/dist/components/StoryCard.js

@@ -7,5 +7,5 @@ export const StoryCard = ({ story, onPress }) => {
     const { text } = useTheme();
     const meta = story.default;
     const flags = getStoryFlags(meta);
-    return (_jsx(Pressable, { onPress: onPress ? () => onPress(story) : undefined, children: _jsx(Card, { height: '100%', children: _jsxs(Card.Section, { display: "flex", gap: 12, p: '100', children: [_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: [meta.tags.map(tag => (_jsx(Badge, { variant: "info", size: "sm", children: tag }, tag))), flags.map(flag => (_jsx(Badge, { variant: "default", size: "sm", 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: meta.description })] }) }) }));
+    return (_jsx(Pressable, { onPress: onPress ? () => onPress(story) : undefined, style: { height: '100%' }, children: _jsx(Card, { height: '100%', children: _jsxs(Box, { display: "flex", gap: 12, p: '100', style: { height: '100%' }, 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: meta.description })] }) }) }));
 };

package/dist/components/UIKitTopBar.d.ts

@@ -0,0 +1,11 @@
+export type UIKitTopBarItem = {
+    key: string;
+    label: string;
+    onPress: () => void;
+};
+export type UIKitTopBarProps = {
+    activeKey: string;
+    items: UIKitTopBarItem[];
+};
+export declare const UIKitTopBar: ({ activeKey, items }: UIKitTopBarProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UIKitTopBar.d.ts.map

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

@@ -0,0 +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,4CA+EjE,CAAC"}

package/dist/components/UIKitTopBar.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+import { Pressable, useWindowDimensions } from 'react-native';
+export const UIKitTopBar = ({ activeKey, items }) => {
+    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'].XS.CapsBold, children: "UI Kit" }), _jsx(Typography, { style: {
+                                ...text['Corps de texte'].XS.Regular,
+                                color: color.light.text['mention-grey'],
+                            }, children: "Alveole" })] }), _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));
+                    }) })] }) }));
+};

package/dist/index.d.ts

@@ -1,4 +1,8 @@
 export * from './components/JsonBlock';
+export * from './components/UIKitTopBar';
+export * from './pages/UIKitHomePage';
+export * from './pages/UIKitPage';
+export * from './pages/UIKitThemePage';
 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,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,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"}

package/dist/index.js

@@ -1,4 +1,8 @@
 export * from './components/JsonBlock';
+export * from './components/UIKitTopBar';
+export * from './pages/UIKitHomePage';
+export * from './pages/UIKitPage';
+export * from './pages/UIKitThemePage';
 export * from './screens/StoriesScreen';
 export * from './screens/StoryDetailScreen';
 export * from './screens/ThemeConstantDetailScreen';

package/dist/pages/UIKitHomePage.d.ts

@@ -0,0 +1,9 @@
+export type UIKitHomePageProps = {
+    title?: string;
+    description?: string;
+    onOpenComponents: () => void;
+    onOpenTheme: () => void;
+    onOpenConstants: () => void;
+};
+export declare const UIKitHomePage: ({ title, description, onOpenComponents, onOpenTheme, onOpenConstants, }: UIKitHomePageProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UIKitHomePage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UIKitHomePage.d.ts","sourceRoot":"","sources":["../../src/pages/UIKitHomePage.tsx"],"names":[],"mappings":"AAsBA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,yEAM3B,kBAAkB,4CAwBpB,CAAC"}

package/dist/pages/UIKitHomePage.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Card, Page, Section, Typography } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+const HomeCard = ({ 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 })] }) }));
+};
+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(HomeCard, { title: "Composants", description: "Liste des composants disponibles pour le d\u00E9veloppement.", onPress: onOpenComponents }), _jsx(HomeCard, { title: "Th\u00E8me", description: "Th\u00E8me de l\u2019application, liste des tokens issus du design system.", onPress: onOpenTheme }), _jsx(HomeCard, { title: "Constantes", description: "Liste des constantes de th\u00E8me expos\u00E9es par la librairie.", onPress: onOpenConstants })] }) }) }));
+};

package/dist/pages/UIKitPage.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { StorybookModule } from '../types';
+type BlankPage = {
+    title?: string;
+    description?: string;
+    render: () => React.ReactNode;
+};
+export type UIKitPageProps = {
+    stories: StorybookModule[];
+    constants: Record<string, unknown>;
+    palette?: Record<string, any>;
+    typography?: Record<string, unknown>;
+    title?: string;
+    description?: string;
+    blankPage?: BlankPage;
+};
+export declare const UIKitPage: ({ stories, constants, palette, typography, title, description, blankPage, }: UIKitPageProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=UIKitPage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UIKitPage.d.ts","sourceRoot":"","sources":["../../src/pages/UIKitPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C,KAAK,SAAS,GAAG;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CAC/B,CAAC;AAaF,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAwGF,eAAO,MAAM,SAAS,GAAI,6EAQvB,cAAc,mDAmHhB,CAAC"}

package/dist/pages/UIKitPage.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Card, Page, Section, Typography } from '@alveole/components';
+import { CustomPalette, CustomTypography, useTheme } from '@alveole/theme';
+import React from 'react';
+import { StoriesScreen } from '../screens/StoriesScreen';
+import { StoryDetailScreen } from '../screens/StoryDetailScreen';
+import { ThemeConstantDetailScreen } from '../screens/ThemeConstantDetailScreen';
+import { ThemeConstantsScreen } from '../screens/ThemeConstantsScreen';
+import { ThemePaletteScreen } from '../screens/ThemePaletteScreen';
+import { ThemeTypographyScreen } from '../screens/ThemeTypographyScreen';
+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 })] }) }));
+};
+const InternalHeader = ({ canGoBack, onBack }) => {
+    if (!canGoBack)
+        return null;
+    return (_jsx(Section, { withPaddingY: true, children: _jsx(Box, { children: _jsx(Button, { title: "Retour", variant: "tertiary", size: "sm", onPress: onBack }) }) }));
+};
+const HomeScreen = ({ title, description, blankPage, onOpenComponents, onOpenTheme, onOpenConstants, onOpenBlank, }) => {
+    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 }), blankPage ? (_jsx(MenuCard, { title: blankPage.title ?? 'Page vierge', description: blankPage.description ?? 'Espace de test libre pour expérimenter.', onPress: onOpenBlank })) : null] }) }) }));
+};
+const ThemeHomeScreen = ({ onOpenColors, onOpenTypography, beforeContent, }) => {
+    return (_jsx(Page, { scrollable: true, title: "UI Kit - Th\u00E8me", description: "Tokens du th\u00E8me", 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 })] }) }) }));
+};
+export const UIKitPage = ({ stories, constants, palette = CustomPalette, typography = CustomTypography, title = 'UI Kit', description = 'Documentation du design system', blankPage, }) => {
+    const [history, setHistory] = React.useState([{ name: 'home' }]);
+    const route = history[history.length - 1];
+    const canGoBack = history.length > 1;
+    const push = React.useCallback((nextRoute) => {
+        setHistory(current => [...current, nextRoute]);
+    }, []);
+    const goBack = React.useCallback(() => {
+        setHistory(current => (current.length > 1 ? current.slice(0, -1) : current));
+    }, []);
+    const beforeContent = _jsx(InternalHeader, { canGoBack: canGoBack, onBack: goBack });
+    if (route.name === 'home') {
+        return (_jsx(HomeScreen, { title: title, description: description, blankPage: blankPage, onOpenComponents: () => push({ name: 'components' }), onOpenTheme: () => push({ name: 'theme-home' }), onOpenConstants: () => push({ name: 'constants' }), onOpenBlank: () => push({ name: 'blank' }) }));
+    }
+    if (route.name === 'components') {
+        return (_jsx(StoriesScreen, { beforeContent: beforeContent, stories: stories, title: "UI Kit - Composants", description: "Catalogue des composants", createLabel: blankPage ? (blankPage.title ?? 'Page vierge') : undefined, onCreatePress: blankPage ? () => push({ name: 'blank' }) : undefined, onSelectStory: story => push({ name: 'component-detail', story }) }));
+    }
+    if (route.name === 'component-detail') {
+        return (_jsx(StoryDetailScreen, { beforeContent: beforeContent, story: route.story, notFoundMessage: "Composant introuvable" }));
+    }
+    if (route.name === 'theme-home') {
+        return (_jsx(ThemeHomeScreen, { beforeContent: beforeContent, onOpenColors: () => push({ name: 'theme-colors' }), onOpenTypography: () => push({ name: 'theme-typography' }) }));
+    }
+    if (route.name === 'theme-colors') {
+        return (_jsx(ThemePaletteScreen, { beforeContent: beforeContent, palette: palette, title: "UI Kit - Couleurs du th\u00E8me", description: "Palette et couleurs du th\u00E8me" }));
+    }
+    if (route.name === 'theme-typography') {
+        return (_jsx(ThemeTypographyScreen, { beforeContent: beforeContent, typography: typography, title: "UI Kit - Textes du th\u00E8me", description: "Styles de texte du th\u00E8me" }));
+    }
+    if (route.name === 'constants') {
+        return (_jsx(ThemeConstantsScreen, { beforeContent: beforeContent, constants: constants, title: "UI Kit - Constantes", description: "Constantes expos\u00E9es par le th\u00E8me", onSelectConstant: ({ name, value }) => push({ name: 'constant-detail', constantName: name, constantValue: value }) }));
+    }
+    if (route.name === 'constant-detail') {
+        return (_jsx(ThemeConstantDetailScreen, { beforeContent: beforeContent, name: route.constantName, value: route.constantValue }));
+    }
+    if (route.name === 'blank' && blankPage) {
+        return (_jsx(Page, { scrollable: true, title: blankPage.title ?? 'Page vierge', description: blankPage.description ?? 'Zone de test libre', beforeContent: beforeContent, children: _jsx(Section, { withPaddingY: true, children: blankPage.render() }) }));
+    }
+    return null;
+};

package/dist/pages/UIKitThemePage.d.ts

@@ -0,0 +1,8 @@
+export type UIKitThemePageProps = {
+    title?: string;
+    description?: string;
+    onOpenColors: () => void;
+    onOpenTypography: () => void;
+};
+export declare const UIKitThemePage: ({ title, description, onOpenColors, onOpenTypography, }: UIKitThemePageProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UIKitThemePage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UIKitThemePage.d.ts","sourceRoot":"","sources":["../../src/pages/UIKitThemePage.tsx"],"names":[],"mappings":"AAsBA,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,yDAK5B,mBAAmB,4CAerB,CAAC"}

package/dist/pages/UIKitThemePage.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Card, Page, Section, Typography } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+const ThemeCard = ({ 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 })] }) }));
+};
+export const UIKitThemePage = ({ title = 'UI Kit - Thème', description = 'Tokens du thème', onOpenColors, onOpenTypography, }) => {
+    return (_jsx(Page, { scrollable: true, title: title, description: description, children: _jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: 16, children: [_jsx(ThemeCard, { title: "Couleurs", description: "Palette et couleurs du th\u00E8me.", onPress: onOpenColors }), _jsx(ThemeCard, { title: "Typographies", description: "Styles de texte et hi\u00E9rarchie typographique.", onPress: onOpenTypography })] }) }) }));
+};

package/dist/screens/StoriesScreen.d.ts

@@ -1,12 +1,14 @@
+import React from 'react';
 import { StorybookModule } from '../types';
 export type StoriesScreenProps = {
     stories: StorybookModule[];
     title?: string;
     description?: string;
     emptyMessage?: string;
+    beforeContent?: React.ReactNode;
     createLabel?: string;
     onCreatePress?: () => void;
     onSelectStory?: (story: StorybookModule) => void;
 };
-export declare const StoriesScreen: ({ stories, title, description, emptyMessage, createLabel, onCreatePress, onSelectStory, }: StoriesScreenProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StoriesScreen: ({ stories, title, description, emptyMessage, beforeContent, createLabel, onCreatePress, onSelectStory, }: StoriesScreenProps) => import("react/jsx-runtime").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":"AAOA,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,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,2FAQ3B,kBAAkB,4CAmGpB,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,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,4CAgKpB,CAAC"}

package/dist/screens/StoriesScreen.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Button, Page, Section, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
 import React from 'react';
@@ -14,10 +14,15 @@ 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.', createLabel, onCreatePress, onSelectStory, }) => {
-    const { text } = useTheme();
+export const StoriesScreen = ({ stories, title = 'UI Kit - Components', description = 'Shared component catalog', emptyMessage = 'No story found.', beforeContent, createLabel, onCreatePress, onSelectStory, }) => {
+    const { text, color, radius } = useTheme();
     const { width } = useWindowDimensions();
     const columns = width >= 1200 ? 3 : width >= 768 ? 2 : 1;
+    const columnStyle = columns === 1
+        ? { width: '100%' }
+        : columns === 2
+            ? { width: 'calc((100% - 16px) / 2)' }
+            : { width: 'calc((100% - 32px) / 3)' };
     const [query, setQuery] = React.useState('');
     const [selectedTag, setSelectedTag] = React.useState(null);
     const [selectedFlag, setSelectedFlag] = React.useState(null);
@@ -29,5 +34,22 @@ export const StoriesScreen = ({ stories, title = 'UI Kit - Components', descript
         selectedFlag,
     }), [stories, query, selectedTag, selectedFlag]);
     const groupedStories = React.useMemo(() => groupStoriesByTag(filteredStories, allTags), [filteredStories, allTags]);
-    return (_jsxs(Page, { scrollable: true, title: title, description: description, beforeContent: createLabel && onCreatePress ? (_jsx(Section, { withPaddingY: true, children: _jsx(Box, { style: { alignItems: 'flex-end' }, children: _jsx(Button, { title: createLabel, variant: "primary", onPress: onCreatePress }) }) })) : undefined, children: [_jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: 16, children: [_jsx(SearchField, { label: "Search", placeholder: "Button, Tabs, Card...", value: query, onChangeText: setQuery }), _jsxs(Box, { display: "flex", gap: 8, children: [_jsx(Typography, { style: text['Corps de texte'].SM.SemiBold, children: "Tags" }), _jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: [_jsx(FilterBadge, { active: selectedTag === null, label: "All", 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, children: [_jsx(Typography, { style: text['Corps de texte'].SM.SemiBold, children: "Flags" }), _jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: [_jsx(FilterBadge, { active: selectedFlag === null, label: "All", 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)))] })] }), _jsxs(Typography, { style: text['Corps de texte'].SM.Regular, children: [filteredStories.length, " result", filteredStories.length > 1 ? 's' : ''] })] }) }), 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, { width: columns === 1 ? '100%' : columns === 2 ? '48%' : '31%', children: _jsx(StoryCard, { story: story, onPress: onSelectStory }) }, story.default.title))) })] }) }, tag))))] }));
+    const hasActiveFilters = query.trim().length > 0 || selectedTag !== null || selectedFlag !== null;
+    const activeFiltersCount = [query.trim().length > 0, selectedTag !== null, selectedFlag !== null].filter(Boolean).length;
+    return (_jsxs(Page, { scrollable: true, title: title, description: description, beforeContent: _jsxs(_Fragment, { children: [beforeContent, createLabel && onCreatePress ? (_jsx(Section, { withPaddingY: true, children: _jsx(Box, { style: { alignItems: 'flex-end' }, children: _jsx(Button, { title: createLabel, variant: "primary", onPress: onCreatePress }) }) })) : null] }), children: [_jsx(Section, { withPaddingY: true, 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: width >= 1024 ? 'center' : 'stretch',
+                                flexDirection: width >= 1024 ? 'row' : 'column',
+                                justifyContent: 'space-between',
+                            }, children: [_jsxs(Box, { display: "flex", gap: 4, children: [_jsx(Typography, { style: text.Titres['H5 - XS'], children: "Filtres" }), _jsxs(Typography, { style: text['Corps de texte'].SM.Regular, children: [filteredStories.length, " composant", filteredStories.length > 1 ? 's' : '', hasActiveFilters
+                                                    ? `, ${activeFiltersCount} filtre${activeFiltersCount > 1 ? 's' : ''} actif${activeFiltersCount > 1 ? 's' : ''}`
+                                                    : ''] })] }), hasActiveFilters ? (_jsx(Button, { title: "R\u00E9initialiser", variant: "tertiary", size: "sm", onPress: () => {
+                                        setQuery('');
+                                        setSelectedTag(null);
+                                        setSelectedFlag(null);
+                                    } })) : 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))))] }));
 };

package/dist/screens/StoryDetailScreen.d.ts

@@ -2,6 +2,7 @@ import { StorybookModule } from '../types';
 export type StoryDetailScreenProps = {
     story?: StorybookModule | null;
     notFoundMessage?: string;
+    beforeContent?: React.ReactNode;
 };
-export declare const StoryDetailScreen: ({ story, notFoundMessage }: StoryDetailScreenProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StoryDetailScreen: ({ story, notFoundMessage, beforeContent, }: StoryDetailScreenProps) => import("react/jsx-runtime").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":"AAIA,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;CAC1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,4BAAiD,sBAAsB,4CA4FxG,CAAC"}
+{"version":3,"file":"StoryDetailScreen.d.ts","sourceRoot":"","sources":["../../src/screens/StoryDetailScreen.tsx"],"names":[],"mappings":"AAIA,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;AA8DF,eAAO,MAAM,iBAAiB,GAAI,4CAI/B,sBAAsB,4CAgJxB,CAAC"}

package/dist/screens/StoryDetailScreen.js

@@ -1,20 +1,46 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Button, Divider, Page, Section, Tabs, Typography } from '@alveole/components';
+import { Box, Button, Page, Section, Tabs, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
 import { Linking } from 'react-native';
 import { JsonBlock } from '../components/JsonBlock';
 import { getStoryExamples, getStoryFlags } from '../utils';
-export const StoryDetailScreen = ({ story, notFoundMessage = 'Story not found.' }) => {
-    const { text } = useTheme();
+const DetailPill = ({ label, tone = 'info' }) => {
+    const { color, radius, text, spacing } = useTheme();
+    return (_jsx(Box, { borderColor: tone === 'tag' ? color.light.border['action-low-primary'] : color.light.border['default-grey'], borderRadius: radius('full'), borderWidth: 1, style: {
+            backgroundColor: tone === 'tag' ? color.light.background['contrast-info'] : color.light.background['default-grey'],
+            paddingLeft: spacing('1W'),
+            paddingRight: spacing('1W'),
+            paddingTop: spacing('0,5V'),
+            paddingBottom: spacing('0,5V'),
+        }, children: _jsx(Typography, { style: [
+                text['Corps de texte'].XS.CapsBold,
+                {
+                    color: tone === 'tag' ? color.light.text['default-info'] : color.light.text['default-grey'],
+                },
+            ], children: label }) }));
+};
+const MetaCard = ({ label, value }) => {
+    const { color, radius, text } = useTheme();
+    return (_jsxs(Box, { borderColor: color.light.border['default-grey'], borderRadius: radius('md'), borderWidth: 1, display: "flex", gap: 4, p: '100', style: { backgroundColor: color.light.background['alt-grey'], minWidth: 160 }, children: [_jsx(Typography, { style: text['Corps de texte'].XS.CapsBold, children: label }), _jsx(Typography, { style: text['Corps de texte'].SM.SemiBold, children: value })] }));
+};
+export const StoryDetailScreen = ({ story, notFoundMessage = 'Story not found.', beforeContent, }) => {
+    const { text, color, radius } = useTheme();
     if (!story) {
-        return (_jsx(Page, { title: "Story not found", description: notFoundMessage, 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, 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);
     const examples = getStoryExamples(story);
     const isTemplate = meta.tags.includes('Template');
-    const examplesContent = (_jsx(Box, { display: "flex", gap: 16, children: examples.map(([key, Example]) => (_jsxs(Box, { display: "flex", gap: 12, children: [!isTemplate ? _jsx(Typography, { style: text['Corps de texte'].SM.SemiBold, children: key }) : null, _jsx(Box, { borderColor: '#e8e8e8', borderWidth: 1, borderRadius: 8, p: '100', style: isTemplate ? { minHeight: 400 } : undefined, children: _jsx(Example, {}) }), _jsx(Divider, {})] }, key))) }));
-    return (_jsx(Page, { scrollable: true, title: meta.title, description: meta.description, children: _jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: 16, children: [_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: [meta.tags.map(tag => (_jsx(Typography, { style: text['Corps de texte'].XS.SemiBold, children: tag }, tag))), flags.map(flag => (_jsx(Typography, { style: text['Corps de texte'].XS.Regular, children: flag.label }, flag.key)))] }), meta.figmaURL ? (_jsx(Box, { style: { alignItems: 'flex-start' }, children: _jsx(Button, { title: "Open Figma", variant: "primary", onPress: () => Linking.openURL(meta.figmaURL) }) })) : null, _jsx(Tabs, { defaultValue: "examples", tabs: [
+    const examplesContent = (_jsx(Box, { display: "flex", gap: 24, mt: '1,5V', children: examples.map(([key, Example]) => (_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: [!isTemplate ? (_jsx(Box, { display: "flex", gap: 6, children: _jsx(Typography, { style: text.Titres['H5 - XS'], children: key }) })) : null, _jsx(Box, { borderColor: color.light.border['default-grey'], borderWidth: 1, borderRadius: radius('md'), p: '100', style: {
+                        backgroundColor: color.light.background['default-grey'],
+                        minHeight: isTemplate ? 420 : undefined,
+                    }, children: _jsx(Example, {}) })] }, 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: {
+                                    alignItems: 'flex-start',
+                                    flexDirection: 'row',
+                                    justifyContent: 'space-between',
+                                }, children: [_jsxs(Box, { display: "flex", gap: 6, style: { flex: 1 }, children: [_jsx(Typography, { style: text.Titres['H3 - MD'], children: meta.title }), _jsx(Typography, { style: text['Corps de texte'].MD.Regular, children: meta.description })] }), meta.figmaURL ? (_jsx(Button, { title: "Ouvrir Figma", variant: "primary", onPress: () => Linking.openURL(meta.figmaURL) })) : null] }), _jsxs(Box, { display: "flex", gap: 10, children: [_jsx(Typography, { style: text['Corps de texte'].XS.CapsBold, children: "Tags" }), _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: meta.tags.map(tag => (_jsx(DetailPill, { label: tag, tone: "tag" }, tag))) })] }), flags.length > 0 ? (_jsxs(Box, { display: "flex", gap: 10, children: [_jsx(Typography, { style: text['Corps de texte'].XS.CapsBold, children: "Informations" }), _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: flags.map(flag => (_jsx(DetailPill, { label: flag.label }, flag.key))) })] })) : null, _jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 12, children: [_jsx(MetaCard, { label: "Exemples", value: String(examples.length) }), _jsx(MetaCard, { label: "Styles", value: "Disponibles" }), meta.props != null ? _jsx(MetaCard, { label: "Props", value: "Document\u00E9es" }) : null] })] }), _jsx(Tabs, { defaultValue: "examples", tabs: [
                             {
                                 value: 'examples',
                                 label: 'Examples',

package/dist/screens/ThemeConstantDetailScreen.d.ts

@@ -1,6 +1,7 @@
 export type ThemeConstantDetailScreenProps = {
     name: string;
     value: unknown;
+    beforeContent?: React.ReactNode;
 };
-export declare const ThemeConstantDetailScreen: ({ name, value }: ThemeConstantDetailScreenProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemeConstantDetailScreen: ({ name, value, beforeContent }: ThemeConstantDetailScreenProps) => import("react/jsx-runtime").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;CAChB,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,iBAAiB,8BAA8B,4CAsBxF,CAAC"}
+{"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,4CAsBvG,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 }) => {
+export const ThemeConstantDetailScreen = ({ name, value, beforeContent }) => {
     const { text } = useTheme();
     const entries = typeof value === 'object' && value != null ? Object.entries(value) : [];
-    return (_jsx(Page, { scrollable: true, title: name, description: name, 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, 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

@@ -1,11 +1,13 @@
+import React from 'react';
 export type ThemeConstantsScreenProps = {
     constants: Record<string, unknown>;
     title?: string;
     description?: string;
+    beforeContent?: React.ReactNode;
     onSelectConstant?: (entry: {
         name: string;
         value: unknown;
     }) => void;
 };
-export declare const ThemeConstantsScreen: ({ constants, title, description, onSelectConstant, }: ThemeConstantsScreenProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemeConstantsScreen: ({ constants, title, description, beforeContent, onSelectConstant, }: ThemeConstantsScreenProps) => import("react/jsx-runtime").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":"AAKA,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,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,sDAKlC,yBAAyB,4CAgC3B,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,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,4CAgC3B,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', onSelectConstant, }) => {
+export const ThemeConstantsScreen = ({ constants, title = 'UI Kit - Constants', description = 'Theme constants', beforeContent, 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, 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(Card.Section, { p: '100', children: _jsx(Typography, { style: text.Titres['H5 - XS'], children: name }) }) }) }) }, name))) }) }) }));
+    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))) }) }) }));
 };

package/dist/screens/ThemePaletteScreen.d.ts

@@ -6,7 +6,8 @@ export type ThemePaletteScreenProps = {
     palette: Record<string, PaletteValue>;
     title?: string;
     description?: string;
+    beforeContent?: React.ReactNode;
 };
-export declare const ThemePaletteScreen: ({ palette, title, description, }: ThemePaletteScreenProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemePaletteScreen: ({ palette, title, description, beforeContent, }: ThemePaletteScreenProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ThemePaletteScreen.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ThemePaletteScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemePaletteScreen.tsx"],"names":[],"mappings":"AAKA,UAAU,YAAY;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,YAAY,CAAC;CAC7B;AAED,KAAK,YAAY,GAAG,MAAM,GAAG,YAAY,CAAC;AAmB1C,MAAM,MAAM,uBAAuB,GAAG;IACpC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,kCAIhC,uBAAuB,4CAuBzB,CAAC"}
+{"version":3,"file":"ThemePaletteScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemePaletteScreen.tsx"],"names":[],"mappings":"AAKA,UAAU,YAAY;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,YAAY,CAAC;CAC7B;AAED,KAAK,YAAY,GAAG,MAAM,GAAG,YAAY,CAAC;AAmB1C,MAAM,MAAM,uBAAuB,GAAG;IACpC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,iDAKhC,uBAAuB,4CAuBzB,CAAC"}

package/dist/screens/ThemePaletteScreen.js

@@ -9,9 +9,9 @@ const PaletteValueView = ({ label, value }) => {
                 ? Object.entries(value).map(([childLabel, childValue]) => (_jsx(PaletteValueView, { label: childLabel, value: childValue }, childLabel)))
                 : null] }));
 };
-export const ThemePaletteScreen = ({ palette, title = 'UI Kit - Theme colors', description = 'Theme palette', }) => {
+export const ThemePaletteScreen = ({ palette, title = 'UI Kit - Theme colors', description = 'Theme palette', beforeContent, }) => {
     const { text } = useTheme();
     const { width } = useWindowDimensions();
     const columns = width >= 1200 ? 3 : width >= 768 ? 2 : 1;
-    return (_jsx(Page, { scrollable: true, title: title, description: description, children: _jsx(Section, { withPaddingY: true, children: _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 16, children: Object.entries(palette).map(([key, value]) => (_jsx(Box, { width: columns === 1 ? '100%' : columns === 2 ? '48%' : '31%', children: _jsx(Card, { children: _jsxs(Card.Section, { display: "flex", gap: 16, p: '100', children: [_jsx(Typography, { style: text.Titres['H5 - XS'], children: key }), _jsx(PaletteValueView, { value: value })] }) }) }, key))) }) }) }));
+    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(palette).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 }), _jsx(PaletteValueView, { value: value })] }) }) }, key))) }) }) }));
 };

package/dist/screens/ThemeTypographyScreen.d.ts

@@ -2,6 +2,7 @@ export type ThemeTypographyScreenProps = {
     typography: Record<string, unknown>;
     title?: string;
     description?: string;
+    beforeContent?: React.ReactNode;
 };
-export declare const ThemeTypographyScreen: ({ typography, title, description, }: ThemeTypographyScreenProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemeTypographyScreen: ({ typography, title, description, beforeContent, }: ThemeTypographyScreenProps) => import("react/jsx-runtime").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;CACtB,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,qCAInC,0BAA0B,4CAgC5B,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;CACjC,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,oDAKnC,0BAA0B,4CAgC5B,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', }) => {
+export const ThemeTypographyScreen = ({ typography, title = 'UI Kit - Theme typography', description = 'Theme text styles', beforeContent, }) => {
     const { text } = useTheme();
     const { width } = useWindowDimensions();
     const columns = width >= 1200 ? 3 : width >= 768 ? 2 : 1;
-    return (_jsx(Page, { scrollable: true, title: title, description: description, 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(Card.Section, { 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, 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/dist/types.d.ts

@@ -1,22 +1,7 @@
-import React from 'react';
-export type StorybookTag = 'Kit' | 'Composant' | 'Template' | (string & {});
-export type StorybookMeta = {
-    title: string;
-    tags: readonly StorybookTag[];
-    experimental: boolean;
-    figmaURL?: string;
-    mobileOnly?: boolean;
-    webOnly?: boolean;
-    description: string;
-    component?: React.ComponentType<any>;
-    config?: object;
-    props?: unknown;
-    styleFn: () => string | object;
-};
-export type StorybookExample = React.ComponentType<any>;
-export type StorybookModule<TMeta extends StorybookMeta = StorybookMeta> = {
-    default: TMeta;
-} & Record<string, StorybookExample | TMeta>;
+import type { Story, StoryModule, StoryTag } from '@alveole/components';
+export type StorybookTag = StoryTag;
+export type StorybookMeta = Story;
+export type StorybookModule<TMeta extends StorybookMeta = StorybookMeta> = StoryModule<TMeta>;
 export type StorybookFlagKey = 'figma' | 'experimental' | 'props' | 'webOnly' | 'mobileOnly';
 export type StorybookFlag = {
     key: StorybookFlagKey;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,WAAW,GAAG,UAAU,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAE5E,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,YAAY,EAAE,CAAC;IAC9B,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,MAAM,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;AAExD,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,aAAa,GAAG,aAAa,IAAI;IACzE,OAAO,EAAE,KAAK,CAAC;CAChB,GAAG,MAAM,CAAC,MAAM,EAAE,gBAAgB,GAAG,KAAK,CAAC,CAAC;AAE7C,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,CAAC;AAE7F,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,gBAAgB,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAExE,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;AAEpC,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC;AAElC,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,aAAa,GAAG,aAAa,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;AAE9F,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,CAAC;AAE7F,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,gBAAgB,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC"}

package/dist/utils.d.ts

@@ -11,4 +11,7 @@ export declare const filterStories: (params: {
 export declare const sortStoriesByTitle: (stories: StorybookModule[]) => StorybookModule[];
 export declare const groupStoriesByTag: (stories: StorybookModule[], tags: string[]) => (readonly [string, StorybookModule[]])[];
 export declare const getStoryExamples: (story: StorybookModule) => [string, Exclude<StorybookModule[keyof StorybookModule], StorybookMeta>][];
+export declare const toStoryModules: (stories: Record<string, unknown>) => StorybookModule[];
+export declare const findStoryByTitle: (stories: StorybookModule[], title: string | undefined | null) => StorybookModule | null;
+export declare const findConstantByName: (constants: Record<string, unknown>, name: string | undefined | null) => [string, unknown] | null;
 //# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAUxE,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,WAIP,CAAC;AAErC,eAAO,MAAM,aAAa,GAAI,MAAM,aAAa,KAAG,aAAa,EAC+B,CAAC;AAEjG,eAAO,MAAM,eAAe,GAAI,SAAS,eAAe,EAAE,KAAG,MAAM,EAOlE,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,QAAQ;IACpC,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,YAAY,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;CAC3C,sBAoBA,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,SAAS,eAAe,EAAE,sBAC8B,CAAC;AAE5F,eAAO,MAAM,iBAAiB,GAAI,SAAS,eAAe,EAAE,EAAE,MAAM,MAAM,EAAE,6CAGd,CAAC;AAE/D,eAAO,MAAM,gBAAgB,GAAI,OAAO,eAAe,KAC+C,CAClG,MAAM,EACN,OAAO,CAAC,eAAe,CAAC,MAAM,eAAe,CAAC,EAAE,aAAa,CAAC,CAC/D,EAAE,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAUxE,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,WAIP,CAAC;AAErC,eAAO,MAAM,aAAa,GAAI,MAAM,aAAa,KAAG,aAAa,EAC+B,CAAC;AAEjG,eAAO,MAAM,eAAe,GAAI,SAAS,eAAe,EAAE,KAAG,MAAM,EAOlE,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,QAAQ;IACpC,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,YAAY,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;CAC3C,sBAoBA,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,SAAS,eAAe,EAAE,sBAC8B,CAAC;AAE5F,eAAO,MAAM,iBAAiB,GAAI,SAAS,eAAe,EAAE,EAAE,MAAM,MAAM,EAAE,6CAGd,CAAC;AAE/D,eAAO,MAAM,gBAAgB,GAAI,OAAO,eAAe,KAC+C,CAClG,MAAM,EACN,OAAO,CAAC,eAAe,CAAC,MAAM,eAAe,CAAC,EAAE,aAAa,CAAC,CAC/D,EAAE,CAAC;AAEN,eAAO,MAAM,cAAc,GAAI,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAA+B,eAAe,EAAE,CAAC;AAEhH,eAAO,MAAM,gBAAgB,GAAI,SAAS,eAAe,EAAE,EAAE,OAAO,MAAM,GAAG,SAAS,GAAG,IAAI,2BAC/B,CAAC;AAE/D,eAAO,MAAM,kBAAkB,GAAI,WAAW,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,MAAM,GAAG,SAAS,GAAG,IAAI,6BACrC,CAAC"}

package/dist/utils.js

@@ -43,3 +43,6 @@ export const groupStoriesByTag = (stories, tags) => tags
     .map(tag => [tag, stories.filter(story => story.default.tags.includes(tag))])
     .filter(([, groupedStories]) => groupedStories.length > 0);
 export const getStoryExamples = (story) => Object.entries(story).filter(([key, value]) => key !== 'default' && typeof value === 'function');
+export const toStoryModules = (stories) => Object.values(stories);
+export const findStoryByTitle = (stories, title) => stories.find(story => story.default.title === title) ?? null;
+export const findConstantByName = (constants, name) => Object.entries(constants).find(([key]) => key === name) ?? null;

package/package.json

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