@alveole/components 0.43.2 → 1.0.0

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

package/dist/ui/EmailField/EmailField.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, FormControlCaption, FormControlHint, FormControlLabel, InputHeading, } from '@alveole/components';
+import React from 'react';
+import { EmailInput } from '../EmailInput';
+export const EmailField = React.forwardRef(function EmailField(props, ref) {
+    const { label, labelRight, hint, error, success, disabled, onChange } = props;
+    return (_jsxs(FormControl, { children: [_jsxs(InputHeading, { children: [label && (_jsx(FormControlLabel, { labelRight: labelRight, label: label, disabled: disabled, error: error, success: success })), hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(EmailInput, { ref: ref, onChangeText: onChange, ...props }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+});

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

@@ -0,0 +1,25 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    description: string;
+    component: import("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;
+    } & import("..").FormControlCaptionProps & import("..").FormControlHintProps & {
+        onChange?: import("..").TextInputProps["onChangeText"];
+    } & import("react").RefAttributes<import("react-native").TextInput>>;
+    styleFn: () => {};
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export * as Sources from './EmailField.stories.sources';
+//# sourceMappingURL=EmailField.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmailField.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/EmailField/EmailField.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAIA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCAOnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}

package/dist/ui/EmailField/EmailField.stories.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { EmailField } from './EmailField';
+export default {
+    title: 'EmailField',
+    tags: ['ui'],
+    experimental: false,
+    description: 'Champ email avec label. Clavier email, lowercase automatique.',
+    component: EmailField,
+    styleFn: () => ({}),
+};
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(EmailField, { label: "Email", placeholder: "jean@exemple.fr" }), _jsx(EmailField, { label: "Avec erreur", placeholder: "jean@exemple.fr", error: "Format invalide" }), _jsx(EmailField, { label: "Avec succ\u00E8s", value: "jean@exemple.fr", success: "Email valide" }), _jsx(EmailField, { label: "D\u00E9sactiv\u00E9", value: "jean@exemple.fr", disabled: true })] }));
+export * as Sources from './EmailField.stories.sources';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmailField.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/EmailField/EmailField.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAmc,CAAC;AAExd,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -0,0 +1,6 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/EmailField/EmailField.stories.tsx
+export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <EmailField label=\"Email\" placeholder=\"jean@exemple.fr\" />\n    <EmailField label=\"Avec erreur\" placeholder=\"jean@exemple.fr\" error=\"Format invalide\" />\n    <EmailField label=\"Avec succès\" value=\"jean@exemple.fr\" success=\"Email valide\" />\n    <EmailField label=\"Désactivé\" value=\"jean@exemple.fr\" disabled />\n  </Box>\n);";
+export const storySources = {
+    Default,
+};

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

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

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

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

package/dist/ui/EmailField/index.js

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

package/dist/ui/EmailInput/EmailInput.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmailInput.d.ts","sourceRoot":"","sources":["../../../src/ui/EmailInput/EmailInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG;IAC7C,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;eAHV,cAAc,CAAC,cAAc,CAAC;0DAuBzC,CAAC"}

package/dist/ui/EmailInput/EmailInput.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextInput } from '@alveole/components';
+import React from 'react';
+export const EmailInput = React.forwardRef(function EmailInput(props, ref) {
+    const { onChange } = props;
+    const handleChange = value => {
+        onChange?.(value.toLowerCase());
+    };
+    return (_jsx(TextInput, { ref: ref, onChangeText: handleChange, keyboardType: "email-address", textContentType: "emailAddress", autoCapitalize: "none", autoComplete: "email", inputMode: "email", ...props, autoCorrect: false }));
+});

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

@@ -0,0 +1,21 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    description: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "style"> & {
+        disabled?: boolean;
+        startAdornment?: React.ReactNode;
+        endAdornment?: React.ReactNode;
+        openModal?: boolean;
+        modalSubmitLabel?: string;
+        onModalSubmit?: () => void;
+    } & {
+        onChange?: import("..").TextInputProps["onChangeText"];
+    } & import("react").RefAttributes<import("react-native").TextInput>>;
+    styleFn: () => {};
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export * as Sources from './EmailInput.stories.sources';
+//# sourceMappingURL=EmailInput.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmailInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/EmailInput/EmailInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAIA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCAMnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}

package/dist/ui/EmailInput/EmailInput.stories.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { EmailInput } from './EmailInput';
+export default {
+    title: 'EmailInput',
+    tags: ['ui'],
+    experimental: false,
+    description: 'Input email brut (sans label). Clavier email, lowercase automatique.',
+    component: EmailInput,
+    styleFn: () => ({}),
+};
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(EmailInput, { placeholder: "jean@exemple.fr" }), _jsx(EmailInput, { placeholder: "jean@exemple.fr", value: "jean@exemple.fr" }), _jsx(EmailInput, { placeholder: "jean@exemple.fr", editable: false })] }));
+export * as Sources from './EmailInput.stories.sources';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmailInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/EmailInput/EmailInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA0T,CAAC;AAE/U,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -0,0 +1,6 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/EmailInput/EmailInput.stories.tsx
+export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <EmailInput placeholder=\"jean@exemple.fr\" />\n    <EmailInput placeholder=\"jean@exemple.fr\" value=\"jean@exemple.fr\" />\n    <EmailInput placeholder=\"jean@exemple.fr\" editable={false} />\n  </Box>\n);";
+export const storySources = {
+    Default,
+};

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

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

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

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

package/dist/ui/EmailInput/index.js

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

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

@@ -33,8 +33,8 @@ declare const _default: {
             display: "flex";
             alignItems: "center";
             justifyContent: "center";
-            color: "#002764";
-            backgroundColor: "#F2F9FF";
+            color: string;
+            backgroundColor: string;
             borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
             padding: import("@alveole/theme").Spacing;
         };
