@alveole/components 2.0.0-alpha.2 → 2.0.0-alpha.20

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\" gap={24}>\n    <Button variant=\"primary\" title=\"Primary\" />\n    <Button variant=\"secondary\" title=\"Secondary\" />\n    <Button variant=\"tertiary\" title=\"Tertiary\" />\n    <Button variant=\"danger\" title=\"Danger\" />\n  </Box>\n);";
-export const Sizes = () => "export const Sizes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" style={{ alignItems: 'center' }} gap={24}>\n    <Button variant=\"secondary\" size=\"sm\" title=\"Bouton sm\" />\n    <Button variant=\"secondary\" size=\"md\" title=\"Bouton md\" />\n    <Button variant=\"secondary\" size=\"lg\" title=\"Bouton lg\" />\n  </Box>\n);";
-export const States = () => "export const States = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={24}>\n    <Button variant=\"secondary\" title=\"Normal\" />\n    <Button variant=\"secondary\" title=\"Disabled\" disabled />\n    <Button variant=\"secondary\" title=\"Selected\" selected />\n    <Button variant=\"secondary\" title=\"Expanded\" expanded />\n  </Box>\n);";
-export const Loading = () => "export const Loading = () => {\n  const [isLoading, setIsLoading] = React.useState(false);\n\n  const handlePress = () => {\n    setIsLoading(true);\n    setTimeout(() => setIsLoading(false), 3000);\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"row\" gap={24}>\n      <Button variant=\"primary\" title=\"Enregistrer\" isLoading={isLoading} onPress={handlePress} />\n      <Button variant=\"secondary\" title=\"Exporter\" leading=\"Download\" isLoading={isLoading} onPress={handlePress} />\n      <Button variant=\"primary\" title=\"Délai court\" loadingDelay=\"short\" isLoading={isLoading} onPress={handlePress} />\n    </Box>\n  );\n};";
-export const 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\" 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\" gap={24}>\n    <Button variant=\"secondary\" title=\"Ajouter\" leading=\"Plus\" />\n    <Button variant=\"secondary\" title=\"Exporter\" trailing=\"Download\" />\n    <Button variant=\"secondary\" title=\"Filtres\" leading=\"Plus\" trailing=\"ChevronDown\" />\n  </Box>\n);";
-export const TertiaireAvecAvatar = () => "export const TertiaireAvecAvatar = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={24} style={{ alignItems: 'center' }}>\n    <Button variant=\"tertiary\" title=\"Marie Curie\" leading={<Avatar size=\"xs\" fallbackText=\"Marie Curie\" />} />\n    <Button variant=\"tertiary\" title=\"Marie Curie\" leading=\"User\" />\n  </Box>\n);";
-export const IconOnly = () => "export const IconOnly = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={24} style={{ alignItems: 'center' }}>\n    <ButtonIcon variant=\"tertiary\" size=\"sm\" icon=\"MoreHorizontal\" accessibilityLabel=\"Plus d'actions\" />\n    <ButtonIcon variant=\"tertiary\" size=\"md\" icon=\"MoreHorizontal\" accessibilityLabel=\"Plus d'actions\" />\n    <ButtonIcon variant=\"tertiary\" size=\"lg\" icon=\"MoreHorizontal\" accessibilityLabel=\"Plus d'actions\" />\n    <ButtonIcon variant=\"secondary\" size=\"md\" icon=\"Trash\" accessibilityLabel=\"Supprimer\" />\n    <ButtonIcon variant=\"primary\" size=\"md\" icon=\"Plus\" accessibilityLabel=\"Ajouter\" />\n    <ButtonIcon variant=\"tertiary\" size=\"md\" icon=\"CircleUser\" iconSize=\"xs\" accessibilityLabel=\"Voir le profil\" />\n  </Box>\n);";
+export const 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/ButtonContent.d.ts.map

@@ -1 +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"}
+{"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,gCA8CtF,CAAC"}

package/dist/ui/Button/ButtonContent.js

