@alveole/components 1.10.0 → 2.0.0-alpha.1

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

@@ -1,4 +1,4 @@
-import { BoxProps } from '../../core';
+import { BoxProps } from '../../core/Box';
 export type CardMediaVariant = 'default' | 'disabled';
 export type CardMediaProps = BoxProps & {
     variant?: CardMediaVariant;

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

@@ -1 +1 @@
-{"version":3,"file":"CardMedia.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/CardMedia.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,MAAM,YAAY,CAAC;AAG3C,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,UAAU,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG;IACtC,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,gCAc9C,CAAC"}
+{"version":3,"file":"CardMedia.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/CardMedia.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG/C,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,UAAU,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG;IACtC,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,gCAc9C,CAAC"}

package/dist/ui/Card/CardMedia.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 './CardMedia.styles';
 export const CardMedia = (props) => {
     const { variant = 'default', style, children, ...boxProps } = props;

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

@@ -1,10 +1,12 @@
-import { BoxProps } from '../../core';
+import { Href } from 'expo-router';
+import { BoxProps } from '../../core/Box';
 import { LucideIconProps } from '../LucideIcon';
 export type CardSectionVariant = 'default' | 'disabled';
 export type CardSectionProps = BoxProps & {
     variant?: CardSectionVariant;
     titre?: string;
     description?: string;
+    descriptionLink?: Href & string;
     titreIcone?: LucideIconProps['name'];
     descriptionIcone?: LucideIconProps['name'];
 };

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

@@ -1 +1 @@
-{"version":3,"file":"CardSection.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/CardSection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AACvD,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,UAAU,CAAC;AAExD,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG;IACxC,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACrC,gBAAgB,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,uCAuDlD,CAAC"}
+{"version":3,"file":"CardSection.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/CardSection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAGnC,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,UAAU,CAAC;AAExD,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG;IACxC,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAChC,UAAU,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACrC,gBAAgB,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CAC5C,CAAC;AAqGF,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,uCAsClD,CAAC"}

package/dist/ui/Card/CardSection.js

@@ -1,14 +1,40 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Typography } from '../../core';
+import { A } from '../../core/A';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
 import { LucideIcon } from '../LucideIcon';
 import { useStyles } from './CardSection.styles';
+// Les deux lignes de la section (titre, description) ont la meme structure : une icone
+// optionnelle dans sa propre boite, puis le contenu textuel. Les ecrire deux fois faisait
+// porter a CardSection la construction de chaque ligne en plus de son assemblage.
+const Ligne = ({ tag, style, icone, iconeStyle, couleurIcone, children, }) => (_jsxs(Box, { tag: tag, style: style, children: [icone && (_jsx(Box, { tag: `${tag}-icon`, style: iconeStyle, children: _jsx(LucideIcon, { name: icone, size: "sm", color: couleurIcone }) })), children] }));
+// La teinte desactivee s'applique au texte comme a l'icone : la calculer en un seul endroit
+// empeche les deux de diverger, ce que la lecture repetee de `variant` laissait faire.
+const useTeinte = (desactive) => {
+    const styles = useStyles();
+    return {
+        styles,
+        styleTexte: desactive ? styles.disabledText : {},
+        couleurIcone: (couleurNormale) => (desactive ? styles.disabledText.color : couleurNormale),
+    };
+};
+const LigneTitre = ({ titre, icone, desactive, }) => {
+    const { styles, styleTexte, couleurIcone } = useTeinte(desactive);
+    return (_jsx(Ligne, { tag: "card-section-title", style: styles.title, icone: icone, iconeStyle: styles.titleIcon, couleurIcone: couleurIcone(styles.titleText.color), children: titre && _jsx(Typography, { style: [styles.titleText, styleTexte], children: titre }) }));
+};
+const LigneDescription = ({ description, lien, icone, desactive, }) => {
+    const { styles, styleTexte, couleurIcone } = useTeinte(desactive);
+    const texte = description && _jsx(Typography, { style: [styles.descriptionText, styleTexte], children: description });
+    return (_jsx(Ligne, { tag: "card-section-description", style: styles.description, icone: icone, iconeStyle: styles.descriptionIcon, couleurIcone: couleurIcone(styles.descriptionText.color), children: texte && lien ? (_jsx(A, { href: lien, style: styles.descriptionLink, children: texte })) : (texte) }));
+};
 export const CardSection = (props) => {
-    const { variant = 'default', titre, description, titreIcone, descriptionIcone, style, children, ...boxProps } = props;
+    const { variant = 'default', titre, description, descriptionLink, titreIcone, descriptionIcone, style, children, ...boxProps } = props;
     const styles = useStyles();
     const hasTitleRow = !!(titre || titreIcone);
     const hasDescriptionRow = !!(description || descriptionIcone || children);
     if (!hasTitleRow && !hasDescriptionRow) {
         return null;
     }
-    return (_jsxs(Box, { tag: "card-section", style: [styles.cardSection, style], ...boxProps, children: [hasTitleRow && (_jsxs(Box, { tag: "card-section-title", style: styles.title, children: [titreIcone && (_jsx(Box, { tag: "card-section-title-icon", style: styles.titleIcon, children: _jsx(LucideIcon, { name: titreIcone, size: "sm", color: variant === 'disabled' ? styles.disabledText.color : styles.titleText.color }) })), titre && (_jsx(Typography, { style: [styles.titleText, variant === 'disabled' ? styles.disabledText : {}], children: titre }))] })), hasDescriptionRow && (_jsxs(Box, { tag: "card-section-description", style: styles.description, children: [descriptionIcone && (_jsx(Box, { tag: "card-section-description-icon", style: styles.descriptionIcon, children: _jsx(LucideIcon, { name: descriptionIcone, size: "sm", color: variant === 'disabled' ? styles.disabledText.color : styles.descriptionText.color }) })), description && (_jsx(Typography, { style: [styles.descriptionText, variant === 'disabled' ? styles.disabledText : {}], children: description }))] }))] }));
+    const desactive = variant === 'disabled';
+    return (_jsxs(Box, { tag: "card-section", style: [styles.cardSection, style], ...boxProps, children: [hasTitleRow && _jsx(LigneTitre, { titre: titre, icone: titreIcone, desactive: desactive }), hasDescriptionRow && (_jsx(LigneDescription, { description: description, lien: descriptionLink, icone: descriptionIcone, desactive: desactive }))] }));
 };

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

@@ -41,6 +41,9 @@ export declare const useStyles: () => {
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
+    descriptionLink: {
+        textDecoration: string;
+    };
     disabledText: {
         color: string;
     };

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

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

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

@@ -34,6 +34,9 @@ export const useStyles = makeStyles(({ spacing, color, text }) => ({
         ...text['Corps de texte'].SM.Regular,
         color: color.light.text['default-grey'],
     },
+    descriptionLink: {
+        textDecoration: 'underline',
+    },
     disabledText: {
         color: color.light.text['disabled-grey'],
     },

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC,OAAO,EAAqB,sBAAsB,EAAmB,MAAM,qBAAqB,CAAC;AACjG,OAAO,EAAqB,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAChF,OAAO,EAAiB,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEpE,MAAM,MAAM,aAAa,GAAG,sBAAsB,GAAG,sBAAsB,GAAG,kBAAkB,CAAC;AAEjG,eAAO,MAAM,QAAQ;;;;;;;;;;;;;wGAsBnB,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAIrC,OAAO,EAAqB,sBAAsB,EAAmB,MAAM,qBAAqB,CAAC;AACjG,OAAO,EAAqB,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAChF,OAAO,EAAiB,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEpE,MAAM,MAAM,aAAa,GAAG,sBAAsB,GAAG,sBAAsB,GAAG,kBAAkB,CAAC;AAEjG,eAAO,MAAM,QAAQ;;;;;;;;;;;;;wGAsBnB,CAAC"}

package/dist/ui/Checkbox/Checkbox.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, FormControlCaption } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
 import React, { useId } from 'react';
+import { Box } from '../../core/Box';
+import { FormControlCaption } from '../FormControl';
 import { useStyles } from './Checkbox.styles';
 import { CheckboxContainer } from './CheckboxContainer';
 import { CheckboxIndicator } from './CheckboxIndicator';
 import { CheckboxLabel } from './CheckboxLabel';
 export const Checkbox = React.forwardRef(function Checkbox(props, ref) {
-    const { size, variant, label, error, success, disabled, onCheckedChange } = props;
-    const baseProps = { size, variant, label, error, success, disabled, onCheckedChange };
+    const { size, variant, label, error, success, disabled } = props;
+    const baseProps = { size, variant, label, error, success, disabled };
     const { spacingValue } = useTheme();
     const styles = useStyles();
     const id = useId();

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

@@ -18,26 +18,44 @@ declare const _default: {
         success?: string;
     } & import("./CheckboxIndicator").CheckboxIndicatorProps & import("./CheckboxLabel").CheckboxLabelProps & import("react").RefAttributes<import("tamagui").TamaguiElement>>;
     styleFn: () => {
-        checkboxContainer: {
-            display: "flex";
-            flexDirection: "column";
+        label: {
+            cursor: "pointer";
+            color: string;
+            fontSize: 16;
+            lineHeight: 24;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+            width: "100%";
         };
-        container: {
-            display: "flex";
-            flexDirection: "row";
-            gap: string | number;
+        labelSm: {
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        };
+        labelDisabled: {
+            cursor: "not-allowed";
+            color: string;
+        };
+        labelError: {
+            color: string;
+        };
+        labelSuccess: {
+            color: string;
         };
         checkbox: {
             height: import("@alveole/theme").Spacing;
             width: import("@alveole/theme").Spacing;
             backgroundColor: "transparent";
             borderColor: string;
-            borderRadius: number;
+            borderRadius: import("@alveole/theme").Radius;
         };
         checkboxSm: {
             height: import("@alveole/theme").Spacing;
             width: import("@alveole/theme").Spacing;
-            borderRadius: number;
+            borderRadius: import("@alveole/theme").Radius;
         };
         checkboxDisabled: {
             borderColor: string;
@@ -53,37 +71,20 @@ declare const _default: {
             height: import("@alveole/theme").Spacing;
             width: import("@alveole/theme").Spacing;
             backgroundColor: string;
-            borderRadius: number;
+            borderRadius: import("@alveole/theme").Radius;
         };
         indicatorDisabled: {
             backgroundColor: string;
         };
-        label: {
-            cursor: "pointer";
-            color: string;
-            fontSize: 16;
-            lineHeight: 24;
-            letterSpacing: 0;
-            fontFamily: string;
-            fontWeight?: import("react-native").TextStyle["fontWeight"];
-            width: "100%";
-        };
-        labelSm: {
-            fontSize: 14;
-            lineHeight: 20;
-            letterSpacing: 0;
-            fontFamily: string;
-            fontWeight?: import("react-native").TextStyle["fontWeight"];
-        };
-        labelDisabled: {
-            cursor: "not-allowed";
-            color: string;
-        };
-        labelError: {
-            color: string;
+        checkboxFocused: import("@alveole/theme").FocusRingStyle;
+        checkboxContainer: {
+            display: "flex";
+            flexDirection: "column";
         };
-        labelSuccess: {
-            color: string;
+        container: {
+            display: "flex";
+            flexDirection: "row";
+            gap: string | number;
         };
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCASnB,CAAC;AAEF,eAAO,MAAM,KAAK,mCAKjB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCASnB,CAAC;AAEF,eAAO,MAAM,KAAK,mCAKjB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}

package/dist/ui/Checkbox/Checkbox.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 { Checkbox } from './Checkbox';
 import { useStyles } from './Checkbox.styles';
 export default {

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

@@ -1,24 +1,42 @@
 export declare const useStyles: () => {
-    checkboxContainer: {
-        display: "flex";
-        flexDirection: "column";
+    label: {
+        cursor: "pointer";
+        color: string;
+        fontSize: 16;
+        lineHeight: 24;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+        width: "100%";
     };
-    container: {
-        display: "flex";
-        flexDirection: "row";
-        gap: string | number;
+    labelSm: {
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    labelDisabled: {
+        cursor: "not-allowed";
+        color: string;
+    };
+    labelError: {
+        color: string;
+    };
+    labelSuccess: {
+        color: string;
     };
     checkbox: {
         height: import("@alveole/theme").Spacing;
         width: import("@alveole/theme").Spacing;
         backgroundColor: "transparent";
         borderColor: string;
-        borderRadius: number;
+        borderRadius: import("@alveole/theme").Radius;
     };
     checkboxSm: {
         height: import("@alveole/theme").Spacing;
         width: import("@alveole/theme").Spacing;
-        borderRadius: number;
+        borderRadius: import("@alveole/theme").Radius;
     };
     checkboxDisabled: {
         borderColor: string;
@@ -34,37 +52,20 @@ export declare const useStyles: () => {
         height: import("@alveole/theme").Spacing;
         width: import("@alveole/theme").Spacing;
         backgroundColor: string;
-        borderRadius: number;
+        borderRadius: import("@alveole/theme").Radius;
     };
     indicatorDisabled: {
         backgroundColor: string;
     };
-    label: {
-        cursor: "pointer";
-        color: string;
-        fontSize: 16;
-        lineHeight: 24;
-        letterSpacing: 0;
-        fontFamily: string;
-        fontWeight?: import("react-native").TextStyle["fontWeight"];
-        width: "100%";
-    };
-    labelSm: {
-        fontSize: 14;
-        lineHeight: 20;
-        letterSpacing: 0;
-        fontFamily: string;
-        fontWeight?: import("react-native").TextStyle["fontWeight"];
-    };
-    labelDisabled: {
-        cursor: "not-allowed";
-        color: string;
-    };
-    labelError: {
-        color: string;
+    checkboxFocused: import("@alveole/theme").FocusRingStyle;
+    checkboxContainer: {
+        display: "flex";
+        flexDirection: "column";
     };
-    labelSuccess: {
-        color: string;
+    container: {
+        display: "flex";
+        flexDirection: "row";
+        gap: string | number;
     };
 };
 //# sourceMappingURL=Checkbox.styles.d.ts.map

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

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

package/dist/ui/Checkbox/Checkbox.styles.js

@@ -1,5 +1,8 @@
-import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ text, color, spacing, spacingValue }) => ({
+import { focusRing, makeStyles } from '@alveole/theme';
+const coque = ({ spacing }) => ({
+    // Voir `CheckboxContainer.tsx` : Tamagui impose sa propre bague en `!important`, seule sa
+    // prop `focusVisibleStyle` peut la remplacer. Meme source que la regle CSS du theme.
+    checkboxFocused: focusRing('default'),
     checkboxContainer: {
         display: 'flex',
         flexDirection: 'column',
@@ -7,19 +10,21 @@ export const useStyles = makeStyles(({ text, color, spacing, spacingValue }) =>
     container: {
         display: 'flex',
         flexDirection: 'row',
-        gap: spacing('050'),
+        gap: spacing('1W'),
     },
+});
+const caseACocher = ({ color, spacingValue, radius }) => ({
     checkbox: {
         height: spacingValue('150'),
         width: spacingValue('150'),
         backgroundColor: 'transparent',
         borderColor: color.light.border['action-high-primary'],
-        borderRadius: 6,
+        borderRadius: radius('md'),
     },
     checkboxSm: {
         height: spacingValue('100'),
         width: spacingValue('100'),
-        borderRadius: 4,
+        borderRadius: radius('sm'),
     },
     checkboxDisabled: {
         borderColor: color.border['disabled-grey'],
@@ -35,11 +40,13 @@ export const useStyles = makeStyles(({ text, color, spacing, spacingValue }) =>
         height: spacingValue('150'),
         width: spacingValue('150'),
         backgroundColor: color.light.background['action-high-primary'],
-        borderRadius: 6,
+        borderRadius: radius('md'),
     },
     indicatorDisabled: {
         backgroundColor: color.background['disabled-grey'],
     },
+});
+const libelle = ({ text, color }) => ({
     label: {
         width: '100%',
         ...text['Corps de texte'].MD.Regular,
@@ -59,4 +66,5 @@ export const useStyles = makeStyles(({ text, color, spacing, spacingValue }) =>
     labelSuccess: {
         color: color.text['default-success'],
     },
-}));
+});
+export const useStyles = makeStyles(theme => ({ ...coque(theme), ...caseACocher(theme), ...libelle(theme) }));

package/dist/ui/Checkbox/CheckboxContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxContainer.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/CheckboxContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+B,aAAa,IAAI,oBAAoB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE7G,OAAO,EAAE,YAAY,EAAE,eAAe,EAAuB,MAAM,kBAAkB,CAAC;AAEtF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC;AAC7C,MAAM,MAAM,sBAAsB,GAAG,oBAAoB,GAAG;IAC1D,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,mDAAmD;IACnD,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;WAPrB,YAAY;IACnB,mDAAmD;cACzC,eAAe;YACjB,MAAM;cACJ,MAAM;wCAqCjB,CAAC"}
+{"version":3,"file":"CheckboxContainer.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/CheckboxContainer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+B,aAAa,IAAI,oBAAoB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE7G,OAAO,EAAE,YAAY,EAAE,eAAe,EAAuB,MAAM,kBAAkB,CAAC;AAEtF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC;AAC7C,MAAM,MAAM,sBAAsB,GAAG,oBAAoB,GAAG;IAC1D,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,mDAAmD;IACnD,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;WAPrB,YAAY;IACnB,mDAAmD;cACzC,eAAe;YACjB,MAAM;cACJ,MAAM;wCAyCjB,CAAC"}

package/dist/ui/Checkbox/CheckboxContainer.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { focusRingProps } from '@alveole/theme';
 import React from 'react';
 import { Checkbox as TamaguiCheckbox } from 'tamagui';
 import { useStyles } from './Checkbox.styles';
@@ -17,7 +18,11 @@ export const CheckboxContainer = React.forwardRef(function Checkbox(props, ref)
         marginBottom: 'auto',
     };
     const checkboxHoverStyles = disabled ? styles.checkboxDisabled : baseCheckboxStyles;
-    const checkboxFocusStyles = disabled ? styles.checkboxDisabled : baseCheckboxStyles;
     const checkboxPressStyles = disabled ? styles.checkboxDisabled : baseCheckboxStyles;
-    return (_jsx(TamaguiCheckbox, { ref: ref, disabled: disabled, style: checkboxStyles, focusStyle: checkboxFocusStyles, hoverStyle: checkboxHoverStyles, pressStyle: checkboxPressStyles, ...checkboxProps }));
+    return (_jsx(TamaguiCheckbox, { ref: ref, disabled: disabled, style: checkboxStyles, hoverStyle: checkboxHoverStyles, pressStyle: checkboxPressStyles, ...focusRingProps(), 
+        // Tamagui injecte sa propre regle `:focus-visible` en `!important` derriere un selecteur
+        // `:root:root:root:root` : la regle CSS du theme ne peut pas la battre, et sans cette prop
+        // c'est le gris translucide de Tamagui qui s'affiche. La valeur vient de `focusRing()`,
+        // qui peint le meme bleu que la regle : un seul reglage, deux chemins pour l'appliquer.
+        focusVisibleStyle: styles.checkboxFocused, ...checkboxProps }));
 });

package/dist/ui/Checkbox/CheckboxIndicator.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { LucideIcon } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
 import { Checkbox as TamaguiCheckbox } from 'tamagui';
+import { LucideIcon } from '../LucideIcon';
 import { useStyles } from './Checkbox.styles';
 import { resolveCheckboxSize } from './Checkbox.utils';
 export const CheckboxIndicator = (props) => {

package/dist/ui/Checkbox/CheckboxLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxLabel.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/CheckboxLabel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,eAAe,EAAuB,MAAM,kBAAkB,CAAC;AAEtF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,mDAAmD;IACnD,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,GAAG,UAAU,gCAuBnE,CAAC"}
+{"version":3,"file":"CheckboxLabel.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/CheckboxLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAG5C,OAAO,EAAE,YAAY,EAAE,eAAe,EAAuB,MAAM,kBAAkB,CAAC;AAEtF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,mDAAmD;IACnD,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,GAAG,UAAU,gCAuBnE,CAAC"}

package/dist/ui/Checkbox/CheckboxLabel.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Typography } from '@alveole/components';
 import { Label } from 'tamagui';
+import { Typography } from '../../core/Typography';
 import { useStyles } from './Checkbox.styles';
 import { resolveCheckboxSize } from './Checkbox.utils';
 export const CheckboxLabel = (props) => {

package/dist/ui/Counter/Counter.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Typography } from '@alveole/components';
+import { Typography } from '../../core/Typography';
 import { useStyles } from './Counter.styles';
 export const Counter = (props) => {
     const { variant, count } = props;

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

@@ -4,7 +4,7 @@ declare const _default: {
     experimental: false;
     figmaURL: string;
     description: string;
-    component: (props: import("@alveole/components").CounterProps) => import("react").JSX.Element;
+    component: (props: import("./Counter").CounterProps) => import("react").JSX.Element;
     styleFn: () => {
         counter: {
             fontSize: 12;
@@ -12,8 +12,9 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            paddingRight: string | number;
-            paddingLeft: string | number;
+            height: number;
+            paddingRight: number;
+            paddingLeft: number;
             backgroundColor: string;
             borderRadius: import("@alveole/theme").Radius;
         };

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

@@ -1 +1 @@
-{"version":3,"file":"Counter.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Counter/Counter.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBASkB;AAElB,eAAO,MAAM,OAAO,mCAKnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"Counter.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Counter/Counter.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBASkB;AAElB,eAAO,MAAM,OAAO,mCAKnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}

package/dist/ui/Counter/Counter.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@alveole/components';
+import { Box } from '../../core/Box';
 import { Counter } from './Counter';
 import { useStyles } from './Counter.styles';
 export default {

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

@@ -5,8 +5,9 @@ export declare const useStyles: () => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        paddingRight: string | number;
-        paddingLeft: string | number;
+        height: number;
+        paddingRight: number;
+        paddingLeft: number;
         backgroundColor: string;
         borderRadius: import("@alveole/theme").Radius;
     };

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

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

package/dist/ui/Counter/Counter.styles.js

@@ -1,8 +1,9 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ color, spacing, text, radius }) => ({
+export const useStyles = makeStyles(({ color, text, radius, pill }) => ({
     counter: {
-        paddingRight: spacing('1,5V'),
-        paddingLeft: spacing('1,5V'),
+        height: pill('sm').height,
+        paddingRight: pill('sm').paddingInline,
+        paddingLeft: pill('sm').paddingInline,
         backgroundColor: color.light.background['contrast-grey'],
         borderRadius: radius('full'),
         ...text['Corps de texte'].XS.Bold,

package/dist/ui/DataTable/DataTable.d.ts

@@ -19,6 +19,13 @@ export type DataTableProps<Row> = {
      * Le tri reste utilisable via `sort`/`onSortChange` piloté depuis l'extérieur (ex. un menu).
      */
     hideHeader?: boolean;
+    /**
+     * Épingle la ligne d'en-têtes en haut de son ascendant scrollable pendant le défilement
+     * vertical (web uniquement — sans effet natif, où le `DataTable` ne possède pas son propre
+     * scroll). Nécessite que le tableau soit placé dans un conteneur qui défile verticalement
+     * (le `DataTable` ne fournit que le scroll horizontal des colonnes).
+     */
+    stickyHeader?: boolean;
     renderNoContent?: () => React.ReactNode;
     /** Rendu en bas du tableau, typiquement un <DataTableFooter/> avec compteur + <DataTablePagination/>. */
     footer?: React.ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAgBlF,MAAM,MAAM,cAAc,CAAC,GAAG,IAAI;IAChC,OAAO,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;IAChC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,YAAY,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAElD,8EAA8E;IAC9E,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gGAAgG;IAChG,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAE7C,4IAA4I;IAC5I,IAAI,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,KAAK,IAAI,CAAC;IAEpD,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAE/C;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,eAAe,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IAExC,yGAAyG;IACzG,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,GAAG,EAAG,OAAO,cAAc,CAAC,GAAG,CAAC,sBAiHzD,CAAC"}
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAKlF,MAAM,MAAM,cAAc,CAAC,GAAG,IAAI;IAChC,OAAO,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;IAChC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,YAAY,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAElD,8EAA8E;IAC9E,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gGAAgG;IAChG,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAE7C,4IAA4I;IAC5I,IAAI,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,KAAK,IAAI,CAAC;IAEpD,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAE/C;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,eAAe,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IAExC,yGAAyG;IACzG,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,GAAG,EAAG,OAAO,cAAc,CAAC,GAAG,CAAC,sBA6DzD,CAAC"}

package/dist/ui/DataTable/DataTable.demo.deployments.d.ts

@@ -0,0 +1,15 @@
+import { DataTableColumn } from './DataTable.types';
+export type Deployment = {
+    id: string;
+    message: string;
+    status: 'error' | 'ready';
+    duration: string;
+    environment: 'preview' | 'production';
+    commit: string;
+    source: string;
+    date: Date;
+    author: string;
+};
+export declare const deployments: Deployment[];
+export declare const deploymentColumns: DataTableColumn<Deployment>[];
+//# sourceMappingURL=DataTable.demo.deployments.d.ts.map

package/dist/ui/DataTable/DataTable.demo.deployments.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.demo.deployments.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/DataTable.demo.deployments.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAMpD,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,SAAS,GAAG,YAAY,CAAC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,UAAU,EAyFnC,CAAC;AAsIF,eAAO,MAAM,iBAAiB,EAAE,eAAe,CAAC,UAAU,CAAC,EAc1D,CAAC"}