@alveole/storybook 0.43.2 → 1.0.0

package/dist/components/SearchField.d.ts

@@ -1,8 +1,10 @@
+import React from 'react';
 export type SearchFieldProps = {
-    label: string;
+    label?: string;
     placeholder?: string;
     value: string;
     onChangeText: (value: string) => void;
+    size?: 'sm' | 'md';
 };
-export declare const SearchField: ({ label, placeholder, value, onChangeText }: SearchFieldProps) => import("react").JSX.Element;
+export declare const SearchField: ({ label, placeholder, value, onChangeText, size }: SearchFieldProps) => React.JSX.Element;
 //# sourceMappingURL=SearchField.d.ts.map

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,gCA0BxF,CAAC"}
+{"version":3,"file":"SearchField.d.ts","sourceRoot":"","sources":["../../src/components/SearchField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,mDAA0D,gBAAgB,sBA0CrG,CAAC"}

package/dist/components/SearchField.js

@@ -1,17 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
-import { TextInput } from 'react-native';
-export const SearchField = ({ label, placeholder, value, onChangeText }) => {
+import React from 'react';
+import { Platform, TextInput } from 'react-native';
+export const SearchField = ({ label, placeholder, value, onChangeText, size = 'md' }) => {
     const { text, color, radius, spacing } = useTheme();
-    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: {
+    const inputRef = React.useRef(null);
+    React.useEffect(() => {
+        if (Platform.OS !== 'web')
+            return;
+        const handleKeyDown = (e) => {
+            if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+                e.preventDefault();
+                inputRef.current?.focus();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, []);
+    return (_jsxs(Box, { display: "flex", gap: 8, children: [label ? _jsx(Typography, { style: text['Corps de texte'].XS.CapsBold, children: label }) : null, _jsx(TextInput, { ref: inputRef, placeholder: placeholder, value: value, onChangeText: onChangeText, placeholderTextColor: color.light.text['mention-grey'], autoCapitalize: "none", autoCorrect: false, style: {
                     borderWidth: 1,
                     borderColor: color.light.border['default-grey'],
                     borderRadius: radius('md'),
-                    paddingVertical: spacing('1W'),
+                    paddingVertical: size === 'sm' ? spacing('1,5V') : spacing('1W'),
                     paddingHorizontal: spacing('2W'),
                     backgroundColor: color.light.background['default-grey'],
                     color: color.light.text['default-grey'],
-                    ...text['Corps de texte'].MD.Regular,
+                    ...(size === 'sm' ? text['Corps de texte'].SM.Regular : text['Corps de texte'].MD.Regular),
                 } })] }));
 };

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export * from './screens/StoriesScreen';
 export * from './screens/StoryDetailScreen';
 export * from './screens/ThemeConstantDetailScreen';
 export * from './screens/ThemeConstantsScreen';
+export * from './screens/ThemeCSSVariablesScreen';
 export * from './screens/ThemePaletteScreen';
 export * from './screens/ThemeTypographyScreen';
 export * from './types';

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,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"}
+{"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,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iCAAiC,CAAC;AAChD,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -9,6 +9,7 @@ export * from './screens/StoriesScreen';
 export * from './screens/StoryDetailScreen';
 export * from './screens/ThemeConstantDetailScreen';
 export * from './screens/ThemeConstantsScreen';
+export * from './screens/ThemeCSSVariablesScreen';
 export * from './screens/ThemePaletteScreen';
 export * from './screens/ThemeTypographyScreen';
 export * from './types';

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

@@ -1 +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"}
+{"version":3,"file":"PhilosophyPage.d.ts","sourceRoot":"","sources":["../../src/pages/PhilosophyPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,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,sBAyFnF,CAAC"}

package/dist/pages/PhilosophyPage.js

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

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

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

package/dist/screens/StoriesScreen.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Button, Page, Section, Typography } from '@alveole/components';
+import { ActionMenu, Box, Button, Page, PageHeader, Section, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
 import React from 'react';
-import { useWindowDimensions } from 'react-native';
-import { FilterBadge } from '../components/FilterBadge';
+import { Platform, ScrollView, useWindowDimensions } from 'react-native';
 import { SearchField } from '../components/SearchField';
 import { StoryCard } from '../components/StoryCard';
+import { screenContent } from '../styles';
 import { filterStories, getAllStoryTags, groupStoriesByTag } from '../utils';
 const AVAILABLE_FLAGS = [
     { key: 'figma', label: 'Figma' },
@@ -15,7 +15,7 @@ const AVAILABLE_FLAGS = [
     { key: 'mobileOnly', label: 'Mobile only' },
 ];
 export const StoriesScreen = ({ stories, title = 'UI Kit - Components', description = 'Shared component catalog', emptyMessage = 'No story found.', beforeContent, footerContent, createLabel, onCreatePress, onSelectStory, }) => {
-    const { text, color, radius } = useTheme();
+    const { text } = useTheme();
     const { width } = useWindowDimensions();
     const columns = width >= 1200 ? 3 : width >= 768 ? 2 : 1;
     const columnStyle = columns === 1
@@ -26,6 +26,7 @@ export const StoriesScreen = ({ stories, title = 'UI Kit - Components', descript
     const [query, setQuery] = React.useState('');
     const [selectedTag, setSelectedTag] = React.useState(null);
     const [selectedFlag, setSelectedFlag] = React.useState(null);
+    const [openFilter, setOpenFilter] = React.useState(null);
     const allTags = React.useMemo(() => getAllStoryTags(stories), [stories]);
     const filteredStories = React.useMemo(() => filterStories({
         stories,
@@ -34,22 +35,11 @@ export const StoriesScreen = ({ stories, title = 'UI Kit - Components', descript
         selectedFlag,
     }), [stories, query, selectedTag, selectedFlag]);
     const groupedStories = React.useMemo(() => groupStoriesByTag(filteredStories, allTags), [filteredStories, allTags]);
-    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)))), footerContent] }));
+    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: [_jsxs(Box, { ...screenContent, children: [_jsx(Section, { withPaddingY: false, children: _jsx(PageHeader, { title: title }) }), _jsx(Section, { withPaddingY: false, children: _jsxs(ScrollView, { horizontal: true, nestedScrollEnabled: true, directionalLockEnabled: Platform.OS === 'ios', showsHorizontalScrollIndicator: false, contentContainerStyle: { flexDirection: 'row', gap: 8, alignItems: 'center' }, children: [_jsx(Box, { style: { minWidth: 200 }, children: _jsx(SearchField, { placeholder: "Button, Tabs, Card...", value: query, onChangeText: setQuery, size: "sm" }) }), _jsx(ActionMenu, { placement: "bottom-start", scrollable: false, open: openFilter === 'tags', setOpen: open => setOpenFilter(open ? 'tags' : null), renderTrigger: () => (_jsx(Button, { variant: "secondary", title: selectedTag ?? 'Tags', endIcon: "ChevronDown", size: "sm", selected: selectedTag !== null, active: openFilter === 'tags' })), children: allTags.map(tag => (_jsx(ActionMenu.Item, { title: tag, selected: selectedTag === tag, onPress: () => {
+                                            setSelectedTag(prev => (prev === tag ? null : tag));
+                                            setOpenFilter(null);
+                                        } }, tag))) }), _jsx(ActionMenu, { placement: "bottom-start", scrollable: false, open: openFilter === 'indicateurs', setOpen: open => setOpenFilter(open ? 'indicateurs' : null), renderTrigger: () => (_jsx(Button, { variant: "secondary", title: AVAILABLE_FLAGS.find(f => f.key === selectedFlag)?.label ?? 'Indicateurs', endIcon: "ChevronDown", size: "sm", selected: selectedFlag !== null, active: openFilter === 'indicateurs' })), children: AVAILABLE_FLAGS.map(flag => (_jsx(ActionMenu.Item, { title: flag.label, selected: selectedFlag === flag.key, onPress: () => {
+                                            setSelectedFlag(prev => (prev === flag.key ? null : flag.key));
+                                            setOpenFilter(null);
+                                        } }, flag.key))) })] }) }), groupedStories.length === 0 ? (_jsx(Section, { withPaddingY: false, children: _jsx(Typography, { style: text['Corps de texte'].MD.Regular, children: emptyMessage }) })) : (groupedStories.map(([tag, taggedStories]) => (_jsx(Section, { withPaddingY: false, children: _jsxs(Box, { display: "flex", gap: 16, children: [_jsx(Typography, { style: text.Titres['H4 - SM'], children: tag }), _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 16, children: taggedStories.map(story => (_jsx(Box, { style: { alignSelf: 'stretch', width: columnStyle.width }, children: _jsx(StoryCard, { story: story, onPress: onSelectStory }) }, story.default.title))) })] }) }, tag))))] }), footerContent] }));
 };

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

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

