@alveole/components 2.0.0-alpha.16 → 2.0.0-alpha.17

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

@@ -14,7 +14,7 @@ export declare const useStyles: () => {
         height: number;
         marginLeft: string | number;
         marginRight: string | number;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         transform: "rotate(15deg)";
     };
     current: {
@@ -23,7 +23,7 @@ export declare const useStyles: () => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     link: {
         transitionProperty: "text-decoration";
@@ -34,7 +34,7 @@ export declare const useStyles: () => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
 };
 //# sourceMappingURL=Breadcrumbs.styles.d.ts.map

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

@@ -1,6 +1,8 @@
 import React from 'react';
-import { View } from 'react-native';
+import { PressableInstance } from 'react-native';
 export * from './Button.types';
+export interface ButtonElement extends PressableInstance {
+}
 export declare const Button: React.ForwardRefExoticComponent<Omit<import("react-native").PressableProps, "children" | "style"> & {
     title: string;
     size?: import("./buttonVariants").ButtonTaille;
@@ -16,5 +18,5 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<import("react-
     expanded?: boolean;
     isLoading?: boolean;
     loadingDelay?: import("../Spinner/Spinner.shared").SpinnerDelay;
-} & React.RefAttributes<View>>;
+} & React.RefAttributes<ButtonElement>>;
 //# sourceMappingURL=Button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAAa,IAAI,EAAE,MAAM,cAAc,CAAC;AAO/C,cAAc,gBAAgB,CAAC;AAE/B,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;8BA0EjB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAAa,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAO5D,cAAc,gBAAgB,CAAC;AAG/B,MAAM,WAAW,aAAc,SAAQ,iBAAiB;CAAG;AAE3D,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;uCA0EjB,CAAC"}

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

@@ -20,154 +20,154 @@ declare const _default: {
         expanded?: boolean;
         isLoading?: boolean;
         loadingDelay?: import("../Spinner/Spinner.shared").SpinnerDelay;
-    } & React.RefAttributes<import("react-native").View>>;
+    } & React.RefAttributes<import("./Button").ButtonElement>>;
     styleFn: () => {
         dangerTitle: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         dangerContainer: {
             borderStyle: "solid";
             borderWidth: number;
-            borderColor: string;
-            backgroundColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         dangerTitleHover: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         dangerContainerHover: {
-            borderColor: string;
-            backgroundColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         dangerContainerPressed: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         dangerTitleDisabled: {
             cursor: "not-allowed";
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         dangerContainerDisabled: {
             cursor: "not-allowed";
-            backgroundColor: string;
-            borderColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         dangerIcon: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         dangerIconHover: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         dangerIconDisabled: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         tertiaryTitle: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         tertiaryContainer: {};
         tertiaryTitleHover: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         tertiaryContainerHover: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         tertiaryContainerPressed: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         tertiaryTitleDisabled: {
             cursor: "not-allowed";
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         tertiaryContainerDisabled: {
             cursor: "not-allowed";
         };
         tertiaryIcon: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         tertiaryIconHover: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         tertiaryIconDisabled: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         secondaryTitle: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         secondaryContainer: {
             borderStyle: "solid";
             borderWidth: number;
-            borderColor: string;
-            backgroundColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         secondaryTitleHover: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         secondaryContainerHover: {
-            borderColor: string;
-            backgroundColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         secondaryContainerPressed: {
-            borderColor: string;
-            backgroundColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         secondaryTitleDisabled: {
             cursor: "not-allowed";
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         secondaryContainerDisabled: {
             cursor: "not-allowed";
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         secondaryIcon: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         secondaryIconHover: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         secondaryIconDisabled: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         primaryTitle: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         primaryContainer: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         primaryTitleHover: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         primaryContainerHover: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         primaryContainerPressed: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         primaryTitleDisabled: {
             cursor: "not-allowed";
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         primaryContainerDisabled: {
             cursor: "not-allowed";
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         primaryIcon: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         primaryIconHover: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         primaryIconDisabled: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         selectedContainer: {
-            backgroundColor: string;
-            borderColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
+            borderColor: import("@alveole/theme").ThemeColor;
             borderWidth: number;
         };
         selectedContainerHover: {};
         selectedTitle: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         selectedIcon: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         smContainer: {
             height: "100%";

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

@@ -33,16 +33,16 @@ export default {
  *
  * 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", flexWrap: 'wrap', 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" })] }));
+export const Variants = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: "3W", 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", flexWrap: 'wrap', style: { alignItems: 'center' }, gap: 24, children: [_jsx(Button, { variant: "secondary", size: "sm", title: "Sm" }), _jsx(Button, { variant: "secondary", size: "md", title: "Md" }), _jsx(Button, { variant: "secondary", size: "lg", title: "Lg" })] }));
+export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', style: { alignItems: 'center' }, gap: "3W", children: [_jsx(Button, { variant: "secondary", size: "sm", title: "Sm" }), _jsx(Button, { variant: "secondary", size: "md", title: "Md" }), _jsx(Button, { variant: "secondary", size: "lg", title: "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", flexWrap: 'wrap', gap: 24, children: [_jsx(Button, { variant: "secondary", title: "Default" }), _jsx(Button, { variant: "secondary", title: "Disabled", disabled: true }), _jsx(Button, { variant: "secondary", title: "Selected", selected: true }), _jsx(Button, { variant: "secondary", title: "Expanded", expanded: true })] }));
+export const States = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: "3W", children: [_jsx(Button, { variant: "secondary", title: "Default" }), _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`).
@@ -71,7 +71,7 @@ export const Loading = () => {
         setIsLoading(true);
         setTimeout(() => setIsLoading(false), 3000);
     };
-    return (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', 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 })] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: "3W", 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 })] }));
 };
 /**
  * Un `onPress` qui rend une promesse verrouille le bouton jusqu'à sa fin, résolue ou rejetée :
@@ -90,16 +90,16 @@ export const OnPressAsynchrone = () => {
         setEnvois(n => n + 1);
         await new Promise(resolve => setTimeout(resolve, 3000));
     };
-    return (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: 24, style: { alignItems: 'center' }, children: [_jsx(Button, { variant: "primary", title: "Envoyer", loadingDelay: "short", onPress: envoyer }), _jsxs(Typography, { children: ["Envois : ", envois] })] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: "3W", style: { alignItems: 'center' }, children: [_jsx(Button, { variant: "primary", title: "Envoyer", loadingDelay: "short", onPress: envoyer }), _jsxs(Typography, { children: ["Envois : ", envois] })] }));
 };
 /** `leading` place l’icône avant le libellé, `trailing` après. Les deux peuvent coexister. */
-export const Icons = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: 24, children: [_jsx(Button, { variant: "secondary", title: "Leading", leading: "Plus" }), _jsx(Button, { variant: "secondary", title: "Trailing", trailing: "Download" }), _jsx(Button, { variant: "secondary", title: "Filtres", leading: "Plus", trailing: "ChevronDown" })] }));
+export const Icons = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: "3W", children: [_jsx(Button, { variant: "secondary", title: "Leading", leading: "Plus" }), _jsx(Button, { variant: "secondary", title: "Trailing", 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", flexWrap: 'wrap', 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" })] }));
+export const TertiaireAvecAvatar = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: "3W", 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.
@@ -116,7 +116,7 @@ export const TertiaireAvecAvatar = () => (_jsxs(Box, { display: "flex", flexDire
  * 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", flexWrap: 'wrap', 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" })] }));
+export const IconOnly = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: "3W", 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';

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,QAAQ,cAA+V,CAAC;AAErX,eAAO,MAAM,KAAK,cAA8V,CAAC;AAEjX,eAAO,MAAM,MAAM,cAA+X,CAAC;AAEnZ,eAAO,MAAM,OAAO,cAA2qB,CAAC;AAEhsB,eAAO,MAAM,iBAAiB,cAA6gB,CAAC;AAE5iB,eAAO,MAAM,KAAK,cAA0X,CAAC;AAE7Y,eAAO,MAAM,mBAAmB,cAAoX,CAAC;AAErZ,eAAO,MAAM,QAAQ,cAAm0B,CAAC;AAEz1B,eAAO,MAAM,SAAS,cAAwG,CAAC;AAE/H,eAAO,MAAM,YAAY;;;;;;;;;;CAUf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAUtE,CAAC"}
+{"version":3,"file":"Button.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,cAAiW,CAAC;AAEvX,eAAO,MAAM,KAAK,cAAgW,CAAC;AAEnX,eAAO,MAAM,MAAM,cAAiY,CAAC;AAErZ,eAAO,MAAM,OAAO,cAA6qB,CAAC;AAElsB,eAAO,MAAM,iBAAiB,cAA+gB,CAAC;AAE9iB,eAAO,MAAM,KAAK,cAA4X,CAAC;AAE/Y,eAAO,MAAM,mBAAmB,cAAsX,CAAC;AAEvZ,eAAO,MAAM,QAAQ,cAAq0B,CAAC;AAE31B,eAAO,MAAM,SAAS,cAAwG,CAAC;AAE/H,eAAO,MAAM,YAAY;;;;;;;;;;CAUf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAUtE,CAAC"}

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

@@ -1,13 +1,13 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Button/Button.stories.tsx
-export const Variants = () => "export const Variants = () => (\n  <Box display=\"flex\" flexDirection=\"row\" flexWrap={'wrap'} 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\" flexWrap={'wrap'} style={{ alignItems: 'center' }} gap={24}>\n    <Button variant=\"secondary\" size=\"sm\" title=\"Sm\" />\n    <Button variant=\"secondary\" size=\"md\" title=\"Md\" />\n    <Button variant=\"secondary\" size=\"lg\" title=\"Lg\" />\n  </Box>\n);";
-export const States = () => "export const States = () => (\n  <Box display=\"flex\" flexDirection=\"row\" flexWrap={'wrap'} gap={24}>\n    <Button variant=\"secondary\" title=\"Default\" />\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\" flexWrap={'wrap'} 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 OnPressAsynchrone = () => "export const OnPressAsynchrone = () => {\n  const [envois, setEnvois] = React.useState(0);\n\n  const envoyer = async () => {\n    setEnvois(n => n + 1);\n    await new Promise(resolve => setTimeout(resolve, 3000));\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"row\" flexWrap={'wrap'} gap={24} style={{ alignItems: 'center' }}>\n      <Button variant=\"primary\" title=\"Envoyer\" loadingDelay=\"short\" onPress={envoyer} />\n      <Typography>Envois : {envois}</Typography>\n    </Box>\n  );\n};";
-export const Icons = () => "export const Icons = () => (\n  <Box display=\"flex\" flexDirection=\"row\" flexWrap={'wrap'} gap={24}>\n    <Button variant=\"secondary\" title=\"Leading\" leading=\"Plus\" />\n    <Button variant=\"secondary\" title=\"Trailing\" 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\" flexWrap={'wrap'} 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\" flexWrap={'wrap'} 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 Variants = () => "export const Variants = () => (\n  <Box display=\"flex\" flexDirection=\"row\" flexWrap={'wrap'} gap=\"3W\">\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\" flexWrap={'wrap'} style={{ alignItems: 'center' }} gap=\"3W\">\n    <Button variant=\"secondary\" size=\"sm\" title=\"Sm\" />\n    <Button variant=\"secondary\" size=\"md\" title=\"Md\" />\n    <Button variant=\"secondary\" size=\"lg\" title=\"Lg\" />\n  </Box>\n);";
+export const States = () => "export const States = () => (\n  <Box display=\"flex\" flexDirection=\"row\" flexWrap={'wrap'} gap=\"3W\">\n    <Button variant=\"secondary\" title=\"Default\" />\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\" flexWrap={'wrap'} gap=\"3W\">\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 OnPressAsynchrone = () => "export const OnPressAsynchrone = () => {\n  const [envois, setEnvois] = React.useState(0);\n\n  const envoyer = async () => {\n    setEnvois(n => n + 1);\n    await new Promise(resolve => setTimeout(resolve, 3000));\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"row\" flexWrap={'wrap'} gap=\"3W\" style={{ alignItems: 'center' }}>\n      <Button variant=\"primary\" title=\"Envoyer\" loadingDelay=\"short\" onPress={envoyer} />\n      <Typography>Envois : {envois}</Typography>\n    </Box>\n  );\n};";
+export const Icons = () => "export const Icons = () => (\n  <Box display=\"flex\" flexDirection=\"row\" flexWrap={'wrap'} gap=\"3W\">\n    <Button variant=\"secondary\" title=\"Leading\" leading=\"Plus\" />\n    <Button variant=\"secondary\" title=\"Trailing\" 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\" flexWrap={'wrap'} gap=\"3W\" 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\" flexWrap={'wrap'} gap=\"3W\" 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 storySources = {
     Variants,

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

@@ -1,150 +1,150 @@
 export declare const useStyles: () => {
     dangerTitle: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     dangerContainer: {
         borderStyle: "solid";
         borderWidth: number;
-        borderColor: string;
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     dangerTitleHover: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     dangerContainerHover: {
-        borderColor: string;
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     dangerContainerPressed: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     dangerTitleDisabled: {
         cursor: "not-allowed";
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     dangerContainerDisabled: {
         cursor: "not-allowed";
-        backgroundColor: string;
-        borderColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     dangerIcon: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     dangerIconHover: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     dangerIconDisabled: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     tertiaryTitle: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     tertiaryContainer: {};
     tertiaryTitleHover: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     tertiaryContainerHover: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     tertiaryContainerPressed: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     tertiaryTitleDisabled: {
         cursor: "not-allowed";
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     tertiaryContainerDisabled: {
         cursor: "not-allowed";
     };
     tertiaryIcon: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     tertiaryIconHover: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     tertiaryIconDisabled: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     secondaryTitle: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     secondaryContainer: {
         borderStyle: "solid";
         borderWidth: number;
-        borderColor: string;
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     secondaryTitleHover: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     secondaryContainerHover: {
-        borderColor: string;
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     secondaryContainerPressed: {
-        borderColor: string;
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     secondaryTitleDisabled: {
         cursor: "not-allowed";
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     secondaryContainerDisabled: {
         cursor: "not-allowed";
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     secondaryIcon: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     secondaryIconHover: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     secondaryIconDisabled: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     primaryTitle: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     primaryContainer: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     primaryTitleHover: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     primaryContainerHover: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     primaryContainerPressed: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     primaryTitleDisabled: {
         cursor: "not-allowed";
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     primaryContainerDisabled: {
         cursor: "not-allowed";
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     primaryIcon: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     primaryIconHover: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     primaryIconDisabled: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     selectedContainer: {
-        backgroundColor: string;
-        borderColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
+        borderColor: import("@alveole/theme").ThemeColor;
         borderWidth: number;
     };
     selectedContainerHover: {};
     selectedTitle: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     selectedIcon: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     smContainer: {
         height: "100%";

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

@@ -1,30 +1,14 @@
 import { CSSProperties } from 'react';
+import { ViewStyle } from 'react-native';
 import { IconProps } from '../LucideIcon';
 import type { ButtonIconProps } from './ButtonIcon';
 import { ButtonTaille, Styles } from './buttonVariants';
 export type EtatDuBoutonIcone = Pick<ButtonIconProps, 'variant' | 'disabled' | 'iconSize' | 'style'> & {
     taille: ButtonTaille;
 };
-export declare const styleDuCadreDIcone: (styles: Styles, etat: EtatDuBoutonIcone, hovered: boolean) => {
-    backgroundColor: import("react-native").ColorValue | undefined;
-    borderRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-    borderBottomLeftRadius: string | number | import("react-native").Animated.AnimatedNode;
-    borderBottomRightRadius: string | number | import("react-native").Animated.AnimatedNode;
-    borderTopLeftRadius: string | number | import("react-native").Animated.AnimatedNode;
-    borderTopRightRadius: string | number | import("react-native").Animated.AnimatedNode;
-    width: import("react-native").DimensionValue;
-    height: import("react-native").DimensionValue;
-    overflow: "hidden";
-    borderWidth: number;
-    borderStyle: "solid";
-    borderColor: string;
-    boxSizing: "border-box";
-    justifyContent: "center";
-    alignItems: "center";
-    transitionProperty: "all";
-    transitionDuration: "150ms";
-    transitionTimingFunction: "ease";
-};
+type CadreDIcone = ViewStyle & Pick<CSSProperties, 'transitionProperty' | 'transitionDuration' | 'transitionTimingFunction'>;
+export declare const styleDuCadreDIcone: (styles: Styles, etat: EtatDuBoutonIcone, hovered: boolean) => CadreDIcone;
 export declare const apparenceDeLIcone: (styles: Styles, { variant, taille, disabled, iconSize }: EtatDuBoutonIcone, hovered: boolean) => Omit<IconProps, "name">;
 export declare const styleDuNombre: (styles: Styles, { variant, disabled }: EtatDuBoutonIcone, hovered: boolean) => CSSProperties;
+export {};
 //# sourceMappingURL=buttonIconStyling.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"buttonIconStyling.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/buttonIconStyling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EACL,YAAY,EAOZ,MAAM,EAGP,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IACrG,MAAM,EAAE,YAAY,CAAC;CACtB,CAAC;AASF,eAAO,MAAM,kBAAkB,GAAI,QAAQ,MAAM,EAAE,MAAM,iBAAiB,EAAE,SAAS,OAAO;;;;;;;;;;;;;;;;;;;CAsB3F,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,QAAQ,MAAM,EACd,yCAAyC,iBAAiB,EAC1D,SAAS,OAAO,KACf,IAAI,CAAC,SAAS,EAAE,MAAM,CAGvB,CAAC;AAEH,eAAO,MAAM,aAAa,GACxB,QAAQ,MAAM,EACd,uBAAuB,iBAAiB,EACxC,SAAS,OAAO,KACf,aASF,CAAC"}
+{"version":3,"file":"buttonIconStyling.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/buttonIconStyling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EACL,YAAY,EAOZ,MAAM,EAGP,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IACrG,MAAM,EAAE,YAAY,CAAC;CACtB,CAAC;AAUF,KAAK,WAAW,GAAG,SAAS,GAC1B,IAAI,CAAC,aAAa,EAAE,oBAAoB,GAAG,oBAAoB,GAAG,0BAA0B,CAAC,CAAC;AAEhG,eAAO,MAAM,kBAAkB,GAAI,QAAQ,MAAM,EAAE,MAAM,iBAAiB,EAAE,SAAS,OAAO,KAAG,WAsB9F,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,QAAQ,MAAM,EACd,yCAAyC,iBAAiB,EAC1D,SAAS,OAAO,KACf,IAAI,CAAC,SAAS,EAAE,MAAM,CAGvB,CAAC;AAEH,eAAO,MAAM,aAAa,GACxB,QAAQ,MAAM,EACd,uBAAuB,iBAAiB,EACxC,SAAS,OAAO,KACf,aASF,CAAC"}