@alveole/components 0.14.5 → 0.15.1

package/dist/core/Box/Box.d.ts

@@ -5,7 +5,7 @@ export type BoxProps = Pick<TamaguiViewProps, 'exitStyle' | 'focusStyle' | 'pres
     hoverStyle?: CSSProperties;
 };
 export type BoxElement = TamaguiElement;
-export declare const Box: React.ForwardRefExoticComponent<Pick<import("@tamagui/web").StackProps, "pressStyle" | "focusStyle" | "disabledStyle" | "exitStyle"> & RNTamaguiViewNonStyleProps & Pick<import("@tamagui/web").StackProps, "display" | "flex" | "flexWrap" | "flexDirection" | "opacity" | "overflow"> & {
+export declare const Box: React.ForwardRefExoticComponent<Pick<import("tamagui").StackProps, "pressStyle" | "focusStyle" | "disabledStyle" | "exitStyle"> & RNTamaguiViewNonStyleProps & Pick<import("tamagui").StackProps, "display" | "flex" | "flexWrap" | "flexDirection" | "opacity" | "overflow"> & {
     justify?: TamaguiViewProps["justifyContent"];
 } & import("./Box.types").BoxAdvancedStyle & {
     hoverStyle?: CSSProperties;

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

@@ -3,11 +3,11 @@ declare const _default: {
     tags: ["Kit"];
     experimental: false;
     description: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("@tamagui/web").StackProps, "pressStyle" | "focusStyle" | "disabledStyle" | "exitStyle"> & import("@tamagui/core").RNTamaguiViewNonStyleProps & Pick<import("@tamagui/web").StackProps, "display" | "flex" | "flexWrap" | "flexDirection" | "opacity" | "overflow"> & {
-        justify?: import("@tamagui/web").ViewProps["justifyContent"];
+    component: import("react").ForwardRefExoticComponent<Pick<import("tamagui").StackProps, "pressStyle" | "focusStyle" | "disabledStyle" | "exitStyle"> & import("@tamagui/core").RNTamaguiViewNonStyleProps & Pick<import("tamagui").StackProps, "display" | "flex" | "flexWrap" | "flexDirection" | "opacity" | "overflow"> & {
+        justify?: import("tamagui").ViewProps["justifyContent"];
     } & import("./Box.types").BoxAdvancedStyle & {
         hoverStyle?: import("react").CSSProperties;
-    } & import("react").RefAttributes<import("@tamagui/web").TamaguiElement>>;
+    } & import("react").RefAttributes<import("tamagui").TamaguiElement>>;
     styleFn: () => string;
 };
 export default _default;

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

@@ -3,10 +3,10 @@ declare const _default: {
     tags: ["Kit"];
     experimental: false;
     description: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("@tamagui/web").TextProps, "pressStyle" | "focusStyle" | "disabledStyle" | "exitStyle"> & Omit<import("@tamagui/core").RNTamaguiTextNonStyleProps, "children"> & import("./Typography.types").TypographyBaseStyle & import("./Typography.types").TypographyAdvancedStyle & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("tamagui").TextProps, "pressStyle" | "focusStyle" | "disabledStyle" | "exitStyle"> & Omit<import("@tamagui/core").RNTamaguiTextNonStyleProps, "children"> & import("./Typography.types").TypographyBaseStyle & import("./Typography.types").TypographyAdvancedStyle & {
         children: React.ReactNode;
         hoverStyle?: import("react").CSSProperties;
-    } & import("react").RefAttributes<import("@tamagui/web").TamaguiTextElement>>;
+    } & import("react").RefAttributes<import("tamagui").TamaguiTextElement>>;
     styleFn: () => string;
 };
 export default _default;

package/dist/ui/Avatar/Avatar.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+import { AvatarImageProps } from 'tamagui';
+export type AvatarProps = {
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    fallbackText?: string;
+    style?: CSSProperties;
+    src?: AvatarImageProps['src'];
+};
+export declare const Avatar: (props: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/ui/Avatar/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAA2B,MAAM,SAAS,CAAC;AAGpE,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,GAAG,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;CAC/B,CAAC;AASF,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,4CAsBxC,CAAC"}

package/dist/ui/Avatar/Avatar.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+import { Avatar as TamaguiAvatar } from 'tamagui';
+import { useStyles } from '././Avatar.styles';
+const getInitials = (name) => {
+    const words = name.trim().split(/\s+/);
+    if (words.length === 0)
+        return '';
+    if (words.length === 1)
+        return words[0][0]?.toUpperCase() ?? '';
+    return (words[0][0] + words[1][0]).toUpperCase();
+};
+export const Avatar = (props) => {
+    const { style, fallbackText, src, size, ...avatarProps } = props;
+    const initials = getInitials(fallbackText ?? '');
+    const { spacing } = useTheme();
+    const styles = useStyles();
+    const avatarSize = {
+        xs: 20,
+        sm: spacing('3W'),
+        md: spacing('4W'),
+        lg: spacing('5W'),
+        xl: spacing('8W'),
+    };
+    return (_jsxs(TamaguiAvatar, { style: { ...styles.avatar, ...style }, circular: true, size: avatarSize[size], ...avatarProps, children: [_jsx(TamaguiAvatar.Image, { src: src }), _jsx(Typography, { style: styles.fallbackText, children: initials })] }));
+};

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

@@ -0,0 +1,27 @@
+declare const _default: {
+    title: string;
+    tags: ["Kit"];
+    experimental: false;
+    figmaURL: string;
+    description: string;
+    component: (props: import("@alveole/components").AvatarProps) => import("react/jsx-runtime").JSX.Element;
+    styleFn: () => {
+        avatar: {
+            backgroundColor: "#D2E8FE";
+        };
+        fallbackText: {
+            display: "flex";
+            justifyContent: "center";
+            textAlign: "center";
+            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;
+        };
+        image: {};
+    };
+};
+export default _default;
+export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
+export declare const Variants: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Avatar.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Avatar/Avatar.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAQkB;AAElB,eAAO,MAAM,KAAK,+CAQjB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAMpB,CAAC"}

package/dist/ui/Avatar/Avatar.stories.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@alveole/components';
+import { Avatar } from './Avatar';
+import { useStyles } from './Avatar.styles';
+export default {
+    title: 'Avatar',
+    tags: ['Kit'],
+    experimental: false,
+    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Composants?node-id=1002-546',
+    description: 'Avatar avec image ou texte, de différentes tailles. Composant de type Avatar (tamagui).',
+    component: Avatar,
+    styleFn: useStyles,
+};
+export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 8, flexWrap: "wrap", children: [_jsx(Avatar, { size: "xs", src: "https://picsum.photos/100/200" }), _jsx(Avatar, { size: "sm", src: "https://picsum.photos/100/200" }), _jsx(Avatar, { size: "md", src: "https://picsum.photos/100/200" }), _jsx(Avatar, { size: "lg", src: "https://picsum.photos/100/200" }), _jsx(Avatar, { size: "xl", src: "https://picsum.photos/100/200" })] }));
+export const Variants = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 8, flexWrap: "wrap", children: [_jsx(Avatar, { size: "sm", src: "https://picsum.photos/100/200" }), _jsx(Avatar, { size: "sm", fallbackText: "Jean Pierre" }), _jsx(Avatar, { size: "sm", fallbackText: "Jean-Pierre" })] }));

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

