@alveole/components 1.10.0 → 2.0.0-alpha

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

@@ -1,17 +1,35 @@
+import { type Radius } from '@alveole/theme';
 export declare const useStyles: () => {
     tagContainer: {
         display: "block";
+        minWidth: number;
+        maxWidth: string;
     };
-    tag: {
-        borderRadius: import("@alveole/theme").Radius;
+    zoneDeSurvol: {
+        cursor: "auto";
+    };
+    pastilleFermable: {
+        paddingRight: number;
     };
-    tagDefault: {
+    tag: {
+        display: "inline-flex";
+        alignItems: "center";
+        borderRadius: Radius;
+        borderWidth: number;
+        borderColor: string;
         color: string;
         backgroundColor: string;
+        whiteSpace: "nowrap";
+        overflow: "hidden";
+        textOverflow: "ellipsis";
+        maxWidth: string;
     };
-    tagAction: {
+    tagSurvole: {
+        color: string;
+    };
+    tagSelected: {
+        borderColor: string;
         color: string;
-        backgroundColor: string;
     };
     tagSm: {
         fontSize: 12;
@@ -19,10 +37,9 @@ export declare const useStyles: () => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        paddingLeft: string | number;
-        paddingRight: string | number;
-        paddingTop: number;
-        paddingBottom: number;
+        height: number;
+        paddingLeft: number;
+        paddingRight: number;
     };
     tagMd: {
         fontSize: 14;
@@ -30,10 +47,38 @@ export declare const useStyles: () => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        paddingLeft: string | number;
-        paddingRight: string | number;
-        paddingTop: string | number;
-        paddingBottom: string | number;
+        height: number;
+        paddingLeft: number;
+        paddingRight: number;
+    };
+    iconeSm: {
+        marginRight: number;
+    };
+    iconeMd: {
+        marginRight: number;
+    };
+    croixSurvolee: {
+        backgroundColor: string;
+    };
+    croixSm: {
+        marginLeft: number;
+        alignItems: "center";
+        justifyContent: "center";
+        cursor: "pointer";
+        transform: string;
+        borderRadius: Radius;
+        width: number;
+        height: number;
+    };
+    croixMd: {
+        marginLeft: number;
+        alignItems: "center";
+        justifyContent: "center";
+        cursor: "pointer";
+        transform: string;
+        borderRadius: Radius;
+        width: number;
+        height: number;
     };
 };
 //# sourceMappingURL=Tag.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCnB,CAAC"}
+{"version":3,"file":"Tag.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAmBzD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFnB,CAAC"}

package/dist/ui/Tag/Tag.styles.js

@@ -1,33 +1,96 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ radius, text, color, spacing }) => ({
+// La croix ne bouge jamais entre ses etats : son icone est centree sur les deux axes, et
+// seul le fond du cercle change au survol. Des retraits calcules par etat la feraient
+// sautiller d'un pixel des que le pointeur l'atteint.
+const cercleDeLaCroix = (cote, rayon, ecart) => ({
+    marginLeft: ecart,
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+    // La croix vit dans la boite de contenu, donc a l'epaisseur de la bordure du bord
+    // exterieur. On la ramene a fleur, comme le `translate(borderOffset, -borderOffset)` du
+    // bouton de suppression de Primer. Un `transform` n'entre pas dans le calcul de largeur.
+    transform: 'translateX(1px)',
+    borderRadius: rayon,
+    width: cote,
+    height: cote,
+});
+export const useStyles = makeStyles(({ radius, text, color, pill }) => ({
     tagContainer: {
         display: 'block',
+        // Sans largeur minimale nulle, un element flex refuse de retrecir sous la taille de son
+        // contenu et l'ellipse du libelle ne se declenche jamais. Primer pose la meme chose sur
+        // son conteneur de texte.
+        minWidth: 0,
+        maxWidth: '100%',
+    },
+    // `Pressable` de react-native-web pose `cursor: pointer` sur ce qu'il enveloppe. Ce
+    // conteneur-ci ne sert qu'a capter le pointeur, l'etiquette n'est jamais cliquable :
+    // le curseur revient a celui du texte, comme le `cursor: auto` d'un token Primer non
+    // actionnable.
+    zoneDeSurvol: {
+        cursor: 'auto',
+    },
+    // La croix faisant toute la hauteur, un retrait a sa droite la repousserait vers
+    // l'interieur et desequilibrerait la pastille. Primer fait de meme.
+    pastilleFermable: {
+        paddingRight: 0,
     },
     tag: {
+        display: 'inline-flex',
+        alignItems: 'center',
         borderRadius: radius('full'),
-    },
-    // Colors
-    tagDefault: {
-        color: color.light.text['label-grey'],
+        borderWidth: 1,
+        borderColor: color.light.border['default-grey'],
+        color: color.light.text['mention-grey'],
         backgroundColor: color.light.background['contrast-grey'],
+        // Une etiquette ne se plie pas sur deux lignes : elle se laisse couper. Primer pose
+        // `white-space: nowrap` sur la pastille, `max-width: 100%` et une ellipse sur son
+        // conteneur de texte. Un libelle long deformerait sinon la rangee qui la porte.
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        maxWidth: '100%',
+    },
+    // Le survol seul fonce le libelle sans toucher la bordure : c'est la selection qui
+    // apporte le contraste de bordure, et le survol d'une pastille deja selectionnee
+    // n'ajoute donc rien (ADR 0020).
+    tagSurvole: {
+        color: color.light.text['default-grey'],
     },
-    tagAction: {
-        color: color.light.text['label-grey'],
-        backgroundColor: color.light.background['action-low-primary'],
+    tagSelected: {
+        borderColor: color.light.border['contrast-grey'],
+        color: color.light.text['default-grey'],
     },
-    // Sizes
+    // Crans de taille.
+    // Aucun retrait vertical : la hauteur est fixee et le libelle centre par `alignItems`.
+    // Un padding vertical en plus ne ferait que rouvrir la porte a une hauteur implicite.
     tagSm: {
-        paddingLeft: spacing('1W'),
-        paddingRight: spacing('1W'),
-        paddingTop: 0,
-        paddingBottom: 0,
+        height: pill('sm').height,
+        paddingLeft: pill('sm').paddingInline,
+        paddingRight: pill('sm').paddingInline,
         ...text['Corps de texte'].XS.Bold,
     },
     tagMd: {
-        paddingLeft: spacing('3V'),
-        paddingRight: spacing('3V'),
-        paddingTop: spacing('1V'),
-        paddingBottom: spacing('1V'),
+        height: pill('md').height,
+        paddingLeft: pill('md').paddingInline,
+        paddingRight: pill('md').paddingInline,
         ...text['Corps de texte'].SM.Bold,
     },
+    // L'icone precede le libelle. L'ecart vit sur l'icone et non sur le texte : sans icone,
+    // aucun espace parasite ne subsiste devant le libelle. Primer le porte de 4 a 6 px sur son
+    // grand cran, notre md valant son large.
+    iconeSm: {
+        marginRight: 4,
+    },
+    iconeMd: {
+        marginRight: 6,
+    },
+    croixSurvolee: {
+        backgroundColor: color.light.background['transparent-hover'],
+    },
+    // La croix fait toute la hauteur de la pastille, comme chez Primer : son fond de survol
+    // touche les bords au lieu de flotter, et la cible cliquable est la plus large possible.
+    croixSm: cercleDeLaCroix(pill('sm').height, radius('full'), 4),
+    croixMd: cercleDeLaCroix(pill('md').height, radius('full'), 6),
 }));

package/dist/ui/Tag/TagClose.d.ts

@@ -0,0 +1,22 @@
+import { TailleDEtiquette } from './tagStyling';
+export type TagCloseProps = {
+    size: TailleDEtiquette;
+    /** Le libelle que la croix retire, quand c'est du texte annoncable. */
+    libelle?: string;
+    /** L'etiquette est survolee ou selectionnee : la croix suit et passe au gris sombre. */
+    fonce: boolean;
+    /**
+     * La croix prend et rend le survol a l'etiquette. React-native-web retire le survol du
+     * `Pressable` parent des que le pointeur entre dans celui-ci : sans ce relais, passer du
+     * libelle a la croix eclaircirait l'etiquette au moment ou l'on s'apprete a la fermer.
+     */
+    onSurvol: (survolee: boolean) => void;
+    onClose?: () => void;
+};
+/**
+ * La croix de suppression d'une etiquette. Sous-composant a part entiere et non quelques
+ * lignes dans `Tag` : c'est la seule zone interactive de l'etiquette, elle a son propre
+ * survol, son propre gabarit par taille et ses propres obligations d'accessibilite.
+ */
+export declare const TagClose: ({ size, libelle, fonce, onSurvol, onClose }: TagCloseProps) => import("react").JSX.Element;
+//# sourceMappingURL=TagClose.d.ts.map

package/dist/ui/Tag/TagClose.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagClose.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/TagClose.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAgD,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAE9F,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,gBAAgB,CAAC;IACvB,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wFAAwF;IACxF,KAAK,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,6CAA6C,aAAa,gCAmBlF,CAAC"}

package/dist/ui/Tag/TagClose.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pressable } from 'react-native';
+import { LucideIcon } from '../LucideIcon';
+import { useStyles } from './Tag.styles';
+import { apparenceDeLaCroix, apparenceDeLIconeDeCroix } from './tagStyling';
+/**
+ * La croix de suppression d'une etiquette. Sous-composant a part entiere et non quelques
+ * lignes dans `Tag` : c'est la seule zone interactive de l'etiquette, elle a son propre
+ * survol, son propre gabarit par taille et ses propres obligations d'accessibilite.
+ */
+export const TagClose = ({ size, libelle, fonce, onSurvol, onClose }) => {
+    const styles = useStyles();
+    return (_jsx(Pressable, { accessibilityRole: "button", 
+        // Nommer ce qu'on retire plutot que « retirer un truc » : dans une liste de valeurs
+        // selectionnees, un nom generique fait annoncer six fois la meme chose.
+        accessibilityLabel: libelle ? `Retirer ${libelle}` : "Retirer l'étiquette", onPress: onClose, onHoverIn: () => onSurvol(true), onHoverOut: () => onSurvol(false), style: (state) => apparenceDeLaCroix(styles, size, !!state.hovered), children: _jsx(LucideIcon, { name: "X", ...apparenceDeLIconeDeCroix(styles, size, fonce) }) }));
+};

package/dist/ui/Tag/tagStyling.d.ts

@@ -0,0 +1,58 @@
+import { CSSProperties } from 'react';
+import { useStyles } from './Tag.styles';
+type Styles = ReturnType<typeof useStyles>;
+/** Les deux crans de l'etiquette : notre sm vaut le medium de Primer, notre md son large. */
+export type TailleDEtiquette = 'sm' | 'md';
+export type EtatDeLEtiquette = {
+    size: TailleDEtiquette;
+    /** Le pointeur est sur l'etiquette ou sur sa croix, et l'etiquette se manipule. */
+    survolee: boolean;
+    selectionnee: boolean;
+    fermable: boolean;
+};
+/**
+ * L'apparence de la pastille, empilee dans l'ordre ou les etats se recouvrent : le cran de
+ * taille, puis le retrait que la croix supprime, puis le survol, puis la selection qui a le
+ * dernier mot. Sortie du rendu parce qu'elle porte la regle de l'ADR 0020 - quatre etats qui
+ * se combinent - et qu'une fonction nommee la rend lisible d'un coup d'oeil.
+ */
+export declare const apparenceDeLaPastille: (styles: Styles, etat: EtatDeLEtiquette) => CSSProperties;
+/** L'ecart entre l'icone de tete et le libelle, qui suit le cran comme chez Primer. */
+export declare const ecartDeLIcone: (styles: Styles, size: TailleDEtiquette) => {
+    marginRight: number;
+};
+export type PointeurSurLEtiquette = {
+    /** L'etiquette se ferme, ou se choisit dans un groupe (ADR 0019). */
+    manipulable: boolean;
+    pastilleSurvolee: boolean;
+    croixSurvolee: boolean;
+    selectionnee: boolean;
+};
+/**
+ * Ce que le pointeur change a l'etiquette. La croix relaie son propre survol : react-native-web
+ * retire le survol du `Pressable` parent des que le pointeur entre dans l'enfant, et sans ce
+ * relais passer du libelle a la croix eclaircirait l'etiquette.
+ */
+export declare const reponseAuPointeur: ({ manipulable, pastilleSurvolee, croixSurvolee, selectionnee, }: PointeurSurLEtiquette) => {
+    survolee: boolean;
+    fonce: boolean;
+};
+/** Le cercle de la croix : son gabarit suit le cran, seul son fond change au survol. */
+export declare const apparenceDeLaCroix: (styles: Styles, size: TailleDEtiquette, survolee: boolean) => {
+    backgroundColor?: string | undefined;
+    marginLeft: number;
+    alignItems: "center";
+    justifyContent: "center";
+    cursor: "pointer";
+    transform: string;
+    borderRadius: import("@alveole/theme").Radius;
+    width: number;
+    height: number;
+};
+/** L'icone de la croix grossit avec la pastille et prend la teinte du libelle. */
+export declare const apparenceDeLIconeDeCroix: (styles: Styles, size: TailleDEtiquette, fonce: boolean) => {
+    size: "sm" | "xs";
+    color: string;
+};
+export {};
+//# sourceMappingURL=tagStyling.d.ts.map

package/dist/ui/Tag/tagStyling.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tagStyling.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/tagStyling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAE3C,6FAA6F;AAC7F,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,gBAAgB,CAAC;IACvB,mFAAmF;IACnF,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,QAAQ,MAAM,EAAE,MAAM,gBAAgB,KAAG,aAM7E,CAAC;AAEH,uFAAuF;AACvF,eAAO,MAAM,aAAa,GAAI,QAAQ,MAAM,EAAE,MAAM,gBAAgB;;CACnB,CAAC;AAElD,MAAM,MAAM,qBAAqB,GAAG;IAClC,qEAAqE;IACrE,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,iEAK/B,qBAAqB;;;CAIvB,CAAC;AAEF,wFAAwF;AACxF,eAAO,MAAM,kBAAkB,GAAI,QAAQ,MAAM,EAAE,MAAM,gBAAgB,EAAE,UAAU,OAAO;;;;;;;;;;CAG1F,CAAC;AAEH,kFAAkF;AAClF,eAAO,MAAM,wBAAwB,GAAI,QAAQ,MAAM,EAAE,MAAM,gBAAgB,EAAE,OAAO,OAAO;;;CAG7F,CAAC"}

package/dist/ui/Tag/tagStyling.js

@@ -0,0 +1,34 @@
+/**
+ * L'apparence de la pastille, empilee dans l'ordre ou les etats se recouvrent : le cran de
+ * taille, puis le retrait que la croix supprime, puis le survol, puis la selection qui a le
+ * dernier mot. Sortie du rendu parce qu'elle porte la regle de l'ADR 0020 - quatre etats qui
+ * se combinent - et qu'une fonction nommee la rend lisible d'un coup d'oeil.
+ */
+export const apparenceDeLaPastille = (styles, etat) => ({
+    ...styles.tag,
+    ...(etat.size === 'sm' ? styles.tagSm : styles.tagMd),
+    ...(etat.fermable ? styles.pastilleFermable : {}),
+    ...(etat.survolee ? styles.tagSurvole : {}),
+    ...(etat.selectionnee ? styles.tagSelected : {}),
+});
+/** L'ecart entre l'icone de tete et le libelle, qui suit le cran comme chez Primer. */
+export const ecartDeLIcone = (styles, size) => size === 'sm' ? styles.iconeSm : styles.iconeMd;
+/**
+ * Ce que le pointeur change a l'etiquette. La croix relaie son propre survol : react-native-web
+ * retire le survol du `Pressable` parent des que le pointeur entre dans l'enfant, et sans ce
+ * relais passer du libelle a la croix eclaircirait l'etiquette.
+ */
+export const reponseAuPointeur = ({ manipulable, pastilleSurvolee, croixSurvolee, selectionnee, }) => {
+    const sousLePointeur = pastilleSurvolee || croixSurvolee;
+    return { survolee: manipulable && sousLePointeur, fonce: sousLePointeur || selectionnee };
+};
+/** Le cercle de la croix : son gabarit suit le cran, seul son fond change au survol. */
+export const apparenceDeLaCroix = (styles, size, survolee) => ({
+    ...(size === 'sm' ? styles.croixSm : styles.croixMd),
+    ...(survolee ? styles.croixSurvolee : {}),
+});
+/** L'icone de la croix grossit avec la pastille et prend la teinte du libelle. */
+export const apparenceDeLIconeDeCroix = (styles, size, fonce) => ({
+    size: size === 'sm' ? 'xs' : 'sm',
+    color: (fonce ? styles.tagSurvole : styles.tag).color,
+});

package/dist/ui/TextInputArray/TextInputArray.d.ts

@@ -1,8 +1,5 @@
-import React from 'react';
-export type TextInputArrayValue = {
-    value: string;
-    _original: string | null;
-};
+import { TextInputArrayValue } from './TextInputArray.liste';
+export type { TextInputArrayValue };
 export type TextInputArrayProps = {
     value?: TextInputArrayValue[];
     placeholder?: string;
@@ -17,5 +14,5 @@ export type TextInputArrayProps = {
     disabledDeleteForOriginals?: string[];
     onChange?: (value: TextInputArrayValue[]) => void;
 };
-export declare const TextInputArray: (props: TextInputArrayProps) => React.JSX.Element;
+export declare const TextInputArray: (props: TextInputArrayProps) => import("react").JSX.Element;
 //# sourceMappingURL=TextInputArray.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextInputArray.d.ts","sourceRoot":"","sources":["../../../src/ui/TextInputArray/TextInputArray.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAIrC,MAAM,MAAM,mBAAmB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC;AAE9E,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sDAAsD;IACtD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6DAA6D;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6EAA6E;IAC7E,0BAA0B,CAAC,EAAE,MAAM,EAAE,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAC;CACnD,CAAC;AAgCF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBA+ExD,CAAC"}
+{"version":3,"file":"TextInputArray.d.ts","sourceRoot":"","sources":["../../../src/ui/TextInputArray/TextInputArray.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAG7D,YAAY,EAAE,mBAAmB,EAAE,CAAC;AAEpC,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sDAAsD;IACtD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6DAA6D;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6EAA6E;IAC7E,0BAA0B,CAAC,EAAE,MAAM,EAAE,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,gCAgDxD,CAAC"}

package/dist/ui/TextInputArray/TextInputArray.js

@@ -1,53 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Button } from '@alveole/components';
-import React, { useId } from 'react';
+import { Box } from '../../core/Box';
+import { Button } from '../Button';
+import { TextInput } from '../FormControl';
 import { InputButtonAdornment } from '../InputButtonAdornment';
-import { TextField } from '../TextField';
-function normalizeOut(items, { trim = true, removeEmpty = true, dedupe = false }) {
-    let out = items.map(i => ({ value: trim ? i.value.trim() : i.value, _original: i._original }));
-    if (removeEmpty)
-        out = out.filter(v => v.value.trim().length > 0);
-    if (dedupe) {
-        const seen = new Set();
-        const uniq = [];
-        for (const v of out) {
-            if (seen.has(v.value))
-                continue;
-            seen.add(v.value);
-            uniq.push(v);
-        }
-        out = uniq;
-    }
-    return out;
-}
-function useTextFieldId(prefix) {
-    const n = React.useRef(0);
-    return React.useCallback(() => `${prefix}-${++n.current}`, [prefix]);
-}
+import { useTextInputArrayItems } from './useTextInputArrayItems';
 export const TextInputArray = (props) => {
     const { value = [], onChange, placeholder, removeEmpty = true, trim = true, dedupe = false, addTitle = 'Ajouter un élément', disabledDeleteForOriginals = [], } = props;
-    const reactId = useId();
-    const makeId = useTextFieldId(reactId);
-    const [items, setItems] = React.useState(() => (value.length ? value : []).map(v => ({ id: makeId(), ...v })));
-    const emit = React.useCallback((next) => {
-        setItems(next);
-        onChange?.(normalizeOut(next, { trim, removeEmpty, dedupe }));
-    }, [onChange, trim, removeEmpty, dedupe]);
-    const addItem = React.useCallback((atIndex) => {
-        const next = [...items];
-        const idx = typeof atIndex === 'number' ? Math.max(0, Math.min(atIndex + 1, next.length)) : next.length;
-        next.splice(idx, 0, { id: makeId(), value: '', _original: null });
-        emit(next);
-    }, [items, emit, makeId]);
-    const removeItem = React.useCallback((id) => {
-        const next = items.filter(it => it.id !== id);
-        if (next.length === 0)
-            next.push({ id: makeId(), value: '', _original: null });
-        emit(next);
-    }, [items, emit, makeId]);
-    const updateItem = React.useCallback((id, value) => {
-        const next = items.map(it => (it.id === id ? { ...it, value } : it));
-        emit(next);
-    }, [items, emit]);
-    return (_jsxs(Box, { tag: "text-input-array", children: [items.map(item => (_jsx(TextField, { label: "", placeholder: placeholder, type: "text", autoCapitalize: "words", value: item.value, onChangeText: (txt) => updateItem(item.id, txt), endAdornment: item._original != null && disabledDeleteForOriginals.includes(item._original) ? undefined : (_jsx(InputButtonAdornment, { icon: "X", position: "end", onPress: () => removeItem(item.id) })), onBlur: () => emit(items) }, item.id))), _jsx(Box, { display: "flex", flexDirection: "row", pt: '100', justify: 'flex-start', children: _jsx(Button, { variant: "tertiary", startIcon: "Plus", title: addTitle, onPress: () => addItem() }) })] }));
+    const { items, addItem, removeItem, updateItem, notifier } = useTextInputArrayItems({
+        valeurInitiale: value,
+        onChange,
+        trim,
+        removeEmpty,
+        dedupe,
+    });
+    return (_jsxs(Box, { tag: "text-input-array", children: [items.map((item, index) => (_jsx(TextInput, { placeholder: placeholder, autoCapitalize: "words", value: item.value, onChangeText: (txt) => updateItem(item.id, txt), endAdornment: item._original != null && disabledDeleteForOriginals.includes(item._original) ? undefined : (_jsx(InputButtonAdornment, { icon: "X", position: "end", accessibilityLabel: `Retirer la ligne ${index + 1}`, onPress: () => removeItem(item.id) })), onBlur: notifier }, item.id))), _jsx(Box, { display: "flex", flexDirection: "row", pt: '100', justify: 'flex-start', children: _jsx(Button, { variant: "tertiary", leading: "Plus", title: addTitle, onPress: () => addItem() }) })] }));
 };

package/dist/ui/TextInputArray/TextInputArray.liste.d.ts

@@ -0,0 +1,17 @@
+export type TextInputArrayValue = {
+    value: string;
+    _original: string | null;
+};
+export type Item = TextInputArrayValue & {
+    id: string;
+};
+export type OptionsDeSortie = {
+    trim?: boolean;
+    removeEmpty?: boolean;
+    dedupe?: boolean;
+};
+export declare const insereUnElement: (items: Item[], creeId: () => string, apresLIndex?: number) => Item[];
+export declare const retireUnElement: (items: Item[], id: string, creeId: () => string) => Item[];
+export declare const metAJourUnElement: (items: Item[], id: string, value: string) => Item[];
+export declare function normalizeOut(items: Item[], { trim, removeEmpty, dedupe }: OptionsDeSortie): TextInputArrayValue[];
+//# sourceMappingURL=TextInputArray.liste.d.ts.map

package/dist/ui/TextInputArray/TextInputArray.liste.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInputArray.liste.d.ts","sourceRoot":"","sources":["../../../src/ui/TextInputArray/TextInputArray.liste.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC;AAI9E,MAAM,MAAM,IAAI,GAAG,mBAAmB,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAExD,MAAM,MAAM,eAAe,GAAG;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAM1F,eAAO,MAAM,eAAe,GAAI,OAAO,IAAI,EAAE,EAAE,QAAQ,MAAM,MAAM,EAAE,cAAc,MAAM,KAAG,IAAI,EAO/F,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,IAAI,EAAE,EAAE,IAAI,MAAM,EAAE,QAAQ,MAAM,MAAM,KAAG,IAAI,EAIrF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,IAAI,EAAE,EAAE,IAAI,MAAM,EAAE,OAAO,MAAM,KAAG,IAAI,EAChB,CAAC;AAgBlE,wBAAgB,YAAY,CAC1B,KAAK,EAAE,IAAI,EAAE,EACb,EAAE,IAAW,EAAE,WAAkB,EAAE,MAAc,EAAE,EAAE,eAAe,GACnE,mBAAmB,EAAE,CAQvB"}

package/dist/ui/TextInputArray/TextInputArray.liste.js

@@ -0,0 +1,34 @@
+// Une ligne vierge n'a pas de valeur d'origine : elle ne vient pas de la donnee chargee, donc
+// rien ne peut en interdire la suppression.
+const ligneVierge = (creeId) => ({ id: creeId(), value: '', _original: null });
+export const insereUnElement = (items, creeId, apresLIndex) => {
+    const position = typeof apresLIndex === 'number' ? Math.max(0, Math.min(apresLIndex + 1, items.length)) : items.length;
+    const suivants = [...items];
+    suivants.splice(position, 0, ligneVierge(creeId));
+    return suivants;
+};
+export const retireUnElement = (items, id, creeId) => {
+    const restants = items.filter(item => item.id !== id);
+    return restants.length ? restants : [ligneVierge(creeId)];
+};
+export const metAJourUnElement = (items, id, value) => items.map(item => (item.id === id ? { ...item, value } : item));
+/** Les valeurs dans leur ordre d'arrivee, la premiere occurrence de chacune seulement. */
+const sansDoublons = (valeurs) => {
+    const vues = new Set();
+    return valeurs.filter(({ value }) => {
+        if (vues.has(value))
+            return false;
+        vues.add(value);
+        return true;
+    });
+};
+// Ce que voit l'appelant n'est pas ce qu'affiche le champ : les identifiants internes tombent,
+// et les lignes vides, les espaces de bord et les doublons se nettoient a la sortie.
+export function normalizeOut(items, { trim = true, removeEmpty = true, dedupe = false }) {
+    let out = items.map(i => ({ value: trim ? i.value.trim() : i.value, _original: i._original }));
+    if (removeEmpty)
+        out = out.filter(v => v.value.trim().length > 0);
+    if (dedupe)
+        out = sansDoublons(out);
+    return out;
+}

package/dist/ui/TextInputArray/TextInputArray.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
 import { TextInputArray } from './TextInputArray';
 export default {
     title: 'TextInputArray',

package/dist/ui/TextInputArray/useTextInputArrayItems.d.ts

@@ -0,0 +1,14 @@
+import { Item, OptionsDeSortie, TextInputArrayValue } from './TextInputArray.liste';
+type Parametres = OptionsDeSortie & {
+    valeurInitiale: TextInputArrayValue[];
+    onChange?: (value: TextInputArrayValue[]) => void;
+};
+export declare const useTextInputArrayItems: ({ valeurInitiale, onChange, trim, removeEmpty, dedupe }: Parametres) => {
+    items: Item[];
+    addItem: (atIndex?: number) => void;
+    removeItem: (id: string) => void;
+    updateItem: (id: string, value: string) => void;
+    notifier: () => void;
+};
+export {};
+//# sourceMappingURL=useTextInputArrayItems.d.ts.map

package/dist/ui/TextInputArray/useTextInputArrayItems.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTextInputArrayItems.d.ts","sourceRoot":"","sources":["../../../src/ui/TextInputArray/useTextInputArrayItems.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,IAAI,EAGJ,eAAe,EAEf,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAShC,KAAK,UAAU,GAAG,eAAe,GAAG;IAClC,cAAc,EAAE,mBAAmB,EAAE,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAC;CACnD,CAAC;AAIF,eAAO,MAAM,sBAAsB,GAAI,yDAAyD,UAAU;;wBAa3F,MAAM;qBAIuB,MAAM;qBAGzC,MAAM,SAAS,MAAM;;CAK7B,CAAC"}

package/dist/ui/TextInputArray/useTextInputArrayItems.js

@@ -0,0 +1,22 @@
+import React, { useId } from 'react';
+import { insereUnElement, metAJourUnElement, normalizeOut, retireUnElement, } from './TextInputArray.liste';
+// `useId` ne donne qu'un identifiant par composant : les lignes en derivent le leur par un
+// compteur, pour rester uniques entre plusieurs champs montes sur la meme page.
+function useTextFieldId(prefix) {
+    const n = React.useRef(0);
+    return React.useCallback(() => `${prefix}-${++n.current}`, [prefix]);
+}
+// Le composant n'avait plus qu'a lire : la liste, ses trois mutations et la notification de
+// sortie vivent ici, et les regles elles-memes sont dans `TextInputArray.liste`.
+export const useTextInputArrayItems = ({ valeurInitiale, onChange, trim, removeEmpty, dedupe }) => {
+    const creeId = useTextFieldId(useId());
+    const [items, setItems] = React.useState(() => valeurInitiale.map(v => ({ id: creeId(), ...v })));
+    const emit = React.useCallback((next) => {
+        setItems(next);
+        onChange?.(normalizeOut(next, { trim, removeEmpty, dedupe }));
+    }, [onChange, trim, removeEmpty, dedupe]);
+    const addItem = React.useCallback((atIndex) => emit(insereUnElement(items, creeId, atIndex)), [items, emit, creeId]);
+    const removeItem = React.useCallback((id) => emit(retireUnElement(items, id, creeId)), [items, emit, creeId]);
+    const updateItem = React.useCallback((id, value) => emit(metAJourUnElement(items, id, value)), [items, emit]);
+    return { items, addItem, removeItem, updateItem, notifier: () => emit(items) };
+};

package/dist/ui/TextareaInput/TextareaInput.d.ts

@@ -1,25 +1,19 @@
 import React from 'react';
-import { TextFieldProps } from '../TextField';
-export type TextareaInputProps = TextFieldProps & {
+import { TextInputProps } from '../FormControl';
+export type TextareaInputProps = TextInputProps & {
     numberOfLines?: number;
     onModalSubmit?: () => void;
 };
 export declare const TextareaInput: 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;
-} & {
-    label: string;
-    labelRight?: React.ReactNode;
-    optional?: boolean;
-    optionalText?: string;
-    disabled?: boolean;
-} & import("@alveole/components").FormControlCaptionProps & import("@alveole/components").FormControlHintProps & {
-    type?: "text" | "hidden";
-    onChange?: import("@alveole/components").TextInputProps["onChangeText"];
 } & {
     numberOfLines?: number;
     onModalSubmit?: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"TextareaInput.d.ts","sourceRoot":"","sources":["../../../src/ui/TextareaInput/TextareaInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAa,cAAc,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;oBAJR,MAAM;oBACN,MAAM,IAAI;0DAoB3B,CAAC"}
+{"version":3,"file":"TextareaInput.d.ts","sourceRoot":"","sources":["../../../src/ui/TextareaInput/TextareaInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+B,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAK7E,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;oBAJR,MAAM;oBACN,MAAM,IAAI;0DAkB1B,CAAC"}

package/dist/ui/TextareaInput/TextareaInput.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TextInput } from '@alveole/components';
 import React from 'react';
+import { TextInput } from '../FormControl';
 export const TextareaInput = React.forwardRef(function TextareaInput(props, ref) {
     const { numberOfLines = 5, multiline = true, onModalSubmit, onFocus, openModal, modalSubmitLabel, ...rest } = props;
     return (_jsx(TextInput, { ref: ref, multiline: multiline, numberOfLines: numberOfLines, ...rest, openModal: openModal ?? true, modalSubmitLabel: modalSubmitLabel ?? 'Valider', onModalSubmit: onModalSubmit, onFocus: onFocus }));

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

@@ -4,21 +4,15 @@ declare const _default: {
     experimental: false;
     description: string;
     component: import("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;
-    } & {
-        label: string;
-        labelRight?: React.ReactNode;
-        optional?: boolean;
-        optionalText?: string;
-        disabled?: boolean;
-    } & import("..").FormControlCaptionProps & import("..").FormControlHintProps & {
-        type?: "text" | "hidden";
-        onChange?: import("..").TextInputProps["onChangeText"];
     } & {
         numberOfLines?: number;
         onModalSubmit?: () => void;