@alveole/storybook 1.9.0 → 2.0.0-alpha

package/dist/screens/StoryDetailScreen.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"StoryDetailScreen.d.ts","sourceRoot":"","sources":["../../src/screens/StoryDetailScreen.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG3C,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAsGF,eAAO,MAAM,iBAAiB,GAAI,2DAK/B,sBAAsB,sBA6KxB,CAAC"}
+{"version":3,"file":"StoryDetailScreen.d.ts","sourceRoot":"","sources":["../../src/screens/StoryDetailScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAI3C,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAwBF,eAAO,MAAM,iBAAiB,GAAI,sCAI/B,sBAAsB,sBAgCxB,CAAC"}

package/dist/screens/StoryDetailScreen.js

@@ -1,80 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AnchorHeading, Box, Button, Divider, MarkdownDescription, Page, PageHeader, Section, Tag, Typography, } from '@alveole/components';
+import { Box, Page, Section, Tabs, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
-import React from 'react';
-import { Linking, ScrollView } from 'react-native';
+import { EnTeteDeFiche } from '../components/EnTeteDeFiche';
+import { ExemplesDeLaStory } from '../components/ExemplesDeLaStory';
 import { JsonBlock } from '../components/JsonBlock';
-import { screenContent } from '../styles';
-import { getStoryExamples, getStoryFlags, stripMarkdown } from '../utils';
-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 })] }));
+import { StoryLayout } from '../components/StoryLayout';
+import { StorySummary } from '../components/StorySummary';
+import { getStoryExamples } from '../utils';
+import { resumeDeLaFiche } from './sourcesDExemples';
+/** L'URL peut nommer une fiche disparue : la page se charge quand meme et le dit. */
+const FicheIntrouvable = ({ message, ...cadre }) => {
+    const { text } = useTheme();
+    return (_jsx(Page, { title: "Story not found", description: message, ...cadre, children: _jsx(Section, { withPaddingY: true, children: _jsx(Typography, { style: text['Corps de texte'].MD.Regular, children: message }) }) }));
 };
