@alveole/storybook 1.9.0 → 2.0.0-alpha

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

@@ -0,0 +1 @@
+{"version":3,"file":"StorySummary.d.ts","sourceRoot":"","sources":["../../src/components/StorySummary.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,6EAA6E;IAC7E,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,CAAC;AAEF,wFAAwF;AACxF,eAAO,MAAM,YAAY,GAAI,aAAa,iBAAiB,gCA0B1D,CAAC"}

package/dist/components/StorySummary.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, toSlug, Typography } from '@alveole/components';
+import { FOCUS_ATTRIBUTE, useTheme } from '@alveole/theme';
+/** Le sommaire d'une page : une entrée par section, vers l'ancre que pose son titre. */
+export const StorySummary = ({ entrees }) => {
+    const { color, text } = useTheme();
+    return (_jsxs(Box, { display: "flex", gap: 8, children: [_jsx(Typography, { style: { ...text['Corps de texte'].XS.CapsBold, color: color.light.text['mention-grey'] }, children: "Sur cette page" }), entrees.map(entree => (_jsx("a", { href: `#${toSlug(entree)}`, style: { textDecoration: 'none' }, [FOCUS_ATTRIBUTE]: 'ring', children: _jsx(Typography, { style: { ...text['Corps de texte'].SM.Regular, color: color.light.text['default-grey'] }, children: entree }) }, entree)))] }));
+};

package/dist/components/UIKitColumn.d.ts

@@ -0,0 +1,25 @@
+import { A } from '@alveole/components';
+import React from 'react';
+export type UIKitColumnItem = {
+    key: string;
+    title: string;
+    /** Typé depuis `A` pour ne pas dépendre d'expo-router ici. */
+    href: React.ComponentProps<typeof A>['href'];
+};
+export type UIKitColumnGroup = {
+    title: string;
+    items: UIKitColumnItem[];
+};
+export type UIKitColumnProps = {
+    groups: UIKitColumnGroup[];
+};
+/**
+ * Navigation verticale du catalogue, sous la barre : elle liste le contenu de la rubrique
+ * courante. Voir docs/adr/0007.
+ *
+ * Elle monte le `Sidebar` publié tel quel, sans logo - il est déjà dans la barre. Primer et
+ * Atlassian font de même : ils réutilisent le composant de liste de leur design system et ne
+ * fabriquent à la main que le conteneur.
+ */
+export declare const UIKitColumn: ({ groups }: UIKitColumnProps) => React.JSX.Element | null;
+//# sourceMappingURL=UIKitColumn.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UIKitColumn.d.ts","sourceRoot":"","sources":["../../src/components/UIKitColumn.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAsD,MAAM,qBAAqB,CAAC;AAE5F,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,eAAe,EAAE,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,gBAAgB,EAAE,CAAC;CAC5B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,GAAI,YAAY,gBAAgB,6BA4BvD,CAAC"}

package/dist/components/UIKitColumn.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sidebar, SidebarDivider, SidebarGroup, SidebarItem } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+import React from 'react';
+/**
+ * Navigation verticale du catalogue, sous la barre : elle liste le contenu de la rubrique
+ * courante. Voir docs/adr/0007.
+ *
+ * Elle monte le `Sidebar` publié tel quel, sans logo - il est déjà dans la barre. Primer et
+ * Atlassian font de même : ils réutilisent le composant de liste de leur design system et ne
+ * fabriquent à la main que le conteneur.
+ */
+export const UIKitColumn = ({ groups }) => {
+    const { isVariant } = useTheme();
+    // Sous 992px la colonne se replie dans le menu de la barre, qui reste le seul contrôle.
+    // Primer et Atlassian replient la leur dès 900px.
+    if (!isVariant('desktop'))
+        return null;
+    // Une rubrique d'une seule page n'a pas de niveau 2 : le contenu reprend la pleine largeur
+    // plutôt que de longer une colonne vide.
+    if (groups.length === 0)
+        return null;
+    return (_jsx(Sidebar, { children: groups.map((group, rang) => (_jsxs(React.Fragment, { children: [rang > 0 && _jsx(SidebarDivider, {}), _jsx(SidebarGroup, { title: group.title, children: group.items.map(item => (_jsx(SidebarItem, { title: item.title, href: item.href }, item.key))) })] }, group.title))) }));
+};

package/dist/components/UIKitTopBar.d.ts

@@ -1,12 +1,21 @@
+import { A } from '@alveole/components';
 import React from 'react';
