@alveole/components 1.10.0 → 2.0.0-alpha.1

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

@@ -0,0 +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"}

package/dist/ui/Button/buttonIconStyling.js

@@ -0,0 +1,43 @@
+import { styleDuPressable } from './buttonStyling';
+import { cleDEtat, CONTENEUR_PAR_VARIANT, HAUTEUR_PAR_TAILLE, ICONE_PAR_VARIANT, styleDe, SURVOL_PAR_VARIANT, TEXTE_PAR_VARIANT, } from './buttonVariants';
+/** Faute d'`iconSize`, l'icone suit la taille du bouton, en repliant `md` sur elle-meme. */
+const ICONE_PAR_TAILLE = {
+    sm: 'sm',
+    md: 'md',
+    lg: 'lg',
+};
+export const styleDuCadreDIcone = (styles, etat, hovered) => {
+    const { variant, taille, disabled, style } = etat;
+    // Le survol tient ici le role que l'appui tient sur `Button` : c'est le seul etat actif
+    // qu'un bouton sans libelle connaisse. D'ou l'etat actif emprunte a la table de survol,
+    // le repos et le desactive restant ceux du conteneur.
+    const etatsDuFond = { ...CONTENEUR_PAR_VARIANT[variant], actif: SURVOL_PAR_VARIANT[variant] };
+    return {
+        justifyContent: styles.container.justifyContent,
+        alignItems: styles.container.alignItems,
+        transitionProperty: styles.container.transitionProperty,
+        transitionDuration: styles.container.transitionDuration,
+        transitionTimingFunction: styles.container.transitionTimingFunction,
+        backgroundColor: {
+            ...styles[etatsDuFond.repos],
+            ...styleDe(styles, cleDEtat(etatsDuFond, { disabled, actif: hovered })),
+        }.backgroundColor,
+        ...styleDuPressable(styles, { variant, taille, disabled }, { hovered }),
+        // Le socle de `Button` pose la hauteur du cran de controle ; le carre n'a qu'a la reprendre.
+        width: styles[HAUTEUR_PAR_TAILLE[taille]].height,
+        ...(style ?? {}),
+    };
+};
+export const apparenceDeLIcone = (styles, { variant, taille, disabled, iconSize }, hovered) => ({
+    size: iconSize ?? ICONE_PAR_TAILLE[taille],
+    color: styles[cleDEtat(ICONE_PAR_VARIANT[variant], { disabled, actif: hovered })].color,
+});
+export const styleDuNombre = (styles, { variant, disabled }, hovered) => {
+    const etats = TEXTE_PAR_VARIANT[variant];
+    return {
+        ...styles.title,
+        ...styles[etats.repos],
+        ...styleDe(styles, cleDEtat(etats, { disabled, actif: hovered })),
+        minWidth: 16,
+    };
+};

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

@@ -0,0 +1,28 @@
+import { StyleValue } from '@alveole/theme';
+import { IconProps } from '../LucideIcon';
+import { EtatDuBouton } from './Button.types';
+import { Styles } from './buttonVariants';
+/** Le fond et les rembourrages : tout ce qui se pose sur le Box interieur. */
+export declare const styleDuConteneur: (styles: Styles, etat: EtatDuBouton, actif: boolean) => StyleValue;
+/** Le survol n'est pas un etat rendu : c'est une prop que Tamagui appliquera lui-meme. */
+export declare const styleDeSurvol: (styles: Styles, { variant, selected, disabled }: EtatDuBouton) => StyleValue;
+export declare const styleDuLibelle: (styles: Styles, etat: EtatDuBouton, hovered: boolean) => StyleValue;
+export declare const styleDeLIcone: (styles: Styles, etat: EtatDuBouton, hovered: boolean) => Omit<IconProps, "name">;
+/** Les rayons et la bordure : tout ce qui se pose sur le Pressable. La bague de focus, elle,
+ * vient du CSS du theme via l'attribut pose sur le Pressable. */
+export declare const styleDuPressable: (styles: Styles, etat: EtatDuBouton, state: {
+    hovered: boolean;
+}) => {
+    width?: "100%" | undefined;
+    overflow: "hidden";
+    borderWidth: number;
+    borderStyle: "solid";
+    borderColor: string;
+    borderTopLeftRadius: import("@alveole/theme").Radius;
+    borderBottomLeftRadius: import("@alveole/theme").Radius;
+    borderTopRightRadius: import("@alveole/theme").Radius;
+    borderBottomRightRadius: import("@alveole/theme").Radius;
+    height: number;
+    boxSizing: "border-box";
+};
+//# sourceMappingURL=buttonStyling.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"buttonStyling.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/buttonStyling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAQL,MAAM,EAIP,MAAM,kBAAkB,CAAC;AAc1B,8EAA8E;AAC9E,eAAO,MAAM,gBAAgB,GAAI,QAAQ,MAAM,EAAE,MAAM,YAAY,EAAE,OAAO,OAAO,KAAG,UASpF,CAAC;AAEH,0FAA0F;AAC1F,eAAO,MAAM,aAAa,GAAI,QAAQ,MAAM,EAAE,iCAAiC,YAAY,KAAG,UAK7F,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,QAAQ,MAAM,EAAE,MAAM,YAAY,EAAE,SAAS,OAAO,KAAG,UAQrF,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,QAAQ,MAAM,EAAE,MAAM,YAAY,EAAE,SAAS,OAAO,KAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAO1G,CAAC;AAEF;iEACiE;AACjE,eAAO,MAAM,gBAAgB,GAAI,QAAQ,MAAM,EAAE,MAAM,YAAY,EAAE,OAAO;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE;;;;;;;;;;;;CAgC/F,CAAC"}

package/dist/ui/Button/buttonStyling.js

