@alveole/components 1.10.0 → 2.0.0-alpha.1

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

@@ -6,78 +6,58 @@ declare const _default: {
     figmaURL: string;
     description: string;
     component: React.ForwardRefExoticComponent<Omit<import("react-native").PressableProps, "children" | "style"> & {
-        title?: string;
-        size?: "xs" | "sm" | "md" | "lg";
-        variant: "primary" | "secondary" | "tertiary" | "danger" | "link";
-        startIcon?: import("..").IconProps["name"];
-        endIcon?: import("..").IconProps["name"];
+        title: string;
+        size?: import("./buttonVariants").ButtonTaille;
+        variant: import("./buttonVariants").ButtonVariant;
+        leading?: import("..").Leading;
+        trailing?: import("..").Leading;
+        contentAlign?: "center" | "start";
         selected?: boolean;
         ContainerProps?: import("../..").BoxProps;
         fullWidth?: boolean;
-        noPadding?: boolean;
-        borderNone?: boolean;
-        leftAlign?: boolean;
         type?: "button" | "submit";
         active?: boolean;
+        expanded?: boolean;
         isLoading?: boolean;
+        loadingDelay?: import("../Spinner/Spinner.shared").SpinnerDelay;
     } & React.RefAttributes<import("react-native").View>>;
     styleFn: () => {
-        container: {
-            borderTopLeftRadius: import("@alveole/theme").Radius;
-            borderBottomLeftRadius: import("@alveole/theme").Radius;
-            borderTopRightRadius: import("@alveole/theme").Radius;
-            borderBottomRightRadius: import("@alveole/theme").Radius;
-            display: "flex";
-            flexDirection: "row";
-            justifyContent: "center";
-            alignItems: "center";
-            gap: string | number;
-            transitionProperty: "all";
-            transitionDuration: "150ms";
-            transitionTimingFunction: "ease";
-        };
-        buttonLoader: {
-            position: "absolute";
-            right: import("@alveole/theme").Spacing;
-        };
-        title: {
-            cursor: "pointer";
-            textAlign: "center";
-        };
-        primaryTitle: {
+        dangerTitle: {
             color: string;
         };
-        primaryContainer: {
+        dangerContainer: {
+            borderStyle: "solid";
+            borderWidth: number;
+            borderColor: string;
             backgroundColor: string;
         };
-        primaryTitleHover: {
+        dangerTitleHover: {
             color: string;
         };
-        primaryContainerHover: {
+        dangerContainerHover: {
+            borderColor: string;
             backgroundColor: string;
         };
-        primaryContainerPressed: {
+        dangerContainerPressed: {
             backgroundColor: string;
         };
-        secondaryTitle: {
+        dangerTitleDisabled: {
+            cursor: "not-allowed";
             color: string;
         };
-        secondaryContainer: {
-            borderStyle: "solid";
-            borderWidth: number;
-            borderColor: string;
+        dangerContainerDisabled: {
+            cursor: "not-allowed";
             backgroundColor: string;
+            borderColor: string;
         };
-        secondaryTitleHover: {
+        dangerIcon: {
             color: string;
         };
-        secondaryContainerHover: {
-            borderColor: string;
-            backgroundColor: string;
+        dangerIconHover: {
+            color: string;
         };
-        secondaryContainerPressed: {
-            borderColor: string;
-            backgroundColor: string;
+        dangerIconDisabled: {
+            color: string;
         };
         tertiaryTitle: {
             color: string;
@@ -92,43 +72,91 @@ declare const _default: {
         tertiaryContainerPressed: {
             backgroundColor: string;
         };
-        dangerTitle: {
+        tertiaryTitleDisabled: {
+            cursor: "not-allowed";
             color: string;
         };
-        dangerContainer: {
+        tertiaryContainerDisabled: {
+            cursor: "not-allowed";
+        };
+        tertiaryIcon: {
+            color: string;
+        };
+        tertiaryIconHover: {
+            color: string;
+        };
+        tertiaryIconDisabled: {
+            color: string;
+        };
+        secondaryTitle: {
+            color: string;
+        };
+        secondaryContainer: {
             borderStyle: "solid";
             borderWidth: number;
             borderColor: string;
             backgroundColor: string;
         };
-        dangerTitleHover: {
+        secondaryTitleHover: {
             color: string;
         };
-        dangerContainerHover: {
+        secondaryContainerHover: {
             borderColor: string;
             backgroundColor: string;
         };
-        dangerContainerPressed: {
+        secondaryContainerPressed: {
+            borderColor: string;
             backgroundColor: string;
         };
-        dangerTitlePressed: {
+        secondaryTitleDisabled: {
+            cursor: "not-allowed";
+            color: string;
+        };
+        secondaryContainerDisabled: {
+            cursor: "not-allowed";
+            borderColor: string;
+        };
+        secondaryIcon: {
+            color: string;
+        };
+        secondaryIconHover: {
+            color: string;
+        };
+        secondaryIconDisabled: {
             color: string;
         };
-        linkTitle: {
+        primaryTitle: {
             color: string;
         };
-        linkContainer: {
+        primaryContainer: {
             backgroundColor: string;
         };
-        linkTitleHover: {
+        primaryTitleHover: {
             color: string;
         };
-        linkContainerHover: {
+        primaryContainerHover: {
             backgroundColor: string;
         };
-        linkContainerPressed: {
+        primaryContainerPressed: {
             backgroundColor: string;
         };
+        primaryTitleDisabled: {
+            cursor: "not-allowed";
+            color: string;
+        };
+        primaryContainerDisabled: {
+            cursor: "not-allowed";
+            backgroundColor: string;
+        };
+        primaryIcon: {
+            color: string;
+        };
+        primaryIconHover: {
+            color: string;
+        };
+        primaryIconDisabled: {
+            color: string;
+        };
         selectedContainer: {
             backgroundColor: string;
             borderColor: string;
@@ -141,56 +169,33 @@ declare const _default: {
         selectedIcon: {
             color: string;
         };
-        xsContainer: {
-            paddingLeft: string | number;
-            paddingRight: string | number;
-            paddingTop: string | number;
-            paddingBottom: string | number;
-            borderTopLeftRadius: import("@alveole/theme").Radius;
-            borderBottomLeftRadius: import("@alveole/theme").Radius;
-            borderTopRightRadius: import("@alveole/theme").Radius;
-            borderBottomRightRadius: import("@alveole/theme").Radius;
-        };
         smContainer: {
-            paddingLeft: string | number;
-            paddingRight: string | number;
-            paddingTop: string | number;
-            paddingBottom: string | number;
+            height: "100%";
+            paddingLeft: number;
+            paddingRight: number;
             borderTopLeftRadius: import("@alveole/theme").Radius;
             borderBottomLeftRadius: import("@alveole/theme").Radius;
             borderTopRightRadius: import("@alveole/theme").Radius;
             borderBottomRightRadius: import("@alveole/theme").Radius;
         };
         mdContainer: {
-            paddingLeft: string | number;
-            paddingRight: string | number;
-            paddingTop: number;
-            paddingBottom: number;
+            height: "100%";
+            paddingLeft: number;
+            paddingRight: number;
         };
         lgContainer: {
-            paddingLeft: string | number;
-            paddingRight: string | number;
-            paddingTop: string | number;
-            paddingBottom: string | number;
-        };
-        xsContainerIconOnly: {
-            padding: string | number;
+            height: "100%";
+            paddingLeft: number;
+            paddingRight: number;
         };
-        smContainerIconOnly: {
-            padding: string | number;
+        hauteurSm: {
+            height: number;
         };
-        mdContainerIconOnly: {
-            padding: string | number;
+        hauteurMd: {
+            height: number;
         };
-        lgContainerIconOnly: {
-            padding: string | number;
-        };
-        xsTitle: {
-            readonly fontSize: 12;
-            readonly lineHeight: 20;
-            readonly letterSpacing: 0;
-            readonly fontFamily: string;
-            readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
+        hauteurLg: {
+            height: number;
         };
         smTitle: {
             readonly fontSize: 14;
@@ -213,124 +218,119 @@ declare const _default: {
             readonly fontFamily: string;
             readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        smContainerStartIcon: {
-            paddingLeft: string | number;
-        };
-        mdContainerStartIcon: {
-            paddingLeft: string | number;
-        };
-        lgContainerStartIcon: {
-            paddingLeft: string | number;
-        };
-        smContainerEndIcon: {
-            paddingRight: string | number;
-        };
-        mdContainerEndIcon: {
-            paddingRight: string | number;
-        };
-        lgContainerEndIcon: {
-            paddingRight: string | number;
-        };
-        primaryTitleDisabled: {
-            cursor: "not-allowed";
-            color: string;
-        };
-        primaryContainerDisabled: {
-            cursor: "not-allowed";
-            backgroundColor: string;
-        };
-        secondaryTitleDisabled: {
-            cursor: "not-allowed";
-            color: string;
-        };
-        secondaryContainerDisabled: {
-            cursor: "not-allowed";
-            borderColor: string;
-        };
-        tertiaryTitleDisabled: {
-            cursor: "not-allowed";
-            color: string;
-        };
-        tertiaryContainerDisabled: {
-            cursor: "not-allowed";
-        };
-        dangerTitleDisabled: {
-            cursor: "not-allowed";
-            color: string;
-        };
-        dangerContainerDisabled: {
-            cursor: "not-allowed";
-            backgroundColor: string;
-            borderColor: string;
-        };
-        primaryIcon: {
-            color: string;
-        };
-        primaryIconHover: {
-            color: string;
-        };
-        primaryIconDisabled: {
-            color: string;
-        };
-        secondaryIcon: {
-            color: string;
-        };
-        secondaryIconHover: {
-            color: string;
-        };
-        secondaryIconDisabled: {
-            color: string;
-        };
-        tertiaryIcon: {
-            color: string;
-        };
-        tertiaryIconHover: {
-            color: string;
-        };
-        tertiaryIconDisabled: {
-            color: string;
-        };
-        dangerIcon: {
-            color: string;
-        };
-        dangerIconHover: {
-            color: string;
+        container: {
+            borderStyle: "solid";
+            borderWidth: number;
+            borderColor: "transparent";
+            borderTopLeftRadius: import("@alveole/theme").Radius;
+            borderBottomLeftRadius: import("@alveole/theme").Radius;
+            borderTopRightRadius: import("@alveole/theme").Radius;
+            borderBottomRightRadius: import("@alveole/theme").Radius;
+            display: "flex";
+            flexDirection: "row";
+            justifyContent: "center";
+            alignItems: "center";
+            gap: string | number;
+            transitionProperty: "all";
+            transitionDuration: "150ms";
+            transitionTimingFunction: "ease";
         };
-        dangerIconDisabled: {
-            color: string;
+        title: {
+            cursor: "pointer";
+            textAlign: "center";
         };
-        linkIcon: {
-            color: string;
+        buttonLoader: {
+            position: "absolute";
+            top: number;
+            bottom: number;
+            left: number;
+            right: number;
+            alignItems: "center";
+            justifyContent: "center";
         };
-        linkIconDisabled: {
-            color: string;
+        libelleMasque: {
+            visibility: "hidden";
         };
     };
 };
 export default _default;
+/**
+ * Les quatre variants, du plus au moins appuyé.
+ *
+ * - `primary` : l'action principale. **Une seule par zone**.
+ * - `secondary` : les actions courantes, celles qu'on pose à côté de la principale.
+ * - `tertiary` : les actions discrètes, dans une barre d'outils ou une ligne de tableau.
+ * - `danger` : une action destructrice, réservée à la confirmation finale.
+ *
+ * Il n'y a **pas** de variante `link`. Un lien navigue, un bouton agit : c'est le partage que
+ * posent les trois références, et aucune n'offre de variante de lien sur son bouton. Primer en
+ * garde bien une dans son type, mais sans une ligne de documentation ni un exemple, là où ses
+ * quatre autres variantes ont chacune leur guidance ; sa consigne écrite est l'inverse
+ * (« Do not use links for triggering an action. Instead, use Buttons »). Atlassian n'a aucune
+ * apparence de ce nom, et son `LinkButton` fait le trajet inverse : un `<a>` habillé en bouton.
+ * Base n'a que `primary`, `secondary`, `tertiary` et leurs trois pendants `danger`.
+ *
+ * Pour ce qui navigue, prendre `A`. Pour l'action discrète sans cadre, c'est `tertiary`.
+ */
+export declare const Variants: () => React.JSX.Element;
+/** `md` par défaut. `sm` pour les zones denses, `lg` pour une action qu'on veut mettre en avant. */
 export declare const Sizes: () => React.JSX.Element;
-export declare const Primary: () => React.JSX.Element;
-export declare const Secondary: () => React.JSX.Element;
-export declare const Tertiary: () => React.JSX.Element;
-export declare const Danger: () => React.JSX.Element;
-/** @deprecated Préférer les variants `primary`, `secondary` ou `tertiary`. */
-export declare const Link: () => React.JSX.Element;
-export declare const Icons: () => React.JSX.Element;
-/** Sans `title`, le bouton passe en mode icône seule (padding carré, pas de texte). */
-export declare const IconOnly: () => React.JSX.Element;
-export declare const FullWidth: () => React.JSX.Element;
-export declare const Selected: () => React.JSX.Element;
-/** Utilisé quand le bouton est actif (ex : quand un menu est ouvert). */
-export declare const Active: () => React.JSX.Element;
 /**
- * Le spinner n'apparaît qu'après **1 000 ms** (`delay="long"`).
+ * - `disabled` : l'action n'est pas disponible. Le bouton ne répond plus ni au clic ni au clavier.
+ * - `selected` : le bouton fait partie d'un groupe et c'est lui qui est choisi.
+ * - `expanded` : le bouton commande un menu ou un panneau actuellement déplié. Il pose aussi
+ *   l'état accessible correspondant, ce que `selected` ne fait pas.
+ */
+export declare const States: () => React.JSX.Element;
+/**
+ * Le spinner n'apparaît qu'après un délai, réglé par `loadingDelay` : mêmes valeurs que la
+ * prop `delay` de `Spinner` (`false` / `true` / `'short'` (300 ms) / `'long'` / `number`).
+ * Il vaut `'long'` (1 000 ms) par défaut.
  *
  * Ce délai évite un clignotement visuel quand l'opération se termine rapidement :
  * si le serveur répond en moins d'une seconde, l'utilisateur ne voit jamais le spinner.
  * Au-delà, le spinner s'affiche pour signaler que l'attente va durer.
  *
- * Appuyez sur le bouton pour simuler une opération de 3 secondes.
+ * **Le spinner prend la place de quelque chose, il ne s'ajoute jamais** : le bouton garde donc
+ * exactement sa largeur. S'il porte une icône, c'est elle que le spinner remplace, et le
+ * libellé reste lisible. Sinon le spinner se centre et le libellé devient invisible sans
+ * quitter le flux, pour continuer d'imposer sa largeur.
+ *
+ * Pendant toute l'attente - y compris avant que le spinner ne paraisse - le bouton cesse de
+ * répondre : il sort du parcours au clavier et se déclare `aria-disabled`, pour qu'un second
+ * appui ne relance pas l'opération. Son apparence, elle, reste celle du repos.
+ *
+ * Appuyez sur un bouton pour simuler une opération de 3 secondes. Le troisième bouton, avec
+ * `loadingDelay="short"`, montre son spinner dès 300 ms - avant les deux premiers, qui
+ * attendent le délai par défaut d'une seconde.
  */
 export declare const Loading: () => React.JSX.Element;
+/** `leading` place l’icône avant le libellé, `trailing` après. Les deux peuvent coexister. */
+export declare const Icons: () => React.JSX.Element;
+/**
+ * `leading` et `trailing` acceptent aussi un élément : un avatar, un logo de réseau social.
+ * Il est posé dans un emplacement de la taille de l'icône, sans recevoir de couleur, si bien
+ * que le bouton garde sa hauteur et son alignement.
+ */
+export declare const TertiaireAvecAvatar: () => React.JSX.Element;
+/**
+ * `ButtonIcon` est la **seule** façon d'obtenir un bouton carré. `Button` exige un `title` :
+ * il ne bascule plus en mode icône seule quand on le lui retire.
+ *
+ * C'est la règle des trois références. Atlassian rend les `children` de son bouton par défaut
+ * obligatoires, si bien qu'un bouton-icône ne peut y être écrit qu'avec `IconButton`. Primer a
+ * deux composants, et la géométrie carrée n'existe que sur la classe que pose `IconButton`.
+ * Base n'a qu'un composant, mais la forme s'y demande (`shape="square"`), jamais ne se déduit.
+ *
+ * La raison est mesurable : tant que l'absence de `title` suffisait, rien ne signalait un
+ * bouton muet. Deux des quatre appels de ce genre écrits dans les applications n'avaient aucun
+ * `accessibilityLabel`. `ButtonIcon` le rend obligatoire, et le compilateur fait le reste.
+ *
+ * Il accepte `primary`, `secondary` et `tertiary`, et `iconSize` pour dissocier la taille de
+ * l'icône de celle du bouton.
+ */
+export declare const IconOnly: () => React.JSX.Element;
+/** Le bouton remplit la largeur de son parent, au lieu de s'ajuster à son contenu. */
+export declare const FullWidth: () => React.JSX.Element;
 export * as Sources from './Button.stories.sources';
 //# sourceMappingURL=Button.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAO1B,wBAQkB;AAElB,eAAO,MAAM,KAAK,yBAMjB,CAAC;AAEF,eAAO,MAAM,OAAO,yBAKnB,CAAC;AAEF,eAAO,MAAM,SAAS,yBAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,yBAKpB,CAAC;AAEF,eAAO,MAAM,MAAM,yBAKlB,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,IAAI,yBAMhB,CAAC;AAEF,eAAO,MAAM,KAAK,yBAQjB,CAAC;AAEF,uFAAuF;AACvF,eAAO,MAAM,QAAQ,yBAQpB,CAAC;AAEF,eAAO,MAAM,SAAS,yBAAkE,CAAC;AAEzF,eAAO,MAAM,QAAQ,yBAIpB,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,MAAM,yBAIlB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,OAAO,yBASnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQ1B,wBAQkB;AAElB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,QAAQ,yBAOpB,CAAC;AAEF,oGAAoG;AACpG,eAAO,MAAM,KAAK,yBAMjB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,MAAM,yBAOlB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,OAAO,yBAenB,CAAC;AAEF,8FAA8F;AAC9F,eAAO,MAAM,KAAK,yBAMjB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,yBAK/B,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,QAAQ,yBASpB,CAAC;AAEF,sFAAsF;AACtF,eAAO,MAAM,SAAS,yBAAkE,CAAC;AAEzF,OAAO,KAAK,OAAO,MAAM,0BAA0B,CAAC"}

package/dist/ui/Button/Button.stories.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
+import { Avatar } from '../Avatar';
 import { Button } from './Button';
 import { useStyles } from './Button.styles';
 import { ButtonIcon } from './ButtonIcon';
@@ -13,28 +14,55 @@ export default {
     component: Button,
     styleFn: useStyles,
 };
-export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'flex-start' }, gap: 4, children: [_jsx(Button, { variant: "secondary", size: "sm", title: "Bouton sm" }), _jsx(Button, { variant: "secondary", size: "md", title: "Bouton md" }), _jsx(Button, { variant: "secondary", size: "lg", title: "Bouton lg" })] }));
-export const Primary = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "primary", title: "Bouton primary" }), _jsx(Button, { variant: "primary", title: "Disabled", disabled: true })] }));
-export const Secondary = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "secondary", title: "Bouton secondary" }), _jsx(Button, { variant: "secondary", title: "Disabled", disabled: true })] }));
-export const Tertiary = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "tertiary", title: "Bouton tertiary" }), _jsx(Button, { variant: "tertiary", title: "Disabled", disabled: true })] }));
-export const Danger = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "danger", title: "Bouton danger" }), _jsx(Button, { variant: "danger", title: "Disabled", disabled: true })] }));
-/** @deprecated Préférer les variants `primary`, `secondary` ou `tertiary`. */
-export const Link = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "link", title: "Bouton link" }), _jsx(Button, { variant: "link", title: "Disabled", disabled: true }), _jsx(Button, { variant: "link", title: "Disabled", disabled: true, startIcon: "Pen" })] }));
-export const Icons = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "primary", title: "Start Icon", startIcon: "Plus" }), _jsx(Button, { variant: "primary", title: "End Icon", endIcon: "Plus" }), _jsx(Button, { variant: "primary", title: "End Icon", endIcon: "Plus" }), _jsx(ButtonIcon, { variant: "primary", icon: "CircleUser" }), _jsx(ButtonIcon, { variant: "primary", icon: "CircleUser" })] }));
-/** Sans `title`, le bouton passe en mode icône seule (padding carré, pas de texte). */
-export const IconOnly = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, style: { alignItems: 'center' }, children: [_jsx(Button, { variant: "tertiary", size: "sm", startIcon: "MoreHorizontal", accessibilityLabel: "Plus d'actions" }), _jsx(Button, { variant: "tertiary", size: "md", startIcon: "MoreHorizontal", accessibilityLabel: "Plus d'actions" }), _jsx(Button, { variant: "tertiary", size: "lg", startIcon: "MoreHorizontal", accessibilityLabel: "Plus d'actions" }), _jsx(Button, { variant: "secondary", size: "sm", startIcon: "Trash", accessibilityLabel: "Supprimer" }), _jsx(Button, { variant: "tertiary", size: "sm", startIcon: "MoreHorizontal", selected: true, accessibilityLabel: "Plus d'actions" })] }));
-export const FullWidth = () => _jsx(Button, { variant: "primary", title: "Full Width", fullWidth: true });
-export const Selected = () => (_jsx(Box, { display: "flex", flexDirection: "row", gap: 4, children: _jsx(Button, { variant: "secondary", title: "Selected", selected: true }) }));
-/** Utilisé quand le bouton est actif (ex : quand un menu est ouvert). */
-export const Active = () => (_jsx(Box, { display: "block", children: _jsx(Button, { variant: "secondary", title: "Active", active: true }) }));
 /**
- * Le spinner n'apparaît qu'après **1 000 ms** (`delay="long"`).
+ * Les quatre variants, du plus au moins appuyé.
+ *
+ * - `primary` : l'action principale. **Une seule par zone**.
+ * - `secondary` : les actions courantes, celles qu'on pose à côté de la principale.
+ * - `tertiary` : les actions discrètes, dans une barre d'outils ou une ligne de tableau.
+ * - `danger` : une action destructrice, réservée à la confirmation finale.
+ *
+ * Il n'y a **pas** de variante `link`. Un lien navigue, un bouton agit : c'est le partage que
+ * posent les trois références, et aucune n'offre de variante de lien sur son bouton. Primer en
+ * garde bien une dans son type, mais sans une ligne de documentation ni un exemple, là où ses
+ * quatre autres variantes ont chacune leur guidance ; sa consigne écrite est l'inverse
+ * (« Do not use links for triggering an action. Instead, use Buttons »). Atlassian n'a aucune
+ * apparence de ce nom, et son `LinkButton` fait le trajet inverse : un `<a>` habillé en bouton.
+ * Base n'a que `primary`, `secondary`, `tertiary` et leurs trois pendants `danger`.
+ *
+ * Pour ce qui navigue, prendre `A`. Pour l'action discrète sans cadre, c'est `tertiary`.
+ */
+export const Variants = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, children: [_jsx(Button, { variant: "primary", title: "Primary" }), _jsx(Button, { variant: "secondary", title: "Secondary" }), _jsx(Button, { variant: "tertiary", title: "Tertiary" }), _jsx(Button, { variant: "danger", title: "Danger" })] }));
+/** `md` par défaut. `sm` pour les zones denses, `lg` pour une action qu'on veut mettre en avant. */
+export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center' }, gap: 24, children: [_jsx(Button, { variant: "secondary", size: "sm", title: "Bouton sm" }), _jsx(Button, { variant: "secondary", size: "md", title: "Bouton md" }), _jsx(Button, { variant: "secondary", size: "lg", title: "Bouton lg" })] }));
+/**
+ * - `disabled` : l'action n'est pas disponible. Le bouton ne répond plus ni au clic ni au clavier.
+ * - `selected` : le bouton fait partie d'un groupe et c'est lui qui est choisi.
+ * - `expanded` : le bouton commande un menu ou un panneau actuellement déplié. Il pose aussi
+ *   l'état accessible correspondant, ce que `selected` ne fait pas.
+ */
+export const States = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, children: [_jsx(Button, { variant: "secondary", title: "Normal" }), _jsx(Button, { variant: "secondary", title: "Disabled", disabled: true }), _jsx(Button, { variant: "secondary", title: "Selected", selected: true }), _jsx(Button, { variant: "secondary", title: "Expanded", expanded: true })] }));
+/**
+ * Le spinner n'apparaît qu'après un délai, réglé par `loadingDelay` : mêmes valeurs que la
+ * prop `delay` de `Spinner` (`false` / `true` / `'short'` (300 ms) / `'long'` / `number`).
+ * Il vaut `'long'` (1 000 ms) par défaut.
  *
  * Ce délai évite un clignotement visuel quand l'opération se termine rapidement :
  * si le serveur répond en moins d'une seconde, l'utilisateur ne voit jamais le spinner.
  * Au-delà, le spinner s'affiche pour signaler que l'attente va durer.
  *
- * Appuyez sur le bouton pour simuler une opération de 3 secondes.
+ * **Le spinner prend la place de quelque chose, il ne s'ajoute jamais** : le bouton garde donc
+ * exactement sa largeur. S'il porte une icône, c'est elle que le spinner remplace, et le
+ * libellé reste lisible. Sinon le spinner se centre et le libellé devient invisible sans
+ * quitter le flux, pour continuer d'imposer sa largeur.
+ *
+ * Pendant toute l'attente - y compris avant que le spinner ne paraisse - le bouton cesse de
+ * répondre : il sort du parcours au clavier et se déclare `aria-disabled`, pour qu'un second
+ * appui ne relance pas l'opération. Son apparence, elle, reste celle du repos.
+ *
+ * Appuyez sur un bouton pour simuler une opération de 3 secondes. Le troisième bouton, avec
+ * `loadingDelay="short"`, montre son spinner dès 300 ms - avant les deux premiers, qui
+ * attendent le délai par défaut d'une seconde.
  */
 export const Loading = () => {
     const [isLoading, setIsLoading] = React.useState(false);
@@ -42,6 +70,33 @@ export const Loading = () => {
         setIsLoading(true);
         setTimeout(() => setIsLoading(false), 3000);
     };
-    return _jsx(Button, { variant: "primary", title: "Enregistrer", isLoading: isLoading, onPress: handlePress });
+    return (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, children: [_jsx(Button, { variant: "primary", title: "Enregistrer", isLoading: isLoading, onPress: handlePress }), _jsx(Button, { variant: "secondary", title: "Exporter", leading: "Download", isLoading: isLoading, onPress: handlePress }), _jsx(Button, { variant: "primary", title: "D\u00E9lai court", loadingDelay: "short", isLoading: isLoading, onPress: handlePress })] }));
 };
