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

package/dist/ui/FormControl/textInputStyles.d.ts

@@ -25,7 +25,44 @@ export declare const inputFrameStyle: (styles: Styles, state: InputFrameState) =
     paddingTop?: number | undefined;
     paddingLeft?: number | undefined;
     paddingRight?: number | undefined;
+    borderWidth: number;
     borderColor: string;
+    outlineWidth?: number | undefined;
+    outlineStyle?: "solid" | undefined;
+    outlineColor?: string | undefined;
+    outlineOffset?: number | undefined;
+    alignItems?: "center" | undefined;
+    display: "flex";
+    flexDirection: "row";
+    gap: string | number;
+    padding: number;
+    borderRadius: import("@alveole/theme").Radius;
+    backgroundColor: "#FFFFFF";
+    overflow: "hidden";
+    width: "100%";
+    minHeight: number;
+} | {
+    paddingTop?: number | undefined;
+    paddingLeft?: number | undefined;
+    paddingRight?: number | undefined;
+    borderColor: import("@alveole/theme").ThemeColor;
+    alignItems?: "center" | undefined;
+    display: "flex";
+    flexDirection: "row";
+    gap: string | number;
+    padding: number;
+    borderRadius: import("@alveole/theme").Radius;
+    borderWidth: number;
+    backgroundColor: "#FFFFFF";
+    overflow: "hidden";
+    width: "100%";
+    minHeight: number;
+} | {
+    paddingTop?: number | undefined;
+    paddingLeft?: number | undefined;
+    paddingRight?: number | undefined;
+    borderColor: import("@alveole/theme").ThemeColor;
+    alignItems?: "center" | undefined;
     display: "flex";
     flexDirection: "row";
     gap: string | number;
@@ -36,6 +73,22 @@ export declare const inputFrameStyle: (styles: Styles, state: InputFrameState) =
     overflow: "hidden";
     width: "100%";
     minHeight: number;
+} | {
+    paddingTop?: number | undefined;
+    paddingLeft?: number | undefined;
+    paddingRight?: number | undefined;
+    backgroundColor: import("@alveole/theme").ThemeColor | "#FFFFFF";
+    borderColor: import("@alveole/theme").ThemeColor;
+    alignItems?: "center" | undefined;
+    display: "flex";
+    flexDirection: "row";
+    gap: string | number;
+    padding: number;
+    borderRadius: import("@alveole/theme").Radius;
+    borderWidth: number;
+    overflow: "hidden";
+    width: "100%";
+    minHeight: number;
 };
 /** Centrer le texte n'a de sens qu'encadre des deux cotes, sinon il fuit vers l'ornement. */
 export declare const inputTextStyle: (styles: Styles, { startAdornment, endAdornment }: Pick<InputFrameState, "startAdornment" | "endAdornment">) => StyleProp<TextStyle>;

package/dist/ui/FormControl/textInputStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textInputStyles.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/textInputStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,gBAAgB,EAAoB,MAAM,oBAAoB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAE3C,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAE/C,KAAK,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe,GAAI,QAAQ,MAAM,EAAE,OAAO,eAAe;;;;;;;;;;;;;;;CAMpE,CAAC;AAEH,6FAA6F;AAC7F,eAAO,MAAM,cAAc,GACzB,QAAQ,MAAM,EACd,kCAAkC,IAAI,CAAC,eAAe,EAAE,gBAAgB,GAAG,cAAc,CAAC,yBAKxF,CAAC"}
+{"version":3,"file":"textInputStyles.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/textInputStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,gBAAgB,EAAoB,MAAM,oBAAoB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAE3C,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAE/C,KAAK,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe,GAAI,QAAQ,MAAM,EAAE,OAAO,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOpE,CAAC;AAEH,6FAA6F;AAC7F,eAAO,MAAM,cAAc,GACzB,QAAQ,MAAM,EACd,kCAAkC,IAAI,CAAC,eAAe,EAAE,gBAAgB,GAAG,cAAc,CAAC,yBAKxF,CAAC"}