+import type { UIKitColumnGroup } from './UIKitColumn';
 export type UIKitTopBarItem = {
     key: string;
     label: string;
-    onPress: () => void;
+    /** Typé depuis `A` pour ne pas dépendre d'expo-router ici. */
+    href: React.ComponentProps<typeof A>['href'];
 };
 export type UIKitTopBarProps = {
     activeKey: string;
     items: UIKitTopBarItem[];
+    /**
+     * Niveau 2 de la rubrique courante. Sur desktop il est rendu par la colonne ; sous 992px
+     * la colonne se replie et son contenu descend ici, pour que le menu de la barre reste la
+     * seule commande de navigation. Voir docs/adr/0007.
+     */
+    columnGroups?: UIKitColumnGroup[];
 };
-export declare const UIKitTopBar: ({ activeKey, items }: UIKitTopBarProps) => React.JSX.Element;
+export declare const UIKitTopBar: ({ activeKey, items, columnGroups }: UIKitTopBarProps) => React.JSX.Element;
 //# sourceMappingURL=UIKitTopBar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"UIKitTopBar.d.ts","sourceRoot":"","sources":["../../src/components/UIKitTopBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,eAAe,EAAE,CAAC;CAC1B,CAAC;AAqBF,eAAO,MAAM,WAAW,GAAI,sBAAsB,gBAAgB,sBAoEjE,CAAC"}
+{"version":3,"file":"UIKitTopBar.d.ts","sourceRoot":"","sources":["../../src/components/UIKitTopBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAA2E,MAAM,qBAAqB,CAAC;AAEjH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC,CAAC;AAwJF,eAAO,MAAM,WAAW,GAAI,oCAAyC,gBAAgB,sBAgBpF,CAAC"}

package/dist/components/UIKitTopBar.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Button, Header, LucideIcon, Typography } from '@alveole/components';
-import { useTheme } from '@alveole/theme';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { A, Box, Divider, Header, LucideIcon, SidebarGroup, SidebarItem, Typography } from '@alveole/components';
+import { makeStyles, useTheme } from '@alveole/theme';
 import React from 'react';
 import { Pressable } from 'react-native';
 const AlveoleLogo = () => {
@@ -15,31 +15,88 @@ const AlveoleLogo = () => {
             justifyContent: 'center',
         }, children: _jsx(Typography, { style: { ...text['Corps de texte'].XS.Bold, color: '#fff' }, children: "A" }) }));
 };
