@alveole/components 2.0.0-alpha → 2.0.0-alpha.10

package/dist/ui/FormControl/FileInput.d.ts

@@ -1,22 +1,20 @@
 import * as DocumentPicker from 'expo-document-picker';
 import React from 'react';
-export type FileInputValue = DocumentPicker.DocumentPickerAsset | DocumentPicker.DocumentPickerAsset[] | null;
+import { FileInputLabels, FileInputValue } from './fichiersDuChamp';
+export * from './fichiersDuChamp';
 export type FileInputProps = {
     value: FileInputValue;
-    previewURL?: string;
-    placeholder?: string;
-    forcePlaceholder?: boolean;
-    hideButton?: boolean;
-    hideFilename?: boolean;
-    canChange?: boolean;
-    disabled?: boolean;
+    onChange: (value: FileInputValue) => void;
     type?: DocumentPicker.DocumentPickerOptions['type'];
     multiple?: boolean;
-    onChange: (value: FileInputValue) => void;
+    disabled?: boolean;
+    removable?: boolean;
+    hideButton?: boolean;
+    labels?: Partial<FileInputLabels>;
+    /** Qualite des photos prises avec l'appareil photo, de 0 a 1. */
+    cameraQuality?: number;
     reopen?: boolean;
     onPickStart?: () => void;
 };
-export declare const nomAffiche: (value: FileInputValue, placeholder: string, forcePlaceholder?: boolean) => string;
-export declare const choisis: (assets: DocumentPicker.DocumentPickerAsset[] | null, multiple: boolean) => DocumentPicker.DocumentPickerAsset | DocumentPicker.DocumentPickerAsset[] | null;
-export declare const FileInput: (props: FileInputProps) => React.JSX.Element | null;
+export declare const FileInput: (props: FileInputProps) => React.JSX.Element;
 //# sourceMappingURL=FileInput.d.ts.map

package/dist/ui/FormControl/FileInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FileInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,sBAAsB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,mBAAmB,GAAG,cAAc,CAAC,mBAAmB,EAAE,GAAG,IAAI,CAAC;AAE9G,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,cAAc,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAKF,eAAO,MAAM,UAAU,GAAI,OAAO,cAAc,EAAE,aAAa,MAAM,EAAE,mBAAmB,OAAO,WAQhG,CAAC;AAIF,eAAO,MAAM,OAAO,GAAI,QAAQ,cAAc,CAAC,mBAAmB,EAAE,GAAG,IAAI,EAAE,UAAU,OAAO,qFAI7F,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,6BAmE9C,CAAC"}
+{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FileInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,sBAAsB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,eAAe,EAAE,cAAc,EAA+C,MAAM,mBAAmB,CAAC;AAKjH,cAAc,mBAAmB,CAAC;AAElC,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,IAAI,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IAClC,iEAAiE;IACjE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,sBAmC9C,CAAC"}

package/dist/ui/FormControl/FileInput.js

@@ -1,62 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as DocumentPicker from 'expo-document-picker';
 import React from 'react';
-import { Pressable } from 'react-native';
+import { Platform } from 'react-native';
 import { Box } from '../../core/Box';
-import { Typography } from '../../core/Typography';
+import { Button } from '../Button';
+import { fichiersVisibles, libellesParDefaut, retire } from './fichiersDuChamp';
 import { useStyles } from './FileInput.styles';
-import { valideLeType } from './valideLeType';
-// Le champ n'affiche jamais le detail d'une selection multiple : un fichier porte son nom, une
-// liste porte son compte. Cette table de cas se lisait au milieu du composant alors qu'elle ne
-// depend que de la valeur.
-export const nomAffiche = (value, placeholder, forcePlaceholder) => {
-    if (value == null || forcePlaceholder)
-        return placeholder;
-    if (!Array.isArray(value))
-        return value.name || '1 fichier';
-    if (value.length === 0)
-        return placeholder;
-    if (value.length === 1)
-        return value[0].name ?? '1 fichier';
-    return `${value.length} fichiers`;
-};
-// Le selecteur rend toujours une liste ; le champ simple n'en veut que le premier element, et
-// une liste vide vaut une absence de choix dans les deux cas.
-export const choisis = (assets, multiple) => {
-    if (!multiple)
-        return assets?.[0] ?? null;
-    return assets && assets.length > 0 ? assets : null;
-};
+import { FileInputListe } from './FileInputListe';
+import { useChoixDeFichier } from './useChoixDeFichier';
+export * from './fichiersDuChamp';
 export const FileInput = (props) => {
-    const { value, disabled, onChange, onPickStart, placeholder = 'Aucun fichier choisi.', type, forcePlaceholder, reopen = false, multiple = false, hideButton = false, } = props;
+    const { value, disabled, onChange, reopen = false, multiple = false, hideButton = false, removable = true } = props;
     const styles = useStyles();
-    const displayValue = nomAffiche(value, placeholder, forcePlaceholder);
-    const isPickingRef = React.useRef(false);
-    const handlePickFile = React.useCallback(async () => {
-        if (isPickingRef.current)
-            return;
-        onPickStart?.();
-        if (disabled)
-            return;
-        isPickingRef.current = true;
-        try {
-            const result = await DocumentPicker.getDocumentAsync({ copyToCacheDirectory: true, multiple, type });
-            valideLeType({ type, onChange })(choisis(result.assets, multiple));
-        }
-        finally {
-            isPickingRef.current = false;
-        }
-    }, [onPickStart, disabled, multiple, type, onChange]);
+    const labels = React.useMemo(() => ({ ...libellesParDefaut, ...props.labels }), [props.labels]);
+    const choisir = useChoixDeFichier({ ...props, multiple, cameraQuality: props.cameraQuality ?? 0.8, labels });
+    // Le champ simple ne remplace pas un fichier en silence : il faut d'abord retirer celui qu'il montre.
+    const visibles = fichiersVisibles(value);
+    const boutonDesactive = disabled || (!multiple && visibles.length > 0);
     React.useEffect(() => {
         if (reopen)
-            handlePickFile();
-    }, [reopen, handlePickFile]);
-    if (hideButton)
-        return null;
-    return (_jsx(Pressable, { accessibilityRole: "button", onPress: handlePickFile, children: _jsxs(Box, { tag: "form-control-file-input-inner", style: {
-                ...styles.fileInputContainer,
-            }, children: [_jsx(Box, { tag: "file-input-button", hoverStyle: { ...(!disabled && styles.fileInputButtonHovered) }, style: {
-                        ...styles.fileInputButton,
-                        ...(disabled && styles.fileInputButtonDisabled),
-                    }, children: _jsx(Typography, { style: styles.inputFileText, children: "Choisir un fichier" }) }), _jsx(Box, { tag: "file-input-text", children: _jsx(Typography, { mt: 'auto', mb: 'auto', style: styles.placeholderText, children: displayValue }) })] }) }));
+            choisir();
+    }, [reopen, choisir]);
+    return (_jsxs(Box, { tag: "file-input", style: styles.container, children: [!hideButton && (_jsx(Button, { fullWidth: Platform.OS !== 'web', onPress: choisir, disabled: boutonDesactive, variant: "secondary", title: labels.addFile, leading: "Paperclip" })), _jsx(FileInputListe, { fichiers: visibles, labels: labels, retirable: !disabled && removable, onRetirer: fichier => onChange(retire(value, fichier)) })] }));
 };

