@alveole/components 2.0.0-alpha.15 → 2.0.0-alpha.17

package/dist/ui/Accordion/Accordion.styles.js

@@ -39,7 +39,7 @@ const entete = ({ spacing, color }) => {
         },
         accordionItemHeader: {
             ...enTete,
-            backgroundColor: '#FFFFFF',
+            backgroundColor: color.light.background['default-grey'],
         },
         accordionItemHeaderAlt: {
             ...enTete,
@@ -47,7 +47,7 @@ const entete = ({ spacing, color }) => {
         },
         accordionItemHeaderOutline: {
             ...enTete,
-            backgroundColor: '#FFFFFF',
+            backgroundColor: color.light.background['default-grey'],
             outlineWidth: 1,
             outlineColor: color.border['default-grey'],
             outlineStyle: 'solid',

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

@@ -10,12 +10,12 @@ declare const _default: {
             borderRadius: import("@alveole/theme").Radius;
         };
         fallback: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             alignItems: "center";
             justifyContent: "center";
         };
         fallbackText: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             display: "flex";
             justifyContent: "center";
             textAlign: "center";

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

@@ -3,12 +3,12 @@ export declare const useStyles: () => {
         borderRadius: import("@alveole/theme").Radius;
     };
     fallback: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         alignItems: "center";
         justifyContent: "center";
     };
     fallbackText: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         display: "flex";
         justifyContent: "center";
         textAlign: "center";

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

@@ -15,28 +15,28 @@ declare const _default: {
             justifyContent: "center";
         };
         badgeInfo: {
-            color: string;
-            backgroundColor: string;
+            color: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         badgeSuccess: {
-            color: string;
-            backgroundColor: string;
+            color: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         badgeError: {
-            color: string;
-            backgroundColor: string;
+            color: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         badgeWarning: {
-            color: string;
-            backgroundColor: string;
+            color: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         badgeNew: {
-            color: string;
-            backgroundColor: string;
+            color: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         badgeDefault: {
-            color: string;
-            backgroundColor: string;
+            color: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         badgeSm: {
             height: number;

package/dist/ui/Badge/Badge.stories.js

@@ -11,7 +11,7 @@ export default {
     component: Badge,
     styleFn: useStyles,
 };
-export const Variants = () => (_jsx(Box, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(Badge, { size: "md", variant: "default", children: "Badge default" }), _jsx(Badge, { size: "md", variant: "info", children: "Badge info" }), _jsx(Badge, { size: "md", variant: "error", children: "Badge error" }), _jsx(Badge, { size: "md", variant: "new", children: "Badge new" }), _jsx(Badge, { size: "md", variant: "success", children: "Badge success" }), _jsx(Badge, { size: "md", variant: "warning", children: "Badge warning" })] }) }));
-export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, flexWrap: "wrap", children: [_jsx(Badge, { size: "sm", variant: "info", m: "auto", children: "Badge small" }), _jsx(Badge, { size: "md", variant: "info", children: "Badge medium" })] }));
-export const Icons = () => (_jsx(Box, { display: "flex", flexDirection: "row", gap: 24, flexWrap: "wrap", children: _jsx(Badge, { size: "sm", variant: "info", icon: "Check", children: "Badge small" }) }));
+export const Variants = () => (_jsx(Box, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "3W", children: [_jsx(Badge, { size: "md", variant: "default", children: "Badge default" }), _jsx(Badge, { size: "md", variant: "info", children: "Badge info" }), _jsx(Badge, { size: "md", variant: "error", children: "Badge error" }), _jsx(Badge, { size: "md", variant: "new", children: "Badge new" }), _jsx(Badge, { size: "md", variant: "success", children: "Badge success" }), _jsx(Badge, { size: "md", variant: "warning", children: "Badge warning" })] }) }));
+export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "3W", flexWrap: "wrap", children: [_jsx(Badge, { size: "sm", variant: "info", m: "auto", children: "Badge small" }), _jsx(Badge, { size: "md", variant: "info", children: "Badge medium" })] }));
+export const Icons = () => (_jsx(Box, { display: "flex", flexDirection: "row", gap: "3W", flexWrap: "wrap", children: _jsx(Badge, { size: "sm", variant: "info", icon: "Check", children: "Badge small" }) }));
 export * as Sources from './Badge.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Badge/Badge.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,cAA6nB,CAAC;AAEnpB,eAAO,MAAM,KAAK,cAAkS,CAAC;AAErT,eAAO,MAAM,KAAK,cAA0N,CAAC;AAE7O,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Badge.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Badge/Badge.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,cAA+nB,CAAC;AAErpB,eAAO,MAAM,KAAK,cAAoS,CAAC;AAEvT,eAAO,MAAM,KAAK,cAA4N,CAAC;AAE/O,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,8 +1,8 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Badge/Badge.stories.tsx
