@alveole/components 1.10.0 → 2.0.0-alpha.1

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

@@ -1,28 +1,20 @@
+export declare const Variants: () => string;
 export declare const Sizes: () => string;
-export declare const Primary: () => string;
-export declare const Secondary: () => string;
-export declare const Tertiary: () => string;
-export declare const Danger: () => string;
-export declare const Link: () => string;
+export declare const States: () => string;
+export declare const Loading: () => string;
 export declare const Icons: () => string;
+export declare const TertiaireAvecAvatar: () => string;
 export declare const IconOnly: () => string;
 export declare const FullWidth: () => string;
-export declare const Selected: () => string;
-export declare const Active: () => string;
-export declare const Loading: () => string;
 export declare const storySources: {
+    readonly Variants: () => string;
     readonly Sizes: () => string;
-    readonly Primary: () => string;
-    readonly Secondary: () => string;
-    readonly Tertiary: () => string;
-    readonly Danger: () => string;
-    readonly Link: () => string;
+    readonly States: () => string;
+    readonly Loading: () => string;
     readonly Icons: () => string;
+    readonly TertiaireAvecAvatar: () => string;
     readonly IconOnly: () => string;
     readonly FullWidth: () => string;
-    readonly Selected: () => string;
-    readonly Active: () => string;
-    readonly Loading: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
 export declare const storyDescriptions: Partial<Record<StorySourceName, string>>;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAAoW,CAAC;AAEvX,eAAO,MAAM,OAAO,cAA4O,CAAC;AAEjQ,eAAO,MAAM,SAAS,cAAoP,CAAC;AAE3Q,eAAO,MAAM,QAAQ,cAAgP,CAAC;AAEtQ,eAAO,MAAM,MAAM,cAAwO,CAAC;AAE5P,eAAO,MAAM,IAAI,cAA+S,CAAC;AAEjU,eAAO,MAAM,KAAK,cAAic,CAAC;AAEpd,eAAO,MAAM,QAAQ,cAAitB,CAAC;AAEvuB,eAAO,MAAM,SAAS,cAAwG,CAAC;AAE/H,eAAO,MAAM,QAAQ,cAAkL,CAAC;AAExM,eAAO,MAAM,MAAM,cAA+I,CAAC;AAEnK,eAAO,MAAM,OAAO,cAAyU,CAAC;AAE9V,eAAO,MAAM,YAAY;;;;;;;;;;;;;CAaf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAKtE,CAAC"}
+{"version":3,"file":"Button.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,cAA6U,CAAC;AAEnW,eAAO,MAAM,KAAK,cAAiW,CAAC;AAEpX,eAAO,MAAM,MAAM,cAA4W,CAAC;AAEhY,eAAO,MAAM,OAAO,cAAypB,CAAC;AAE9qB,eAAO,MAAM,KAAK,cAAwW,CAAC;AAE3X,eAAO,MAAM,mBAAmB,cAAkW,CAAC;AAEnY,eAAO,MAAM,QAAQ,cAAizB,CAAC;AAEv0B,eAAO,MAAM,SAAS,cAAwG,CAAC;AAE/H,eAAO,MAAM,YAAY;;;;;;;;;CASf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAStE,CAAC"}

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

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

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

@@ -1,60 +1,40 @@
 export declare const useStyles: () => {
-    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;
@@ -69,43 +49,91 @@ export declare const useStyles: () => {
     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;
     };
-    linkTitle: {
+    secondaryContainerDisabled: {
+        cursor: "not-allowed";
+        borderColor: string;
+    };
+    secondaryIcon: {
+        color: string;
+    };
+    secondaryIconHover: {
+        color: string;
+    };
+    secondaryIconDisabled: {
+        color: string;
+    };
+    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;
@@ -118,56 +146,33 @@ export declare const useStyles: () => {
     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;
+        height: "100%";
+        paddingLeft: number;
+        paddingRight: number;
     };
-    xsContainerIconOnly: {
-        padding: string | number;
+    hauteurSm: {
+        height: number;
     };
-    smContainerIconOnly: {
-        padding: string | number;
+    hauteurMd: {
+        height: number;
     };
-    mdContainerIconOnly: {
-        padding: string | 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;
@@ -190,97 +195,39 @@ export declare const useStyles: () => {
         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;
+    /** Invisible mais toujours mesure : `display: none` ferait retrecir le bouton. */
+    libelleMasque: {
+        visibility: "hidden";
     };
 };
 //# sourceMappingURL=Button.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoRnB,CAAC"}
+{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.styles.ts"],"names":[],"mappings":"AAqQA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA/MlB,kFAAkF;;;;CAuNnF,CAAC"}