+/** `leading` place l’icône avant le libellé, `trailing` après. Les deux peuvent coexister. */
+export const Icons = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, children: [_jsx(Button, { variant: "secondary", title: "Ajouter", leading: "Plus" }), _jsx(Button, { variant: "secondary", title: "Exporter", trailing: "Download" }), _jsx(Button, { variant: "secondary", title: "Filtres", leading: "Plus", trailing: "ChevronDown" })] }));
+/**
+ * `leading` et `trailing` acceptent aussi un élément : un avatar, un logo de réseau social.
+ * Il est posé dans un emplacement de la taille de l'icône, sans recevoir de couleur, si bien
+ * que le bouton garde sa hauteur et son alignement.
+ */
+export const TertiaireAvecAvatar = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, style: { alignItems: 'center' }, children: [_jsx(Button, { variant: "tertiary", title: "Marie Curie", leading: _jsx(Avatar, { size: "xs", fallbackText: "Marie Curie" }) }), _jsx(Button, { variant: "tertiary", title: "Marie Curie", leading: "User" })] }));
+/**
+ * `ButtonIcon` est la **seule** façon d'obtenir un bouton carré. `Button` exige un `title` :
+ * il ne bascule plus en mode icône seule quand on le lui retire.
+ *
+ * C'est la règle des trois références. Atlassian rend les `children` de son bouton par défaut
+ * obligatoires, si bien qu'un bouton-icône ne peut y être écrit qu'avec `IconButton`. Primer a
+ * deux composants, et la géométrie carrée n'existe que sur la classe que pose `IconButton`.
+ * Base n'a qu'un composant, mais la forme s'y demande (`shape="square"`), jamais ne se déduit.
+ *
+ * La raison est mesurable : tant que l'absence de `title` suffisait, rien ne signalait un
+ * bouton muet. Deux des quatre appels de ce genre écrits dans les applications n'avaient aucun
+ * `accessibilityLabel`. `ButtonIcon` le rend obligatoire, et le compilateur fait le reste.
+ *
+ * Il accepte `primary`, `secondary` et `tertiary`, et `iconSize` pour dissocier la taille de
+ * l'icône de celle du bouton.
+ */
+export const IconOnly = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, style: { alignItems: 'center' }, children: [_jsx(ButtonIcon, { variant: "tertiary", size: "sm", icon: "MoreHorizontal", accessibilityLabel: "Plus d'actions" }), _jsx(ButtonIcon, { variant: "tertiary", size: "md", icon: "MoreHorizontal", accessibilityLabel: "Plus d'actions" }), _jsx(ButtonIcon, { variant: "tertiary", size: "lg", icon: "MoreHorizontal", accessibilityLabel: "Plus d'actions" }), _jsx(ButtonIcon, { variant: "secondary", size: "md", icon: "Trash", accessibilityLabel: "Supprimer" }), _jsx(ButtonIcon, { variant: "primary", size: "md", icon: "Plus", accessibilityLabel: "Ajouter" }), _jsx(ButtonIcon, { variant: "tertiary", size: "md", icon: "CircleUser", iconSize: "xs", accessibilityLabel: "Voir le profil" })] }));
+/** Le bouton remplit la largeur de son parent, au lieu de s'ajuster à son contenu. */
+export const FullWidth = () => _jsx(Button, { variant: "primary", title: "Full Width", fullWidth: true });
 export * as Sources from './Button.stories.sources';