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

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

@@ -6,6 +6,12 @@ declare const _default: {
     component: (props: import("./BottomSheet").BottomSheetProps) => import("react").JSX.Element;
     styleFn: () => {
         container: {};
+        sheetContainer: {
+            marginBottom: string | number;
+        };
+        sheetBackground: {
+            backgroundColor: "#FFFFFF";
+        };
         content: {
             backgroundColor: "#FFFFFF";
             marginTop: string | number;
@@ -20,20 +26,17 @@ declare const _default: {
             flexDirection: "row";
         };
         handle: {
-            width: "90%";
-            margin: string;
+            width: "100%";
+            margin: number;
             height: 16;
-            backgroundColor: "#FFFFFF";
-        };
-        frame: {
-            backgroundColor: "#FFFFFF";
-            marginBottom: string | number;
+            flexShrink: number;
+            backgroundColor: "transparent";
         };
         overlay: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         title: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             marginTop: string;
             marginBottom: string;
             fontSize: 18;

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"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.styles.d.ts

@@ -1,5 +1,11 @@
 export declare const useStyles: () => {
     container: {};
+    sheetContainer: {
+        marginBottom: string | number;
+    };
+    sheetBackground: {
+        backgroundColor: "#FFFFFF";
+    };
     content: {
         backgroundColor: "#FFFFFF";
         marginTop: string | number;
@@ -14,20 +20,17 @@ export declare const useStyles: () => {
         flexDirection: "row";
     };
     handle: {
-        width: "90%";
-        margin: string;
+        width: "100%";
+        margin: number;
         height: 16;
-        backgroundColor: "#FFFFFF";
-    };
-    frame: {
-        backgroundColor: "#FFFFFF";
-        marginBottom: string | number;
+        flexShrink: number;
+        backgroundColor: "transparent";
     };
     overlay: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     title: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         marginTop: string;
         marginBottom: string;
         fontSize: 18;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCnB,CAAC"}
+{"version":3,"file":"BottomSheet.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/BottomSheet/BottomSheet.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCnB,CAAC"}

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

@@ -1,6 +1,12 @@
 import { makeStyles, Spacings } from '@alveole/theme';
 export const useStyles = makeStyles(({ spacing, text, color }) => ({
     container: {},
+    sheetContainer: {
+        marginBottom: spacing('3W'),
+    },
+    sheetBackground: {
+        backgroundColor: '#FFFFFF',
+    },
     content: {
         backgroundColor: '#FFFFFF',
         marginTop: spacing('2W'),
@@ -15,14 +21,11 @@ export const useStyles = makeStyles(({ spacing, text, color }) => ({
         flexDirection: 'row',
     },
     handle: {
-        width: '90%',
-        margin: 'auto',
+        width: '100%',
+        margin: 0,
         height: Spacings['2W'],
-        backgroundColor: '#FFFFFF',
-    },
-    frame: {
-        backgroundColor: '#FFFFFF',
-        marginBottom: spacing('3W'),
+        flexShrink: 0,
+        backgroundColor: 'transparent',
     },
     overlay: {
         backgroundColor: color.alpha(color.background.inverse, 0.5),

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;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"}
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/ui/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { usePathname } from 'expo-router';
 import { A } from '../../core/A';
 import { Box } from '../../core/Box';
+import { soulignementAuSurvol } from '../../core/styleTamagui/soulignement';
 import { Typography } from '../../core/Typography';
 import { useStyles } from './Breadcrumbs.styles';
 function humanizeSegment(segment) {
@@ -38,5 +39,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(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}`))) }));
+    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, children: _jsx(Typography, { style: styles.link, textDecorationLine: soulignementAuSurvol, children: item.label }) }))] }, `${item.href}-${index}`))) }));
 };

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

@@ -21,11 +21,16 @@ declare const _default: {
             height: number;
             marginLeft: string | number;
             marginRight: string | number;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             transform: "rotate(15deg)";
         };
         current: {
-            color: string;
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+            color: import("@alveole/theme").ThemeColor;
         };
         link: {
             transitionProperty: "text-decoration";
@@ -36,11 +41,7 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            color: string;
-            textDecoration: string;
-        };
-        linkHover: {
-            textDecoration: string;
+            color: import("@alveole/theme").ThemeColor;
         };
     };
 };

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

@@ -11,9 +11,9 @@ export default {
     component: Breadcrumbs,
     styleFn: useStyles,
 };
-export const Default = () => (_jsx(Box, { p: 4, children: _jsx(Breadcrumbs, {}) }));
-export const WithCustomRootLabel = () => (_jsx(Box, { p: 4, children: _jsx(Breadcrumbs, { rootLabel: "Tableau de bord" }) }));
-export const WithCustomLabels = () => (_jsx(Box, { p: 4, children: _jsx(Breadcrumbs, { getLabel: (segment, _index, _path) => {
+export const Default = () => (_jsx(Box, { p: "1V", children: _jsx(Breadcrumbs, {}) }));
+export const WithCustomRootLabel = () => (_jsx(Box, { p: "1V", children: _jsx(Breadcrumbs, { rootLabel: "Tableau de bord" }) }));
+export const WithCustomLabels = () => (_jsx(Box, { p: "1V", children: _jsx(Breadcrumbs, { getLabel: (segment, _index, _path) => {
             const labels = {
                 admin: 'Administration',
                 missions: 'Missions',
@@ -23,17 +23,17 @@ export const WithCustomLabels = () => (_jsx(Box, { p: 4, children: _jsx(Breadcru
             };
             return labels[segment] ?? segment;
         } }) }));
-export const WithCustomHref = () => (_jsx(Box, { p: 4, children: _jsx(Breadcrumbs, { getHref: (segment, _index, path) => {
+export const WithCustomHref = () => (_jsx(Box, { p: "1V", children: _jsx(Breadcrumbs, { getHref: (segment, _index, path) => {
             const hrefs = {
                 components: '/ui-kit/components',
             };
             return hrefs[segment] ?? path;
         } }) }));
-export const WithNoLink = () => (_jsx(Box, { p: 4, children: _jsx(Breadcrumbs, { getHref: (segment, _index, path) => {
+export const WithNoLink = () => (_jsx(Box, { p: "1V", children: _jsx(Breadcrumbs, { getHref: (segment, _index, path) => {
             const noLink = ['components'];
             return noLink.includes(segment) ? null : path;
         } }) }));
-export const WithSegmentsToSkip = () => (_jsx(Box, { p: 4, children: _jsx(Breadcrumbs, { segmentsToSkip: ['admin', 'ui-kit', 'components'], getLabel: (segment, _index, _path) => {
+export const WithSegmentsToSkip = () => (_jsx(Box, { p: "1V", children: _jsx(Breadcrumbs, { segmentsToSkip: ['admin', 'ui-kit', 'components'], getLabel: (segment, _index, _path) => {
             const labels = {
                 admin: 'Administration',
                 missions: 'Missions',

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Breadcrumbs/Breadcrumbs.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA2F,CAAC;AAEhH,eAAO,MAAM,mBAAmB,cAAqI,CAAC;AAEtK,eAAO,MAAM,gBAAgB,cAAsb,CAAC;AAEpd,eAAO,MAAM,cAAc,cAAgT,CAAC;AAE5U,eAAO,MAAM,UAAU,cAA0P,CAAC;AAElR,eAAO,MAAM,kBAAkB,cAAkf,CAAC;AAElhB,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Breadcrumbs.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Breadcrumbs/Breadcrumbs.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA8F,CAAC;AAEnH,eAAO,MAAM,mBAAmB,cAAwI,CAAC;AAEzK,eAAO,MAAM,gBAAgB,cAAyb,CAAC;AAEvd,eAAO,MAAM,cAAc,cAAmT,CAAC;AAE/U,eAAO,MAAM,UAAU,cAA6P,CAAC;AAErR,eAAO,MAAM,kBAAkB,cAAqf,CAAC;AAErhB,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,11 +1,11 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Breadcrumbs/Breadcrumbs.stories.tsx
-export const Default = () => "export const Default = () => (\n  <Box p={4}>\n    <Breadcrumbs />\n  </Box>\n);";
-export const WithCustomRootLabel = () => "export const WithCustomRootLabel = () => (\n  <Box p={4}>\n    <Breadcrumbs rootLabel=\"Tableau de bord\" />\n  </Box>\n);";
-export const WithCustomLabels = () => "export const WithCustomLabels = () => (\n  <Box p={4}>\n    <Breadcrumbs\n      getLabel={(segment, _index, _path) => {\n        const labels: Record<string, string> = {\n          admin: 'Administration',\n          missions: 'Missions',\n          show: 'Détail',\n          salarie: 'Espace salarié',\n          client: 'Espace client',\n        };\n        return labels[segment] ?? segment;\n      }}\n    />\n  </Box>\n);";
-export const WithCustomHref = () => "export const WithCustomHref = () => (\n  <Box p={4}>\n    <Breadcrumbs\n      getHref={(segment, _index, path) => {\n        const hrefs: Record<string, string> = {\n          components: '/ui-kit/components',\n        };\n        return hrefs[segment] ?? path;\n      }}\n    />\n  </Box>\n);";
-export const WithNoLink = () => "export const WithNoLink = () => (\n  <Box p={4}>\n    <Breadcrumbs\n      getHref={(segment, _index, path) => {\n        const noLink = ['components'];\n        return noLink.includes(segment) ? null : path;\n      }}\n    />\n  </Box>\n);";
-export const WithSegmentsToSkip = () => "export const WithSegmentsToSkip = () => (\n  <Box p={4}>\n    <Breadcrumbs\n      segmentsToSkip={['admin', 'ui-kit', 'components']}\n      getLabel={(segment, _index, _path) => {\n        const labels: Record<string, string> = {\n          admin: 'Administration',\n          missions: 'Missions',\n          show: 'Détail',\n          salarie: 'Espace salarié',\n          client: 'Espace client',\n        };\n        return labels[segment] ?? segment;\n      }}\n    />\n  </Box>\n);";
+export const Default = () => "export const Default = () => (\n  <Box p=\"1V\">\n    <Breadcrumbs />\n  </Box>\n);";
+export const WithCustomRootLabel = () => "export const WithCustomRootLabel = () => (\n  <Box p=\"1V\">\n    <Breadcrumbs rootLabel=\"Tableau de bord\" />\n  </Box>\n);";
+export const WithCustomLabels = () => "export const WithCustomLabels = () => (\n  <Box p=\"1V\">\n    <Breadcrumbs\n      getLabel={(segment, _index, _path) => {\n        const labels: Record<string, string> = {\n          admin: 'Administration',\n          missions: 'Missions',\n          show: 'Détail',\n          salarie: 'Espace salarié',\n          client: 'Espace client',\n        };\n        return labels[segment] ?? segment;\n      }}\n    />\n  </Box>\n);";
+export const WithCustomHref = () => "export const WithCustomHref = () => (\n  <Box p=\"1V\">\n    <Breadcrumbs\n      getHref={(segment, _index, path) => {\n        const hrefs: Record<string, string> = {\n          components: '/ui-kit/components',\n        };\n        return hrefs[segment] ?? path;\n      }}\n    />\n  </Box>\n);";
+export const WithNoLink = () => "export const WithNoLink = () => (\n  <Box p=\"1V\">\n    <Breadcrumbs\n      getHref={(segment, _index, path) => {\n        const noLink = ['components'];\n        return noLink.includes(segment) ? null : path;\n      }}\n    />\n  </Box>\n);";
+export const WithSegmentsToSkip = () => "export const WithSegmentsToSkip = () => (\n  <Box p=\"1V\">\n    <Breadcrumbs\n      segmentsToSkip={['admin', 'ui-kit', 'components']}\n      getLabel={(segment, _index, _path) => {\n        const labels: Record<string, string> = {\n          admin: 'Administration',\n          missions: 'Missions',\n          show: 'Détail',\n          salarie: 'Espace salarié',\n          client: 'Espace client',\n        };\n        return labels[segment] ?? segment;\n      }}\n    />\n  </Box>\n);";
 export const storySources = {
     Default,
     WithCustomRootLabel,

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

@@ -14,11 +14,16 @@ export declare const useStyles: () => {
         height: number;
         marginLeft: string | number;
         marginRight: string | number;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         transform: "rotate(15deg)";
     };
     current: {
-        color: string;
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+        color: import("@alveole/theme").ThemeColor;
     };
     link: {
         transitionProperty: "text-decoration";
@@ -29,11 +34,7 @@ export declare const useStyles: () => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        color: string;
-        textDecoration: string;
-    };
-    linkHover: {
-        textDecoration: string;
+        color: import("@alveole/theme").ThemeColor;
     };
 };
 //# sourceMappingURL=Breadcrumbs.styles.d.ts.map

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BnB,CAAC"}
+{"version":3,"file":"Breadcrumbs.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Breadcrumbs/Breadcrumbs.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BnB,CAAC"}

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

@@ -16,16 +16,13 @@ export const useStyles = makeStyles(({ text, color, spacing }) => ({
     },
     current: {
         color: color.light.text['active-grey'],
+        ...text['Corps de texte'].SM.Regular,
     },
     link: {
         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: 'underline',
-    },
 }));

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

@@ -1,6 +1,8 @@
 import React from 'react';
-import { View } from 'react-native';
+import { PressableInstance } from 'react-native';
 export * from './Button.types';
+export interface ButtonElement extends PressableInstance {
+}
 export declare const Button: React.ForwardRefExoticComponent<Omit<import("react-native").PressableProps, "children" | "style"> & {
     title: string;
     size?: import("./buttonVariants").ButtonTaille;
@@ -16,5 +18,5 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<import("react-
     expanded?: boolean;
     isLoading?: boolean;
     loadingDelay?: import("../Spinner/Spinner.shared").SpinnerDelay;
-} & React.RefAttributes<View>>;
+} & React.RefAttributes<ButtonElement>>;
 //# 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":"AACA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAAa,IAAI,EAAE,MAAM,cAAc,CAAC;AAO/C,cAAc,gBAAgB,CAAC;AAE/B,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;8BA0EjB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAAa,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAO5D,cAAc,gBAAgB,CAAC;AAG/B,MAAM,WAAW,aAAc,SAAQ,iBAAiB;CAAG;AAE3D,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;uCA0EjB,CAAC"}

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

@@ -20,154 +20,154 @@ declare const _default: {
         expanded?: boolean;
         isLoading?: boolean;
         loadingDelay?: import("../Spinner/Spinner.shared").SpinnerDelay;
-    } & React.RefAttributes<import("react-native").View>>;
+    } & React.RefAttributes<import("./Button").ButtonElement>>;
     styleFn: () => {
         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/Button.stories.js

@@ -10,7 +10,7 @@ export default {
     title: 'Button',
     tags: ['ui'],
     experimental: false,
-    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Composants?node-id=1002-548',
+    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Composants?node-id=3993-778',
     description: 'Boutons de type Pressable (React Native) avec différentes tailles et variants.',
     component: Button,
     styleFn: useStyles,
@@ -33,16 +33,16 @@ export default {
  *
  * Pour ce qui navigue, prendre `A`. Pour l'action discrète sans cadre, c'est `tertiary`.
  */
-export const Variants = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, children: [_jsx(Button, { variant: "primary", title: "Primary" }), _jsx(Button, { variant: "secondary", title: "Secondary" }), _jsx(Button, { variant: "tertiary", title: "Tertiary" }), _jsx(Button, { variant: "danger", title: "Danger" })] }));
+export const Variants = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: "3W", children: [_jsx(Button, { variant: "primary", title: "Primary" }), _jsx(Button, { variant: "secondary", title: "Secondary" }), _jsx(Button, { variant: "tertiary", title: "Tertiary" }), _jsx(Button, { variant: "danger", title: "Danger" })] }));
 /** `md` par défaut. `sm` pour les zones denses, `lg` pour une action qu'on veut mettre en avant. */
-export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center' }, gap: 24, children: [_jsx(Button, { variant: "secondary", size: "sm", title: "Bouton sm" }), _jsx(Button, { variant: "secondary", size: "md", title: "Bouton md" }), _jsx(Button, { variant: "secondary", size: "lg", title: "Bouton lg" })] }));
+export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', style: { alignItems: 'center' }, gap: "3W", children: [_jsx(Button, { variant: "secondary", size: "sm", title: "Sm" }), _jsx(Button, { variant: "secondary", size: "md", title: "Md" }), _jsx(Button, { variant: "secondary", size: "lg", title: "Lg" })] }));
 /**
  * - `disabled` : l'action n'est pas disponible. Le bouton ne répond plus ni au clic ni au clavier.
  * - `selected` : le bouton fait partie d'un groupe et c'est lui qui est choisi.
  * - `expanded` : le bouton commande un menu ou un panneau actuellement déplié. Il pose aussi
  *   l'état accessible correspondant, ce que `selected` ne fait pas.
  */
-export const States = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, children: [_jsx(Button, { variant: "secondary", title: "Normal" }), _jsx(Button, { variant: "secondary", title: "Disabled", disabled: true }), _jsx(Button, { variant: "secondary", title: "Selected", selected: true }), _jsx(Button, { variant: "secondary", title: "Expanded", expanded: true })] }));
+export const States = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: "3W", children: [_jsx(Button, { variant: "secondary", title: "Default" }), _jsx(Button, { variant: "secondary", title: "Disabled", disabled: true }), _jsx(Button, { variant: "secondary", title: "Selected", selected: true }), _jsx(Button, { variant: "secondary", title: "Expanded", expanded: true })] }));
 /**
  * Le spinner n'apparaît qu'après un délai, réglé par `loadingDelay` : mêmes valeurs que la
  * prop `delay` de `Spinner` (`false` / `true` / `'short'` (300 ms) / `'long'` / `number`).
@@ -71,7 +71,7 @@ export const Loading = () => {
         setIsLoading(true);
         setTimeout(() => setIsLoading(false), 3000);
     };
-    return (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, children: [_jsx(Button, { variant: "primary", title: "Enregistrer", isLoading: isLoading, onPress: handlePress }), _jsx(Button, { variant: "secondary", title: "Exporter", leading: "Download", isLoading: isLoading, onPress: handlePress }), _jsx(Button, { variant: "primary", title: "D\u00E9lai court", loadingDelay: "short", isLoading: isLoading, onPress: handlePress })] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: "3W", children: [_jsx(Button, { variant: "primary", title: "Enregistrer", isLoading: isLoading, onPress: handlePress }), _jsx(Button, { variant: "secondary", title: "Exporter", leading: "Download", isLoading: isLoading, onPress: handlePress }), _jsx(Button, { variant: "primary", title: "D\u00E9lai court", loadingDelay: "short", isLoading: isLoading, onPress: handlePress })] }));
 };
 /**
  * Un `onPress` qui rend une promesse verrouille le bouton jusqu'à sa fin, résolue ou rejetée :
@@ -90,16 +90,16 @@ export const OnPressAsynchrone = () => {
         setEnvois(n => n + 1);
         await new Promise(resolve => setTimeout(resolve, 3000));
     };
-    return (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, style: { alignItems: 'center' }, children: [_jsx(Button, { variant: "primary", title: "Envoyer", loadingDelay: "short", onPress: envoyer }), _jsxs(Typography, { children: ["Envois : ", envois] })] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: "3W", style: { alignItems: 'center' }, children: [_jsx(Button, { variant: "primary", title: "Envoyer", loadingDelay: "short", onPress: envoyer }), _jsxs(Typography, { children: ["Envois : ", envois] })] }));
 };
 /** `leading` place l’icône avant le libellé, `trailing` après. Les deux peuvent coexister. */
-export const Icons = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, children: [_jsx(Button, { variant: "secondary", title: "Ajouter", leading: "Plus" }), _jsx(Button, { variant: "secondary", title: "Exporter", trailing: "Download" }), _jsx(Button, { variant: "secondary", title: "Filtres", leading: "Plus", trailing: "ChevronDown" })] }));
+export const Icons = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: "3W", children: [_jsx(Button, { variant: "secondary", title: "Leading", leading: "Plus" }), _jsx(Button, { variant: "secondary", title: "Trailing", trailing: "Download" }), _jsx(Button, { variant: "secondary", title: "Filtres", leading: "Plus", trailing: "ChevronDown" })] }));
 /**
  * `leading` et `trailing` acceptent aussi un élément : un avatar, un logo de réseau social.
  * Il est posé dans un emplacement de la taille de l'icône, sans recevoir de couleur, si bien
  * que le bouton garde sa hauteur et son alignement.
  */
-export const TertiaireAvecAvatar = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, style: { alignItems: 'center' }, children: [_jsx(Button, { variant: "tertiary", title: "Marie Curie", leading: _jsx(Avatar, { size: "xs", fallbackText: "Marie Curie" }) }), _jsx(Button, { variant: "tertiary", title: "Marie Curie", leading: "User" })] }));
+export const TertiaireAvecAvatar = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: "3W", style: { alignItems: 'center' }, children: [_jsx(Button, { variant: "tertiary", title: "Marie Curie", leading: _jsx(Avatar, { size: "xs", fallbackText: "Marie Curie" }) }), _jsx(Button, { variant: "tertiary", title: "Marie Curie", leading: "User" })] }));
 /**
  * `ButtonIcon` est la **seule** façon d'obtenir un bouton carré. `Button` exige un `title` :
  * il ne bascule plus en mode icône seule quand on le lui retire.
@@ -116,7 +116,7 @@ export const TertiaireAvecAvatar = () => (_jsxs(Box, { display: "flex", flexDire
  * Il accepte `primary`, `secondary` et `tertiary`, et `iconSize` pour dissocier la taille de
  * l'icône de celle du bouton.
  */
-export const IconOnly = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, style: { alignItems: 'center' }, children: [_jsx(ButtonIcon, { variant: "tertiary", size: "sm", icon: "MoreHorizontal", accessibilityLabel: "Plus d'actions" }), _jsx(ButtonIcon, { variant: "tertiary", size: "md", icon: "MoreHorizontal", accessibilityLabel: "Plus d'actions" }), _jsx(ButtonIcon, { variant: "tertiary", size: "lg", icon: "MoreHorizontal", accessibilityLabel: "Plus d'actions" }), _jsx(ButtonIcon, { variant: "secondary", size: "md", icon: "Trash", accessibilityLabel: "Supprimer" }), _jsx(ButtonIcon, { variant: "primary", size: "md", icon: "Plus", accessibilityLabel: "Ajouter" }), _jsx(ButtonIcon, { variant: "tertiary", size: "md", icon: "CircleUser", iconSize: "xs", accessibilityLabel: "Voir le profil" })] }));
+export const IconOnly = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: "3W", style: { alignItems: 'center' }, children: [_jsx(ButtonIcon, { variant: "tertiary", size: "sm", icon: "MoreHorizontal", accessibilityLabel: "Plus d'actions" }), _jsx(ButtonIcon, { variant: "tertiary", size: "md", icon: "MoreHorizontal", accessibilityLabel: "Plus d'actions" }), _jsx(ButtonIcon, { variant: "tertiary", size: "lg", icon: "MoreHorizontal", accessibilityLabel: "Plus d'actions" }), _jsx(ButtonIcon, { variant: "secondary", size: "md", icon: "Trash", accessibilityLabel: "Supprimer" }), _jsx(ButtonIcon, { variant: "primary", size: "md", icon: "Plus", accessibilityLabel: "Ajouter" }), _jsx(ButtonIcon, { variant: "tertiary", size: "md", icon: "CircleUser", iconSize: "xs", accessibilityLabel: "Voir le profil" })] }));
 /** Le bouton remplit la largeur de son parent, au lieu de s'ajuster à son contenu. */
 export const FullWidth = () => _jsx(Button, { variant: "primary", title: "Full Width", fullWidth: true });
 export * as Sources from './Button.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,cAA6U,CAAC;AAEnW,eAAO,MAAM,KAAK,cAAiW,CAAC;AAEpX,eAAO,MAAM,MAAM,cAA4W,CAAC;AAEhY,eAAO,MAAM,OAAO,cAAypB,CAAC;AAE9qB,eAAO,MAAM,iBAAiB,cAA2f,CAAC;AAE1hB,eAAO,MAAM,KAAK,cAAwW,CAAC;AAE3X,eAAO,MAAM,mBAAmB,cAAkW,CAAC;AAEnY,eAAO,MAAM,QAAQ,cAAizB,CAAC;AAEv0B,eAAO,MAAM,SAAS,cAAwG,CAAC;AAE/H,eAAO,MAAM,YAAY;;;;;;;;;;CAUf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAUtE,CAAC"}
+{"version":3,"file":"Button.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,cAAiW,CAAC;AAEvX,eAAO,MAAM,KAAK,cAAgW,CAAC;AAEnX,eAAO,MAAM,MAAM,cAAiY,CAAC;AAErZ,eAAO,MAAM,OAAO,cAA6qB,CAAC;AAElsB,eAAO,MAAM,iBAAiB,cAA+gB,CAAC;AAE9iB,eAAO,MAAM,KAAK,cAA4X,CAAC;AAE/Y,eAAO,MAAM,mBAAmB,cAAsX,CAAC;AAEvZ,eAAO,MAAM,QAAQ,cAAq0B,CAAC;AAE31B,eAAO,MAAM,SAAS,cAAwG,CAAC;AAE/H,eAAO,MAAM,YAAY;;;;;;;;;;CAUf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAUtE,CAAC"}