-export const UIKitTopBar = ({ activeKey, items }) => {
-    const { color, isVariant, spacing } = useTheme();
-    const [menuOpen, setMenuOpen] = React.useState(false);
+const useNavItemStyles = makeStyles(({ color, radius, spacingValue, text }) => {
+    const activeLabelTypography = text['Corps de texte'].MD.Medium;
+    return {
+        container: {
+            height: 32,
+            paddingLeft: spacingValue('3V'),
+            paddingRight: spacingValue('3V'),
+            borderRadius: radius('md'),
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            transitionProperty: 'background-color',
+            transitionDuration: '0.12s',
+            transitionTimingFunction: 'ease-out',
+        },
+        containerHover: {
+            backgroundColor: color.light.background['transparent-hover'],
+        },
+        label: {
+            ...text['Corps de texte'].MD.Regular,
+            color: color.light.text['mention-grey'],
+        },
+        labelCurrent: {
+            ...activeLabelTypography,
+            color: color.light.text['title-grey'],
+        },
+        // Copie invisible du libellé actif : elle réserve la largeur que prendra l'item
+        // une fois courant, sinon toute la barre se décale au changement de page. Repris de
+        // UnderlineTabbedInterface, chez Primer.
+        labelGhost: {
+            ...activeLabelTypography,
+            height: 0,
+            overflow: 'hidden',
+        },
+    };
+});
+/**
+ * Item de navigation de la barre : aucun remplissage à l'état courant, qui se signale
+ * par le contraste et la graisse seuls. Le fond neutre est réservé au survol.
+ *
+ * Bâti sur `A` pour obtenir une vraie ancre : clic milieu, ouverture en nouvel onglet et
+ * aperçu de la cible dans la barre d'état ne s'obtiennent pas avec un `Pressable` seul.
+ */
+const NavItem = ({ label, href, current, block = false }) => {
+    const styles = useNavItemStyles();
+    return (_jsxs(A, { href: href, direction: "replace", ariaCurrent: current ? 'page' : undefined, style: { ...styles.container, alignItems: block ? 'flex-start' : 'center' }, hoverStyle: styles.containerHover, children: [_jsx(Typography, { style: current ? styles.labelCurrent : styles.label, children: label }), _jsx(Box, { "aria-hidden": true, children: _jsx(Typography, { style: styles.labelGhost, children: label }) })] }));
+};
+/**
+ * La barre en version mobile : un menu qui se deplie sous l'entete. L'etat d'ouverture vit ici,
+ * avec le seul rendu qui s'en sert, plutot que dans la barre qui n'en a pas besoin autrement.
+ */
+const BarreMobile = ({ activeKey, items, columnGroups }) => {
+    const { color, spacing } = useTheme();
+    // Les items sont des ancres : la navigation ne passe plus par un callback qui pourrait
+    // refermer le menu au clic. On retient donc la page pour laquelle le menu a été ouvert,
+    // et il se referme de lui-même dès qu'on arrive ailleurs, sans effet de synchronisation.
+    const [openedFor, setOpenedFor] = React.useState(null);
+    const menuOpen = openedFor === activeKey;
+    const toggleMenu = () => setOpenedFor(menuOpen ? null : activeKey);
+    return (_jsxs(_Fragment, { children: [_jsx(Header, { logo: _jsx(AlveoleLogo, {}), right: _jsx(Pressable, { accessibilityRole: "button", onPress: toggleMenu, style: { padding: 8 }, children: _jsx(LucideIcon, { name: menuOpen ? 'X' : 'Menu', size: "md", color: color.light.text['title-grey'] }) }) }), menuOpen && (_jsxs(Box, { style: {
+                    position: 'sticky',
+                    top: 64,
+                    left: 0,
+                    right: 0,
+                    zIndex: 99,
+                    backgroundColor: color.light.background['default-grey'],
+                    borderBottomWidth: 1,
+                    borderBottomColor: color.light.border['default-grey'],
+                    paddingTop: spacing('2W'),
+                    paddingBottom: spacing('2W'),
+                    paddingLeft: spacing('2W'),
+                    paddingRight: spacing('2W'),
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: spacing('050'),
+                }, children: [items.map(({ key, ...item }) => (_jsx(NavItem, { ...item, current: activeKey === key, block: true }, key))), columnGroups.length > 0 && _jsx(Divider, {}), columnGroups.map(group => (_jsx(SidebarGroup, { title: group.title, children: group.items.map(item => (_jsx(SidebarItem, { title: item.title, href: item.href }, item.key))) }, group.title)))] }))] }));
+};
+export const UIKitTopBar = ({ activeKey, items, columnGroups = [] }) => {
+    const { isVariant } = useTheme();
     if (isVariant('mobile')) {
-        return (_jsxs(_Fragment, { children: [_jsx(Header, { logo: _jsx(AlveoleLogo, {}), right: _jsx(Pressable, { onPress: () => setMenuOpen(v => !v), style: { padding: 8 }, children: _jsx(LucideIcon, { name: menuOpen ? 'X' : 'Menu', size: "md", color: color.light.text['title-grey'] }) }) }), menuOpen && (_jsx(Box, { style: {
-                        position: 'sticky',
-                        top: 64,
-                        left: 0,
-                        right: 0,
-                        zIndex: 99,
-                        backgroundColor: color.light.background['default-grey'],
-                        borderBottomWidth: 1,
-                        borderBottomColor: color.light.border['default-grey'],
-                        paddingTop: spacing('2W'),
-                        paddingBottom: spacing('2W'),
-                        paddingLeft: spacing('2W'),
-                        paddingRight: spacing('2W'),
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: spacing('050'),
-                    }, children: items.map(item => (_jsx(Button, { variant: activeKey === item.key ? 'primary' : 'tertiary', title: item.label, size: "sm", onPress: () => {
-                            item.onPress();
-                            setMenuOpen(false);
-                        } }, item.key))) }))] }));
+        return _jsx(BarreMobile, { activeKey: activeKey, items: items, columnGroups: columnGroups });
     }
-    const right = (_jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: items.map(item => (_jsx(Button, { variant: activeKey === item.key ? 'primary' : 'tertiary', title: item.label, size: "sm", onPress: item.onPress }, item.key))) }));
+    const right = (_jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: items.map(({ key, ...item }) => (_jsx(NavItem, { ...item, current: activeKey === key }, key))) }));
     return _jsx(Header, { logo: _jsx(AlveoleLogo, {}), title: "Alveole UI Kit", right: right });
 };

package/dist/components/choixDuFiltre.d.ts