package/dist/ui/FormControl/FileInput.stories.d.ts

@@ -3,54 +3,22 @@ declare const _default: {
     tags: "ui"[];
     experimental: false;
     description: string;
-    component: (props: import("./FileInput").FileInputProps) => import("react").JSX.Element | null;
+    component: (props: import("./FileInput").FileInputProps) => import("react").JSX.Element;
     styleFn: () => {
-        fileInputContainer: {
+        container: {
             display: "flex";
-            flexDirection: "row";
+            flexDirection: "column";
             gap: string | number;
-            alignItems: "center";
-        };
-        fileInputButton: {
-            borderWidth: number;
-            borderColor: string;
-            backgroundColor: string;
-            transition: "background-color 0.1s ease-in-out";
-            display: "flex";
-            alignItems: "center";
-            justifyContent: "center";
-            paddingLeft: string | number;
-            paddingRight: string | number;
-            paddingTop: string | number;
-            paddingBottom: string | number;
-        };
-        fileInputButtonHovered: {
-            backgroundColor: string;
-        };
-        fileInputButtonDisabled: {
-            cursor: "not-allowed";
-            backgroundColor: string;
-        };
-        inputFileText: {
-            color: string;
-            fontSize: 12;
-            lineHeight: 20;
-            letterSpacing: 0;
-            fontFamily: string;
-            fontWeight?: import("react-native").TextStyle["fontWeight"];
-        };
-        placeholderText: {
-            color: string;
-            fontSize: 12;
-            lineHeight: 20;
-            letterSpacing: 0;
-            fontFamily: string;
-            fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
     };
 };
 export default _default;
 export declare const Default: () => import("react").JSX.Element;
 export declare const Multiple: () => import("react").JSX.Element;
+export declare const ImagesSeulement: () => import("react").JSX.Element;
+export declare const AvecFichiersEnregistres: () => import("react").JSX.Element;
+export declare const LibellesPersonnalises: () => import("react").JSX.Element;
+export declare const Desactive: () => import("react").JSX.Element;
+export declare const NonRetirable: () => import("react").JSX.Element;
 export * as Sources from './FileInput.stories.sources';
 //# sourceMappingURL=FileInput.stories.d.ts.map

package/dist/ui/FormControl/FileInput.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FileInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,wBAQkB;AAElB,eAAO,MAAM,OAAO,mCAkBnB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAOpB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"FileInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FileInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAMA,wBAQkB;AAElB,eAAO,MAAM,OAAO,mCAOnB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAOpB,CAAC;AAEF,eAAO,MAAM,eAAe,mCAO3B,CAAC;AAEF,eAAO,MAAM,uBAAuB,mCAwBnC,CAAC;AAEF,eAAO,MAAM,qBAAqB,mCAWjC,CAAC;AAEF,eAAO,MAAM,SAAS,mCAarB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAexB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,6BAA6B,CAAC"}

package/dist/ui/FormControl/FileInput.stories.js

@@ -1,6 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Box } from '../../core/Box';
 import { FileInput } from './FileInput';
 import { useStyles } from './FileInput.styles';
 import { FormControl } from './FormControl';