package/dist/ui/FormControl/textInputStyles.js

@@ -14,6 +14,7 @@ import { fieldBorderState } from './fieldBorderState';
  */
 export const inputFrameStyle = (styles, state) => ({
     ...styles.inputInner,
+    ...(!state.multiline ? { alignItems: 'center' } : {}),
     ...fieldBorderState(styles, state),
     ...(state.endAdornment ? { paddingRight: 0 } : {}),
     ...(state.startAdornment ? { paddingLeft: 0 } : {}),

package/dist/ui/FormControl/useChoixDeFichier.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useChoixDeFichier.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/useChoixDeFichier.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAGL,eAAe,EAKhB,MAAM,mBAAmB,CAAC;AAmC3B,KAAK,OAAO,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG;IAChG,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,eAAe,CAAC;CACzB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,SAAS,OAAO,wBAuDjD,CAAC"}
+{"version":3,"file":"useChoixDeFichier.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/useChoixDeFichier.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAGL,eAAe,EAKhB,MAAM,mBAAmB,CAAC;AAmD3B,KAAK,OAAO,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG;IAChG,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,eAAe,CAAC;CACzB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,SAAS,OAAO,wBA6DjD,CAAC"}

package/dist/ui/FormControl/useChoixDeFichier.js

@@ -2,10 +2,17 @@ import { useTheme } from '@alveole/theme';
 import * as DocumentPicker from 'expo-document-picker';
 import * as ImagePicker from 'expo-image-picker';
 import React from 'react';
-import { Platform } from 'react-native';
+import { ActionSheetIOS, Platform } from 'react-native';
 import { Alert } from '../../core/Alert';
 import { ajoute, imagesSeulement, libelleDeLaSource, sourcesProposees, } from './fichiersDuChamp';
 import { valideLeType } from './valideLeType';
+const showActionSheetIOS = ({ sources, lancer, titre, labels, type, grandEcran }) => {
+    const options = [...sources.map(s => libelleDeLaSource(s, labels, { type, grandEcran })), labels.cancel];
+    ActionSheetIOS.showActionSheetWithOptions({ title: titre, options, cancelButtonIndex: options.length - 1 }, index => {
+        if (index < sources.length)
+            lancer(sources[index]);
+    });
+};
 const enFichier = (asset) => ({
     uri: asset.uri,
     name: asset.fileName ?? 'image.jpg',
@@ -56,16 +63,21 @@ export const useChoixDeFichier = (options) => {
     const ouvrirLaFeuille = React.useCallback(() => {
         const lancer = (source) => (source === 'document' ? choisirUnDocument() : choisirUneImage(source));
         const images = imagesSeulement(type);
+        const sources = sourcesProposees(type, grandEcran);
+        const titre = images ? labels.chooseImageTitle : labels.chooseDocumentTitle;
+        if (Platform.OS === 'ios')
+            return showActionSheetIOS({ sources, lancer, titre, labels, type, grandEcran });
         Alert.alert({
-            title: images ? labels.chooseImageTitle : labels.chooseDocumentTitle,
+            title: titre,
             message: images ? labels.chooseImageMessage : undefined,
             buttons: [
-                ...sourcesProposees(type, grandEcran).map(source => ({
+                ...sources.map(source => ({
                     text: libelleDeLaSource(source, labels, { type, grandEcran }),
                     onPress: () => lancer(source),
                 })),
                 { text: labels.cancel, style: 'cancel' },
             ],
+            options: { cancelable: true },
         });
     }, [type, labels, grandEcran, choisirUnDocument, choisirUneImage]);
     return React.useCallback(async () => {

package/dist/ui/FormControl/useTextInputModal.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { FocusEvent, TextInput as ReactNativeTextInput } from 'react-native';
+import { FocusEvent } from 'react-native';
+import { TextInputElement } from './TextInput.types';
 type Options = {
     disabled?: boolean | null;
     readOnly?: boolean | null;
@@ -14,8 +15,8 @@ type Options = {
  */
 export declare const useTextInputModal: ({ disabled, readOnly, onFocus, onModalSubmit }: Options) => {
     isOpen: boolean;
-    inputRef: React.RefObject<ReactNativeTextInput | null>;
-    modalInputRef: React.RefObject<ReactNativeTextInput | null>;
+    inputRef: React.RefObject<TextInputElement | null>;
+    modalInputRef: React.RefObject<TextInputElement | null>;
     open: () => void;
     close: () => void;
     submit: () => void;

package/dist/ui/FormControl/useTextInputModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTextInputModal.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/useTextInputModal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAY,SAAS,IAAI,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEvF,KAAK,OAAO,GAAG;IACb,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAAI,gDAAgD,OAAO;;;;;;;;;0BA6C1D,UAAU;CASxC,CAAC"}
+{"version":3,"file":"useTextInputModal.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/useTextInputModal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAY,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,KAAK,OAAO,GAAG;IACb,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAAI,gDAAgD,OAAO;;;;;;;;;0BA6C1D,UAAU;CASxC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/ui/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,WAAW,GAAG;IACxB,mCAAmC;IACnC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,qGAAqG;IACrG,QAAQ,CAAC,EAAE,CAAC,IAAI,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,kCAAwC,WAAW,sBAwBzE,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/ui/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,WAAW,GAAG;IACxB,mCAAmC;IACnC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,qGAAqG;IACrG,QAAQ,CAAC,EAAE,CAAC,IAAI,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,kCAAwC,WAAW,sBA4BzE,CAAC"}

package/dist/ui/Header/Header.js

@@ -6,5 +6,5 @@ import { useStyles } from './Header.styles';
 export const Header = ({ logo, title, right, homeHref = '/' }) => {
     const styles = useStyles();
     const identity = (_jsxs(Box, { style: styles.identity, children: [logo, _jsx(Typography, { style: styles.titleText, children: title })] }));
-    return (_jsx(Box, { tag: "header", style: styles.container, children: _jsxs(Box, { style: styles.inner, children: [homeHref != null ? (_jsx(A, { href: homeHref, style: styles.identityLink, hoverStyle: styles.identityLinkHover, children: identity })) : (identity), right != null && _jsx(Box, { style: styles.right, children: right })] }) }));
+    return (_jsx(Box, { tag: "header", style: styles.container, children: _jsxs(Box, { style: styles.inner, children: [homeHref != null ? (_jsx(A, { href: homeHref, style: styles.identityLink, backgroundColor: { hover: styles.identityLinkHover.backgroundColor }, children: identity })) : (identity), right != null && _jsx(Box, { style: styles.right, children: right })] }) }));
 };

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

@@ -8,40 +8,13 @@ declare const _default: {
     component: ({ logo, title, right, homeHref }: import("./Header").HeaderProps) => import("react").JSX.Element;
     styleFn: () => {
         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";
+            backgroundColor: import("@alveole/theme").ThemeColor;
+            borderBottomWidth: number;
+            borderBottomColor: import("@alveole/theme").ThemeColor;
+            position: "relative" | "sticky";
             top: number;
             zIndex: number;
             width: "100%";
-            borderBottomWidth: number;
-            borderBottomColor: string;
-            backgroundColor: string;
         };
         inner: {
             display: "flex";
@@ -67,10 +40,10 @@ declare const _default: {
             borderRadius: import("@alveole/theme").Radius;
         };
         identityLinkHover: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         titleText: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             display: "flex" | "none";
             fontSize: 16;
             lineHeight: 24;

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

@@ -1 +1 @@
-{"version":3,"file":"Header.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Header/Header.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,wBAUkB;AAqBlB,eAAO,MAAM,OAAO,mCAYnB,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAAmE,CAAC;AAElG,eAAO,MAAM,YAAY,mCAExB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"Header.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Header/Header.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,wBAUkB;AAqBlB,eAAO,MAAM,OAAO,mCAYnB,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAAmE,CAAC;AAElG,eAAO,MAAM,YAAY,mCAExB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,0BAA0B,CAAC"}

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";
+        backgroundColor: import("@alveole/theme").ThemeColor;
+        borderBottomWidth: number;
+        borderBottomColor: import("@alveole/theme").ThemeColor;
+        position: "relative" | "sticky";
         top: number;
         zIndex: number;
         width: "100%";
-        borderBottomWidth: number;
-        borderBottomColor: string;
-        backgroundColor: string;
     };
     inner: {
         display: "flex";
@@ -59,10 +32,10 @@ export declare const useStyles: () => {
         borderRadius: import("@alveole/theme").Radius;
     };
     identityLinkHover: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     titleText: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         display: "flex" | "none";
         fontSize: 16;
         lineHeight: 24;

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/InputButtonAdornment/InputButtonAdornment.stories.d.ts

@@ -8,10 +8,10 @@ declare const _default: {
         textInput: {};
         controlStart: {
             borderRightWidth: number;
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         controlEnd: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             borderLeftWidth: number;
         };
     };

package/dist/ui/InputButtonAdornment/InputButtonAdornment.stories.js

@@ -11,6 +11,6 @@ export default {
     component: InputButtonAdornment,
     styleFn: useStyles,
 };
-export const End = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControl, { children: _jsx(InputButtonAdornment, { icon: "Eye", position: "end", accessibilityLabel: "Afficher", onPress: () => { } }) }), _jsx(FormControl, { children: _jsx(InputButtonAdornment, { icon: "X", position: "end", accessibilityLabel: "Effacer", onPress: () => { } }) })] }));
+export const End = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "3W", children: [_jsx(FormControl, { children: _jsx(InputButtonAdornment, { icon: "Eye", position: "end", accessibilityLabel: "Afficher", onPress: () => { } }) }), _jsx(FormControl, { children: _jsx(InputButtonAdornment, { icon: "X", position: "end", accessibilityLabel: "Effacer", onPress: () => { } }) })] }));
 export const Start = () => (_jsx(FormControl, { children: _jsx(InputButtonAdornment, { icon: "Plus", position: "start", accessibilityLabel: "Ajouter", onPress: () => { } }) }));
 export * as Sources from './InputButtonAdornment.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"InputButtonAdornment.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/InputButtonAdornment/InputButtonAdornment.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,GAAG,cAA4Z,CAAC;AAE7a,eAAO,MAAM,KAAK,cAA+L,CAAC;AAElN,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"InputButtonAdornment.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/InputButtonAdornment/InputButtonAdornment.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,GAAG,cAA8Z,CAAC;AAE/a,eAAO,MAAM,KAAK,cAA+L,CAAC;AAElN,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,6 +1,6 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/InputButtonAdornment/InputButtonAdornment.stories.tsx
-export const End = () => "export const End = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <FormControl>\n      <InputButtonAdornment icon=\"Eye\" position=\"end\" accessibilityLabel=\"Afficher\" onPress={() => {}} />\n    </FormControl>\n    <FormControl>\n      <InputButtonAdornment icon=\"X\" position=\"end\" accessibilityLabel=\"Effacer\" onPress={() => {}} />\n    </FormControl>\n  </Box>\n);";
+export const End = () => "export const End = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n    <FormControl>\n      <InputButtonAdornment icon=\"Eye\" position=\"end\" accessibilityLabel=\"Afficher\" onPress={() => {}} />\n    </FormControl>\n    <FormControl>\n      <InputButtonAdornment icon=\"X\" position=\"end\" accessibilityLabel=\"Effacer\" onPress={() => {}} />\n    </FormControl>\n  </Box>\n);";
 export const Start = () => "export const Start = () => (\n  <FormControl>\n    <InputButtonAdornment icon=\"Plus\" position=\"start\" accessibilityLabel=\"Ajouter\" onPress={() => {}} />\n  </FormControl>\n);";
 export const storySources = {
     End,

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

@@ -2,10 +2,10 @@ export declare const useStyles: () => {
     textInput: {};
     controlStart: {
         borderRightWidth: number;
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     controlEnd: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         borderLeftWidth: number;
     };
 };

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

@@ -7,11 +7,7 @@ declare const _default: {
     component: ({ href, target, children }: import("./Link").LinkProps) => import("react").JSX.Element;
     styleFn: () => {
         link: {
-            color: string;
-            textDecoration: string;
-        };
-        linkHover: {
-            textDecoration: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         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;
+        color: import("@alveole/theme").ThemeColor;
     };
     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

@@ -8,7 +8,7 @@ declare const _default: {
     component: (props: import("./ListItem.types").ListItemProps) => import("react").JSX.Element;
     styleFn: () => {
         defaultIcon: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         previewContainer: {
             display: "flex";
@@ -31,6 +31,7 @@ declare const _default: {
             alignSelf: "stretch";
             gap: string | number;
             position: "relative";
+            minHeight: number;
         };
         separateur: {
             left: number;
@@ -38,7 +39,7 @@ declare const _default: {
             position: "absolute";
             width: "100%";
             height: number;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         principal: {
             display: "flex";
@@ -53,7 +54,7 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         description: {
             fontSize: 12;
@@ -61,7 +62,7 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         container: {
             width: "100%";
@@ -75,16 +76,18 @@ declare const _default: {
             gap: string | number;
             alignSelf: "stretch";
         };
-        itemHover: {
-            backgroundColor: string;
+        itemPressable: {
             borderRadius: import("@alveole/theme").Radius;
             cursor: "pointer";
         };
+        itemHover: {
+            backgroundColor: import("@alveole/theme").ThemeColor;
+        };
         loading: {
             display: "flex";
             alignItems: "center";
             justifyContent: "center";
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
     };
 };

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

@@ -1,6 +1,6 @@
 export declare const useStyles: () => {
     defaultIcon: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     previewContainer: {
         display: "flex";
@@ -23,6 +23,7 @@ export declare const useStyles: () => {
         alignSelf: "stretch";
         gap: string | number;
         position: "relative";
+        minHeight: number;
     };
     separateur: {
         left: number;
@@ -30,7 +31,7 @@ export declare const useStyles: () => {
         position: "absolute";
         width: "100%";
         height: number;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     principal: {
         display: "flex";
@@ -45,7 +46,7 @@ export declare const useStyles: () => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     description: {
         fontSize: 12;
@@ -53,7 +54,7 @@ export declare const useStyles: () => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     container: {
         width: "100%";
@@ -67,16 +68,18 @@ export declare const useStyles: () => {
         gap: string | number;
         alignSelf: "stretch";
     };
-    itemHover: {
-        backgroundColor: string;
+    itemPressable: {
         borderRadius: import("@alveole/theme").Radius;
         cursor: "pointer";
     };
+    itemHover: {
+        backgroundColor: import("@alveole/theme").ThemeColor;
+    };
     loading: {
         display: "flex";
         alignItems: "center";
         justifyContent: "center";
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
 };
 //# sourceMappingURL=ListItem.styles.d.ts.map

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":"AAmHA,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',
@@ -39,6 +43,8 @@ const detail = ({ color, text, spacing }) => ({
         alignSelf: 'stretch',
         gap: spacing('1W'),
         position: 'relative',
+        // Hauteur fixee par la maquette, avec ou sans description.
+        minHeight: 52,
     },
     // Pose en absolu sur le bord haut du detail, et non entre deux lignes : c'est ce qui lui
     // evite de compter dans la hauteur de la ligne.