@alveole/components 0.19.3 → 0.21.0

package/dist/ui/Card/Card.stories.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '../../core';
+import { Avatar } from '../Avatar';
+import { Button } from '../Button';
+import { LucideIcon } from '../LucideIcon';
+import { Card } from './Card';
+import { useStyles } from './CardSection.styles';
+export default {
+    title: 'Card',
+    tags: ['Kit'],
+    experimental: false,
+    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=2196-918&m=dev',
+    description: 'Carte avec header, section et actions. Composant de type Box.',
+    component: Card,
+    styleFn: useStyles,
+};
+export const card = () => {
+    return (_jsxs(Card, { children: [_jsx(Card.Header, { titre: "Titre de la carte", sousTitre: "Sous-titre de la carte", image: _jsx(Avatar, { size: "md", fallbackText: "M" }) }), _jsx(Card.Section, { titre: "Titre de la carte", titreIcone: "Calendar", description: "Description de la carte" }), _jsx(Card.Section, { titre: "Titre de la carte", titreIcone: "Calendar", description: "Description de la carte" }), _jsxs(Card.Actions, { children: [_jsx(Button, { variant: "secondary", title: "Action", size: "sm" }), _jsx(Button, { variant: "primary", title: "Action", size: "sm" })] })] }));
+};
+export const cardDisabled = () => {
+    return (_jsxs(Card, { children: [_jsx(Card.Header, { variant: "disabled", titre: "Titre de la carte", sousTitre: "Sous-titre de la carte", image: _jsx(LucideIcon, { name: "Settings", size: "md" }) }), _jsx(Card.Section, { variant: "disabled", titre: "Titre de la carte", titreIcone: "Calendar", description: "Description de la carte" }), _jsx(Card.Section, { variant: "disabled", titre: "Titre de la carte", titreIcone: "Calendar", description: "Description de la carte" }), _jsxs(Card.Actions, { children: [_jsx(Button, { variant: "secondary", title: "Action", size: "sm", disabled: true }), _jsx(Button, { variant: "primary", title: "Action", size: "sm", disabled: true })] })] }));
+};
+export const cardSection = () => {
+    return (_jsx(Card.Section, { titre: "Titre de la carte", description: "Description de la carte", titreIcone: "Image", descriptionIcone: "Image" }));
+};
+export const cardSectionDisabled = () => {
+    return (_jsx(Card.Section, { variant: "disabled", titre: "Titre de la carte", description: "Description de la carte", titreIcone: "Image", descriptionIcone: "Image" }));
+};
+export const cardHeader = () => {
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "100", children: [_jsx(Card.Header, { titre: "Titre de la carte", sousTitre: "Sous-titre de la carte", image: _jsx(Avatar, { size: "md", fallbackText: "M" }) }), _jsx(Card.Header, { titre: "Titre de la carte", sousTitre: "Sous-titre de la carte", image: _jsx(LucideIcon, { name: "Image", size: "md" }) })] }));
+};
+export const cardHeaderDisabled = () => {
+    return (_jsx(Card.Header, { variant: "disabled", titre: "Titre de la carte", sousTitre: "Sous-titre de la carte", image: _jsx(Avatar, { size: "md", fallbackText: "M" }) }));
+};
+export const cardActions = () => {
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "100", children: [_jsx(Typography, { children: "Privil\u00E9gier l'utilisation de bouton en taille SM, avec le bouton primary toujours \u00E0 droite." }), _jsxs(Card.Actions, { children: [_jsx(Button, { variant: "secondary", title: "Action", size: "sm" }), _jsx(Button, { variant: "primary", title: "Action", size: "sm" })] })] }));
+};

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

@@ -0,0 +1,15 @@
+export declare const useStyles: () => {
+    card: {
+        display: "flex";
+        width: "100%";
+        gap: import("@alveole/theme").Spacing;
+        padding: import("@alveole/theme").Spacing;
+        backgroundColor: "#FFFFFF";
+        borderWidth: number;
+        borderColor: "#DEE3EC";
+        borderStyle: "solid";
+        boxSizing: "border-box";
+        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+    };
+};
+//# sourceMappingURL=Card.styles.d.ts.map

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

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

package/dist/ui/Card/Card.styles.js

@@ -0,0 +1,15 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ spacing, color, radius }) => ({
+    card: {
+        display: 'flex',
+        width: '100%',
+        gap: spacing('3V'),
+        padding: spacing('3V'),
+        backgroundColor: color.light.background['default-grey'],
+        borderWidth: 1,
+        borderColor: color.light.border['default-grey'],
+        borderStyle: 'solid',
+        boxSizing: 'border-box',
+        borderRadius: radius('md'),
+    },
+}));

