@alveole/components 1.10.0 → 2.0.0-alpha.1

package/dist/ui/Button/Button.styles.js

@@ -1,6 +1,17 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ text, color, spacing, spacingValue, radius }) => ({
+// Le fichier etait une seule fonction de 229 lignes, decoupee par aspect : toutes les
+// variantes ensemble, puis toutes les tailles, puis tous les etats desactives, puis toutes
+// les icones. Une variante s'ecrivait donc en quatre endroits distincts. Le regroupement est
+// desormais celui de `buttonVariants.ts` : une fonction par variante, qui tient tout ce qui
+// change ensemble quand le design revoit cette variante.
+const commun = ({ spacing, radius }) => ({
     container: {
+        // Reserve le meme contour sur chaque variante : avec une largeur automatique, une
+        // bordure presente seulement sur secondary/danger ajouterait 2 px a leur gabarit.
+        // Les variantes sans contour visible la gardent transparente, comme Primer.
+        borderStyle: 'solid',
+        borderWidth: 1,
+        borderColor: 'transparent',
         borderTopLeftRadius: radius('md'),
         borderBottomLeftRadius: radius('md'),
         borderTopRightRadius: radius('md'),
@@ -9,20 +20,78 @@ export const useStyles = makeStyles(({ text, color, spacing, spacingValue, radiu
         flexDirection: 'row',
         justifyContent: 'center',
         alignItems: 'center',
-        gap: spacing('050'),
+        gap: spacing('1W'),
         transitionProperty: 'all',
         transitionDuration: '150ms',
         transitionTimingFunction: 'ease',
     },
-    buttonLoader: {
-        position: 'absolute',
-        right: spacingValue('075'),
-    },
     title: {
         cursor: 'pointer',
         textAlign: 'center',
     },
-    // Variants
+    // Le spinner qui remplace le libelle se centre par-dessus lui, sans sortir le libelle du
+    // flux : c'est ce dernier qui continue d'imposer la largeur du bouton. Primer obtient le
+    // meme resultat en logeant les deux dans la meme cellule de sa grille.
+    buttonLoader: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    /** Invisible mais toujours mesure : `display: none` ferait retrecir le bouton. */
+    libelleMasque: {
+        visibility: 'hidden',
+    },
+});
+const tailles = ({ text, radius, control }) => ({
+    smContainer: {
+        height: '100%',
+        paddingLeft: control('sm').paddingInline,
+        paddingRight: control('sm').paddingInline,
+        borderTopLeftRadius: radius('sm'),
+        borderBottomLeftRadius: radius('sm'),
+        borderTopRightRadius: radius('sm'),
+        borderBottomRightRadius: radius('sm'),
+    },
+    mdContainer: {
+        height: '100%',
+        paddingLeft: control('md').paddingInline,
+        paddingRight: control('md').paddingInline,
+    },
+    lgContainer: {
+        height: '100%',
+        paddingLeft: control('lg').paddingInline,
+        paddingRight: control('lg').paddingInline,
+    },
+    // Litteraux dedies au Pressable : lui seul doit connaitre la hauteur en pixels, pour
+    // l'absorber dans sa propre bordure via boxSizing. Le conteneur interieur, lui, se
+    // contente de remplir cet espace (cf. smContainer et consorts, height: '100%').
+    hauteurSm: { height: control('sm').height },
+    hauteurMd: { height: control('md').height },
+    hauteurLg: { height: control('lg').height },
+    smTitle: text['Corps de texte'].SM.Medium,
+    mdTitle: text['Corps de texte'].SM.Medium,
+    lgTitle: text['Corps de texte'].MD.Medium,
+});
+/** `selected` court-circuite la variante : ces styles valent pour les cinq. */
+const selection = ({ color }) => ({
+    selectedContainer: {
+        backgroundColor: color.light.background['alt-primary'],
+        borderColor: color.light.border['default-primary'],
+        borderWidth: 1,
+    },
+    selectedContainerHover: {},
+    selectedTitle: {
+        color: color.light.text['action-high-primary'],
+    },
+    selectedIcon: {
+        color: color.light.text['action-high-primary'],
+    },
+});
+const primaire = ({ color }) => ({
     primaryTitle: {
         color: color.light.text['inverted-primary'],
     },
@@ -38,6 +107,25 @@ export const useStyles = makeStyles(({ text, color, spacing, spacingValue, radiu
     primaryContainerPressed: {
         backgroundColor: color.light.background['action-high-primary-hover'],
     },
+    primaryTitleDisabled: {
+        cursor: 'not-allowed',
+        color: color.light.text['disabled-grey'],
+    },
+    primaryContainerDisabled: {
+        cursor: 'not-allowed',
+        backgroundColor: color.light.background['disabled-grey'],
+    },
+    primaryIcon: {
+        color: color.light.text['inverted-primary'],
+    },
+    primaryIconHover: {
+        color: color.light.text['inverted-primary'],
+    },
+    primaryIconDisabled: {
+        color: color.light.text['disabled-grey'],
+    },
+});
+const secondaire = ({ color }) => ({
     secondaryTitle: {
         color: color.light.text['action-high-grey'],
     },
@@ -58,6 +146,25 @@ export const useStyles = makeStyles(({ text, color, spacing, spacingValue, radiu
         borderColor: color.light.border['default-grey'],
         backgroundColor: color.light.background['transparent-hover'],
     },
+    secondaryTitleDisabled: {
+        cursor: 'not-allowed',
+        color: color.light.text['disabled-grey'],
+    },
+    secondaryContainerDisabled: {
+        cursor: 'not-allowed',
+        borderColor: color.light.border['disabled-grey'],
+    },
+    secondaryIcon: {
+        color: color.light.text['action-high-grey'],
+    },
+    secondaryIconHover: {
+        color: color.light.text['action-high-grey'],
+    },
+    secondaryIconDisabled: {
+        color: color.light.text['disabled-grey'],
+    },
+});
+const tertiaire = ({ color }) => ({
     tertiaryTitle: {
         color: color.light.text['action-high-grey'],
     },
@@ -71,6 +178,24 @@ export const useStyles = makeStyles(({ text, color, spacing, spacingValue, radiu
     tertiaryContainerPressed: {
         backgroundColor: color.light.background['transparent-hover'],
     },
+    tertiaryTitleDisabled: {
+        cursor: 'not-allowed',
+        color: color.light.text['disabled-grey'],
+    },
+    tertiaryContainerDisabled: {
+        cursor: 'not-allowed',
+    },
+    tertiaryIcon: {
+        color: color.light.text['action-high-grey'],
+    },
+    tertiaryIconHover: {
+        color: color.light.text['action-high-grey'],
+    },
+    tertiaryIconDisabled: {
+        color: color.light.text['disabled-grey'],
+    },
+});
+const dangereuse = ({ color }) => ({
     dangerTitle: {
         color: color.light.text['inverted-grey'],
     },
@@ -90,127 +215,6 @@ export const useStyles = makeStyles(({ text, color, spacing, spacingValue, radiu
     dangerContainerPressed: {
         backgroundColor: color.alpha(color.light.background['action-high-error'], 0.8),
     },
-    dangerTitlePressed: {
-        color: color.light.text['inverted-grey'],
-    },
-    linkTitle: {
-        color: color.text.link.default,
-    },
-    linkContainer: {
-        backgroundColor: color.background.button.tertiary.default,
-    },
-    linkTitleHover: {
-        color: color.text.link.hover,
-    },
-    linkContainerHover: {
-        backgroundColor: color.background.button.tertiary.default,
-    },
-    linkContainerPressed: {
-        backgroundColor: color.background.button.tertiary.default,
-    },
-    selectedContainer: {
-        backgroundColor: color.light.background['alt-primary'],
-        borderColor: color.light.border['default-primary'],
-        borderWidth: 1,
-    },
-    selectedContainerHover: {},
-    selectedTitle: {
-        color: color.light.text['action-high-primary'],
-    },
-    selectedIcon: {
-        color: color.light.text['action-high-primary'],
-    },
-    // Sizes
-    xsContainer: {
-        paddingLeft: spacing('075'),
-        paddingRight: spacing('075'),
-        paddingTop: spacing('050'),
-        paddingBottom: spacing('050'),
-        borderTopLeftRadius: radius('sm'),
-        borderBottomLeftRadius: radius('sm'),
-        borderTopRightRadius: radius('sm'),
-        borderBottomRightRadius: radius('sm'),
-    },
-    smContainer: {
-        paddingLeft: spacing('3V'),
-        paddingRight: spacing('3V'),
-        paddingTop: spacing('1,5V'),
-        paddingBottom: spacing('1,5V'),
-        borderTopLeftRadius: radius('sm'),
-        borderBottomLeftRadius: radius('sm'),
-        borderTopRightRadius: radius('sm'),
-        borderBottomRightRadius: radius('sm'),
-    },
-    mdContainer: {
-        paddingLeft: spacing('2W'),
-        paddingRight: spacing('2W'),
-        paddingTop: 10, // valeur mise en dure dans le Figma
-        paddingBottom: 10, // valeur mise en dure dans le Figma
-    },
-    lgContainer: {
-        paddingLeft: spacing('3W'),
-        paddingRight: spacing('3W'),
-        paddingTop: spacing('3V'),
-        paddingBottom: spacing('3V'),
-    },
-    xsContainerIconOnly: {
-        padding: spacing('050'),
-    },
-    smContainerIconOnly: {
-        padding: spacing('1W'),
-    },
-    mdContainerIconOnly: {
-        padding: spacing('1W'),
-    },
-    lgContainerIconOnly: {
-        padding: spacing('3V'),
-    },
-    xsTitle: text['Corps de texte'].XS.Regular,
-    smTitle: text['Corps de texte'].SM.Medium,
-    mdTitle: text['Corps de texte'].SM.Medium,
-    lgTitle: text['Corps de texte'].MD.Medium,
-    smContainerStartIcon: {
-        paddingLeft: spacing('050'),
-    },
-    mdContainerStartIcon: {
-        paddingLeft: spacing('075'),
-    },
-    lgContainerStartIcon: {
-        paddingLeft: spacing('100'),
-    },
-    smContainerEndIcon: {
-        paddingRight: spacing('050'),
-    },
-    mdContainerEndIcon: {
-        paddingRight: spacing('075'),
-    },
-    lgContainerEndIcon: {
-        paddingRight: spacing('100'),
-    },
-    // Disabled
-    primaryTitleDisabled: {
-        cursor: 'not-allowed',
-        color: color.light.text['disabled-grey'],
-    },
-    primaryContainerDisabled: {
-        cursor: 'not-allowed',
-        backgroundColor: color.light.background['disabled-grey'],
-    },
-    secondaryTitleDisabled: {
-        cursor: 'not-allowed',
-        color: color.light.text['disabled-grey'],
-    },
-    secondaryContainerDisabled: {
-        cursor: 'not-allowed',
-        borderColor: color.light.border['disabled-grey'],
-    },
-    tertiaryTitleDisabled: {
-        cursor: 'not-allowed',
-        color: color.light.text['disabled-grey'],
-    },
-    tertiaryContainerDisabled: {
-        cursor: 'not-allowed',
-    },
     dangerTitleDisabled: {
         cursor: 'not-allowed',
         color: color.light.text['disabled-grey'],
@@ -220,34 +224,6 @@ export const useStyles = makeStyles(({ text, color, spacing, spacingValue, radiu
         backgroundColor: color.light.background['default-grey'],
         borderColor: color.light.border['disabled-grey'],
     },
-    // Icons
-    primaryIcon: {
-        color: color.light.text['inverted-primary'],
-    },
-    primaryIconHover: {
-        color: color.light.text['inverted-primary'],
-    },
-    primaryIconDisabled: {
-        color: color.light.text['disabled-grey'],
-    },
-    secondaryIcon: {
-        color: color.light.text['action-high-grey'],
-    },
-    secondaryIconHover: {
-        color: color.light.text['action-high-grey'],
-    },
-    secondaryIconDisabled: {
-        color: color.light.text['disabled-grey'],
-    },
-    tertiaryIcon: {
-        color: color.light.text['action-high-grey'],
-    },
-    tertiaryIconHover: {
-        color: color.light.text['action-high-grey'],
-    },
-    tertiaryIconDisabled: {
-        color: color.light.text['disabled-grey'],
-    },
     dangerIcon: {
         color: color.light.text['inverted-primary'],
     },
@@ -257,10 +233,13 @@ export const useStyles = makeStyles(({ text, color, spacing, spacingValue, radiu
     dangerIconDisabled: {
         color: color.light.text['disabled-grey'],
     },
-    linkIcon: {
-        color: color.text.link.default,
-    },
-    linkIconDisabled: {
-        color: color.light.text['disabled-grey'],
-    },
+});
+export const useStyles = makeStyles(theme => ({
+    ...commun(theme),
+    ...tailles(theme),
+    ...selection(theme),
+    ...primaire(theme),
+    ...secondaire(theme),
+    ...tertiaire(theme),
+    ...dangereuse(theme),
 }));

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

@@ -0,0 +1,56 @@
+import { PressableProps } from 'react-native';
+import { BoxProps } from '../../core/Box';
+import { Leading } from '../Leading';
+import { SpinnerDelay } from '../Spinner/Spinner.shared';
+import { ButtonTaille, ButtonVariant } from './buttonVariants';
+export type ButtonProps = Omit<PressableProps, 'children' | 'style'> & {
+    /**
+     * Obligatoire : un bouton porte toujours un libellé. Pour un bouton carré sans libellé,
+     * c'est `ButtonIcon` qu'il faut prendre - lui seul rend `accessibilityLabel` obligatoire.
+     * Tant que l'absence de `title` suffisait à basculer ici en mode icône seule, rien
+     * n'empêchait d'écrire un bouton muet : deux des quatre appels mesurés dans les
+     * applications l'étaient. Atlassian rend de même ses `children` obligatoires.
+     */
+    title: string;
+    size?: ButtonTaille;
+    variant: ButtonVariant;
+    /** Avant le libellé : le nom d'une icône, ou un élément (avatar, logo). */
+    leading?: Leading;
+    /** Après le libellé : le nom d'une icône, ou un élément. */
+    trailing?: Leading;
+    /**
+     * `center` par defaut. `start` cale le contenu a gauche et pousse `trailing` contre le bord
+     * droit : c'est l'`alignContent` de Primer (renomme, ce nom etant reserve aux props CSS par le lint), pour un bouton qui occupe toute une largeur
+     * (selecteur d'organisation, compte en pied de barre laterale).
+     */
+    contentAlign?: 'center' | 'start';
+    selected?: boolean;
+    ContainerProps?: BoxProps;
+    fullWidth?: boolean;
+    type?: 'button' | 'submit';
+    /** @deprecated Utiliser `expanded`, qui decrit un menu deplie et pose l'etat accessible. */
+    active?: boolean;
+    /** Le bouton commande un menu ou un panneau actuellement deplie. */
+    expanded?: boolean;
+    isLoading?: boolean;
+    /**
+     * Retard avant que le spinner de `isLoading` ne paraisse. Memes valeurs que la prop `delay`
+     * de `Spinner` (`false`/`true`/`'short'`/`'long'`/`number`). `'long'` (1000 ms) par defaut,
+     * pour eviter un clignotement quand l'operation se termine vite.
+     */
+    loadingDelay?: SpinnerDelay;
+};
+/**
+ * Ce que les styles ont besoin de savoir du bouton, une fois les defauts resolus. Le separer
+ * de `ButtonProps` evite de passer les rappels et les props d'accessibilite a des fonctions
+ * qui n'ont rien a en faire.
+ */
+export type EtatDuBouton = {
+    variant: ButtonVariant;
+    taille: ButtonTaille;
+    selected?: boolean;
+    disabled?: boolean | null;
+    fullWidth?: boolean;
+};
+export declare const etatDuBouton: (props: ButtonProps) => EtatDuBouton;
+//# sourceMappingURL=Button.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAE/D,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACrE;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,EAAE,aAAa,CAAC;IACvB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,4FAA4F;IAC5F,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,aAAa,CAAC;IACvB,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,WAAW,KAAG,YAMhD,CAAC"}

package/dist/ui/Button/Button.types.js

@@ -0,0 +1,7 @@
+export const etatDuBouton = (props) => ({
+    variant: props.variant,
+    taille: props.size ?? 'md',
+    selected: props.selected,
+    disabled: props.disabled,
+    fullWidth: props.fullWidth,
+});

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

@@ -0,0 +1,18 @@
+import { EtatDuPointeur } from '../pointeur';
+import { ButtonProps, EtatDuBouton } from './Button.types';
+import { Styles } from './buttonVariants';
+type ButtonContentProps = {
+    styles: Styles;
+    etat: EtatDuBouton;
+    state: EtatDuPointeur;
+    /** Vrai quand le bouton est appuye, ou qu'il commande un menu deplie. */
+    actif: boolean;
+    props: ButtonProps;
+};
+/**
+ * Le contenu du bouton : ce que le Pressable enveloppe. La coque decide de la bordure, des
+ * rayons et du focus ; ce composant-ci decide de ce qui se voit dedans.
+ */
+export declare const ButtonContent: ({ styles, etat, state, actif, props }: ButtonContentProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ButtonContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonContent.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/ButtonContent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE3D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAG1C,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,cAAc,CAAC;IACtB,yEAAyE;IACzE,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,WAAW,CAAC;CACpB,CAAC;AAWF;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,uCAAuC,kBAAkB,gCA2CtF,CAAC"}

package/dist/ui/Button/ButtonContent.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { LeadingSlot } from '../Leading';
+import { Spinner } from '../Spinner';
+import { useDelaiDAffichage } from '../Spinner/useDelaiDAffichage';
+import { styleDeLIcone, styleDeSurvol, styleDuConteneur, styleDuLibelle } from './buttonStyling';
+import { placeDuSpinner } from './placeDuSpinner';
+/** Un cote du libelle : son contenu, ou le spinner venu prendre sa place. */
+const Emplacement = ({ spinner, contenu, apparence }) => {
+    if (spinner)
+        return _jsx(Spinner, { size: "sm" });
+    return _jsx(LeadingSlot, { contenu: contenu, apparence: apparence });
+};
+/**
+ * Le contenu du bouton : ce que le Pressable enveloppe. La coque decide de la bordure, des
+ * rayons et du focus ; ce composant-ci decide de ce qui se voit dedans.
+ */
+export const ButtonContent = ({ styles, etat, state, actif, props }) => {
+    const { title, leading, trailing, contentAlign = 'center', isLoading, loadingDelay = 'long', ContainerProps = {}, } = props;
+    const { style, hoverStyle, ...containerProps } = ContainerProps;
+    const hovered = !!state.hovered;
+    const icone = styleDeLIcone(styles, etat, hovered);
+    const place = placeDuSpinner(useDelaiDAffichage(isLoading ? loadingDelay : false) && !!isLoading, leading, trailing);
+    const recouvreLeLibelle = place === 'libelle';
+    const aGauche = contentAlign === 'start';
+    return (_jsxs(Box, { style: [styleDuConteneur(styles, etat, actif), aGauche && { justifyContent: 'flex-start' }, style], hoverStyle: { ...styleDeSurvol(styles, etat), ...hoverStyle }, ...containerProps, children: [_jsx(Emplacement, { spinner: place === 'tete', contenu: leading, apparence: icone }), _jsx(Typography, { "user-select": "false", style: {
+                    ...styleDuLibelle(styles, etat, hovered),
+                    ...(recouvreLeLibelle ? styles.libelleMasque : {}),
+                    ...(aGauche ? { flexGrow: 1, textAlign: 'left' } : {}),
+                }, children: title }), _jsx(Emplacement, { spinner: place === 'fin', contenu: trailing, apparence: icone }), recouvreLeLibelle && (_jsx(Box, { style: styles.buttonLoader, children: _jsx(Spinner, { size: "sm" }) }))] }));
+};

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

@@ -1,24 +1,17 @@
-import { PressableProps } from 'react-native';
+import { PressableProps, ViewStyle } from 'react-native';
 import { IconProps } from '../LucideIcon';
-export type ButtonIconProps = Omit<PressableProps, 'children' | 'style'> & {
-    size?: 'sm' | 'md' | 'lg';
+import { ButtonTaille } from './buttonVariants';
+export type ButtonIconProps = Omit<PressableProps, 'children' | 'style' | 'accessibilityLabel'> & {
+    /**
+     * Obligatoire : un bouton sans libelle n'a rien d'autre pour se decrire. Le rendre optionnel
+     * laissait passer dix appels muets, qu'aucun audit ne pouvait signaler.
+     */
+    accessibilityLabel: string;
+    size?: ButtonTaille;
     iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     variant: 'primary' | 'secondary' | 'tertiary';
 } & {
-    style?: {
-        width?: number | string;
-        height?: number | string;
-        borderTop?: string;
-        borderBottom?: string;
-        borderLeft?: string;
-        borderRight?: string;
-        borderRadius?: number;
-        borderTopLeftRadius?: number;
-        borderBottomLeftRadius?: number;
-        borderTopRightRadius?: number;
-        borderBottomRightRadius?: number;
-        backgroundColor?: string;
-    };
+    style?: Pick<ViewStyle, 'width' | 'height' | 'borderRadius' | 'borderTopLeftRadius' | 'borderBottomLeftRadius' | 'borderTopRightRadius' | 'borderBottomRightRadius' | 'backgroundColor'>;
 } & {
     icon: IconProps['name'] | number;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/ButtonIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,cAAc,EAA8B,MAAM,cAAc,CAAC;AAErF,OAAO,EAAE,SAAS,EAAc,MAAM,eAAe,CAAC;AAOtD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACzE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5C,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;CAC/C,GAAG;IAEF,KAAK,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QACzB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,sBAAsB,CAAC,EAAE,MAAM,CAAC;QAChC,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC;CACH,GAAG;IAAE,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,MAAM,CAAA;CAAE,CAAC;AAEzC,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,gCAqFhD,CAAC"}
+{"version":3,"file":"ButtonIcon.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/ButtonIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAc,MAAM,eAAe,CAAC;AAItD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,GAAG,oBAAoB,CAAC,GAAG;IAChG;;;OAGG;IACH,kBAAkB,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5C,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;CAC/C,GAAG;IAEF,KAAK,CAAC,EAAE,IAAI,CACV,SAAS,EACP,OAAO,GACP,QAAQ,GACR,cAAc,GACd,qBAAqB,GACrB,wBAAwB,GACxB,sBAAsB,GACtB,yBAAyB,GACzB,iBAAiB,CACpB,CAAC;CACH,GAAG;IAAE,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,MAAM,CAAA;CAAE,CAAC;AAEzC,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,gCAsBhD,CAAC"}

package/dist/ui/Button/ButtonIcon.js

@@ -1,97 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { focusRingProps } from '@alveole/theme';
 import { Pressable } from 'react-native';
-import { Typography } from '../../core';
+import { Typography } from '../../core/Typography';
 import { LucideIcon } from '../LucideIcon';
 import { useStyles } from './Button.styles';
+import { apparenceDeLIcone, styleDuCadreDIcone, styleDuNombre } from './buttonIconStyling';
 export const ButtonIcon = (props) => {
-    const { size, variant, disabled, style, iconSize: iconSizeProp, ...buttonProps } = props;
-    const iconSize = iconSizeProp ?? (size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'md');
+    const { size, variant, disabled, style, iconSize, ...buttonProps } = props;
+    const etat = { variant, taille: size ?? 'md', disabled, iconSize, style };
     const styles = useStyles();
-    const containerSize = size === 'sm'
-        ? styles.smContainerIconOnly
-        : size === 'lg'
-            ? styles.lgContainerIconOnly
-            : styles.mdContainerIconOnly;
-    const containerStyle = (state) => {
-        let applicableStyles = styles.container;
-        if (variant === 'primary') {
-            applicableStyles = { ...applicableStyles, ...styles.primaryContainer };
-            if (disabled)
-                applicableStyles = { ...applicableStyles, ...styles.primaryContainerDisabled };
-            else if (!!state.hovered)
-                applicableStyles = { ...applicableStyles, ...styles.primaryContainerHover };
-        }
-        else if (variant === 'secondary') {
-            applicableStyles = { ...applicableStyles, ...styles.secondaryContainer };
-            if (disabled)
-                applicableStyles = { ...applicableStyles, ...styles.secondaryContainerDisabled };
-            else if (!!state.hovered)
-                applicableStyles = { ...applicableStyles, ...styles.secondaryContainerHover };
-        }
-        else if (variant === 'tertiary') {
-            applicableStyles = { ...applicableStyles, ...styles.tertiaryContainer };
-            if (disabled)
-                applicableStyles = { ...applicableStyles, ...styles.tertiaryContainerDisabled };
-            else if (!!state.hovered)
-                applicableStyles = { ...applicableStyles, ...styles.tertiaryContainerHover };
-        }
-        return { ...applicableStyles, ...containerSize, ...(style ?? {}) };
-    };
-    const iconStyle = (state) => {
-        if (variant === 'primary') {
-            if (disabled)
-                return { size: iconSize, color: styles.primaryIconDisabled.color };
-            else if (state.hovered)
-                return { size: iconSize, color: styles.primaryIconHover.color };
-            return { size: iconSize, color: styles.primaryIcon.color };
-        }
-        else if (variant === 'secondary') {
-            if (disabled)
-                return { size: iconSize, color: styles.secondaryIconDisabled.color };
-            else if (state.hovered)
-                return { size: iconSize, color: styles.secondaryIconHover.color };
-            return { size: iconSize, color: styles.secondaryIcon.color };
-        }
-        else if (variant === 'tertiary') {
-            if (disabled)
-                return { size: iconSize, color: styles.tertiaryIconDisabled.color };
-            else if (state.hovered)
-                return { size: iconSize, color: styles.tertiaryIconHover.color };
-            return { size: iconSize, color: styles.tertiaryIcon.color };
-        }
-        return { size: iconSize };
-    };
-    const textStyle = (state) => {
-        let applicableStyles = styles.title;
-        if (variant === 'primary') {
-            applicableStyles = { ...applicableStyles, ...styles.primaryTitle };
-            if (disabled)
-                applicableStyles = { ...applicableStyles, ...styles.primaryTitleDisabled };
-            else if (state.hovered)
-                applicableStyles = { ...applicableStyles, ...styles.primaryTitleHover };
-        }
-        else if (variant === 'secondary') {
-            applicableStyles = { ...applicableStyles, ...styles.secondaryTitle };
-            if (disabled)
-                applicableStyles = { ...applicableStyles, ...styles.secondaryTitleDisabled };
-            else if (state.hovered)
-                applicableStyles = { ...applicableStyles, ...styles.secondaryTitleHover };
-        }
-        else if (variant === 'tertiary') {
-            applicableStyles = { ...applicableStyles, ...styles.tertiaryTitle };
-            if (disabled)
-                applicableStyles = { ...applicableStyles, ...styles.tertiaryTitleDisabled };
-            else if (state.hovered)
-                applicableStyles = { ...applicableStyles, ...styles.tertiaryTitleHover };
-        }
-        else if (variant === 'link') {
-            applicableStyles = { ...applicableStyles, ...styles.linkTitle };
-            if (disabled)
-                applicableStyles = { ...applicableStyles, ...styles.tertiaryTitleDisabled };
-            else if (state.hovered)
-                applicableStyles = { ...applicableStyles, ...styles.linkTitleHover };
-        }
-        return { ...applicableStyles, minWidth: 16 };
-    };
-    return (_jsx(Pressable, { style: containerStyle, disabled: disabled, ...buttonProps, children: (state) => typeof props.icon === 'number' ? (_jsx(Typography, { style: { ...textStyle({ hovered: !!state.hovered }) }, children: props.icon })) : (_jsx(LucideIcon, { name: props.icon, ...iconStyle({ hovered: !!state.hovered }) })) }));
+    return (_jsx(Pressable, { accessibilityRole: "button", style: (state) => styleDuCadreDIcone(styles, etat, !!state.hovered), disabled: disabled, ...focusRingProps(), ...buttonProps, children: (state) => typeof props.icon === 'number' ? (_jsx(Typography, { style: styleDuNombre(styles, etat, !!state.hovered), children: props.icon })) : (_jsx(LucideIcon, { name: props.icon, ...apparenceDeLIcone(styles, etat, !!state.hovered) })) }));
 };

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

@@ -0,0 +1,30 @@
+import { CSSProperties } from 'react';
+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;
+    borderBottomLeftRadius: string | number | import("react-native").Animated.AnimatedNode;
+    borderBottomRightRadius: string | number | import("react-native").Animated.AnimatedNode;
+    borderRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+    borderTopLeftRadius: string | number | import("react-native").Animated.AnimatedNode;
+    borderTopRightRadius: string | number | import("react-native").Animated.AnimatedNode;
+    height: import("react-native").DimensionValue;
+    width: 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";
+};
+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;
+//# sourceMappingURL=buttonIconStyling.d.ts.map