@@ -0,0 +1,14 @@
+import type { FiltreDeroulantProps } from './FiltreDeroulant';
+/**
+ * Le choix d'un filtre a choix unique apres qu'on a presse une option. Reprendre l'option deja
+ * choisie l'annule, sans quoi on ne pourrait plus revenir a la liste entiere.
+ */
+export declare const choixApres: <Cle extends string>(choisi: Cle | null, option: Cle) => Cle | null;
+type Filtre<Cle extends string> = Pick<FiltreDeroulantProps<Cle>, 'libelle' | 'options' | 'choisi'>;
+/**
+ * Ce que le bouton du filtre annonce : l'option choisie plutot que son libelle generique, car
+ * une fois le menu referme c'est la seule trace du filtre actif.
+ */
+export declare const libelleDuFiltre: <Cle extends string>({ libelle, options, choisi }: Filtre<Cle>) => string;
+export {};
+//# sourceMappingURL=choixDuFiltre.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"choixDuFiltre.d.ts","sourceRoot":"","sources":["../../src/components/choixDuFiltre.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,GAAG,SAAS,MAAM,EAAE,QAAQ,GAAG,GAAG,IAAI,EAAE,QAAQ,GAAG,KAAG,GAAG,GAAG,IACpD,CAAC;AAEpC,KAAK,MAAM,CAAC,GAAG,SAAS,MAAM,IAAI,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAC;AAEpG;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,GAAG,SAAS,MAAM,EAAE,8BAA8B,MAAM,CAAC,GAAG,CAAC,KAAG,MAC/B,CAAC"}

package/dist/components/choixDuFiltre.js

@@ -0,0 +1,10 @@
+/**
+ * Le choix d'un filtre a choix unique apres qu'on a presse une option. Reprendre l'option deja
+ * choisie l'annule, sans quoi on ne pourrait plus revenir a la liste entiere.
+ */
+export const choixApres = (choisi, option) => choisi === option ? null : option;
+/**
+ * Ce que le bouton du filtre annonce : l'option choisie plutot que son libelle generique, car
+ * une fois le menu referme c'est la seule trace du filtre actif.
+ */
+export const libelleDuFiltre = ({ libelle, options, choisi }) => options.find(option => option.key === choisi)?.label ?? libelle;

package/dist/components/hauteurDeCarte.d.ts

@@ -0,0 +1,6 @@
+/**
+ * La hauteur d'une carte de fiche. Hors mobile, les cartes d'une rangee s'etirent a la plus
+ * haute pour aligner leurs bas ; sur mobile, empilees, chacune garde celle de son contenu.
+ */
+export declare const hauteurDeCarte: (mobile: boolean) => "100%" | undefined;
+//# sourceMappingURL=hauteurDeCarte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hauteurDeCarte.d.ts","sourceRoot":"","sources":["../../src/components/hauteurDeCarte.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,QAAQ,OAAO,KAAG,MAAM,GAAG,SAA0C,CAAC"}

package/dist/components/hauteurDeCarte.js

@@ -0,0 +1,5 @@
+/**
+ * La hauteur d'une carte de fiche. Hors mobile, les cartes d'une rangee s'etirent a la plus
+ * haute pour aligner leurs bas ; sur mobile, empilees, chacune garde celle de son contenu.
+ */
+export const hauteurDeCarte = (mobile) => (mobile ? undefined : '100%');

package/dist/index.d.ts

@@ -1,6 +1,9 @@
 export * from './components/DocFooter';
 export * from './components/JsonBlock';
+export * from './components/UIKitColumn';
 export * from './components/UIKitTopBar';
+export * from './navigation';
+export * from './pages/InstallationPage';
 export * from './pages/PhilosophyPage';
 export * from './pages/UIKitHomePage';
 export * from './pages/UIKitPage';

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,mCAAmC,CAAC;AAClD,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,0BAA0B,CAAC;AACzC,cAAc,cAAc,CAAC;AAC7B,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

@@ -1,6 +1,9 @@
 export * from './components/DocFooter';
 export * from './components/JsonBlock';
+export * from './components/UIKitColumn';
 export * from './components/UIKitTopBar';
+export * from './navigation';
+export * from './pages/InstallationPage';
 export * from './pages/PhilosophyPage';
 export * from './pages/UIKitHomePage';
 export * from './pages/UIKitPage';

package/dist/navigation.d.ts

@@ -0,0 +1,6 @@
+export type RubriqueRoute = {
+    key: string;
+    href: string;
+};
+export declare const findCurrentRubriqueKey: (rubriques: RubriqueRoute[], pathname: string) => string;
+//# sourceMappingURL=navigation.d.ts.map

package/dist/navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../src/navigation.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,WAAW,aAAa,EAAE,EAAE,UAAU,MAAM,WAGX,CAAC"}

package/dist/navigation.js

@@ -0,0 +1,3 @@
+export const findCurrentRubriqueKey = (rubriques, pathname) => rubriques
+    .filter(rubrique => pathname.startsWith(rubrique.href))
+    .sort((left, right) => right.href.length - left.href.length)[0]?.key;

package/dist/pages/InstallationPage.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"InstallationPage.d.ts","sourceRoot":"","sources":["../../src/pages/InstallationPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AA0B1B,MAAM,MAAM,qBAAqB,GAAG;IAClC,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,gBAAgB,GAAI,2CAA2C,qBAAqB,sBAiBhG,CAAC"}

