@alveole/components 1.10.0 → 2.0.0-alpha.1

package/dist/ui/Sidebar/SidebarItem.js

@@ -2,42 +2,50 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTheme } from '@alveole/theme';
 import { usePathname } from 'expo-router';
 import React from 'react';
-import { A, Box, Typography } from '../../core';
-import { LucideIcon } from '../LucideIcon';
+import { Pressable } from 'react-native';
+import { A } from '../../core/A';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { LeadingSlot } from '../Leading';
 import { useStyles } from './Sidebar.styles';
-const SidebarItemDesktop = (props) => {
-    const { title, icon } = props;
+// Un item mène quelque part ou déclenche quelque chose : dans un cas c'est un lien, dans
+// l'autre un bouton. Ce choix ne dépend pas de la mise en page, et les variantes desktop et
+// mobile le refaisaient chacune de leur côté, avec le même code.
+const SidebarItemEnveloppe = ({ item, isCurrentPage, children, }) => item.pressable ? (_jsx(Pressable, { accessibilityRole: "button", onPress: item.onPress, children: children })) : (_jsx(A, { href: item.href, direction: item.direction, ariaCurrent: isCurrentPage ? 'page' : undefined, children: children }));
+const useEstPageCourante = (item) => {
     const pathname = usePathname();
+    return !item.pressable && pathname === item.href;
+};
+const IndicateurPageCourante = () => {
+    const styles = useStyles();
+    return (_jsx(Box, { tag: "sidebar-item-indicator", style: styles.sidebarItemSelectedIndicator, children: _jsx(Box, { style: styles.sidebarItemSelectedIndicatorContent }) }));
+};
+const SidebarItemDesktop = (props) => {
+    const { title, leading } = props;
     const styles = useStyles();
-    const isCurrentPage = !props.pressable && pathname === props.href;
+    const isCurrentPage = useEstPageCourante(props);
     const itemStyleSelected = isCurrentPage ? styles.sidebarItemSelectedDesktop : {};
     const titleStyleSelected = isCurrentPage ? styles.sidebarItemTitleSelectedDesktop : {};
-    const sidebarItemHover = isCurrentPage ? styles.sidebarItemCurrentHover : styles.sidebarItemHover;
     const sidebarItemTitleDesktop = isCurrentPage ? styles.sidebarItemTitleCurrentHoverDesktop : {};
-    const renderItem = (content) => {
-        if (props.pressable)
-            return _jsx(Box, { onPress: props.onPress, children: content });
-        else
-            return (_jsx(A, { href: props.href, direction: props.direction, children: content }));
-    };
-    return renderItem(_jsxs(Box, { style: styles.sidebarItemContainerDesktop, children: [isCurrentPage && (_jsx(Box, { tag: "sidebar-item-indicator", style: styles.sidebarItemSelectedIndicator, children: _jsx(Box, { style: styles.sidebarItemSelectedIndicatorContent }) })), _jsxs(Box, { tag: "sidebar-item", style: { ...styles.sidebarItemDesktop, ...itemStyleSelected }, hoverStyle: { ...sidebarItemHover }, children: [icon && _jsx(LucideIcon, { size: "md", name: icon }), _jsx(Typography, { style: { ...styles.sidebarItemTitleDesktop, ...titleStyleSelected }, hoverStyle: { ...sidebarItemTitleDesktop }, children: title })] })] }));
+    return (_jsx(SidebarItemEnveloppe, { item: props, isCurrentPage: isCurrentPage, children: _jsxs(Box, { style: styles.sidebarItemContainerDesktop, children: [isCurrentPage && _jsx(IndicateurPageCourante, {}), _jsxs(Box, { tag: "sidebar-item", style: { ...styles.sidebarItemDesktop, ...itemStyleSelected }, 
+                    // La ligne courante se survole comme ses voisines : elle est un lien au même titre, et
+                    // lui réserver une teinte propre n'ajoutait qu'un cas particulier. Son fond de repos
+                    // étant plus sombre, le survol commun l'éclaircit - la direction que prend Primer.
+                    hoverStyle: { ...styles.sidebarItemHover }, children: [_jsx(LeadingSlot, { contenu: leading, apparence: { size: 'sm' } }), _jsx(Typography, { style: { ...styles.sidebarItemTitleDesktop, ...titleStyleSelected }, hoverStyle: { ...sidebarItemTitleDesktop }, children: title })] })] }) }));
 };
 const SidebarItemMobile = (props) => {
-    const { title, icon } = props;
-    const pathname = usePathname();
+    const { title, leading } = props;
     const styles = useStyles();
-    const isCurrentPage = !props.pressable && pathname === props.href;
+    const isCurrentPage = useEstPageCourante(props);
     const itemStyleSelected = isCurrentPage ? styles.sidebarItemSelectedMobile : {};
     const titleStyleSelected = isCurrentPage ? styles.sidebarItemTitleSelectedMobile : {};
-    const sidebarItemHover = isCurrentPage ? styles.sidebarItemCurrentHover : styles.sidebarItemHover;
     const sidebarItemTitleMobile = isCurrentPage ? styles.sidebarItemTitleCurrentHoverMobile : {};
-    const renderItem = (content) => {
-        if (props.pressable)
-            return _jsx(Box, { onPress: props.onPress, children: content });
-        else
-            return (_jsx(A, { href: props.href, direction: props.direction, children: content }));
-    };
-    return renderItem(_jsxs(Box, { children: [isCurrentPage && (_jsx(Box, { tag: "sidebar-item-indicator", style: styles.sidebarItemSelectedIndicator, children: _jsx(Box, { style: styles.sidebarItemSelectedIndicatorContent }) })), _jsxs(Box, { tag: "sidebar-item", style: { ...styles.sidebarItemMobile, ...itemStyleSelected }, hoverStyle: { ...sidebarItemHover }, children: [icon && (_jsx(LucideIcon, { size: "md", name: icon, color: isCurrentPage ? styles.sidebarItemTitleSelectedMobile.color : styles.sidebarItemTitleSelectedMobile.stroke })), _jsx(Typography, { style: { ...styles.sidebarItemTitleMobile, ...titleStyleSelected }, hoverStyle: { ...sidebarItemTitleMobile }, children: title })] })] }));
+    return (_jsx(SidebarItemEnveloppe, { item: props, isCurrentPage: isCurrentPage, children: _jsxs(Box, { children: [isCurrentPage && _jsx(IndicateurPageCourante, {}), _jsxs(Box, { tag: "sidebar-item", style: { ...styles.sidebarItemMobile, ...itemStyleSelected }, hoverStyle: { ...styles.sidebarItemHover }, children: [_jsx(LeadingSlot, { contenu: leading, apparence: {
+                                size: 'md',
+                                color: isCurrentPage
+                                    ? styles.sidebarItemTitleSelectedMobile.color
+                                    : styles.sidebarItemTitleSelectedMobile.stroke,
+                            } }), _jsx(Typography, { style: { ...styles.sidebarItemTitleMobile, ...titleStyleSelected }, hoverStyle: { ...sidebarItemTitleMobile }, children: title })] })] }) }));
 };
 export const SidebarItem = (props) => {
     const { isVariant } = useTheme();

package/dist/ui/Sidebar/index.d.ts

@@ -1,4 +1,5 @@
 export * from '../Sidebar/Sidebar';
+export * from '../Sidebar/SidebarDivider';
 export * from '../Sidebar/SidebarGroup';
 export * from '../Sidebar/SidebarItem';
 export * from '../Sidebar/useSidebar';

package/dist/ui/Sidebar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC"}

package/dist/ui/Sidebar/index.js

@@ -1,4 +1,5 @@
 export * from '../Sidebar/Sidebar';
+export * from '../Sidebar/SidebarDivider';
 export * from '../Sidebar/SidebarGroup';
 export * from '../Sidebar/SidebarItem';
 export * from '../Sidebar/useSidebar';

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

@@ -1 +1 @@
-{"version":3,"file":"Signature.d.ts","sourceRoot":"","sources":["../../../src/ui/Signature/Signature.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAK/C,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG;IACxD,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,sBA8E9C,CAAC"}
+{"version":3,"file":"Signature.d.ts","sourceRoot":"","sources":["../../../src/ui/Signature/Signature.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI/C,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG;IACxD,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAwDF,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,sBA0C9C,CAAC"}

package/dist/ui/Signature/Signature.js

@@ -1,55 +1,62 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { DateFormats, displayDate, isValidDate } from '@alveole/core';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTheme } from '@alveole/theme';
 import * as React from 'react';
 import SignatureCanvas from 'react-native-signature-canvas';
 import { Box } from '../../core/Box';
-import { Typography } from '../../core/Typography';
-import { Button } from '../Button';
 import { useStyles } from './Signature.styles';
-export const Signature = (props) => {
-    const { height, date = new Date(), dateLabel = 'Le', clearButtonLabel = 'Effacer', onChange, onBegin, onEnd } = props;
-    const { color, spacing, spacingValue } = useTheme();
-    const styles = useStyles();
-    const ref = React.useRef(null);
-    const readTimeoutRef = React.useRef(null);
-    const handleOk = (signature) => {
-        onChange(signature);
-    };
-    const handleEnd = () => {
-        if (readTimeoutRef.current)
-            clearTimeout(readTimeoutRef.current);
-        readTimeoutRef.current = setTimeout(() => {
-            ref.current?.readSignature();
-            readTimeoutRef.current = null;
-        }, 100);
-    };
-    const handleClear = () => {
-        if (readTimeoutRef.current) {
-            clearTimeout(readTimeoutRef.current);
-            readTimeoutRef.current = null;
-        }
-        onChange(null);
-    };
-    React.useEffect(() => {
-        return () => {
-            if (readTimeoutRef.current)
-                clearTimeout(readTimeoutRef.current);
-        };
-    }, []);
-    const dateFormat = isValidDate(date) ? displayDate(date, { format: DateFormats.DateSlash }) : String(date);
-    const webviewHeightWithBorders = height + spacingValue('200') + spacingValue('100') + 3;
-    const webviewStyle = `
+import { SignatureHeader } from './SignatureHeader';
+// Le canevas natif est une WebView : son apparence ne se regle qu'en lui injectant une feuille
+// de style. La construire hors du composant garde cette chaine CSS hors de la fonction de rendu,
+// dont elle occupait le quart sans rien devoir a l'etat.
+const feuilleDeStyleCanvas = ({ height, rayon, couleurBordure, }) => `
     .m-signature-pad {
       box-shadow: none;
-      border-radius: ${spacing('075')}px;
-      border-color: ${color.border['default-grey']};
+      border-radius: ${rayon}px;
+      border-color: ${couleurBordure};
       border-width: 2px;
       height: ${height}px;
     }
-    .m-signature-pad--body {border: none; overflow: hidden; border-radius: ${spacing('075')}px}
+    .m-signature-pad--body {border: none; overflow: hidden; border-radius: ${rayon}px}
     .m-signature-pad--footer {display: none; margin: 0px;}
     .button, .description {display: none;}
   `;
-    return (_jsxs(Box, { height: webviewHeightWithBorders, width: '100%', children: [_jsxs(Box, { style: styles.headerSignature, children: [_jsxs(Typography, { style: styles.date, children: [dateLabel, " ", dateFormat] }), _jsx(Button, { size: "xs", title: clearButtonLabel, variant: "tertiary", onPress: () => ref.current?.clearSignature() })] }), _jsx(Box, { tag: "signature", height: '100%', onTouchEnd: onEnd, maxH: webviewHeightWithBorders, style: styles.container, children: _jsx(SignatureCanvas, { ref: ref, onOK: handleOk, onEnd: handleEnd, onClear: handleClear, penColor: styles.pen.color, backgroundColor: styles.pen.backgroundColor, dotSize: 3.5, minWidth: 3, maxWidth: 4, onBegin: onBegin, androidHardwareAccelerationDisabled: true, webviewProps: { cacheEnabled: false, androidLayerType: 'software' }, webStyle: webviewStyle }) })] }));
+// La WebView ne rend le trace qu'a la demande : chaque fin de geste replanifie une lecture 100 ms
+// plus tard, si bien qu'un trace continu n'en declenche qu'une. Le minuteur doit etre annule a
+// l'effacement comme au demontage, sous peine de lire un canevas disparu. Ce cycle de vie est la
+// seule logique du composant : l'isoler laisse la fonction de rendu au rendu.
+const useLectureDifferee = (ref, onChange) => {
+    const lectureEnAttente = React.useRef(null);
+    const annulerLecture = () => {
+        if (lectureEnAttente.current)
+            clearTimeout(lectureEnAttente.current);
+        lectureEnAttente.current = null;
+    };
+    React.useEffect(() => annulerLecture, []);
+    return {
+        handleOk: (signature) => onChange(signature),
+        handleEnd: () => {
+            annulerLecture();
+            lectureEnAttente.current = setTimeout(() => {
+                ref.current?.readSignature();
+                lectureEnAttente.current = null;
+            }, 100);
+        },
+        handleClear: () => {
+            annulerLecture();
+            onChange(null);
+        },
+    };
+};
+export const Signature = (props) => {
+    const { height, date = new Date(), dateLabel = 'Le', clearButtonLabel = 'Effacer', onChange, onBegin, onEnd } = props;
+    const { color, spacing, spacingValue } = useTheme();
+    const styles = useStyles();
+    const ref = React.useRef(null);
+    const { handleOk, handleEnd, handleClear } = useLectureDifferee(ref, onChange);
+    const webviewHeightWithBorders = height + spacingValue('200') + spacingValue('100') + 3;
+    return (_jsxs(Box, { height: webviewHeightWithBorders, width: '100%', children: [_jsx(SignatureHeader, { date: date, dateLabel: dateLabel, clearButtonLabel: clearButtonLabel, onClear: () => ref.current?.clearSignature() }), _jsx(Box, { tag: "signature", height: '100%', onTouchEnd: onEnd, maxH: webviewHeightWithBorders, style: styles.container, children: _jsx(SignatureCanvas, { ref: ref, onOK: handleOk, onEnd: handleEnd, onClear: handleClear, penColor: styles.pen.color, backgroundColor: styles.pen.backgroundColor, dotSize: 3.5, minWidth: 3, maxWidth: 4, onBegin: onBegin, androidHardwareAccelerationDisabled: true, webviewProps: { cacheEnabled: false, androidLayerType: 'software' }, webStyle: feuilleDeStyleCanvas({
+                        height,
+                        rayon: spacing('3V'),
+                        couleurBordure: color.border['default-grey'],
+                    }) }) })] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Signature.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Signature/Signature.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM/B,wBAQkB;AAElB,eAAO,MAAM,OAAO,yBAgBnB,CAAC;AAEF,eAAO,MAAM,YAAY,yBAgBxB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"Signature.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Signature/Signature.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQ/B,wBAQkB;AAElB,eAAO,MAAM,OAAO,yBAgBnB,CAAC;AAEF,eAAO,MAAM,YAAY,yBAgBxB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,6BAA6B,CAAC"}

package/dist/ui/Signature/Signature.stories.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { Box, Image, Typography } from '../../';
+import { Box } from '../../core/Box';
+import { Image } from '../../core/Image';
+import { Typography } from '../../core/Typography';
 import { Signature } from './Signature';
 import { useStyles } from './Signature.styles';
 export default {

package/dist/ui/Signature/Signature.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Signature.web.d.ts","sourceRoot":"","sources":["../../../src/ui/Signature/Signature.web.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,sBA6E9C,CAAC"}
+{"version":3,"file":"Signature.web.d.ts","sourceRoot":"","sources":["../../../src/ui/Signature/Signature.web.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAqB7C,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,sBA2D9C,CAAC"}

package/dist/ui/Signature/Signature.web.js

@@ -1,28 +1,28 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { DateFormats, displayDate, isValidDate } from '@alveole/core';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ReactSignature from '@uiw/react-signature';
 import * as React from 'react';
 import { Box } from '../../core/Box';
-import { Typography } from '../../core/Typography';
-import { Button } from '../Button';
 import { useStyles } from './Signature.styles';
+import { SignatureHeader } from './SignatureHeader';
+// Conversion pure du trace en data-URL : elle ne depend ni des props ni de l'etat, et la garder
+// dans le corps du composant la faisait redefinir a chaque rendu pour rien.
+const serializeSvgToBase64 = (svg) => new Promise(resolve => {
+    const svgString = new XMLSerializer().serializeToString(svg);
+    const blob = new Blob([svgString], { type: 'image/svg+xml' });
+    const reader = new FileReader();
+    // readAsDataURL produit toujours une chaine : la garde ne fait que le dire au typage, qui
+    // prevoit aussi l'ArrayBuffer de readAsArrayBuffer.
+    reader.onloadend = () => {
+        if (typeof reader.result === 'string')
+            resolve(reader.result);
+    };
+    reader.readAsDataURL(blob);
+});
 export const Signature = (props) => {
     const { height, style, date = new Date(), dateLabel = 'Le', clearButtonLabel = 'Effacer', onChange, ...boxProps } = props;
     const styles = useStyles();
     const signatureRef = React.useRef(null);
     const [signatureInstanceVersion, setSignatureInstanceVersion] = React.useState(0);
-    const serializeSvgToBase64 = (svg) => {
-        return new Promise(resolve => {
-            const svgString = new XMLSerializer().serializeToString(svg);
-            const blob = new Blob([svgString], { type: 'image/svg+xml' });
-            const reader = new FileReader();
-            reader.onloadend = () => {
-                const base64data = reader.result;
-                resolve(base64data);
-            };
-            reader.readAsDataURL(blob);
-        });
-    };
     React.useEffect(() => {
         const svgEl = signatureRef.current?.svg;
         if (!svgEl)
@@ -39,15 +39,18 @@ export const Signature = (props) => {
             svgEl.removeEventListener('pointerup', handlePointerUp);
         };
     }, [signatureInstanceVersion, onChange]);
+    // Rappel de `ref` stable : défini en ligne, il changeait d'identité à chaque rendu, donc
+    // React le détachait et le rattachait, et chaque rattachement relançait un rendu. La
+    // fiche du catalogue ne s'affichait plus du tout (« Maximum update depth exceeded »).
+    const attacherSignature = React.useCallback((instance) => {
+        if (!instance)
+            return;
+        signatureRef.current = instance;
+        setSignatureInstanceVersion(version => version + 1);
+    }, []);
     const handleClear = () => {
         signatureRef.current?.clear();
         onChange(null);
     };
-    const dateFormat = isValidDate(date) ? displayDate(date, { format: DateFormats.DateSlash }) : String(date);
-    return (_jsxs(Box, { tag: "signature", style: [styles.container, style], ...boxProps, children: [_jsxs(Box, { style: styles.headerSignature, children: [_jsxs(Typography, { style: styles.date, children: [dateLabel, " ", dateFormat] }), _jsx(Button, { title: clearButtonLabel, variant: "tertiary", size: "xs", onPress: handleClear })] }), _jsx(Box, { style: { ...styles.signatureWeb, height }, children: _jsx(ReactSignature, { ref: (inst) => {
-                        if (inst) {
-                            signatureRef.current = inst;
-                            setSignatureInstanceVersion(version => version + 1);
-                        }
-                    }, style: styles.signatureWeb, fill: styles.pen.color, options: { size: 12, smoothing: 0.15, thinning: 0.73, streamline: 0.5 } }) })] }));
+    return (_jsxs(Box, { tag: "signature", style: [styles.container, style], ...boxProps, children: [_jsx(SignatureHeader, { date: date, dateLabel: dateLabel, clearButtonLabel: clearButtonLabel, onClear: handleClear }), _jsx(Box, { style: { ...styles.signatureWeb, height }, children: _jsx(ReactSignature, { ref: attacherSignature, style: styles.signatureWeb, fill: styles.pen.color, options: { size: 12, smoothing: 0.15, thinning: 0.73, streamline: 0.5 } }) })] }));
 };

package/dist/ui/Signature/SignatureHeader.d.ts

@@ -0,0 +1,8 @@
+export type SignatureHeaderProps = {
+    date: string | Date;
+    dateLabel: string;
+    clearButtonLabel: string;
+    onClear: () => void;
+};
+export declare const SignatureHeader: ({ date, dateLabel, clearButtonLabel, onClear }: SignatureHeaderProps) => import("react").JSX.Element;
+//# sourceMappingURL=SignatureHeader.d.ts.map

package/dist/ui/Signature/SignatureHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignatureHeader.d.ts","sourceRoot":"","sources":["../../../src/ui/Signature/SignatureHeader.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAKF,eAAO,MAAM,eAAe,GAAI,gDAAgD,oBAAoB,gCAanG,CAAC"}

package/dist/ui/Signature/SignatureHeader.js

@@ -0,0 +1,14 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { DateFormats, displayDate, isValidDate } from '@alveole/core';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { Button } from '../Button';
+import { useStyles } from './Signature.styles';
+// L'entete est identique en natif et sur le web : meme date formatee, meme bouton d'effacement.
+// Ecrite dans les deux implementations, elle laissait le format de date et le libelle diverger
+// d'une plateforme a l'autre sans que rien ne le signale.
+export const SignatureHeader = ({ date, dateLabel, clearButtonLabel, onClear }) => {
+    const styles = useStyles();
+    const dateFormatee = isValidDate(date) ? displayDate(date, { format: DateFormats.DateSlash }) : String(date);
+    return (_jsxs(Box, { style: styles.headerSignature, children: [_jsxs(Typography, { style: styles.date, children: [dateLabel, " ", dateFormatee] }), _jsx(Button, { size: "sm", title: clearButtonLabel, variant: "tertiary", onPress: onClear })] }));
+};

package/dist/ui/Skeleton/Skeleton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { BoxProps } from '../../core/Box';
+export type SkeletonProps = Omit<BoxProps, 'children'>;
+export declare const Skeleton: (props: SkeletonProps) => React.JSX.Element;
+//# sourceMappingURL=Skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/ui/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG/C,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAIvD,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,sBAiC5C,CAAC"}

package/dist/ui/Skeleton/Skeleton.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Animated, Easing } from 'react-native';
+import { Box } from '../../core/Box';
+import { useStyles } from './Skeleton.styles';
+const PULSE_DURATION = 700;
+export const Skeleton = (props) => {
+    const { width = '100%', height = 16, borderRadius = 4, style, ...rest } = props;
+    const styles = useStyles();
+    const [opacity] = React.useState(() => new Animated.Value(0.5));
+    React.useEffect(() => {
+        const anim = Animated.loop(Animated.sequence([
+            Animated.timing(opacity, { toValue: 1, duration: PULSE_DURATION, easing: Easing.ease, useNativeDriver: true }),
+            Animated.timing(opacity, {
+                toValue: 0.5,
+                duration: PULSE_DURATION,
+                easing: Easing.ease,
+                useNativeDriver: true,
+            }),
+        ]));
+        anim.start();
+        return () => anim.stop();
+    }, [opacity]);
+    return (_jsx(Box, { tag: "skeleton", width: width, height: height, borderRadius: borderRadius, ...rest, style: [styles.skeleton, style], children: _jsx(Animated.View, { style: [styles.pulse, { opacity }] }) }));
+};

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

@@ -0,0 +1,36 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: true;
+    description: string;
+    shortDescription: string;
+    component: (props: import("./Skeleton").SkeletonProps) => import("react").JSX.Element;
+    styleFn: () => {
+        skeleton: {
+            overflow: "hidden";
+        };
+        pulse: {
+            position: "absolute";
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+            backgroundColor: string;
+        };
+    };
+};
+export default _default;
+export declare const Ligne: () => import("react").JSX.Element;
+export declare const Carre: () => import("react").JSX.Element;
+export declare const Rond: () => import("react").JSX.Element;
+export declare const Rectangle: () => import("react").JSX.Element;
+/**
+ * Des lignes de largeurs décroissantes imitent un paragraphe de texte.
+ */
+export declare const Paragraphe: () => import("react").JSX.Element;
+/**
+ * Les formes se composent pour préfigurer un élément de liste : un avatar rond, un titre et un sous-titre.
+ */
+export declare const ElementDeListe: () => import("react").JSX.Element;
+export * as Sources from './Skeleton.stories.sources';
+//# sourceMappingURL=Skeleton.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Skeleton/Skeleton.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAKA,wBAakB;AAElB,eAAO,MAAM,KAAK,mCAAiC,CAAC;AAEpD,eAAO,MAAM,KAAK,mCAA4C,CAAC;AAE/D,eAAO,MAAM,IAAI,mCAA8D,CAAC;AAEhF,eAAO,MAAM,SAAS,mCAAmD,CAAC;AAE1E;;GAEG;AACH,eAAO,MAAM,UAAU,mCAOtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,mCAY1B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}

package/dist/ui/Skeleton/Skeleton.stories.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core/Box';
+import { Skeleton } from './Skeleton';
+import { useStyles } from './Skeleton.styles';
+export default {
+    title: 'Skeleton',
+    tags: ['ui'],
+    experimental: true,
+    description: `Espace réservé animé affiché pendant le chargement d'un contenu. Composant de type Box.
+
+La forme se règle avec \`width\` (\`100%\` par défaut), \`height\` (16 px par défaut) et \`borderRadius\` (4 px par défaut) :
+- ligne de texte : largeur en pourcentage, faible hauteur
+- carré : \`width\` égale à \`height\`
+- rond : \`borderRadius\` égal à la moitié de la taille`,
+    shortDescription: 'Espace réservé animé qui préfigure un contenu en cours de chargement.',
+    component: Skeleton,
+    styleFn: useStyles,
+};
+export const Ligne = () => _jsx(Skeleton, { width: "60%" });
+export const Carre = () => _jsx(Skeleton, { width: 64, height: 64 });
+export const Rond = () => _jsx(Skeleton, { width: 48, height: 48, borderRadius: 24 });
+export const Rectangle = () => _jsx(Skeleton, { height: 160, borderRadius: 8 });
+/**
+ * Des lignes de largeurs décroissantes imitent un paragraphe de texte.
+ */
+export const Paragraphe = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "1V", width: "100%", children: [_jsx(Skeleton, { width: "40%", height: 20 }), _jsx(Skeleton, {}), _jsx(Skeleton, { width: "90%" }), _jsx(Skeleton, { width: "65%" })] }));
+/**
+ * Les formes se composent pour préfigurer un élément de liste : un avatar rond, un titre et un sous-titre.
+ */
+export const ElementDeListe = () => (_jsx(Box, { display: "flex", flexDirection: "column", gap: "2W", width: "100%", children: [0, 1, 2].map(i => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "1W", style: { alignItems: 'center' }, children: [_jsx(Skeleton, { width: 40, height: 40, borderRadius: 20 }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: "1V", flex: 1, children: [_jsx(Skeleton, { width: "40%", height: 18 }), _jsx(Skeleton, { width: "65%", height: 14 })] })] }, i))) }));
+export * as Sources from './Skeleton.stories.sources';

