@alveole/components 1.10.0 → 2.0.0-alpha.1

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

@@ -0,0 +1,18 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/FormControl/TextInput.stories.tsx
+export const Default = () => "export const Default = () => (\n  <FormControl label=\"Nom\">\n    <TextInput placeholder=\"Jean Dupont\" />\n  </FormControl>\n);";
+export const Email = () => "export const Email = () => (\n  <FormControl label=\"Adresse email\">\n    <TextInput type=\"email\" placeholder=\"jean@exemple.fr\" />\n  </FormControl>\n);";
+export const Telephone = () => "export const Telephone = () => (\n  <FormControl label=\"Téléphone\">\n    <TextInput type=\"tel\" placeholder=\"06 12 34 56 78\" />\n  </FormControl>\n);";
+export const MotDePasse = () => "export const MotDePasse = () => (\n  <FormControl label=\"Mot de passe\">\n    <TextInput type=\"password\" placeholder=\"Votre mot de passe\" />\n  </FormControl>\n);";
+export const NonModifiable = () => "export const NonModifiable = () => (\n  <FormControl label=\"Adresse email\">\n    <TextInput type=\"email\" value=\"jean@exemple.fr\" editable={false} />\n  </FormControl>\n);";
+export const Multiline = () => "export const Multiline = () => (\n  <FormControl label=\"Message\">\n    <TextInput placeholder=\"Votre message...\" multiline numberOfLines={4} />\n  </FormControl>\n);";
+export const MultilineWithModal = () => "export const MultilineWithModal = () => {\n  const [text, setText] = useState('');\n  return (\n    <FormControl label=\"Description\">\n      <TextInput\n        value={text}\n        onChangeText={setText}\n        placeholder=\"Taper pour ouvrir la modale de saisie...\"\n        multiline\n        openModal\n        modalSubmitLabel=\"Confirmer\"\n      />\n    </FormControl>\n  );\n};";
+export const storySources = {
+    Default,
+    Email,
+    Telephone,
+    MotDePasse,
+    NonModifiable,
+    Multiline,
+    MultilineWithModal,
+};

package/dist/ui/FormControl/TextInput.types.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TextInput as ReactNativeTextInput, TextInputProps as ReactNativeTextInputProps } from 'react-native';
+export type TextInputElement = ReactNativeTextInput;
+export type TextInputProps = Omit<ReactNativeTextInputProps, 'style'> & {
+    type?: 'text' | 'email' | 'tel' | 'password';
+    disabled?: boolean;
+    error?: string;
+    success?: string;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    openModal?: boolean;
+    modalSubmitLabel?: string;
+    onModalSubmit?: () => void;
+};
+//# sourceMappingURL=TextInput.types.d.ts.map

package/dist/ui/FormControl/TextInput.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.types.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,IAAI,oBAAoB,EAAE,cAAc,IAAI,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAE9G,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AAEpD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,yBAAyB,EAAE,OAAO,CAAC,GAAG;IAEtE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,UAAU,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IAInB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC"}

package/dist/ui/FormControl/TextInput.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { TextInput as ReactNativeTextInput } from 'react-native';
+/**
+ * La saisie ordinaire : on ecrit dans le champ la ou il est. Le focus est tenu ici et non
+ * laisse a la plateforme, parce que le contour se dessine sur le cadre et non sur le champ.
+ */
+export declare const TextInputInline: React.ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "style"> & {
+    type?: "text" | "email" | "tel" | "password";
+    disabled?: boolean;
+    error?: string;
+    success?: string;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    openModal?: boolean;
+    modalSubmitLabel?: string;
+    onModalSubmit?: () => void;
+} & React.RefAttributes<ReactNativeTextInput>>;
+//# sourceMappingURL=TextInputInline.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextInputInline.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInputInline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmC,SAAS,IAAI,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAoClG;;;GAGG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;8CA0D1B,CAAC"}