package/dist/pages/InstallationPage.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnchorHeading, Box, Typography } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+import { EcranDeCatalogue } from '../components/EcranDeCatalogue';
+import { JsonBlock } from '../components/JsonBlock';
+import { ETAPES_D_INSTALLATION } from './installation';
+const EtapeDInstallationSection = ({ titre, paragraphes, extraits = [] }) => {
+    const { text } = useTheme();
+    return (_jsxs(Box, { display: "flex", gap: 8, mb: '400', children: [_jsx(AnchorHeading, { style: text.Titres['H4 - SM'], children: titre }), paragraphes.map(paragraphe => (_jsx(Typography, { style: text['Corps de texte'].MD.Regular, children: paragraphe }, paragraphe))), extraits.map(({ langage, fichier, source }) => (_jsxs(Box, { display: "flex", gap: 4, children: [fichier ? _jsx(Typography, { style: text['Corps de texte'].SM.Bold, children: fichier }) : null, _jsx(JsonBlock, { language: langage, value: source })] }, source)))] }));
+};
+export const InstallationPage = ({ beforeContent, sidebar, footerContent }) => {
+    return (_jsx(EcranDeCatalogue, { title: "Installation", description: "Installer et configurer Alveole dans une application Expo", sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, sommaire: ETAPES_D_INSTALLATION.map(({ titre }) => titre), children: _jsx(Box, { display: "flex", gap: 0, children: ETAPES_D_INSTALLATION.map(etape => (_jsx(EtapeDInstallationSection, { ...etape }, etape.titre))) }) }));
+};

package/dist/pages/PhilosophyPage.d.ts

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

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;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"}
+{"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,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,2CAA2C,mBAAmB,sBAiB5F,CAAC"}

package/dist/pages/PhilosophyPage.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Page, PageHeader, Section, Typography } from '@alveole/components';
+import { AnchorHeading, Box, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
-import { screenContent } from '../styles';
-const PhilosophySection = ({ title, children }) => {
+import { EcranDeCatalogue } from '../components/EcranDeCatalogue';
+import { SECTIONS_DE_PHILOSOPHIE } from './philosophie';
+const PhilosophySection = ({ titre, paragraphes }) => {
     const { text } = useTheme();
-    return (_jsxs(Box, { display: "flex", gap: 8, mb: '400', children: [_jsx(Typography, { style: text.Titres['H4 - SM'], children: title }), children] }));
+    return (_jsxs(Box, { display: "flex", gap: 8, mb: '400', children: [_jsx(AnchorHeading, { style: text.Titres['H4 - SM'], children: titre }), paragraphes.map(paragraphe => (_jsx(Typography, { style: text['Corps de texte'].MD.Regular, children: paragraphe }, paragraphe)))] }));
 };
-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: _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é."] }) })] }) })] }) }));
+export const PhilosophyPage = ({ beforeContent, sidebar, footerContent }) => {
+    return (_jsx(EcranDeCatalogue, { title: "Philosophie", description: "Les principes qui guident Alveole", sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, sommaire: SECTIONS_DE_PHILOSOPHIE.map(({ titre }) => titre), children: _jsx(Box, { display: "flex", gap: 0, children: SECTIONS_DE_PHILOSOPHIE.map(section => (_jsx(PhilosophySection, { ...section }, section.titre))) }) }));
 };

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

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

package/dist/pages/UIKitHomePage.js

@@ -1,10 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Card, Page, Section, Typography } from '@alveole/components';
-import { useTheme } from '@alveole/theme';
-const HomeCard = ({ title, description, onPress }) => {
-    const { text } = useTheme();
-    return (_jsx(Card, { onPress: onPress, children: _jsxs(Box, { display: "flex", gap: 8, p: '150', children: [_jsx(Typography, { style: text.Titres['H4 - SM'], children: title }), _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: description })] }) }));
-};
+import { Box, Page, Section } from '@alveole/components';
+import { MenuCard } from '../components/MenuCard';
 export const UIKitHomePage = ({ title = 'UI Kit', description = 'Documentation du design system', onOpenComponents, onOpenTheme, onOpenConstants, }) => {
-    return (_jsx(Page, { scrollable: true, title: title, description: description, children: _jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: 16, children: [_jsx(HomeCard, { title: "Composants", description: "Liste des composants disponibles pour le d\u00E9veloppement.", onPress: onOpenComponents }), _jsx(HomeCard, { title: "Th\u00E8me", description: "Th\u00E8me de l\u2019application, liste des tokens issus du design system.", onPress: onOpenTheme }), _jsx(HomeCard, { title: "Constantes", description: "Liste des constantes de th\u00E8me expos\u00E9es par la librairie.", onPress: onOpenConstants })] }) }) }));
+    return (_jsx(Page, { scrollable: true, title: title, description: description, children: _jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: 16, children: [_jsx(MenuCard, { title: "Composants", description: "Liste des composants disponibles pour le d\u00E9veloppement.", onPress: onOpenComponents }), _jsx(MenuCard, { title: "Th\u00E8me", description: "Th\u00E8me de l\u2019application, liste des tokens issus du design system.", onPress: onOpenTheme }), _jsx(MenuCard, { title: "Constantes", description: "Liste des constantes de th\u00E8me expos\u00E9es par la librairie.", onPress: onOpenConstants })] }) }) }));
 };