@@ -0,0 +1,16 @@
+export declare const useStyles: () => {
+    avatar: {
+        backgroundColor: "#D2E8FE";
+    };
+    fallbackText: {
+        display: "flex";
+        justifyContent: "center";
+        textAlign: "center";
+        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;
+    };
+    image: {};
+};
+//# sourceMappingURL=Avatar.styles.d.ts.map

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

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

package/dist/ui/Avatar/Avatar.styles.js

@@ -0,0 +1,13 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ color, text }) => ({
+    avatar: {
+        backgroundColor: color.background['open-bleu-captive'],
+    },
+    fallbackText: {
+        ...text['Corps de texte'].MD.Regular,
+        display: 'flex',
+        justifyContent: 'center',
+        textAlign: 'center',
+    },
+    image: {},
+}));

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

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

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

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

package/dist/ui/Avatar/index.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAgC,cAAc,EAA8B,IAAI,EAAE,MAAM,cAAc,CAAC;AAC9G,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,SAAS,EAAc,MAAM,eAAe,CAAC;AAOtD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;IACvD,SAAS,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,MAAM;WAdV,MAAM;WACN,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;aACvB,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM;gBAC1C,SAAS,CAAC,MAAM,CAAC;cACnB,SAAS,CAAC,MAAM,CAAC;qBACV,QAAQ;gBACb,OAAO;gBACP,OAAO;iBACN,OAAO;gBACR,OAAO;WACZ,QAAQ,GAAG,QAAQ;gBACd,OAAO;8BA+JnB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAgC,cAAc,EAA8B,IAAI,EAAE,MAAM,cAAc,CAAC;AAC9G,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,SAAS,EAAc,MAAM,eAAe,CAAC;AAOtD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;IACvD,SAAS,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,MAAM;WAdV,MAAM;WACN,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;aACvB,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM;gBAC1C,SAAS,CAAC,MAAM,CAAC;cACnB,SAAS,CAAC,MAAM,CAAC;qBACV,QAAQ;gBACb,OAAO;gBACP,OAAO;iBACN,OAAO;gBACR,OAAO;WACZ,QAAQ,GAAG,QAAQ;gBACd,OAAO;8BAgKnB,CAAC"}

