@alveole/storybook 0.42.0 → 0.42.2

package/dist/components/DocFooter.d.ts

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

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

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

package/dist/components/DocFooter.js

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

package/dist/components/UIKitTopBar.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export type UIKitTopBarItem = {
     key: string;
     label: string;
@@ -7,5 +8,5 @@ export type UIKitTopBarProps = {
     activeKey: string;
     items: UIKitTopBarItem[];
 };
-export declare const UIKitTopBar: ({ activeKey, items }: UIKitTopBarProps) => import("react").JSX.Element;
+export declare const UIKitTopBar: ({ activeKey, items }: UIKitTopBarProps) => React.JSX.Element;
 //# sourceMappingURL=UIKitTopBar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"UIKitTopBar.d.ts","sourceRoot":"","sources":["../../src/components/UIKitTopBar.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,eAAe,EAAE,CAAC;CAC1B,CAAC;AAqBF,eAAO,MAAM,WAAW,GAAI,sBAAsB,gBAAgB,gCA+CjE,CAAC"}
+{"version":3,"file":"UIKitTopBar.d.ts","sourceRoot":"","sources":["../../src/components/UIKitTopBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,eAAe,EAAE,CAAC;CAC1B,CAAC;AAqBF,eAAO,MAAM,WAAW,GAAI,sBAAsB,gBAAgB,sBAoEjE,CAAC"}

package/dist/components/UIKitTopBar.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Header, Typography } from '@alveole/components';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Header, LucideIcon, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
+import React from 'react';
 import { Pressable } from 'react-native';
 const AlveoleLogo = () => {
     const { color, radius, text } = useTheme();
@@ -15,22 +16,30 @@ const AlveoleLogo = () => {
         }, 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));
-        }) }));
+    const { color, isVariant, spacing } = useTheme();
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    if (isVariant('mobile')) {
+        return (_jsxs(_Fragment, { children: [_jsx(Header, { logo: _jsx(AlveoleLogo, {}), right: _jsx(Pressable, { onPress: () => setMenuOpen(v => !v), style: { padding: 8 }, children: _jsx(LucideIcon, { name: menuOpen ? 'X' : 'Menu', size: "md", color: color.light.text['title-grey'] }) }) }), menuOpen && (_jsx(Box, { style: {
+                        position: 'sticky',
+                        top: 64,
+                        left: 0,
+                        right: 0,
+                        zIndex: 99,
+                        backgroundColor: color.light.background['default-grey'],
+                        borderBottomWidth: 1,
+                        borderBottomColor: color.light.border['default-grey'],
+                        paddingTop: spacing('2W'),
+                        paddingBottom: spacing('2W'),
+                        paddingLeft: spacing('2W'),
+                        paddingRight: spacing('2W'),
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: spacing('050'),
+                    }, children: items.map(item => (_jsx(Button, { variant: activeKey === item.key ? 'primary' : 'tertiary', title: item.label, size: "sm", onPress: () => {
+                            item.onPress();
+                            setMenuOpen(false);
+                        } }, item.key))) }))] }));
+    }
+    const right = (_jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: items.map(item => (_jsx(Button, { variant: activeKey === item.key ? 'primary' : 'tertiary', title: item.label, size: "sm", onPress: item.onPress }, item.key))) }));
     return _jsx(Header, { logo: _jsx(AlveoleLogo, {}), title: "Alveole UI Kit", right: right });
 };

package/dist/index.d.ts

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

package/dist/index.d.ts.map

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

package/dist/index.js

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

package/dist/pages/PhilosophyPage.d.ts

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

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

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

package/dist/pages/PhilosophyPage.js

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

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

@@ -1 +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,6BAmHhB,CAAC"}
+{"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;AAG3C,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;AAcF,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;AA2GF,eAAO,MAAM,SAAS,GAAI,6EAQvB,cAAc,6BAwHhB,CAAC"}

package/dist/pages/UIKitPage.js

@@ -8,6 +8,7 @@ import { ThemeConstantDetailScreen } from '../screens/ThemeConstantDetailScreen'
 import { ThemeConstantsScreen } from '../screens/ThemeConstantsScreen';
 import { ThemePaletteScreen } from '../screens/ThemePaletteScreen';
 import { ThemeTypographyScreen } from '../screens/ThemeTypographyScreen';
+import { PhilosophyPage } from './PhilosophyPage';
 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 })] }) }));