package/dist/screens/StoryDetailScreen.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AnchorHeading, Box, Button, Divider, Page, Section, Typography } from '@alveole/components';
+import { AnchorHeading, Box, Button, Divider, Page, PageHeader, Section, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
 import React from 'react';
 import { Linking, ScrollView } from 'react-native';
 import { JsonBlock } from '../components/JsonBlock';
+import { screenContent } from '../styles';
 import { getStoryExamples, getStoryFlags } from '../utils';
 const DetailPill = ({ label, tone = 'info' }) => {
     const { color, radius, text, spacing } = useTheme();
@@ -57,32 +58,32 @@ export const StoryDetailScreen = ({ story, notFoundMessage = 'Story not found.',
                             minHeight: isTemplate ? 420 : undefined,
                         }, children: _jsx(Example, {}) }), _jsx(Divider, { mt: "1W", mb: "1,5V" }), source ? _jsx(JsonBlock, { language: "tsx", value: source }) : null] }, key));
         }) }));
-    return (_jsx(Page, { scrollable: true, title: meta.title, description: meta.description, beforeContent: beforeContent, footerContent: footerContent, children: _jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: 20, children: [_jsxs(Box, { borderColor: color.light.border['default-grey'], borderRadius: radius('lg'), borderWidth: 1, display: "flex", gap: 16, p: '150', style: { backgroundColor: color.light.background['alt-grey'] }, children: [_jsxs(Box, { display: "flex", gap: 12, style: {
-                                    alignItems: 'flex-start',
-                                    flexDirection: 'row',
-                                    justifyContent: 'space-between',
-                                }, 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(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
-                                ? [
+    return (_jsx(Page, { scrollable: true, title: meta.title, description: 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: [_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(DetailTabs, { defaultValue: "examples", tabs: [
                                     {
-                                        value: 'props',
-                                        label: 'Props',
-                                        content: _jsx(JsonBlock, { value: meta.props }),
+                                        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,
+                                            },
+                                        ]
+                                        : []),
+                                ] })] }) })] }) }));
 };

package/dist/screens/ThemeCSSVariablesScreen.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeCSSVariablesScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemeCSSVariablesScreen.tsx"],"names":[],"mappings":"AAOA,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"}

package/dist/screens/ThemeCSSVariablesScreen.js

@@ -0,0 +1,183 @@
+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, Spacings, useTheme } from '@alveole/theme';
+import { Elevations } from '@alveole/theme/src/constants/Elevation';
+import { FontWeightMap } from '@alveole/theme/src/constants/Font';
+import { RadiusList } from '@alveole/theme/src/constants/Radius';
+import { CustomTypography } from '@alveole/theme/src/constants/Typography';
+import { sanitizeCSSKey } from '@alveole/theme/src/helpers/sanitizeCSSKey';
+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;
+}
+// ─── Preview components ────────────────────────────────────────────────────────
+const ColorPreview = ({ value }) => (_jsx(Box, { style: {
+        width: 28,
+        height: 28,
+        borderRadius: 6,
+        backgroundColor: value,
+        borderWidth: 1,
+        borderColor: 'rgba(0,0,0,0.1)',
+        flexShrink: 0,
+    } }));
+const SpacingPreview = ({ value }) => {
+    const px = parseInt(value, 10);
+    const width = Math.min(px, 96);
+    return (_jsx(Box, { style: {
+            width,
+            height: 12,
+            borderRadius: 2,
+            backgroundColor: '#3B82F6',
+            flexShrink: 0,
+            alignSelf: 'center',
+        } }));
+};
+const RadiusPreview = ({ value }) => {
+    const px = Math.min(parseInt(value, 10), 14);
+    return (_jsx(Box, { style: {
+            width: 28,
+            height: 28,
+            borderRadius: px,
+            borderWidth: 2,
+            borderColor: '#3B82F6',
+            flexShrink: 0,
+        } }));
+};
+const ElevationPreview = ({ value }) => Platform.OS === 'web' ? (_jsx(Box, { style: {
+        width: 28,
+        height: 28,
+        borderRadius: 4,
+        backgroundColor: 'white',
+        boxShadow: value,
+        flexShrink: 0,
+    } })) : null;
+// ─── Row ──────────────────────────────────────────────────────────────────────
+const VarRow = ({ entry }) => {
+    const { color } = useTheme();
+    const toast = useToast();
+    const copy = () => {
+        if (typeof navigator !== 'undefined' && navigator.clipboard) {
+            navigator.clipboard.writeText(entry.name).then(() => {
+                toast.present('Copié !', entry.name, { variant: 'success', duration: 1500 });
+            });
+        }
+    };
+    return (_jsx(Pressable, { onPress: copy, children: ({ pressed }) => (_jsxs(Box, { style: {
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 12,
+                paddingVertical: 6,
+                paddingHorizontal: 12,
+                borderRadius: 6,
+                backgroundColor: pressed ? color.light.background['transparent-hover'] : 'transparent',
+            }, children: [entry.preview === 'color' && _jsx(ColorPreview, { value: entry.rawValue }), entry.preview === 'spacing' && _jsx(SpacingPreview, { value: entry.rawValue }), entry.preview === 'radius' && _jsx(RadiusPreview, { value: entry.rawValue }), entry.preview === 'elevation' && _jsx(ElevationPreview, { value: entry.rawValue }), entry.preview === 'none' && _jsx(Box, { style: { width: 28 } }), _jsxs(Box, { style: { flex: 1, gap: 1 }, children: [_jsx(Typography, { style: {
+                                fontSize: 12,
+                                fontFamily: 'monospace',
+                                color: color.light.text['title-grey'],
+                                lineHeight: 16,
+                            }, numberOfLines: 1, children: entry.name }), _jsx(Typography, { style: {
+                                fontSize: 11,
+                                fontFamily: 'monospace',
+                                color: color.light.text['mention-grey'],
+                                lineHeight: 14,
+                            }, 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 }) => {
+    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))) })] })] }) }));
+};

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;AAG1B,MAAM,MAAM,8BAA8B,GAAG;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,gDAKvC,8BAA8B,sBAsBhC,CAAC"}
+{"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"}