package/dist/ui/FormControl/TextInputInline.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '@alveole/theme';
+import React from 'react';
+import { Platform, TextInput as ReactNativeTextInput } from 'react-native';
+import { Box } from '../../core/Box';
+import { useFieldDisabled, useFieldId, useFieldRequired } from './FieldId';
+import { useStyles } from './FormControl.styles';
+import { inputFrameStyle, inputTextStyle } from './textInputStyles';
+import { useFieldFocus } from './useFieldFocus';
+/** Ce que la plateforme doit savoir de la valeur : son clavier, et qu'on ne la corrige pas. */
+const REGLAGES_PAR_TYPE = {
+    email: {
+        keyboardType: 'email-address',
+        autoComplete: 'email',
+        autoCorrect: false,
+        autoCapitalize: 'none',
+        textContentType: 'emailAddress',
+    },
+    tel: {
+        keyboardType: 'phone-pad',
+        autoComplete: 'tel',
+        textContentType: 'telephoneNumber',
+        autoCorrect: false,
+    },
+};
+const reglagesDuType = (type) => (type ? REGLAGES_PAR_TYPE[type] : undefined);
+/**
+ * Chaque plateforme a son mot pour « ce champ ne participe pas ». Le web a l'attribut
+ * `disabled`, que React Native ne connait pas et que TypeScript refuse sur son `TextInput` ;
+ * le natif a `editable={false}`. `readOnly` ne conviendrait ni a l'un ni a l'autre : il
+ * laisse le champ focusable au clavier et soumis avec le formulaire.
+ */
+const desactivationDe = (disabled) => disabled !== true ? null : Platform.OS === 'web' ? { disabled: true } : { editable: false };
+/**
+ * La saisie ordinaire : on ecrit dans le champ la ou il est. Le focus est tenu ici et non
+ * laisse a la plateforme, parce que le contour se dessine sur le cadre et non sur le champ.
+ */
+export const TextInputInline = React.forwardRef(function TextInputInline(props, ref) {
+    const { type, disabled: ownDisabled, readOnly, editable, error, success, startAdornment, endAdornment, onFocus, onBlur, onPressIn, ...inputProps } = props;
+    const { color } = useTheme();
+    const styles = useStyles();
+    const fieldId = useFieldId();
+    const disabled = useFieldDisabled(ownDisabled);
+    const required = useFieldRequired();
+    const champ = useFieldFocus({ disabled, readOnly, editable, onFocus, onBlur });
+    return (_jsxs(Box, { tag: "form-control-text-input-inner", style: inputFrameStyle(styles, {
+            disabled,
+            focus: champ.focus,
+            error,
+            success,
+            startAdornment,
+            endAdornment,
+            multiline: inputProps.multiline,
+        }), children: [startAdornment, _jsx(ReactNativeTextInput, { ref: ref, id: inputProps.id ?? fieldId, "aria-required": required, style: inputTextStyle(styles, { startAdornment, endAdornment }), readOnly: readOnly === true, editable: editable, onFocus: champ.handleFocus, onBlur: champ.handleBlur, onPressIn: onPressIn, placeholderTextColor: color.text.inverse.muted, ...reglagesDuType(type), ...inputProps, ...desactivationDe(disabled) }), endAdornment] }));
+});

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TextInput as ReactNativeTextInput } from 'react-native';
+/**
+ * Le champ tel qu'il apparait dans le formulaire quand la saisie vit en modale : il a
+ * l'allure d'un champ mais n'en est pas un. Tout ce qui pourrait y installer un curseur
+ * est neutralise, il ne reste qu'une surface pressable.
+ */
+export declare const TextInputMirror: React.ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "style"> & {
+    type?: "text" | "email" | "tel" | "password";
+    disabled?: boolean;
+    error?: string;
+    success?: string;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    openModal?: boolean;
+    modalSubmitLabel?: string;
+    onModalSubmit?: () => void;
+} & {
+    isOpen: boolean;
+    onOpen: () => void;
+} & React.RefAttributes<ReactNativeTextInput>>;
+//# sourceMappingURL=TextInputMirror.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextInputMirror.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInputMirror.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAa,SAAS,IAAI,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAQ5E;;;;GAIG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;YAP2B,OAAO;YAAU,MAAM,IAAI;8CAsDjF,CAAC"}