package/dist/ui/Skeleton/Skeleton.stories.sources.d.ts

@@ -0,0 +1,17 @@
+export declare const Ligne: () => string;
+export declare const Carre: () => string;
+export declare const Rond: () => string;
+export declare const Rectangle: () => string;
+export declare const Paragraphe: () => string;
+export declare const ElementDeListe: () => string;
+export declare const storySources: {
+    readonly Ligne: () => string;
+    readonly Carre: () => string;
+    readonly Rond: () => string;
+    readonly Rectangle: () => string;
+    readonly Paragraphe: () => string;
+    readonly ElementDeListe: () => string;
+};
+export type StorySourceName = keyof typeof storySources;
+export declare const storyDescriptions: Partial<Record<StorySourceName, string>>;
+//# sourceMappingURL=Skeleton.stories.sources.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Skeleton/Skeleton.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAAiE,CAAC;AAEpF,eAAO,MAAM,KAAK,cAA0E,CAAC;AAE7F,eAAO,MAAM,IAAI,cAA2F,CAAC;AAE7G,eAAO,MAAM,SAAS,cAAqF,CAAC;AAE5G,eAAO,MAAM,UAAU,cAAqQ,CAAC;AAE7R,eAAO,MAAM,cAAc,cAAqiB,CAAC;AAEjkB,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAGtE,CAAC"}

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

