@alveole/components 2.0.0-alpha.1 → 2.0.0-alpha.11

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

@@ -1,39 +1,12 @@
 export declare const useStyles: () => {
     container: {
-        position: "sticky";
-        top: number;
-        zIndex: number;
-        width: "100%";
-        backgroundColor: string;
-    } | {
-        position: "sticky";
-        top: number;
-        zIndex: number;
-        width: "100%";
-        shadowColor: string;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
-        elevation: number;
-        backgroundColor: string;
-    } | {
-        position: "sticky";
-        top: number;
-        zIndex: number;
-        width: "100%";
-        boxShadow: string;
         backgroundColor: string;
-    } | {
-        position: "sticky";
+        borderBottomWidth: number;
+        borderBottomColor: string;
+        position: "relative" | "sticky";
         top: number;
         zIndex: number;
         width: "100%";
-        borderBottomWidth: number;
-        borderBottomColor: string;
-        backgroundColor: string;
     };
     inner: {
         display: "flex";

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

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

package/dist/ui/Header/Header.styles.js

@@ -1,14 +1,14 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ color, text, spacing, spacingValue, radius, isVariant, shadows }) => ({
+import { Platform } from 'react-native';
+export const useStyles = makeStyles(({ color, text, spacing, spacingValue, radius, isVariant }) => ({
     container: {
         // Barre blanche, séparée du contenu par la seule hairline : c'est ce que font Primer
         // et Atlassian. Un fond gris sur une page blanche ajoute un second séparateur au
         // filet, et écrase tout ce qu'on pose dessus.
         backgroundColor: color.light.background['default-grey'],
-        ...(isVariant('mobile')
-            ? shadows('raised')
-            : { borderBottomWidth: 1, borderBottomColor: color.light.border['default-grey'] }),
-        position: 'sticky',
+        borderBottomWidth: 1,
+        borderBottomColor: color.light.border['default-grey'],
+        position: Platform.OS === 'web' ? 'sticky' : 'relative',
         top: 0,
         zIndex: 100,
         width: '100%',

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

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/ui/Link/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAqC,MAAM,cAAc,CAAC;AAKzE,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,QAAQ,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/E,eAAO,MAAM,IAAI,GAAI,4BAA4B,SAAS,gCAkCzD,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/ui/Link/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAqC,MAAM,cAAc,CAAC;AAMzE,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,QAAQ,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/E,eAAO,MAAM,IAAI,GAAI,4BAA4B,SAAS,gCAkCzD,CAAC"}

package/dist/ui/Link/Link.js

@@ -2,6 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { linkProps } from '@alveole/theme';
 import { Link as ExpoLink } from 'expo-router';
 import { ouvertureDuLien, useCanAccessHref } from '../../core/A';
+import { soulignementDuLien } from '../../core/styleTamagui/soulignement';
 import { Typography } from '../../core/Typography';
 import { LucideIcon } from '../LucideIcon';
 import { useStyles } from './Link.styles';
@@ -11,7 +12,7 @@ export const Link = ({ href, target, children }) => {
     const { navigateurIntegre, nouvelOnglet, propsDuPressable, annonce } = ouvertureDuLien(href, target);
     if (!canAccess(href))
         return _jsx(_Fragment, { children: children });
-    const lien = (_jsxs(Typography, { tag: "a", accessibilityRole: "link", style: styles.link, hoverStyle: styles.linkHover, ...propsDuPressable, ...linkProps(), children: [children, nouvelOnglet && (_jsxs(_Fragment, { children: [' ', _jsx(LucideIcon, { name: "ExternalLink", size: "xs", color: styles.link.color, style: styles.icone })] })), annonce] }));
+    const lien = (_jsxs(Typography, { tag: "a", accessibilityRole: "link", style: styles.link, textDecorationLine: soulignementDuLien, ...propsDuPressable, ...linkProps(), children: [children, nouvelOnglet && (_jsxs(_Fragment, { children: [' ', _jsx(LucideIcon, { name: "ExternalLink", size: "xs", color: styles.link.color, style: styles.icone })] })), annonce] }));
     if (navigateurIntegre)
         return lien;
     return (_jsx(ExpoLink, { href: href, asChild: true, children: lien }));

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

@@ -8,10 +8,6 @@ declare const _default: {
     styleFn: () => {
         link: {
             color: string;
-            textDecoration: string;
-        };
-        linkHover: {
-            textDecoration: string;
         };
         icone: {
             verticalAlign: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Link/Link.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAKA,wBAckB;AAElB,eAAO,MAAM,OAAO,mCAA+D,CAAC;AAEpF,eAAO,MAAM,aAAa,mCAIzB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAIvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Link/Link.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAKA,wBAckB;AAElB,eAAO,MAAM,OAAO,mCAA+D,CAAC;AAEpF,eAAO,MAAM,aAAa,mCAIzB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAIvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

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

@@ -1,10 +1,6 @@
 export declare const useStyles: () => {
     link: {
         color: string;
-        textDecoration: string;
-    };
-    linkHover: {
-        textDecoration: string;
     };
     icone: {
         verticalAlign: string;

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

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

package/dist/ui/Link/Link.styles.js

@@ -2,10 +2,6 @@ import { makeStyles } from '@alveole/theme';
 export const useStyles = makeStyles(({ color }) => ({
     link: {
         color: color.light.text['action-high-info'],
-        textDecoration: 'underline',
-    },
-    linkHover: {
-        textDecoration: 'none',
     },
     icone: {
         verticalAlign: 'middle',

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,cAAc,kBAAkB,CAAC;AAEjC,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,sBAiE5C,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,cAAc,kBAAkB,CAAC;AAIjC,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,sBAkE5C,CAAC"}

package/dist/ui/ListItem/ListItem.js

@@ -15,5 +15,6 @@ export const ListItem = (props) => {
         onPress?.(event);
     }, [RadioProps, onPress]);
     const styles = useStyles();
-    return (_jsxs(Box, { style: styles.container, children: [_jsxs(Box, { tag: "resource-item", style: [styles.item, style], hoverStyle: onPress || RadioProps ? styles.itemHover : {}, onPress: handlePress, ...itemProps, children: [_jsx(ListItemVisuel, { title: title, preview_url: preview_url, RadioProps: RadioProps, IconProps: IconProps, AvatarProps: AvatarProps }), _jsxs(Box, { style: styles.detail, children: [showSeparateur && _jsx(Box, { style: styles.separateur }), _jsxs(Box, { style: styles.principal, children: [_jsx(Typography, { style: styles.title, children: title }), description && _jsx(Typography, { style: styles.description, children: description })] }), trailing && trailing()] }), loading && (_jsx(Box, { style: styles.loading, children: _jsx(Spinner, { size: "sm" }) }))] }), children] }));
+    const cliquable = onPress != null || RadioProps != null;
+    return (_jsxs(Box, { style: styles.container, children: [_jsxs(Box, { tag: "resource-item", style: [styles.item, cliquable && styles.itemPressable, style], backgroundColor: cliquable ? { hover: styles.itemHover.backgroundColor } : undefined, onPress: handlePress, ...itemProps, children: [_jsx(ListItemVisuel, { title: title, preview_url: preview_url, RadioProps: RadioProps, IconProps: IconProps, AvatarProps: AvatarProps }), _jsxs(Box, { style: styles.detail, children: [showSeparateur && _jsx(Box, { style: styles.separateur }), _jsxs(Box, { style: styles.principal, children: [_jsx(Typography, { style: styles.title, children: title }), description && _jsx(Typography, { style: styles.description, children: description })] }), trailing && trailing()] }), loading && (_jsx(Box, { style: styles.loading, children: _jsx(Spinner, { size: "sm" }) }))] }), children] }));
 };

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

@@ -75,11 +75,13 @@ declare const _default: {
             gap: string | number;
             alignSelf: "stretch";
         };
-        itemHover: {
-            backgroundColor: string;
+        itemPressable: {
             borderRadius: import("@alveole/theme").Radius;
             cursor: "pointer";
         };
+        itemHover: {
+            backgroundColor: string;
+        };
         loading: {
             display: "flex";
             alignItems: "center";

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAWkB;AAElB,eAAO,MAAM,OAAO,mCAQnB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAgBxB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,mCASvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,QAAQ,mCASpB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAYtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,SAAS,mCAcrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAe7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAe7B,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,YAAY,mCAA6D,CAAC;AAEvF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"ListItem.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAWkB;AAElB,eAAO,MAAM,OAAO,mCAQnB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAgBxB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,mCASvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,QAAQ,mCASpB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAYtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,SAAS,mCAcrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAe7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAe7B,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,YAAY,mCAA6D,CAAC;AAEvF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}

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

@@ -67,11 +67,13 @@ export declare const useStyles: () => {
         gap: string | number;
         alignSelf: "stretch";
     };
-    itemHover: {
-        backgroundColor: string;
+    itemPressable: {
         borderRadius: import("@alveole/theme").Radius;
         cursor: "pointer";
     };
+    itemHover: {
+        backgroundColor: string;
+    };
     loading: {
         display: "flex";
         alignItems: "center";

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.styles.ts"],"names":[],"mappings":"AA6GA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAiF,CAAC"}
+{"version":3,"file":"ListItem.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.styles.ts"],"names":[],"mappings":"AAiHA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAiF,CAAC"}

package/dist/ui/ListItem/ListItem.styles.js

@@ -15,11 +15,15 @@ const ligne = ({ color, radius, spacing }) => ({
         gap: spacing('3V'),
         alignSelf: 'stretch',
     },
-    itemHover: {
-        backgroundColor: color.alpha(color.light.background['alt-grey'], 0.75),
+    // Rayon et curseur au repos : sans fond, le rayon ne se voit qu'au survol, que porte la
+    // seule prop `backgroundColor` (clause de Tamagui v3).
+    itemPressable: {
         borderRadius: radius('md'),
         cursor: 'pointer',
     },
+    itemHover: {
+        backgroundColor: color.alpha(color.light.background['alt-grey'], 0.75),
+    },
     loading: {
         display: 'flex',
         alignItems: 'center',