@@ -8,16 +7,59 @@ export default {
     title: 'FileInput',
     tags: ['ui'],
     experimental: false,
-    description: 'Sélection de fichier avec validation MIME, nue : on la place dans un FormControl pour son libellé, son aide et sa validation.',
+    description: "Sélection de fichiers avec validation MIME et liste des fichiers choisis. Sur natif, propose galerie, appareil photo ou document. Nue : on la place dans un FormControl pour son libellé, son aide et sa validation. Pour déposer des fichiers sur tout un formulaire (web), l'envelopper dans une [FileDropZone](/components/FileDropZone).",
     component: FileInput,
     styleFn: useStyles,
 };
 export const Default = () => {
     const [file, setFile] = useState(null);
-    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControl, { label: "Document", children: _jsx(FileInput, { value: file, onChange: setFile }) }), _jsx(FormControl, { label: "Image uniquement", children: _jsx(FileInput, { type: "image/*", value: file, onChange: setFile }) }), _jsx(FormControl, { label: "Avec erreur", error: "Ce champ est requis", children: _jsx(FileInput, { value: null, onChange: () => { } }) }), _jsx(FormControl, { label: "D\u00E9sactiv\u00E9", disabled: true, children: _jsx(FileInput, { value: null, onChange: () => { }, disabled: true }) })] }));
+    return (_jsx(FormControl, { label: "Document", children: _jsx(FileInput, { value: file, onChange: setFile }) }));
 };
 export const Multiple = () => {
     const [files, setFiles] = useState(null);
     return (_jsx(FormControl, { label: "Documents", children: _jsx(FileInput, { value: files, onChange: setFiles, multiple: true }) }));
 };
+export const ImagesSeulement = () => {
+    const [files, setFiles] = useState(null);
+    return (_jsx(FormControl, { label: "Photos", hint: "Formats accept\u00E9s : JPG, PNG", children: _jsx(FileInput, { type: "image/*", value: files, onChange: setFiles, multiple: true }) }));
+};
+export const AvecFichiersEnregistres = () => {
+    const [files, setFiles] = useState([
+        {
+            id: '1',
+            persisted: true,
+            uri: 'https://picsum.photos/id/10/200',
+            name: 'photo-chantier.jpg',
+            mimeType: 'image/jpeg',
+            lastModified: 0,
+        },
+        {
+            id: '2',
+            persisted: true,
+            uri: 'https://example.com/devis.pdf',
+            name: 'devis.pdf',
+            mimeType: 'application/pdf',
+            lastModified: 0,
+        },
+    ]);
+    return (_jsx(FormControl, { label: "Pi\u00E8ces jointes", hint: "Un fichier enregistr\u00E9 retir\u00E9 reste dans la valeur, marqu\u00E9 removed.", children: _jsx(FileInput, { value: files, onChange: setFiles, multiple: true }) }));
+};
+export const LibellesPersonnalises = () => {
+    const [file, setFile] = useState(null);
+    return (_jsx(FormControl, { label: "Attachment", children: _jsx(FileInput, { value: file, onChange: setFile, labels: { addFile: 'Add a file', gallery: 'Gallery', camera: 'Camera', document: 'Document', cancel: 'Cancel' } }) }));
+};
+export const Desactive = () => (_jsx(FormControl, { label: "Document", disabled: true, children: _jsx(FileInput, { value: {
+            uri: 'https://example.com/contrat.pdf',
+            name: 'contrat.pdf',
+            mimeType: 'application/pdf',
+            lastModified: 0,
+        }, onChange: () => { }, disabled: true }) }));
+export const NonRetirable = () => (_jsx(FormControl, { label: "Justificatif", children: _jsx(FileInput, { value: {
+            id: '3',
+            persisted: true,
+            uri: 'https://example.com/justificatif.pdf',
+            name: 'justificatif.pdf',
+            mimeType: 'application/pdf',
+            lastModified: 0,
+        }, onChange: () => { }, removable: false }) }));
 export * as Sources from './FileInput.stories.sources';