@@ -17,8 +18,8 @@ const InternalHeader = ({ canGoBack, onBack }) => {
         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 HomeScreen = ({ title, description, blankPage, onOpenComponents, onOpenTheme, onOpenConstants, onOpenBlank, onOpenPhilosophy, }) => {
+    return (_jsx(Page, { scrollable: true, title: title, description: description, children: _jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: 16, children: [_jsx(MenuCard, { title: "Composants", description: "Catalogue des composants et de leurs variantes.", onPress: onOpenComponents }), _jsx(MenuCard, { title: "Th\u00E8me", description: "Couleurs et typographies du design system.", onPress: onOpenTheme }), _jsx(MenuCard, { title: "Constantes", description: "Constantes expos\u00E9es par le th\u00E8me.", onPress: onOpenConstants }), _jsx(MenuCard, { title: "Philosophie", description: "Les principes qui guident Alveole.", onPress: onOpenPhilosophy }), blankPage ? (_jsx(MenuCard, { title: blankPage.title ?? 'Page vierge', description: blankPage.description ?? 'Espace de test libre pour expérimenter.', onPress: onOpenBlank })) : null] }) }) }));
 };
 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 })] }) }) }));
@@ -35,7 +36,7 @@ export const UIKitPage = ({ stories, constants, palette = CustomPalette, typogra
     }, []);
     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' }) }));
+        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' }), onOpenPhilosophy: () => push({ name: 'philosophy' }) }));
     }
     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 }) }));
@@ -58,6 +59,9 @@ export const UIKitPage = ({ stories, constants, palette = CustomPalette, typogra
     if (route.name === 'constant-detail') {
         return (_jsx(ThemeConstantDetailScreen, { beforeContent: beforeContent, name: route.constantName, value: route.constantValue }));
     }
+    if (route.name === 'philosophy') {
+        return _jsx(PhilosophyPage, { beforeContent: beforeContent });
+    }
     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() }) }));
     }

package/dist/screens/ThemePaletteScreen.d.ts

@@ -1,13 +1,10 @@
-interface PaletteScale {
-    [key: string]: PaletteValue;
-}
-type PaletteValue = string | PaletteScale;
+import React from 'react';
 export type ThemePaletteScreenProps = {
-    palette: Record<string, PaletteValue>;
+    palette: Record<string, unknown>;
     title?: string;
     description?: string;
     beforeContent?: React.ReactNode;
+    footerContent?: React.ReactNode;
 };
-export declare const ThemePaletteScreen: ({ palette, title, description, beforeContent, }: ThemePaletteScreenProps) => import("react").JSX.Element;
-export {};
+export declare const ThemePaletteScreen: ({ palette, title, description, beforeContent, footerContent, }: ThemePaletteScreenProps) => React.JSX.Element;
 //# 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;IACrB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,iDAKhC,uBAAuB,gCAuBzB,CAAC"}
+{"version":3,"file":"ThemePaletteScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemePaletteScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AA+K1B,MAAM,MAAM,uBAAuB,GAAG;IACpC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,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,kBAAkB,GAAI,gEAMhC,uBAAuB,sBAsBzB,CAAC"}

package/dist/screens/ThemePaletteScreen.js