package/dist/ui/FormControl/TextInputMirror.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '@alveole/theme';
+import React from 'react';
+import { Pressable, TextInput as ReactNativeTextInput } from 'react-native';
+import { useFieldId } from './FieldId';
+import { useStyles } from './FormControl.styles';
+import { inputFrameStyle, inputTextStyle } from './textInputStyles';
+/**
+ * Le champ tel qu'il apparait dans le formulaire quand la saisie vit en modale : il a
+ * l'allure d'un champ mais n'en est pas un. Tout ce qui pourrait y installer un curseur
+ * est neutralise, il ne reste qu'une surface pressable.
+ */
+export const TextInputMirror = React.forwardRef(function TextInputMirror(props, ref) {
+    const { disabled, error, success, startAdornment, endAdornment, isOpen, onOpen, ...inputProps } = props;
+    const { color } = useTheme();
+    const styles = useStyles();
+    const fieldId = useFieldId();
+    return (_jsxs(Pressable, { accessibilityRole: "button", style: inputFrameStyle(styles, {
+            disabled,
+            // Le miroir reste allume tant que la modale est ouverte : c'est lui que l'oeil
+            // retrouve en la refermant.
+            focus: isOpen,
+            error,
+            success,
+            startAdornment,
+            endAdornment,
+            multiline: inputProps.multiline,
+        }), onPress: onOpen, children: [startAdornment, _jsx(ReactNativeTextInput, { ref: ref, id: inputProps.id ?? fieldId, style: inputTextStyle(styles, { startAdornment, endAdornment }), readOnly: true, editable: false, focusable: false, pointerEvents: "none", showSoftInputOnFocus: false, caretHidden: true, selectTextOnFocus: false, contextMenuHidden: true, selectionColor: "transparent", placeholderTextColor: color.text.inverse.muted, ...inputProps }), endAdornment] }));
+});

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TextInput as ReactNativeTextInput } from 'react-native';
+/**
+ * La saisie deportee en modale, hors web : le champ du formulaire n'est plus qu'un miroir
+ * qu'on presse, et la vraie saisie vit dans la modale. Un champ multiligne tient mal dans
+ * un formulaire mobile ; l'agrandir sur place repousserait le reste hors de l'ecran, la
+ * modale lui donne la hauteur sans deranger la page.
+ */
+export declare const TextInputModal: React.ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "style"> & {
+    type?: "text" | "email" | "tel" | "password";
+    disabled?: boolean;
+    error?: string;
+    success?: string;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    openModal?: boolean;
+    modalSubmitLabel?: string;
+    onModalSubmit?: () => void;
+} & React.RefAttributes<ReactNativeTextInput>>;
+//# sourceMappingURL=TextInputModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextInputModal.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInputModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,IAAI,oBAAoB,EAAwB,MAAM,cAAc,CAAC;AASvF;;;;;GAKG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;8CAgDzB,CAAC"}

package/dist/ui/FormControl/TextInputModal.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '@alveole/theme';
+import React from 'react';
+import { TextInput as ReactNativeTextInput } from 'react-native';
+import { Box } from '../../core/Box';
+import { versStyleNatif } from '../../core/styleNatif/versStyleNatif';
+import { useStyles } from './FormControl.styles';
+import { FormControlModal } from './FormControlModal';
+import { TextInputMirror } from './TextInputMirror';
+import { useTextInputModal } from './useTextInputModal';
+/**
+ * La saisie deportee en modale, hors web : le champ du formulaire n'est plus qu'un miroir
+ * qu'on presse, et la vraie saisie vit dans la modale. Un champ multiligne tient mal dans
+ * un formulaire mobile ; l'agrandir sur place repousserait le reste hors de l'ecran, la
+ * modale lui donne la hauteur sans deranger la page.
+ */
+export const TextInputModal = React.forwardRef(function TextInputModal(props, ref) {
+    const { disabled, readOnly, error, success, onFocus, onBlur, modalSubmitLabel, onModalSubmit, ...rest } = props;
+    const { color } = useTheme();
+    const styles = useStyles();
+    const modal = useTextInputModal({ disabled, readOnly, onFocus, onModalSubmit });
+    // Le handle vaut null tant que le miroir n'est pas monte, comme tout ref React.
+    React.useImperativeHandle(ref, () => modal.inputRef.current);
+    return (_jsxs(_Fragment, { children: [_jsx(TextInputMirror, { ref: modal.inputRef, disabled: disabled, error: error, success: success, isOpen: modal.isOpen, onOpen: modal.open, ...rest }), _jsx(FormControlModal, { open: modal.isOpen, onClose: modal.close, onShow: modal.handleShow, onDismiss: modal.handleDismiss, submitLabel: modalSubmitLabel, onSubmit: onModalSubmit ? modal.submit : undefined, children: _jsx(Box, { style: styles.modalInputContainer, children: _jsx(ReactNativeTextInput, { ref: modal.modalInputRef, style: versStyleNatif(styles.modalInput), readOnly: disabled === true || readOnly === true, onFocus: modal.handleModalFocus, onBlur: onBlur, placeholderTextColor: color.text.inverse.muted, ...rest, multiline: true, textAlignVertical: "top", autoFocus: true, showSoftInputOnFocus: true }) }) })] }));
+});

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

