@alveole/components 0.20.0 → 0.22.0

package/dist/core/A/A.d.ts

@@ -0,0 +1,16 @@
+import { Href } from 'expo-router';
+import React, { CSSProperties } from 'react';
+export type CanAccessHref = (href: Href & string) => boolean;
+/** Contexte optionnel pour fournir la logique d'accès aux liens (ex. droits métier). Non fourni = tous les liens sont cliquables. */
+export declare const LinkAccessContext: React.Context<CanAccessHref | null>;
+export type AProps = React.PropsWithChildren<{
+    href: Href & string;
+    /** default: "push" */
+    direction?: 'push' | 'replace' | 'dismiss';
+    style?: CSSProperties;
+    hoverStyle?: CSSProperties;
+    /** Override la logique d'accès (sinon utilise LinkAccessContext si fourni, sinon accès autorisé). */
+    canAccessHref?: CanAccessHref;
+}>;
+export declare const A: (props: AProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=A.d.ts.map

package/dist/core/A/A.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"A.d.ts","sourceRoot":"","sources":["../../../src/core/A/A.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAQ,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,EAAE,EAAE,aAAa,EAA6B,MAAM,OAAO,CAAC;AAKxE,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,KAAK,OAAO,CAAC;AAE7D,qIAAqI;AACrI,eAAO,MAAM,iBAAiB,qCAA4C,CAAC;AAE3E,MAAM,MAAM,MAAM,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC3C,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC;IACpB,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;IAC3C,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,qGAAqG;IACrG,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC,CAAC;AAEH,eAAO,MAAM,CAAC,GAAI,OAAO,MAAM,4CAwB9B,CAAC"}

package/dist/core/A/A.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Link } from 'expo-router';
+import { createContext, useContext } from 'react';
+import { Pressable } from 'react-native';
+import { Box } from '../Box';
+import { useStyles } from './A.styles';
+/** Contexte optionnel pour fournir la logique d'accès aux liens (ex. droits métier). Non fourni = tous les liens sont cliquables. */
+export const LinkAccessContext = createContext(null);
+export const A = (props) => {
+    const { children, href, direction = 'push', style, hoverStyle, canAccessHref: canAccessProp } = props;
+    const styles = useStyles();
+    const canAccessFromContext = useContext(LinkAccessContext);
+    const canAccess = canAccessProp ?? canAccessFromContext ?? (() => true);
+    const expoLink = (_jsx(Link, { href: href, asChild: true, replace: direction === 'replace', push: direction === 'push', dismissTo: direction === 'dismiss', children: _jsx(Pressable, { children: _jsx(Box, { tag: "a-pressable", style: { ...styles.pressable, ...style }, hoverStyle: hoverStyle, children: children }) }) }));
+    return canAccess(href) ? expoLink : _jsx(_Fragment, { children: children });
+};

package/dist/core/A/A.stories.d.ts