@@ -1,17 +1,117 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Card, Page, Section, Typography } from '@alveole/components';
+import { Box, Page, Section, Typography, useToast } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
-import { useWindowDimensions } from 'react-native';
-import { JsonBlock } from '../components/JsonBlock';
-const PaletteValueView = ({ label, value }) => {
-    const { text } = useTheme();
-    return (_jsxs(Box, { display: "flex", gap: 8, children: [label ? _jsx(Typography, { style: text['Corps de texte'].XS.SemiBold, children: label }) : null, typeof value === 'string' ? _jsx(Box, { height: 48, width: 48, borderRadius: 8, backgroundColor: value }) : null, _jsx(JsonBlock, { value: value }), typeof value === 'object'
-                ? Object.entries(value).map(([childLabel, childValue]) => (_jsx(PaletteValueView, { label: childLabel, value: childValue }, childLabel)))
-                : null] }));
+import React from 'react';
+import { Pressable } from 'react-native';
+function flattenColors(obj, prefix = '') {
+    const entries = [];
+    for (const [key, val] of Object.entries(obj)) {
+        const path = prefix ? `${prefix}.${key}` : key;
+        if (typeof val === 'string') {
+            entries.push({ path, value: val });
+        }
+        else if (val && typeof val === 'object') {
+            entries.push(...flattenColors(val, path));
+        }
+    }
+    return entries;
+}
+const DEPRECATED_KEYS = [
+    'primary',
+    'transparent',
+    'danger',
+    'info',
+    'success',
+    'warning',
+    'link',
+    'text',
+    'border',
+    'background',
+    'system',
+];
+function buildSections(palette) {
+    const sections = [];
+    for (const [modeKey, modeVal] of Object.entries(palette)) {
+        if (modeKey === 'light' || modeKey === 'dark') {
+            if (modeVal && typeof modeVal === 'object') {
+                for (const [groupKey, groupVal] of Object.entries(modeVal)) {
+                    const entries = flattenColors({ [groupKey]: groupVal }, modeKey);
+                    if (entries.length > 0) {
+                        sections.push({ title: `${modeKey} / ${groupKey}`, entries });
+                    }
+                }
+            }
+        }
+    }
+    const deprecatedEntries = [];
+    for (const key of DEPRECATED_KEYS) {
+        const val = palette[key];
+        if (val !== undefined) {
+            if (typeof val === 'string') {
+                deprecatedEntries.push({ path: key, value: val });
+            }
+            else if (val && typeof val === 'object') {
+                deprecatedEntries.push(...flattenColors(val, key));
+            }
+        }
+    }
+    if (deprecatedEntries.length > 0) {
+        sections.push({ title: 'Deprecated', entries: deprecatedEntries, deprecated: true });
+    }
+    return sections;
+}
+const ColorSwatch = ({ entry }) => {
+    const toast = useToast();
+    const { color, radius } = useTheme();
+    const tokenName = entry.path.split('.').pop() ?? entry.path;
+    const handleCopy = () => {
+        if (typeof navigator !== 'undefined' && navigator.clipboard) {
+            navigator.clipboard.writeText(entry.value).then(() => {
+                toast.present('Copié !', entry.value, { variant: 'success', duration: 1500 });
+            });
+        }
+    };
+    return (_jsx(Pressable, { onPress: handleCopy, style: { width: 120, marginBottom: 8 }, children: ({ pressed }) => (_jsxs(Box, { style: {
+                borderRadius: radius('md'),
+                overflow: 'hidden',
+                opacity: pressed ? 0.8 : 1,
+                borderWidth: 1,
+                borderColor: color.light.border['default-grey'],
+            }, children: [_jsx(Box, { style: { height: 56, backgroundColor: entry.value } }), _jsxs(Box, { style: {
+                        paddingHorizontal: 8,
+                        paddingVertical: 6,
+                        backgroundColor: color.light.background['default-grey'],
+                    }, children: [_jsx(Typography, { style: { fontSize: 11, fontWeight: '600', color: color.light.text['title-grey'], lineHeight: 14 }, numberOfLines: 1, children: tokenName }), _jsx(Typography, { style: {
+                                fontSize: 10,
+                                color: color.light.text['mention-grey'],
+                                fontFamily: 'monospace',
+                                lineHeight: 14,
+                                marginTop: 2,
+                            }, numberOfLines: 1, children: entry.value })] })] })) }));
 };
-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, 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))) }) }) }));
+const ColorSectionView = ({ section }) => {
+    const [collapsed, setCollapsed] = React.useState(section.deprecated === true);
+    const { color, radius } = useTheme();
+    return (_jsxs(Box, { style: { marginBottom: 24 }, children: [_jsx(Pressable, { onPress: () => setCollapsed(c => !c), children: _jsxs(Box, { style: {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        paddingVertical: 10,
+                        paddingHorizontal: 16,
+                        backgroundColor: color.light.background['alt-grey'],
+                        borderRadius: radius('md'),
+                        borderWidth: 1,
+                        borderColor: color.light.border['default-grey'],
+                        marginBottom: collapsed ? 0 : 12,
+                    }, children: [_jsx(Typography, { style: {
+                                fontSize: 13,
+                                fontWeight: '700',
+                                color: section.deprecated ? color.light.text['mention-grey'] : color.light.text['title-grey'],
+                                flex: 1,
+                                fontFamily: 'monospace',
+                            }, children: section.title }), _jsxs(Typography, { style: { fontSize: 11, color: color.light.text['mention-grey'], marginRight: 8 }, children: [section.entries.length, " token", section.entries.length > 1 ? 's' : ''] }), _jsx(Typography, { style: { fontSize: 12, color: color.light.text['mention-grey'] }, children: collapsed ? '▸' : '▾' })] }) }), !collapsed && (_jsx(Box, { style: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, paddingHorizontal: 4 }, children: section.entries.map(entry => (_jsx(ColorSwatch, { entry: entry }, entry.path))) }))] }));
+};
+export const ThemePaletteScreen = ({ palette, title = 'UI Kit - Couleurs du thème', description = 'Palette et couleurs du thème', beforeContent, footerContent, }) => {
+    const { color } = useTheme();
+    const sections = React.useMemo(() => buildSections(palette), [palette]);
+    return (_jsx(Page, { scrollable: true, title: title, description: description, beforeContent: beforeContent, footerContent: footerContent, children: _jsxs(Section, { withPaddingY: true, children: [_jsx(Typography, { style: { fontSize: 14, color: color.light.text['mention-grey'], marginBottom: 24 }, children: 'Cliquez sur un swatch pour copier sa valeur dans le presse-papiers.' }), sections.map(section => (_jsx(ColorSectionView, { section: section }, section.title)))] }) }));
 };

package/package.json

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