@alveole/components 1.10.0 → 2.0.0-alpha

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

@@ -4,19 +4,13 @@ declare const _default: {
     experimental: false;
     shortDescription: string;
     description: string;
-    component: import("react").ForwardRefExoticComponent<{
-        label: string;
-        labelRight?: React.ReactNode;
-        optional?: boolean;
-        optionalText?: string;
-        disabled?: boolean;
-    } & import("..").FormControlCaptionProps & import("..").FormControlHintProps & {
+    component: import("react").ForwardRefExoticComponent<import("..").FormControlCaptionProps & {
         value?: string;
         onChange?: (value: string) => void;
         onBlur?: () => void;
         disabled?: boolean;
-    } & import("react").RefAttributes<any>>;
-    styleFn: () => {};
+    } & import("react").RefAttributes<import("react-native").TextInput>>;
+    styleFn: () => string;
 };
 export default _default;
 export declare const Default: () => import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"DurationInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DurationInput/DurationInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAOA,wBAoBkB;AAElB,eAAO,MAAM,OAAO,mCAcnB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAclB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,iCAAiC,CAAC"}
+{"version":3,"file":"DurationInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DurationInput/DurationInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAMA,wBAsBkB;AAElB,eAAO,MAAM,OAAO,mCAoBnB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAoBlB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,iCAAiC,CAAC"}

package/dist/ui/DurationInput/DurationInput.stories.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '../../core';
-import { Grid } from '../Grid';
+import { Box } from '../../core/Box';
+import { Grid } from '../../core/Grid';
+import { FormControl } from '../FormControl';
 import { DurationInput } from './DurationInput';
-const useStyles = () => ({});
 export default {
     title: 'DurationInput',
     tags: ['ui'],
@@ -10,10 +10,12 @@ export default {
     shortDescription: "Saisie d'une durée au format HH:MM (ex. 06:15 pour 6 heures 15 minutes).",
     description: `Saisie d'une **durée** au format HH:MM (ex. \`06:15\` pour 6 heures 15 minutes).
 
+Le champ est nu : on le place dans un FormControl pour son libellé, son aide et sa validation.
+
 À ne pas confondre avec **TimeInput**, qui représente une **heure d'horloge** (ex. \`09:30\` du matin).
 
-| | DurationInput |
-|---|---|---|
+| Critère | DurationInput |
+|---|---|
 | Sémantique | Durée écoulée |
 | Exemple | \`35:00\` (35h00 de travail) |
 | Heures valides | 00–99 |
@@ -22,8 +24,8 @@ export default {
 > Il n'existe pas de \`<input type="duration">\` en HTML.
 > Voir [whatwg/html#5488](https://github.com/whatwg/html/issues/5488).`,
     component: DurationInput,
-    styleFn: useStyles,
+    styleFn: () => 'Aucun style appliqué',
 };
-export const Default = () => (_jsx(Box, { width: "100%", p: 8, children: _jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(DurationInput, { label: "Dur\u00E9e" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(DurationInput, { label: "Dur\u00E9e", value: "06:15" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(DurationInput, { label: "Dur\u00E9e", value: "01:30", hint: "Temps pass\u00E9 sur le terrain" }) })] }) }));
-export const States = () => (_jsx(Box, { width: "100%", p: 8, children: _jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(DurationInput, { label: "Erreur", value: "25:70", error: "Heure invalide (minutes 00\u201359)" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(DurationInput, { label: "Succ\u00E8s", value: "06:15", success: "Enregistr\u00E9" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(DurationInput, { label: "D\u00E9sactiv\u00E9", value: "06:15", disabled: true }) })] }) }));
+export const Default = () => (_jsx(Box, { width: "100%", p: 8, children: _jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Dur\u00E9e", children: _jsx(DurationInput, {}) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Dur\u00E9e", children: _jsx(DurationInput, { value: "06:15" }) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Dur\u00E9e", hint: "Temps pass\u00E9 sur le terrain", children: _jsx(DurationInput, { value: "01:30" }) }) })] }) }));
+export const States = () => (_jsx(Box, { width: "100%", p: 8, children: _jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Erreur", error: "Heure invalide (minutes 00\u201359)", children: _jsx(DurationInput, { value: "25:70", error: "Heure invalide (minutes 00\u201359)" }) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Succ\u00E8s", success: "Enregistr\u00E9", children: _jsx(DurationInput, { value: "06:15", success: "Enregistr\u00E9" }) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "D\u00E9sactiv\u00E9", disabled: true, children: _jsx(DurationInput, { value: "06:15", disabled: true }) }) })] }) }));
 export * as Sources from './DurationInput.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"DurationInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/DurationInput/DurationInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAkiB,CAAC;AAEvjB,eAAO,MAAM,MAAM,cAA4lB,CAAC;AAEhnB,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"DurationInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/DurationInput/DurationInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAqrB,CAAC;AAE1sB,eAAO,MAAM,MAAM,cAAwzB,CAAC;AAE50B,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,7 +1,7 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/DurationInput/DurationInput.stories.tsx