package/dist/ui/Button/Button.js

@@ -58,6 +58,7 @@ export const Button = React.forwardRef(function Button(props, ref) {
         return {
             ...applicableStyles,
             ...containerSize,
+            ...(fullWidth ? { width: '100%' } : {}),
             ...(noPadding ? noPaddingStyle : {}),
             ...(borderNone ? { borderRadius: 0 } : {}),
             ...(leftAlign ? { justifyContent: 'left' } : {}),

package/dist/ui/ListItem/ListItem.d.ts

@@ -0,0 +1,15 @@
+import { BoxProps, IconProps } from '@alveole/components';
+import React from 'react';
+import { AvatarProps } from '../Avatar';
+export type ListItemProps = BoxProps & {
+    title: string;
+    description?: string;
+    IconProps?: Pick<IconProps, 'color' | 'name'>;
+    AvatarProps?: Pick<AvatarProps, 'fallbackText' | 'src'>;
+    preview_url?: string;
+    trailing?: () => React.ReactNode;
+    loading?: boolean;
+    showSeparateur?: boolean;
+};
+export declare const ListItem: (props: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ListItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,SAAS,EAAiC,MAAM,qBAAqB,CAAC;AAC9F,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAGhD,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,GAAG,KAAK,CAAC,CAAC;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,QAAQ,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,4CAoD5C,CAAC"}

package/dist/ui/ListItem/ListItem.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Image, LucideIcon, Typography } from '@alveole/components';
+import { ActivityIndicator } from 'react-native';
+import { Avatar } from '../Avatar';
+import { useStyles } from './ListItem.styles';
+export const ListItem = (props) => {
+    const { children, title, description, style, AvatarProps, IconProps, preview_url, trailing, loading = false, showSeparateur = true, ...itemProps } = props;
+    const styles = useStyles();
+    return (_jsxs(Box, { tag: "resource-item", style: [styles.item, style], hoverStyle: styles.itemHover, ...itemProps, children: [preview_url ? (_jsx(Box, { style: styles.previewContainer, children: _jsx(Image, { source: { uri: preview_url }, width: styles.preview.width, height: styles.preview.height, contentFit: "contain" }) })) : (_jsxs(_Fragment, { children: [IconProps && _jsx(LucideIcon, { size: "sm", color: styles.defaultIcon.color, ...IconProps }), AvatarProps && _jsx(Avatar, { size: "xs", ...AvatarProps })] })), _jsxs(Box, { style: styles.detail, children: [showSeparateur && _jsx(Box, { style: styles.separateur }), _jsxs(Box, { style: styles.principal, children: [_jsx(Typography, { style: styles.title, children: title }), description && _jsx(Typography, { style: styles.description, children: description })] }), trailing && trailing()] }), loading && (_jsx(Box, { style: styles.loading, children: _jsx(ActivityIndicator, { size: "small", color: styles.loading.color }) }))] }));
+};

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

@@ -0,0 +1,104 @@
+declare const _default: {
+    title: string;
+    tags: ["Composant"];
+    experimental: false;
+    figmaURL: string;
+    description: string;
+    component: (props: import("./ListItem").ListItemProps) => import("react/jsx-runtime").JSX.Element;
+    styleFn: () => {
+        item: {
+            display: "flex";
+            flexDirection: "row";
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+            alignItems: "center";
+            gap: import("@alveole/theme").Spacing;
+            alignSelf: "stretch";
+        };
+        itemHover: {
+            backgroundColor: `rgba${string}`;
+            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        };
+        container: {
+            display: "flex";
+            flexDirection: "row";
+            gap: import("@alveole/theme").Spacing;
+        };
+        detail: {
+            paddingTop: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+            flex: number;
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+            alignSelf: "stretch";
+            gap: import("@alveole/theme").Spacing;
+            position: "relative";
+        };
+        separateur: {
+            left: number;
+            top: number;
+            position: "absolute";
+            width: "100%";
+            height: number;
+            backgroundColor: "#DEE3EC";
+        };
+        principal: {
+            display: "flex";
+            flexDirection: "column";
+            justifyContent: "center";
+            alignItems: "flex-start";
+            flex: number;
+        };
+        title: {
+            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;
+            color: "#373A3F";
+        };
+        description: {
+            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";
+        };
+        additional: {};
+        trailing: {
+            display: "flex";
+            justifyContent: "center";
+            alignSelf: "stretch";
+            color: "#5F6571";
+        };
+        loading: {
+            display: "flex";
+            alignItems: "center";
+            justifyContent: "center";
+            color: "#D9127C";
+        };
+        defaultIcon: {
+            color: "#5F6571";
+        };
+        previewContainer: {
+            display: "flex";
+            alignItems: "center";
+            justifyContent: "center";
+            overflow: "hidden";
+            borderRadius: import("@alveole/theme").Spacing;
+        };
+        preview: {
+            width: number;
+            height: number;
+        };
+    };
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithTrailing: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithLoading: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithoutSeparator: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithAvatar: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithPreviewImage: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ListItem.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAQkB;AAElB,eAAO,MAAM,OAAO,+CAA6D,CAAC;AAElF,eAAO,MAAM,YAAY,+CAMxB,CAAC;AAEF,eAAO,MAAM,WAAW,+CAA4E,CAAC;AAErG,eAAO,MAAM,gBAAgB,+CAAoF,CAAC;AAElH,eAAO,MAAM,QAAQ,+CAA8F,CAAC;AAEpH,eAAO,MAAM,UAAU,+CAStB,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CAM5B,CAAC"}

package/dist/ui/ListItem/ListItem.stories.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ButtonIcon } from '../Button';
+import { ListItem } from './ListItem';
+import { useStyles } from './ListItem.styles';
+export default {
+    title: 'ListItem',
+    tags: ['Composant'],
+    experimental: false,
+    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Composants?node-id=1002-558',
+    description: 'Permet d’afficher les données d‘une ressource.',
+    component: ListItem,
+    styleFn: useStyles,
+};
+export const Default = () => _jsx(ListItem, { title: "Titre", description: "Description" });
+export const WithTrailing = () => (_jsx(ListItem, { title: "Titre", description: "Description", trailing: () => _jsx(ButtonIcon, { variant: "tertiary", icon: "CircleX", onPress: () => console.log('remove') }) }));
+export const WithLoading = () => _jsx(ListItem, { title: "Titre", description: "Description", loading: true });
+export const WithoutSeparator = () => _jsx(ListItem, { title: "Titre", description: "Description", showSeparateur: false });
+export const WithIcon = () => _jsx(ListItem, { title: "Titre", description: "Description", IconProps: { name: 'Settings' } });
+export const WithAvatar = () => (_jsx(ListItem, { title: "Titre", description: "Description", AvatarProps: {
+        fallbackText: 'Jean Pierre',
+        src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400',
+    } }));
+export const WithPreviewImage = () => (_jsx(ListItem, { title: "Titre", description: "Description", preview_url: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400" }));

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

@@ -0,0 +1,88 @@
+export declare const useStyles: () => {
+    item: {
+        display: "flex";
+        flexDirection: "row";
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+        alignItems: "center";
+        gap: import("@alveole/theme").Spacing;
+        alignSelf: "stretch";
+    };
+    itemHover: {
+        backgroundColor: `rgba${string}`;
+        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+    };
+    container: {
+        display: "flex";
+        flexDirection: "row";
+        gap: import("@alveole/theme").Spacing;
+    };
+    detail: {
+        paddingTop: import("@alveole/theme").Spacing;
+        paddingBottom: import("@alveole/theme").Spacing;
+        flex: number;
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        alignSelf: "stretch";
+        gap: import("@alveole/theme").Spacing;
+        position: "relative";
+    };
+    separateur: {
+        left: number;
+        top: number;
+        position: "absolute";
+        width: "100%";
+        height: number;
+        backgroundColor: "#DEE3EC";
+    };
+    principal: {
+        display: "flex";
+        flexDirection: "column";
+        justifyContent: "center";
+        alignItems: "flex-start";
+        flex: number;
+    };
+    title: {
+        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;
+        color: "#373A3F";
+    };
+    description: {
+        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";
+    };
+    additional: {};
+    trailing: {
+        display: "flex";
+        justifyContent: "center";
+        alignSelf: "stretch";
+        color: "#5F6571";
+    };
+    loading: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        color: "#D9127C";
+    };
+    defaultIcon: {
+        color: "#5F6571";
+    };
+    previewContainer: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        overflow: "hidden";
+        borderRadius: import("@alveole/theme").Spacing;
+    };
+    preview: {
+        width: number;
+        height: number;
+    };
+};
+//# sourceMappingURL=ListItem.styles.d.ts.map

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

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

package/dist/ui/ListItem/ListItem.styles.js

@@ -0,0 +1,82 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ color, text, radius, spacing }) => ({
+    item: {
+        display: 'flex',
+        flexDirection: 'row',
+        paddingLeft: spacing('2W'),
+        paddingRight: spacing('2W'),
+        alignItems: 'center',
+        gap: spacing('3V'),
+        alignSelf: 'stretch',
+    },
+    itemHover: {
+        backgroundColor: color.alpha(color.light.background['alt-grey'], 0.75),
+        borderRadius: radius('md'),
+    },
+    container: {
+        display: 'flex',
+        flexDirection: 'row',
+        gap: spacing('3V'),
+    },
+    detail: {
+        paddingTop: spacing('1W'),
+        paddingBottom: spacing('1W'),
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'stretch',
+        gap: spacing('1W'),
+        position: 'relative',
+    },
+    separateur: {
+        left: 0,
+        top: 0,
+        position: 'absolute',
+        width: '100%',
+        height: 1,
+        backgroundColor: color.light.border['default-grey'],
+    },
+    principal: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'flex-start',
+        flex: 1,
+    },
+    title: {
+        color: color.light.text['default-grey'],
+        ...text['Corps de texte'].SM.Regular,
+    },
+    description: {
+        color: color.light.text['mention-grey'],
+        ...text['Corps de texte'].XS.Regular,
+    },
+    additional: {},
+    trailing: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignSelf: 'stretch',
+        color: color.light.text['mention-grey'],
+    },
+    loading: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: color.primary,
+    },
+    defaultIcon: {
+        color: color.light.text['mention-grey'],
+    },
+    previewContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        borderRadius: spacing('0,5V'),
+    },
+    preview: {
+        width: 40,
+        height: 40,
+    },
+}));

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

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

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

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