-export const Variants = () => "export const Variants = () => (\n  <Box>\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <Badge size=\"md\" variant=\"default\">\n        Badge default\n      </Badge>\n      <Badge size=\"md\" variant=\"info\">\n        Badge info\n      </Badge>\n      <Badge size=\"md\" variant=\"error\">\n        Badge error\n      </Badge>\n      <Badge size=\"md\" variant=\"new\">\n        Badge new\n      </Badge>\n      <Badge size=\"md\" variant=\"success\">\n        Badge success\n      </Badge>\n      <Badge size=\"md\" variant=\"warning\">\n        Badge warning\n      </Badge>\n    </Box>\n  </Box>\n);";
-export const Sizes = () => "export const Sizes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={24} flexWrap=\"wrap\">\n    <Badge size=\"sm\" variant=\"info\" m=\"auto\">\n      Badge small\n    </Badge>\n    <Badge size=\"md\" variant=\"info\">\n      Badge medium\n    </Badge>\n  </Box>\n);";
-export const Icons = () => "export const Icons = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={24} flexWrap=\"wrap\">\n    <Badge size=\"sm\" variant=\"info\" icon=\"Check\">\n      Badge small\n    </Badge>\n  </Box>\n);";
+export const Variants = () => "export const Variants = () => (\n  <Box>\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <Badge size=\"md\" variant=\"default\">\n        Badge default\n      </Badge>\n      <Badge size=\"md\" variant=\"info\">\n        Badge info\n      </Badge>\n      <Badge size=\"md\" variant=\"error\">\n        Badge error\n      </Badge>\n      <Badge size=\"md\" variant=\"new\">\n        Badge new\n      </Badge>\n      <Badge size=\"md\" variant=\"success\">\n        Badge success\n      </Badge>\n      <Badge size=\"md\" variant=\"warning\">\n        Badge warning\n      </Badge>\n    </Box>\n  </Box>\n);";
+export const Sizes = () => "export const Sizes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap=\"3W\" flexWrap=\"wrap\">\n    <Badge size=\"sm\" variant=\"info\" m=\"auto\">\n      Badge small\n    </Badge>\n    <Badge size=\"md\" variant=\"info\">\n      Badge medium\n    </Badge>\n  </Box>\n);";
+export const Icons = () => "export const Icons = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap=\"3W\" flexWrap=\"wrap\">\n    <Badge size=\"sm\" variant=\"info\" icon=\"Check\">\n      Badge small\n    </Badge>\n  </Box>\n);";
 export const storySources = {
     Variants,
     Sizes,

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

@@ -8,28 +8,28 @@ export declare const useStyles: () => {
         justifyContent: "center";
     };
     badgeInfo: {
-        color: string;
-        backgroundColor: string;
+        color: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     badgeSuccess: {
-        color: string;
-        backgroundColor: string;
+        color: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     badgeError: {
-        color: string;
-        backgroundColor: string;
+        color: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     badgeWarning: {
-        color: string;
-        backgroundColor: string;
+        color: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     badgeNew: {
-        color: string;
-        backgroundColor: string;
+        color: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     badgeDefault: {
-        color: string;
-        backgroundColor: string;
+        color: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     badgeSm: {
         height: number;

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;AAQjF,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,sBAmElD,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;AAQjF,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,sBAoElD,CAAC"}

package/dist/ui/BottomSheet/BottomSheet.js

@@ -13,6 +13,7 @@ export const BottomSheet = (props) => {
     const [position, setPosition] = React.useState(0);
     const styles = useStyles();
     const { bottom } = useSafeAreaInsets();
+    const styleDuContenu = [styles.content, !fitContent && styles.contentFull, { paddingBottom: bottom }];
     const snapPointsMode = fitContent ? 'fit' : 'percent';
-    return (_jsx(Box, { tag: "sheet", style: styles.container, children: _jsxs(TamaguiSheet, { modal: true, open: open, onOpenChange: setOpen, snapPoints: fitContent ? undefined : points, snapPointsMode: snapPointsMode, dismissOnSnapToBottom: true, position: position, onPositionChange: setPosition, zIndex: 100000, ...animer('medium'), moveOnKeyboardChange: moveOnKeyboardChange, children: [_jsx(TamaguiSheet.Overlay, { style: styles.overlay }), _jsxs(TamaguiSheet.Container, { role: "dialog", "aria-modal": true, "aria-label": title, style: styles.sheetContainer, children: [_jsx(TamaguiSheet.Background, { style: styles.sheetBackground }), _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 })] })] }) }));
+    return (_jsx(Box, { tag: "sheet", style: styles.container, children: _jsxs(TamaguiSheet, { modal: true, open: open, onOpenChange: setOpen, snapPoints: fitContent ? undefined : points, snapPointsMode: snapPointsMode, dismissOnSnapToBottom: true, position: position, onPositionChange: setPosition, zIndex: 100000, ...animer('medium'), moveOnKeyboardChange: moveOnKeyboardChange, children: [_jsx(TamaguiSheet.Overlay, { style: styles.overlay }), _jsxs(TamaguiSheet.Container, { role: "dialog", "aria-modal": true, "aria-label": title, style: styles.sheetContainer, children: [_jsx(TamaguiSheet.Background, { style: styles.sheetBackground }), _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: styleDuContenu, children: children })] })] }) }));
 };

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

@@ -33,10 +33,10 @@ declare const _default: {
             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

@@ -27,10 +27,10 @@ export declare const useStyles: () => {
         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/Breadcrumbs/Breadcrumbs.stories.d.ts

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

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

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%";