package/dist/screens/ThemeConstantDetailScreen.js

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

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

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

package/dist/screens/ThemeConstantsScreen.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Card, Page, Section, Typography } from '@alveole/components';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Card, Page, PageHeader, Section, 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, }) => {
     const { text } = useTheme();
     const { width } = useWindowDimensions();
@@ -10,5 +11,5 @@ export const ThemeConstantsScreen = ({ constants, title = 'UI Kit - Constants',
     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: _jsx(Section, { withPaddingY: true, children: _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 16, children: entries.map(([name, value]) => (_jsx(Box, { width: columns === 1 ? '100%' : columns === 2 ? '48%' : '31%', children: _jsx(Pressable, { onPress: onSelectConstant ? () => onSelectConstant({ name, value }) : undefined, children: _jsx(Card, { children: _jsx(Box, { p: '100', children: _jsx(Typography, { style: text.Titres['H5 - XS'], children: name }) }) }) }) }, name))) }) }) }));
+    return (_jsx(Page, { scrollable: true, title: title, description: description, beforeContent: beforeContent, footerContent: footerContent, children: _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))) }) })] }) }));
 };

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;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"}
+{"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"}

package/dist/screens/ThemePaletteScreen.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Page, Section, Typography, useToast } from '@alveole/components';
+import { Accordion, Box, Page, PageHeader, Section, Typography, useToast } 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)) {
@@ -89,29 +90,10 @@ const ColorSwatch = ({ entry }) => {
                                 marginTop: 2,
                             }, numberOfLines: 1, children: entry.value })] })] })) }));
 };