@@ -0,0 +1,78 @@
+import { BORDURE_PAR_VARIANT, cleDEtat, CONTENEUR_PAR_TAILLE, CONTENEUR_PAR_VARIANT, HAUTEUR_PAR_TAILLE, ICONE_PAR_VARIANT, styleDe, SURVOL_PAR_VARIANT, TEXTE_PAR_VARIANT, TITRE_PAR_TAILLE, } from './buttonVariants';
+/**
+ * Choisit le style de fond du conteneur. `selected` court-circuite la variante : un bouton
+ * selectionne a le meme fond quelle que soit sa variante et quel que soit son etat.
+ */
+const styleDeFond = (styles, { variant, selected, disabled }, actif) => {
+    if (selected)
+        return styles.selectedContainer;
+    const etats = CONTENEUR_PAR_VARIANT[variant];
+    return { ...styles[etats.repos], ...styleDe(styles, cleDEtat(etats, { disabled, actif })) };
+};
+/** Le fond et les rembourrages : tout ce qui se pose sur le Box interieur. */
+export const styleDuConteneur = (styles, etat, actif) => ({
+    ...styles.container,
+    ...styleDeFond(styles, etat, actif),
+    ...styleDe(styles, CONTENEUR_PAR_TAILLE[etat.taille]),
+    // La bordure est posee sur le Pressable, pas ici : le Box doit donc annuler celle que son
+    // style de variante lui aurait donnee, sans quoi les deux se superposeraient.
+    borderWidth: 0,
+    borderColor: undefined,
+    borderStyle: undefined,
+});
+/** Le survol n'est pas un etat rendu : c'est une prop que Tamagui appliquera lui-meme. */
+export const styleDeSurvol = (styles, { variant, selected, disabled }) => {
+    if (disabled)
+        return {};
+    if (selected)
+        return styles.selectedContainerHover;
+    return styleDe(styles, SURVOL_PAR_VARIANT[variant]);
+};
+export const styleDuLibelle = (styles, etat, hovered) => {
+    const { variant, selected, disabled, taille } = etat;
+    const etats = TEXTE_PAR_VARIANT[variant];
+    const teinte = selected
+        ? styles.selectedTitle
+        : { ...styles[etats.repos], ...styleDe(styles, cleDEtat(etats, { disabled, actif: hovered })) };
+    return { ...styles.title, ...teinte, ...styleDe(styles, TITRE_PAR_TAILLE[taille]) };
+};
+export const styleDeLIcone = (styles, etat, hovered) => {
+    const { variant, selected, disabled, taille } = etat;
+    const size = taille === 'lg' ? 'md' : 'sm';
+    if (selected)
+        return { size, color: styles.selectedIcon.color };
+    return { size, color: styles[cleDEtat(ICONE_PAR_VARIANT[variant], { disabled, actif: hovered })].color };
+};
+/** Les rayons et la bordure : tout ce qui se pose sur le Pressable. La bague de focus, elle,
+ * vient du CSS du theme via l'attribut pose sur le Pressable. */
+export const styleDuPressable = (styles, etat, state) => {
+    const { variant, selected, disabled, taille, fullWidth } = etat;
+    // `sm` est la seule taille qui redefinit ses rayons ; les deux autres gardent ceux du conteneur.
+    const source = taille === 'sm' ? styles.smContainer : styles.container;
+    // Sans hauteur posee ici, le Pressable s'auto-dimensionnait autour du Box interieur : une
+    // variante bordee (secondary, danger) devenait alors plus haute qu'une variante pleine, la
+    // bordure s'ajoutant au-dela des 32/28/40 px voulus. boxSizing absorbe la bordure dans cette
+    // hauteur au lieu de l'ajouter par-dessus.
+    const hauteur = styles[HAUTEUR_PAR_TAILLE[taille]].height;
+    const rayons = {
+        borderTopLeftRadius: source.borderTopLeftRadius,
+        borderBottomLeftRadius: source.borderBottomLeftRadius,
+        borderTopRightRadius: source.borderTopRightRadius,
+        borderBottomRightRadius: source.borderBottomRightRadius,
+    };
+    const bordure = (borderColor) => ({ borderWidth: 1, borderStyle: 'solid', borderColor });
+    const etats = BORDURE_PAR_VARIANT[variant];
+    const contour = selected
+        ? bordure(styles.selectedContainer.borderColor)
+        : etats
+            ? bordure(styles[cleDEtat(etats, { disabled, actif: state.hovered })].borderColor)
+            : bordure(styles.container.borderColor);
+    return {
+        height: hauteur,
+        boxSizing: 'border-box',
+        ...rayons,
+        ...contour,
+        overflow: 'hidden',
+        ...(fullWidth ? { width: '100%' } : {}),
+    };
+};

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