@@ -0,0 +1,20 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/Skeleton/Skeleton.stories.tsx
+export const Ligne = () => "export const Ligne = () => <Skeleton width=\"60%\" />;";
+export const Carre = () => "export const Carre = () => <Skeleton width={64} height={64} />;";
+export const Rond = () => "export const Rond = () => <Skeleton width={48} height={48} borderRadius={24} />;";
+export const Rectangle = () => "export const Rectangle = () => <Skeleton height={160} borderRadius={8} />;";
+export const Paragraphe = () => "export const Paragraphe = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"1V\" width=\"100%\">\n    <Skeleton width=\"40%\" height={20} />\n    <Skeleton />\n    <Skeleton width=\"90%\" />\n    <Skeleton width=\"65%\" />\n  </Box>\n);";
+export const ElementDeListe = () => "export const ElementDeListe = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"2W\" width=\"100%\">\n    {[0, 1, 2].map(i => (\n      <Box key={i} display=\"flex\" flexDirection=\"row\" gap=\"1W\" style={{ alignItems: 'center' }}>\n        <Skeleton width={40} height={40} borderRadius={20} />\n        <Box display=\"flex\" flexDirection=\"column\" gap=\"1V\" flex={1}>\n          <Skeleton width=\"40%\" height={18} />\n          <Skeleton width=\"65%\" height={14} />\n        </Box>\n      </Box>\n    ))}\n  </Box>\n);";
+export const storySources = {
+    Ligne,
+    Carre,
+    Rond,
+    Rectangle,
+    Paragraphe,
+    ElementDeListe,
+};
+export const storyDescriptions = {
+    Paragraphe: "Des lignes de largeurs décroissantes imitent un paragraphe de texte.",
+    ElementDeListe: "Les formes se composent pour préfigurer un élément de liste : un avatar rond, un titre et un sous-titre.",
+};

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

