@alveole/components 1.9.0 → 2.0.0-alpha

package/dist/ui/Badge/Badge.styles.js

@@ -1,5 +1,5 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ radius, text, color, spacing }) => ({
+export const useStyles = makeStyles(({ radius, text, color, pill }) => ({
     badge: {
         borderRadius: radius('sm'),
         marginRight: 'auto',
@@ -33,21 +33,19 @@ export const useStyles = makeStyles(({ radius, text, color, spacing }) => ({
         color: color.light.text['default-grey'],
         backgroundColor: color.light.background['contrast-grey'],
     },
-    badgeDisabled: {
-        color: color.light.text['disabled-grey'],
-        backgroundColor: color.light.background['disabled-grey'],
-    },
     // Sizes
     badgeSm: {
-        paddingLeft: spacing('1,5V'),
-        paddingRight: spacing('1,5V'),
-        gap: spacing('1V'),
+        height: pill('sm').height,
+        paddingLeft: pill('sm').paddingInline,
+        paddingRight: pill('sm').paddingInline,
+        gap: pill('sm').gap,
         ...text['Corps de texte'].XS.CapsBold,
     },
     badgeMd: {
-        paddingLeft: spacing('1W'),
-        paddingRight: spacing('1W'),
-        gap: spacing('1V'),
+        height: pill('md').height,
+        paddingLeft: pill('md').paddingInline,
+        paddingRight: pill('md').paddingInline,
+        gap: pill('md').gap,
         ...text['Corps de texte'].SM.CapsBold,
     },
 }));

package/dist/ui/BottomSheet/BottomSheet.d.ts

@@ -12,6 +12,8 @@ export type BottomSheetProps = React.PropsWithChildren<{
     open: TamaguiSheetProps['open'];
     title: string;
     action?: React.ReactNode | undefined;
+    /** Remonte le sheet avec le clavier. Réservé aux sheets portant un champ de saisie. */
+    moveOnKeyboardChange?: boolean;
     setOpen: (value: boolean) => void;
 } & (BottomSheetWithoutPoints | BottomSheetWithPoints)>;
 export declare const BottomSheet: (props: BottomSheetProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/ui/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAyB,UAAU,IAAI,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAOjF,KAAK,qBAAqB,GAAG;IAC3B,MAAM,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,EAAE,IAAI,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CACpD;IACE,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACnC,GAAG,CAAC,wBAAwB,GAAG,qBAAqB,CAAC,CACvD,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAwDlD,CAAC"}
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/ui/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAyB,UAAU,IAAI,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAOjF,KAAK,qBAAqB,GAAG;IAC3B,MAAM,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,EAAE,IAAI,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CACpD;IACE,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACrC,uFAAuF;IACvF,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACnC,GAAG,CAAC,wBAAwB,GAAG,qBAAqB,CAAC,CACvD,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAiElD,CAAC"}

package/dist/ui/BottomSheet/BottomSheet.js

@@ -8,10 +8,10 @@ import { ButtonIcon } from '../Button';
 import { Divider } from '../Divider';
 import { useStyles } from './BottomSheet.styles';
 export const BottomSheet = (props) => {
-    const { children, open, title, points, fitContent, action, setOpen } = props;
+    const { children, open, title, points, fitContent, action, moveOnKeyboardChange, setOpen } = props;
     const [position, setPosition] = React.useState(0);
     const styles = useStyles();
     const { bottom } = useSafeAreaInsets();
     const snapPointsMode = fitContent ? 'fit' : 'percent';
-    return (_jsx(Box, { tag: "sheet", style: styles.container, children: _jsxs(TamaguiSheet, { modal: true, forceRemoveScrollEnabled: open, open: open, onOpenChange: setOpen, snapPoints: fitContent ? undefined : points, snapPointsMode: snapPointsMode, dismissOnSnapToBottom: true, position: position, onPositionChange: setPosition, zIndex: 100000, animation: "medium", children: [_jsx(TamaguiSheet.Overlay, { style: styles.overlay }), _jsxs(TamaguiSheet.Frame, { style: styles.frame, children: [_jsx(TamaguiSheet.Handle, { style: styles.handle }), _jsxs(Box, { tag: "sheet-header", style: styles.header, children: [_jsx(Box, { children: _jsx(ButtonIcon, { icon: "X", variant: "tertiary", size: "md", onPress: () => setOpen(false) }) }), _jsx(Box, { flex: 1, children: _jsx(Typography, { style: styles.title, children: title }) }), action && (_jsx(Box, { mt: 'auto', mb: 'auto', children: action }))] }), _jsx(Box, { pl: '2W', pr: '2W', children: _jsx(Divider, {}) }), _jsx(Box, { tag: "sheet-content", style: [styles.content, !fitContent && styles.contentFull], pb: bottom, children: children })] })] }) }));
+    return (_jsx(Box, { tag: "sheet", style: styles.container, children: _jsxs(TamaguiSheet, { modal: true, forceRemoveScrollEnabled: open, open: open, onOpenChange: setOpen, snapPoints: fitContent ? undefined : points, snapPointsMode: snapPointsMode, dismissOnSnapToBottom: true, position: position, onPositionChange: setPosition, zIndex: 100000, animation: "medium", moveOnKeyboardChange: moveOnKeyboardChange, children: [_jsx(TamaguiSheet.Overlay, { style: styles.overlay }), _jsxs(TamaguiSheet.Frame, { role: "dialog", "aria-modal": true, "aria-label": title, style: styles.frame, children: [_jsx(TamaguiSheet.Handle, { style: styles.handle }), _jsxs(Box, { tag: "sheet-header", style: styles.header, children: [_jsx(Box, { children: _jsx(ButtonIcon, { icon: "X", variant: "tertiary", size: "md", accessibilityLabel: "Fermer", onPress: () => setOpen(false) }) }), _jsx(Box, { flex: 1, children: _jsx(Typography, { style: styles.title, children: title }) }), action && (_jsx(Box, { mt: 'auto', mb: 'auto', children: action }))] }), _jsx(Box, { pl: '2W', pr: '2W', children: _jsx(Divider, {}) }), _jsx(Box, { tag: "sheet-content", style: [styles.content, !fitContent && styles.contentFull], pb: bottom, children: children })] })] }) }));
 };

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

@@ -3,7 +3,7 @@ declare const _default: {
     tags: "ui"[];
     experimental: true;
     description: string;
-    component: (props: import("@alveole/components").BottomSheetProps) => import("react").JSX.Element;
+    component: (props: import("./BottomSheet").BottomSheetProps) => import("react").JSX.Element;
     styleFn: () => {
         container: {};
         content: {
@@ -22,7 +22,7 @@ declare const _default: {
         handle: {
             width: "90%";
             margin: string;
-            height: number;
+            height: 16;
             backgroundColor: "#FFFFFF";
         };
         frame: {

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/BottomSheet/BottomSheet.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCAcnB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAoBtB,CAAC;AAEF,eAAO,MAAM,UAAU,mCActB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"BottomSheet.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/BottomSheet/BottomSheet.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCAcnB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAoBtB,CAAC;AAEF,eAAO,MAAM,UAAU,mCActB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,+BAA+B,CAAC"}

package/dist/ui/BottomSheet/BottomSheet.stories.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Button, Typography } from '@alveole/components';
 import { useState } from 'react';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { Button } from '../Button';
 import { BottomSheet } from './BottomSheet';
 import { useStyles } from './BottomSheet.styles';
 export default {

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

@@ -16,7 +16,7 @@ export declare const useStyles: () => {
     handle: {
         width: "90%";
         margin: string;
-        height: number;
+        height: 16;
         backgroundColor: "#FFFFFF";
     };
     frame: {

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

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

package/dist/ui/BottomSheet/BottomSheet.styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@alveole/theme';
+import { makeStyles, Spacings } from '@alveole/theme';
 export const useStyles = makeStyles(({ spacing, text, color }) => ({
     container: {},
     content: {
@@ -17,7 +17,7 @@ export const useStyles = makeStyles(({ spacing, text, color }) => ({
     handle: {
         width: '90%',
         margin: 'auto',
-        height: spacing('2W'),
+        height: Spacings['2W'],
         backgroundColor: '#FFFFFF',
     },
     frame: {

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/ui/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAMF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACrD,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACpE;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;CAC3E,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAmDlD,CAAC"}
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/ui/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAMF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACrD,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACpE;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;CAC3E,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAmDlD,CAAC"}

package/dist/ui/Breadcrumbs/Breadcrumbs.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { usePathname } from 'expo-router';
-import { A, Box, Typography } from '../../core';
+import { A } from '../../core/A';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
 import { useStyles } from './Breadcrumbs.styles';
 function humanizeSegment(segment) {
     return segment.replace(/[-_]/g, ' ').replace(/^\w/, c => c.toUpperCase());
@@ -36,5 +38,5 @@ export const Breadcrumbs = (props) => {
             isCurrent: index === segments.length - 1,
         })),
     ];
-    return (_jsx(Box, { tag: "breadcrumbs", style: styles.container, children: items.map((item, index) => (_jsxs(Box, { tag: "breadcrumbs-item", style: { flexDirection: 'row', alignItems: 'center' }, children: [index > 0 && _jsx(Typography, { style: styles.separator, children: " > " }), item.isCurrent || item.href === null ? (_jsx(Typography, { style: styles.current, children: item.label })) : (_jsx(A, { href: item.href, style: styles.link, hoverStyle: styles.linkHover, children: _jsx(Typography, { style: styles.link, hoverStyle: styles.linkHover, children: item.label }) }))] }, `${item.href}-${index}`))) }));
+    return (_jsx(Box, { tag: "breadcrumbs", style: styles.container, children: items.map((item, index) => (_jsxs(Box, { tag: "breadcrumbs-item", style: { flexDirection: 'row', alignItems: 'center' }, children: [index > 0 && _jsx(Box, { tag: "breadcrumbs-separator", "aria-hidden": true, style: styles.separator }), item.isCurrent || item.href === null ? (_jsx(Typography, { style: styles.current, children: item.label })) : (_jsx(A, { href: item.href, style: styles.link, hoverStyle: styles.linkHover, children: _jsx(Typography, { style: styles.link, hoverStyle: styles.linkHover, children: item.label }) }))] }, `${item.href}-${index}`))) }));
 };

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

@@ -7,7 +7,7 @@ declare const _default: {
     component: (props: import("./Breadcrumbs").BreadcrumbsProps) => import("react").JSX.Element;
     styleFn: () => {
         container: {
-            fontSize: 12;
+            fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
             fontFamily: string;
@@ -15,10 +15,14 @@ declare const _default: {
             flexDirection: "row";
             flexWrap: "wrap";
             alignItems: "center";
-            gap: string | number;
         };
         separator: {
-            color: string;
+            width: number;
+            height: number;
+            marginLeft: string | number;
+            marginRight: string | number;
+            backgroundColor: string;
+            transform: "rotate(15deg)";
         };
         current: {
             color: string;
@@ -27,7 +31,7 @@ declare const _default: {
             transitionProperty: "text-decoration";
             transitionDuration: "0.1s";
             transitionTimingFunction: "ease-in-out";
-            fontSize: 12;
+            fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
             fontFamily: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Breadcrumbs/Breadcrumbs.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBASkB;AAElB,eAAO,MAAM,OAAO,mCAInB,CAAC;AAEF,eAAO,MAAM,mBAAmB,mCAI/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAe5B,CAAC;AAEF,eAAO,MAAM,cAAc,mCAW1B,CAAC;AAEF,eAAO,MAAM,UAAU,mCAStB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mCAgB9B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"Breadcrumbs.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Breadcrumbs/Breadcrumbs.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBASkB;AAElB,eAAO,MAAM,OAAO,mCAInB,CAAC;AAEF,eAAO,MAAM,mBAAmB,mCAI/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAe5B,CAAC;AAEF,eAAO,MAAM,cAAc,mCAW1B,CAAC;AAEF,eAAO,MAAM,UAAU,mCAStB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mCAgB9B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,+BAA+B,CAAC"}

package/dist/ui/Breadcrumbs/Breadcrumbs.stories.js

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

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

@@ -1,6 +1,6 @@
 export declare const useStyles: () => {
     container: {
-        fontSize: 12;
+        fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
         fontFamily: string;
@@ -8,10 +8,14 @@ export declare const useStyles: () => {
         flexDirection: "row";
         flexWrap: "wrap";
         alignItems: "center";
-        gap: string | number;
     };
     separator: {
-        color: string;
+        width: number;
+        height: number;
+        marginLeft: string | number;
+        marginRight: string | number;
+        backgroundColor: string;
+        transform: "rotate(15deg)";
     };
     current: {
         color: string;
@@ -20,7 +24,7 @@ export declare const useStyles: () => {
         transitionProperty: "text-decoration";
         transitionDuration: "0.1s";
         transitionTimingFunction: "ease-in-out";
-        fontSize: 12;
+        fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
         fontFamily: string;

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

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

package/dist/ui/Breadcrumbs/Breadcrumbs.styles.js

@@ -4,24 +4,28 @@ export const useStyles = makeStyles(({ text, color, spacing }) => ({
         flexDirection: 'row',
         flexWrap: 'wrap',
         alignItems: 'center',
-        gap: spacing('1V'),
-        ...text['Corps de texte'].XS.Regular,
+        ...text['Corps de texte'].SM.Regular,
     },
     separator: {
-        color: color.light.text['mention-grey'],
+        width: 1.5,
+        height: 11,
+        marginLeft: spacing('1,5V'),
+        marginRight: spacing('1,5V'),
+        backgroundColor: color.light.text['mention-grey'],
+        transform: 'rotate(15deg)',
     },
     current: {
         color: color.light.text['active-grey'],
     },
     link: {
-        color: color.light.text['mention-grey'],
-        textDecoration: 'underline',
-        ...text['Corps de texte'].XS.Regular,
+        color: color.light.text['default-info'],
+        textDecoration: 'none',
+        ...text['Corps de texte'].SM.Regular,
         transitionProperty: 'text-decoration',
         transitionDuration: '0.1s',
         transitionTimingFunction: 'ease-in-out',
     },
     linkHover: {
-        textDecoration: 'none',
+        textDecoration: 'underline',
     },
 }));

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

@@ -1,37 +1,20 @@
 import React from 'react';
-import { PressableProps, View } from 'react-native';
-import { BoxProps } from '../../core';
-import { IconProps } from '../LucideIcon';
-export type ButtonProps = Omit<PressableProps, 'children' | 'style'> & {
+import { View } from 'react-native';
+export * from './Button.types';
+export declare const Button: React.ForwardRefExoticComponent<Omit<import("react-native").PressableProps, "children" | "style"> & {
     title: string;
-    size?: 'xs' | 'sm' | 'md' | 'lg';
-    variant: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'link';
-    startIcon?: IconProps['name'];
-    endIcon?: IconProps['name'];
+    size?: import("./buttonVariants").ButtonTaille;
+    variant: import("./buttonVariants").ButtonVariant;
+    leading?: import("..").Leading;
+    trailing?: import("..").Leading;
+    contentAlign?: "center" | "start";
     selected?: boolean;
-    ContainerProps?: BoxProps;
+    ContainerProps?: import("../..").BoxProps;
     fullWidth?: boolean;
-    noPadding?: boolean;
-    borderNone?: boolean;
-    leftAlign?: boolean;
-    type?: 'button' | 'submit';
-    active?: boolean;
-    isLoading?: boolean;
-};
-export declare const Button: React.ForwardRefExoticComponent<Omit<PressableProps, "children" | "style"> & {
-    title: string;
-    size?: "xs" | "sm" | "md" | "lg";
-    variant: "primary" | "secondary" | "tertiary" | "danger" | "link";
-    startIcon?: IconProps["name"];
-    endIcon?: IconProps["name"];
-    selected?: boolean;
-    ContainerProps?: BoxProps;
-    fullWidth?: boolean;
-    noPadding?: boolean;
-    borderNone?: boolean;
-    leftAlign?: boolean;
     type?: "button" | "submit";
     active?: boolean;
+    expanded?: boolean;
     isLoading?: boolean;
+    loadingDelay?: import("../Spinner/Spinner.shared").SpinnerDelay;
 } & React.RefAttributes<View>>;
 //# sourceMappingURL=Button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAa,cAAc,EAA8B,IAAI,EAAE,MAAM,cAAc,CAAC;AAC3F,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,SAAS,EAAc,MAAM,eAAe,CAAC;AAQtD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClE,SAAS,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,MAAM;WAhBV,MAAM;WACN,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;aACvB,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM;gBACrD,SAAS,CAAC,MAAM,CAAC;cACnB,SAAS,CAAC,MAAM,CAAC;eAChB,OAAO;qBACD,QAAQ;gBACb,OAAO;gBACP,OAAO;iBACN,OAAO;gBACR,OAAO;WACZ,QAAQ,GAAG,QAAQ;aACjB,OAAO;gBACJ,OAAO;8BAqPnB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAa,IAAI,EAAE,MAAM,cAAc,CAAC;AAO/C,cAAc,gBAAgB,CAAC;AAE/B,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;8BAwDjB,CAAC"}

package/dist/ui/Button/Button.js

@@ -1,242 +1,25 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { focusRingProps } from '@alveole/theme';
 import React from 'react';
 import { Pressable } from 'react-native';
-import { Box, Typography } from '../../core';
-import { LucideIcon } from '../LucideIcon';
-import { Spinner } from '../Spinner';
 import { useStyles } from './Button.styles';
+import { etatDuBouton } from './Button.types';
+import { ButtonContent } from './ButtonContent';
+import { styleDuPressable } from './buttonStyling';
+export * from './Button.types';
 export const Button = React.forwardRef(function Button(props, ref) {
-    const { title, type, size, variant, disabled, startIcon, endIcon, noPadding, borderNone, leftAlign, isLoading, selected, fullWidth = false, ContainerProps = {}, active = false, ...buttonProps } = props;
-    const { style, hoverStyle, ...containerProps } = ContainerProps;
+    const { type, disabled, isLoading, active = false, expanded = false, ...buttonProps } = props;
     const styles = useStyles();
-    const containerSize = size === 'sm'
-        ? styles.smContainer
-        : size === 'lg'
-            ? styles.lgContainer
-            : size === 'xs'
-                ? styles.xsContainer
-                : styles.mdContainer;
-    const titleSize = size === 'sm' ? styles.smTitle : size === 'lg' ? styles.lgTitle : size === 'xs' ? styles.xsTitle : styles.mdTitle;
-    const noPaddingStyle = { paddingTop: 0, paddingBottom: 0, paddingLeft: 0, paddingRight: 0 };
-    const buttonContainerStyle = (state) => {
-        let applicableStyles = {
-            ...styles.container,
-            ...(startIcon
-                ? size === 'sm'
-                    ? styles.smContainerStartIcon
-                    : size === 'lg'
-                        ? styles.lgContainerStartIcon
-                        : styles.mdContainerStartIcon
-                : {}),
-            ...(endIcon
-                ? size === 'sm'
-                    ? styles.smContainerEndIcon
-                    : size === 'lg'
-                        ? styles.lgContainerEndIcon
-                        : styles.mdContainerEndIcon
-                : {}),
-        };
-        if (selected) {
-            applicableStyles = { ...applicableStyles, ...styles.selectedContainer };
-        }
-        else if (variant === 'primary') {
-            applicableStyles = { ...applicableStyles, ...styles.primaryContainer };
-            if (disabled)
-                applicableStyles = { ...applicableStyles, ...styles.primaryContainerDisabled };
-            else if (state?.pressed || active)
-                applicableStyles = { ...applicableStyles, ...styles.primaryContainerPressed };
-        }
-        else if (variant === 'secondary') {
-            applicableStyles = { ...applicableStyles, ...styles.secondaryContainer };
-            if (disabled)
-                applicableStyles = { ...applicableStyles, ...styles.secondaryContainerDisabled };
-            else if (state?.pressed || active)
-                applicableStyles = { ...applicableStyles, ...styles.secondaryContainerPressed };
-        }
-        else if (variant === 'tertiary') {
-            applicableStyles = { ...applicableStyles, ...styles.tertiaryContainer };
-            if (disabled)
-                applicableStyles = { ...applicableStyles, ...styles.tertiaryContainerDisabled };
-            else if (state?.pressed || active)
-                applicableStyles = { ...applicableStyles, ...styles.tertiaryContainerPressed };
-        }
-        else if (variant === 'danger') {
-            applicableStyles = { ...applicableStyles, ...styles.dangerContainer };
-            if (disabled)
-                applicableStyles = { ...applicableStyles, ...styles.dangerContainerDisabled };
-            else if (state?.pressed || active)
-                applicableStyles = { ...applicableStyles, ...styles.dangerContainerPressed };
-        }
-        else if (variant === 'link') {
-            applicableStyles = { ...applicableStyles, ...styles.linkContainer };
-            if (disabled)
-                applicableStyles = { ...applicableStyles, ...styles.tertiaryContainerDisabled };
-            else if (state?.pressed || active)
-                applicableStyles = { ...applicableStyles, ...styles.linkContainerPressed };
-        }
-        return {
-            ...applicableStyles,
-            ...containerSize,
-            ...(noPadding ? noPaddingStyle : {}),
-            ...(leftAlign ? { justifyContent: 'left' } : {}),
-            borderWidth: 0,
-            borderColor: undefined,
-            borderStyle: undefined,
-            ...(borderNone
-                ? {
-                    borderTopLeftRadius: 0,
-                    borderTopRightRadius: 0,
-                    borderBottomLeftRadius: 0,
-                    borderBottomRightRadius: 0,
-                }
-                : {}),
-        };
-    };
-    const buttonContainerHoverStyle = () => {
-        if (disabled)
-            return {};
-        if (selected)
-            return styles.selectedContainerHover;
-        else if (variant === 'primary')
-            return styles.primaryContainerHover;
-        else if (variant === 'secondary')
-            return styles.secondaryContainerHover;
-        else if (variant === 'tertiary')
-            return styles.tertiaryContainerHover;
-        else if (variant === 'danger')
-            return styles.dangerContainerHover;
-        else if (variant === 'link')
-            return styles.linkContainerHover;
-    };
-    const textStyle = (state) => {
-        let applicableStyles = styles.title;
-        if (selected) {
-            applicableStyles = { ...applicableStyles, ...styles.selectedTitle };
-        }
-        else if (variant === 'primary') {
-            applicableStyles = { ...applicableStyles, ...styles.primaryTitle };
-            if (disabled)
-                applicableStyles = { ...applicableStyles, ...styles.primaryTitleDisabled };
-            else if (state.hovered)
-                applicableStyles = { ...applicableStyles, ...styles.primaryTitleHover };
-        }
-        else if (variant === 'secondary') {
-            applicableStyles = { ...applicableStyles, ...styles.secondaryTitle };
-            if (disabled)
-                applicableStyles = { ...applicableStyles, ...styles.secondaryTitleDisabled };
-            else if (state.hovered)
-                applicableStyles = { ...applicableStyles, ...styles.secondaryTitleHover };
-        }
-        else if (variant === 'tertiary') {
-            applicableStyles = { ...applicableStyles, ...styles.tertiaryTitle };
-            if (disabled)
-                applicableStyles = { ...applicableStyles, ...styles.tertiaryTitleDisabled };
-            else if (state.hovered)
-                applicableStyles = { ...applicableStyles, ...styles.tertiaryTitleHover };
-        }
-        else if (variant === 'danger') {
-            applicableStyles = { ...applicableStyles, ...styles.dangerTitle };
-            if (disabled)
-                applicableStyles = { ...applicableStyles, ...styles.dangerTitleDisabled };
-            else if (state.hovered)
-                applicableStyles = { ...applicableStyles, ...styles.dangerTitleHover };
-            else if (state.pressed)
-                applicableStyles = { ...applicableStyles, ...styles.dangerTitlePressed };
-        }
-        else if (variant === 'link') {
-            applicableStyles = { ...applicableStyles, ...styles.linkTitle };
-            if (disabled)
-                applicableStyles = { ...applicableStyles, ...styles.tertiaryTitleDisabled };
-            else if (state.hovered)
-                applicableStyles = { ...applicableStyles, ...styles.linkTitleHover };
-        }
-        return { ...applicableStyles, ...titleSize };
-    };
-    const iconStyle = (state) => {
-        const iconSize = size === 'lg' ? 'md' : 'sm';
-        if (selected) {
-            return { size: iconSize, color: styles.selectedIcon.color };
-        }
-        else if (variant === 'primary') {
-            if (disabled)
-                return { size: iconSize, color: styles.primaryIconDisabled.color };
-            else if (state.hovered)
-                return { size: iconSize, color: styles.primaryIconHover.color };
-            return { size: iconSize, color: styles.primaryIcon.color };
-        }
-        else if (variant === 'secondary') {
-            if (disabled)
-                return { size: iconSize, color: styles.secondaryIconDisabled.color };
-            else if (state.hovered)
-                return { size: iconSize, color: styles.secondaryIconHover.color };
-            return { size: iconSize, color: styles.secondaryIcon.color };
-        }
-        else if (variant === 'tertiary') {
-            if (disabled)
-                return { size: iconSize, color: styles.tertiaryIconDisabled.color };
-            else if (state.hovered)
-                return { size: iconSize, color: styles.tertiaryIconHover.color };
-            return { size: iconSize, color: styles.tertiaryIcon.color };
-        }
-        else if (variant === 'danger') {
-            if (disabled)
-                return { size: iconSize, color: styles.dangerIconDisabled.color };
-            else if (state.hovered)
-                return { size: iconSize, color: styles.dangerIconHover.color };
-            return { size: iconSize, color: styles.dangerIcon.color };
-        }
-        else if (variant === 'link') {
-            if (disabled)
-                return { size: iconSize, color: styles.linkIconDisabled.color };
-            else if (state.hovered)
-                return { size: iconSize, color: styles.linkTitleHover.color };
-            return { size: iconSize, color: styles.linkIcon.color };
-        }
-        return { size: iconSize };
-    };
-    const getPressableStyle = (state) => {
-        const sizeRadii = size === 'xs' || size === 'sm'
-            ? {
-                borderTopLeftRadius: styles.xsContainer.borderTopLeftRadius,
-                borderBottomLeftRadius: styles.xsContainer.borderBottomLeftRadius,
-                borderTopRightRadius: styles.xsContainer.borderTopRightRadius,
-                borderBottomRightRadius: styles.xsContainer.borderBottomRightRadius,
-            }
-            : {
-                borderTopLeftRadius: styles.container.borderTopLeftRadius,
-                borderBottomLeftRadius: styles.container.borderBottomLeftRadius,
-                borderTopRightRadius: styles.container.borderTopRightRadius,
-                borderBottomRightRadius: styles.container.borderBottomRightRadius,
-            };
-        const radiusStyle = borderNone
-            ? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderTopRightRadius: 0, borderBottomRightRadius: 0 }
-            : sizeRadii;
-        let borderProps = {};
-        if (selected) {
-            borderProps = { borderWidth: 1, borderStyle: 'solid', borderColor: styles.selectedContainer.borderColor };
-        }
-        else if (variant === 'secondary') {
-            const borderColor = disabled
-                ? styles.secondaryContainerDisabled.borderColor
-                : state.hovered
-                    ? styles.secondaryContainerHover.borderColor
-                    : styles.secondaryContainer.borderColor;
-            borderProps = { borderWidth: 1, borderStyle: 'solid', borderColor };
-        }
-        else if (variant === 'danger') {
-            const borderColor = disabled
-                ? styles.dangerContainerDisabled.borderColor
-                : state.hovered
-                    ? styles.dangerContainerHover.borderColor
-                    : styles.dangerContainer.borderColor;
-            borderProps = { borderWidth: 1, borderStyle: 'solid', borderColor };
-        }
-        return {
-            ...radiusStyle,
-            ...borderProps,
-            overflow: 'hidden',
-            ...(fullWidth ? { width: '100%' } : {}),
-        };
-    };
-    return (_jsx(Pressable, { ref: ref, disabled: disabled, accessibilityRole: "button", ...(type === 'submit' ? { 'aria-selected': true } : {}), ...buttonProps, style: (state) => getPressableStyle(state), children: (state) => (_jsxs(Box, { style: [buttonContainerStyle({ pressed: state.pressed }), style], hoverStyle: { ...buttonContainerHoverStyle(), ...hoverStyle }, ...containerProps, children: [startIcon && _jsx(LucideIcon, { name: startIcon, ...iconStyle({ hovered: !!state.hovered }) }), _jsx(Typography, { "user-select": "false", style: textStyle({ hovered: !!state.hovered, pressed: !!state.pressed }), children: title }), isLoading ? (_jsx(Spinner, { size: "sm", delay: "long", style: styles.buttonLoader })) : (endIcon && _jsx(LucideIcon, { name: endIcon, ...iconStyle({ hovered: !!state.hovered }) }))] })) }));
+    const etat = etatDuBouton(props);
+    /** Ne repond plus : desactive par l'appelant, ou occupe a charger. */
+    const inerte = !!disabled || !!isLoading;
+    // Les props de style et de contenu voyagent dans `etat` et dans `ButtonContent` : les
+    // retirer ici evite que le Pressable ne les repande sur la vue native.
+    const { title, size, variant, leading, trailing, contentAlign, selected, ContainerProps, fullWidth, loadingDelay, ...pressableProps } = buttonProps;
+    return (_jsx(Pressable, { ref: ref, 
+        // `inerte` plutot que `disabled` seul, et il n'entre pas dans `etat` : le Pressable se
+        // ferme aux clics et pose `aria-disabled`, mais l'apparence reste celle du repos. C'est
+        // le choix de Primer, qui pose `aria-disabled` et retire son `onClick` sans griser le
+        // bouton pendant qu'il charge.
+        disabled: inerte, accessibilityRole: "button", ...(type === 'submit' ? { 'aria-selected': true } : {}), ...pressableProps, accessibilityState: { disabled: inerte, expanded }, "aria-expanded": expanded || undefined, ...focusRingProps(), style: (state) => styleDuPressable(styles, etat, { hovered: !!state.hovered }), children: (state) => (_jsx(ButtonContent, { styles: styles, etat: etat, state: state, actif: !!state.pressed || active || expanded, props: props })) }));
 });