@@ -0,0 +1,14 @@
+import React from 'react';
+/** Le mot de passe : une saisie ordinaire, masquee, qu'un oeil permet de reveler. */
+export declare const TextInputPassword: React.ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "style"> & {
+    type?: "text" | "email" | "tel" | "password";
+    disabled?: boolean;
+    error?: string;
+    success?: string;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    openModal?: boolean;
+    modalSubmitLabel?: string;
+    onModalSubmit?: () => void;
+} & React.RefAttributes<import("react-native").TextInput>>;
+//# sourceMappingURL=TextInputPassword.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextInputPassword.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInputPassword.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,qFAAqF;AACrF,eAAO,MAAM,iBAAiB;;;;;;;;;;0DAyB7B,CAAC"}

package/dist/ui/FormControl/TextInputPassword.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { ButtonIcon } from '../Button';
+import { TextInputInline } from './TextInputInline';
+// Le bouton se colle au bord du champ : ni coins arrondis, ni retrait vertical.
+const boutonAccole = { height: '100%', borderRadius: 0, paddingTop: 0, paddingBottom: 0 };
+/** Le mot de passe : une saisie ordinaire, masquee, qu'un oeil permet de reveler. */
+export const TextInputPassword = React.forwardRef(function TextInputPassword(props, ref) {
+    const [masque, setMasque] = React.useState(true);
+    return (_jsx(TextInputInline, { secureTextEntry: masque, autoComplete: "current-password", textContentType: "password", autoCapitalize: "none", endAdornment: _jsx(ButtonIcon, { size: "sm", variant: "tertiary", style: boutonAccole, icon: masque ? 'EyeClosed' : 'Eye', accessibilityLabel: masque ? 'Afficher le mot de passe' : 'Masquer le mot de passe', onPress: () => setMasque(actuel => !actuel) }), ...props, ref: ref }));
+});

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

@@ -0,0 +1,13 @@
+import type { NumberInputProps } from './NumberInput';
+/**
+ * Avec `controlButton`, les boutons moins et plus prennent la place des adornments : ils
+ * encadrent la valeur. Le moins s'efface au minimum, ou il ne rendrait qu'une valeur refusee.
+ */
+export declare const adornmentsDePas: (props: NumberInputProps) => {
+    startAdornment: import("react").ReactNode;
+    endAdornment: import("react").ReactNode;
+} | {
+    startAdornment: import("react").JSX.Element;
+    endAdornment: import("react").JSX.Element;
+};
+//# sourceMappingURL=adornmentsDePas.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"adornmentsDePas.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/adornmentsDePas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,gBAAgB;;;;;;CAYtD,CAAC"}

package/dist/ui/FormControl/adornmentsDePas.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NumberInputControlButton } from './NumberInputControlButton';
+/**
+ * Avec `controlButton`, les boutons moins et plus prennent la place des adornments : ils
+ * encadrent la valeur. Le moins s'efface au minimum, ou il ne rendrait qu'une valeur refusee.
+ */
+export const adornmentsDePas = (props) => {
+    const { controlButton, value, step, min, onChange, startAdornment, endAdornment } = props;
+    if (!controlButton)
+        return { startAdornment, endAdornment };
+    const avancer = (pas) => onChange?.((value ?? 0) + pas);
+    return {
+        startAdornment: (_jsx(NumberInputControlButton, { action: "moins", step: step, disabled: min != null && min === value, onPress: avancer })),
+        endAdornment: _jsx(NumberInputControlButton, { action: "plus", step: step, onPress: avancer }),
+    };
+};

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