@@ -0,0 +1,14 @@
+export declare const useStyles: () => {
+    skeleton: {
+        overflow: "hidden";
+    };
+    pulse: {
+        position: "absolute";
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+        backgroundColor: string;
+    };
+};
+//# sourceMappingURL=Skeleton.styles.d.ts.map

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

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

package/dist/ui/Skeleton/Skeleton.styles.js

@@ -0,0 +1,14 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ color }) => ({
+    skeleton: {
+        overflow: 'hidden',
+    },
+    pulse: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        backgroundColor: color.light.background['alt-grey'],
+    },
+}));

package/dist/ui/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Skeleton';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/Skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Skeleton/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/ui/Skeleton/index.js

@@ -0,0 +1 @@
+export * from './Skeleton';

package/dist/ui/Spinner/Spinner.d.ts

@@ -1,5 +1,3 @@
-import React from 'react';
-import { SpinnerProps } from './Spinner.shared';
-export type { SpinnerProps };
-export declare const Spinner: ({ size, delay, style }: SpinnerProps) => React.JSX.Element | null;
+import type { SpinnerProps } from './Spinner.shared';
+export declare const Spinner: ({ style, ...props }: SpinnerProps) => import("react").JSX.Element | null;
 //# sourceMappingURL=Spinner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAsB,YAAY,EAAc,MAAM,kBAAkB,CAAC;AAGhF,YAAY,EAAE,YAAY,EAAE,CAAC;AAS7B,eAAO,MAAM,OAAO,GAAI,wBAA+B,YAAY,6BAsDlE,CAAC"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/Spinner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrD,eAAO,MAAM,OAAO,GAAI,qBAAqB,YAAY,uCA4BxD,CAAC"}