-const getSources = (story) => story.Sources;
-const getStoryExampleSource = (story, exampleName) => {
-    const sources = getSources(story);
-    const source = sources?.storySources?.[exampleName] ?? sources?.[exampleName];
-    if (typeof source === 'string')
-        return source;
-    if (typeof source === 'function') {
-        const value = source();
-        return typeof value === 'string' ? value : null;
-    }
-    return null;
-};
-const getStoryExampleDescription = (story, exampleName) => {
-    const description = getSources(story)?.storyDescriptions?.[exampleName];
-    return typeof description === 'string' ? description : null;
-};
-const DetailTabs = ({ tabs, defaultValue }) => {
-    const initialValue = defaultValue || tabs[0]?.value || '';
-    const [activeValue, setActiveValue] = React.useState(initialValue);
-    const activeTab = tabs.find(tab => tab.value === activeValue) ?? tabs[0];
-    return (_jsxs(Box, { display: "flex", gap: 16, children: [_jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: tabs.map(tab => (_jsx(Button, { title: tab.label, size: "sm", variant: "tertiary", selected: tab.value === activeTab?.value, onPress: () => setActiveValue(tab.value) }, tab.value))) }), activeTab?.scrollable ? (_jsx(ScrollView, { style: { flex: 1 }, contentContainerStyle: { paddingBottom: 16 }, keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: true, children: activeTab.content })) : (activeTab?.content)] }));
-};
-export const StoryDetailScreen = ({ story, notFoundMessage = 'Story not found.', beforeContent, footerContent, }) => {
-    const { text, color, radius } = useTheme();
-    if (!story) {
-        return (_jsx(Page, { title: "Story not found", description: notFoundMessage, beforeContent: beforeContent, footerContent: footerContent, children: _jsx(Section, { withPaddingY: true, children: _jsx(Typography, { style: text['Corps de texte'].MD.Regular, children: notFoundMessage }) }) }));
-    }
+/** Les onglets de la fiche. Les props n'ont d'onglet que si la fiche en declare. */
+const ongletsDeLaFiche = (meta, exemples) => [
+    { value: 'examples', label: 'Examples', content: exemples },
+    { value: 'styles', label: 'Styles', content: _jsx(JsonBlock, { value: meta.styleFn() }) },
+    ...(meta.props != null ? [{ value: 'props', label: 'Props', content: _jsx(JsonBlock, { value: meta.props }) }] : []),
+];
+export const StoryDetailScreen = ({ story, notFoundMessage = 'Story not found.', ...cadre }) => {
+    const { spacingValue } = useTheme();
+    if (!story)
+        return _jsx(FicheIntrouvable, { message: notFoundMessage, ...cadre });
     const meta = story.default;
-    const flags = getStoryFlags(meta);
-    const examples = getStoryExamples(story);
-    const isTemplate = meta.tags.includes('Template');
-    const examplesContent = (_jsx(Box, { display: "flex", gap: 24, mt: '1,5V', children: examples.map(([key, Example]) => {
-            const source = getStoryExampleSource(story, key);
-            const description = getStoryExampleDescription(story, key);
-            return (_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 ? (_jsxs(Box, { display: "flex", gap: 6, children: [_jsx(AnchorHeading, { style: text.Titres['H5 - XS'], children: key }), description ? _jsx(MarkdownDescription, { children: description }) : null] })) : 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, {}) }), _jsx(Divider, { mt: "1W", mb: "1,5V" }), source ? _jsx(JsonBlock, { language: "tsx", value: source }) : null] }, key));
-        }) }));
-    return (_jsx(Page, { scrollable: true, title: meta.title, description: meta.shortDescription ?? stripMarkdown(meta.description), beforeContent: beforeContent, footerContent: footerContent, children: _jsxs(Box, { ...screenContent, children: [_jsx(Section, { withPaddingY: false, children: _jsx(PageHeader, { title: meta.title }) }), _jsx(Section, { withPaddingY: false, 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: [_jsx(Box, { display: "flex", gap: 6, style: { flex: 1 }, children: _jsx(MarkdownDescription, { 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(Tag, { color: "action", size: "md", children: 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(Tag, { color: "default", size: "md", children: 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(DetailTabs, { defaultValue: "examples", tabs: [
-                                    {
-                                        value: 'examples',
-                                        label: 'Examples',
-                                        content: examplesContent,
-                                        scrollable: true,
-                                    },
-                                    {
-                                        value: 'styles',
-                                        label: 'Styles',
-                                        content: _jsx(JsonBlock, { value: meta.styleFn() }),
-                                        scrollable: true,
-                                    },
-                                    ...(meta.props != null
-                                        ? [
-                                            {
-                                                value: 'props',
-                                                label: 'Props',
-                                                content: _jsx(JsonBlock, { value: meta.props }),
-                                                scrollable: true,
-                                            },
-                                        ]
-                                        : []),
-                                ] })] }) })] }) }));
+    const exemples = getStoryExamples(story);
+    const gabarit = meta.tags.includes('Template');
+    return (_jsx(Page, { scrollable: true, title: meta.title, description: resumeDeLaFiche(meta), ...cadre, children: _jsx(StoryLayout, { sommaire: exemples.length > 0 ? _jsx(StorySummary, { entrees: exemples.map(([nom]) => nom) }) : null, children: _jsxs(Box, { display: "flex", gap: spacingValue('6W'), children: [_jsx(EnTeteDeFiche, { meta: meta }), _jsx(Tabs, { defaultValue: "examples", urlAnchorPrefix: "story", tabs: ongletsDeLaFiche(meta, _jsx(ExemplesDeLaStory, { story: story, exemples: exemples, gabarit: gabarit })) })] }) }) }));
 };

package/dist/screens/ThemeCSSVariablesScreen.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeCSSVariablesScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemeCSSVariablesScreen.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,MAAM,OAAO,CAAC;AA0P1B,MAAM,MAAM,4BAA4B,GAAG;IACzC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAIF,eAAO,MAAM,uBAAuB,GAAI,kCAAkC,4BAA4B,sBA+DrG,CAAC"}
+{"version":3,"file":"ThemeCSSVariablesScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemeCSSVariablesScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAwI1B,MAAM,MAAM,4BAA4B,GAAG;IACzC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAIF,eAAO,MAAM,uBAAuB,GAAI,2CAA2C,4BAA4B,sBAsD9G,CAAC"}

package/dist/screens/ThemeCSSVariablesScreen.js

@@ -1,100 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Accordion, Box, Page, PageHeader, Section, Typography, useToast } from '@alveole/components';
-import { Colors, CustomPalette, CustomTypography, Elevations, FontWeightMap, RadiusList, Spacings, sanitizeCSSKey, useTheme, } from '@alveole/theme';
+import { Accordion, Box, Typography, useToast } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
 import React from 'react';
 import { Platform, Pressable } from 'react-native';
-import { screenContent } from '../styles';
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-function collectTypographyVarNames(node, path, out) {
-    if (typeof node.fontSize === 'number') {
-        const prefix = `--typography-${path.map(sanitizeCSSKey).join('-')}`;
-        out.push({ name: `${prefix}-font-size`, rawValue: `${node.fontSize}px`, preview: 'none' });
-        out.push({ name: `${prefix}-line-height`, rawValue: `${node.lineHeight}px`, preview: 'none' });
-        if (typeof node.fontFamily === 'string') {
-            out.push({ name: `${prefix}-font-family`, rawValue: node.fontFamily, preview: 'none' });
-        }
-        if (typeof node.fontWeight === 'string') {
-            out.push({ name: `${prefix}-font-weight`, rawValue: node.fontWeight, preview: 'none' });
-        }
-        return;
-    }
-    Object.entries(node).forEach(([key, value]) => {
-        if (typeof value === 'object' && value !== null) {
-            collectTypographyVarNames(value, [...path, key], out);
-        }
-    });
-}
-function buildGroups() {
-    const groups = [];
-    // Couleurs palette
-    const paletteVars = [];
-    Object.entries(Colors).forEach(([name, shades]) => {
-        Object.entries(shades).forEach(([variant, value]) => {
-            paletteVars.push({
-                name: `--color-${name}-${variant}`,
-                rawValue: value,
-                preview: 'color',
-            });
-        });
-    });
-    groups.push({ title: 'Couleurs palette', vars: paletteVars });
-    // Tokens sémantiques light
-    const semanticCategories = ['background', 'text', 'border', 'artwork', 'system'];
-    semanticCategories.forEach(category => {
-        const tokens = CustomPalette.light[category];
-        if (!tokens)
-            return;
-        const vars = Object.entries(tokens)
-            .filter(([, value]) => typeof value === 'string')
-            .map(([token, value]) => ({
-            name: `--${category}-${token}`,
-            rawValue: value,
-            preview: 'color',
-        }));
-        if (vars.length)
-            groups.push({ title: `Tokens — ${category}`, vars });
-    });
-    // Spacing
-    groups.push({
-        title: 'Spacing',
-        vars: Object.entries(Spacings).map(([key, value]) => ({
-            name: `--spacing-${sanitizeCSSKey(key)}`,
-            rawValue: `${value}px`,
-            preview: 'spacing',
-        })),
-    });
-    // Radius
-    groups.push({
-        title: 'Radius',
-        vars: Object.entries(RadiusList).map(([key, value]) => ({
-            name: `--radius-${key}`,
-            rawValue: `${value}px`,
-            preview: 'radius',
-        })),
-    });
-    // Elevations
-    groups.push({
-        title: 'Elevations',
-        vars: Object.entries(Elevations).map(([key, value]) => ({
-            name: `--elevation-${key}`,
-            rawValue: value.web,
-            preview: 'elevation',
-        })),
-    });
-    // Fonts
-    groups.push({
-        title: 'Fonts',
-        vars: Object.entries(FontWeightMap).flatMap(([key, { familyWithFallback, weight }]) => [
-            { name: `--font-${key}-family`, rawValue: familyWithFallback, preview: 'none' },
-            { name: `--font-${key}-weight`, rawValue: weight, preview: 'none' },
-        ]),
-    });
-    // Typographies
-    const typoVars = [];
-    collectTypographyVarNames(CustomTypography, [], typoVars);
-    groups.push({ title: 'Typographies', vars: typoVars });
-    return groups;
-}
+import { EcranDeCatalogue, filDuTheme } from '../components/EcranDeCatalogue';
+import { buildGroups } from './variablesCSSDuTheme';
 // ─── Preview components ────────────────────────────────────────────────────────
 const ColorPreview = ({ value }) => (_jsx(Box, { style: {
         width: 28,
@@ -147,7 +57,7 @@ const VarRow = ({ entry }) => {
             });
         }
     };
-    return (_jsx(Pressable, { onPress: copy, children: ({ pressed }) => (_jsxs(Box, { style: {
+    return (_jsx(Pressable, { accessibilityRole: "button", onPress: copy, children: ({ pressed }) => (_jsxs(Box, { style: {
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 12,
@@ -168,11 +78,11 @@ const VarRow = ({ entry }) => {
                             }, numberOfLines: 1, children: entry.rawValue })] }), _jsx(Typography, { style: { fontSize: 11, color: color.light.text['mention-grey'] }, children: '⎘' })] })) }));
 };
 const COLLAPSED_BY_DEFAULT = ['Typographies', 'Fonts', 'Couleurs palette'];
-export const ThemeCSSVariablesScreen = ({ beforeContent, footerContent }) => {
+export const ThemeCSSVariablesScreen = ({ beforeContent, sidebar, footerContent }) => {
     const { color } = useTheme();
     const groups = React.useMemo(() => buildGroups(), []);
     const total = groups.reduce((sum, g) => sum + g.vars.length, 0);
     const initialOpen = React.useMemo(() => groups.filter(g => !COLLAPSED_BY_DEFAULT.some(prefix => g.title.startsWith(prefix))).map(g => g.title), [groups]);
     const [openGroups, setOpenGroups] = React.useState(initialOpen);
-    return (_jsx(Page, { scrollable: true, title: "Variables CSS", description: "Toutes les variables CSS inject\u00E9es par le ThemeProvider", beforeContent: beforeContent, footerContent: footerContent, children: _jsxs(Box, { ...screenContent, children: [_jsx(Section, { withPaddingY: false, children: _jsx(PageHeader, { title: "Variables CSS", breadcrumbsProps: { getHref: (segment, _index, path) => (segment === 'theme' ? null : path) } }) }), _jsxs(Section, { withPaddingY: false, children: [_jsxs(Typography, { style: { fontSize: 14, color: color.light.text['mention-grey'], marginBottom: 8 }, children: [`${total} variables injectées dans `, _jsx(Typography, { style: { fontSize: 14, fontFamily: 'monospace', color: color.light.text['default-grey'] }, children: ':root' }), ' par le ThemeProvider sur web. Cliquez sur une ligne pour copier le nom de la variable.'] }), _jsx(Typography, { style: { fontSize: 13, color: color.light.text['mention-grey'], marginBottom: 24, fontFamily: 'monospace' }, children: 'color: var(--background-action-high-primary);' }), _jsx(Accordion, { type: "multiple", value: openGroups, onValueChange: setOpenGroups, children: groups.map(g => (_jsx(Accordion.Item, { value: g.title, label: g.title, variant: "alt", labelChildren: _jsx(Typography, { style: { fontSize: 11, color: color.light.text['mention-grey'] }, children: `${g.vars.length} var${g.vars.length > 1 ? 's' : ''}` }), noPadding: true, children: g.vars.map(v => (_jsx(VarRow, { entry: v }, v.name))) }, g.title))) })] })] }) }));
+    return (_jsxs(EcranDeCatalogue, { title: "Variables CSS", description: "Toutes les variables CSS inject\u00E9es par le ThemeProvider", sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, breadcrumbsProps: filDuTheme, children: [_jsxs(Typography, { style: { fontSize: 14, color: color.light.text['mention-grey'], marginBottom: 8 }, children: [`${total} variables injectées dans `, _jsx(Typography, { style: { fontSize: 14, fontFamily: 'monospace', color: color.light.text['default-grey'] }, children: ':root' }), ' par le ThemeProvider sur web. Cliquez sur une ligne pour copier le nom de la variable.'] }), _jsx(Typography, { style: { fontSize: 13, color: color.light.text['mention-grey'], marginBottom: 24, fontFamily: 'monospace' }, children: 'color: var(--background-action-high-primary);' }), _jsx(Accordion, { type: "multiple", value: openGroups, onValueChange: setOpenGroups, children: groups.map(g => (_jsx(Accordion.Item, { value: g.title, label: g.title, variant: "alt", labelChildren: _jsx(Typography, { style: { fontSize: 11, color: color.light.text['mention-grey'] }, children: `${g.vars.length} var${g.vars.length > 1 ? 's' : ''}` }), noPadding: true, children: g.vars.map(v => (_jsx(VarRow, { entry: v }, v.name))) }, g.title))) })] }));
 };

package/dist/screens/ThemeConstantDetailScreen.d.ts

@@ -3,7 +3,8 @@ export type ThemeConstantDetailScreenProps = {
     name: string;
     value: unknown;
     beforeContent?: React.ReactNode;
+    sidebar?: React.ReactNode;
     footerContent?: React.ReactNode;
 };
-export declare const ThemeConstantDetailScreen: ({ name, value, beforeContent, footerContent, }: ThemeConstantDetailScreenProps) => React.JSX.Element;
+export declare const ThemeConstantDetailScreen: ({ name, value, beforeContent, sidebar, footerContent, }: ThemeConstantDetailScreenProps) => React.JSX.Element;
 //# sourceMappingURL=ThemeConstantDetailScreen.d.ts.map

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

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

package/dist/screens/ThemeConstantDetailScreen.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Page, PageHeader, Section, Typography } from '@alveole/components';
+import { Box, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
+import { EcranDeCatalogue } from '../components/EcranDeCatalogue';
 import { JsonBlock } from '../components/JsonBlock';
-import { screenContent } from '../styles';
-export const ThemeConstantDetailScreen = ({ name, value, beforeContent, footerContent, }) => {
+export const ThemeConstantDetailScreen = ({ name, value, beforeContent, sidebar, footerContent, }) => {
     const { text } = useTheme();
     const entries = typeof value === 'object' && value != null ? Object.entries(value) : [];
-    return (_jsx(Page, { scrollable: true, title: name, description: name, beforeContent: beforeContent, footerContent: footerContent, children: _jsxs(Box, { ...screenContent, children: [_jsx(Section, { withPaddingY: false, children: _jsx(PageHeader, { title: name }) }), _jsx(Section, { withPaddingY: false, children: _jsx(Box, { display: "flex", gap: 16, children: entries.length === 0 ? (_jsx(JsonBlock, { value: value })) : (entries.map(([entryName, entryValue]) => (_jsxs(Box, { display: "flex", gap: 8, children: [_jsx(Typography, { style: text.Titres['H6 - XXS'], children: entryName }), _jsx(JsonBlock, { value: entryValue })] }, entryName)))) }) })] }) }));
+    return (_jsx(EcranDeCatalogue, { title: name, description: name, sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, children: _jsx(Box, { display: "flex", gap: 16, children: entries.length === 0 ? (_jsx(JsonBlock, { value: value })) : (entries.map(([entryName, entryValue]) => (_jsxs(Box, { display: "flex", gap: 8, children: [_jsx(Typography, { style: text.Titres['H6 - XXS'], children: entryName }), _jsx(JsonBlock, { value: entryValue })] }, entryName)))) }) }));
 };

package/dist/screens/ThemeConstantsScreen.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeConstantsScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemeConstantsScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CACtE,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,oFAOlC,yBAAyB,sBA2C3B,CAAC"}
+{"version":3,"file":"ThemeConstantsScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemeConstantsScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,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,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,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,6FAQlC,yBAAyB,sBAiC3B,CAAC"}

package/dist/screens/ThemeConstantsScreen.js

@@ -1,15 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Card, Page, PageHeader, Section, Typography } from '@alveole/components';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Card, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
 import React from 'react';
 import { Pressable, useWindowDimensions } from 'react-native';
-import { screenContent } from '../styles';
-export const ThemeConstantsScreen = ({ constants, title = 'UI Kit - Constants', description = 'Theme constants', beforeContent, footerContent, onSelectConstant, }) => {
+import { EcranDeCatalogue } from '../components/EcranDeCatalogue';
+import { getConstantEntries } from '../utils';
+export const ThemeConstantsScreen = ({ constants, title = 'UI Kit - Constants', description = 'Theme constants', beforeContent, sidebar, footerContent, onSelectConstant, }) => {
     const { text } = useTheme();
     const { width } = useWindowDimensions();
     const columns = width >= 1200 ? 3 : width >= 768 ? 2 : 1;
-    const entries = React.useMemo(() => Object.entries(constants)
-        .filter(([, value]) => typeof value === 'object' && value != null)
-        .sort((left, right) => left[0].localeCompare(right[0])), [constants]);
-    return (_jsx(Page, { scrollable: true, title: title, description: description, beforeContent: beforeContent, footerContent: footerContent, children: _jsxs(Box, { ...screenContent, children: [_jsx(Section, { withPaddingY: false, children: _jsx(PageHeader, { title: title }) }), _jsx(Section, { withPaddingY: false, 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))) }) })] }) }));
+    const entries = React.useMemo(() => getConstantEntries(constants), [constants]);
+    return (_jsx(EcranDeCatalogue, { title: title, description: description, sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, children: _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 16, children: entries.map(([name, value]) => (_jsx(Box, { width: columns === 1 ? '100%' : columns === 2 ? '48%' : '31%', children: _jsx(Pressable, { accessibilityRole: "button", onPress: onSelectConstant ? () => onSelectConstant({ name, value }) : undefined, children: _jsx(Card, { children: _jsx(Box, { p: '100', children: _jsx(Typography, { style: text.Titres['H5 - XS'], children: name }) }) }) }) }, name))) }) }));
 };

package/dist/screens/ThemePaletteScreen.d.ts

@@ -4,7 +4,8 @@ export type ThemePaletteScreenProps = {
     title?: string;
     description?: string;
     beforeContent?: React.ReactNode;
+    sidebar?: React.ReactNode;
     footerContent?: React.ReactNode;
 };
-export declare const ThemePaletteScreen: ({ palette, title, description, beforeContent, footerContent, }: ThemePaletteScreenProps) => React.JSX.Element;
+export declare const ThemePaletteScreen: ({ palette, title, description, beforeContent, sidebar, 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":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AA8H1B,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,sBAoDzB,CAAC"}
+{"version":3,"file":"ThemePaletteScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemePaletteScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,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,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AA2BF,eAAO,MAAM,kBAAkB,GAAI,yEAOhC,uBAAuB,sBAyBzB,CAAC"}

package/dist/screens/ThemePaletteScreen.js

@@ -1,99 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Accordion, Box, Page, PageHeader, Section, Typography, useToast } from '@alveole/components';
+import { Accordion, Box, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
 import React from 'react';
-import { Pressable } from 'react-native';
-import { screenContent } from '../styles';
-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') {
-            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 })] })] })) }));
+import { ColorSwatch } from '../components/ColorSwatch';
+import { EcranDeCatalogue, filDuTheme } from '../components/EcranDeCatalogue';
+import { buildSections, compteDeJetons, sectionsOuvertesAuDepart } from './paletteSections';
+/** Une famille de couleurs, depliable, avec le nombre de jetons qu'elle contient. */
+const SectionDeCouleurs = ({ section }) => {
+    const { color } = useTheme();
+    return (_jsx(Accordion.Item, { value: section.title, label: section.title, variant: "alt", labelChildren: _jsx(Typography, { style: { fontSize: 11, color: color.light.text['mention-grey'] }, children: compteDeJetons(section) }), noPadding: true, children: _jsx(Box, { style: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, padding: 8 }, children: section.entries.map(entry => (_jsx(ColorSwatch, { entry: entry }, entry.path))) }) }));
 };
