@cyrilld/zestds 0.1.0 → 1.0.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { SVGProps } from 'react';
+import { SVGProps, ButtonHTMLAttributes, ReactNode, HTMLAttributes, MouseEvent, ReactElement, InputHTMLAttributes } from 'react';
 
 declare const Home01: {
     (props: SVGProps<SVGSVGElement>): react.JSX.Element;
@@ -409,6 +409,14 @@ declare const Inbox01: {
     (props: SVGProps<SVGSVGElement>): react.JSX.Element;
     displayName: string;
 };
+declare const MessageAlertSquare01: {
+    (props: SVGProps<SVGSVGElement>): react.JSX.Element;
+    displayName: string;
+};
+declare const MessageAlertSquare02: {
+    (props: SVGProps<SVGSVGElement>): react.JSX.Element;
+    displayName: string;
+};
 declare const Circle: {
     (props: SVGProps<SVGSVGElement>): react.JSX.Element;
     displayName: string;
@@ -486,6 +494,659 @@ declare const ChevronUp: {
     displayName: string;
 };
 
+type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * Les onze hiérarchies, en une liste PLATE.
+ *
+ * Le Figma les range en deux cadres — `Buttons/Button` en donne sept,
+ * `Buttons/Button destructive` en donne quatre — mais « destructif » n'est pas
+ * un axe orthogonal : la famille destructive ne reprend que quatre des sept.
+ * Il n'existe ni `secondary-white` destructif, ni `tertiary-gray` destructif.
+ *
+ * Une propriété booléenne `destructive` rendrait donc exprimables quatre
+ * combinaisons que personne n'a dessinées, et le composant devrait choisir
+ * quoi peindre pour chacune. Une liste plate rend l'impossible inexprimable :
+ * c'est le typage qui refuse, pas une valeur par défaut qui rattrape.
+ */
+type ButtonHierarchy = "primary" | "secondary-gray" | "secondary-white" | "tertiary-color" | "tertiary-gray" | "link-color" | "link-gray" | "primary-destructive" | "secondary-destructive" | "tertiary-destructive" | "link-destructive";
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** `xs` 32 px · `sm` 36 · `md` 40 · `lg` 44 · `xl` 48. */
+    size?: ButtonSize;
+    hierarchy?: ButtonHierarchy;
+    /** L'icône avant le libellé. En chargement, elle cède la place au spinner. */
+    iconLeading?: ReactNode;
+    /** L'icône après le libellé. En chargement, le Figma la retire. */
+    iconTrailing?: ReactNode;
+    /**
+     * En cours d'envoi. Le bouton reste ATTEIGNABLE au clavier — voir plus bas
+     * pourquoi ce n'est pas un `disabled`.
+     */
+    loading?: boolean;
+}
+/**
+ * Le bouton de Zest.
+ *
+ * ------------------------------------------------------------------------
+ * « ICÔNE SEULE » N'EST PAS UNE PROPRIÉTÉ
+ * ------------------------------------------------------------------------
+ * Le Figma en fait une variante (`Icon only=True/False`), mais un composant
+ * qui accepterait à la fois `iconOnly` et un libellé aurait un état
+ * contradictoire à arbitrer. Ici la forme se DÉDUIT de l'absence de libellé :
+ * pas d'enfants, donc un carré. Il n'y a rien à tenir cohérent.
+ *
+ * ------------------------------------------------------------------------
+ * LE CHARGEMENT N'EST PAS UN `disabled`, ET C'EST DÉLIBÉRÉ
+ * ------------------------------------------------------------------------
+ * Un `disabled` sort l'élément de l'ordre de tabulation. Le focus est donc
+ * perdu à l'instant où l'on presse « Envoyer », et il retombe sur le `body` :
+ * un utilisateur au clavier se retrouve en haut du document, sans savoir où il
+ * était. On pose donc `aria-disabled` — qui annonce l'indisponibilité sans
+ * retirer la pièce — et l'activation est bloquée en avalant le clic. Presser
+ * Entrée ou Espace sur un bouton déclenche un clic, donc les deux chemins
+ * passent par le même garde.
+ */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+type CloseButtonSize = "sm" | "md" | "lg";
+interface CloseButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** `sm` 36 px · `md` 40 · `lg` 44. La croix de `lg` fait 24 px, les deux autres 20. */
+    size?: CloseButtonSize;
+    /** Posé sur une photo ou un aplat sombre : croix blanche, survol en voile blanc. */
+    onDark?: boolean;
+    /**
+     * Le nom annoncé. « Fermer » par défaut, parce qu'un bouton dont le seul
+     * contenu est un dessin n'a AUCUN nom accessible et s'annonce « bouton ».
+     * À préciser quand la page en contient plusieurs — « Fermer la modale »,
+     * « Masquer la bannière ».
+     */
+    label?: string;
+}
+/**
+ * La croix de fermeture — voir l'en-tête de `CloseButton.css` pour les deux
+ * endroits où le relevé s'écarte du Figma, et pourquoi.
+ *
+ * Elle ne prend pas d'icône en propriété : c'est une croix, et une croix de
+ * fermeture qui accepterait un autre dessin ne serait plus un bouton de
+ * fermeture mais le `UtilityButton`, qui existe pour ça juste à côté.
+ */
+declare const CloseButton: react.ForwardRefExoticComponent<CloseButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+type UtilityButtonSize = "xs" | "sm";
+type UtilityButtonHierarchy = "secondary" | "tertiary";
+interface UtilityButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** `xs` 28 px (icône 16) · `sm` 32 px (icône 20). Le 28 n'existe nulle part ailleurs. */
+    size?: UtilityButtonSize;
+    hierarchy?: UtilityButtonHierarchy;
+    /** Le dessin. Obligatoire : ce bouton n'est fait que de ça. */
+    icon: ReactNode;
+    /**
+     * Le nom annoncé. Obligatoire, et sans valeur par défaut : contrairement
+     * à la croix de fermeture, on ne peut pas deviner ce que fait un bouton
+     * dont l'icône change à chaque emploi. Le rendre facultatif produirait des
+     * boutons parfaitement dessinés et annoncés « bouton ».
+     */
+    label: string;
+}
+/**
+ * Le bouton utilitaire — voir l'en-tête de `UtilityButton.css`, notamment pour
+ * la bordure que le Figma peint sur la mauvaise collection.
+ *
+ * Il n'a pas d'état de chargement : le Figma ne lui en dessine pas, et une
+ * barre d'outils n'est pas l'endroit où l'on attend la fin d'un envoi.
+ */
+declare const UtilityButton: react.ForwardRefExoticComponent<UtilityButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+type SpinnerSize = "sm" | "md";
+interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+    /** 20 px (`sm`) ou 24 px (`md`) — les deux seules tailles du Figma. */
+    size?: SpinnerSize;
+    /**
+     * Le texte annoncé aux lecteurs d'écran.
+     *
+     * Vide par défaut, et c'est voulu : dans un bouton, c'est le bouton qui
+     * porte `aria-busy` et son propre libellé (« Envoi… »). Un spinner qui
+     * annoncerait « Chargement » en plus ferait entendre l'information deux
+     * fois. Ne le remplir que pour un spinner POSÉ SEUL sur une page.
+     */
+    label?: string;
+}
+/**
+ * L'indicateur de chargement — voir l'en-tête de `Spinner.css` pour ce qui est
+ * relevé et ce qui est construit.
+ *
+ * Le Figma le range sous `Buttons/`, mais il n'est pas un bouton : il est
+ * exporté à part parce qu'un chargement ne se produit pas qu'à l'intérieur
+ * d'une commande.
+ */
+declare const Spinner: react.ForwardRefExoticComponent<SpinnerProps & react.RefAttributes<HTMLSpanElement>>;
+
+type BadgeSize = "sm" | "md" | "lg";
+/**
+ * Les trois habillages du cadre `Badge` (3869:2612).
+ *
+ * `pill` et `badge` sont deux fonds DOUX qui ne diffèrent que par leur rayon —
+ * plein contre 6 px — et par 2 px de padding. `modern` est un fond blanc bordé,
+ * où la couleur ne vit que dans les PIÈCES : son fond, sa bordure et son
+ * libellé sont les mêmes pour les treize couleurs.
+ *
+ * Le Figma les nomme `Pill color`, `Badge color` et `Badge modern`. Le mot
+ * « color » y distingue les deux premiers du troisième ; il ne dit rien de
+ * plus, et il ne survit donc pas à la traduction.
+ */
+type BadgeType = "pill" | "badge" | "modern";
+/**
+ * Les treize couleurs, nommées avec les mots du THÈME et non ceux du Figma.
+ *
+ * Le cadre les étiquette en français — `Bleu horizon`, `Vert tilleul`,
+ * `Jaune` — alors que le thème les déclare `utility-horizon`, `utility-lime`
+ * et `utility-yellow` depuis le portage. Employer les étiquettes du Figma
+ * obligerait à traduire à chaque aller-retour entre une classe CSS et un
+ * jeton ; la page « Badges » affiche les deux vocabulaires côte à côte, et
+ * c'est le seul endroit où la correspondance a besoin d'être visible.
+ *
+ * ⚠️  DEUX NEUTRES, ET C'EST LE FIGMA QUI EN OFFRE DEUX. `navy` est le neutre
+ * de Zest — celui des textes et des bordures — et `gray` celui de la livraison
+ * de référence. Les deux badges se ressemblent beaucoup. Voir « En attente »
+ * dans le README : ce doublon est vraisemblablement une migration inachevée,
+ * mais ce n'est pas au composant de le trancher.
+ */
+type BadgeColor = "brand" | "gray" | "navy" | "error" | "warning" | "success" | "horizon" | "lime" | "turquoise" | "violet" | "fuschia" | "rose" | "yellow";
+/**
+ * ------------------------------------------------------------------------
+ * POURQUOI QUATRE EMPLACEMENTS ET NON UN AXE À CINQ VALEURS
+ * ------------------------------------------------------------------------
+ * Le Figma range le point, la croix, l'icône de tête et l'icône de fin sur UN
+ * axe `Icon` à cinq valeurs, donc mutuellement exclusives. Ce composant en
+ * fait quatre propriétés indépendantes, et l'écart est délibéré.
+ *
+ * Un jeu de variantes Figma ne sait pas exprimer « deux emplacements
+ * optionnels » : il faudrait multiplier les variantes par quatre pour couvrir
+ * les combinaisons. L'exclusivité est donc une contrainte de l'OUTIL, pas une
+ * règle du produit — et un badge qui porte à la fois un point d'état et une
+ * croix de retrait est une pièce d'interface courante.
+ *
+ * C'est l'inverse du choix fait sur `Button`, dont les onze hiérarchies sont
+ * une liste plate : là, un booléen `destructive` aurait rendu exprimables
+ * quatre combinaisons de COULEUR que personne n'a dessinées et que le
+ * composant aurait dû inventer. Ici, rien à inventer : chaque emplacement
+ * porte sa propre géométrie, relevée, et les combiner ne demande aucune valeur
+ * nouvelle.
+ */
+interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color"> {
+    /** `sm` 22 px · `md` 24 · `lg` 28. Seul `sm` descend le texte à 12 px. */
+    size?: BadgeSize;
+    type?: BadgeType;
+    color?: BadgeColor;
+    /** Le point d'état, 8 px dans les trois tailles. */
+    dot?: boolean;
+    /** L'icône avant le libellé, rendue dans une boîte de 12 px. */
+    iconLeading?: ReactNode;
+    /** L'icône après le libellé, rendue dans une boîte de 12 px. */
+    iconTrailing?: ReactNode;
+    /**
+     * La croix de retrait. Sa présence est ce qui la dessine : il n'y a pas de
+     * propriété `closable` à tenir d'accord avec elle.
+     */
+    onClose?: (evenement: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Le nom accessible de la croix. À défaut, il est composé du libellé quand
+     * celui-ci est du texte — « Retirer Terminé » — parce qu'une page qui
+     * affiche huit badges affiche huit croix, et que huit commandes qui
+     * s'annoncent toutes « Retirer » ne se distinguent pas au clavier.
+     */
+    closeLabel?: string;
+}
+/**
+ * Le badge de Zest.
+ *
+ * Relevé sur trois cadres du Figma le 2026-09-10 : `Badge` (3869:2612),
+ * `_Dot` (3874:1192) et `_Badge close X` (3869:4461).
+ *
+ * ------------------------------------------------------------------------
+ * IL N'Y A PAS DE BADGE EN APLAT
+ * ------------------------------------------------------------------------
+ * Les trois habillages sont deux fonds doux et un fond blanc. Aucun ne pose de
+ * texte blanc sur une couleur saturée, donc `bg-success-solid` et
+ * `bg-warning-solid` — les deux jetons sous l'AA qui « bloquaient » les badges
+ * depuis le 2026-09-09 — ne sont employés par aucun d'eux. La décision reste à
+ * prendre, elle ne concerne pas ce composant.
+ *
+ * ------------------------------------------------------------------------
+ * CE QUI N'EST PAS UN RELEVÉ
+ * ------------------------------------------------------------------------
+ * ⚠️  L'ÉTAT DE FOCUS DE LA CROIX EST UN AJOUT. Le cadre `_Badge close X` ne
+ * dessine que `Default` et `Hover`. Une commande sans focus visible ne
+ * s'emploie pas au clavier : l'anneau reprend la recette du `CloseButton`.
+ */
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+/** 24, 32, 40, 48, 56 et 64 px. Six tailles, six paliers typographiques. */
+type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+/** Les trois tailles que le groupe et le bouton d'ajout dessinent. */
+type AvatarGroupSize = "xs" | "sm" | "md";
+/**
+ * Les trois statuts du cadre `Status icon` (3881:5020).
+ *
+ * ⚠️  `sensitive-comment` N'EST PAS UN STATUT DE PRÉSENCE, contrairement aux
+ * deux autres. C'est une ALERTE : elle signale que des commentaires jugés
+ * sensibles ont été détectés dans les réponses écrites de la personne. Le
+ * Figma l'étiquette « Com. sensible », abrégé pour tenir dans un nom de
+ * variante ; le nom complet est « commentaire sensible ».
+ *
+ * ⚠️  ET SON DESSIN NE SUIT PAS CELUI DES DEUX AUTRES. Son disque remplit tout
+ * le cadre de 16 px au lieu de s'y inscrire à 12,5 % comme « en ligne » et
+ * « hors ligne », donc il paraît plus gros quand les trois voisinent. Relevé
+ * tel quel — les maquettes font foi — et signalé dans la page.
+ */
+type AvatarStatus = "online" | "offline" | "sensitive-comment";
+interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color"> {
+    /** `xs` 24 px · `sm` 32 · `md` 40 · `lg` 48 · `xl` 56 · `2xl` 64. */
+    size?: AvatarSize;
+    /** La photo. Premier de l'ordre de priorité. */
+    src?: string;
+    /**
+     * Le texte de remplacement de la photo.
+     *
+     * ⚠️  N'Y METTEZ PAS LE NOM DE LA PERSONNE si le nom est déjà écrit à côté
+     * de l'avatar : un lecteur d'écran l'annoncerait deux fois. Une chaîne
+     * vide est la bonne réponse dans ce cas, et c'est le défaut.
+     */
+    alt?: string;
+    /**
+     * Le texte de la pastille — les initiales. Deuxième de l'ordre de
+     * priorité, employé quand il n'y a pas de photo.
+     *
+     * C'est aussi ce qui porte le « +5 » d'un groupe : la pastille est la même
+     * pièce, et lui donner deux noms l'aurait dédoublée.
+     */
+    initials?: string;
+    /**
+     * Le masque de l'anonyme. Il GAGNE sur la photo et sur les initiales, et
+     * il interdit le point de statut — voir l'en-tête de la feuille.
+     */
+    anonymous?: boolean;
+    /** L'anneau blanc bordé, avec son ombre. */
+    border?: boolean;
+    status?: AvatarStatus;
+    /** Le nom accessible du statut. À défaut, celui de `NOM_DU_STATUT`. */
+    statusLabel?: string;
+}
+/**
+ * L'avatar de Zest.
+ *
+ * Relevé le 2026-09-10 sur cinq cadres du Figma. Le contenu se DÉDUIT de ce
+ * qu'on donne, dans l'ordre arbitré par l'équipe produit — photo, puis
+ * initiales, puis picto — et l'anonyme passe devant tout.
+ *
+ * ⚠️  UNE PHOTO QUI NE CHARGE PAS RETOMBE DANS LE MÊME ORDRE. Ce n'est pas dans
+ * le Figma, qui ne dessine pas d'états d'erreur : c'est la même règle produit
+ * appliquée à l'exécution. Une URL morte donnait sinon un rond vide, et un
+ * rond vide ne dit rien — alors que les initiales, elles, disent qui c'est.
+ */
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
+interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** `xs` 24 px · `sm` 32 · `md` 40. Le Figma n'en dessine pas d'autres. */
+    size?: AvatarGroupSize;
+    /**
+     * Combien d'avatars avant la pastille « +N ». Au-delà, les suivants sont
+     * comptés et non dessinés.
+     */
+    max?: number;
+    /**
+     * Sa présence dessine le bouton d'ajout. Il n'y a pas de propriété
+     * `addButton` à tenir d'accord avec elle.
+     */
+    onAdd?: (evenement: MouseEvent<HTMLButtonElement>) => void;
+    /** Le nom accessible du bouton d'ajout. */
+    addLabel?: string;
+    /** Les avatars. La taille du groupe leur est imposée. */
+    children?: ReactNode;
+}
+/**
+ * Plusieurs avatars qui se chevauchent.
+ *
+ * ⚠️  IL IMPOSE SA TAILLE À SES ENFANTS, et c'est nécessaire : le
+ * chevauchement est un nombre de pixels — −4, −8, −12 — et non une proportion.
+ * Un avatar `lg` glissé dans un groupe `xs` se chevaucherait de 4 px sur 48,
+ * soit presque rien, et la pile se lirait comme une file. L'imposition passe
+ * par `cloneElement` : voir le commentaire du rendu, où une première version
+ * la croyait faite en CSS alors qu'elle ne l'était pas.
+ */
+declare const AvatarGroup: react.ForwardRefExoticComponent<AvatarGroupProps & react.RefAttributes<HTMLDivElement>>;
+/** `sm` 32 px · `md` 40 · `lg` 48. Trois tailles, trois paliers de texte. */
+type AvatarLabelGroupSize = "sm" | "md" | "lg";
+interface AvatarLabelGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "color"> {
+    size?: AvatarLabelGroupSize;
+    /** Le nom, en semibold. */
+    name: string;
+    /** L'adresse ou la fonction, en regular, sous le nom. */
+    supportingText?: string;
+    src?: string;
+    initials?: string;
+    anonymous?: boolean;
+    status?: AvatarStatus;
+    statusLabel?: string;
+}
+/**
+ * Un avatar, un nom, et une ligne de soutien.
+ *
+ * ⚠️  SON AVATAR PORTE LA BORDURE, et ce n'est pas au choix : les trois
+ * spécimens du cadre `Avatar label group` sont dessinés en `Border=True`. Un
+ * avatar nu à côté d'un nom se lirait comme une autre pièce.
+ *
+ * ⚠️  LE `alt` DE L'AVATAR EST VIDE, DÉLIBÉRÉMENT. Le nom est écrit juste à
+ * côté : le répéter dans l'image le ferait annoncer deux fois de suite. C'est
+ * la règle que la page « Avatars » énonce depuis le portage.
+ */
+declare const AvatarLabelGroup: react.ForwardRefExoticComponent<AvatarLabelGroupProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Le masque de l'avatar anonyme — relevé le 2026-09-10 sur le cadre `Avatar`
+ * du Figma, variante `Anonymous=True` (3881:8349, tracé 3881:8394).
+ *
+ * ⚠️  IL N'EST PAS DANS LE CATALOGUE DES ICÔNES, ET C'EST VOULU. Les 135 icônes
+ * sont générées depuis la page « Icônes » du Figma ; ce loup-là n'y est pas —
+ * il vit dans le composant Avatar, dessiné à ses proportions. Son cadre fait
+ * 40 × 19, soit toute la largeur de l'avatar pour 47,5 % de sa hauteur, et il
+ * ne se lit pas à 24 × 24 comme une icône du catalogue.
+ *
+ * ⚠️  IL EST PEINT EN `currentColor`, alors que le Figma le fixe à
+ * `Bleu marine/100`. C'est l'enveloppe `.zds-avatar__mask` qui pose cette
+ * couleur, par `--zds-color-avatar-mask` : le tracé, lui, suit son parent, ce
+ * qui laisse un anonyme se poser sur un fond sombre le jour où il le faudra.
+ *
+ * `aria-hidden` : ce dessin ne s'annonce pas. C'est le `alt` de l'avatar qui
+ * porte le sens, et « masque de carnaval » n'aiderait personne à comprendre
+ * qu'une réponse est anonymisée.
+ */
+declare const AvatarMask: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+/**
+ * L'info-bulle.
+ *
+ * Relevée sur deux cadres du Figma le 2026-09-10 : `Tooltip` (3266:935, 14
+ * symboles) pour la bulle, `Help icon` (3266:1096, 28 symboles) pour le
+ * composite à icône d'aide.
+ *
+ * ⚠️  LE PLACEMENT EST CHOISI PAR LE DÉVELOPPEUR, ET IL N'Y A AUCUNE BASCULE
+ * AUTOMATIQUE. Arbitrage du lead dev front, le 2026-09-10 : pas de bibliothèque
+ * de positionnement. Le composant offre les six placements que la maquette
+ * dessine, en CSS ; c'est l'appelant qui en choisit un.
+ *
+ * La conséquence est à connaître avant de s'en servir : **une info-bulle placée
+ * près du bord de l'écran en sortira.** Rien ne la retournera. C'est le prix de
+ * zéro dépendance d'exécution, et il est assumé — la page de documentation
+ * énonce les trois cas où il faut changer de placement.
+ *
+ * ⚠️  UNE DÉCISION EN A ANNULÉ UNE DE LA VEILLE, ET LE DÉTOUR A SERVI. Une
+ * première version passait par `react-aria-components`, déjà employée en
+ * production sur les projets Zest. Le lead dev front a tranché autrement. Ce
+ * qu'on garde du détour, ce sont ses MESURES : le recouvrement de la flèche, le
+ * retrait de 12 px sur les placements décalés et l'écart de 4 px au déclencheur
+ * ont été relevés dans un vrai navigateur, et ils sont reproduits ici à
+ * l'identique. Trois défauts disparaissent en même temps que la bibliothèque —
+ * son style en ligne qui écrasait nos rotations, l'instabilité des bulles
+ * forcées ouvertes dans une page longue, et l'impossibilité de tester une bulle
+ * « froide » sous jsdom.
+ *
+ * ⚠️  LES DEUX CADRES DÉCRIVENT LES MÊMES SEPT CHOSES, NOMMÉES À L'ENVERS. La
+ * bulle classe ses variantes par la position de sa FLÈCHE (« Bottom center »,
+ * « Bottom left », « Left »…) ; le composite les classe par la position de la
+ * BULLE (« Top arrow », « Top right », « Left »…). Les sept valeurs se
+ * correspondent une à une, et « Top right » — bulle en haut à droite — porte
+ * une flèche en bas à GAUCHE. L'API expose la position de la BULLE, parce que
+ * c'est ce qu'un développeur choisit ; la flèche en découle.
+ *
+ * ⚠️  LE DÉCLENCHEUR N'EST PAS ENVELOPPÉ DANS UN BOUTON. Un seul élément est
+ * ajouté : une ANCRE, qui sert de repère de position à la bulle et n'entre pas
+ * dans l'ordre de tabulation. La tentation était d'envelopper dans un bouton —
+ * c'est ce que fait l'implémentation en production des produits Zest, et ça y a
+ * créé six arrêts de tabulation MORTS : six boutons focusables sans action.
+ *
+ * ⚠️  LE DÉLAI DE 300 MS N'EST PAS UN CHOIX D'HUMEUR. C'est celui du composant
+ * en production, et il existe pour que la souris puisse TRAVERSER un élément
+ * sans en déclencher la bulle. Sans délai, un survol de passage allume et
+ * éteint des bulles sur tout le trajet du curseur.
+ */
+/** Où va la BULLE, pas où va la flèche. Les six positions du Figma. */
+type TooltipPlacement = "top" | "top-left" | "top-right" | "bottom" | "left" | "right";
+interface TooltipProps {
+    /** La première ligne, en gras. C'est le seul contenu obligatoire. */
+    title: ReactNode;
+    /**
+     * La ligne d'explication, en dessous.
+     *
+     * ⚠️  ELLE CHANGE LA GÉOMÉTRIE DE LA BULLE, pas seulement son contenu :
+     * sans elle la bulle se colle au texte et son padding vertical tombe à
+     * 8 px ; avec elle, elle se cale à 320 px de large et passe à 12 px. Deux
+     * anatomies relevées séparément, pas une interpolation.
+     */
+    supportingText?: ReactNode;
+    /** La flèche. Absente par défaut, comme dans la maquette. */
+    arrow?: boolean;
+    /**
+     * Où va la bulle.
+     *
+     * ⚠️  C'EST UN CHOIX, PAS UNE PRÉFÉRENCE. Rien ne la retournera si elle ne
+     * tient pas : elle sortira de l'écran. Voir les trois cas de la page de
+     * documentation.
+     */
+    placement?: TooltipPlacement;
+    /** Le délai avant apparition, en millisecondes. */
+    delay?: number;
+    /** Le délai avant disparition. */
+    closeDelay?: number;
+    /** Ne rien montrer du tout, sans avoir à retirer l'enveloppe. */
+    isDisabled?: boolean;
+    /**
+     * Forcer l'ouverture, en pilotant l'état depuis l'extérieur.
+     *
+     * Sert d'abord aux planches de documentation — une info-bulle au repos ne
+     * montre rien — et, en produit, à afficher une aide sans attendre un geste.
+     */
+    isOpen?: boolean;
+    /** Ouverte au premier rendu, puis libre de se fermer. */
+    defaultOpen?: boolean;
+    onOpenChange?: (ouverte: boolean) => void;
+    /**
+     * Le déclencheur : UN élément.
+     *
+     * ⚠️  UN SEUL, ET LE TYPE L'IMPOSE PLUTÔT QUE DE L'ESPÉRER. Le composant
+     * POSE ses gestionnaires et, au besoin, son `tabIndex` sur cet élément —
+     * il ne l'enveloppe pas. Il lui faut donc exactement un élément : deux
+     * enfants, ou du texte nu, n'auraient rien à quoi s'accrocher.
+     */
+    children: ReactElement;
+}
+declare const Tooltip: ({ title, supportingText, arrow, placement, delay, closeDelay, isDisabled, isOpen, defaultOpen, onOpenChange, children, }: TooltipProps) => react.JSX.Element;
+interface HelpTooltipProps extends Omit<TooltipProps, "children"> {
+    /**
+     * Ce que la personne entend, et ce n'est PAS le titre de la bulle.
+     *
+     * ⚠️  UNE INFO-BULLE NE REMPLACE PAS UN NOM ACCESSIBLE. Elle apparaît au
+     * survol et au focus, mais l'icône reste un bouton sans texte : sans
+     * libellé, un lecteur d'écran annonce « bouton », point. Le titre de la
+     * bulle est une DESCRIPTION ; ceci est le NOM.
+     */
+    label?: string;
+}
+/**
+ * L'icône d'aide qui porte sa bulle.
+ *
+ * ⚠️  LE CURSEUR DE SOURIS DESSINÉ DANS LES SYMBOLES EST UN ARTIFICE DE
+ * MAQUETTE, PAS UNE PIÈCE DU COMPOSANT. Les quatorze symboles `Open=True` du
+ * cadre portent une flèche de souris à côté de l'icône, pour montrer que la
+ * bulle vient d'un survol. La coder dessinerait un curseur en plus de celui du
+ * système.
+ *
+ * C'est un vrai `<button type="button">` : l'aide se déclenche au survol ET au
+ * clavier, et un élément non interactif ne recevrait jamais le second.
+ */
+declare const HelpTooltip: react.ForwardRefExoticComponent<HelpTooltipProps & react.RefAttributes<HTMLButtonElement>>;
+
+/** La hauteur totale du dessin, relevée. */
+declare const HAUTEUR_FLECHE = 8.51471;
+/** Ce qui en DÉPASSE de la bulle. La différence passe dessous. */
+declare const DEBORD_FLECHE = 6;
+/** La largeur de la base. */
+declare const LARGEUR_FLECHE = 16;
+declare const TooltipArrow: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+/**
+ * La case à cocher, et le bouton radio.
+ *
+ * Relevés sur `_Checkbox base` (3891:11902, 40 symboles) et `Checkbox`
+ * (3891:11629, 74 symboles), le 2026-09-10.
+ *
+ * ⚠️  LES DEUX FORMES SONT UN SEUL ATOME DANS LE FIGMA, ET DEUX EXPORTS ICI. Le
+ * cadre en fait un axe `Type` — même boîte, mêmes quatre états, même anneau de
+ * focus, seules la forme et la marque changent. Les deux composants partagent
+ * donc leur habillage et ne diffèrent que par ce que le Figma fait différer.
+ * Deux jeux de règles auraient divergé au premier correctif.
+ *
+ * ⚠️  L'ÉLÉMENT EST UN VRAI `<input>`, PAS UN `<div>` QUI Y RESSEMBLE. Il porte
+ * `appearance: none` et se laisse habiller, mais il garde tout ce qu'un `div`
+ * n'a pas : le clavier, la participation au formulaire, le groupement des
+ * radios par `name`, et — le plus utile ici — les pseudo-classes natives
+ * `:checked`, `:disabled`, `:focus-visible` et `:indeterminate`.
+ *
+ * ⚠️  LA MARQUE EST UN FRÈRE, PAS UN ENFANT, PARCE QU'UN `<input>` N'EN PREND
+ * PAS. Elle est posée en absolu par-dessus, avec `pointer-events: none` pour
+ * que le clic atteigne l'input dessous. L'autre voie serait d'inliner le SVG en
+ * `background-image` dans la feuille : ce serait un TROISIÈME exemplaire du
+ * tracé, après le catalogue et la page — et le jour où le Figma corrige la
+ * coche, celui-là ne suivrait pas.
+ *
+ * ⚠️  LE LIBELLÉ EST LIÉ PAR `htmlFor`, IL N'ENVELOPPE PAS. Un `<label>` qui
+ * enveloppe le contrôle ET le texte d'aide ferait du texte d'aide une partie du
+ * NOM accessible : un lecteur d'écran annoncerait « Se souvenir de moi.
+ * Enregistrer mes informations de connexion pour la prochaine fois, case à
+ * cocher », d'un bloc. Le libellé est le nom, l'aide est une DESCRIPTION —
+ * `aria-describedby`. Conséquence assumée : cliquer le libellé bascule la case,
+ * cliquer l'aide ne fait rien.
+ */
+/** Les deux tailles du Figma. `sm` fait 16 px, `md` 20. */
+type CheckboxSize = "sm" | "md";
+interface BaseProps$1 extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    size?: CheckboxSize;
+    /** Le libellé. C'est lui qui donne son nom accessible au contrôle. */
+    label?: ReactNode;
+    /**
+     * La ligne d'explication, sous le libellé.
+     *
+     * ⚠️  ELLE CHANGE LA GÉOMÉTRIE DE LA LIGNE, pas seulement son contenu : le
+     * Figma en fait une propriété booléenne à part de `Text`, donc « libellé
+     * seul » et « libellé plus aide » sont deux dessins.
+     */
+    hint?: ReactNode;
+}
+interface CheckboxProps extends BaseProps$1 {
+    /**
+     * Ni cochée ni décochée : la case représente un ensemble partiellement
+     * sélectionné.
+     *
+     * ⚠️  ELLE NE S'OBTIENT QU'EN JAVASCRIPT, et c'est ce qui la distingue des
+     * trois autres sélecteurs. Il n'existe aucun attribut HTML `indeterminate` :
+     * c'est une propriété du nœud DOM. React ne la pose donc pas, et le
+     * composant l'écrit lui-même sur la ref à chaque rendu.
+     *
+     * ⚠️  ET ELLE EST INDÉPENDANTE DE `checked`, contrairement à ce que le Figma
+     * laisse croire. Le cadre ne dessine `Indeterminate=True` qu'avec
+     * `Checked=True` — 24 symboles sur 40 — mais HTML les traite comme deux
+     * choses séparées, et c'est HTML qui gagne : une case indéterminée montre
+     * son tiret qu'elle soit cochée ou non. Aligner le composant sur le dessin
+     * obligerait à cocher une case pour la rendre indéterminée, ce qui est
+     * exactement le contraire de son sens.
+     */
+    indeterminate?: boolean;
+}
+interface RadioProps extends BaseProps$1 {
+    /**
+     * Le groupe auquel ce radio appartient.
+     *
+     * ⚠️  SANS LUI, UN RADIO NE SE DÉSÉLECTIONNE JAMAIS. C'est `name` qui lie
+     * les boutons entre eux ; seul, un radio se coche et reste coché à vie —
+     * un défaut qui ne se voit qu'en essayant le second bouton du groupe.
+     */
+    name: string;
+}
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+/**
+ * Le bouton radio.
+ *
+ * ⚠️  IL N'A PAS D'ÉTAT INDÉTERMINÉ, et ce n'est pas un oubli : un radio ne
+ * représente jamais un ensemble partiel, il représente un choix parmi
+ * plusieurs. Le Figma ne lui en dessine aucun non plus — 16 symboles contre 24
+ * pour la case.
+ *
+ * ⚠️  ET SA MARQUE EST UN DISQUE, PAS UNE ICÔNE. La case emprunte `check` et
+ * `minus` au catalogue ; le radio n'a rien à emprunter, son point est une forme
+ * pleine que la feuille dessine.
+ */
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+
+/**
+ * L'interrupteur.
+ *
+ * Relevé sur `_Toggle base` (3896:1480, 32 symboles) et `Toggle` (3896:1553,
+ * 64 symboles), le 2026-09-11.
+ *
+ * ⚠️  UN INTERRUPTEUR N'EST PAS UNE CASE À COCHER, ET CE N'EST PAS UNE NUANCE DE
+ * VOCABULAIRE. Il applique son effet TOUT DE SUITE : il n'y a rien à valider
+ * derrière lui. Une case à cocher déclare une intention que le bouton du
+ * formulaire exécutera. Les deux se ressemblent à l'écran et ne se remplacent
+ * jamais — d'où deux composants, et non une variante de l'autre.
+ *
+ * ⚠️  L'ÉLÉMENT EST UN VRAI `<input type="checkbox">`, COMME LA CASE À COCHER,
+ * ET IL PORTE `role="switch"`. L'input garde le clavier, la participation au
+ * formulaire et les pseudo-classes natives `:checked`, `:disabled` et
+ * `:focus-visible` ; le rôle change ce qu'un lecteur d'écran ANNONCE — « activé
+ * / désactivé » au lieu de « coché / décoché ». Sans lui, deux contrôles qui ne
+ * font pas la même chose s'annoncent pareil.
+ *
+ * ⚠️  LE BOUTON EST UN FRÈRE, PAS UN ENFANT, parce qu'un `<input>` n'en prend
+ * pas. Il est posé en absolu par-dessus la piste, avec `pointer-events: none`
+ * pour que le clic atteigne l'input dessous. Même montage que la marque de la
+ * case à cocher.
+ *
+ * ⚠️  LE DÉPLACEMENT DU BOUTON VAUT EXACTEMENT SA PROPRE LARGEUR, dans les
+ * quatre combinaisons taille × type. C'est une coïncidence du relevé, pas une
+ * règle de dessin — mais elle est vérifiée : 36−2−2−16, 44−2−2−20, 32−16 et
+ * 40−20 donnent 16, 20, 16 et 20, soit la taille du bouton à chaque fois. D'où
+ * un seul `translateX(100%)` plutôt que quatre décalages à tenir d'accord.
+ *
+ * ⚠️  LE LIBELLÉ EST LIÉ PAR `htmlFor`, IL N'ENVELOPPE PAS — même raison que sur
+ * la case à cocher : un `<label>` qui envelopperait le contrôle ET l'aide ferait
+ * de l'aide une partie du NOM accessible, annoncée d'un bloc à chaque rencontre.
+ * Le libellé est le nom, l'aide est une DESCRIPTION (`aria-describedby`).
+ */
+/** Les deux tailles du Figma. La piste fait 36 × 20 en `sm`, 44 × 24 en `md`. */
+type ToggleSize = "sm" | "md";
+/**
+ * Les deux dessins du Figma.
+ *
+ * `default` : le bouton est en retrait de 2 px dans sa piste, sans bordure, et
+ * porte l'ombre la plus marquée. `slim` : la piste est plus basse, le bouton la
+ * remplit d'un bord à l'autre et porte une bordure — c'est elle qui le détache,
+ * là où l'autre compte sur son ombre.
+ */
+type ToggleType = "default" | "slim";
+interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    size?: ToggleSize;
+    type?: ToggleType;
+    /** Le libellé. C'est lui qui donne son nom accessible au contrôle. */
+    label?: ReactNode;
+    /**
+     * La ligne d'explication, sous le libellé.
+     *
+     * ⚠️  ELLE CHANGE LA GÉOMÉTRIE DE LA LIGNE, pas seulement son contenu : le
+     * Figma en fait une propriété à part de `Text`, donc « libellé seul » et
+     * « libellé plus aide » sont deux dessins.
+     */
+    hint?: ReactNode;
+}
+declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLInputElement>>;
+
 /**
  * Le catalogue des icônes de type de fichier — LA source unique.
  *
@@ -562,13 +1223,12 @@ interface ZestFileIcon {
     svg: Record<FileIconVariante, string>;
 }
 declare const ZEST_FILE_ICONS: ZestFileIcon[];
-/** Retrouve une icône de fichier par son nom. */
 declare const findFileIcon: (name: string) => ZestFileIcon | undefined;
 
 /**
  * Les icônes de type de fichier, en composants.
  *
- * ⚠️  ÉCRIT À LA MAIN, contrairement à `icons/index.tsx`. Là-bas, 121 icônes
+ * ⚠️  ÉCRIT À LA MAIN, contrairement à `icons/index.tsx`. Là-bas, 135 icônes
  * monochromes justifiaient un composant par dessin ; ici les dessins sont
  * polychromes et se choisissent le plus souvent À L'EXÉCUTION, depuis
  * l'extension d'un fichier téléversé. Un composant par type obligerait à écrire
@@ -595,7 +1255,7 @@ interface FileIconProps extends Omit<SVGProps<SVGSVGElement>, "name"> {
  * écrit à côté — « rapport-q3.pdf » — et l'annoncer ferait entendre « PDF »
  * deux fois. L'écran qui la poserait seule doit porter le libellé lui-même.
  *
- * ⚠️  ET ELLE NE SUIT PAS LA COULEUR DU TEXTE, contrairement aux 121 icônes du
+ * ⚠️  ET ELLE NE SUIT PAS LA COULEUR DU TEXTE, contrairement aux 135 icônes du
  * design system. Ses teintes sont dans le dessin, citées en jetons : un PDF est
  * rouge et un tableur vert parce que c'est une convention de reconnaissance.
  */