@@ -0,0 +1,58 @@
+import { StyleValue } from '@alveole/theme';
+import { useStyles } from './Button.styles';
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger';
+export type ButtonTaille = 'sm' | 'md' | 'lg';
+export type Styles = ReturnType<typeof useStyles>;
+export type StyleKey = keyof Styles;
+/** Styles porteurs d'une couleur, seuls utilisables pour teinter une icone. */
+export type StyleCouleurKey = {
+    [K in StyleKey]: Styles[K] extends {
+        color: string;
+    } ? K : never;
+}[StyleKey];
+/** Styles porteurs d'une couleur de bordure visible, pour `secondary` et `danger`. */
+export type StyleBordureKey = {
+    [K in StyleKey]: Styles[K] extends {
+        borderColor: string;
+    } ? K : never;
+}[StyleKey];
+export type StyleHauteurKey = {
+    [K in StyleKey]: Styles[K] extends {
+        height: number;
+    } ? K : never;
+}[StyleKey];
+/** Les trois etats qu'une variante distingue, quel que soit l'aspect qu'on teinte. */
+export type EtatVisuel<K = StyleKey> = {
+    repos: K;
+    desactive: K;
+    actif: K;
+};
+export type EtatCouleur = EtatVisuel<StyleCouleurKey>;
+export type EtatBordure = EtatVisuel<StyleBordureKey>;
+/**
+ * La seule regle de priorite entre etats du dossier : desactive d'abord, puis actif, sinon
+ * repos. Elle etait recopiee a chaque aspect teinte - fond, libelle, icone, bordure - et
+ * dans les deux composants, soit huit fois la meme decision.
+ */
+export declare const cleDEtat: <K>(table: EtatVisuel<K>, { disabled, actif }: {
+    disabled?: boolean | null;
+    actif?: boolean | null;
+}) => K;
+/**
+ * Indexer `styles` par une cle prise dans toute l'union fait renoncer TypeScript (TS2590) :
+ * le type produit est trop large pour etre represente. `StyleValue` est le type que
+ * `makeStyles` donne deja a chacune de ses entrees, donc le declarer ici n'elargit rien : ca
+ * aplatit l'union au point d'acces. Les deux composants y arrivaient avant en typant leurs
+ * accumulateurs `any`.
+ */
+export declare const styleDe: (styles: Styles, cle: StyleKey) => StyleValue;
+/** Le conteneur change de famille de styles selon que le bouton porte un libelle ou non. */
+export declare const HAUTEUR_PAR_TAILLE: Record<ButtonTaille, StyleHauteurKey>;
+export declare const CONTENEUR_PAR_TAILLE: Record<ButtonTaille, StyleKey>;
+export declare const TITRE_PAR_TAILLE: Record<ButtonTaille, StyleKey>;
+export declare const CONTENEUR_PAR_VARIANT: Record<ButtonVariant, EtatVisuel>;
+export declare const BORDURE_PAR_VARIANT: Partial<Record<ButtonVariant, EtatBordure>>;
+export declare const SURVOL_PAR_VARIANT: Record<ButtonVariant, StyleKey>;
+export declare const TEXTE_PAR_VARIANT: Record<ButtonVariant, EtatVisuel>;
+export declare const ICONE_PAR_VARIANT: Record<ButtonVariant, EtatCouleur>;
+//# sourceMappingURL=buttonVariants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"buttonVariants.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/buttonVariants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,CAAC;AAC5E,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,MAAM,MAAM,MAAM,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,MAAM,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC;AAEpC,+EAA+E;AAC/E,MAAM,MAAM,eAAe,GAAG;KAAG,CAAC,IAAI,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAC,SAAS;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,CAAC,GAAG,KAAK;CAAE,CAAC,QAAQ,CAAC,CAAC;AAE7G,sFAAsF;AACtF,MAAM,MAAM,eAAe,GAAG;KAAG,CAAC,IAAI,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAC,SAAS;QAAE,WAAW,EAAE,MAAM,CAAA;KAAE,GAAG,CAAC,GAAG,KAAK;CAAE,CAAC,QAAQ,CAAC,CAAC;AAEnH,MAAM,MAAM,eAAe,GAAG;KAAG,CAAC,IAAI,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAC,SAAS;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,CAAC,GAAG,KAAK;CAAE,CAAC,QAAQ,CAAC,CAAC;AAE9G,sFAAsF;AACtF,MAAM,MAAM,UAAU,CAAC,CAAC,GAAG,QAAQ,IAAI;IAAE,KAAK,EAAE,CAAC,CAAC;IAAC,SAAS,EAAE,CAAC,CAAC;IAAC,KAAK,EAAE,CAAC,CAAA;CAAE,CAAC;AAC5E,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;AACtD,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;AAEtD;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,CAAC,EACxB,OAAO,UAAU,CAAC,CAAC,CAAC,EACpB,qBAAqB;IAAE,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;CAAE,MACP,CAAC;AAEtE;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,GAAI,QAAQ,MAAM,EAAE,KAAK,QAAQ,KAAG,UAAyB,CAAC;AAElF,4FAA4F;AAC5F,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,CAIpE,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAI/D,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAI3D,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,aAAa,EAAE,UAAU,CASnE,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAO3E,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,aAAa,EAAE,QAAQ,CAK9D,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,aAAa,EAAE,UAAU,CAK/D,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,aAAa,EAAE,WAAW,CAKhE,CAAC"}

package/dist/ui/Button/buttonVariants.js

@@ -0,0 +1,66 @@
+/**
+ * La seule regle de priorite entre etats du dossier : desactive d'abord, puis actif, sinon
+ * repos. Elle etait recopiee a chaque aspect teinte - fond, libelle, icone, bordure - et
+ * dans les deux composants, soit huit fois la meme decision.
+ */
+export const cleDEtat = (table, { disabled, actif }) => (disabled ? table.desactive : actif ? table.actif : table.repos);
+/**
+ * Indexer `styles` par une cle prise dans toute l'union fait renoncer TypeScript (TS2590) :
+ * le type produit est trop large pour etre represente. `StyleValue` est le type que
+ * `makeStyles` donne deja a chacune de ses entrees, donc le declarer ici n'elargit rien : ca
+ * aplatit l'union au point d'acces. Les deux composants y arrivaient avant en typant leurs
+ * accumulateurs `any`.
+ */
+export const styleDe = (styles, cle) => styles[cle];
+/** Le conteneur change de famille de styles selon que le bouton porte un libelle ou non. */
+export const HAUTEUR_PAR_TAILLE = {
+    sm: 'hauteurSm',
+    md: 'hauteurMd',
+    lg: 'hauteurLg',
+};
+export const CONTENEUR_PAR_TAILLE = {
+    sm: 'smContainer',
+    md: 'mdContainer',
+    lg: 'lgContainer',
+};
+export const TITRE_PAR_TAILLE = {
+    sm: 'smTitle',
+    md: 'mdTitle',
+    lg: 'lgTitle',
+};
+export const CONTENEUR_PAR_VARIANT = {
+    primary: { repos: 'primaryContainer', desactive: 'primaryContainerDisabled', actif: 'primaryContainerPressed' },
+    secondary: {
+        repos: 'secondaryContainer',
+        desactive: 'secondaryContainerDisabled',
+        actif: 'secondaryContainerPressed',
+    },
+    tertiary: { repos: 'tertiaryContainer', desactive: 'tertiaryContainerDisabled', actif: 'tertiaryContainerPressed' },
+    danger: { repos: 'dangerContainer', desactive: 'dangerContainerDisabled', actif: 'dangerContainerPressed' },
+};
+export const BORDURE_PAR_VARIANT = {
+    secondary: {
+        repos: 'secondaryContainer',
+        desactive: 'secondaryContainerDisabled',
+        actif: 'secondaryContainerHover',
+    },
+    danger: { repos: 'dangerContainer', desactive: 'dangerContainerDisabled', actif: 'dangerContainerHover' },
+};
+export const SURVOL_PAR_VARIANT = {
+    primary: 'primaryContainerHover',
+    secondary: 'secondaryContainerHover',
+    tertiary: 'tertiaryContainerHover',
+    danger: 'dangerContainerHover',
+};
+export const TEXTE_PAR_VARIANT = {
+    primary: { repos: 'primaryTitle', desactive: 'primaryTitleDisabled', actif: 'primaryTitleHover' },
+    secondary: { repos: 'secondaryTitle', desactive: 'secondaryTitleDisabled', actif: 'secondaryTitleHover' },
+    tertiary: { repos: 'tertiaryTitle', desactive: 'tertiaryTitleDisabled', actif: 'tertiaryTitleHover' },
+    danger: { repos: 'dangerTitle', desactive: 'dangerTitleDisabled', actif: 'dangerTitleHover' },
+};
+export const ICONE_PAR_VARIANT = {
+    primary: { repos: 'primaryIcon', desactive: 'primaryIconDisabled', actif: 'primaryIconHover' },
+    secondary: { repos: 'secondaryIcon', desactive: 'secondaryIconDisabled', actif: 'secondaryIconHover' },
+    tertiary: { repos: 'tertiaryIcon', desactive: 'tertiaryIconDisabled', actif: 'tertiaryIconHover' },
+    danger: { repos: 'dangerIcon', desactive: 'dangerIconDisabled', actif: 'dangerIconHover' },
+};

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