package/dist/ui/Card/CardActions.d.ts

@@ -0,0 +1,4 @@
+import { BoxProps } from '../../core';
+export type CardActionsProps = BoxProps;
+export declare const CardActions: (props: CardActionsProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CardActions.d.ts.map

package/dist/ui/Card/CardActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardActions.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/CardActions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,MAAM,YAAY,CAAC;AAG3C,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;AAExC,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAUlD,CAAC"}

package/dist/ui/Card/CardActions.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { useStyles } from './CardActions.styles';
+export const CardActions = (props) => {
+    const { style, children, ...boxProps } = props;
+    const styles = useStyles();
+    return (_jsx(Box, { tag: "card-actions", style: [styles.cardActions, style], ...boxProps, children: children }));
+};

package/dist/ui/Card/CardActions.styles.d.ts

@@ -0,0 +1,11 @@
+export declare const useStyles: () => {
+    cardActions: {
+        display: "flex";
+        flexDirection: "row";
+        gap: import("@alveole/theme").Spacing;
+        width: "100%";
+        justifyContent: "flex-end";
+        alignItems: "center";
+    };
+};
+//# sourceMappingURL=CardActions.styles.d.ts.map

package/dist/ui/Card/CardActions.styles.d.ts.map

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

package/dist/ui/Card/CardActions.styles.js

@@ -0,0 +1,11 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ spacing }) => ({
+    cardActions: {
+        display: 'flex',
+        flexDirection: 'row',
+        gap: spacing('1W'),
+        width: '100%',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+    },
+}));

package/dist/ui/Card/CardHeader.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { BoxProps } from '../../core';
+export type CardHeaderVariant = 'default' | 'disabled';
+export type CardHeaderProps = BoxProps & {
+    variant?: CardHeaderVariant;
+    titre?: string;
+    sousTitre?: string;
+    image?: React.ReactNode;
+    badge?: React.ReactNode;
+};
+export declare const CardHeader: (props: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CardHeader.d.ts.map

package/dist/ui/Card/CardHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeader.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/CardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AAGvD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,UAAU,CAAC;AAEvD,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG;IACvC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,4CAiBhD,CAAC"}

package/dist/ui/Card/CardHeader.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '../../core';
+import { useStyles } from './CardHeader.styles';
+export const CardHeader = (props) => {
+    const { variant = 'default', titre, sousTitre, image, badge, style, children, ...boxProps } = props;
+    const styles = useStyles();
+    const disabledTextStyle = variant === 'disabled' ? styles.disabledText : {};
+    return (_jsxs(Box, { tag: "card-header", style: [styles.cardHeader, disabledTextStyle, style], ...boxProps, children: [image, _jsxs(Box, { tag: "card-header-texte", style: styles.texte, children: [_jsx(Typography, { style: [styles.titre, disabledTextStyle], children: titre }), _jsx(Typography, { style: [styles.sousTitre, disabledTextStyle], children: sousTitre })] }), badge] }));
+};

package/dist/ui/Card/CardHeader.styles.d.ts

@@ -0,0 +1,31 @@
+export declare const useStyles: () => {
+    cardHeader: {
+        display: "flex";
+        flexDirection: "row";
+        gap: import("@alveole/theme").Spacing;
+        width: "100%";
+    };
+    texte: {
+        display: "flex";
+        flexDirection: "column";
+        flex: number;
+    };
+    titre: {
+        color: "#151617";
+        fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+        fontSize: 16;
+        lineHeight: 24;
+        letterSpacing: 0;
+    };
+    sousTitre: {
+        color: "#373A3F";
+        fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+    };
+    disabledText: {
+        color: "#8D97AC";
+    };
+};
+//# sourceMappingURL=CardHeader.styles.d.ts.map

package/dist/ui/Card/CardHeader.styles.d.ts.map

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

package/dist/ui/Card/CardHeader.styles.js

@@ -0,0 +1,25 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ spacing, color, text }) => ({
+    cardHeader: {
+        display: 'flex',
+        flexDirection: 'row',
+        gap: spacing('1W'),
+        width: '100%',
+    },
+    texte: {
+        display: 'flex',
+        flexDirection: 'column',
+        flex: 1,
+    },
+    titre: {
+        ...text['Corps de texte'].MD.Medium,
+        color: color.light.text['title-grey'],
+    },
+    sousTitre: {
+        ...text['Corps de texte'].SM.Regular,
+        color: color.light.text['default-grey'],
+    },
+    disabledText: {
+        color: color.light.text['disabled-grey'],
+    },
+}));