-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)))] }) }));
+    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))) })] })] }) }));
 };

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;AAEF,eAAO,MAAM,qBAAqB,GAAI,mEAMnC,0BAA0B,gCAsC5B,CAAC"}
+{"version":3,"file":"ThemeTypographyScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemeTypographyScreen.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,0BAA0B,GAAG;IACvC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAwGF,eAAO,MAAM,qBAAqB,GAAI,mEAMnC,0BAA0B,gCA8C5B,CAAC"}

package/dist/screens/ThemeTypographyScreen.js

@@ -1,11 +1,55 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Card, Page, Section, Typography } from '@alveole/components';
+import { Box, Card, Page, PageHeader, Section, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
-import { useWindowDimensions } from 'react-native';
-import { JsonBlock } from '../components/JsonBlock';
+import { View } from 'react-native';
+import { screenContent } from '../styles';
+const isLeafStyle = (value) => typeof value === 'object' && value !== null && typeof value.fontSize === 'number';
+const flattenStyles = (value, prefix = '') => {
+    if (isLeafStyle(value)) {
+        return prefix ? [{ label: prefix, style: value }] : [];
+    }
+    if (typeof value === 'object' && value !== null) {
+        return Object.entries(value).flatMap(([k, v]) => {
+            if (typeof v !== 'object' || v === null)
+                return [];
+            const label = prefix ? `${prefix} ${k}` : k;
+            return flattenStyles(v, label);
+        });
+    }
+    return [];
+};
+const getFontInfo = (style) => {
+    const fontFamily = style.fontFamily ?? '';
+    const fontWeight = style.fontWeight ?? '';
+    if (fontFamily.includes(',')) {
+        const family = fontFamily.split(',')[0]?.trim() ?? '';
+        const weightLabels = {
+            '300': 'Light',
+            '400': 'Regular',
+            '500': 'Medium',
+            '600': 'SemiBold',
+            '700': 'Bold',
+        };
+        return { family, weight: weightLabels[fontWeight] ?? fontWeight };
+    }
+    const [family = '', weight = ''] = fontFamily.split('-');
+    return { family, weight };
+};
+const DIVIDER_COLOR = '#E5E7EB';
+const MUTED_COLOR = '#6B7280';
+const PREVIEW_WIDTH = 96;
+const TableHeader = ({ labelStyle }) => (_jsxs(Box, { display: "flex", gap: 0, children: [_jsxs(Box, { display: "flex", flexDirection: "row", style: { paddingVertical: 8 }, children: [_jsx(Box, { style: { width: PREVIEW_WIDTH }, children: _jsx(Typography, { style: labelStyle, children: "Aper\u00E7u" }) }), _jsx(Box, { style: { flex: 2 }, children: _jsx(Typography, { style: labelStyle, children: "Nom" }) }), _jsx(Box, { style: { flex: 1 }, children: _jsx(Typography, { style: labelStyle, children: "Police" }) }), _jsx(Box, { style: { flex: 1 }, children: _jsx(Typography, { style: labelStyle, children: "Graisse" }) }), _jsx(Box, { style: { flex: 1 }, children: _jsx(Typography, { style: labelStyle, children: "Taille" }) }), _jsx(Box, { style: { flex: 1 }, children: _jsx(Typography, { style: labelStyle, children: "Hauteur" }) })] }), _jsx(View, { style: { height: 1, backgroundColor: DIVIDER_COLOR } })] }));
+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, }) => {
     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, footerContent: footerContent, children: _jsx(Section, { withPaddingY: true, children: _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 16, children: Object.entries(typography).map(([key, value]) => (_jsx(Box, { width: columns === 1 ? '100%' : columns === 2 ? '48%' : '31%', children: _jsx(Card, { children: _jsxs(Box, { display: "flex", gap: 16, p: '100', children: [_jsx(Typography, { style: text.Titres['H5 - XS'], children: key }), typeof value === 'object' && value != null ? (Object.entries(value).map(([subKey, subValue]) => (_jsxs(Box, { display: "flex", gap: 8, children: [_jsx(Typography, { style: text['Corps de texte'].XS.SemiBold, children: subKey }), _jsx(JsonBlock, { value: subValue })] }, subKey)))) : (_jsx(JsonBlock, { value: value }))] }) }) }, key))) }) }) }));