@@ -0,0 +1,11 @@
+import { ButtonProps } from './Button.types';
+/**
+ * Ce que le spinner remplace, car il ne s'ajoute jamais : c'est ainsi que le bouton garde sa
+ * largeur, regle commune a Primer, Atlassian et Base.
+ *
+ * L'ordre est celui de Primer : le contenu de tete d'abord, le contenu de fin sinon, et faute des
+ * deux le libelle lui-meme - qui reste alors dans le flux en `visibility: hidden`, pour
+ * continuer d'imposer sa largeur pendant que le spinner se centre par-dessus.
+ */
+export declare const placeDuSpinner: (visible: boolean, leading?: ButtonProps["leading"], trailing?: ButtonProps["trailing"]) => "tete" | "fin" | "libelle" | null;
+//# sourceMappingURL=placeDuSpinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"placeDuSpinner.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/placeDuSpinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GACzB,SAAS,OAAO,EAChB,UAAU,WAAW,CAAC,SAAS,CAAC,EAChC,WAAW,WAAW,CAAC,UAAU,CAAC,KACjC,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,IAM/B,CAAC"}

package/dist/ui/Button/placeDuSpinner.js

@@ -0,0 +1,17 @@
+/**
+ * Ce que le spinner remplace, car il ne s'ajoute jamais : c'est ainsi que le bouton garde sa
+ * largeur, regle commune a Primer, Atlassian et Base.
+ *
+ * L'ordre est celui de Primer : le contenu de tete d'abord, le contenu de fin sinon, et faute des
+ * deux le libelle lui-meme - qui reste alors dans le flux en `visibility: hidden`, pour
+ * continuer d'imposer sa largeur pendant que le spinner se centre par-dessus.
+ */
+export const placeDuSpinner = (visible, leading, trailing) => {
+    if (!visible)
+        return null;
+    if (leading)
+        return 'tete';
+    if (trailing)
+        return 'fin';
+    return 'libelle';
+};

package/dist/ui/Card/Card.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps } from '../../core';
+import { BoxProps } from '../../core/Box';
 import { CardActions } from './CardActions';
 import { CardHeader } from './CardHeader';
 import { CardMedia } from './CardMedia';

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAO,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC;AAEjC,QAAA,MAAM,QAAQ,GAAI,OAAO,SAAS,sBAiBjC,CAAC;AAEF,KAAK,qBAAqB,GAAG,OAAO,QAAQ,GAAG;IAC7C,MAAM,EAAE,OAAO,UAAU,CAAC;IAC1B,OAAO,EAAE,OAAO,WAAW,CAAC;IAC5B,OAAO,EAAE,OAAO,WAAW,CAAC;IAC5B,KAAK,EAAE,OAAO,SAAS,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,qBAKjB,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG/C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC;AAEjC,QAAA,MAAM,QAAQ,GAAI,OAAO,SAAS,sBAkBjC,CAAC;AAEF,KAAK,qBAAqB,GAAG,OAAO,QAAQ,GAAG;IAC7C,MAAM,EAAE,OAAO,UAAU,CAAC;IAC1B,OAAO,EAAE,OAAO,WAAW,CAAC;IAC5B,OAAO,EAAE,OAAO,WAAW,CAAC;IAC5B,KAAK,EAAE,OAAO,SAAS,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,qBAKjB,CAAC"}

package/dist/ui/Card/Card.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
+import { GridColumnContext } from '../../core/Grid';
 import { useStyles } from './Card.styles';
 import { CardActions } from './CardActions';
 import { CardHeader } from './CardHeader';