-export const ThemePaletteScreen = ({ palette, title = 'UI Kit - Couleurs du thème', description = 'Palette et couleurs du thème', beforeContent, footerContent, }) => {
+export const ThemePaletteScreen = ({ palette, title = 'UI Kit - Couleurs du thème', description = 'Palette et couleurs du thème', beforeContent, sidebar, footerContent, }) => {
     const { color } = useTheme();
     const sections = React.useMemo(() => buildSections(palette), [palette]);
-    const initialOpen = React.useMemo(() => sections.filter(s => !s.deprecated).map(s => s.title), [sections]);
-    const [openSections, setOpenSections] = React.useState(initialOpen);
-    return (_jsx(Page, { scrollable: true, title: title, description: description, beforeContent: beforeContent, footerContent: footerContent, children: _jsxs(Box, { ...screenContent, children: [_jsx(Section, { withPaddingY: false, children: _jsx(PageHeader, { title: title, breadcrumbsProps: { getHref: (segment, _index, path) => (segment === 'theme' ? null : path) } }) }), _jsxs(Section, { withPaddingY: false, 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.' }), _jsx(Accordion, { type: "multiple", value: openSections, onValueChange: setOpenSections, children: sections.map(section => (_jsx(Accordion.Item, { value: section.title, label: section.title, variant: "alt", labelChildren: _jsx(Typography, { style: { fontSize: 11, color: color.light.text['mention-grey'] }, children: `${section.entries.length} token${section.entries.length > 1 ? 's' : ''}` }), noPadding: true, children: _jsx(Box, { style: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, padding: 8 }, children: section.entries.map(entry => (_jsx(ColorSwatch, { entry: entry }, entry.path))) }) }, section.title))) })] })] }) }));
+    const [openSections, setOpenSections] = React.useState(() => sectionsOuvertesAuDepart(sections));
+    return (_jsxs(EcranDeCatalogue, { title: title, description: description, sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, breadcrumbsProps: filDuTheme, 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.' }), _jsx(Accordion, { type: "multiple", value: openSections, onValueChange: setOpenSections, children: sections.map(section => (_jsx(SectionDeCouleurs, { section: section }, section.title))) })] }));
 };

package/dist/screens/ThemeTypographyScreen.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeTypographyScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemeTypographyScreen.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,0BAA0B,GAAG;IACvC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAwGF,eAAO,MAAM,qBAAqB,GAAI,mEAMnC,0BAA0B,gCA8C5B,CAAC"}
+{"version":3,"file":"ThemeTypographyScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemeTypographyScreen.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,0BAA0B,GAAG;IACvC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAwGF,eAAO,MAAM,qBAAqB,GAAI,4EAOnC,0BAA0B,gCAqC5B,CAAC"}

package/dist/screens/ThemeTypographyScreen.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Card, Page, PageHeader, Section, Typography } from '@alveole/components';
+import { Box, Card, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
 import { View } from 'react-native';
-import { screenContent } from '../styles';
-const isLeafStyle = (value) => typeof value === 'object' && value !== null && typeof value.fontSize === 'number';
+import { EcranDeCatalogue, filDuTheme } from '../components/EcranDeCatalogue';
+const isLeafStyle = (value) => typeof value === 'object' && value !== null && 'fontSize' in value && typeof value.fontSize === 'number';
 const flattenStyles = (value, prefix = '') => {
     if (isLeafStyle(value)) {
         return prefix ? [{ label: prefix, style: value }] : [];
@@ -20,7 +20,7 @@ const flattenStyles = (value, prefix = '') => {
 };
 const getFontInfo = (style) => {
     const fontFamily = style.fontFamily ?? '';
-    const fontWeight = style.fontWeight ?? '';
+    const fontWeight = String(style.fontWeight ?? '');
     if (fontFamily.includes(',')) {
         const family = fontFamily.split(',')[0]?.trim() ?? '';
         const weightLabels = {
@@ -43,7 +43,7 @@ const TableRow = ({ entry, valueStyle }) => {
     const { family, weight } = getFontInfo(entry.style);
     return (_jsxs(Box, { display: "flex", gap: 0, children: [_jsxs(Box, { display: "flex", flexDirection: "row", style: { paddingVertical: 12, alignItems: 'center' }, children: [_jsx(Box, { style: { width: PREVIEW_WIDTH }, children: _jsx(Typography, { style: entry.style, children: "Aa" }) }), _jsx(Box, { style: { flex: 2 }, children: _jsx(Typography, { style: valueStyle, children: entry.label }) }), _jsx(Box, { style: { flex: 1 }, children: _jsx(Typography, { style: [valueStyle, { color: MUTED_COLOR }], children: family }) }), _jsx(Box, { style: { flex: 1 }, children: _jsx(Typography, { style: [valueStyle, { color: MUTED_COLOR }], children: weight }) }), _jsx(Box, { style: { flex: 1 }, children: _jsxs(Typography, { style: [valueStyle, { color: MUTED_COLOR }], children: [entry.style.fontSize, "px"] }) }), _jsx(Box, { style: { flex: 1 }, children: _jsxs(Typography, { style: [valueStyle, { color: MUTED_COLOR }], children: [entry.style.lineHeight, "px"] }) })] }), _jsx(View, { style: { height: 1, backgroundColor: DIVIDER_COLOR } })] }));
 };
-export const ThemeTypographyScreen = ({ typography, title = 'UI Kit - Theme typography', description = 'Theme text styles', beforeContent, footerContent, }) => {
+export const ThemeTypographyScreen = ({ typography, title = 'UI Kit - Theme typography', description = 'Theme text styles', beforeContent, sidebar, footerContent, }) => {
     const { text } = useTheme();
     const labelStyle = text['Corps de texte'].XS.SemiBold;
     const valueStyle = text['Corps de texte'].SM.Regular;
@@ -51,5 +51,5 @@ export const ThemeTypographyScreen = ({ typography, title = 'UI Kit - Theme typo
         key,
         entries: flattenStyles(value),
     }));
-    return (_jsx(Page, { scrollable: true, title: title, description: description, beforeContent: beforeContent, footerContent: footerContent, children: _jsxs(Box, { ...screenContent, children: [_jsx(Section, { withPaddingY: false, children: _jsx(PageHeader, { title: title, breadcrumbsProps: { getHref: (segment, _index, path) => (segment === 'theme' ? null : path) } }) }), _jsx(Section, { withPaddingY: false, children: _jsx(Box, { display: "flex", gap: 16, children: categories.map(({ key, entries }) => (_jsx(Card, { children: _jsxs(Box, { display: "flex", gap: 16, p: "150", children: [_jsx(Typography, { style: text.Titres['H4 - SM'], children: key }), _jsxs(Box, { display: "flex", gap: 0, children: [_jsx(TableHeader, { labelStyle: labelStyle }), entries.map(entry => (_jsx(TableRow, { entry: entry, valueStyle: valueStyle }, entry.label)))] })] }) }, key))) }) })] }) }));
+    return (_jsx(EcranDeCatalogue, { title: title, description: description, sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, breadcrumbsProps: filDuTheme, children: _jsx(Box, { display: "flex", gap: 16, children: categories.map(({ key, entries }) => (_jsx(Card, { children: _jsxs(Box, { display: "flex", gap: 16, p: "150", children: [_jsx(Typography, { style: text.Titres['H4 - SM'], children: key }), _jsxs(Box, { display: "flex", gap: 0, children: [_jsx(TableHeader, { labelStyle: labelStyle }), entries.map(entry => (_jsx(TableRow, { entry: entry, valueStyle: valueStyle }, entry.label)))] })] }) }, key))) }) }));
 };

package/dist/screens/colonnesDeFiches.d.ts

@@ -0,0 +1,6 @@
+/**
+ * La largeur d'une carte, en CSS. Une seule colonne prend toute la place ; au-dela, la rangee
+ * retranche les gouttieres avant de partager, et il y en a une de moins que de colonnes.
+ */
+export declare const largeurDeColonne: (largeurDeFenetre: number) => string;
+//# sourceMappingURL=colonnesDeFiches.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"colonnesDeFiches.d.ts","sourceRoot":"","sources":["../../src/screens/colonnesDeFiches.ts"],"names":[],"mappings":"AAYA;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAAI,kBAAkB,MAAM,KAAG,MAM3D,CAAC"}

package/dist/screens/colonnesDeFiches.js

@@ -0,0 +1,20 @@
+/**
+ * Les paliers de la grille de fiches. Ils sont exprimes en largeur minimale : la premiere
+ * entree qui tient decide du nombre de colonnes.
+ */
+const PALIERS = [
+    { aPartirDe: 1200, colonnes: 3 },
+    { aPartirDe: 768, colonnes: 2 },
+];
+/** L'espace entre deux colonnes, en pixels. Il vaut le `gap` de la rangee de cartes. */
+const GOUTTIERE = 16;
+/**
+ * La largeur d'une carte, en CSS. Une seule colonne prend toute la place ; au-dela, la rangee
+ * retranche les gouttieres avant de partager, et il y en a une de moins que de colonnes.
+ */
+export const largeurDeColonne = (largeurDeFenetre) => {
+    const { colonnes } = PALIERS.find(palier => largeurDeFenetre >= palier.aPartirDe) ?? { colonnes: 1 };
+    if (colonnes === 1)
+        return '100%';
+    return `calc((100% - ${GOUTTIERE * (colonnes - 1)}px) / ${colonnes})`;
+};