@@ -52,7 +52,7 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            color: "#151617";
+            color: string;
         };
         description: {
             textAlign: "center";
@@ -61,7 +61,7 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            color: "#5F6571";
+            color: string;
         };
         footer: {
             width: "100%" | undefined;

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

@@ -26,8 +26,8 @@ export declare const useStyles: () => {
         display: "flex";
         alignItems: "center";
         justifyContent: "center";
-        color: "#002764";
-        backgroundColor: "#F2F9FF";
+        color: string;
+        backgroundColor: string;
         borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
         padding: import("@alveole/theme").Spacing;
     };
@@ -45,7 +45,7 @@ export declare const useStyles: () => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        color: "#151617";
+        color: string;
     };
     description: {
         textAlign: "center";
@@ -54,7 +54,7 @@ export declare const useStyles: () => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        color: "#5F6571";
+        color: string;
     };
     footer: {
         width: "100%" | undefined;

package/dist/ui/FileField/FileField.d.ts

@@ -0,0 +1,5 @@
+import { FormControlCaptionProps, FormControlFileInputProps, FormControlFileInputValue, FormControlHintProps, FormControlLabelProps } from '@alveole/components';
+export type FileFieldValue = FormControlFileInputValue;
+export type FileFieldProps = FormControlLabelProps & FormControlHintProps & FormControlCaptionProps & FormControlFileInputProps;
+export declare const FileField: (props: FileFieldProps) => import("react").JSX.Element;
+//# sourceMappingURL=FileField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileField.d.ts","sourceRoot":"","sources":["../../../src/ui/FileField/FileField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,uBAAuB,EAEvB,yBAAyB,EACzB,yBAAyB,EAEzB,oBAAoB,EAEpB,qBAAqB,EAEtB,MAAM,qBAAqB,CAAC;AAI7B,MAAM,MAAM,cAAc,GAAG,yBAAyB,CAAC;AACvD,MAAM,MAAM,cAAc,GAAG,qBAAqB,GAChD,oBAAoB,GACpB,uBAAuB,GACvB,yBAAyB,CAAC;AAE5B,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,gCAwC9C,CAAC"}

package/dist/ui/FileField/FileField.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, FormControlCaption, FormControlFileInput, FormControlHint, FormControlLabel, InputHeading, } from '@alveole/components';
+import { Alert } from '../../core/Alert';
+import { useStyles } from './FileField.styles';
+export const FileField = (props) => {
+    const { label, labelRight, hint, error, success, disabled, type, onChange } = props;
+    const styles = useStyles();
+    const onValueChange = value => {
+        const normalizedValue = Array.isArray(value) ? value[0] : value;
+        const mimeType = normalizedValue?.mimeType;
+        if (type == null || mimeType == null)
+            return onChange(value);
+        const fileName = normalizedValue?.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(FormControl, { style: styles.fileInput, children: [_jsxs(InputHeading, { children: [label && (_jsx(FormControlLabel, { labelRight: labelRight, label: label, disabled: disabled, error: error, success: success })), hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(FormControlFileInput, { ...props, onChange: onValueChange }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+};

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

@@ -0,0 +1,15 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    description: string;
+    component: (props: import("./FileField").FileFieldProps) => import("react").JSX.Element;
+    styleFn: () => {
+        fileInput: {};
+    };
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export declare const Multiple: () => import("react").JSX.Element;
+export * as Sources from './FileField.stories.sources';
+//# sourceMappingURL=FileField.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileField.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/FileField/FileField.stories.tsx"],"names":[],"mappings":";;;;;;;;;;AAKA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCAMnB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAAkF,CAAC;AAExG,OAAO,KAAK,OAAO,MAAM,6BAA6B,CAAC"}

package/dist/ui/FileField/FileField.stories.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { FileField } from './FileField';
+import { useStyles } from './FileField.styles';
+export default {
+    title: 'FileField',
+    tags: ['ui'],
+    experimental: false,
+    description: 'Champ de sélection de fichier avec label et validation MIME.',
+    component: FileField,
+    styleFn: useStyles,
+};
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FileField, { label: "Document", value: null, onChange: () => { } }), _jsx(FileField, { label: "Image uniquement", type: "image/*", value: null, onChange: () => { } }), _jsx(FileField, { label: "Avec erreur", value: null, error: "Ce champ est requis", onChange: () => { } })] }));
+export const Multiple = () => _jsx(FileField, { label: "Documents", value: null, multiple: true, onChange: () => { } });
+export * as Sources from './FileField.stories.sources';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileField.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FileField/FileField.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAkY,CAAC;AAEvZ,eAAO,MAAM,QAAQ,cAAqH,CAAC;AAE3I,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -0,0 +1,8 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/FileField/FileField.stories.tsx
+export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <FileField label=\"Document\" value={null} onChange={() => {}} />\n    <FileField label=\"Image uniquement\" type=\"image/*\" value={null} onChange={() => {}} />\n    <FileField label=\"Avec erreur\" value={null} error=\"Ce champ est requis\" onChange={() => {}} />\n  </Box>\n);";
+export const Multiple = () => "export const Multiple = () => <FileField label=\"Documents\" value={null} multiple onChange={() => {}} />;";
+export const storySources = {
+    Default,
+    Multiple,
+};

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

@@ -0,0 +1,4 @@
+export declare const useStyles: () => {
+    fileInput: {};
+};
+//# sourceMappingURL=FileField.styles.d.ts.map

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

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

package/dist/ui/FileField/FileField.styles.js

@@ -0,0 +1,4 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(() => ({
+    fileInput: {},
+}));

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

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

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

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

package/dist/ui/FileField/index.js

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