+    const labelStyle = text['Corps de texte'].XS.SemiBold;
+    const valueStyle = text['Corps de texte'].SM.Regular;
+    const categories = Object.entries(typography).map(([key, value]) => ({
+        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))) }) })] }) }));
 };

package/dist/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const screenContent: {
+    readonly display: "flex";
+    readonly gap: 24;
+    readonly pt: "150";
+    readonly pb: "150";
+};
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;CAKhB,CAAC"}

package/dist/styles.js

@@ -0,0 +1,6 @@
+export const screenContent = {
+    display: 'flex',
+    gap: 24,
+    pt: '150',
+    pb: '150',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/storybook",
-  "version": "0.43.2",
+  "version": "1.0.0",
   "description": "Catalog screens and helpers for Alveole stories and theme tokens.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -23,7 +23,9 @@
   },
   "devDependencies": {
     "@alveole/eslint-config": "file:../eslint-config",
-    "eslint": "^9.39.2"
+    "eslint": "9.39.4",
+    "react": "19.2.3",
+    "react-native": "0.85.3"
   },
   "peerDependencies": {
     "@alveole/components": "*",

package/dist/components/FilterBadge.d.ts

@@ -1,7 +0,0 @@
-export type FilterBadgeProps = {
-    active: boolean;
-    label: string;
-    onPress: () => void;
-};
-export declare const FilterBadge: ({ active, label, onPress }: FilterBadgeProps) => import("react").JSX.Element;
-//# sourceMappingURL=FilterBadge.d.ts.map

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

@@ -1 +0,0 @@
-{"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,gCA+BvE,CAAC"}

package/dist/components/FilterBadge.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Typography } from '@alveole/components';
-import { useTheme } from '@alveole/theme';
-import { Pressable } from 'react-native';
-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 }) }) }));
-};