package/dist/pages/UIKitPage.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"UIKitPage.d.ts","sourceRoot":"","sources":["../../src/pages/UIKitPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG3C,KAAK,SAAS,GAAG;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CAC/B,CAAC;AAcF,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AA2GF,eAAO,MAAM,SAAS,GAAI,6EAQvB,cAAc,6BAwHhB,CAAC"}
+{"version":3,"file":"UIKitPage.d.ts","sourceRoot":"","sources":["../../src/pages/UIKitPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAK3C,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CAC/B,CAAC;AAcF,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAsKF,eAAO,MAAM,SAAS,GAAI,6EAQvB,cAAc,oBAqBhB,CAAC"}

package/dist/pages/UIKitPage.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Button, Card, Page, Section, Typography } from '@alveole/components';
-import { CustomPalette, CustomTypography, useTheme } from '@alveole/theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Page, Section } from '@alveole/components';
+import { CustomPalette, CustomTypography } from '@alveole/theme';
 import React from 'react';
 import { StoriesScreen } from '../screens/StoriesScreen';
 import { StoryDetailScreen } from '../screens/StoryDetailScreen';
@@ -8,62 +8,85 @@ import { ThemeConstantDetailScreen } from '../screens/ThemeConstantDetailScreen'
 import { ThemeConstantsScreen } from '../screens/ThemeConstantsScreen';
 import { ThemePaletteScreen } from '../screens/ThemePaletteScreen';
 import { ThemeTypographyScreen } from '../screens/ThemeTypographyScreen';
+import { HomeScreen, InternalHeader } from './ecransDuKit';
 import { PhilosophyPage } from './PhilosophyPage';