@@ -4,7 +4,7 @@ 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 { styleDeLIcone, 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 }) => {
@@ -18,13 +18,17 @@ const Emplacement = ({ spinner, contenu, apparence }) => {
  */
 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 { style, ...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: {
+    return (_jsxs(Box, { style: [
+            styleDuConteneur(styles, etat, { actif, survole: hovered }),
+            aGauche && { justifyContent: 'flex-start' },
+            style,
+        ], ...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' } : {}),

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;
-    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";
-};
+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"}

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

@@ -2,9 +2,15 @@ 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. */
+/**
+ * Le fond et les rembourrages : tout ce qui se pose sur le Box interieur. Le survol suit l'etat
+ * du pointeur, comme le libelle et l'icone : Tamagui v3 a retire `hoverStyle`.
+ */
+export declare const styleDuConteneur: (styles: Styles, etat: EtatDuBouton, { actif, survole }: {
+    actif: boolean;
+    survole?: boolean;
+}) => StyleValue;
+/** Le fond que prend le conteneur sous le pointeur. */
 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">;

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

@@ -1 +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"}
+{"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;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAC3B,QAAQ,MAAM,EACd,MAAM,YAAY,EAClB,oBAA4B;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,KAChE,UAUD,CAAC;AAEH,uDAAuD;AACvD,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

@@ -9,10 +9,14 @@ const styleDeFond = (styles, { variant, selected, disabled }, actif) => {
     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) => ({
+/**
+ * Le fond et les rembourrages : tout ce qui se pose sur le Box interieur. Le survol suit l'etat
+ * du pointeur, comme le libelle et l'icone : Tamagui v3 a retire `hoverStyle`.
+ */
+export const styleDuConteneur = (styles, etat, { actif, survole = false }) => ({
     ...styles.container,
     ...styleDeFond(styles, etat, actif),
+    ...(survole ? styleDeSurvol(styles, etat) : {}),
     ...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.
@@ -20,7 +24,7 @@ export const styleDuConteneur = (styles, etat, actif) => ({
     borderColor: undefined,
     borderStyle: undefined,
 });
-/** Le survol n'est pas un etat rendu : c'est une prop que Tamagui appliquera lui-meme. */
+/** Le fond que prend le conteneur sous le pointeur. */
 export const styleDeSurvol = (styles, { variant, selected, disabled }) => {
     if (disabled)
         return {};

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

@@ -28,7 +28,7 @@ declare const _default: {
             alignItems: "center";
         };
         titleText: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
@@ -46,7 +46,7 @@ declare const _default: {
             alignItems: "center";
         };
         descriptionText: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
@@ -57,7 +57,7 @@ declare const _default: {
             textDecoration: string;
         };
         disabledText: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
     };
 };
@@ -65,6 +65,8 @@ export default _default;
 export declare const card: () => import("react").JSX.Element;
 export declare const cardDisabled: () => import("react").JSX.Element;
 export declare const cardWithMedia: () => import("react").JSX.Element;
+export declare const cardFichier: () => import("react").JSX.Element;
+export declare const cardFichierSansApercu: () => 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;

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,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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,wBAQkB;AAElB,eAAO,MAAM,IAAI,mCAuBhB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAwBxB,CAAC;AAEF,eAAO,MAAM,aAAa,mCA0BzB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAiBvB,CAAC;AAEF,eAAO,MAAM,qBAAqB,mCAgBjC,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,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '../../core/Box';
+import { Image } from '../../core/Image';
+import { Typography } from '../../core/Typography';
 import { Avatar } from '../Avatar';
 import { Badge } from '../Badge';
 import { Button } from '../Button';
@@ -22,10 +24,16 @@ 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: "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" })] })] }) }));
+    return (_jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Card, { children: [_jsx(Card.Media, { children: _jsx(Image, { source: "https://picsum.photos/400/200", alt: "", width: "100%", height: 200 }) }), _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 cardFichier = () => {
+    return (_jsx(Box, { style: { width: 282 }, children: _jsxs(Card, { children: [_jsx(Card.Media, { children: _jsx(Image, { source: "https://alveole.captive.fr/apercu-pdf.png", alt: "", width: "100%", height: 159 }) }), _jsxs(Box, { display: "flex", flexDirection: "row", gap: "1,5V", style: { alignItems: 'center' }, children: [_jsx(Badge, { variant: "error", size: "sm", children: "PDF" }), _jsx(Typography, { numberOfLines: 1, children: "PC-16100_Proposition_commerciale.pdf" })] })] }) }));
+};
+export const cardFichierSansApercu = () => {
+    return (_jsx(Box, { style: { width: 282 }, children: _jsxs(Card, { children: [_jsx(Card.Media, { style: { height: 159, alignItems: 'center', justifyContent: 'center' }, children: _jsx(LucideIcon, { name: "File", size: "md" }) }), _jsxs(Box, { display: "flex", flexDirection: "row", gap: "1,5V", style: { alignItems: 'center' }, children: [_jsx(Badge, { variant: "error", size: "sm", children: "PDF" }), _jsx(Typography, { numberOfLines: 1, children: "PC-16100_Proposition_commerciale.pdf" })] })] }) }));
 };
 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: "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 })] })] }) }));
+    return (_jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Card, { children: [_jsx(Card.Media, { variant: "disabled", children: _jsx(Image, { source: "https://picsum.photos/400/200", alt: "", width: "100%", height: 200 }) }), _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" }));
@@ -37,7 +45,7 @@ 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" }) })] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "2W", 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: "default", size: "sm", children: "PR\u00C9SENT" }) }));

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

@@ -1,6 +1,8 @@
 export declare const card: () => string;
 export declare const cardDisabled: () => string;
 export declare const cardWithMedia: () => string;
+export declare const cardFichier: () => string;
+export declare const cardFichierSansApercu: () => string;
 export declare const cardWithMediaDisabled: () => string;
 export declare const cardSection: () => string;
 export declare const cardSectionDisabled: () => string;
@@ -12,6 +14,8 @@ export declare const storySources: {
     readonly card: () => string;
     readonly cardDisabled: () => string;
     readonly cardWithMedia: () => string;
+    readonly cardFichier: () => string;
+    readonly cardFichierSansApercu: () => string;
     readonly cardWithMediaDisabled: () => string;
     readonly cardSection: () => string;
     readonly cardSectionDisabled: () => 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,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"}
+{"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,cAAu+B,CAAC;AAElgC,eAAO,MAAM,WAAW,cAAssB,CAAC;AAE/tB,eAAO,MAAM,qBAAqB,cAAsmB,CAAC;AAEzoB,eAAO,MAAM,qBAAqB,cAAgmC,CAAC;AAEnoC,eAAO,MAAM,WAAW,cAA8O,CAAC;AAEvQ,eAAO,MAAM,mBAAmB,cAAkR,CAAC;AAEnT,eAAO,MAAM,mBAAmB,cAAmR,CAAC;AAEpT,eAAO,MAAM,UAAU,cAA0hB,CAAC;AAEljB,eAAO,MAAM,kBAAkB,cAAoW,CAAC;AAEpY,eAAO,MAAM,WAAW,cAAoP,CAAC;AAE7Q,eAAO,MAAM,YAAY;;;;;;;;;;;;;CAaf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAEtE,CAAC"}

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

@@ -2,18 +2,22 @@
 // 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=\"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=\"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          <Image source=\"https://picsum.photos/400/200\" alt=\"\" width=\"100%\" height={200} />\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 cardFichier = () => "export const cardFichier = () => {\n  return (\n    <Box style={{ width: 282 }}>\n      <Card>\n        <Card.Media>\n          {/* URL absolue de la doc : un require d'asset ne se résout pas dans les apps qui affichent ces stories */}\n          <Image source=\"https://alveole.captive.fr/apercu-pdf.png\" alt=\"\" width=\"100%\" height={159} />\n        </Card.Media>\n        <Box display=\"flex\" flexDirection=\"row\" gap=\"1,5V\" style={{ alignItems: 'center' }}>\n          <Badge variant=\"error\" size=\"sm\">\n            PDF\n          </Badge>\n          <Typography numberOfLines={1}>PC-16100_Proposition_commerciale.pdf</Typography>\n        </Box>\n      </Card>\n    </Box>\n  );\n};";
+export const cardFichierSansApercu = () => "export const cardFichierSansApercu = () => {\n  return (\n    <Box style={{ width: 282 }}>\n      <Card>\n        <Card.Media style={{ height: 159, alignItems: 'center', justifyContent: 'center' }}>\n          <LucideIcon name=\"File\" size=\"md\" />\n        </Card.Media>\n        <Box display=\"flex\" flexDirection=\"row\" gap=\"1,5V\" style={{ alignItems: 'center' }}>\n          <Badge variant=\"error\" size=\"sm\">\n            PDF\n          </Badge>\n          <Typography numberOfLines={1}>PC-16100_Proposition_commerciale.pdf</Typography>\n        </Box>\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          <Image source=\"https://picsum.photos/400/200\" alt=\"\" width=\"100%\" height={200} />\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 cardHeader = () => "export const cardHeader = () => {\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"2W\">\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=\"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,
     cardDisabled,
     cardWithMedia,
+    cardFichier,
+    cardFichierSansApercu,
     cardWithMediaDisabled,
     cardSection,
     cardSectionDisabled,

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

@@ -3,9 +3,9 @@ export declare const useStyles: () => {
         display: "flex";
         flexDirection: "column";
         width: "100%";
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         borderWidth: number;
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         borderStyle: "solid";
         boxSizing: "border-box";
         borderRadius: import("@alveole/theme").Radius;

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

@@ -11,7 +11,7 @@ export declare const useStyles: () => {
         flex: number;
     };
     titre: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 16;
         lineHeight: 24;
         letterSpacing: 0;
@@ -19,7 +19,7 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     sousTitre: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
@@ -27,7 +27,7 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     disabledText: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     trailing: {
         display: "flex";

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

@@ -16,7 +16,7 @@ export declare const useStyles: () => {
         alignItems: "center";
     };
     titleText: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
@@ -34,7 +34,7 @@ export declare const useStyles: () => {
         alignItems: "center";
     };
     descriptionText: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
@@ -45,7 +45,7 @@ export declare const useStyles: () => {
         textDecoration: string;
     };
     disabledText: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
 };
 //# sourceMappingURL=CardSection.styles.d.ts.map