@alveole/components 0.14.5 → 0.15.1

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

@@ -16,6 +16,9 @@ declare const _default: {
             Box: "Box";
             tab: "tab";
             olive: "olive";
+            Menu: "Menu";
+            Image: "Image";
+            toolbox: "toolbox";
             AArrowDown: "AArrowDown";
             AArrowUp: "AArrowUp";
             ALargeSmall: "ALargeSmall";
@@ -830,7 +833,6 @@ declare const _default: {
             IceCreamCone: "IceCreamCone";
             IdCard: "IdCard";
             IdCardLanyard: "IdCardLanyard";
-            Image: "Image";
             ImageDown: "ImageDown";
             ImageMinus: "ImageMinus";
             ImageOff: "ImageOff";
@@ -971,7 +973,6 @@ declare const _default: {
             MegaphoneOff: "MegaphoneOff";
             Meh: "Meh";
             MemoryStick: "MemoryStick";
-            Menu: "Menu";
             Merge: "Merge";
             MessageCircle: "MessageCircle";
             MessageCircleCode: "MessageCircleCode";
@@ -2017,7 +2018,6 @@ declare const _default: {
             toast: "toast";
             toaster: "toaster";
             toiletRoll: "toiletRoll";
-            toolbox: "toolbox";
             toolbox2: "toolbox2";
             topCrop: "topCrop";
             towelFolded: "towelFolded";

package/dist/ui/ResourceList/ResourceList.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FlatListProps } from 'react-native';
+export type ResourceListProps<Item> = FlatListProps<Item> & {
+    data: Item[];
+    isLoading?: boolean;
+    withPagination?: boolean;
+    noBorder?: boolean;
+    withWhiteBackground?: boolean;
+    titre?: string;
+    renderNoContent: () => React.ReactNode;
+};
+export declare const ResourceListDivider: () => import("react/jsx-runtime").JSX.Element;
+export declare const ResourceList: <Item>(props: ResourceListProps<Item>) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+//# sourceMappingURL=ResourceList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceList.d.ts","sourceRoot":"","sources":["../../../src/ui/ResourceList/ResourceList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+B,aAAa,EAAE,MAAM,cAAc,CAAC;AAI1E,MAAM,MAAM,iBAAiB,CAAC,IAAI,IAAI,aAAa,CAAC,IAAI,CAAC,GAAG;IAC1D,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,mBAAmB,+CAI/B,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,IAAI,EAAG,OAAO,iBAAiB,CAAC,IAAI,CAAC,0TAsDjE,CAAC"}

package/dist/ui/ResourceList/ResourceList.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@alveole/components';
+import { ActivityIndicator, FlatList } from 'react-native';
+import { Divider } from '../Divider';
+import { useStyles } from './ResourceList.styles';
+export const ResourceListDivider = () => (_jsx(Box, { pl: "100", pr: "100", children: _jsx(Divider, {}) }));
+export const ResourceList = (props) => {
+    const { style, data, isLoading, withPagination, renderNoContent, noBorder = false, withWhiteBackground = false, titre, ...listProps } = props;
+    const styles = useStyles();
+    if (isLoading) {
+        return (_jsx(Box, { tag: "resource-list-loader", style: styles.loader, children: _jsx(ActivityIndicator, { size: "large", style: { margin: 'auto' } }) }));
+    }
+    if (!data || data.length === 0)
+        return renderNoContent();
+    const paginationStyles = withPagination
+        ? {
+            borderBottomWidth: 0,
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+        }
+        : {};
+    return (_jsxs(Box, { tag: "resource-list", style: styles.list, children: [titre && (_jsx(Box, { tag: "resource-list-entete", style: styles.entete, children: _jsx(Typography, { style: styles.enteteTitle, children: titre }) })), _jsx(Box, { tag: "resource-list-items", width: "100%", style: {
+                    ...styles.items,
+                    ...paginationStyles,
+                    ...(noBorder ? styles.noBorder : styles.withBorder),
+                    ...(withWhiteBackground ? styles.itemsWithWhiteBackground : {}),
+                }, children: _jsx(FlatList, { data: data, contentContainerStyle: style, ...listProps }) })] }));
+};

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

@@ -0,0 +1,96 @@
+declare const _default: {
+    title: string;
+    tags: ["Composant"];
+    experimental: false;
+    figmaURL: string;
+    description: string;
+    component: <Item>(props: import("./ResourceList").ResourceListProps<Item>) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    styleFn: () => {
+        list: {
+            display: "flex";
+            flexDirection: "column";
+            gap: import("@alveole/theme").Spacing;
+        };
+        entete: {
+            paddingTop: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+        };
+        enteteTitle: {
+            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;
+        };
+        items: {
+            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        };
+        itemsWithWhiteBackground: {
+            backgroundColor: "#FFFFFF";
+        };
+        withBorder: {
+            borderWidth: number;
+            borderColor: "#DEE3EC";
+            borderLeftWidth: number;
+            borderRightWidth: number;
+        };
+        noBorder: {
+            borderWidth: number;
+            borderLeftWidth: number;
+            borderRightWidth: number;
+        };
+        loader: {
+            flex: number;
+            justifyContent: "center";
+            alignItems: "center";
+            padding: import("@alveole/theme").Spacing;
+        };
+        noContent: {
+            display: "flex";
+            padding: import("@alveole/theme").Spacing;
+            flexDirection: "column";
+            alignItems: "center";
+            gap: import("@alveole/theme").Spacing;
+            borderRadius: import("@alveole/theme").Spacing;
+            borderWidth: number;
+            borderColor: "#DEE3EC";
+            backgroundColor: "#FFFFFF";
+            borderLeftWidth: number;
+            borderRightWidth: number;
+            width: "100%";
+        };
+        noContentIntro: {
+            display: "flex";
+            flexDirection: "column";
+            alignItems: "center";
+            gap: import("@alveole/theme").Spacing;
+        };
+        noContentText: {
+            display: "flex";
+            flexDirection: "column";
+            alignItems: "center";
+            gap: import("@alveole/theme").Spacing;
+        };
+        noContentTextTitle: {
+            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            fontSize: 18 | 20;
+            lineHeight: 24 | 28;
+            letterSpacing: 0;
+            color: "#151617";
+        };
+        noContentTextDescription: {
+            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: "#5F6571";
+        };
+    };
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithTitle: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithPreviewImageAndTrailing: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithNoContent: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ResourceList.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceList.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ResourceList/ResourceList.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,wBASkB;AA6BlB,eAAO,MAAM,OAAO,+CAgBnB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAiBrB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAqBpB,CAAC;AAEF,eAAO,MAAM,2BAA2B,+CAsBvC,CAAC;AAEF,eAAO,MAAM,aAAa,+CAczB,CAAC"}

package/dist/ui/ResourceList/ResourceList.stories.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListItem } from '../ListItem';
+import { LucideIcon } from '../LucideIcon';
+import { ResourceList } from './ResourceList';
+import { useStyles } from './ResourceList.styles';
+import { ResourceListNoContent } from './ResourceListNoContent';
+export default {
+    title: 'ResourceList',
+    tags: ['Composant'],
+    experimental: false,
+    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=1002-558&p=f&t=wo7HwL3p0McYL9ei-0',
+    description: "Permet d’afficher une liste d'items avec un header et un footer",
+    component: ResourceList,
+    styleFn: useStyles,
+};
+const exampleData = [
+    { id: 'id_1', name: 'Joe Dalton', description: 'Peintre' },
+    { id: 'id_2', name: 'Peter Parker', description: 'Peintre' },
+    { id: 'id_3', name: 'John Snow', description: 'Peintre' },
+];
+const exampleDataWithPreview = [
+    {
+        id: 'id_1',
+        name: 'Joe Dalton',
+        description: 'Peintre',
+        preview_url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400',
+    },
+    {
+        id: 'id_2',
+        name: 'Peter Parker',
+        description: 'Peintre',
+        preview_url: 'https://images.unsplash.com/photo-1513475382585-d06e58bcb0e0?w=400',
+    },
+    {
+        id: 'id_3',
+        name: 'John Snow',
+        description: 'Peintre',
+        preview_url: 'https://images.unsplash.com/photo-1579783902614-a3fb3927b6a5?w=400',
+    },
+];
+export const Default = () => (_jsx(ResourceList, { data: exampleData, keyExtractor: item => item.id, renderItem: ({ item, index }) => (_jsx(ListItem, { title: item.name, description: item.description, showSeparateur: index !== 0 })), renderNoContent: () => (_jsx(ResourceListNoContent, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", IconProps: { name: 'House' }, ButtonProps: { title: 'Retour' } })) }));
+export const WithTitle = () => (_jsx(ResourceList, { titre: "Titre de la liste", data: exampleData, keyExtractor: item => item.id, renderItem: ({ item, index }) => (_jsx(ListItem, { title: item.name, description: item.description, showSeparateur: index !== 0 })), renderNoContent: () => (_jsx(ResourceListNoContent, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", IconProps: { name: 'House' }, ButtonProps: { title: 'Retour' } })) }));
+export const WithIcon = () => (_jsx(ResourceList, { data: exampleData, keyExtractor: item => item.id, renderItem: ({ item, index }) => (_jsx(ListItem, { title: item.name, description: item.description, IconProps: { name: 'Settings' }, showSeparateur: index !== 0 })), renderNoContent: () => (_jsx(ResourceListNoContent, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", IconProps: { name: 'House' }, ButtonProps: { title: 'Retour' } })) }));
+export const WithPreviewImageAndTrailing = () => (_jsx(ResourceList, { data: exampleDataWithPreview, keyExtractor: item => item.id, renderItem: ({ item, index }) => (_jsx(ListItem, { title: item.name, description: item.description, preview_url: item.preview_url, trailing: () => _jsx(LucideIcon, { name: "ChevronRight", size: "sm" }), showSeparateur: index !== 0 })), renderNoContent: () => (_jsx(ResourceListNoContent, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", IconProps: { name: 'House' }, ButtonProps: { title: 'Retour' } })) }));
+export const WithNoContent = () => (_jsx(ResourceList, { data: [], keyExtractor: item => item.id, renderItem: ({ item }) => _jsx(ListItem, { title: item.name, description: item.description }), renderNoContent: () => (_jsx(ResourceListNoContent, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", IconProps: { name: 'House' }, ButtonProps: { title: 'Retour' } })) }));

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

@@ -0,0 +1,82 @@
+export declare const useStyles: () => {
+    list: {
+        display: "flex";
+        flexDirection: "column";
+        gap: import("@alveole/theme").Spacing;
+    };
+    entete: {
+        paddingTop: import("@alveole/theme").Spacing;
+        paddingBottom: import("@alveole/theme").Spacing;
+    };
+    enteteTitle: {
+        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;
+    };
+    items: {
+        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+    };
+    itemsWithWhiteBackground: {
+        backgroundColor: "#FFFFFF";
+    };
+    withBorder: {
+        borderWidth: number;
+        borderColor: "#DEE3EC";
+        borderLeftWidth: number;
+        borderRightWidth: number;
+    };
+    noBorder: {
+        borderWidth: number;
+        borderLeftWidth: number;
+        borderRightWidth: number;
+    };
+    loader: {
+        flex: number;
+        justifyContent: "center";
+        alignItems: "center";
+        padding: import("@alveole/theme").Spacing;
+    };
+    noContent: {
+        display: "flex";
+        padding: import("@alveole/theme").Spacing;
+        flexDirection: "column";
+        alignItems: "center";
+        gap: import("@alveole/theme").Spacing;
+        borderRadius: import("@alveole/theme").Spacing;
+        borderWidth: number;
+        borderColor: "#DEE3EC";
+        backgroundColor: "#FFFFFF";
+        borderLeftWidth: number;
+        borderRightWidth: number;
+        width: "100%";
+    };
+    noContentIntro: {
+        display: "flex";
+        flexDirection: "column";
+        alignItems: "center";
+        gap: import("@alveole/theme").Spacing;
+    };
+    noContentText: {
+        display: "flex";
+        flexDirection: "column";
+        alignItems: "center";
+        gap: import("@alveole/theme").Spacing;
+    };
+    noContentTextTitle: {
+        fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+        fontSize: 18 | 20;
+        lineHeight: 24 | 28;
+        letterSpacing: 0;
+        color: "#151617";
+    };
+    noContentTextDescription: {
+        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: "#5F6571";
+    };
+};
+//# sourceMappingURL=ResourceList.styles.d.ts.map

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

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

package/dist/ui/ResourceList/ResourceList.styles.js

@@ -0,0 +1,73 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ color, text, radius, spacing, isVariant }) => ({
+    list: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: spacing('1V'),
+    },
+    entete: {
+        paddingTop: spacing('1V'),
+        paddingBottom: spacing('1V'),
+    },
+    enteteTitle: {
+        ...text['Corps de texte'].SM.Medium,
+        color: color.light.text['label-grey'],
+    },
+    items: {
+        borderRadius: radius('md'),
+    },
+    itemsWithWhiteBackground: {
+        backgroundColor: '#FFFFFF',
+    },
+    withBorder: {
+        borderWidth: 1,
+        borderColor: color.border['default-grey'],
+        borderLeftWidth: 1,
+        borderRightWidth: 1,
+    },
+    noBorder: {
+        borderWidth: 0,
+        borderLeftWidth: 0,
+        borderRightWidth: 0,
+    },
+    loader: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: spacing('4W'),
+    },
+    noContent: {
+        display: 'flex',
+        padding: spacing('4W'),
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: spacing('5W'),
+        borderRadius: isVariant('mobile') ? 0 : spacing('2W'),
+        borderWidth: 1,
+        borderColor: color.border['default-grey'],
+        backgroundColor: '#FFFFFF',
+        borderLeftWidth: isVariant('mobile') ? 0 : 1,
+        borderRightWidth: isVariant('mobile') ? 0 : 1,
+        width: '100%',
+    },
+    noContentIntro: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: spacing('2W'),
+    },
+    noContentText: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: spacing('1W'),
+    },
+    noContentTextTitle: {
+        color: color.text['title-grey'],
+        ...text.Titres['H6 - XXS'],
+    },
+    noContentTextDescription: {
+        color: color.text['mention'],
+        ...text['Corps de texte'].SM.Regular,
+    },
+}));

package/dist/ui/ResourceList/ResourceListNoContent.d.ts

@@ -0,0 +1,95 @@
+import { BoxProps } from '@alveole/components';
+import { ButtonProps } from '../Button';
+import { IconProps } from '../LucideIcon';
+export type ResourceListNoContentProps = Pick<BoxProps, 'style'> & {
+    title: string;
+    description: string;
+    IconProps: Pick<IconProps, 'color' | 'name'>;
+    ButtonProps?: Pick<ButtonProps, 'title' | 'onPress'>;
+};
+export declare const ResourceListNoContent: {
+    (props: ResourceListNoContentProps): import("react/jsx-runtime").JSX.Element;
+    stylesFn: () => {
+        list: {
+            display: "flex";
+            flexDirection: "column";
+            gap: import("@alveole/theme").Spacing;
+        };
+        entete: {
+            paddingTop: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+        };
+        enteteTitle: {
+            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;
+        };
+        items: {
+            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        };
+        itemsWithWhiteBackground: {
+            backgroundColor: "#FFFFFF";
+        };
+        withBorder: {
+            borderWidth: number;
+            borderColor: "#DEE3EC";
+            borderLeftWidth: number;
+            borderRightWidth: number;
+        };
+        noBorder: {
+            borderWidth: number;
+            borderLeftWidth: number;
+            borderRightWidth: number;
+        };
+        loader: {
+            flex: number;
+            justifyContent: "center";
+            alignItems: "center";
+            padding: import("@alveole/theme").Spacing;
+        };
+        noContent: {
+            display: "flex";
+            padding: import("@alveole/theme").Spacing;
+            flexDirection: "column";
+            alignItems: "center";
+            gap: import("@alveole/theme").Spacing;
+            borderRadius: import("@alveole/theme").Spacing;
+            borderWidth: number;
+            borderColor: "#DEE3EC";
+            backgroundColor: "#FFFFFF";
+            borderLeftWidth: number;
+            borderRightWidth: number;
+            width: "100%";
+        };
+        noContentIntro: {
+            display: "flex";
+            flexDirection: "column";
+            alignItems: "center";
+            gap: import("@alveole/theme").Spacing;
+        };
+        noContentText: {
+            display: "flex";
+            flexDirection: "column";
+            alignItems: "center";
+            gap: import("@alveole/theme").Spacing;
+        };
+        noContentTextTitle: {
+            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            fontSize: 18 | 20;
+            lineHeight: 24 | 28;
+            letterSpacing: 0;
+            color: "#151617";
+        };
+        noContentTextDescription: {
+            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: "#5F6571";
+        };
+    };
+    description: string;
+};
+//# sourceMappingURL=ResourceListNoContent.d.ts.map

package/dist/ui/ResourceList/ResourceListNoContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceListNoContent.d.ts","sourceRoot":"","sources":["../../../src/ui/ResourceList/ResourceListNoContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAc,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,SAAS,EAAc,MAAM,eAAe,CAAC;AAGtD,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,GAAG;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;IAC7C,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,SAAS,CAAC,CAAC;CACtD,CAAC;AAEF,eAAO,MAAM,qBAAqB;YAAW,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmBtE,CAAC"}

package/dist/ui/ResourceList/ResourceListNoContent.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@alveole/components';
+import { Button } from '../Button';
+import { LucideIcon } from '../LucideIcon';
+import { useStyles } from './ResourceList.styles';
+export const ResourceListNoContent = (props) => {
+    const { title, description, style, IconProps, ButtonProps, ...boxProps } = props;
+    const styles = useStyles();
+    return (_jsxs(Box, { style: [styles.noContent, style], ...boxProps, children: [_jsxs(Box, { style: styles.noContentIntro, children: [_jsx(LucideIcon, { size: "lg", ...IconProps }), _jsxs(Box, { style: styles.noContentText, children: [_jsx(Typography, { style: styles.noContentTextTitle, children: title }), _jsx(Typography, { style: styles.noContentTextDescription, children: description })] })] }), ButtonProps && _jsx(Button, { size: "lg", variant: "primary", ...ButtonProps })] }));
+};
+// Component configuration
+ResourceListNoContent.stylesFn = useStyles;
+ResourceListNoContent.description = 'Elément affiché dans une liste vide';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ResourceList/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC"}

package/dist/ui/ResourceList/index.js

@@ -0,0 +1,2 @@
+export * from './ResourceList';
+export * from './ResourceListNoContent';

package/dist/ui/ToolbarBottomNav/ToolbarBottomNav.d.ts

@@ -0,0 +1,6 @@
+import { Tabs as ExpoTabs } from 'expo-router';
+import React from 'react';
+export type ToolbarBottomNavProps = React.ComponentProps<typeof ExpoTabs>;
+export declare const TabItemHeight = 60;
+export declare const ToolbarBottomNav: (props: ToolbarBottomNavProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToolbarBottomNav.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarBottomNav.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarBottomNav/ToolbarBottomNav.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC1E,eAAO,MAAM,aAAa,KAAK,CAAC;AAEhC,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CAkB5D,CAAC"}

package/dist/ui/ToolbarBottomNav/ToolbarBottomNav.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs as ExpoTabs } from 'expo-router';
+import { useStyles } from './ToolbarBottomNav.styles';
+export const TabItemHeight = 60;
+export const ToolbarBottomNav = (props) => {
+    const { screenOptions, ...tabProps } = props;
+    const { tabBarActiveTintColor, tabBarInactiveTintColor, ...styles } = useStyles();
+    return (_jsx(ExpoTabs, { screenOptions: {
+            headerShown: false,
+            ...styles,
+            tabBarStyle: { ...styles.tabBarStyle, height: TabItemHeight },
+            tabBarActiveTintColor: tabBarActiveTintColor.color,
+            tabBarInactiveTintColor: tabBarInactiveTintColor.color,
+            ...screenOptions,
+        }, ...tabProps }));
+};

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

@@ -0,0 +1,33 @@
+declare const _default: {
+    title: string;
+    tags: ["Kit"];
+    experimental: false;
+    description: string;
+    figmaURL: string;
+    component: any;
+    styleFn: () => {
+        tabBarStyle: {
+            background: "#FFFFFF";
+            borderColor: "#DEE3EC";
+        };
+        tabBarLabelStyle: {
+            readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            readonly fontSize: 12;
+            readonly lineHeight: 20;
+            readonly letterSpacing: 0;
+        };
+        tabBarItemStyle: {
+            padding: number;
+            margin: number;
+        };
+        tabBarActiveTintColor: {
+            color: "#012B53";
+        };
+        tabBarInactiveTintColor: {
+            color: "#373A3F";
+        };
+    };
+};
+export default _default;
+export declare const ExampleUsage: () => string;
+//# sourceMappingURL=ToolbarBottomNav.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarBottomNav.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarBottomNav/ToolbarBottomNav.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,wBASkB;AASlB,eAAO,MAAM,YAAY,cAAoB,CAAC"}

package/dist/ui/ToolbarBottomNav/ToolbarBottomNav.stories.js

@@ -0,0 +1,18 @@
+import { ToolbarBottomNav } from './index';
+import { useStyles } from './ToolbarBottomNav.styles';
+export default {
+    title: 'ToolbarBottomNav',
+    tags: ['Kit'],
+    experimental: false,
+    description: 'Navigation bottom de type TabsExpo. A utiliser dans les _layout.',
+    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=1880-852&t=baZKFA9BpkeQGeZm-4',
+    component: ToolbarBottomNav,
+    styleFn: useStyles,
+};
+const codeExample = `<ToolbarBottomNav>
+  // Vers index.tsx
+  <ToolbarBottomNav.Screen name="home" options={{ tabBarLabel: 'Home', tabBarIcon: ToolbarBottomNav.Icon('home') }} />
+  // Vers list.tsx
+  <ToolbarBottomNav.Screen name="list" options={{ tabBarLabel: 'Liste', tabBarIcon: ToolbarBottomNav.Icon('all-inbox') }} />
+</ToolbarBottomNav>`;
+export const ExampleUsage = () => codeExample;

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

@@ -0,0 +1,23 @@
+export declare const useStyles: () => {
+    tabBarStyle: {
+        background: "#FFFFFF";
+        borderColor: "#DEE3EC";
+    };
+    tabBarLabelStyle: {
+        readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+        readonly fontSize: 12;
+        readonly lineHeight: 20;
+        readonly letterSpacing: 0;
+    };
+    tabBarItemStyle: {
+        padding: number;
+        margin: number;
+    };
+    tabBarActiveTintColor: {
+        color: "#012B53";
+    };
+    tabBarInactiveTintColor: {
+        color: "#373A3F";
+    };
+};
+//# sourceMappingURL=ToolbarBottomNav.styles.d.ts.map

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

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

package/dist/ui/ToolbarBottomNav/ToolbarBottomNav.styles.js

@@ -0,0 +1,18 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ text, color }) => ({
+    tabBarStyle: {
+        background: color.light.background['default-grey'],
+        borderColor: color.light.border['default-grey'],
+    },
+    tabBarLabelStyle: text['Corps de texte'].XS.Regular,
+    tabBarItemStyle: {
+        padding: 0,
+        margin: 0,
+    },
+    tabBarActiveTintColor: {
+        color: color.light.text['action-high-primary'],
+    },
+    tabBarInactiveTintColor: {
+        color: color.light.text['default-grey'],
+    },
+}));