package/dist/ui/Spinner/Spinner.js

@@ -1,46 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { Animated, Easing } from 'react-native';
+import { Animated } from 'react-native';
 import { Circle, Svg } from 'react-native-svg';
-import { DELAY_MS, SIZE_MAP, STROKE_MAP } from './Spinner.shared';
-import { useStyles } from './Spinner.styles';
-function resolveDelay(delay) {
-    if (delay === undefined || delay === false)
-        return null;
-    if (delay === true)
-        return 1000;
-    if (typeof delay === 'string')
-        return DELAY_MS[delay] ?? 0;
-    return delay;
-}
-export const Spinner = ({ size = 'md', delay, style }) => {
-    const styles = useStyles();
-    const [rotation] = React.useState(() => new Animated.Value(0));
-    const delayMs = React.useMemo(() => resolveDelay(delay), [delay]);
-    const [visible, setVisible] = React.useState(delayMs === null);
-    const px = SIZE_MAP[size];
-    const strokeWidth = STROKE_MAP[size];
+import { useSpinner } from './useSpinner';
+export const Spinner = ({ style, ...props }) => {
+    const { styles, spin, visible, px, strokeWidth } = useSpinner(props, true);
     const r = (px - strokeWidth) / 2;
     const cx = px / 2;
     const circumference = 2 * Math.PI * r;
     const dashArray = `${circumference * 0.75} ${circumference * 0.25}`;
-    const spin = rotation.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] });
-    React.useEffect(() => {
-        if (delayMs === null)
-            return;
-        const timer = setTimeout(() => setVisible(true), delayMs);
-        return () => clearTimeout(timer);
-    }, [delayMs]);
-    React.useEffect(() => {
-        const anim = Animated.loop(Animated.timing(rotation, {
-            toValue: 1,
-            duration: 800,
-            easing: Easing.linear,
-            useNativeDriver: true,
-        }));
-        anim.start();
-        return () => anim.stop();
-    }, [rotation]);
     if (!visible)
         return null;
     return (_jsx(Animated.View, { style: [{ width: px, height: px, transform: [{ rotate: spin }] }, style], children: _jsxs(Svg, { width: px, height: px, viewBox: `0 0 ${px} ${px}`, children: [_jsx(Circle, { cx: cx, cy: cx, r: r, fill: "none", strokeWidth: strokeWidth, stroke: styles.track.color }), _jsx(Circle, { cx: cx, cy: cx, r: r, fill: "none", strokeWidth: strokeWidth, stroke: styles.arc.color, strokeDasharray: dashArray, strokeLinecap: "round", rotation: -90, origin: `${cx}, ${cx}` })] }) }));