-export const Default = () => "export const Default = () => (\n  <Box width=\"100%\" p={8}>\n    <Grid gap={8}>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <DurationInput label=\"Durée\" />\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <DurationInput label=\"Durée\" value=\"06:15\" />\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <DurationInput label=\"Durée\" value=\"01:30\" hint=\"Temps passé sur le terrain\" />\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
-export const States = () => "export const States = () => (\n  <Box width=\"100%\" p={8}>\n    <Grid gap={8}>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <DurationInput label=\"Erreur\" value=\"25:70\" error=\"Heure invalide (minutes 00–59)\" />\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <DurationInput label=\"Succès\" value=\"06:15\" success=\"Enregistré\" />\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <DurationInput label=\"Désactivé\" value=\"06:15\" disabled />\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
+export const Default = () => "export const Default = () => (\n  <Box width=\"100%\" p={8}>\n    <Grid gap={8}>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Durée\">\n          <DurationInput />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Durée\">\n          <DurationInput value=\"06:15\" />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Durée\" hint=\"Temps passé sur le terrain\">\n          <DurationInput value=\"01:30\" />\n        </FormControl>\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
+export const States = () => "export const States = () => (\n  <Box width=\"100%\" p={8}>\n    <Grid gap={8}>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Erreur\" error=\"Heure invalide (minutes 00–59)\">\n          <DurationInput value=\"25:70\" error=\"Heure invalide (minutes 00–59)\" />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Succès\" success=\"Enregistré\">\n          <DurationInput value=\"06:15\" success=\"Enregistré\" />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Désactivé\" disabled>\n          <DurationInput value=\"06:15\" disabled />\n        </FormControl>\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
 export const storySources = {
     Default,
     States,

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/ui/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAgC,eAAe,EAAE,MAAM,eAAe,CAAC;AAG9E,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG;IACvC,QAAQ,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,sBAkChD,CAAC"}
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/ui/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAO,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAIhD,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG;IACvC,QAAQ,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,sBA0BhD,CAAC"}

package/dist/ui/EmptyState/EmptyState.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Typography } from '../../core';
 import { Box } from '../../core/Box/Box';
-import { isLucideIconName, LucideIcon } from '../LucideIcon';
+import { Typography } from '../../core/Typography';
 import { useStyles } from './EmptyState.styles';
+import { EmptyStateMedia } from './EmptyStateMedia';
 export const EmptyState = (props) => {
     const { children, style, iconName, title, description, text, illustration, actions, ...boxProps } = props;
     const styles = useStyles();
     const descriptionToRender = description ?? text;
     const footer = actions ?? children;
-    return (_jsxs(Box, { tag: "empty-state", style: [styles.container, style], ...boxProps, children: [_jsxs(Box, { tag: "empty-state-contenu", style: styles.contenu, children: [(illustration || iconName) && (_jsx(Box, { style: styles.media, children: illustration ? (illustration) : iconName && isLucideIconName(iconName) ? (_jsx(LucideIcon, { name: iconName, size: "lg", color: styles.media.color })) : null })), _jsxs(Box, { style: styles.messageEtDescription, children: [title && _jsx(Typography, { style: styles.title, children: title }), descriptionToRender && _jsx(Typography, { style: styles.description, children: descriptionToRender })] })] }), footer && (_jsx(Box, { tag: "empty-state-footer", style: styles.footer, children: footer }))] }));
+    return (_jsxs(Box, { tag: "empty-state", style: [styles.container, style], ...boxProps, children: [_jsxs(Box, { tag: "empty-state-contenu", style: styles.contenu, children: [_jsx(EmptyStateMedia, { illustration: illustration, iconName: iconName }), _jsxs(Box, { style: styles.messageEtDescription, children: [title && _jsx(Typography, { style: styles.title, children: title }), descriptionToRender && _jsx(Typography, { style: styles.description, children: descriptionToRender })] })] }), footer && (_jsx(Box, { tag: "empty-state-footer", style: styles.footer, children: footer }))] }));
 };

package/dist/ui/EmptyState/EmptyState.stories.js