@@ -0,0 +1,8 @@
+/**
+ * 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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,20 @@
+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;
+    if (!liste || liste.length === 0)
+        return true;
+    return ((liste.includes('image') && estUneImage(mimeType)) ||
+        (liste.includes('pdf') && estUnPdf(mimeType)) ||
+        (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/fieldBorderState.d.ts

@@ -0,0 +1,24 @@
+export type FieldBorderStyles<T> = {
+    inputFocused: T;
+    inputError: T;
+    inputSuccess: T;
+    inputDisabled: T;
+};
+export type FieldBorderState = {
+    disabled?: boolean | null;
+    focus?: boolean;
+    error?: string;
+    success?: string;
+};
+/**
+ * La couleur de bordure d'un champ ou d'un selecteur : un seul etat a la fois, dans l'ordre
+ * fixe par l'ADR 0012. Un controle desactive le reste quoi qu'il arrive ; sinon le focus
+ * passe devant l'erreur et le succes, pour que le controle actif soit identifiable sans
+ * ambiguite, et le verdict de validation revient au blur.
+ *
+ * La table de styles est injectee : chaque famille a la sienne, seule la regle de priorite
+ * est commune. Sans ce point unique, la famille FormControl et Select divergeraient des la
+ * premiere retouche, et c'est exactement la variante locale que l'ADR supprime.
+ */
+export declare const fieldBorderState: <T extends object>(styles: FieldBorderStyles<T>, state: FieldBorderState) => Partial<T>;
+//# sourceMappingURL=fieldBorderState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fieldBorderState.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/fieldBorderState.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI;IACjC,YAAY,EAAE,CAAC,CAAC;IAChB,UAAU,EAAE,CAAC,CAAC;IACd,YAAY,EAAE,CAAC,CAAC;IAChB,aAAa,EAAE,CAAC,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAE7B,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,MAAM,EAC/C,QAAQ,iBAAiB,CAAC,CAAC,CAAC,EAC5B,OAAO,gBAAgB,KACtB,OAAO,CAAC,CAAC,CAMX,CAAC"}

package/dist/ui/FormControl/fieldBorderState.js

@@ -0,0 +1,21 @@
+/**
+ * La couleur de bordure d'un champ ou d'un selecteur : un seul etat a la fois, dans l'ordre
+ * fixe par l'ADR 0012. Un controle desactive le reste quoi qu'il arrive ; sinon le focus
+ * passe devant l'erreur et le succes, pour que le controle actif soit identifiable sans
+ * ambiguite, et le verdict de validation revient au blur.
+ *
+ * La table de styles est injectee : chaque famille a la sienne, seule la regle de priorite
+ * est commune. Sans ce point unique, la famille FormControl et Select divergeraient des la
+ * premiere retouche, et c'est exactement la variante locale que l'ADR supprime.
+ */
+export const fieldBorderState = (styles, state) => {
+    if (state.disabled)
+        return styles.inputDisabled;
+    if (state.focus)
+        return styles.inputFocused;
+    if (state.error)
+        return styles.inputError;
+    if (state.success)
+        return styles.inputSuccess;
+    return {};
+};

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

@@ -1,11 +1,15 @@
+export * from './fichierCorrespondAuType';
+export * from './FieldId';
+export * from './FileInput';
 export * from './FormControl';
 export * from './FormControlCaption';
 export * from './FormControlDateInput';
-export * from './FormControlFileInput';
 export * from './FormControlHint';
 export * from './FormControlLabel';
 export * from './FormControlModal';
-export * from './FormControlNumberInput';
-export * from './FormControlOtpInput';
+export * from './NumberInput';
+export * from './OtpInput';
 export * from './TextInput';
+export * from './useSaisieHHMM';
+export * from './valideLeType';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC"}

package/dist/ui/FormControl/index.js