@@ -0,0 +1,20 @@
+declare const _default: {
+    title: string;
+    tags: ["Kit"];
+    experimental: true;
+    description: string;
+    component: (props: import("./A").AProps) => import("react/jsx-runtime").JSX.Element;
+    styleFn: () => {
+        container: {};
+        pressable: {
+            cursor: "pointer";
+            color: "inherit";
+            transitionProperty: "all";
+            transitionDuration: "0.1s";
+            transitionTimingFunction: "ease-in-out";
+        };
+    };
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=A.stories.d.ts.map

package/dist/core/A/A.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"A.stories.d.ts","sourceRoot":"","sources":["../../../src/core/A/A.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAKA,wBAOkB;AAElB,eAAO,MAAM,OAAO,+CAInB,CAAC"}

package/dist/core/A/A.stories.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from '../Typography';
+import { A } from './A';
+import { useStyles } from './A.styles';
+export default {
+    title: 'A',
+    tags: ['Kit'],
+    experimental: true,
+    description: 'Equivalent d’une balise <a>',
+    component: A,
+    styleFn: useStyles,
+};
+export const Default = () => (_jsx(A, { href: '/ui-kit/components/A', children: _jsx(Typography, { children: "Children" }) }));

package/dist/core/A/A.styles.d.ts

@@ -0,0 +1,11 @@
+export declare const useStyles: () => {
+    container: {};
+    pressable: {
+        cursor: "pointer";
+        color: "inherit";
+        transitionProperty: "all";
+        transitionDuration: "0.1s";
+        transitionTimingFunction: "ease-in-out";
+    };
+};
+//# sourceMappingURL=A.styles.d.ts.map

package/dist/core/A/A.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"A.styles.d.ts","sourceRoot":"","sources":["../../../src/core/A/A.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;CASnB,CAAC"}

package/dist/core/A/A.styles.js

@@ -0,0 +1,11 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(() => ({
+    container: {},
+    pressable: {
+        cursor: 'pointer',
+        color: 'inherit',
+        transitionProperty: 'all',
+        transitionDuration: '0.1s',
+        transitionTimingFunction: 'ease-in-out',
+    },
+}));

package/dist/core/A/index.d.ts

@@ -0,0 +1,2 @@
+export * from './A';
+//# sourceMappingURL=index.d.ts.map

package/dist/core/A/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/A/index.ts"],"names":[],"mappings":"AAAA,cAAc,KAAK,CAAC"}

package/dist/core/A/index.js

@@ -0,0 +1 @@
+export * from './A';

package/dist/core/index.d.ts

@@ -1,3 +1,4 @@
+export * from './A';
 export * from './Box';
 export * from './Image';
 export * from './Metabase';

package/dist/core/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,KAAK,CAAC;AACpB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC"}

package/dist/core/index.js

@@ -1,3 +1,4 @@
+export * from './A';
 export * from './Box';
 export * from './Image';
 export * from './Metabase';

package/dist/stories/index.d.ts

@@ -1,3 +1,4 @@
+export * as AStory from '../core/A/A.stories';
 export * as BoxStory from '../core/Box/Box.stories';
 export * as ImageStory from '../core/Image/Image.stories';
 export * as MetabaseStory from '../core/Metabase/Metabase.stories';
@@ -6,12 +7,14 @@ export * as SectionStory from '../core/Section/Section.stories';
 export * as TypographyStory from '../core/Typography/Typography.stories';
 export * as VersionStory from '../core/Version/Version.stories';
 export * as AvatarStory from '../ui/Avatar/Avatar.stories';
+export * as BreadcrumbsStory from '../ui/Breadcrumbs/Breadcrumbs.stories';
 export * as ButtonStory from '../ui/Button/Button.stories';
 export * as CardStory from '../ui/Card/Card.stories';
 export * as DividerStory from '../ui/Divider/Divider.stories';
 export * as EmptyStateStory from '../ui/EmptyState/EmptyState.stories';
 export * as ListItemStory from '../ui/ListItem/ListItem.stories';
 export * as LucideIconStory from '../ui/LucideIcon/LucideIcon.stories';
+export * as PageHeaderStory from '../ui/PageHeader/PageHeader.stories';
 export * as ResourceListStory from '../ui/ResourceList/ResourceList.stories';
 export * as ToolbarBottomNavStory from '../ui/ToolbarBottomNav/ToolbarBottomNav.stories';
 export * as ToolbarTopStory from '../ui/ToolbarTop/ToolbarTop.stories';

package/dist/stories/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stories/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,UAAU,MAAM,6BAA6B,CAAC;AAC1D,OAAO,KAAK,aAAa,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,SAAS,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAChE,OAAO,KAAK,eAAe,MAAM,uCAAuC,CAAC;AACzE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAGhE,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,aAAa,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,iBAAiB,MAAM,yCAAyC,CAAC;AAC7E,OAAO,KAAK,qBAAqB,MAAM,iDAAiD,CAAC;AACzF,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stories/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAC9C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,UAAU,MAAM,6BAA6B,CAAC;AAC1D,OAAO,KAAK,aAAa,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,SAAS,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAChE,OAAO,KAAK,eAAe,MAAM,uCAAuC,CAAC;AACzE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAGhE,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,gBAAgB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,aAAa,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,iBAAiB,MAAM,yCAAyC,CAAC;AAC7E,OAAO,KAAK,qBAAqB,MAAM,iDAAiD,CAAC;AACzF,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC"}

package/dist/stories/index.js

@@ -1,4 +1,5 @@
 // Core
+export * as AStory from '../core/A/A.stories';
 export * as BoxStory from '../core/Box/Box.stories';
 export * as ImageStory from '../core/Image/Image.stories';
 export * as MetabaseStory from '../core/Metabase/Metabase.stories';
@@ -8,12 +9,14 @@ export * as TypographyStory from '../core/Typography/Typography.stories';
 export * as VersionStory from '../core/Version/Version.stories';
 // UI
 export * as AvatarStory from '../ui/Avatar/Avatar.stories';
+export * as BreadcrumbsStory from '../ui/Breadcrumbs/Breadcrumbs.stories';
 export * as ButtonStory from '../ui/Button/Button.stories';
 export * as CardStory from '../ui/Card/Card.stories';
 export * as DividerStory from '../ui/Divider/Divider.stories';
 export * as EmptyStateStory from '../ui/EmptyState/EmptyState.stories';
 export * as ListItemStory from '../ui/ListItem/ListItem.stories';
 export * as LucideIconStory from '../ui/LucideIcon/LucideIcon.stories';
+export * as PageHeaderStory from '../ui/PageHeader/PageHeader.stories';
 export * as ResourceListStory from '../ui/ResourceList/ResourceList.stories';
 export * as ToolbarBottomNavStory from '../ui/ToolbarBottomNav/ToolbarBottomNav.stories';
 export * as ToolbarTopStory from '../ui/ToolbarTop/ToolbarTop.stories';

package/dist/ui/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export type BreadcrumbItem = {
+    label: string;
+    href: string;
+    isCurrent: boolean;
+};
+export type BreadcrumbsProps = React.PropsWithChildren<{
+    /** Label du premier élément (lien vers la racine). Défaut : "Accueil" */
+    rootLabel?: string;
+    /**
+     * Segments à ne pas afficher dans le fil d'Ariane (ex. ["admin"] pour avoir Accueil > Missions au lieu de Accueil > Admin > Missions).
+     */
+    segmentsToSkip?: string[];
+    /**
+     * Personnalisation du libellé pour un segment.
+     * Par défaut : capitalisation + remplacement des - et _ par des espaces.
+     */
+    getLabel?: (segment: string, index: number, path: string) => string;
+}>;
+/**
+ * Fil d'Ariane construit à partir de la navigation Expo Router.
+ * Tous les éléments sauf le dernier (page en cours) sont cliquables.
+ *
+ * @example
+ * Accueil > Admin > Missions > Détail
+ */
+export declare const Breadcrumbs: (props: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Breadcrumbs.d.ts.map

package/dist/ui/Breadcrumbs/Breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/ui/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAMF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACrD,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CACrE,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CA6ClD,CAAC"}

package/dist/ui/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePathname } from 'expo-router';
+import { A, Box, Typography } from '../../core';
+import { useStyles } from './Breadcrumbs.styles';
+function humanizeSegment(segment) {
+    return segment.replace(/[-_]/g, ' ').replace(/^\w/, c => c.toUpperCase());
+}
+/**
+ * Fil d'Ariane construit à partir de la navigation Expo Router.
+ * Tous les éléments sauf le dernier (page en cours) sont cliquables.
+ *
+ * @example
+ * Accueil > Admin > Missions > Détail
+ */
+export const Breadcrumbs = (props) => {
+    const { rootLabel = 'Accueil', segmentsToSkip, getLabel = segment => humanizeSegment(segment) } = props;
+    const pathname = usePathname();
+    const styles = useStyles();
+    const segments = pathname.split('/').filter(Boolean);
+    const segmentItems = segments
+        .map((segment, index) => ({
+        segment,
+        index,
+        path: '/' + segments.slice(0, index + 1).join('/'),
+    }))
+        .filter(({ segment }) => !segmentsToSkip?.includes(segment));
+    const items = [
+        {
+            label: rootLabel,
+            href: '/',
+            isCurrent: segments.length === 0,
+        },
+        ...segmentItems.map(({ segment, index, path }) => ({
+            label: getLabel(segment, index, path),
+            href: path,
+            isCurrent: index === segments.length - 1,
+        })),
+    ];
+    return (_jsx(Box, { style: styles.container, children: items.map((item, index) => (_jsxs(Box, { style: { flexDirection: 'row', alignItems: 'center' }, children: [index > 0 && _jsx(Typography, { style: styles.separator, children: " > " }), item.isCurrent ? (_jsx(Typography, { style: styles.current, children: item.label })) : (_jsx(A, { href: item.href, style: styles.link, hoverStyle: styles.linkHover, children: item.label }))] }, `${item.href}-${index}`))) }));
+};

package/dist/ui/Breadcrumbs/Breadcrumbs.stories.d.ts

@@ -0,0 +1,45 @@
+declare const _default: {
+    title: string;
+    tags: ["Kit"];
+    experimental: false;
+    description: string;
+    component: (props: import("./Breadcrumbs").BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;
+    styleFn: () => {
+        container: {
+            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            fontSize: 12;
+            lineHeight: 20;
+            letterSpacing: 0;
+            flexDirection: "row";
+            flexWrap: "wrap";
+            alignItems: "center";
+            gap: import("@alveole/theme").Spacing;
+        };
+        separator: {
+            color: "#5F6571";
+        };
+        current: {
+            color: "#151617";
+        };
+        link: {
+            transitionProperty: "text-decoration";
+            transitionDuration: "0.1s";
+            transitionTimingFunction: "ease-in-out";
+            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            fontSize: 12;
+            lineHeight: 20;
+            letterSpacing: 0;
+            color: "#5F6571";
+            textDecoration: string;
+        };
+        linkHover: {
+            textDecoration: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithCustomRootLabel: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithCustomLabels: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithSegmentsToSkip: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Breadcrumbs.stories.d.ts.map

package/dist/ui/Breadcrumbs/Breadcrumbs.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Breadcrumbs/Breadcrumbs.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAQkB;AAElB,eAAO,MAAM,OAAO,+CAInB,CAAC;AAEF,eAAO,MAAM,mBAAmB,+CAI/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CAe5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,+CAgB9B,CAAC"}

package/dist/ui/Breadcrumbs/Breadcrumbs.stories.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { Breadcrumbs } from './Breadcrumbs';
+import { useStyles } from './Breadcrumbs.styles';
+export default {
+    title: 'Breadcrumbs',
+    tags: ['Kit'],
+    experimental: false,
+    description: "Fil d'Ariane construit à partir de la navigation Expo Router. Tous les éléments sauf le dernier (page en cours) sont cliquables.",
+    component: Breadcrumbs,
+    styleFn: useStyles,
+};
+export const Default = () => (_jsx(Box, { p: 4, children: _jsx(Breadcrumbs, {}) }));
+export const WithCustomRootLabel = () => (_jsx(Box, { p: 4, children: _jsx(Breadcrumbs, { rootLabel: "Tableau de bord" }) }));
+export const WithCustomLabels = () => (_jsx(Box, { p: 4, children: _jsx(Breadcrumbs, { getLabel: (segment, _index, _path) => {
+            const labels = {
+                admin: 'Administration',
+                missions: 'Missions',
+                show: 'Détail',
+                salarie: 'Espace salarié',
+                client: 'Espace client',
+            };
+            return labels[segment] ?? segment;
+        } }) }));
+export const WithSegmentsToSkip = () => (_jsx(Box, { p: 4, children: _jsx(Breadcrumbs, { segmentsToSkip: ['admin', 'ui-kit'], getLabel: (segment, _index, _path) => {
+            const labels = {
+                admin: 'Administration',
+                missions: 'Missions',
+                show: 'Détail',
+                salarie: 'Espace salarié',
+                client: 'Espace client',
+            };
+            return labels[segment] ?? segment;
+        } }) }));

package/dist/ui/Breadcrumbs/Breadcrumbs.styles.d.ts

@@ -0,0 +1,33 @@
+export declare const useStyles: () => {
+    container: {
+        fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+        fontSize: 12;
+        lineHeight: 20;
+        letterSpacing: 0;
+        flexDirection: "row";
+        flexWrap: "wrap";
+        alignItems: "center";
+        gap: import("@alveole/theme").Spacing;
+    };
+    separator: {
+        color: "#5F6571";
+    };
+    current: {
+        color: "#151617";
+    };
+    link: {
+        transitionProperty: "text-decoration";
+        transitionDuration: "0.1s";
+        transitionTimingFunction: "ease-in-out";
+        fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+        fontSize: 12;
+        lineHeight: 20;
+        letterSpacing: 0;
+        color: "#5F6571";
+        textDecoration: string;
+    };
+    linkHover: {
+        textDecoration: string;
+    };
+};
+//# sourceMappingURL=Breadcrumbs.styles.d.ts.map

package/dist/ui/Breadcrumbs/Breadcrumbs.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Breadcrumbs/Breadcrumbs.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyBnB,CAAC"}

package/dist/ui/Breadcrumbs/Breadcrumbs.styles.js

@@ -0,0 +1,27 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ text, color, spacing }) => ({
+    container: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        gap: spacing('1V'),
+        ...text['Corps de texte'].XS.Regular,
+    },
+    separator: {
+        color: color.light.text['mention-grey'],
+    },
+    current: {
+        color: color.light.text['active-grey'],
+    },
+    link: {
+        color: color.light.text['mention-grey'],
+        textDecoration: 'underline',
+        ...text['Corps de texte'].XS.Regular,
+        transitionProperty: 'text-decoration',
+        transitionDuration: '0.1s',
+        transitionTimingFunction: 'ease-in-out',
+    },
+    linkHover: {
+        textDecoration: 'none',
+    },
+}));

package/dist/ui/Breadcrumbs/index.d.ts

@@ -0,0 +1,3 @@
+export { Breadcrumbs } from './Breadcrumbs';
+export type { BreadcrumbItem, BreadcrumbsProps } from './Breadcrumbs';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/Breadcrumbs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Breadcrumbs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/dist/ui/Breadcrumbs/index.js

@@ -0,0 +1 @@
+export { Breadcrumbs } from './Breadcrumbs';

package/dist/ui/EmptyState/EmptyState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/ui/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAgC,eAAe,EAAE,MAAM,eAAe,CAAC;AAG9E,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG;IACvC,QAAQ,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,4CA8BhD,CAAC"}
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/ui/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAgC,eAAe,EAAE,MAAM,eAAe,CAAC;AAG9E,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG;IACvC,QAAQ,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,4CAkChD,CAAC"}

package/dist/ui/EmptyState/EmptyState.js

@@ -8,5 +8,5 @@ export const EmptyState = (props) => {
     const styles = useStyles();
     const descriptionToRender = description ?? text;
     const footer = actions ?? children;
-    return (_jsxs(Box, { tag: "empty-state", style: [styles.container, style], ...boxProps, children: [_jsxs(Box, { tag: "empty-state-contenu", style: styles.contenu, children: [(illustration || iconName) && (_jsx(Box, { style: styles.media, children: illustration ? (illustration) : iconName && isLucideIconName(iconName) ? (_jsx(LucideIcon, { name: iconName, size: "lg", color: styles.media.color })) : null })), _jsxs(Box, { style: styles.messageEtDescription, children: [title && _jsx(Typography, { style: styles.title, children: title }), descriptionToRender && _jsx(Typography, { style: styles.description, children: descriptionToRender })] })] }), footer && _jsx(Box, { style: styles.footer, children: footer })] }));
+    return (_jsxs(Box, { tag: "empty-state", style: [styles.container, style], ...boxProps, children: [_jsxs(Box, { tag: "empty-state-contenu", style: styles.contenu, children: [(illustration || iconName) && (_jsx(Box, { style: styles.media, children: illustration ? (illustration) : iconName && isLucideIconName(iconName) ? (_jsx(LucideIcon, { name: iconName, size: "lg", color: styles.media.color })) : null })), _jsxs(Box, { style: styles.messageEtDescription, children: [title && _jsx(Typography, { style: styles.title, children: title }), descriptionToRender && _jsx(Typography, { style: styles.description, children: descriptionToRender })] })] }), footer && (_jsx(Box, { tag: "empty-state-footer", style: styles.footer, children: footer }))] }));
 };

package/dist/ui/EmptyState/EmptyState.stories.d.ts

@@ -12,7 +12,7 @@ declare const _default: {
             alignItems: "center";
             justifyContent: "center";
             gap: import("@alveole/theme").Spacing;
-            paddingTop: number;
+            paddingTop: import("@alveole/theme").Spacing;
             paddingBottom: import("@alveole/theme").Spacing;
             paddingLeft: import("@alveole/theme").Spacing;
             paddingRight: import("@alveole/theme").Spacing;
@@ -25,7 +25,7 @@ declare const _default: {
             gap: import("@alveole/theme").Spacing;
             alignItems: "center";
             textAlign: "center";
-            flex: number;
+            flex: number | undefined;
             justifyContent: "center";
             width: "100%";
         };
@@ -62,7 +62,7 @@ declare const _default: {
             color: "#5F6571";
         };
         footer: {
-            width: "100%";
+            width: "100%" | undefined;
             display: "flex";
             flexDirection: "column";
             gap: import("@alveole/theme").Spacing;

package/dist/ui/EmptyState/EmptyState.styles.d.ts

@@ -5,7 +5,7 @@ export declare const useStyles: () => {
         alignItems: "center";
         justifyContent: "center";
         gap: import("@alveole/theme").Spacing;
-        paddingTop: number;
+        paddingTop: import("@alveole/theme").Spacing;
         paddingBottom: import("@alveole/theme").Spacing;
         paddingLeft: import("@alveole/theme").Spacing;
         paddingRight: import("@alveole/theme").Spacing;
@@ -18,7 +18,7 @@ export declare const useStyles: () => {
         gap: import("@alveole/theme").Spacing;
         alignItems: "center";
         textAlign: "center";
-        flex: number;
+        flex: number | undefined;
         justifyContent: "center";
         width: "100%";
     };
@@ -55,7 +55,7 @@ export declare const useStyles: () => {
         color: "#5F6571";
     };
     footer: {
-        width: "100%";
+        width: "100%" | undefined;
         display: "flex";
         flexDirection: "column";
         gap: import("@alveole/theme").Spacing;

package/dist/ui/EmptyState/EmptyState.styles.js

@@ -1,5 +1,5 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ externalPadding, text, color, spacing, radius }) => {
+export const useStyles = makeStyles(({ externalPadding, text, color, spacing, radius, isVariant }) => {
     const paddingValue = externalPadding();
     return {
         container: {
@@ -7,9 +7,9 @@ export const useStyles = makeStyles(({ externalPadding, text, color, spacing, ra
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
-            gap: spacing('150'),
-            paddingTop: 0,
-            paddingBottom: spacing('2W'),
+            gap: isVariant('mobile') ? spacing('2W') : spacing('3W'),
+            paddingTop: isVariant('mobile') ? 0 : spacing('3W'),
+            paddingBottom: isVariant('mobile') ? 0 : spacing('3W'),
             paddingLeft: paddingValue,
             paddingRight: paddingValue,
             textAlign: 'center',
@@ -21,7 +21,7 @@ export const useStyles = makeStyles(({ externalPadding, text, color, spacing, ra
             gap: spacing('2W'),
             alignItems: 'center',
             textAlign: 'center',
-            flex: 1,
+            flex: isVariant('mobile') ? 1 : undefined,
             justifyContent: 'center',
             width: '100%',
         },
@@ -52,7 +52,7 @@ export const useStyles = makeStyles(({ externalPadding, text, color, spacing, ra
             textAlign: 'center',
         },
         footer: {
-            width: '100%',
+            width: isVariant('mobile') ? '100%' : undefined,
             display: 'flex',
             flexDirection: 'column',
             gap: spacing('100'),

package/dist/ui/LucideIcon/LucideIcon.props.d.ts

@@ -19,8 +19,8 @@ declare const PublicPropsSchema: z.ZodObject<{
         tab: "tab";
         olive: "olive";
         Menu: "Menu";
-        Image: "Image";
         toolbox: "toolbox";
+        Image: "Image";
         AArrowDown: "AArrowDown";
         AArrowUp: "AArrowUp";
         ALargeSmall: "ALargeSmall";
@@ -2126,8 +2126,8 @@ export declare const LucideIconPropsJSON: z.core.ZodStandardJSONSchemaPayload<z.
         tab: "tab";
         olive: "olive";
         Menu: "Menu";
-        Image: "Image";
         toolbox: "toolbox";
+        Image: "Image";
         AArrowDown: "AArrowDown";
         AArrowUp: "AArrowUp";
         ALargeSmall: "ALargeSmall";

package/dist/ui/LucideIcon/LucideIcon.stories.d.ts

@@ -17,8 +17,8 @@ declare const _default: {
             tab: "tab";
             olive: "olive";
             Menu: "Menu";
-            Image: "Image";
             toolbox: "toolbox";
+            Image: "Image";
             AArrowDown: "AArrowDown";
             AArrowUp: "AArrowUp";
             ALargeSmall: "ALargeSmall";

package/dist/ui/PageHeader/PageHeader.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Breadcrumbs } from '../Breadcrumbs';
+export type PageHeaderProps = React.PropsWithChildren<{
+    /** Titre de la page (à gauche). Peut être une chaîne ou un contenu personnalisé. */
+    title: string;
+    /** Contenu affiché à droite (boutons, liens, etc.). */
+    actions?: React.ReactNode;
+    /** Props passées au Breadcrumbs (rootLabel, getLabel). */
+    breadcrumbsProps?: React.ComponentProps<typeof Breadcrumbs>;
+}>;
+/**
+ * En-tête de page : fil d'Ariane, puis une ligne avec le titre à gauche et des actions à droite.
+ */
+export declare const PageHeader: (props: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PageHeader.d.ts.map

package/dist/ui/PageHeader/PageHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/ui/PageHeader/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACpD,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC;CAC7D,CAAC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,4CAahD,CAAC"}

package/dist/ui/PageHeader/PageHeader.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '../../core';
+import { Breadcrumbs } from '../Breadcrumbs';
+import { useStyles } from './PageHeader.styles';
+/**
+ * En-tête de page : fil d'Ariane, puis une ligne avec le titre à gauche et des actions à droite.
+ */
+export const PageHeader = (props) => {
+    const { title, actions, breadcrumbsProps } = props;
+    const styles = useStyles();
+    return (_jsxs(Box, { style: styles.container, children: [_jsx(Breadcrumbs, { ...breadcrumbsProps }), _jsxs(Box, { style: styles.row, children: [_jsx(Typography, { style: styles.title, children: title }), actions && _jsx(Box, { style: styles.actions, children: actions })] })] }));
+};

package/dist/ui/PageHeader/PageHeader.stories.d.ts

@@ -0,0 +1,39 @@
+declare const _default: {
+    title: string;
+    tags: ["Kit"];
+    experimental: false;
+    description: string;
+    component: (props: import("./PageHeader").PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    styleFn: () => {
+        container: {
+            display: "flex";
+            flexDirection: "column";
+            gap: import("@alveole/theme").Spacing;
+        };
+        row: {
+            display: "flex";
+            flexDirection: "row";
+            justifyContent: "space-between";
+            alignItems: "center";
+            gap: import("@alveole/theme").Spacing;
+        };
+        title: {
+            color: "#151617";
+            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            fontSize: 28 | 32;
+            lineHeight: 36 | 32;
+            letterSpacing: 0;
+        };
+        actions: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+            gap: import("@alveole/theme").Spacing;
+            flexShrink: number;
+        };
+    };
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithActions: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PageHeader.stories.d.ts.map

package/dist/ui/PageHeader/PageHeader.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/PageHeader/PageHeader.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAOkB;AAElB,eAAO,MAAM,OAAO,+CAInB,CAAC;AAEF,eAAO,MAAM,WAAW,+CAWvB,CAAC"}

package/dist/ui/PageHeader/PageHeader.stories.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { Button } from '../Button';
+import { PageHeader } from './PageHeader';
+import { useStyles } from './PageHeader.styles';
+export default {
+    title: 'PageHeader',
+    tags: ['Kit'],
+    experimental: false,
+    description: 'En-tête de page : fil d’Ariane, puis titre à gauche et actions à droite.',
+    component: PageHeader,
+    styleFn: useStyles,
+};
+export const Default = () => (_jsx(Box, { p: 4, children: _jsx(PageHeader, { title: "Titre de la page" }) }));
+export const WithActions = () => (_jsx(Box, { p: 4, children: _jsx(PageHeader, { title: "D\u00E9tail de la mission", actions: _jsx(_Fragment, { children: _jsx(Button, { variant: "primary", title: "Enregistrer", size: "sm", onPress: () => { } }) }) }) }));

package/dist/ui/PageHeader/PageHeader.styles.d.ts

@@ -0,0 +1,29 @@
+export declare const useStyles: () => {
+    container: {
+        display: "flex";
+        flexDirection: "column";
+        gap: import("@alveole/theme").Spacing;
+    };
+    row: {
+        display: "flex";
+        flexDirection: "row";
+        justifyContent: "space-between";
+        alignItems: "center";
+        gap: import("@alveole/theme").Spacing;
+    };
+    title: {
+        color: "#151617";
+        fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+        fontSize: 28 | 32;
+        lineHeight: 36 | 32;
+        letterSpacing: 0;
+    };
+    actions: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        gap: import("@alveole/theme").Spacing;
+        flexShrink: number;
+    };
+};
+//# sourceMappingURL=PageHeader.styles.d.ts.map

package/dist/ui/PageHeader/PageHeader.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/PageHeader/PageHeader.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwBnB,CAAC"}

package/dist/ui/PageHeader/PageHeader.styles.js

@@ -0,0 +1,26 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ color, text, spacing }) => ({
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: spacing('1W'),
+    },
+    row: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        gap: spacing('1V'),
+    },
+    title: {
+        ...text.Titres['H2 - LG'],
+        color: color.light.text['title-grey'],
+    },
+    actions: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing('050'),
+        flexShrink: 0,
+    },
+}));

package/dist/ui/PageHeader/index.d.ts

@@ -0,0 +1,3 @@
+export { PageHeader } from './PageHeader';
+export type { PageHeaderProps } from './PageHeader';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/PageHeader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/PageHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/dist/ui/PageHeader/index.js

@@ -0,0 +1 @@
+export { PageHeader } from './PageHeader';

package/dist/ui/index.d.ts

@@ -1,10 +1,12 @@
 export * from './Avatar';
+export * from './Breadcrumbs';
 export * from './Button';
 export * from './Card';
 export * from './Divider';
 export * from './EmptyState';
 export * from './ListItem';
 export * from './LucideIcon';
+export * from './PageHeader';
 export * from './ResourceList';
 export * from './ToolbarBottomNav';
 export * from './ToolbarTop';

package/dist/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC"}

package/dist/ui/index.js

@@ -1,10 +1,12 @@
 export * from './Avatar';
+export * from './Breadcrumbs';
 export * from './Button';
 export * from './Card';
 export * from './Divider';
 export * from './EmptyState';
 export * from './ListItem';
 export * from './LucideIcon';
+export * from './PageHeader';
 export * from './ResourceList';
 export * from './ToolbarBottomNav';
 export * from './ToolbarTop';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/components",
-  "version": "0.20.0",
+  "version": "0.22.0",
   "description": "Shared UI components.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",