@@ -914,7 +1574,6 @@ declare const STYLES_A_REVOIR: {
     name: string;
     pourquoi: string;
 }[];
-/** Retrouve une icône par son nom Figma. */
 declare const findIcon: (name: string) => ZestIcon | undefined;
 
-export { AlertCircle01, AlertCircle02, AlertTriangle01, AlertTriangle02, ArrowDown, ArrowDownLeft, ArrowDownRight, ArrowLeft, ArrowNarrowDown, ArrowNarrowDownLeft, ArrowNarrowDownRight, ArrowNarrowLeft, ArrowNarrowRight, ArrowNarrowUp, ArrowNarrowUpLeft, ArrowNarrowUpRight, ArrowRight, BarChartSquare02, Bell01, BellOff01, Bookmark01, Building07, Calendar, CalendarPlus01, Check, CheckCircle01, CheckCircle02, CheckDone01, ChevronDown, ChevronDownDouble, ChevronLeft, ChevronLeftDouble, ChevronRight, ChevronRightDouble, ChevronUp, ChevronUpDouble, Circle, Clock, DotsVertical, Download01, Edit01, Edit02, Eye01, Eye02, EyeOff, FeatureActionPlan, FeatureAlignmentMap, FeatureCheckin, FeatureCockpit, FeatureEngageo, FeatureFeedback, FeatureIdea, FeatureIntercom01, FeatureIntercom02, FeatureKeydriver, FeatureMood01, FeatureMood02, FeatureObjective, FeatureProject, FeatureResume, FeatureSkill, FeatureSurvey01, FeatureSurvey02, FileAudio, FileCsv, FileDoc, FileDocument, FileDocx, FileEmpty, FileEps, FileFolder, FileGif, FileIcon, type FileIconFamille, type FileIconProps, type FileIconVariante, FileImage, FileImg, FileJpeg, FileJpg, FilePdf, FilePdfSimple, FilePng, FilePpt, FilePptx, FileSpreadsheet, FileSvg, FileTiff, FileTxt, FileVideo01, FileVideo02, FileWebp, FileXls, FileXlsx, FilterFunnel01, FilterFunnel02, Flag01, Heart01, Heart02, HelpCircle01, HelpCircle02, Home01, Home02, Inbox01, InfoCircle01, InfoCircle02, LOGO_BOITES, LOGO_ECART, Link01, LinkBroken01, Lock01, Lock02, LockUnlocked01, LockUnlocked02, LogOut01, type LogoVariante, Mail01, Mail02, Menu01, MessageBubble01, MessageBubble02, MessageChatSquare, Minus, MinusCircle, ModuleLead, ModuleListen, ModulePerform, ModuleShare, Plus, PlusCircle01, PlusCircle02, RefreshCw01, STYLES_A_REVOIR, Search01, Send01, Settings01, Settings02, Share01, Share02, Share03, SlashCircle01, SlashDivider, SmartOrg, Star01, Target05, ThumbsDown, ThumbsUp, Tick, Tool01, Trash01, Trash02, Upload01, User01, Users01, XCircle, XClose, ZEST_FILE_ICONS, ZEST_ICONS, ZEST_ICONS_EN_CONFLIT, ZEST_LOGO, ZestAiLogo, type ZestFileIcon, type ZestIcon, ZestLogo, ZestLogomark, type ZestPath, ZestWordmark, findFileIcon, findIcon };
+export { AlertCircle01, AlertCircle02, AlertTriangle01, AlertTriangle02, ArrowDown, ArrowDownLeft, ArrowDownRight, ArrowLeft, ArrowNarrowDown, ArrowNarrowDownLeft, ArrowNarrowDownRight, ArrowNarrowLeft, ArrowNarrowRight, ArrowNarrowUp, ArrowNarrowUpLeft, ArrowNarrowUpRight, ArrowRight, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarGroupSize, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarLabelGroupSize, AvatarMask, type AvatarProps, type AvatarSize, type AvatarStatus, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeType, BarChartSquare02, Bell01, BellOff01, Bookmark01, Building07, Button, type ButtonHierarchy, type ButtonProps, type ButtonSize, Calendar, CalendarPlus01, Check, CheckCircle01, CheckCircle02, CheckDone01, Checkbox, type CheckboxProps, type CheckboxSize, ChevronDown, ChevronDownDouble, ChevronLeft, ChevronLeftDouble, ChevronRight, ChevronRightDouble, ChevronUp, ChevronUpDouble, Circle, Clock, CloseButton, type CloseButtonProps, type CloseButtonSize, DEBORD_FLECHE, DotsVertical, Download01, Edit01, Edit02, Eye01, Eye02, EyeOff, FeatureActionPlan, FeatureAlignmentMap, FeatureCheckin, FeatureCockpit, FeatureEngageo, FeatureFeedback, FeatureIdea, FeatureIntercom01, FeatureIntercom02, FeatureKeydriver, FeatureMood01, FeatureMood02, FeatureObjective, FeatureProject, FeatureResume, FeatureSkill, FeatureSurvey01, FeatureSurvey02, FileAudio, FileCsv, FileDoc, FileDocument, FileDocx, FileEmpty, FileEps, FileFolder, FileGif, FileIcon, type FileIconFamille, type FileIconProps, type FileIconVariante, FileImage, FileImg, FileJpeg, FileJpg, FilePdf, FilePdfSimple, FilePng, FilePpt, FilePptx, FileSpreadsheet, FileSvg, FileTiff, FileTxt, FileVideo01, FileVideo02, FileWebp, FileXls, FileXlsx, FilterFunnel01, FilterFunnel02, Flag01, HAUTEUR_FLECHE, Heart01, Heart02, HelpCircle01, HelpCircle02, HelpTooltip, type HelpTooltipProps, Home01, Home02, Inbox01, InfoCircle01, InfoCircle02, LARGEUR_FLECHE, LOGO_BOITES, LOGO_ECART, Link01, LinkBroken01, Lock01, Lock02, LockUnlocked01, LockUnlocked02, LogOut01, type LogoVariante, Mail01, Mail02, Menu01, MessageAlertSquare01, MessageAlertSquare02, MessageBubble01, MessageBubble02, MessageChatSquare, Minus, MinusCircle, ModuleLead, ModuleListen, ModulePerform, ModuleShare, Plus, PlusCircle01, PlusCircle02, Radio, type RadioProps, RefreshCw01, STYLES_A_REVOIR, Search01, Send01, Settings01, Settings02, Share01, Share02, Share03, SlashCircle01, SlashDivider, SmartOrg, Spinner, type SpinnerProps, type SpinnerSize, Star01, Target05, ThumbsDown, ThumbsUp, Tick, Toggle, type ToggleProps, type ToggleSize, type ToggleType, Tool01, Tooltip, TooltipArrow, type TooltipPlacement, type TooltipProps, Trash01, Trash02, Upload01, User01, Users01, UtilityButton, type UtilityButtonHierarchy, type UtilityButtonProps, type UtilityButtonSize, XCircle, XClose, ZEST_FILE_ICONS, ZEST_ICONS, ZEST_ICONS_EN_CONFLIT, ZEST_LOGO, ZestAiLogo, type ZestFileIcon, type ZestIcon, ZestLogo, ZestLogomark, type ZestPath, ZestWordmark, findFileIcon, findIcon };