@alveole/components 0.19.3 → 0.20.0

package/dist/stories/index.d.ts

@@ -7,6 +7,7 @@ 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 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';

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,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,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"}

package/dist/stories/index.js

@@ -9,6 +9,7 @@ export * as VersionStory from '../core/Version/Version.stories';
 // UI
 export * as AvatarStory from '../ui/Avatar/Avatar.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';

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

@@ -46,19 +46,6 @@ declare const _default: {
         };
         primaryContainer: {
             backgroundColor: "#002764";
-        } | {
-            shadowColor: import("@alveole/theme").Color;
-            shadowOffset: {
-                width: number;
-                height: number;
-            };
-            shadowOpacity: number;
-            shadowRadius: number;
-            elevation: number;
-            backgroundColor: "#002764";
-        } | {
-            boxShadow: string;
-            backgroundColor: "#002764";
         };
         primaryTitleHover: {
             color: "#F2F9FF";

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAQkB;AAElB,eAAO,MAAM,KAAK,+CAMjB,CAAC;AAEF,eAAO,MAAM,OAAO,+CAKnB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAKpB,CAAC;AAEF,eAAO,MAAM,IAAI,+CAKhB,CAAC;AAEF,eAAO,MAAM,KAAK,+CAQjB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAIrB,CAAC"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAQkB;AAElB,eAAO,MAAM,KAAK,+CAMjB,CAAC;AAEF,eAAO,MAAM,OAAO,+CAKnB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAKpB,CAAC;AAEF,eAAO,MAAM,IAAI,+CAKhB,CAAC;AAEF,eAAO,MAAM,KAAK,+CAQjB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAIrB,CAAC"}

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

@@ -26,19 +26,6 @@ export declare const useStyles: () => {
     };
     primaryContainer: {
         backgroundColor: "#002764";
-    } | {
-        shadowColor: import("@alveole/theme").Color;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
-        elevation: number;
-        backgroundColor: "#002764";
-    } | {
-        boxShadow: string;
-        backgroundColor: "#002764";
     };
     primaryTitleHover: {
         color: "#F2F9FF";

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

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

package/dist/ui/Button/Button.styles.js

@@ -1,5 +1,5 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ text, color, spacing, shadows, radius }) => ({
+export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
     container: {
         borderTopLeftRadius: radius('md'),
         borderBottomLeftRadius: radius('md'),
@@ -28,7 +28,6 @@ export const useStyles = makeStyles(({ text, color, spacing, shadows, radius })
     },
     primaryContainer: {
         backgroundColor: color.light.background['action-high-primary'],
-        ...shadows(2),
     },
     primaryTitleHover: {
         color: color.light.text['inverted-primary'],

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

@@ -0,0 +1,14 @@
+import { BoxProps } from '../../core';
+import { CardActions } from './CardActions';
+import { CardHeader } from './CardHeader';
+import { CardSection } from './CardSection';
+export type CardProps = BoxProps;
+declare const CardBase: (props: CardProps) => import("react/jsx-runtime").JSX.Element;
+type CardCompoundComponent = typeof CardBase & {
+    Header: typeof CardHeader;
+    Section: typeof CardSection;
+    Actions: typeof CardActions;
+};
+export declare const Card: CardCompoundComponent;
+export {};
+//# sourceMappingURL=Card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC;AAEjC,QAAA,MAAM,QAAQ,GAAI,OAAO,SAAS,4CAUjC,CAAC;AAEF,KAAK,qBAAqB,GAAG,OAAO,QAAQ,GAAG;IAC7C,MAAM,EAAE,OAAO,UAAU,CAAC;IAC1B,OAAO,EAAE,OAAO,WAAW,CAAC;IAC5B,OAAO,EAAE,OAAO,WAAW,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,qBAIjB,CAAC"}

package/dist/ui/Card/Card.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { useStyles } from './Card.styles';
+import { CardActions } from './CardActions';
+import { CardHeader } from './CardHeader';
+import { CardSection } from './CardSection';
+const CardBase = (props) => {
+    const { style, children, ...boxProps } = props;
+    const styles = useStyles();
+    return (_jsx(Box, { tag: "card", style: [styles.card, style], ...boxProps, children: children }));
+};
+export const Card = Object.assign(CardBase, {
+    Header: CardHeader,
+    Section: CardSection,
+    Actions: CardActions,
+});

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

@@ -0,0 +1,66 @@
+declare const _default: {
+    title: string;
+    tags: ["Kit"];
+    experimental: false;
+    figmaURL: string;
+    description: string;
+    component: ((props: import("./Card").CardProps) => import("react/jsx-runtime").JSX.Element) & {
+        Header: typeof import("./CardHeader").CardHeader;
+        Section: typeof import("./CardSection").CardSection;
+        Actions: typeof import("./CardActions").CardActions;
+    };
+    styleFn: () => {
+        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";
+        };
+    };
+};
+export default _default;
+export declare const card: () => import("react/jsx-runtime").JSX.Element;
+export declare const cardDisabled: () => import("react/jsx-runtime").JSX.Element;
+export declare const cardSection: () => import("react/jsx-runtime").JSX.Element;
+export declare const cardSectionDisabled: () => import("react/jsx-runtime").JSX.Element;
+export declare const cardHeader: () => import("react/jsx-runtime").JSX.Element;
+export declare const cardHeaderDisabled: () => import("react/jsx-runtime").JSX.Element;
+export declare const cardActions: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Card.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/Card.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,wBAQkB;AAElB,eAAO,MAAM,IAAI,+CAgBhB,CAAC;AAEF,eAAO,MAAM,YAAY,+CA2BxB,CAAC;AAEF,eAAO,MAAM,WAAW,+CASvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,+CAU/B,CAAC;AAEF,eAAO,MAAM,UAAU,+CAgBtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,+CAS9B,CAAC;AAEF,eAAO,MAAM,WAAW,+CAYvB,CAAC"}

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/index.d.ts

@@ -1,5 +1,6 @@
 export * from './Avatar';
 export * from './Button';
+export * from './Card';
 export * from './Divider';
 export * from './EmptyState';
 export * from './ListItem';

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,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"}

package/dist/ui/index.js

@@ -1,5 +1,6 @@
 export * from './Avatar';
 export * from './Button';
+export * from './Card';
 export * from './Divider';
 export * from './EmptyState';
 export * from './ListItem';

package/package.json

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