package/dist/ui/FormControl/FileInput.stories.sources.d.ts

@@ -1,8 +1,18 @@
 export declare const Default: () => string;
 export declare const Multiple: () => string;
+export declare const ImagesSeulement: () => string;
+export declare const AvecFichiersEnregistres: () => string;
+export declare const LibellesPersonnalises: () => string;
+export declare const Desactive: () => string;
+export declare const NonRetirable: () => string;
 export declare const storySources: {
     readonly Default: () => string;
     readonly Multiple: () => string;
+    readonly ImagesSeulement: () => string;
+    readonly AvecFichiersEnregistres: () => string;
+    readonly LibellesPersonnalises: () => string;
+    readonly Desactive: () => string;
+    readonly NonRetirable: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
 //# sourceMappingURL=FileInput.stories.sources.d.ts.map

package/dist/ui/FormControl/FileInput.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FileInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAuuB,CAAC;AAE5vB,eAAO,MAAM,QAAQ,cAAwP,CAAC;AAE9Q,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"FileInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FileInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAyO,CAAC;AAE9P,eAAO,MAAM,QAAQ,cAAwP,CAAC;AAE9Q,eAAO,MAAM,eAAe,cAAkT,CAAC;AAE/U,eAAO,MAAM,uBAAuB,cAAotB,CAAC;AAEzvB,eAAO,MAAM,qBAAqB,cAA4Y,CAAC;AAE/a,eAAO,MAAM,SAAS,cAA0V,CAAC;AAEjX,eAAO,MAAM,YAAY,cAAuZ,CAAC;AAEjb,eAAO,MAAM,YAAY;;;;;;;;CAQf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/FormControl/FileInput.stories.sources.js

@@ -1,8 +1,18 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/FormControl/FileInput.stories.tsx
-export const Default = () => "export const Default = () => {\n  const [file, setFile] = useState<FileInputValue>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Document\">\n        <FileInput value={file} onChange={setFile} />\n      </FormControl>\n      <FormControl label=\"Image uniquement\">\n        <FileInput type=\"image/*\" value={file} onChange={setFile} />\n      </FormControl>\n      <FormControl label=\"Avec erreur\" error=\"Ce champ est requis\">\n        <FileInput value={null} onChange={() => {}} />\n      </FormControl>\n      <FormControl label=\"Désactivé\" disabled>\n        <FileInput value={null} onChange={() => {}} disabled />\n      </FormControl>\n    </Box>\n  );\n};";
+export const Default = () => "export const Default = () => {\n  const [file, setFile] = useState<FileInputValue>(null);\n  return (\n    <FormControl label=\"Document\">\n      <FileInput value={file} onChange={setFile} />\n    </FormControl>\n  );\n};";
 export const Multiple = () => "export const Multiple = () => {\n  const [files, setFiles] = useState<FileInputValue>(null);\n  return (\n    <FormControl label=\"Documents\">\n      <FileInput value={files} onChange={setFiles} multiple />\n    </FormControl>\n  );\n};";
+export const ImagesSeulement = () => "export const ImagesSeulement = () => {\n  const [files, setFiles] = useState<FileInputValue>(null);\n  return (\n    <FormControl label=\"Photos\" hint=\"Formats acceptés : JPG, PNG\">\n      <FileInput type=\"image/*\" value={files} onChange={setFiles} multiple />\n    </FormControl>\n  );\n};";
+export const AvecFichiersEnregistres = () => "export const AvecFichiersEnregistres = () => {\n  const [files, setFiles] = useState<FileInputValue>([\n    {\n      id: '1',\n      persisted: true,\n      uri: 'https://picsum.photos/id/10/200',\n      name: 'photo-chantier.jpg',\n      mimeType: 'image/jpeg',\n      lastModified: 0,\n    },\n    {\n      id: '2',\n      persisted: true,\n      uri: 'https://example.com/devis.pdf',\n      name: 'devis.pdf',\n      mimeType: 'application/pdf',\n      lastModified: 0,\n    },\n  ]);\n  return (\n    <FormControl label=\"Pièces jointes\" hint=\"Un fichier enregistré retiré reste dans la valeur, marqué removed.\">\n      <FileInput value={files} onChange={setFiles} multiple />\n    </FormControl>\n  );\n};";
+export const LibellesPersonnalises = () => "export const LibellesPersonnalises = () => {\n  const [file, setFile] = useState<FileInputValue>(null);\n  return (\n    <FormControl label=\"Attachment\">\n      <FileInput\n        value={file}\n        onChange={setFile}\n        labels={{ addFile: 'Add a file', gallery: 'Gallery', camera: 'Camera', document: 'Document', cancel: 'Cancel' }}\n      />\n    </FormControl>\n  );\n};";
+export const Desactive = () => "export const Desactive = () => (\n  <FormControl label=\"Document\" disabled>\n    <FileInput\n      value={{\n        uri: 'https://example.com/contrat.pdf',\n        name: 'contrat.pdf',\n        mimeType: 'application/pdf',\n        lastModified: 0,\n      }}\n      onChange={() => {}}\n      disabled\n    />\n  </FormControl>\n);";
+export const NonRetirable = () => "export const NonRetirable = () => (\n  <FormControl label=\"Justificatif\">\n    <FileInput\n      value={{\n        id: '3',\n        persisted: true,\n        uri: 'https://example.com/justificatif.pdf',\n        name: 'justificatif.pdf',\n        mimeType: 'application/pdf',\n        lastModified: 0,\n      }}\n      onChange={() => {}}\n      removable={false}\n    />\n  </FormControl>\n);";
 export const storySources = {
     Default,
     Multiple,
+    ImagesSeulement,
+    AvecFichiersEnregistres,
+    LibellesPersonnalises,
+    Desactive,
+    NonRetirable,
 };

package/dist/ui/FormControl/FileInput.styles.d.ts

@@ -1,45 +1,8 @@
 export declare const useStyles: () => {
-    fileInputContainer: {
+    container: {
         display: "flex";
-        flexDirection: "row";
+        flexDirection: "column";
         gap: string | number;
-        alignItems: "center";
-    };
-    fileInputButton: {
-        borderWidth: number;
-        borderColor: string;
-        backgroundColor: string;
-        transition: "background-color 0.1s ease-in-out";
-        display: "flex";
-        alignItems: "center";
-        justifyContent: "center";
-        paddingLeft: string | number;
-        paddingRight: string | number;
-        paddingTop: string | number;
-        paddingBottom: string | number;
-    };
-    fileInputButtonHovered: {
-        backgroundColor: string;
-    };
-    fileInputButtonDisabled: {
-        cursor: "not-allowed";
-        backgroundColor: string;
-    };
-    inputFileText: {
-        color: string;
-        fontSize: 12;
-        lineHeight: 20;
-        letterSpacing: 0;
-        fontFamily: string;
-        fontWeight?: import("react-native").TextStyle["fontWeight"];
-    };
-    placeholderText: {
-        color: string;
-        fontSize: 12;
-        lineHeight: 20;
-        letterSpacing: 0;
-        fontFamily: string;
-        fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
 };
 //# sourceMappingURL=FileInput.styles.d.ts.map

package/dist/ui/FormControl/FileInput.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FileInput.styles.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCnB,CAAC"}
+{"version":3,"file":"FileInput.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FileInput.styles.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;CAMnB,CAAC"}

package/dist/ui/FormControl/FileInput.styles.js

@@ -1,37 +1,8 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ text, color, spacing }) => ({
-    fileInputContainer: {
+export const useStyles = makeStyles(({ spacing }) => ({
+    container: {
         display: 'flex',
-        flexDirection: 'row',
+        flexDirection: 'column',
         gap: spacing('1W'),
-        alignItems: 'center',
-    },
-    fileInputButton: {
-        borderWidth: 1,
-        borderColor: color.border['default-grey'],
-        backgroundColor: color.background['alt-grey'],
-        transition: 'background-color 0.1s ease-in-out',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingLeft: spacing('1W'),
-        paddingRight: spacing('1W'),
-        paddingTop: spacing('1,5V'),
-        paddingBottom: spacing('1,5V'),
-    },
-    fileInputButtonHovered: {
-        backgroundColor: color.background['contrast-grey'],
-    },
-    fileInputButtonDisabled: {
-        cursor: 'not-allowed',
-        backgroundColor: color.background['disabled-grey'],
-    },
-    inputFileText: {
-        ...text['Corps de texte'].XS.Regular,
-        color: color.text['default-grey'],
-    },
-    placeholderText: {
-        ...text['Corps de texte'].XS.Regular,
-        color: color.text['default-grey'],
     },
 }));

package/dist/ui/FormControl/FileInputListe.d.ts

@@ -0,0 +1,11 @@
+import { FileInputFile, FileInputLabels } from './fichiersDuChamp';
+type FileInputListeProps = {
+    fichiers: FileInputFile[];
+    labels: FileInputLabels;
+    retirable: boolean;
+    onRetirer: (fichier: FileInputFile) => void;
+};
+/** Les fichiers montres par le champ : apercu ou icone, ouverture au clic, bouton de retrait. */
+export declare const FileInputListe: ({ fichiers, labels, retirable, onRetirer }: FileInputListeProps) => import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=FileInputListe.d.ts.map

package/dist/ui/FormControl/FileInputListe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInputListe.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FileInputListe.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAYnE,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,MAAM,EAAE,eAAe,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF,iGAAiG;AACjG,eAAO,MAAM,cAAc,GAAI,4CAA4C,mBAAmB,uCA6B7F,CAAC"}

package/dist/ui/FormControl/FileInputListe.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Linking } from 'react-native';
+import { Box } from '../../core/Box';
+import { ButtonIcon } from '../Button';
+import { ListItem } from '../ListItem';
+const estUneImage = (fichier) => fichier.mimeType?.startsWith('image/') || /\.(jpe?g|png|gif|webp|bmp|svg)$/i.test(fichier.name ?? '');
+const iconeDe = (fichier) => {
+    if (fichier.persisted)
+        return 'FileCheckCorner';
+    if (fichier.mimeType?.includes('pdf') || fichier.name?.endsWith('.pdf'))
+        return 'FileText';
+    if (estUneImage(fichier))
+        return 'FileImage';
+    return 'File';
+};
+/** Les fichiers montres par le champ : apercu ou icone, ouverture au clic, bouton de retrait. */
+export const FileInputListe = ({ fichiers, labels, retirable, onRetirer }) => {
+    if (fichiers.length === 0)
+        return null;
+    return (_jsx(Box, { tag: "file-input-list", children: fichiers.map((fichier, index) => {
+            const nom = fichier.name ?? labels.unnamed;
+            return (_jsx(ListItem, { title: nom, preview_url: estUneImage(fichier) ? fichier.uri : undefined, IconProps: { name: iconeDe(fichier) }, showSeparateur: index !== 0, onPress: () => Linking.openURL(fichier.uri).catch(() => { }), trailing: () => (_jsx(ButtonIcon, { accessibilityLabel: `${labels.remove} ${nom}`, disabled: !retirable, variant: "tertiary", icon: "CircleX", onPress: () => onRetirer(fichier) })) }, fichier.id ?? fichier.uri));
+        }) }));
+};

package/dist/ui/FormControl/fichierCorrespondAuType.d.ts

@@ -2,6 +2,7 @@
  * Vrai si le fichier (reconnu a son type MIME, avec repli sur l'extension du nom pour le CSV)
  * fait partie des types autorises. Sans type exige, tout fichier passe. Un seul type peut etre
  * fourni sous forme de chaine plutot que de tableau. Semantique stricte : `image/…`, pdf propre.
+ * Les types MIME du selecteur (`image/*`, `application/pdf`) sont aussi reconnus.
  */
 export declare const fichierCorrespondAuType: (mimeType: string, fileName: string | undefined, types: string | readonly string[] | undefined) => boolean;
 //# sourceMappingURL=fichierCorrespondAuType.d.ts.map

package/dist/ui/FormControl/fichierCorrespondAuType.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fichierCorrespondAuType.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/fichierCorrespondAuType.ts"],"names":[],"mappings":"AAOA;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,GAClC,UAAU,MAAM,EAChB,UAAU,MAAM,GAAG,SAAS,EAC5B,OAAO,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,SAAS,KAC5C,OAQF,CAAC"}
+{"version":3,"file":"fichierCorrespondAuType.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/fichierCorrespondAuType.ts"],"names":[],"mappings":"AAWA;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAClC,UAAU,MAAM,EAChB,UAAU,MAAM,GAAG,SAAS,EAC5B,OAAO,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,SAAS,KAC5C,OASF,CAAC"}

package/dist/ui/FormControl/fichierCorrespondAuType.js

@@ -1,10 +1,13 @@
 const estUneImage = (mimeType) => mimeType.startsWith('image/');
 const estUnPdf = (mimeType) => mimeType === 'application/pdf' || mimeType.endsWith('/pdf');
+// Un type MIME exact (`image/png`) ou generique (`image/*`, `*/*`), comme ceux du selecteur.
+const correspondAuMime = (mimeType, type) => type === mimeType || type === '*/*' || (type.endsWith('/*') && mimeType.startsWith(type.slice(0, -1)));
 const estUnCsv = (mimeType, fileName) => mimeType === 'text/csv' || mimeType === 'application/csv' || (fileName?.endsWith('.csv') ?? false);
 /**
  * Vrai si le fichier (reconnu a son type MIME, avec repli sur l'extension du nom pour le CSV)
  * fait partie des types autorises. Sans type exige, tout fichier passe. Un seul type peut etre
  * fourni sous forme de chaine plutot que de tableau. Semantique stricte : `image/…`, pdf propre.
+ * Les types MIME du selecteur (`image/*`, `application/pdf`) sont aussi reconnus.
  */
 export const fichierCorrespondAuType = (mimeType, fileName, types) => {
     const liste = typeof types === 'string' ? [types] : types;
@@ -12,5 +15,6 @@ export const fichierCorrespondAuType = (mimeType, fileName, types) => {
         return true;
     return ((liste.includes('image') && estUneImage(mimeType)) ||
         (liste.includes('pdf') && estUnPdf(mimeType)) ||
-        (liste.includes('csv') && estUnCsv(mimeType, fileName)));
+        (liste.includes('csv') && estUnCsv(mimeType, fileName)) ||
+        liste.some(type => correspondAuMime(mimeType, type)));
 };

package/dist/ui/FormControl/fichiersDuChamp.d.ts

@@ -0,0 +1,43 @@
+import * as DocumentPicker from 'expo-document-picker';
+/**
+ * Un fichier du champ. `persisted` signale un fichier enregistré (deja cote serveur, reconnu a
+ * son `id`) ; `removed` marque un fichier enregistre que l'utilisateur a retire.
+ */
+export type FileInputFile = DocumentPicker.DocumentPickerAsset & {
+    id?: string;
+    persisted?: boolean;
+    removed?: boolean;
+};
+export type FileInputValue = FileInputFile | FileInputFile[] | null;
+export type FileInputLabels = {
+    addFile: string;
+    selectFile: string;
+    gallery: string;
+    camera: string;
+    document: string;
+    cancel: string;
+    chooseImageTitle: string;
+    chooseDocumentTitle: string;
+    chooseImageMessage: string;
+    permissionRequired: string;
+    cameraPermissionMessage: string;
+    galleryPermissionMessage: string;
+    unnamed: string;
+    remove: string;
+};
+export declare const libellesParDefaut: FileInputLabels;
+type TypesAcceptes = DocumentPicker.DocumentPickerOptions['type'];
+export type Source = 'document' | 'gallery' | 'camera';
+export declare const fichiersVisibles: (value: FileInputValue) => FileInputFile[];
+export declare const ajoute: (value: FileInputValue, nouveaux: FileInputFile[], multiple: boolean) => FileInputValue;
+export declare const retire: (value: FileInputValue, cible: FileInputFile) => FileInputValue;
+export declare const imagesSeulement: (type: TypesAcceptes) => boolean;
+/** Les sources que la feuille d'actions propose sur natif, dans l'ordre. Sur grand ecran, le document passe en tete. */
+export declare const sourcesProposees: (type: TypesAcceptes, grandEcran: boolean) => Source[];
+/** Sur grand ecran, l'option qui ouvre l'explorateur de fichiers s'annonce comme telle. */
+export declare const libelleDeLaSource: (source: Source, labels: FileInputLabels, { type, grandEcran }: {
+    type: TypesAcceptes;
+    grandEcran: boolean;
+}) => string;
+export {};
+//# sourceMappingURL=fichiersDuChamp.d.ts.map

package/dist/ui/FormControl/fichiersDuChamp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fichiersDuChamp.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/fichiersDuChamp.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,sBAAsB,CAAC;AAEvD;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,mBAAmB,GAAG;IAC/D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,aAAa,EAAE,GAAG,IAAI,CAAC;AAEpE,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,uBAAuB,EAAE,MAAM,CAAC;IAChC,wBAAwB,EAAE,MAAM,CAAC;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,eAe/B,CAAC;AAEF,KAAK,aAAa,GAAG,cAAc,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;AAElE,MAAM,MAAM,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;AAKvD,eAAO,MAAM,gBAAgB,GAAI,OAAO,cAAc,oBAAuD,CAAC;AAG9G,eAAO,MAAM,MAAM,GAAI,OAAO,cAAc,EAAE,UAAU,aAAa,EAAE,EAAE,UAAU,OAAO,KAAG,cAG5F,CAAC;AAOF,eAAO,MAAM,MAAM,GAAI,OAAO,cAAc,EAAE,OAAO,aAAa,KAAG,cAUpE,CAAC;AAMF,eAAO,MAAM,eAAe,GAAI,MAAM,aAAa,YAGlD,CAAC;AAOF,wHAAwH;AACxH,eAAO,MAAM,gBAAgB,GAAI,MAAM,aAAa,EAAE,YAAY,OAAO,KAAG,MAAM,EAIjF,CAAC;AAEF,2FAA2F;AAC3F,eAAO,MAAM,iBAAiB,GAC5B,QAAQ,MAAM,EACd,QAAQ,eAAe,EACvB,sBAAsB;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,UAAU,EAAE,OAAO,CAAA;CAAE,WAKnE,CAAC"}

package/dist/ui/FormControl/fichiersDuChamp.js

@@ -0,0 +1,63 @@
+export const libellesParDefaut = {
+    addFile: 'Ajouter un fichier',
+    selectFile: 'Sélectionner un fichier',
+    gallery: 'Galerie',
+    camera: 'Appareil photo',
+    document: 'Document',
+    cancel: 'Annuler',
+    chooseImageTitle: 'Choisir une image',
+    chooseDocumentTitle: 'Choisir un fichier',
+    chooseImageMessage: 'Prendre une photo ou en choisir une dans la galerie.',
+    permissionRequired: 'Autorisation requise',
+    cameraPermissionMessage: "Autorisez l'accès à l'appareil photo dans les réglages pour prendre une photo.",
+    galleryPermissionMessage: "Autorisez l'accès à la galerie dans les réglages pour choisir une image.",
+    unnamed: 'Fichier sans nom',
+    remove: 'Retirer',
+};
+const listeDe = (value) => value == null ? [] : Array.isArray(value) ? value : [value];
+export const fichiersVisibles = (value) => listeDe(value).filter(fichier => !fichier.removed);
+// Le champ multiple accumule ; le champ simple ne recoit un fichier que s'il n'en montre aucun.
+export const ajoute = (value, nouveaux, multiple) => {
+    if (!multiple)
+        return nouveaux[0] ?? value;
+    return [...listeDe(value), ...nouveaux];
+};
+const memeFichier = (a, b) => a.id != null && b.id != null ? a.id === b.id : a.uri === b.uri;
+// Un fichier enregistre reste dans la valeur, marque `removed`, pour que l'appelant sache quoi
+// supprimer cote serveur ; un fichier ajoute disparait simplement.
+export const retire = (value, cible) => {
+    const retirer = (fichier) => {
+        if (!memeFichier(fichier, cible))
+            return [fichier];
+        return fichier.persisted ? [{ ...fichier, removed: true }] : [];
+    };
+    if (!Array.isArray(value))
+        return value == null ? null : (retirer(value)[0] ?? null);
+    const suivants = value.flatMap(retirer);
+    return suivants.length === 0 ? null : suivants;
+};
+const typesDe = (type) => (type == null ? [] : Array.isArray(type) ? type : [type]);
+const estUnTypeImage = (t) => t === 'image' || t.startsWith('image/');
+export const imagesSeulement = (type) => {
+    const types = typesDe(type);
+    return types.length > 0 && types.every(estUnTypeImage);
+};
+const accepteLesImages = (type) => {
+    const types = typesDe(type);
+    return types.length === 0 || types.some(t => t === '*/*' || estUnTypeImage(t));
+};
+/** Les sources que la feuille d'actions propose sur natif, dans l'ordre. Sur grand ecran, le document passe en tete. */
+export const sourcesProposees = (type, grandEcran) => {
+    const images = accepteLesImages(type) ? ['gallery', 'camera'] : [];
+    if (imagesSeulement(type))
+        return images;
+    return grandEcran ? ['document', ...images] : [...images, 'document'];
+};
+/** Sur grand ecran, l'option qui ouvre l'explorateur de fichiers s'annonce comme telle. */
+export const libelleDeLaSource = (source, labels, { type, grandEcran }) => {
+    if (source === 'document')
+        return grandEcran ? labels.selectFile : labels.document;
+    if (source === 'gallery')
+        return grandEcran && imagesSeulement(type) ? labels.selectFile : labels.gallery;
+    return labels.camera;
+};

package/dist/ui/FormControl/useChoixDeFichier.d.ts

@@ -0,0 +1,15 @@
+import type { FileInputProps } from './FileInput';
+import { FileInputLabels } from './fichiersDuChamp';
+type Options = Pick<FileInputProps, 'value' | 'onChange' | 'type' | 'disabled' | 'onPickStart'> & {
+    multiple: boolean;
+    cameraQuality: number;
+    labels: FileInputLabels;
+};
+/**
+ * Tout ce que le bouton du champ declenche : le selecteur de documents sur le web ; sur natif, une
+ * feuille d'actions galerie / appareil photo / document, avec les demandes d'autorisation. Les
+ * fichiers recus passent le controle de type, puis s'ajoutent a la valeur.
+ */
+export declare const useChoixDeFichier: (options: Options) => () => Promise<void>;
+export {};
+//# sourceMappingURL=useChoixDeFichier.d.ts.map

package/dist/ui/FormControl/useChoixDeFichier.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChoixDeFichier.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/useChoixDeFichier.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAGL,eAAe,EAKhB,MAAM,mBAAmB,CAAC;AAmC3B,KAAK,OAAO,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG;IAChG,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,eAAe,CAAC;CACzB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,SAAS,OAAO,wBAuDjD,CAAC"}