-const MenuCard = ({ title, description, onPress }) => {
-    const { text } = useTheme();
-    return (_jsx(Card, { onPress: onPress, children: _jsxs(Box, { display: "flex", gap: 8, p: '150', children: [_jsx(Typography, { style: text.Titres['H4 - SM'], children: title }), _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: description })] }) }));
-};
-const InternalHeader = ({ canGoBack, onBack }) => {
-    if (!canGoBack)
-        return null;
-    return (_jsx(Section, { withPaddingY: true, children: _jsx(Box, { children: _jsx(Button, { title: "Retour", variant: "tertiary", size: "sm", onPress: onBack }) }) }));
-};
-const HomeScreen = ({ title, description, blankPage, onOpenComponents, onOpenTheme, onOpenConstants, onOpenBlank, onOpenPhilosophy, }) => {
-    return (_jsx(Page, { scrollable: true, title: title, description: description, children: _jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: 16, children: [_jsx(MenuCard, { title: "Composants", description: "Catalogue des composants et de leurs variantes.", onPress: onOpenComponents }), _jsx(MenuCard, { title: "Th\u00E8me", description: "Couleurs et typographies du design system.", onPress: onOpenTheme }), _jsx(MenuCard, { title: "Constantes", description: "Constantes expos\u00E9es par le th\u00E8me.", onPress: onOpenConstants }), _jsx(MenuCard, { title: "Philosophie", description: "Les principes qui guident Alveole.", onPress: onOpenPhilosophy }), blankPage ? (_jsx(MenuCard, { title: blankPage.title ?? 'Page vierge', description: blankPage.description ?? 'Espace de test libre pour expérimenter.', onPress: onOpenBlank })) : null] }) }) }));
-};
-const ThemeHomeScreen = ({ onOpenColors, onOpenTypography, beforeContent, }) => {
-    return (_jsx(Page, { scrollable: true, title: "UI Kit - Th\u00E8me", description: "Tokens du th\u00E8me", beforeContent: beforeContent, children: _jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: 16, children: [_jsx(MenuCard, { title: "Couleurs", description: "Palette et couleurs du th\u00E8me.", onPress: onOpenColors }), _jsx(MenuCard, { title: "Typographies", description: "Styles de texte et hi\u00E9rarchie typographique.", onPress: onOpenTypography })] }) }) }));
-};
-export const UIKitPage = ({ stories, constants, palette = CustomPalette, typography = CustomTypography, title = 'UI Kit', description = 'Documentation du design system', blankPage, }) => {
+import { UIKitThemePage } from './UIKitThemePage';
+/**
+ * La pile de navigation du kit. Elle vit ici et non dans le composant : la page n'a pas a savoir
+ * comment on empile des routes pour savoir laquelle afficher.
+ */
+const useNavigationDuKit = () => {
     const [history, setHistory] = React.useState([{ name: 'home' }]);
-    const route = history[history.length - 1];
-    const canGoBack = history.length > 1;
     const push = React.useCallback((nextRoute) => {
         setHistory(current => [...current, nextRoute]);
     }, []);
     const goBack = React.useCallback(() => {
         setHistory(current => (current.length > 1 ? current.slice(0, -1) : current));
     }, []);
-    const beforeContent = _jsx(InternalHeader, { canGoBack: canGoBack, onBack: goBack });
+    return { route: history[history.length - 1], canGoBack: history.length > 1, push, goBack };
+};
+/**
+ * Chaque famille d'ecrans rend la route qui la concerne, et `null` sinon : c'est ce `null` qui
+ * passe la main a la suivante. Decouper le routage par domaine plutot qu'en une seule chaine
+ * garde chaque branche lisible et laisse TypeScript affiner la route sur son `name`.
+ */
+const ecranDAccueil = (route, ctx) => {
     if (route.name === 'home') {
-        return (_jsx(HomeScreen, { title: title, description: description, blankPage: blankPage, onOpenComponents: () => push({ name: 'components' }), onOpenTheme: () => push({ name: 'theme-home' }), onOpenConstants: () => push({ name: 'constants' }), onOpenBlank: () => push({ name: 'blank' }), onOpenPhilosophy: () => push({ name: 'philosophy' }) }));
+        return (_jsx(HomeScreen, { title: ctx.title, description: ctx.description, blankPage: ctx.blankPage, onOpenComponents: () => ctx.push({ name: 'components' }), onOpenTheme: () => ctx.push({ name: 'theme-home' }), onOpenConstants: () => ctx.push({ name: 'constants' }), onOpenBlank: () => ctx.push({ name: 'blank' }), onOpenPhilosophy: () => ctx.push({ name: 'philosophy' }) }));
+    }
+    if (route.name === 'philosophy')
+        return _jsx(PhilosophyPage, { beforeContent: ctx.beforeContent });
+    if (route.name === 'blank' && ctx.blankPage) {
+        const { blankPage } = ctx;
+        return (_jsx(Page, { scrollable: true, title: blankPage.title ?? 'Page vierge', description: blankPage.description ?? 'Zone de test libre', beforeContent: ctx.beforeContent, children: _jsx(Section, { withPaddingY: true, children: blankPage.render() }) }));
     }
+    return null;
+};
+const ecranDesComposants = (route, ctx) => {
     if (route.name === 'components') {
-        return (_jsx(StoriesScreen, { beforeContent: beforeContent, stories: stories, title: "UI Kit - Composants", description: "Catalogue des composants", createLabel: blankPage ? (blankPage.title ?? 'Page vierge') : undefined, onCreatePress: blankPage ? () => push({ name: 'blank' }) : undefined, getStoryHref: story => `/components/${encodeURIComponent(story.default.title)}` }));
+        return (_jsx(StoriesScreen, { beforeContent: ctx.beforeContent, stories: ctx.stories, title: "UI Kit - Composants", description: "Catalogue des composants", createLabel: ctx.blankPage ? (ctx.blankPage.title ?? 'Page vierge') : undefined, onCreatePress: ctx.blankPage ? () => ctx.push({ name: 'blank' }) : undefined, getStoryHref: story => `/components/${encodeURIComponent(story.default.title)}` }));
     }
     if (route.name === 'component-detail') {
-        return (_jsx(StoryDetailScreen, { beforeContent: beforeContent, story: route.story, notFoundMessage: "Composant introuvable" }));
+        return (_jsx(StoryDetailScreen, { beforeContent: ctx.beforeContent, story: route.story, notFoundMessage: "Composant introuvable" }));
     }
+    return null;
+};
+const ecranDuTheme = (route, ctx) => {
     if (route.name === 'theme-home') {
-        return (_jsx(ThemeHomeScreen, { beforeContent: beforeContent, onOpenColors: () => push({ name: 'theme-colors' }), onOpenTypography: () => push({ name: 'theme-typography' }) }));
+        return (_jsx(UIKitThemePage, { beforeContent: ctx.beforeContent, onOpenColors: () => ctx.push({ name: 'theme-colors' }), onOpenTypography: () => ctx.push({ name: 'theme-typography' }) }));
     }
     if (route.name === 'theme-colors') {
-        return (_jsx(ThemePaletteScreen, { beforeContent: beforeContent, palette: palette, title: "UI Kit - Couleurs du th\u00E8me", description: "Palette et couleurs du th\u00E8me" }));
+        return (_jsx(ThemePaletteScreen, { beforeContent: ctx.beforeContent, palette: ctx.palette, title: "UI Kit - Couleurs du th\u00E8me", description: "Palette et couleurs du th\u00E8me" }));
     }
     if (route.name === 'theme-typography') {
-        return (_jsx(ThemeTypographyScreen, { beforeContent: beforeContent, typography: typography, title: "UI Kit - Textes du th\u00E8me", description: "Styles de texte du th\u00E8me" }));
+        return (_jsx(ThemeTypographyScreen, { beforeContent: ctx.beforeContent, typography: ctx.typography, title: "UI Kit - Textes du th\u00E8me", description: "Styles de texte du th\u00E8me" }));
     }
+    return null;
+};
+const ecranDesConstantes = (route, ctx) => {
     if (route.name === 'constants') {
-        return (_jsx(ThemeConstantsScreen, { beforeContent: beforeContent, constants: constants, title: "UI Kit - Constantes", description: "Constantes expos\u00E9es par le th\u00E8me", onSelectConstant: ({ name, value }) => push({ name: 'constant-detail', constantName: name, constantValue: value }) }));
+        return (_jsx(ThemeConstantsScreen, { beforeContent: ctx.beforeContent, constants: ctx.constants, title: "UI Kit - Constantes", description: "Constantes expos\u00E9es par le th\u00E8me", onSelectConstant: ({ name, value }) => ctx.push({ name: 'constant-detail', constantName: name, constantValue: value }) }));
     }
     if (route.name === 'constant-detail') {
-        return (_jsx(ThemeConstantDetailScreen, { beforeContent: beforeContent, name: route.constantName, value: route.constantValue }));
-    }
-    if (route.name === 'philosophy') {
-        return _jsx(PhilosophyPage, { beforeContent: beforeContent });
-    }
-    if (route.name === 'blank' && blankPage) {
-        return (_jsx(Page, { scrollable: true, title: blankPage.title ?? 'Page vierge', description: blankPage.description ?? 'Zone de test libre', beforeContent: beforeContent, children: _jsx(Section, { withPaddingY: true, children: blankPage.render() }) }));
+        return (_jsx(ThemeConstantDetailScreen, { beforeContent: ctx.beforeContent, name: route.constantName, value: route.constantValue }));
     }
     return null;
 };
+export const UIKitPage = ({ stories, constants, palette = CustomPalette, typography = CustomTypography, title = 'UI Kit', description = 'Documentation du design system', blankPage, }) => {
+    const { route, canGoBack, push, goBack } = useNavigationDuKit();
+    const ctx = {
+        stories,
+        constants,
+        palette,
+        typography,
+        title,
+        description,
+        blankPage,
+        beforeContent: _jsx(InternalHeader, { canGoBack: canGoBack, onBack: goBack }),
+        push,
+    };
+    return (ecranDAccueil(route, ctx) ??
+        ecranDesComposants(route, ctx) ??
+        ecranDuTheme(route, ctx) ??
+        ecranDesConstantes(route, ctx));
+};

package/dist/pages/UIKitThemePage.d.ts

@@ -1,8 +1,13 @@
+import React from 'react';
 export type UIKitThemePageProps = {
     title?: string;
     description?: string;
     onOpenColors: () => void;
     onOpenTypography: () => void;
+    onOpenCSSVariables?: () => void;
+    sidebar?: React.ReactNode;
+    footerContent?: React.ReactNode;
+    beforeContent?: React.ReactNode;
 };
-export declare const UIKitThemePage: ({ title, description, onOpenColors, onOpenTypography, }: UIKitThemePageProps) => import("react").JSX.Element;
+export declare const UIKitThemePage: ({ title, description, onOpenColors, onOpenTypography, onOpenCSSVariables, sidebar, footerContent, beforeContent, }: UIKitThemePageProps) => React.JSX.Element;
 //# sourceMappingURL=UIKitThemePage.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"UIKitThemePage.d.ts","sourceRoot":"","sources":["../../src/pages/UIKitThemePage.tsx"],"names":[],"mappings":"AAsBA,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,yDAK5B,mBAAmB,gCAerB,CAAC"}
+{"version":3,"file":"UIKitThemePage.d.ts","sourceRoot":"","sources":["../../src/pages/UIKitThemePage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,oHAS5B,mBAAmB,sBA6BrB,CAAC"}