package/dist/ui/Card/CardSection.d.ts

@@ -0,0 +1,12 @@
+import { BoxProps } from '../../core';
+import { LucideIconProps } from '../LucideIcon';
+export type CardSectionVariant = 'default' | 'disabled';
+export type CardSectionProps = BoxProps & {
+    variant?: CardSectionVariant;
+    titre?: string;
+    description?: string;
+    titreIcone?: LucideIconProps['name'];
+    descriptionIcone?: LucideIconProps['name'];
+};
+export declare const CardSection: (props: CardSectionProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=CardSection.d.ts.map

package/dist/ui/Card/CardSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardSection.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/CardSection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AACvD,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,UAAU,CAAC;AAExD,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG;IACxC,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACrC,gBAAgB,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,mDAuDlD,CAAC"}

package/dist/ui/Card/CardSection.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '../../core';
+import { LucideIcon } from '../LucideIcon';
+import { useStyles } from './CardSection.styles';
+export const CardSection = (props) => {
+    const { variant = 'default', titre, description, titreIcone, descriptionIcone, style, children, ...boxProps } = props;
+    const styles = useStyles();
+    const hasTitleRow = !!(titre || titreIcone);
+    const hasDescriptionRow = !!(description || descriptionIcone || children);
+    if (!hasTitleRow && !hasDescriptionRow) {
+        return null;
+    }
+    return (_jsxs(Box, { tag: "card-section", style: [styles.cardSection, style], ...boxProps, children: [hasTitleRow && (_jsxs(Box, { tag: "card-section-title", style: styles.title, children: [titreIcone && (_jsx(Box, { tag: "card-section-title-icon", style: styles.titleIcon, children: _jsx(LucideIcon, { name: titreIcone, size: "sm", color: variant === 'disabled' ? styles.disabledText.color : styles.titleText.color }) })), titre && (_jsx(Typography, { style: [styles.titleText, variant === 'disabled' ? styles.disabledText : {}], children: titre }))] })), hasDescriptionRow && (_jsxs(Box, { tag: "card-section-description", style: styles.description, children: [descriptionIcone && (_jsx(Box, { tag: "card-section-description-icon", style: styles.descriptionIcon, children: _jsx(LucideIcon, { name: descriptionIcone, size: "sm", color: variant === 'disabled' ? styles.disabledText.color : styles.descriptionText.color }) })), description && (_jsx(Typography, { style: [styles.descriptionText, variant === 'disabled' ? styles.disabledText : {}], children: description }))] }))] }));
+};

package/dist/ui/Card/CardSection.styles.d.ts

@@ -0,0 +1,46 @@
+export declare const useStyles: () => {
+    cardSection: {
+        display: "flex";
+        flexDirection: "column";
+        gap: import("@alveole/theme").Spacing;
+        width: "100%";
+    };
+    title: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        gap: import("@alveole/theme").Spacing;
+    };
+    titleIcon: {
+        display: "flex";
+        alignItems: "center";
+    };
+    titleText: {
+        color: "#151617";
+        fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+    };
+    description: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        gap: import("@alveole/theme").Spacing;
+    };
+    descriptionIcon: {
+        display: "flex";
+        alignItems: "center";
+    };
+    descriptionText: {
+        color: "#373A3F";
+        fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+    };
+    disabledText: {
+        color: "#8D97AC";
+    };
+};
+//# sourceMappingURL=CardSection.styles.d.ts.map

package/dist/ui/Card/CardSection.styles.d.ts.map

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

package/dist/ui/Card/CardSection.styles.js

@@ -0,0 +1,40 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ spacing, color, text }) => ({
+    cardSection: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: spacing('1W'),
+        width: '100%',
+    },
+    title: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing('1V'),
+    },
+    titleIcon: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    titleText: {
+        ...text['Corps de texte'].SM.Medium,
+        color: color.light.text['title-grey'],
+    },
+    description: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing('1V'),
+    },
+    descriptionIcon: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    descriptionText: {
+        ...text['Corps de texte'].SM.Regular,
+        color: color.light.text['default-grey'],
+    },
+    disabledText: {
+        color: color.light.text['disabled-grey'],
+    },
+}));

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

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

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

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

package/dist/ui/Card/index.js

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

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,9 +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,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,9 +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.19.3",
+  "version": "0.21.0",
   "description": "Shared UI components.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",