@@ -9,10 +10,11 @@ import { CardSection } from './CardSection';
 const CardBase = (props) => {
     const { style, children, ...boxProps } = props;
     const styles = useStyles();
+    const inGridColumn = React.useContext(GridColumnContext);
     const allChildren = React.Children.toArray(children);
     const mediaChild = allChildren.find(child => React.isValidElement(child) && child.type === CardMedia);
     const contentChildren = allChildren.filter(child => !(React.isValidElement(child) && child.type === CardMedia));
-    return (_jsxs(Box, { tag: "card", style: [styles.card, style], ...boxProps, children: [mediaChild, _jsx(Box, { tag: "card-content", style: [styles.content], children: contentChildren })] }));
+    return (_jsxs(Box, { tag: "card", style: [styles.card, inGridColumn && styles.fill, style], ...boxProps, children: [mediaChild, _jsx(Box, { tag: "card-content", style: [styles.content], children: contentChildren })] }));
 };
 export const Card = Object.assign(CardBase, {
     Header: CardHeader,

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

@@ -53,6 +53,9 @@ declare const _default: {
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
+        descriptionLink: {
+            textDecoration: string;
+        };
         disabledText: {
             color: string;
         };
@@ -65,6 +68,7 @@ export declare const cardWithMedia: () => import("react").JSX.Element;
 export declare const cardWithMediaDisabled: () => import("react").JSX.Element;
 export declare const cardSection: () => import("react").JSX.Element;
 export declare const cardSectionDisabled: () => import("react").JSX.Element;
+export declare const cardSectionWithLink: () => import("react").JSX.Element;
 export declare const cardHeader: () => import("react").JSX.Element;
 export declare const cardHeaderDisabled: () => import("react").JSX.Element;
 /** Privilégier l'utilisation de bouton en taille SM, avec le bouton primary toujours à droite. */

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

@@ -1 +1 @@
-{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/Card.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,wBAQkB;AAElB,eAAO,MAAM,IAAI,mCAuBhB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAwBxB,CAAC;AAEF,eAAO,MAAM,aAAa,mCA0BzB,CAAC;AAEF,eAAO,MAAM,qBAAqB,mCA2BjC,CAAC;AAEF,eAAO,MAAM,WAAW,mCASvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,mCAU/B,CAAC;AAEF,eAAO,MAAM,UAAU,mCAiBtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mCAc9B,CAAC;AAEF,kGAAkG;AAClG,eAAO,MAAM,WAAW,mCAOvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/Card.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,wBAQkB;AAElB,eAAO,MAAM,IAAI,mCAuBhB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAwBxB,CAAC;AAEF,eAAO,MAAM,aAAa,mCA0BzB,CAAC;AAEF,eAAO,MAAM,qBAAqB,mCA2BjC,CAAC;AAEF,eAAO,MAAM,WAAW,mCASvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,mCAU/B,CAAC;AAEF,eAAO,MAAM,mBAAmB,mCAU/B,CAAC;AAEF,eAAO,MAAM,UAAU,mCAiBtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mCAc9B,CAAC;AAEF,kGAAkG;AAClG,eAAO,MAAM,WAAW,mCAOvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

package/dist/ui/Card/Card.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
 import { Avatar } from '../Avatar';
 import { Badge } from '../Badge';
 import { Button } from '../Button';
@@ -19,13 +19,13 @@ export const card = () => {
     return (_jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Card, { children: [_jsx(Card.Header, { titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(Avatar, { size: "md", fallbackText: "M" }), badge: _jsx(Badge, { variant: "success", size: "sm", children: "PR\u00C9SENT" }) }), _jsx(Card.Section, { titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsx(Card.Section, { titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsxs(Card.Actions, { children: [_jsx(Button, { variant: "secondary", title: "Libell\u00E9", size: "sm" }), _jsx(Button, { variant: "primary", title: "Libell\u00E9", size: "sm" })] })] }) }));
 };
 export const cardDisabled = () => {
-    return (_jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Card, { children: [_jsx(Card.Header, { variant: "disabled", titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(Avatar, { size: "md", src: "https://picsum.photos/100/100", fallbackText: "M" }), badge: _jsx(Badge, { variant: "disabled", size: "sm", children: "PR\u00C9SENT" }) }), _jsx(Card.Section, { variant: "disabled", titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsx(Card.Section, { variant: "disabled", titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsxs(Card.Actions, { children: [_jsx(Button, { variant: "secondary", title: "Libell\u00E9", size: "sm", disabled: true }), _jsx(Button, { variant: "primary", title: "Libell\u00E9", size: "sm", disabled: true })] })] }) }));
+    return (_jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Card, { children: [_jsx(Card.Header, { variant: "disabled", titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(Avatar, { size: "md", src: "https://picsum.photos/100/100", fallbackText: "M" }), badge: _jsx(Badge, { variant: "default", size: "sm", children: "PR\u00C9SENT" }) }), _jsx(Card.Section, { variant: "disabled", titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsx(Card.Section, { variant: "disabled", titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsxs(Card.Actions, { children: [_jsx(Button, { variant: "secondary", title: "Libell\u00E9", size: "sm", disabled: true }), _jsx(Button, { variant: "primary", title: "Libell\u00E9", size: "sm", disabled: true })] })] }) }));
 };
 export const cardWithMedia = () => {
     return (_jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Card, { children: [_jsx(Card.Media, { children: _jsx("img", { src: "https://picsum.photos/400/200", alt: "", style: { width: '100%', display: 'block' } }) }), _jsx(Card.Header, { titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(Avatar, { size: "md", fallbackText: "M" }), badge: _jsx(Badge, { variant: "success", size: "sm", children: "PR\u00C9SENT" }) }), _jsx(Card.Section, { titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsx(Card.Section, { titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsxs(Card.Actions, { children: [_jsx(Button, { variant: "secondary", title: "Libell\u00E9", size: "sm" }), _jsx(Button, { variant: "primary", title: "Libell\u00E9", size: "sm" })] })] }) }));
 };
 export const cardWithMediaDisabled = () => {
-    return (_jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Card, { children: [_jsx(Card.Media, { variant: "disabled", children: _jsx("img", { src: "https://picsum.photos/400/200", alt: "", style: { width: '100%', display: 'block' } }) }), _jsx(Card.Header, { variant: "disabled", titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(Avatar, { size: "md", fallbackText: "M" }), badge: _jsx(Badge, { variant: "disabled", size: "sm", children: "PR\u00C9SENT" }) }), _jsx(Card.Section, { variant: "disabled", titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsx(Card.Section, { variant: "disabled", titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsxs(Card.Actions, { children: [_jsx(Button, { variant: "secondary", title: "Libell\u00E9", size: "sm", disabled: true }), _jsx(Button, { variant: "primary", title: "Libell\u00E9", size: "sm", disabled: true })] })] }) }));
+    return (_jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Card, { children: [_jsx(Card.Media, { variant: "disabled", children: _jsx("img", { src: "https://picsum.photos/400/200", alt: "", style: { width: '100%', display: 'block' } }) }), _jsx(Card.Header, { variant: "disabled", titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(Avatar, { size: "md", fallbackText: "M" }), badge: _jsx(Badge, { variant: "default", size: "sm", children: "PR\u00C9SENT" }) }), _jsx(Card.Section, { variant: "disabled", titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsx(Card.Section, { variant: "disabled", titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsxs(Card.Actions, { children: [_jsx(Button, { variant: "secondary", title: "Libell\u00E9", size: "sm", disabled: true }), _jsx(Button, { variant: "primary", title: "Libell\u00E9", size: "sm", disabled: true })] })] }) }));
 };
 export const cardSection = () => {
     return (_jsx(Card.Section, { titre: "Titre de la carte", description: "Description de la carte", titreIcone: "Image", descriptionIcone: "Image" }));
@@ -33,11 +33,14 @@ export const cardSection = () => {
 export const cardSectionDisabled = () => {
     return (_jsx(Card.Section, { variant: "disabled", titre: "Titre de la carte", description: "Description de la carte", titreIcone: "Image", descriptionIcone: "Image" }));
 };
+export const cardSectionWithLink = () => {
+    return (_jsx(Card.Section, { titre: "Titre de la carte", description: "Description de la carte", descriptionLink: "/", titreIcone: "Image", descriptionIcone: "Image" }));
+};
 export const cardHeader = () => {
     return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "100", children: [_jsx(Card.Header, { titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(Avatar, { size: "md", fallbackText: "M" }), badge: _jsx(Badge, { variant: "success", size: "sm", children: "PR\u00C9SENT" }) }), _jsx(Card.Header, { titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(LucideIcon, { name: "Image", size: "md" }) })] }));
 };
 export const cardHeaderDisabled = () => {
-    return (_jsx(Card.Header, { variant: "disabled", titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(Avatar, { size: "md", fallbackText: "M" }), badge: _jsx(Badge, { variant: "disabled", size: "sm", children: "PR\u00C9SENT" }) }));
+    return (_jsx(Card.Header, { variant: "disabled", titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(Avatar, { size: "md", fallbackText: "M" }), badge: _jsx(Badge, { variant: "default", size: "sm", children: "PR\u00C9SENT" }) }));
 };
 /** Privilégier l'utilisation de bouton en taille SM, avec le bouton primary toujours à droite. */
 export const cardActions = () => {

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

@@ -4,6 +4,7 @@ export declare const cardWithMedia: () => string;
 export declare const cardWithMediaDisabled: () => string;
 export declare const cardSection: () => string;
 export declare const cardSectionDisabled: () => string;
+export declare const cardSectionWithLink: () => string;
 export declare const cardHeader: () => string;
 export declare const cardHeaderDisabled: () => string;
 export declare const cardActions: () => string;
@@ -14,6 +15,7 @@ export declare const storySources: {
     readonly cardWithMediaDisabled: () => string;
     readonly cardSection: () => string;
     readonly cardSectionDisabled: () => string;
+    readonly cardSectionWithLink: () => string;
     readonly cardHeader: () => string;
     readonly cardHeaderDisabled: () => string;
     readonly cardActions: () => string;

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

@@ -1 +1 @@
-{"version":3,"file":"Card.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/Card.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI,cAA80B,CAAC;AAEh2B,eAAO,MAAM,YAAY,cAAy9B,CAAC;AAEn/B,eAAO,MAAM,aAAa,cAAk/B,CAAC;AAE7gC,eAAO,MAAM,qBAAqB,cAA4mC,CAAC;AAE/oC,eAAO,MAAM,WAAW,cAA8O,CAAC;AAEvQ,eAAO,MAAM,mBAAmB,cAAkR,CAAC;AAEnT,eAAO,MAAM,UAAU,cAA2hB,CAAC;AAEnjB,eAAO,MAAM,kBAAkB,cAAqW,CAAC;AAErY,eAAO,MAAM,WAAW,cAAoP,CAAC;AAE7Q,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,CAEtE,CAAC"}
+{"version":3,"file":"Card.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/Card.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI,cAA80B,CAAC;AAEh2B,eAAO,MAAM,YAAY,cAAw9B,CAAC;AAEl/B,eAAO,MAAM,aAAa,cAAk/B,CAAC;AAE7gC,eAAO,MAAM,qBAAqB,cAA2mC,CAAC;AAE9oC,eAAO,MAAM,WAAW,cAA8O,CAAC;AAEvQ,eAAO,MAAM,mBAAmB,cAAkR,CAAC;AAEnT,eAAO,MAAM,mBAAmB,cAAmR,CAAC;AAEpT,eAAO,MAAM,UAAU,cAA2hB,CAAC;AAEnjB,eAAO,MAAM,kBAAkB,cAAoW,CAAC;AAEpY,eAAO,MAAM,WAAW,cAAoP,CAAC;AAE7Q,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAEtE,CAAC"}

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

@@ -1,13 +1,14 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Card/Card.stories.tsx
 export const card = () => "export const card = () => {\n  return (\n    <Box style={{ width: '100%', maxWidth: 400 }}>\n      <Card>\n        <Card.Header\n          titre=\"Titre lorem\"\n          sousTitre=\"Sous-titre\"\n          image={<Avatar size=\"md\" fallbackText=\"M\" />}\n          badge={\n            <Badge variant=\"success\" size=\"sm\">\n              PRÉSENT\n            </Badge>\n          }\n        />\n        <Card.Section titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Section titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Actions>\n          <Button variant=\"secondary\" title=\"Libellé\" size=\"sm\" />\n          <Button variant=\"primary\" title=\"Libellé\" size=\"sm\" />\n        </Card.Actions>\n      </Card>\n    </Box>\n  );\n};";
-export const cardDisabled = () => "export const cardDisabled = () => {\n  return (\n    <Box style={{ width: '100%', maxWidth: 400 }}>\n      <Card>\n        <Card.Header\n          variant=\"disabled\"\n          titre=\"Titre lorem\"\n          sousTitre=\"Sous-titre\"\n          image={<Avatar size=\"md\" src=\"https://picsum.photos/100/100\" fallbackText=\"M\" />}\n          badge={\n            <Badge variant=\"disabled\" size=\"sm\">\n              PRÉSENT\n            </Badge>\n          }\n        />\n        <Card.Section variant=\"disabled\" titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Section variant=\"disabled\" titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Actions>\n          <Button variant=\"secondary\" title=\"Libellé\" size=\"sm\" disabled />\n          <Button variant=\"primary\" title=\"Libellé\" size=\"sm\" disabled />\n        </Card.Actions>\n      </Card>\n    </Box>\n  );\n};";
+export const cardDisabled = () => "export const cardDisabled = () => {\n  return (\n    <Box style={{ width: '100%', maxWidth: 400 }}>\n      <Card>\n        <Card.Header\n          variant=\"disabled\"\n          titre=\"Titre lorem\"\n          sousTitre=\"Sous-titre\"\n          image={<Avatar size=\"md\" src=\"https://picsum.photos/100/100\" fallbackText=\"M\" />}\n          badge={\n            <Badge variant=\"default\" size=\"sm\">\n              PRÉSENT\n            </Badge>\n          }\n        />\n        <Card.Section variant=\"disabled\" titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Section variant=\"disabled\" titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Actions>\n          <Button variant=\"secondary\" title=\"Libellé\" size=\"sm\" disabled />\n          <Button variant=\"primary\" title=\"Libellé\" size=\"sm\" disabled />\n        </Card.Actions>\n      </Card>\n    </Box>\n  );\n};";
 export const cardWithMedia = () => "export const cardWithMedia = () => {\n  return (\n    <Box style={{ width: '100%', maxWidth: 400 }}>\n      <Card>\n        <Card.Media>\n          <img src=\"https://picsum.photos/400/200\" alt=\"\" style={{ width: '100%', display: 'block' }} />\n        </Card.Media>\n        <Card.Header\n          titre=\"Titre lorem\"\n          sousTitre=\"Sous-titre\"\n          image={<Avatar size=\"md\" fallbackText=\"M\" />}\n          badge={\n            <Badge variant=\"success\" size=\"sm\">\n              PRÉSENT\n            </Badge>\n          }\n        />\n        <Card.Section titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Section titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Actions>\n          <Button variant=\"secondary\" title=\"Libellé\" size=\"sm\" />\n          <Button variant=\"primary\" title=\"Libellé\" size=\"sm\" />\n        </Card.Actions>\n      </Card>\n    </Box>\n  );\n};";
-export const cardWithMediaDisabled = () => "export const cardWithMediaDisabled = () => {\n  return (\n    <Box style={{ width: '100%', maxWidth: 400 }}>\n      <Card>\n        <Card.Media variant=\"disabled\">\n          <img src=\"https://picsum.photos/400/200\" alt=\"\" style={{ width: '100%', display: 'block' }} />\n        </Card.Media>\n        <Card.Header\n          variant=\"disabled\"\n          titre=\"Titre lorem\"\n          sousTitre=\"Sous-titre\"\n          image={<Avatar size=\"md\" fallbackText=\"M\" />}\n          badge={\n            <Badge variant=\"disabled\" size=\"sm\">\n              PRÉSENT\n            </Badge>\n          }\n        />\n        <Card.Section variant=\"disabled\" titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Section variant=\"disabled\" titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Actions>\n          <Button variant=\"secondary\" title=\"Libellé\" size=\"sm\" disabled />\n          <Button variant=\"primary\" title=\"Libellé\" size=\"sm\" disabled />\n        </Card.Actions>\n      </Card>\n    </Box>\n  );\n};";
+export const cardWithMediaDisabled = () => "export const cardWithMediaDisabled = () => {\n  return (\n    <Box style={{ width: '100%', maxWidth: 400 }}>\n      <Card>\n        <Card.Media variant=\"disabled\">\n          <img src=\"https://picsum.photos/400/200\" alt=\"\" style={{ width: '100%', display: 'block' }} />\n        </Card.Media>\n        <Card.Header\n          variant=\"disabled\"\n          titre=\"Titre lorem\"\n          sousTitre=\"Sous-titre\"\n          image={<Avatar size=\"md\" fallbackText=\"M\" />}\n          badge={\n            <Badge variant=\"default\" size=\"sm\">\n              PRÉSENT\n            </Badge>\n          }\n        />\n        <Card.Section variant=\"disabled\" titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Section variant=\"disabled\" titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Actions>\n          <Button variant=\"secondary\" title=\"Libellé\" size=\"sm\" disabled />\n          <Button variant=\"primary\" title=\"Libellé\" size=\"sm\" disabled />\n        </Card.Actions>\n      </Card>\n    </Box>\n  );\n};";
 export const cardSection = () => "export const cardSection = () => {\n  return (\n    <Card.Section\n      titre=\"Titre de la carte\"\n      description=\"Description de la carte\"\n      titreIcone=\"Image\"\n      descriptionIcone=\"Image\"\n    />\n  );\n};";
 export const cardSectionDisabled = () => "export const cardSectionDisabled = () => {\n  return (\n    <Card.Section\n      variant=\"disabled\"\n      titre=\"Titre de la carte\"\n      description=\"Description de la carte\"\n      titreIcone=\"Image\"\n      descriptionIcone=\"Image\"\n    />\n  );\n};";
+export const cardSectionWithLink = () => "export const cardSectionWithLink = () => {\n  return (\n    <Card.Section\n      titre=\"Titre de la carte\"\n      description=\"Description de la carte\"\n      descriptionLink=\"/\"\n      titreIcone=\"Image\"\n      descriptionIcone=\"Image\"\n    />\n  );\n};";
 export const cardHeader = () => "export const cardHeader = () => {\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"100\">\n      <Card.Header\n        titre=\"Titre lorem\"\n        sousTitre=\"Sous-titre\"\n        image={<Avatar size=\"md\" fallbackText=\"M\" />}\n        badge={\n          <Badge variant=\"success\" size=\"sm\">\n            PRÉSENT\n          </Badge>\n        }\n      />\n\n      <Card.Header titre=\"Titre lorem\" sousTitre=\"Sous-titre\" image={<LucideIcon name=\"Image\" size=\"md\" />} />\n    </Box>\n  );\n};";
-export const cardHeaderDisabled = () => "export const cardHeaderDisabled = () => {\n  return (\n    <Card.Header\n      variant=\"disabled\"\n      titre=\"Titre lorem\"\n      sousTitre=\"Sous-titre\"\n      image={<Avatar size=\"md\" fallbackText=\"M\" />}\n      badge={\n        <Badge variant=\"disabled\" size=\"sm\">\n          PRÉSENT\n        </Badge>\n      }\n    />\n  );\n};";
+export const cardHeaderDisabled = () => "export const cardHeaderDisabled = () => {\n  return (\n    <Card.Header\n      variant=\"disabled\"\n      titre=\"Titre lorem\"\n      sousTitre=\"Sous-titre\"\n      image={<Avatar size=\"md\" fallbackText=\"M\" />}\n      badge={\n        <Badge variant=\"default\" size=\"sm\">\n          PRÉSENT\n        </Badge>\n      }\n    />\n  );\n};";
 export const cardActions = () => "export const cardActions = () => {\n  return (\n    <Card.Actions>\n      <Button variant=\"secondary\" title=\"Action\" size=\"sm\" />\n      <Button variant=\"primary\" title=\"Action\" size=\"sm\" />\n    </Card.Actions>\n  );\n};";
 export const storySources = {
     card,
@@ -16,6 +17,7 @@ export const storySources = {
     cardWithMediaDisabled,
     cardSection,
     cardSectionDisabled,
+    cardSectionWithLink,
     cardHeader,
     cardHeaderDisabled,
     cardActions,

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

@@ -11,7 +11,11 @@ export declare const useStyles: () => {
         borderRadius: import("@alveole/theme").Radius;
         overflow: "hidden";
     };
+    fill: {
+        flexGrow: number;
+    };
     content: {
+        flexGrow: number;
         display: "flex";
         flexDirection: "column";
         gap: string | number;

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

@@ -1 +1 @@
-{"version":3,"file":"Card.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/Card.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;CAmBnB,CAAC"}
+{"version":3,"file":"Card.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/Card.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;CA0BnB,CAAC"}

package/dist/ui/Card/Card.styles.js

@@ -12,7 +12,14 @@ export const useStyles = makeStyles(({ spacing, color, radius }) => ({
         borderRadius: radius('md'),
         overflow: 'hidden',
     },
+    // Dans une `Grid.Column`, la carte prend la hauteur de la ligne.
+    fill: {
+        flexGrow: 1,
+    },
+    // Le contenu occupe la hauteur de la carte : quand elle est étirée, les actions
+    // descendent en bas plutôt que de rester sous le texte.
     content: {
+        flexGrow: 1,
         display: 'flex',
         flexDirection: 'column',
         gap: spacing('3V'),

package/dist/ui/Card/CardActions.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps } from '../../core';
+import { BoxProps } from '../../core/Box';
 export type CardActionsProps = BoxProps;
 export declare const CardActions: (props: CardActionsProps) => import("react").JSX.Element;
 //# sourceMappingURL=CardActions.d.ts.map

package/dist/ui/Card/CardActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardActions.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/CardActions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,MAAM,YAAY,CAAC;AAG3C,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;AAExC,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,gCAUlD,CAAC"}
+{"version":3,"file":"CardActions.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/CardActions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG/C,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;AAExC,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,gCAUlD,CAAC"}

package/dist/ui/Card/CardActions.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
 import { useStyles } from './CardActions.styles';
 export const CardActions = (props) => {
     const { style, children, ...boxProps } = props;

package/dist/ui/Card/CardActions.styles.d.ts

@@ -6,6 +6,7 @@ export declare const useStyles: () => {
         width: "100%";
         justifyContent: "flex-end";
         alignItems: "center";
+        marginTop: string;
     };
 };
 //# sourceMappingURL=CardActions.styles.d.ts.map

package/dist/ui/Card/CardActions.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardActions.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/CardActions.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;CASnB,CAAC"}
+{"version":3,"file":"CardActions.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/CardActions.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;CAWnB,CAAC"}

package/dist/ui/Card/CardActions.styles.js

@@ -7,5 +7,7 @@ export const useStyles = makeStyles(({ spacing }) => ({
         width: '100%',
         justifyContent: 'flex-end',
         alignItems: 'center',
+        // Poussées en bas de la carte : d'une carte à l'autre d'une ligne, les actions s'alignent.
+        marginTop: 'auto',
     },
 }));

package/dist/ui/Card/CardHeader.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps } from '../../core';
+import { BoxProps } from '../../core/Box';
 export type CardHeaderVariant = 'default' | 'disabled';
 export type CardHeaderProps = BoxProps & {
     variant?: CardHeaderVariant;

package/dist/ui/Card/CardHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/CardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AAGvD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,UAAU,CAAC;AAEvD,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG;IACvC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,sBA0BhD,CAAC"}
+{"version":3,"file":"CardHeader.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/CardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI/C,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,UAAU,CAAC;AAEvD,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG;IACvC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,sBA0BhD,CAAC"}

package/dist/ui/Card/CardHeader.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Typography } from '../../core';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
 import { useStyles } from './CardHeader.styles';
 export const CardHeader = (props) => {
     const { variant = 'default', titre, sousTitre, image, badge, style, children, ...boxProps } = props;