@alveole/components 0.43.3 → 1.0.1

package/dist/ui/DocumentViewer/DocumentViewerPDF.js

@@ -28,11 +28,8 @@ export const DocumentViewerPDF = (props) => {
     }, [onReady]);
     const onPdfLoadedSuccess = React.useCallback((documentPdf, active) => {
         if (!active)
-            return void documentPdf.destroy?.();
-        setPdf(currentPdf => {
-            void currentPdf?.destroy?.();
-            return documentPdf;
-        });
+            return;
+        setPdf(documentPdf);
         onReadyRef.current?.(documentPdf);
     }, []);
     const onPdfLoadedError = (active) => {
@@ -59,6 +56,7 @@ export const DocumentViewerPDF = (props) => {
         context.setTransform(1, 0, 0, 1, 0, 0);
         context.clearRect(0, 0, canvas.width, canvas.height);
         return pagePdf.render({
+            canvas,
             canvasContext: context,
             viewport,
             transform: pixelRatio === 1 ? undefined : [pixelRatio, 0, 0, pixelRatio, 0, 0],
@@ -66,7 +64,7 @@ export const DocumentViewerPDF = (props) => {
     }, [rotation, scale, viewerSize.height, viewerSize.width]);
     React.useEffect(() => {
         let isActive = true;
-        const loadingTask = pdfjs.getDocument(source);
+        const loadingTask = pdfjs.getDocument({ url: source });
         loadingTask.promise
             .then(nextPdf => onPdfLoadedSuccess(nextPdf, isActive))
             .catch(error => {
@@ -119,7 +117,6 @@ export const DocumentViewerPDF = (props) => {
         const y = ((event.clientY - rect.top) / rect.height) * 100;
         setTransformOrigin(`${Math.max(0, Math.min(100, x))}% ${Math.max(0, Math.min(100, y))}%`);
     }, []);
-    React.useEffect(() => () => void pdf?.destroy?.(), [pdf]);
     return (_jsx(Box, { tag: "document-viewer-pdf", width: '100%', height: height, onLayout: handleLayout, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), onPointerMove: handlePointerMove, style: styles.viewerPdfContent, children: _jsx(Box, { width: '100%', height: '100%', p: '1V', style: styles.viewerPdfStage, children: Platform.OS === 'web' && (_jsx(Box, { style: [
                     styles.viewerPdfCanvasWrapper,
                     {

package/dist/ui/DragAndDropFile/DragAndDropFile.d.ts

@@ -0,0 +1,9 @@
+import { FormControlCaptionProps, FormControlFileInputProps, FormControlFileInputValue, FormControlHintProps, LucideIconProps } from '@alveole/components';
+import React from 'react';
+export type DragAndDropFileValue = FormControlFileInputValue;
+export type DragAndDropFileProps = FormControlHintProps & FormControlCaptionProps & FormControlFileInputProps & {
+    label: string;
+    icon?: LucideIconProps['name'];
+};
+export declare const DragAndDropFile: (props: DragAndDropFileProps) => React.JSX.Element;
+//# sourceMappingURL=DragAndDropFile.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DragAndDropFile.d.ts","sourceRoot":"","sources":["../../../src/ui/DragAndDropFile/DragAndDropFile.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,uBAAuB,EAEvB,yBAAyB,EACzB,yBAAyB,EAEzB,oBAAoB,EAIpB,eAAe,EAChB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,oBAAoB,GAAG,yBAAyB,CAAC;AAC7D,MAAM,MAAM,oBAAoB,GAAG,oBAAoB,GACrD,uBAAuB,GACvB,yBAAyB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CAChC,CAAC;AAEJ,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBAqG1D,CAAC"}

package/dist/ui/DragAndDropFile/DragAndDropFile.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, FormControlCaption, FormControlFileInput, FormControlHint, FormControlLabel, Image, LucideIcon, } from '@alveole/components';
+import React from 'react';
+import { Alert } from '../../core/Alert';
+import { useStyles } from './DragAndDropFile.styles';
+export const DragAndDropFile = (props) => {
+    const { label, hint, icon, type, error, success, onChange, multiple } = props;
+    const styles = useStyles();
+    const [forceOpen, setForceOpen] = React.useState(false);
+    const onValueChange = value => {
+        if (type == null)
+            return onChange(value);
+        if (multiple && Array.isArray(value)) {
+            const invalidFiles = value.filter(file => {
+                const mimeType = file?.mimeType;
+                const fileName = file?.name;
+                if (mimeType == null)
+                    return true;
+                return !((type.includes('image') && mimeType.startsWith('image')) ||
+                    (type.includes('pdf') && mimeType.endsWith('pdf')) ||
+                    (type.includes('csv') &&
+                        (mimeType === 'text/csv' || mimeType === 'application/csv' || fileName?.endsWith('.csv'))));
+            });
+            if (invalidFiles.length > 0) {
+                Alert.alert({
+                    title: 'Type de fichier incorrect',
+                    message: `Certains fichiers ne sont pas pris en charge`,
+                });
+                return;
+            }
+            return onChange(value);
+        }
+        const mimeType = value?.mimeType;
+        if (mimeType == null)
+            return onChange(value);
+        const fileName = value?.name;
+        if ((type.includes('image') && mimeType.startsWith('image')) ||
+            (type.includes('pdf') && mimeType.endsWith('pdf')) ||
+            (type.includes('csv') &&
+                (mimeType === 'text/csv' || mimeType === 'application/csv' || fileName?.endsWith('.csv'))))
+            return onChange(value);
+        else {
+            Alert.alert({
+                title: 'Type de fichier incorrect',
+                message: `Le format du fichier n'est pas pris en charge`,
+            });
+        }
+    };
+    return (_jsxs(Box, { tag: "drag-and-drop-file", style: styles.container, display: "flex", flexDirection: "row", justify: "space-between", onPress: () => setForceOpen(true), children: [_jsxs(Box, { children: [_jsxs(Box, { tag: "drag-and-drop-file-icon", display: "flex", flexDirection: "row", justify: "center", gap: '050', children: [_jsx(LucideIcon, { size: "md", name: icon ?? 'Upload' }), _jsx(Box, { mt: 'auto', mb: 'auto', children: _jsx(FormControlLabel, { label: label }) })] }), _jsx(Box, { tag: "drag-and-drop-file-hint", display: "flex", flexDirection: "row", justify: "center", children: hint && _jsx(FormControlHint, { hint: hint }) }), _jsx(Box, { tag: "drag-and-drop-file-input", children: _jsx(FormControlFileInput, { ...props, hideButton: true, hideFilename: true, canChange: false, onChange: onValueChange, reopen: forceOpen, onPickStart: () => setForceOpen(false), type: type, multiple: multiple }) }), (error || success) && (_jsx(Box, { tag: "drag-and-drop-file-error", mt: '075', display: "flex", flexDirection: "row", justify: "center", children: _jsx(Box, { p: 16, children: _jsx(FormControlCaption, { ...props }) }) }))] }), _jsx(Box, { children: props.previewURL && _jsx(Image, { source: { uri: props.previewURL }, height: 40, width: 30, contentFit: "cover" }) })] }));
+};

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

@@ -0,0 +1,102 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    webOnly: true;
+    description: string;
+    component: (props: import("./DragAndDropFile").DragAndDropFileProps) => import("react").JSX.Element;
+    styleFn: () => {
+        container: {
+            borderWidth: number;
+            borderStyle: "dashed";
+            borderColor: string;
+            padding: import("@alveole/theme").Spacing;
+            borderRadius: number;
+            backgroundColor: string;
+            cursor: "pointer";
+        };
+        containerHover: {
+            borderStyle: "solid";
+            borderColor: string;
+            backgroundColor: string;
+        };
+        containerMouseHover: {
+            borderStyle: "dashed";
+            borderColor: string;
+            backgroundColor: string;
+        };
+        containerError: {
+            borderStyle: "dashed";
+            borderColor: string;
+            backgroundColor: string;
+        };
+        webError: {
+            width: "100%";
+            alignItems: "center";
+        };
+        icon: {
+            color: string;
+            backgroundColor: string;
+            padding: import("@alveole/theme").Spacing;
+            borderRadius: number;
+            width: import("@alveole/theme").Spacing;
+            height: import("@alveole/theme").Spacing;
+            marginBottom: import("@alveole/theme").Spacing;
+        };
+        filesListContainer: {
+            marginTop: import("@alveole/theme").Spacing;
+        };
+        filesListHeader: {
+            display: "flex";
+            flexDirection: "row";
+            justifyContent: "space-between";
+            alignItems: "center";
+            marginBottom: import("@alveole/theme").Spacing;
+        };
+        filesListTitle: {
+            fontWeight: "bold";
+        };
+        filesListBox: {
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            padding: import("@alveole/theme").Spacing;
+            backgroundColor: string;
+        };
+        fileItemContainer: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+            gap: import("@alveole/theme").Spacing;
+            padding: import("@alveole/theme").Spacing;
+            marginBottom: import("@alveole/theme").Spacing;
+            backgroundColor: string;
+            borderRadius: number;
+        };
+        fileItemContainerLast: {
+            marginBottom: number;
+        };
+        fileIcon: {
+            color: string;
+        };
+        fileInfo: {
+            flex: number;
+            display: "flex";
+            flexDirection: "column";
+            gap: import("@alveole/theme").Spacing;
+        };
+        fileName: {
+            fontWeight: "bold";
+        };
+        fileSize: {
+            fontSize: number;
+            color: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export declare const Multiple: () => import("react").JSX.Element;
+export declare const WithError: () => import("react").JSX.Element;
+export * as Sources from './DragAndDropFile.stories.sources';
+//# sourceMappingURL=DragAndDropFile.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DragAndDropFile.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DragAndDropFile/DragAndDropFile.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAQkB;AAElB,eAAO,MAAM,OAAO,mCAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAEpB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAErB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,mCAAmC,CAAC"}

package/dist/ui/DragAndDropFile/DragAndDropFile.stories.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { DragAndDropFile } from './DragAndDropFile';
+import { useStyles } from './DragAndDropFile.styles';
+export default {
+    title: 'DragAndDropFile',
+    tags: ['ui'],
+    experimental: false,
+    webOnly: true,
+    description: 'Zone de dépôt de fichiers par glisser-déposer ou clic.',
+    component: DragAndDropFile,
+    styleFn: useStyles,
+};
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(DragAndDropFile, { label: "Document", value: null, onChange: () => { } }), _jsx(DragAndDropFile, { label: "Image uniquement", type: "image/*", value: null, onChange: () => { } })] }));
+export const Multiple = () => (_jsx(DragAndDropFile, { label: "Documents (plusieurs)", multiple: true, value: null, onChange: () => { } }));
+export const WithError = () => (_jsx(DragAndDropFile, { label: "Document", error: "Format non support\u00E9", value: null, onChange: () => { } }));
+export * as Sources from './DragAndDropFile.stories.sources';

package/dist/ui/DragAndDropFile/DragAndDropFile.stories.sources.d.ts

@@ -0,0 +1,10 @@
+export declare const Default: () => string;
+export declare const Multiple: () => string;
+export declare const WithError: () => string;
+export declare const storySources: {
+    readonly Default: () => string;
+    readonly Multiple: () => string;
+    readonly WithError: () => string;
+};
+export type StorySourceName = keyof typeof storySources;
+//# sourceMappingURL=DragAndDropFile.stories.sources.d.ts.map

package/dist/ui/DragAndDropFile/DragAndDropFile.stories.sources.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragAndDropFile.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/DragAndDropFile/DragAndDropFile.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAsS,CAAC;AAE3T,eAAO,MAAM,QAAQ,cAA+I,CAAC;AAErK,eAAO,MAAM,SAAS,cAAwJ,CAAC;AAE/K,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/DragAndDropFile/DragAndDropFile.stories.sources.js

@@ -0,0 +1,10 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/DragAndDropFile/DragAndDropFile.stories.tsx
+export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <DragAndDropFile label=\"Document\" value={null} onChange={() => {}} />\n    <DragAndDropFile label=\"Image uniquement\" type=\"image/*\" value={null} onChange={() => {}} />\n  </Box>\n);";
+export const Multiple = () => "export const Multiple = () => (\n  <DragAndDropFile label=\"Documents (plusieurs)\" multiple value={null} onChange={() => {}} />\n);";
+export const WithError = () => "export const WithError = () => (\n  <DragAndDropFile label=\"Document\" error=\"Format non supporté\" value={null} onChange={() => {}} />\n);";
+export const storySources = {
+    Default,
+    Multiple,
+    WithError,
+};

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

@@ -0,0 +1,89 @@
+export declare const useStyles: () => {
+    container: {
+        borderWidth: number;
+        borderStyle: "dashed";
+        borderColor: string;
+        padding: import("@alveole/theme").Spacing;
+        borderRadius: number;
+        backgroundColor: string;
+        cursor: "pointer";
+    };
+    containerHover: {
+        borderStyle: "solid";
+        borderColor: string;
+        backgroundColor: string;
+    };
+    containerMouseHover: {
+        borderStyle: "dashed";
+        borderColor: string;
+        backgroundColor: string;
+    };
+    containerError: {
+        borderStyle: "dashed";
+        borderColor: string;
+        backgroundColor: string;
+    };
+    webError: {
+        width: "100%";
+        alignItems: "center";
+    };
+    icon: {
+        color: string;
+        backgroundColor: string;
+        padding: import("@alveole/theme").Spacing;
+        borderRadius: number;
+        width: import("@alveole/theme").Spacing;
+        height: import("@alveole/theme").Spacing;
+        marginBottom: import("@alveole/theme").Spacing;
+    };
+    filesListContainer: {
+        marginTop: import("@alveole/theme").Spacing;
+    };
+    filesListHeader: {
+        display: "flex";
+        flexDirection: "row";
+        justifyContent: "space-between";
+        alignItems: "center";
+        marginBottom: import("@alveole/theme").Spacing;
+    };
+    filesListTitle: {
+        fontWeight: "bold";
+    };
+    filesListBox: {
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: number;
+        padding: import("@alveole/theme").Spacing;
+        backgroundColor: string;
+    };
+    fileItemContainer: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        gap: import("@alveole/theme").Spacing;
+        padding: import("@alveole/theme").Spacing;
+        marginBottom: import("@alveole/theme").Spacing;
+        backgroundColor: string;
+        borderRadius: number;
+    };
+    fileItemContainerLast: {
+        marginBottom: number;
+    };
+    fileIcon: {
+        color: string;
+    };
+    fileInfo: {
+        flex: number;
+        display: "flex";
+        flexDirection: "column";
+        gap: import("@alveole/theme").Spacing;
+    };
+    fileName: {
+        fontWeight: "bold";
+    };
+    fileSize: {
+        fontSize: number;
+        color: string;
+    };
+};
+//# sourceMappingURL=DragAndDropFile.styles.d.ts.map

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

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

package/dist/ui/DragAndDropFile/DragAndDropFile.styles.js

@@ -0,0 +1,89 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ color, spacing }) => ({
+    container: {
+        borderWidth: 1,
+        borderStyle: 'dashed',
+        borderColor: color.border['contrast-grey'],
+        padding: spacing('200'),
+        borderRadius: 8,
+        backgroundColor: color.alpha(color.background['alt-grey'], 0.3),
+        cursor: 'pointer',
+    },
+    containerHover: {
+        borderStyle: 'solid',
+        borderColor: color.border['disabled-grey'],
+        backgroundColor: color.alpha(color.background['alt-grey'], 0.25),
+    },
+    containerMouseHover: {
+        borderStyle: 'dashed',
+        borderColor: color.border['contrast-grey'],
+        backgroundColor: color.alpha(color.background['alt-grey'], 0.75),
+    },
+    containerError: {
+        borderStyle: 'dashed',
+        borderColor: color.alpha(color.border['plain-error'], 0.5),
+        backgroundColor: color.alpha(color.background['alt-grey'], 0.25),
+    },
+    webError: {
+        width: '100%',
+        alignItems: 'center',
+    },
+    icon: {
+        color: color.text.mention,
+        backgroundColor: color.background['alt-grey'],
+        padding: spacing('100'),
+        borderRadius: 12,
+        width: spacing('200'),
+        height: spacing('200'),
+        marginBottom: spacing('100'),
+    },
+    filesListContainer: {
+        marginTop: spacing('100'),
+    },
+    filesListHeader: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: spacing('050'),
+    },
+    filesListTitle: {
+        fontWeight: 'bold',
+    },
+    filesListBox: {
+        borderWidth: 1,
+        borderColor: color.border['default-grey'],
+        borderRadius: 8,
+        padding: spacing('050'),
+        backgroundColor: color.background.default,
+    },
+    fileItemContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing('050'),
+        padding: spacing('050'),
+        marginBottom: spacing('025'),
+        backgroundColor: color.background['alt-grey'],
+        borderRadius: 8,
+    },
+    fileItemContainerLast: {
+        marginBottom: 0,
+    },
+    fileIcon: {
+        color: color.text['default-error'],
+    },
+    fileInfo: {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: spacing('025'),
+    },
+    fileName: {
+        fontWeight: 'bold',
+    },
+    fileSize: {
+        fontSize: 12,
+        color: color.text['default-grey'],
+    },
+}));

package/dist/ui/DragAndDropFile/DragAndDropFile.web.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DragAndDropFileProps } from './DragAndDropFile';
+export declare const DragAndDropFile: (props: DragAndDropFileProps) => React.JSX.Element;
+//# sourceMappingURL=DragAndDropFile.web.d.ts.map

package/dist/ui/DragAndDropFile/DragAndDropFile.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragAndDropFile.web.d.ts","sourceRoot":"","sources":["../../../src/ui/DragAndDropFile/DragAndDropFile.web.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AA8BzD,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBAyN1D,CAAC"}

package/dist/ui/DragAndDropFile/DragAndDropFile.web.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, FormControlCaption, FormControlFileInput, FormControlHint, FormControlLabel, LucideIcon, } from '@alveole/components';
+import React from 'react';
+import { Alert } from '../../core/Alert';
+import { useStyles } from './DragAndDropFile.styles';
+function fileMatchesType(file, types) {
+    if (!types || types.length === 0)
+        return true;
+    const mime = file.type || '';
+    const wantsImage = types.includes('image');
+    const wantsPdf = types.includes('pdf');
+    const wantsCsv = types.includes('csv');
+    if (wantsImage && mime.startsWith('image/'))
+        return true;
+    if (wantsPdf && (mime === 'application/pdf' || mime.endsWith('/pdf')))
+        return true;
+    if (wantsCsv && (mime === 'text/csv' || mime === 'application/csv' || file.name?.endsWith('.csv')))
+        return true;
+    return false;
+}
+function fileToDocumentPickerAsset(file) {
+    const uri = URL.createObjectURL(file);
+    return {
+        uri,
+        name: file.name,
+        size: file.size,
+        mimeType: file.type || 'application/octet-stream',
+        file,
+    };
+}
+function filesToDocumentPickerAssets(files) {
+    return files.map(file => fileToDocumentPickerAsset(file));
+}
+export const DragAndDropFile = (props) => {
+    const { value, label, hint, icon, type, error, success, onChange, multiple } = props;
+    const styles = useStyles();
+    const [isOver, setIsOver] = React.useState(false);
+    const [isMouthOver, setIsMouthOver] = React.useState(false);
+    const [forceOpen, setForceOpen] = React.useState(false);
+    const onValueChange = v => {
+        if (type == null)
+            return onChange(v);
+        if (multiple && Array.isArray(v)) {
+            const invalidFiles = v.filter(file => {
+                const mimeType = file?.mimeType;
+                const fileName = file?.name;
+                if (mimeType == null)
+                    return true;
+                return !((type.includes('image') && mimeType.startsWith('image')) ||
+                    (type.includes('pdf') && mimeType.endsWith('pdf')) ||
+                    (type.includes('csv') &&
+                        (mimeType === 'text/csv' || mimeType === 'application/csv' || fileName?.endsWith('.csv'))));
+            });
+            if (invalidFiles.length > 0) {
+                Alert.alert({ title: 'Type de fichier incorrect', message: `Certains fichiers ne sont pas pris en charge` });
+                return;
+            }
+            return onChange(v);
+        }
+        const mimeType = v?.mimeType;
+        if (mimeType == null)
+            return onChange(v);
+        const fileName = v?.name;
+        if ((type.includes('image') && mimeType.startsWith('image')) ||
+            (type.includes('pdf') && mimeType.endsWith('pdf')) ||
+            (type.includes('csv') &&
+                (mimeType === 'text/csv' || mimeType === 'application/csv' || fileName?.endsWith('.csv'))))
+            return onChange(v);
+        Alert.alert({ title: 'Type de fichier incorrect', message: `Le format du fichier n'est pas pris en charge` });
+    };
+    const emitFile = React.useCallback((file) => {
+        if (!fileMatchesType(file, type)) {
+            Alert.alert({ title: 'Type de fichier incorrect', message: `Le format du fichier n'est pas pris en charge` });
+            return;
+        }
+        const asset = fileToDocumentPickerAsset(file);
+        onValueChange?.(asset);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [type]);
+    const emitFiles = React.useCallback((files) => {
+        const validFiles = files.filter(file => fileMatchesType(file, type));
+        const invalidFiles = files.filter(file => !fileMatchesType(file, type));
+        if (invalidFiles.length > 0) {
+            Alert.alert({ title: 'Type de fichier incorrect', message: `Certains fichiers ne sont pas pris en charge` });
+        }
+        if (validFiles.length > 0) {
+            const assets = filesToDocumentPickerAssets(validFiles);
+            onValueChange?.(assets);
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [type]);
+    const onDrop = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsOver(false);
+        const dt = e.dataTransfer;
+        const files = [];
+        if (dt?.items?.length) {
+            for (let i = 0; i < dt.items.length; i++) {
+                const it = dt.items[i];
+                if (it.kind === 'file') {
+                    const f = it.getAsFile();
+                    if (f)
+                        files.push(f);
+                }
+            }
+        }
+        else if (dt?.files?.length) {
+            for (let i = 0; i < dt.files.length; i++) {
+                const f = dt.files[i];
+                if (f)
+                    files.push(f);
+            }
+        }
+        if (files.length > 0) {
+            if (multiple)
+                emitFiles(files);
+            else
+                emitFile(files[0]);
+        }
+    }, [emitFile, emitFiles, multiple]);
+    const onDragOver = React.useCallback((e) => {
+        e.preventDefault();
+        if (!isOver)
+            setIsOver(true);
+    }, [isOver]);
+    const onDragLeave = React.useCallback((e) => {
+        e.preventDefault();
+        if (isOver)
+            setIsOver(false);
+    }, [isOver]);
+    const onMouseOver = React.useCallback((e) => {
+        e.preventDefault();
+        if (!isMouthOver)
+            setIsMouthOver(true);
+    }, [isMouthOver]);
+    const onMouseLeave = React.useCallback((e) => {
+        e.preventDefault();
+        if (isMouthOver)
+            setIsMouthOver(false);
+    }, [isMouthOver]);
+    React.useEffect(() => {
+        return () => {
+            if (Array.isArray(value)) {
+                value.forEach(file => {
+                    const uri = file?.uri;
+                    if (uri?.startsWith('blob:'))
+                        try {
+                            URL.revokeObjectURL(uri);
+                        }
+                        catch { }
+                });
+            }
+            else {
+                const uri = value?.uri;
+                if (uri?.startsWith('blob:'))
+                    try {
+                        URL.revokeObjectURL(uri);
+                    }
+                    catch { }
+            }
+        };
+    }, [value]);
+    const styleContainer = React.useMemo(() => ({
+        ...styles.container,
+        ...(isMouthOver ? styles.containerMouseHover : {}),
+        ...(isOver ? styles.containerHover : {}),
+        ...(error ? styles.containerError : {}),
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [error, isMouthOver, isOver]);
+    return (_jsxs("div", { tabIndex: 0, onDrop: onDrop, onDragOver: onDragOver, onDragEnter: onDragOver, onDragLeave: onDragLeave, onMouseOver: onMouseOver, onMouseEnter: onMouseOver, onMouseLeave: onMouseLeave, onClick: () => setForceOpen(true), style: styleContainer, children: [_jsx(Box, { tag: "drag-and-drop-file-icon", display: "flex", flexDirection: "row", justify: "center", children: _jsx(LucideIcon, { size: "xl", name: icon ?? 'Upload', style: styles.icon }) }), _jsx(Box, { tag: "drag-and-drop-file-label", display: "flex", flexDirection: "row", justify: "center", children: _jsx(FormControlLabel, { label: label }) }), _jsx(Box, { tag: "drag-and-drop-file-hint", display: "flex", flexDirection: "row", justify: "center", children: hint && _jsx(FormControlHint, { hint: hint }) }), _jsx(Box, { tag: "drag-and-drop-file-input", display: "flex", flexDirection: "row", justify: "center", children: _jsx(Box, { pt: 16, children: _jsx(FormControlFileInput, { ...props, canChange: false, onChange: onValueChange, reopen: forceOpen, onPickStart: () => setForceOpen(false), multiple: multiple, type: type }) }) }), (error || success) && (_jsx(Box, { tag: "drag-and-drop-file-error", style: styles.webError, children: _jsx(FormControlCaption, { ...props }) }))] }));
+};

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

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

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

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

package/dist/ui/DragAndDropFile/index.js

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

package/dist/ui/EmailField/EmailField.d.ts

@@ -0,0 +1,20 @@
+import { FormControlCaptionProps, FormControlHintProps, FormControlLabelProps, TextInputProps } from '@alveole/components';
+import React from 'react';
+export type EmailFieldProps = TextInputProps & FormControlLabelProps & FormControlHintProps & FormControlCaptionProps & {
+    onChange?: TextInputProps['onChangeText'];
+};
+export declare const EmailField: React.ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "style"> & {
+    disabled?: boolean;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    openModal?: boolean;
+    modalSubmitLabel?: string;
+    onModalSubmit?: () => void;
+} & {
+    label: string;
+    labelRight?: React.ReactNode;
+    disabled?: boolean;
+} & FormControlCaptionProps & FormControlHintProps & {
+    onChange?: TextInputProps["onChangeText"];
+} & React.RefAttributes<import("react-native").TextInput>>;
+//# sourceMappingURL=EmailField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmailField.d.ts","sourceRoot":"","sources":["../../../src/ui/EmailField/EmailField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,uBAAuB,EAEvB,oBAAoB,EAEpB,qBAAqB,EAGrB,cAAc,EACf,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,eAAe,GAAG,cAAc,GAC1C,qBAAqB,GACrB,oBAAoB,GACpB,uBAAuB,GAAG;IACxB,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC3C,CAAC;AAEJ,eAAO,MAAM,UAAU;;;;;;;;;;;;eAHR,cAAc,CAAC,cAAc,CAAC;0DAoB3C,CAAC"}