@@ -1,10 +1,14 @@
+export * from './fichierCorrespondAuType';
+export * from './FieldId';
+export * from './FileInput';
 export * from './FormControl';
 export * from './FormControlCaption';
 export * from './FormControlDateInput';
-export * from './FormControlFileInput';
 export * from './FormControlHint';
 export * from './FormControlLabel';
 export * from './FormControlModal';
-export * from './FormControlNumberInput';
-export * from './FormControlOtpInput';
+export * from './NumberInput';
+export * from './OtpInput';
 export * from './TextInput';
+export * from './useSaisieHHMM';
+export * from './valideLeType';

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

@@ -0,0 +1,34 @@
+import { ViewStyle } from 'react-native';
+import type { useStyles } from './OtpInput.styles';
+type OtpStyles = ReturnType<typeof useStyles>;
+export type OtpThemeState = {
+    disabled?: boolean | null;
+    error?: string;
+    success?: string;
+};
+/**
+ * Le theme remis a la bibliotheque OTP. Il est sorti du composant parce que c'est une
+ * donnee, pas du rendu : la bibliotheque empile elle-meme les styles de chaque cellule, et
+ * l'ordre dans lequel elle le fait est la seule chose qui donne au focus sa priorite. Ici,
+ * la regle se lit et s'eprouve.
+ *
+ * `focusedPinCodeContainerStyle` ne concerne que la cellule active, que la bibliotheque
+ * pose par-dessus l'etat au repos : le focus passe donc devant l'erreur et le succes sans
+ * que nous ayons a l'arbitrer. Le repos, lui, porte l'etat desactive ou la validation.
+ */
+export declare const otpTheme: (styles: OtpStyles, state: OtpThemeState) => {
+    containerStyle: ViewStyle;
+    pinCodeContainerStyle: ViewStyle;
+    focusedPinCodeContainerStyle: ViewStyle;
+    focusStickStyle: ViewStyle;
+    pinCodeTextStyle: {
+        fontSize: 18;
+        lineHeight: 28;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+        color: string;
+    };
+};
+export {};
+//# sourceMappingURL=otpTheme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"otpTheme.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/otpTheme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAE9C,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,GAAI,QAAQ,SAAS,EAAE,OAAO,aAAa;;;;;;;;;;;;;CAoB9D,CAAC"}

package/dist/ui/FormControl/otpTheme.js

@@ -0,0 +1,30 @@
+import { versStyleNatif } from '../../core/styleNatif/versStyleNatif';
+import { fieldBorderState } from './fieldBorderState';
+/**
+ * Le theme remis a la bibliotheque OTP. Il est sorti du composant parce que c'est une
+ * donnee, pas du rendu : la bibliotheque empile elle-meme les styles de chaque cellule, et
+ * l'ordre dans lequel elle le fait est la seule chose qui donne au focus sa priorite. Ici,
+ * la regle se lit et s'eprouve.
+ *
+ * `focusedPinCodeContainerStyle` ne concerne que la cellule active, que la bibliotheque
+ * pose par-dessus l'etat au repos : le focus passe donc devant l'erreur et le succes sans
+ * que nous ayons a l'arbitrer. Le repos, lui, porte l'etat desactive ou la validation.
+ */
+export const otpTheme = (styles, state) => ({
+    containerStyle: versStyleNatif(styles.containerStyle),
+    pinCodeContainerStyle: versStyleNatif({
+        ...styles.pinCodeContainerStyle,
+        // Le parametre est explicite : la cellule desactivee ne pose qu'un fond, la cellule en
+        // erreur qu'une bordure. Sans lui, l'inference cherche un type commun aux quatre etats
+        // et n'en trouve aucun.
+        ...fieldBorderState({
+            inputFocused: styles.focusedPinCodeContainerStyle,
+            inputError: styles.pinCodeContainerStyleError,
+            inputSuccess: styles.pinCodeContainerStyleSuccess,
+            inputDisabled: styles.pinCodeContainerStyleDisabled,
+        }, state),
+    }),
+    focusedPinCodeContainerStyle: versStyleNatif(styles.focusedPinCodeContainerStyle),
+    focusStickStyle: versStyleNatif(styles.focusStickStyle),
+    pinCodeTextStyle: styles.pinCodeTextStyle,
+});