package/dist/ui/ListItem/index.js

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

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

@@ -18,6 +18,9 @@ declare const PublicPropsSchema: z.ZodObject<{
         Box: "Box";
         tab: "tab";
         olive: "olive";
+        Menu: "Menu";
+        Image: "Image";
+        toolbox: "toolbox";
         AArrowDown: "AArrowDown";
         AArrowUp: "AArrowUp";
         ALargeSmall: "ALargeSmall";
@@ -832,7 +835,6 @@ declare const PublicPropsSchema: z.ZodObject<{
         IceCreamCone: "IceCreamCone";
         IdCard: "IdCard";
         IdCardLanyard: "IdCardLanyard";
-        Image: "Image";
         ImageDown: "ImageDown";
         ImageMinus: "ImageMinus";
         ImageOff: "ImageOff";
@@ -973,7 +975,6 @@ declare const PublicPropsSchema: z.ZodObject<{
         MegaphoneOff: "MegaphoneOff";
         Meh: "Meh";
         MemoryStick: "MemoryStick";
-        Menu: "Menu";
         Merge: "Merge";
         MessageCircle: "MessageCircle";
         MessageCircleCode: "MessageCircleCode";
@@ -2019,7 +2020,6 @@ declare const PublicPropsSchema: z.ZodObject<{
         toast: "toast";
         toaster: "toaster";
         toiletRoll: "toiletRoll";
-        toolbox: "toolbox";
         toolbox2: "toolbox2";
         topCrop: "topCrop";
         towelFolded: "towelFolded";
@@ -2083,6 +2083,9 @@ export declare const LucideIconPropsJSON: z.core.ZodStandardJSONSchemaPayload<z.
         Box: "Box";
         tab: "tab";
         olive: "olive";
+        Menu: "Menu";
+        Image: "Image";
+        toolbox: "toolbox";
         AArrowDown: "AArrowDown";
         AArrowUp: "AArrowUp";
         ALargeSmall: "ALargeSmall";
@@ -2897,7 +2900,6 @@ export declare const LucideIconPropsJSON: z.core.ZodStandardJSONSchemaPayload<z.
         IceCreamCone: "IceCreamCone";
         IdCard: "IdCard";
         IdCardLanyard: "IdCardLanyard";
-        Image: "Image";
         ImageDown: "ImageDown";
         ImageMinus: "ImageMinus";
         ImageOff: "ImageOff";
@@ -3038,7 +3040,6 @@ export declare const LucideIconPropsJSON: z.core.ZodStandardJSONSchemaPayload<z.
         MegaphoneOff: "MegaphoneOff";
         Meh: "Meh";
         MemoryStick: "MemoryStick";
-        Menu: "Menu";
         Merge: "Merge";
         MessageCircle: "MessageCircle";
         MessageCircleCode: "MessageCircleCode";
@@ -4084,7 +4085,6 @@ export declare const LucideIconPropsJSON: z.core.ZodStandardJSONSchemaPayload<z.
         toast: "toast";
         toaster: "toaster";
         toiletRoll: "toiletRoll";
-        toolbox: "toolbox";
         toolbox2: "toolbox2";
         topCrop: "topCrop";
         towelFolded: "towelFolded";