@@ -21,9 +21,9 @@ export const WithActions = () => {
     return (_jsx(EmptyState, { iconName: "FilePlus", title: "Vous n\u2019avez aucun document", description: "Cr\u00E9ez un premier document ou importez-en un depuis votre ordinateur.", actions: _jsxs(_Fragment, { children: [_jsx(Button, { title: "Cr\u00E9er un document", variant: "primary" }), _jsx(Button, { title: "Importer un fichier", variant: "secondary" })] }) }));
 };
 export const WithCustomChildren = () => {
-    return (_jsxs(EmptyState, { iconName: "File", description: 'Vous n’avez aucun item', children: [_jsx(Button, { title: 'Button', variant: 'primary', fullWidth: true }), _jsx(Button, { title: 'Secondary action link', variant: 'link' })] }));
+    return (_jsxs(EmptyState, { iconName: "File", description: 'Vous n’avez aucun item', children: [_jsx(Button, { title: 'Button', variant: 'primary', fullWidth: true }), _jsx(Button, { title: 'Secondary action', variant: 'tertiary' })] }));
 };
 export const WithFixHeight = () => {
-    return (_jsxs(EmptyState, { iconName: "File", description: 'Vous n’avez aucun item', style: { height: '600px' }, children: [_jsx(Button, { title: 'Button', variant: 'primary' }), _jsx(Button, { title: 'Secondary action link', variant: 'link' })] }));
+    return (_jsxs(EmptyState, { iconName: "File", description: 'Vous n’avez aucun item', style: { height: '600px' }, children: [_jsx(Button, { title: 'Button', variant: 'primary' }), _jsx(Button, { title: 'Secondary action', variant: 'tertiary' })] }));
 };
 export * as Sources from './EmptyState.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/EmptyState/EmptyState.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAuO,CAAC;AAE5P,eAAO,MAAM,QAAQ,cAA6N,CAAC;AAEnP,eAAO,MAAM,WAAW,cAAoc,CAAC;AAE7d,eAAO,MAAM,kBAAkB,cAA4S,CAAC;AAE5U,eAAO,MAAM,aAAa,cAAyT,CAAC;AAEpV,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"EmptyState.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/EmptyState/EmptyState.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAuO,CAAC;AAE5P,eAAO,MAAM,QAAQ,cAA6N,CAAC;AAEnP,eAAO,MAAM,WAAW,cAAoc,CAAC;AAE7d,eAAO,MAAM,kBAAkB,cAA2S,CAAC;AAE3U,eAAO,MAAM,aAAa,cAAwT,CAAC;AAEnV,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -3,8 +3,8 @@
 export const Default = () => "export const Default = () => {\n  return (\n    <EmptyState\n      title=\"Aucun élément pour l’instant\"\n      description=\"Ajoutez un premier élément pour commencer à travailler sur cette section.\"\n    />\n  );\n};";
 export const WithIcon = () => "export const WithIcon = () => {\n  return (\n    <EmptyState\n      iconName=\"ClipboardList\"\n      title=\"Aucune donnée\"\n      description=\"Ajoutez un élément pour remplir ce tableau.\"\n    />\n  );\n};";
 export const WithActions = () => "export const WithActions = () => {\n  return (\n    <EmptyState\n      iconName=\"FilePlus\"\n      title=\"Vous n’avez aucun document\"\n      description=\"Créez un premier document ou importez-en un depuis votre ordinateur.\"\n      actions={\n        <>\n          <Button title=\"Créer un document\" variant=\"primary\" />\n          <Button title=\"Importer un fichier\" variant=\"secondary\" />\n        </>\n      }\n    />\n  );\n};";
-export const WithCustomChildren = () => "export const WithCustomChildren = () => {\n  return (\n    <EmptyState iconName=\"File\" description={'Vous n’avez aucun item'}>\n      <Button title={'Button'} variant={'primary'} fullWidth />\n      <Button title={'Secondary action link'} variant={'link'} />\n    </EmptyState>\n  );\n};";
-export const WithFixHeight = () => "export const WithFixHeight = () => {\n  return (\n    <EmptyState iconName=\"File\" description={'Vous n’avez aucun item'} style={{ height: '600px' }}>\n      <Button title={'Button'} variant={'primary'} />\n      <Button title={'Secondary action link'} variant={'link'} />\n    </EmptyState>\n  );\n};";
+export const WithCustomChildren = () => "export const WithCustomChildren = () => {\n  return (\n    <EmptyState iconName=\"File\" description={'Vous n’avez aucun item'}>\n      <Button title={'Button'} variant={'primary'} fullWidth />\n      <Button title={'Secondary action'} variant={'tertiary'} />\n    </EmptyState>\n  );\n};";
+export const WithFixHeight = () => "export const WithFixHeight = () => {\n  return (\n    <EmptyState iconName=\"File\" description={'Vous n’avez aucun item'} style={{ height: '600px' }}>\n      <Button title={'Button'} variant={'primary'} />\n      <Button title={'Secondary action'} variant={'tertiary'} />\n    </EmptyState>\n  );\n};";
 export const storySources = {
     Default,
     WithIcon,

package/dist/ui/EmptyState/EmptyState.styles.js

@@ -32,7 +32,7 @@ export const useStyles = makeStyles(({ externalPadding, text, color, spacing, ra
             color: color.light.text['active-primary'],
             backgroundColor: color.light.background['alt-primary'],
             borderRadius: radius('full'),
-            padding: spacing('075'),
+            padding: spacing('3V'),
         },
         messageEtDescription: {
             display: 'flex',
@@ -55,7 +55,7 @@ export const useStyles = makeStyles(({ externalPadding, text, color, spacing, ra
             width: isVariant('mobile') ? '100%' : undefined,
             display: 'flex',
             flexDirection: 'column',
-            gap: spacing('100'),
+            gap: spacing('2W'),
         },
     };
 });

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { LucideIconProps } from '../LucideIcon';
+/**
+ * Ce que la pastille montre : une illustration libre, une icone, ou rien. L'illustration prime,
+ * et un nom d'icone inconnu ne donne rien. Ces trois issues tenaient dans un ternaire imbrique
+ * au milieu du rendu, ou elles faisaient la moitie de la complexite du composant.
+ */
+export declare const mediaDEtatVide: (illustration: React.ReactNode, iconName: string | undefined) => "icone" | "illustration" | "aucun";
+export type EmptyStateMediaProps = {
+    illustration?: React.ReactNode;
+    iconName?: LucideIconProps['name'];
+};
+export declare const EmptyStateMedia: ({ illustration, iconName }: EmptyStateMediaProps) => React.JSX.Element | null;
+//# sourceMappingURL=EmptyStateMedia.d.ts.map

package/dist/ui/EmptyState/EmptyStateMedia.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyStateMedia.d.ts","sourceRoot":"","sources":["../../../src/ui/EmptyState/EmptyStateMedia.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAgC,eAAe,EAAE,MAAM,eAAe,CAAC;AAG9E;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,cAAc,KAAK,CAAC,SAAS,EAAE,UAAU,MAAM,GAAG,SAAS,uCAIzF,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,4BAA4B,oBAAoB,6BAc/E,CAAC"}

package/dist/ui/EmptyState/EmptyStateMedia.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core/Box/Box';
+import { isLucideIconName, LucideIcon } from '../LucideIcon';
+import { useStyles } from './EmptyState.styles';
+/**
+ * Ce que la pastille montre : une illustration libre, une icone, ou rien. L'illustration prime,
+ * et un nom d'icone inconnu ne donne rien. Ces trois issues tenaient dans un ternaire imbrique
+ * au milieu du rendu, ou elles faisaient la moitie de la complexite du composant.
+ */
+export const mediaDEtatVide = (illustration, iconName) => {
+    if (illustration != null)
+        return 'illustration';
+    if (iconName != null && isLucideIconName(iconName))
+        return 'icone';
+    return 'aucun';
+};
+export const EmptyStateMedia = ({ illustration, iconName }) => {
+    const styles = useStyles();
+    // La pastille se dessine des qu'un media est demande, meme si son nom d'icone ne mene nulle part.
+    if (!illustration && !iconName)
+        return null;
+    const media = mediaDEtatVide(illustration, iconName);
+    return (_jsxs(Box, { style: styles.media, children: [media === 'illustration' && illustration, media === 'icone' && iconName && _jsx(LucideIcon, { name: iconName, size: "lg", color: styles.media.color })] }));
+};

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

@@ -1 +1 @@
-{"version":3,"file":"FilterDate.d.ts","sourceRoot":"","sources":["../../../src/ui/FilterDate/FilterDate.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAO/C,MAAM,MAAM,eAAe,GAAG;IAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,MAAM,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AAEpE,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,sBAAsB;IACtB,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,mBAAmB;IACnB,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC;IACrB,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,MAAM,IAAI,MAAM,EAAE,EAAE,KAAK,IAAI,CAAC;CACpF,CAAC;AAgBF,eAAO,MAAM,qBAAqB,GAChC,QAAQ,eAAe,EACvB,MAAM,eAAe,CAAC,MAAM,CAAC,EAC7B,IAAI,eAAe,CAAC,IAAI,CAAC,KACxB,GAAG,MAAM,IAAI,MAAM,EAAE,EAevB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,sBAmIhD,CAAC"}
+{"version":3,"file":"FilterDate.d.ts","sourceRoot":"","sources":["../../../src/ui/FilterDate/FilterDate.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAO/C,MAAM,MAAM,eAAe,GAAG;IAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,MAAM,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AAEpE,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,sBAAsB;IACtB,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,mBAAmB;IACnB,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC;IACrB,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,MAAM,IAAI,MAAM,EAAE,EAAE,KAAK,IAAI,CAAC;CACpF,CAAC;AAgBF,eAAO,MAAM,qBAAqB,GAChC,QAAQ,eAAe,EACvB,MAAM,eAAe,CAAC,MAAM,CAAC,EAC7B,IAAI,eAAe,CAAC,IAAI,CAAC,KACxB,GAAG,MAAM,IAAI,MAAM,EAAE,EAevB,CAAC;AAuIF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,sBA+ChD,CAAC"}

package/dist/ui/FilterDate/FilterDate.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { format } from 'date-fns';
-import { enUS, fr } from 'date-fns/locale';
+import { format } from 'date-fns/format';
+import { enUS } from 'date-fns/locale/en-US';
+import { fr } from 'date-fns/locale/fr';
 import React from 'react';
 import { ScrollView } from 'react-native';
 import { Box } from '../../core/Box';
+import { Grid } from '../../core/Grid';
 import { Typography } from '../../core/Typography';
 import { BottomSheet } from '../BottomSheet';
 import { Button } from '../Button';
-import { Grid } from '../Grid';
 import { useStyles } from './FilterDate.styles';
 const capitalize = (value) => value.charAt(0).toUpperCase() + value.slice(1);
 const monthsFr = Array.from({ length: 12 }, (_, month) => ({
@@ -34,54 +35,69 @@ export const filerDateValueToDates = (values, from, to) => {
         return values.months.flatMap(m => yearsList.map(y => `${y}-${format(new Date(2026, m - 1, 1), 'MM')}`));
     return values.years.flatMap(y => values.months.map(m => `${y}-${format(new Date(2026, m - 1, 1), 'MM')}`));
 };
-export const FilterDate = (props) => {
-    const { title, local = 'fr', from, to, value, onChange } = props;
-    const actionLabel = local === 'fr' ? 'Effacer' : 'Clear';
-    const yearsLabel = local === 'fr' ? 'Années' : 'Years';
-    const monthsLabel = local === 'fr' ? 'Mois' : 'Months';
+// Les libelles n'existent qu'en deux jeux : les choisir un par un au fil du rendu laissait la
+// langue se decider a trois endroits differents.
+const libelles = (local) => local === 'fr'
+    ? { action: 'Effacer', annees: 'Années', mois: 'Mois', listeMois: monthsFr }
+    : { action: 'Clear', annees: 'Years', mois: 'Months', listeMois: monthsEn };
+const anneesEntre = (from, to) => {
     const fromYear = from === 'today' ? new Date().getFullYear() : from;
     const toYear = to === 'today' ? new Date().getFullYear() : to;
-    const yearsList = Array.from({ length: toYear - fromYear + 1 }, (_, i) => fromYear + i);
-    const monthsList = local === 'fr' ? monthsFr : monthsEn;
-    const [open, setOpen] = React.useState(false);
+    return Array.from({ length: toYear - fromYear + 1 }, (_, i) => fromYear + i);
+};
+// Annees et mois se selectionnent de la meme facon : on bascule une valeur dans une liste, puis
+// on republie les deux listes ensemble. Ecrit deux fois dans le composant, ce basculement en
+// faisait la moitie du corps sans rien devoir au rendu.
+const useSelectionPeriode = ({ value, from, to, onChange, }) => {
     const [years, setYears] = React.useState(value.years);
     const [months, setMonths] = React.useState(value.months);
-    const yearsScrollRef = React.useRef(null);
+    const publier = (nouvellesAnnees, nouveauxMois) => {
+        setYears(nouvellesAnnees);
+        setMonths(nouveauxMois);
+        onChange?.({ years: nouvellesAnnees, months: nouveauxMois }, filerDateValueToDates({ years: nouvellesAnnees, months: nouveauxMois }, from, to));
+    };
+    const basculer = (liste, valeur) => liste.includes(valeur) ? liste.filter(v => v !== valeur) : [...liste, valeur];
+    return {
+        years,
+        months,
+        vide: years.length === 0 && months.length === 0,
+        handleReset: () => publier([], []),
+        handlePressYear: (y) => publier(basculer(years, y), months),
+        handlePressMonth: (m) => publier(years, basculer(months, m)),
+    };
+};
+// La bande des annees defile horizontalement et doit toujours s'ouvrir sur l'annee la plus
+// recente : ce recalage a l'ouverture et au changement de contenu est le seul comportement
+// propre a cette section.
+const SectionAnnees = ({ titre, annees, selection, onPress, ouvert, }) => {
     const styles = useStyles();
-    const disabledReset = React.useMemo(() => years.length === 0 && months.length === 0, [months.length, years.length]);
-    const hasValues = React.useMemo(() => years.length > 0 || months.length > 0, [months.length, years.length]);
+    const yearsScrollRef = React.useRef(null);
     const scrollYearsToEnd = React.useCallback(() => {
         yearsScrollRef.current?.scrollToEnd({ animated: false });
     }, []);
     React.useEffect(() => {
-        if (open) {
+        if (ouvert) {
             requestAnimationFrame(scrollYearsToEnd);
         }
-    }, [open, scrollYearsToEnd]);
-    const handleReset = React.useCallback(() => {
-        setYears([]);
-        setMonths([]);
-        onChange?.({ years: [], months: [] }, []);
-    }, [onChange]);
-    const handlePressYear = React.useCallback((y) => {
-        let newYears = years;
-        if (newYears.includes(y))
-            newYears = newYears.filter(v => v !== y);
-        else
-            newYears = [...newYears, y];
-        setYears(newYears);
-        onChange?.({ years: newYears, months }, filerDateValueToDates({ years: newYears, months }, from, to));
-    }, [from, months, onChange, to, years]);
-    const handlePressMonth = React.useCallback((m) => {
-        let newMonths = months;
-        if (newMonths.includes(m))
-            newMonths = newMonths.filter(v => v !== m);
-        else
-            newMonths = [...newMonths, m];
-        setMonths(newMonths);
-        onChange?.({ years, months: newMonths }, filerDateValueToDates({ years, months: newMonths }, from, to));
-    }, [from, months, onChange, to, years]);
-    return (_jsxs(React.Fragment, { children: [_jsx(Button, { variant: "secondary", title: title, endIcon: "ChevronDown", size: "sm", selected: hasValues, active: open, onPress: () => setOpen(true) }), _jsx(BottomSheet, { fitContent: true, title: title, open: open, setOpen: setOpen, action: _jsx(Button, { title: actionLabel, variant: "tertiary", size: "sm", disabled: disabledReset, onPress: handleReset }), children: _jsxs(Box, { style: styles.container, children: [_jsxs(Box, { style: styles.partContainer, children: [_jsx(Typography, { style: styles.partTitle, children: yearsLabel }), _jsx(ScrollView, { ref: yearsScrollRef, horizontal: true, nestedScrollEnabled: true, showsHorizontalScrollIndicator: false, style: [styles.filtersHorizontalScroll, { width: '100%' }], contentContainerStyle: styles.filtersScroll, onContentSizeChange: scrollYearsToEnd, children: yearsList.map(y => (_jsx(Box, { children: _jsx(FilterDateButton, { type: "year", title: y, selected: years.includes(y), onPress: () => handlePressYear(y) }) }, `year--${y}`))) })] }), _jsxs(Box, { style: styles.partContainer, children: [_jsx(Typography, { style: styles.partTitle, children: monthsLabel }), _jsx(Grid, { gap: '1W', pl: '2W', pr: '2W', children: monthsList.map(m => (_jsx(Grid.Column, { size: 4, children: _jsx(FilterDateButton, { type: "month", title: m.label, selected: months.includes(m.value), onPress: () => handlePressMonth(m.value) }) }, `month--${m.value}`))) })] })] }) })] }));
+    }, [ouvert, scrollYearsToEnd]);
+    return (_jsxs(Box, { style: styles.partContainer, children: [_jsx(Typography, { style: styles.partTitle, children: titre }), _jsx(ScrollView, { ref: yearsScrollRef, horizontal: true, nestedScrollEnabled: true, showsHorizontalScrollIndicator: false, style: [styles.filtersHorizontalScroll, { width: '100%' }], contentContainerStyle: styles.filtersScroll, onContentSizeChange: scrollYearsToEnd, children: annees.map(y => (_jsx(Box, { children: _jsx(FilterDateButton, { type: "year", title: y, selected: selection.includes(y), onPress: () => onPress(y) }) }, `year--${y}`))) })] }));
+};
+const SectionMois = ({ titre, mois, selection, onPress, }) => {
+    const styles = useStyles();
+    return (_jsxs(Box, { style: styles.partContainer, children: [_jsx(Typography, { style: styles.partTitle, children: titre }), _jsx(Grid, { gap: '1W', pl: '2W', pr: '2W', children: mois.map(m => (_jsx(Grid.Column, { size: 4, children: _jsx(FilterDateButton, { type: "month", title: m.label, selected: selection.includes(m.value), onPress: () => onPress(m.value) }) }, `month--${m.value}`))) })] }));
+};
+export const FilterDate = (props) => {
+    const { title, local = 'fr', from, to, value, onChange } = props;
+    const styles = useStyles();
+    const mots = libelles(local);
+    const [open, setOpen] = React.useState(false);
+    const { years, months, vide, handleReset, handlePressYear, handlePressMonth } = useSelectionPeriode({
+        value,
+        from,
+        to,
+        onChange,
+    });
+    return (_jsxs(React.Fragment, { children: [_jsx(Button, { variant: "secondary", title: title, trailing: "ChevronDown", size: "sm", selected: !vide, expanded: open, onPress: () => setOpen(true) }), _jsx(BottomSheet, { fitContent: true, title: title, open: open, setOpen: setOpen, action: _jsx(Button, { title: mots.action, variant: "tertiary", size: "sm", disabled: vide, onPress: handleReset }), children: _jsxs(Box, { style: styles.container, children: [_jsx(SectionAnnees, { titre: mots.annees, annees: anneesEntre(from, to), selection: years, onPress: handlePressYear, ouvert: open }), _jsx(SectionMois, { titre: mots.mois, mois: mots.listeMois, selection: months, onPress: handlePressMonth })] }) })] }));
 };
 const FilterDateButton = (props) => {
     const { title, type, selected, onPress } = props;

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

@@ -4,7 +4,7 @@ declare const _default: {
     tags: "ui"[];
     experimental: false;
     description: string;
-    component: (props: import("@alveole/components").FilterDateProps) => React.JSX.Element;
+    component: (props: import("./FilterDate").FilterDateProps) => React.JSX.Element;
     styleFn: () => {
         container: {
             display: "flex";

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

@@ -1 +1 @@
-{"version":3,"file":"FilterDate.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/FilterDate/FilterDate.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI1B,wBAOkB;AAElB,eAAO,MAAM,OAAO,yBAQnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"FilterDate.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/FilterDate/FilterDate.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM1B,wBAOkB;AAElB,eAAO,MAAM,OAAO,yBAQnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}

package/dist/ui/FilterDate/FilterDate.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@alveole/components';
 import React from 'react';
+import { Box } from '../../core/Box';
 import { FilterDate } from './FilterDate';
 import { useStyles } from './FilterDate.styles';
 export default {

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { FormControlCaptionProps } from './FormControlCaption';
+import { TextInputProps } from './TextInput';
+export type ChampHHMMProps = FormControlCaptionProps & {
+    value?: string;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+};
+type ChampHHMMConfig = {
+    formater: (chiffres: string) => string;
+    clavier: Pick<TextInputProps, 'inputMode' | 'keyboardType'>;
+};
+/** Un champ HH:MM saisi au clavier. Seuls la mise en forme et le clavier changent d'un usage a l'autre. */
+export declare const ChampHHMM: React.ForwardRefExoticComponent<FormControlCaptionProps & {
+    value?: string;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+} & ChampHHMMConfig & React.RefAttributes<import("react-native").TextInput>>;
+export {};
+//# sourceMappingURL=ChampHHMM.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChampHHMM.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/ChampHHMM.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAA+B,cAAc,EAAE,MAAM,aAAa,CAAC;AAG1E,MAAM,MAAM,cAAc,GAAG,uBAAuB,GAAG;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,cAAc,CAAC,CAAC;CAC7D,CAAC;AAEF,2GAA2G;AAC3G,eAAO,MAAM,SAAS;YAZZ,MAAM;eACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;aACzB,MAAM,IAAI;eACR,OAAO;4EA6BlB,CAAC"}

package/dist/ui/FormControl/ChampHHMM.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { TextInput } from './TextInput';
+import { useSaisieHHMM } from './useSaisieHHMM';
+/** Un champ HH:MM saisi au clavier. Seuls la mise en forme et le clavier changent d'un usage a l'autre. */
+export const ChampHHMM = React.forwardRef(function ChampHHMM({ error, success, value, onChange, onBlur, disabled, formater, clavier }, ref) {
+    const { localValue, handleChangeText, handleBlur } = useSaisieHHMM({ value, onChange, onBlur, formater });
+    return (_jsx(TextInput, { ref: ref, placeholder: "HH:MM", value: localValue, onChangeText: handleChangeText, onBlur: handleBlur, disabled: disabled, error: error, success: success, maxLength: 5, ...clavier }));
+});

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

@@ -0,0 +1,14 @@
+import React from 'react';
+type FieldContextValue = {
+    fieldId?: string;
+    label?: string;
+    disabled?: boolean;
+    required?: boolean;
+};
+export declare const useFieldId: () => string | undefined;
+export declare const useFieldDisabled: (ownDisabled?: boolean) => boolean | undefined;
+export declare const useFieldLabel: () => string | undefined;
+export declare const useFieldRequired: () => boolean | undefined;
+export declare const FieldIdProvider: ({ children, label, disabled, required, }: React.PropsWithChildren<Omit<FieldContextValue, "fieldId">>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=FieldId.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldId.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FieldId.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,KAAK,iBAAiB,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAItG,eAAO,MAAM,UAAU,0BAA+C,CAAC;AAGvE,eAAO,MAAM,gBAAgB,GAAI,cAAc,OAAO,wBAIrD,CAAC;AAEF,eAAO,MAAM,aAAa,0BAA6C,CAAC;AAExE,eAAO,MAAM,gBAAgB,2BAAgD,CAAC;AAE9E,eAAO,MAAM,eAAe,GAAI,0CAK7B,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,sBAI7D,CAAC"}

package/dist/ui/FormControl/FieldId.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+const FieldContext = React.createContext({});
+export const useFieldId = () => React.useContext(FieldContext).fieldId;
+// Posée sur le contrôle lui-même, la désactivation l'emporte sur celle de l'enveloppe.
+export const useFieldDisabled = (ownDisabled) => {
+    const { disabled } = React.useContext(FieldContext);
+    return ownDisabled ?? disabled;
+};
+export const useFieldLabel = () => React.useContext(FieldContext).label;
+export const useFieldRequired = () => React.useContext(FieldContext).required;
+export const FieldIdProvider = ({ children, label, disabled, required, }) => {
+    const fieldId = React.useId();
+    return _jsx(FieldContext.Provider, { value: { fieldId, label, disabled, required }, children: children });
+};

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

@@ -0,0 +1,22 @@
+import * as DocumentPicker from 'expo-document-picker';
+import React from 'react';
+export type FileInputValue = DocumentPicker.DocumentPickerAsset | DocumentPicker.DocumentPickerAsset[] | null;
+export type FileInputProps = {
+    value: FileInputValue;
+    previewURL?: string;
+    placeholder?: string;
+    forcePlaceholder?: boolean;
+    hideButton?: boolean;
+    hideFilename?: boolean;
+    canChange?: boolean;
+    disabled?: boolean;
+    type?: DocumentPicker.DocumentPickerOptions['type'];
+    multiple?: boolean;
+    onChange: (value: FileInputValue) => void;
+    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;
+//# sourceMappingURL=FileInput.d.ts.map

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

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

package/dist/ui/FormControl/{FormControlFileInput.js → FileInput.js}

@@ -2,25 +2,35 @@ 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 { Box, Typography } from '../../core';
-import { useStyles } from './FormControlFileInput.styles';
-export const FormControlFileInput = (props) => {
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+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;
+};
+export const FileInput = (props) => {
     const { value, disabled, onChange, onPickStart, placeholder = 'Aucun fichier choisi.', type, forcePlaceholder, reopen = false, multiple = false, hideButton = false, } = props;
     const styles = useStyles();
-    const displayValue = React.useMemo(() => {
-        if (value == null || forcePlaceholder)
-            return placeholder;
-        if (Array.isArray(value)) {
-            if (value.length === 0)
-                return placeholder;
-            if (value.length === 1)
-                return value[0].name ?? '1 fichier';
-            return `${value.length} fichiers`;
-        }
-        if (value.name)
-            return value.name;
-        return '1 fichier';
-    }, [placeholder, value, forcePlaceholder]);
+    const displayValue = nomAffiche(value, placeholder, forcePlaceholder);
     const isPickingRef = React.useRef(false);
     const handlePickFile = React.useCallback(async () => {
         if (isPickingRef.current)
@@ -30,19 +40,8 @@ export const FormControlFileInput = (props) => {
             return;
         isPickingRef.current = true;
         try {
-            const result = await DocumentPicker.getDocumentAsync({
-                copyToCacheDirectory: true,
-                multiple: multiple ?? false,
-                type: type,
-            });
-            if (multiple) {
-                const newValue = result.assets && result.assets.length > 0 ? result.assets : null;
-                onChange?.(newValue);
-            }
-            else {
-                const newValue = result.assets?.[0] ?? null;
-                onChange?.(newValue);
-            }
+            const result = await DocumentPicker.getDocumentAsync({ copyToCacheDirectory: true, multiple, type });
+            valideLeType({ type, onChange })(choisis(result.assets, multiple));
         }
         finally {
             isPickingRef.current = false;
@@ -54,7 +53,7 @@ export const FormControlFileInput = (props) => {
     }, [reopen, handlePickFile]);
     if (hideButton)
         return null;
-    return (_jsx(Pressable, { onPress: handlePickFile, children: _jsxs(Box, { tag: "form-control-file-input-inner", style: {
+    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,