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

package/dist/ui/DocumentViewer/DocumentViewer.styles.js

@@ -69,6 +69,9 @@ const cadre = ({ color, spacing, radius, isVariant }) => ({
         maxWidth: isVariant('tablet') ? '60%' : '40%',
         minWidth: 0,
         flexShrink: 1,
+        // Positionne, le panneau rendu apres la barre d'outils la recouvre quand elle deborde,
+        // comme en Tamagui v1 qui posait `position: relative` sur chaque vue.
+        position: 'relative',
         borderColor: color.light.border['default-grey'],
         borderWidth: 1,
         borderStyle: 'solid',

package/dist/ui/DocumentViewer/DocumentViewer.types.d.ts

@@ -8,5 +8,7 @@ export type DocumentViewerProps = BoxProps & {
     height?: BoxProps['height'];
     ChildrenProps?: Omit<BoxProps, 'children'>;
     pdfErrorLabel?: string;
+    /** Affiche le bouton plein ecran dans la barre d'outils (web, si le navigateur le permet). */
+    allowFullscreen?: boolean;
 };
 //# sourceMappingURL=DocumentViewer.types.d.ts.map

package/dist/ui/DocumentViewer/DocumentViewer.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentViewer.types.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,sBAAsB,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;AAExD,eAAO,MAAM,wBAAwB,GAAI,OAAO,MAAM,KAAG,KAAK,IAAI,sBAC/B,CAAC;AAEpC,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG;IAC3C,IAAI,EAAE,OAAO,GAAG,KAAK,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}
+{"version":3,"file":"DocumentViewer.types.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,sBAAsB,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;AAExD,eAAO,MAAM,wBAAwB,GAAI,OAAO,MAAM,KAAG,KAAK,IAAI,sBAC/B,CAAC;AAEpC,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG;IAC3C,IAAI,EAAE,OAAO,GAAG,KAAK,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,8FAA8F;IAC9F,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC"}

package/dist/ui/DocumentViewer/DocumentViewerImage.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { BoxProps } from '../../core/Box';
 import { DocumentViewerRotation } from './DocumentViewer.types';
 export type DocumentViewerImageProps = {
@@ -7,5 +6,5 @@ export type DocumentViewerImageProps = {
     rotation: DocumentViewerRotation;
     scale?: number;
 };
-export declare const DocumentViewerImage: (props: DocumentViewerImageProps) => React.JSX.Element;
+export declare const DocumentViewerImage: (props: DocumentViewerImageProps) => import("react").JSX.Element;
 //# sourceMappingURL=DocumentViewerImage.d.ts.map

package/dist/ui/DocumentViewer/DocumentViewerImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentViewerImage.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAIhE,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,sBA6ClE,CAAC"}
+{"version":3,"file":"DocumentViewerImage.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerImage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAGhE,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,gCA6BlE,CAAC"}

package/dist/ui/DocumentViewer/DocumentViewerImage.js

@@ -1,25 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
 import { Box } from '../../core/Box';
 import { Image } from '../../core/Image';
 import { useStyles } from './DocumentViewer.styles';
-import { positionEnPourcentage } from './documentViewerPdfCalculs';
-import { lirePointeurWeb } from './pointeurWeb';
+import { useZoomMolette } from './useZoomMolette';
 export const DocumentViewerImage = (props) => {
     const { source, rotation, height, scale = 1 } = props;
     const styles = useStyles();
-    const [isHovered, setIsHovered] = React.useState(false);
-    const [transformOrigin, setTransformOrigin] = React.useState('50% 50%');
-    const hoveredScale = isHovered ? 2 : 1;
-    const handlePointerMove = React.useCallback((event) => {
-        const pointeur = lirePointeurWeb(event);
-        if (!pointeur)
-            return;
-        const { x, y } = positionEnPourcentage(pointeur);
-        const origin = getRotatedTransformOrigin(x, y, rotation);
-        setTransformOrigin(`${origin.x}% ${origin.y}%`);
-    }, [rotation]);
-    return (_jsx(Box, { tag: "document-viewer-image", width: '100%', height: height, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), onPointerMove: handlePointerMove, style: styles.viewerImageContent, children: _jsx(Box, { width: '100%', height: '100%', p: '1V', children: _jsx(Box, { width: '100%', height: '100%', style: { transform: [{ rotate: `${rotation}deg` }] }, children: _jsx(Box, { width: '100%', height: '100%', style: [styles.viewerImageZoomLayer, { transformOrigin }, { transform: [{ scale: scale * hoveredScale }] }], children: _jsx(Image, { source: { uri: source }, contentFit: "contain", width: '100%', height: '100%', pointerEvents: "none" }) }) }) }) }));
+    const { poserLeCadre, ...zoom } = useZoomMolette();
+    const origine = getRotatedTransformOrigin(zoom.position.x, zoom.position.y, rotation);
+    const transformOrigin = `${origine.x}% ${origine.y}%`;
+    return (_jsx(Box, { tag: "document-viewer-image", width: '100%', height: height, ref: poserLeCadre, onPointerMove: zoom.onDeplacement, style: styles.viewerImageContent, children: _jsx(Box, { width: '100%', height: '100%', p: '1V', children: _jsx(Box, { width: '100%', height: '100%', style: { transform: [{ rotate: `${rotation}deg` }] }, children: _jsx(Box, { width: '100%', height: '100%', style: [styles.viewerImageZoomLayer, { transformOrigin }, { transform: [{ scale: scale * zoom.echelle }] }], children: _jsx(Image, { source: { uri: source }, contentFit: "contain", width: '100%', height: '100%', pointerEvents: "none" }) }) }) }) }));
 };
 const getRotatedTransformOrigin = (x, y, rotation) => {
     switch (rotation) {

package/dist/ui/DocumentViewer/DocumentViewerPDF.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentViewerPDF.web.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAEpD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEhE,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAOhE,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAwDF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBAkC9D,CAAC"}
+{"version":3,"file":"DocumentViewerPDF.web.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAEpD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEhE,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAOhE,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AA+DF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBAmC9D,CAAC"}

package/dist/ui/DocumentViewer/DocumentViewerPDF.web.js

@@ -6,19 +6,19 @@ import { useStyles } from './DocumentViewer.styles';
 import { useDocumentPdfCharge } from './useDocumentPdfCharge';
 import { useEtatReinitialiseParCle } from './useEtatReinitialiseParCle';
 import { useRenduDePage } from './useRenduDePage';
-import { useSurvolAvecZoom } from './useSurvolAvecZoom';
 import { useTailleParResizeObserver } from './useTailleParResizeObserver';
-/** Le cadre du visualiseur : la mesure invisible, le canvas a l'echelle du survol, et
+import { useZoomMolette } from './useZoomMolette';
+/** Le cadre du visualiseur : la mesure invisible, le canvas a l'echelle du zoom, et
  *  l'incrustation d'erreur quand le document ou la page n'a pas pu se rendre. */
-const ZonePdf = ({ mesureRef, canvasRef, tailleRendue, survol, hasError, errorLabel, height }) => {
+const ZonePdf = ({ mesureRef, canvasRef, tailleRendue, poserLeCadre, zoom, hasError, errorLabel, height, }) => {
     const styles = useStyles();
-    return (_jsxs(Box, { tag: "document-viewer-pdf", width: '100%', height: height, onMouseEnter: survol.onEntree, onMouseLeave: survol.onSortie, onPointerEnter: survol.onEntree, onPointerLeave: survol.onSortie, onPointerMove: survol.onDeplacement, style: [styles.viewerPdfContent, { position: 'relative' }], children: [_jsx("div", { ref: mesureRef, style: { position: 'absolute', inset: 0, pointerEvents: 'none' } }), _jsxs(Box, { width: '100%', height: '100%', p: '1V', style: styles.viewerPdfStage, children: [_jsx(Box, { style: [
+    return (_jsxs(Box, { tag: "document-viewer-pdf", width: '100%', height: height, ref: poserLeCadre, onPointerMove: zoom.onDeplacement, style: [styles.viewerPdfContent, { position: 'relative' }], children: [_jsx("div", { ref: mesureRef, style: { position: 'absolute', inset: 0, pointerEvents: 'none' } }), _jsxs(Box, { width: '100%', height: '100%', p: '1V', style: styles.viewerPdfStage, children: [_jsx(Box, { style: [
                             styles.viewerPdfCanvasWrapper,
                             {
                                 width: tailleRendue.width,
                                 height: tailleRendue.height,
-                                transformOrigin: survol.origine,
-                                transform: [{ scale: survol.echelle }],
+                                transformOrigin: zoom.origine,
+                                transform: [{ scale: zoom.echelle }],
                             },
                         ], children: _jsx("canvas", { ref: canvasRef, style: styles.viewerPdfCanvas }) }), hasError && (_jsx(Box, { style: styles.viewerPdfOverlay, children: _jsx(Typography, { style: styles.viewerPdfErrorLabel, children: errorLabel }) }))] })] }));
 };
@@ -33,6 +33,6 @@ export const DocumentViewerPDF = (props) => {
     const [erreurDeRendu, setErreurDeRendu] = useEtatReinitialiseParCle(source);
     const onErreurDeRendu = React.useCallback(() => setErreurDeRendu(true), [setErreurDeRendu]);
     const tailleRendue = useRenduDePage({ pdf, page, rotation, scale, cadre, canvasRef, onErreur: onErreurDeRendu });
-    const survol = useSurvolAvecZoom();
-    return (_jsx(ZonePdf, { mesureRef: mesureRef, canvasRef: canvasRef, tailleRendue: tailleRendue, survol: survol, hasError: erreurDeChargement || erreurDeRendu, errorLabel: errorLabel, height: height }));
+    const { poserLeCadre, ...zoom } = useZoomMolette();
+    return (_jsx(ZonePdf, { mesureRef: mesureRef, canvasRef: canvasRef, tailleRendue: tailleRendue, poserLeCadre: poserLeCadre, zoom: zoom, hasError: erreurDeChargement || erreurDeRendu, errorLabel: errorLabel, height: height }));
 };

package/dist/ui/DocumentViewer/DocumentViewerToolbar.d.ts

@@ -13,6 +13,9 @@ export type DocumentViewerToolbarProps = {
     onRotateRight: () => void;
     onPreviousPage?: () => void;
     onNextPage?: () => void;
+    /** Absent quand le plein ecran n'est pas disponible : le bouton n'est alors pas affiche. */
+    pleinEcran?: boolean;
+    onTogglePleinEcran?: () => void;
 };
 export declare const DocumentViewerToolbar: (props: DocumentViewerToolbarProps) => import("react").JSX.Element;
 //# sourceMappingURL=DocumentViewerToolbar.d.ts.map

package/dist/ui/DocumentViewer/DocumentViewerToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentViewerToolbar.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerToolbar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAG7D,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACtC,QAAQ,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,0BAA0B,CAAC;IAClC,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,OAAO,0BAA0B,gCAsDtE,CAAC"}
+{"version":3,"file":"DocumentViewerToolbar.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerToolbar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAG7D,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACtC,QAAQ,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,0BAA0B,CAAC;IAClC,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,4FAA4F;IAC5F,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,OAAO,0BAA0B,gCAkEtE,CAAC"}

package/dist/ui/DocumentViewer/DocumentViewerToolbar.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box } from '../../core/Box';
 import { Typography } from '../../core/Typography';
 import { useStyles } from './DocumentViewer.styles';
 import { ToolbarButton } from './DocumentViewerToolbarButton';
 export const DocumentViewerToolbar = (props) => {
-    const { title, state, withChildren, onRotateLeft, onRotateRight, onNextPage, onPreviousPage } = props;
+    const { title, state, withChildren, onRotateLeft, onRotateRight, onNextPage, onPreviousPage, pleinEcran, onTogglePleinEcran, } = props;
     const styles = useStyles();
     const isPdf = state.fileType === 'pdf';
     const isFirstPage = state.page === 1;
@@ -13,5 +13,9 @@ export const DocumentViewerToolbar = (props) => {
     return (_jsxs(Box, { tag: "document-viewer-toolbar", style: {
             ...styles.toolbar,
             ...(withChildren ? { borderTopRightRadius: 0 } : {}),
-        }, children: [_jsx(Box, { children: _jsx(Typography, { style: styles.toolbarTitle, children: title }) }), _jsxs(Box, { tag: "document-viewer-toolbar-actions", style: styles.toolbarAction, children: [_jsxs(Box, { display: "flex", flexDirection: "row", gap: "1,5V", children: [_jsx(ToolbarButton, { onPress: onRotateLeft, icon: "RotateCcwSquare", accessibilityLabel: "Pivoter vers la gauche" }), _jsx(ToolbarButton, { onPress: onRotateRight, icon: "RotateCwSquare", accessibilityLabel: "Pivoter vers la droite" })] }), _jsx(Box, { style: styles.toolbarDivider }), _jsxs(Box, { display: "flex", flexDirection: "row", gap: "1,5V", children: [_jsx(ToolbarButton, { onPress: onPreviousPage, disabled: isFirstPage || !hasPagination, icon: "SquareChevronLeft", accessibilityLabel: "Page precedente" }), _jsx(Box, { mt: 'auto', mb: 'auto', children: _jsxs(Typography, { style: styles.toolbarState, children: [hasPagination ? state.page : 1, " / ", hasPagination ? state.totalPages : 1] }) }), _jsx(ToolbarButton, { onPress: onNextPage, disabled: isLastPage || !hasPagination, icon: "SquareChevronRight", accessibilityLabel: "Page suivante" })] })] })] }));
+        }, children: [_jsx(Box, { children: _jsx(Typography, { style: styles.toolbarTitle, children: title }) }), _jsxs(Box, { tag: "document-viewer-toolbar-actions", style: styles.toolbarAction, children: [_jsxs(Box, { display: "flex", flexDirection: "row", gap: "1,5V", children: [_jsx(ToolbarButton, { onPress: onRotateLeft, icon: "RotateCcwSquare", accessibilityLabel: "Pivoter vers la gauche" }), _jsx(ToolbarButton, { onPress: onRotateRight, icon: "RotateCwSquare", accessibilityLabel: "Pivoter vers la droite" })] }), _jsx(Box, { style: styles.toolbarDivider }), _jsxs(Box, { display: "flex", flexDirection: "row", gap: "1,5V", children: [_jsx(ToolbarButton, { onPress: onPreviousPage, disabled: isFirstPage || !hasPagination, icon: "SquareChevronLeft", accessibilityLabel: "Page precedente" }), _jsx(Box, { mt: 'auto', mb: 'auto', children: _jsxs(Typography, { style: styles.toolbarState, children: [hasPagination ? state.page : 1, " / ", hasPagination ? state.totalPages : 1] }) }), _jsx(ToolbarButton, { onPress: onNextPage, disabled: isLastPage || !hasPagination, icon: "SquareChevronRight", accessibilityLabel: "Page suivante" })] }), pleinEcran !== undefined && _jsx(BoutonPleinEcran, { pleinEcran: pleinEcran, onPress: onTogglePleinEcran })] })] }));
+};
+const BoutonPleinEcran = ({ pleinEcran, onPress }) => {
+    const styles = useStyles();
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { style: styles.toolbarDivider }), _jsx(ToolbarButton, { onPress: onPress, icon: pleinEcran ? 'Minimize' : 'Maximize', accessibilityLabel: pleinEcran ? 'Quitter le plein ecran' : 'Afficher en plein ecran' })] }));
 };

package/dist/ui/DocumentViewer/chargementDePdfJs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chargementDePdfJs.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/chargementDePdfJs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;QACjC,WAAW,EAAE,CAAC,OAAO,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,sBAAsB,CAAA;SAAE,KAAK;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAC;QACjH,MAAM,EAAE,CAAC,OAAO,EAAE;YAChB,aAAa,EAAE,wBAAwB,CAAC;YACxC,QAAQ,EAAE;gBAAE,KAAK,EAAE,MAAM,CAAC;gBAAC,MAAM,EAAE,MAAM,CAAA;aAAE,CAAC;YAC5C,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;SAC9D,KAAK;YAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;YAAC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;SAAE,GAAG,IAAI,CAAC;QAC7D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC,CAAC;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,mBAAmB,EAAE;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3C,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK;QACjD,OAAO,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;QACvC,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;CACH,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,UAAU,MAAM,EAAE,UAAU;IAAE,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,WAMxG,CAAC;AAcF,2FAA2F;AAC3F,eAAO,MAAM,aAAa,GAAI,QAAQ,OAAO,KAAG,WAK/C,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,SAAS,4BAoBlB,CAAC"}
+{"version":3,"file":"chargementDePdfJs.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/chargementDePdfJs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;QACjC,WAAW,EAAE,CAAC,OAAO,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,sBAAsB,CAAA;SAAE,KAAK;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAC;QACjH,MAAM,EAAE,CAAC,OAAO,EAAE;YAChB,aAAa,EAAE,wBAAwB,CAAC;YACxC,QAAQ,EAAE;gBAAE,KAAK,EAAE,MAAM,CAAC;gBAAC,MAAM,EAAE,MAAM,CAAA;aAAE,CAAC;YAC5C,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;SAC9D,KAAK;YAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;YAAC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;SAAE,GAAG,IAAI,CAAC;QAC7D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC,CAAC;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,mBAAmB,EAAE;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3C,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK;QACjD,OAAO,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;QACvC,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;CACH,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,UAAU,MAAM,EAAE,UAAU;IAAE,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,WAMxG,CAAC;AAiBF,2FAA2F;AAC3F,eAAO,MAAM,aAAa,GAAI,QAAQ,OAAO,KAAG,WAK/C,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,SAAS,4BAoBlB,CAAC"}

package/dist/ui/DocumentViewer/chargementDePdfJs.js

@@ -14,7 +14,9 @@ const getPdfJsAssetUrl = (filename) => {
     return urlDeLAssetPdfJs(filename, { scriptUrl: expoScript?.src ?? null, origin: window.location.origin });
 };
 const estUnObjet = (valeur) => typeof valeur === 'object' && valeur !== null;
-const estPdfJs = (valeur) => estUnObjet(valeur) && estUnObjet(valeur.GlobalWorkerOptions) && typeof valeur.getDocument === 'function';
+// Dans pdf.js 6 (la version embarquée), `GlobalWorkerOptions` est une classe, plus un objet
+const estDesOptionsDeWorker = (valeur) => estUnObjet(valeur) || typeof valeur === 'function';
+const estPdfJs = (valeur) => estUnObjet(valeur) && estDesOptionsDeWorker(valeur.GlobalWorkerOptions) && typeof valeur.getDocument === 'function';
 /** pdf.js tel que l'import dynamique le livre : un module que TypeScript n'a jamais vu. */
 export const pdfJsDuModule = (module) => {
     if (estUnObjet(module) && estPdfJs(module.default))

package/dist/ui/DocumentViewer/pointeurWeb.d.ts

@@ -1,10 +1,20 @@
-import type { PointerEvent } from 'react-native';
 /**
- * La position du pointeur et le cadre qu'il survole, lus sur un evenement RN. Sur le web,
+ * Ce que `lirePointeurWeb` lit d'un evenement de pointeur : le plus petit type commun a
+ * l'evenement RN (Tamagui v1) et a l'evenement React DOM (Tamagui v2).
+ */
+export type EvenementPointeur = {
+    currentTarget: unknown;
+    nativeEvent: {
+        clientX: number;
+        clientY: number;
+    };
+};
+/**
+ * La position du pointeur et le cadre qu'il survole, lus sur un evenement RN ou DOM. Sur le web,
  * react-native-web transmet l'evenement du DOM : `nativeEvent` porte les coordonnees et
  * `currentTarget` est l'element survole. Hors du DOM, il n'y a pas de cadre a mesurer.
  */
-export declare const lirePointeurWeb: (event: PointerEvent) => {
+export declare const lirePointeurWeb: (event: EvenementPointeur) => {
     clientX: number;
     clientY: number;
     rect: DOMRect;

package/dist/ui/DocumentViewer/pointeurWeb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pointeurWeb.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/pointeurWeb.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,YAAY;;;;aAMlD,CAAC"}
+{"version":3,"file":"pointeurWeb.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/pointeurWeb.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;CACnD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,iBAAiB;;;;aAMvD,CAAC"}

package/dist/ui/DocumentViewer/pointeurWeb.js

@@ -1,5 +1,5 @@
 /**
- * La position du pointeur et le cadre qu'il survole, lus sur un evenement RN. Sur le web,
+ * La position du pointeur et le cadre qu'il survole, lus sur un evenement RN ou DOM. Sur le web,
  * react-native-web transmet l'evenement du DOM : `nativeEvent` porte les coordonnees et
  * `currentTarget` est l'element survole. Hors du DOM, il n'y a pas de cadre a mesurer.
  */

package/dist/ui/DocumentViewer/usePleinEcran.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+/**
+ * Le plein ecran du visualiseur, par la Fullscreen API du navigateur. Indisponible s'il n'est pas `actif`, hors du web
+ * ou quand le navigateur le refuse (`document.fullscreenEnabled`). La sortie par Echap passe par
+ * le navigateur : l'etat suit donc `fullscreenchange` plutot que les appuis sur le bouton.
+ */
+export declare const usePleinEcran: (actif: boolean) => {
+    poserLeCadre: React.Dispatch<unknown>;
+    disponible: boolean;
+    pleinEcran: boolean;
+    basculer: () => void;
+};
+//# sourceMappingURL=usePleinEcran.d.ts.map

package/dist/ui/DocumentViewer/usePleinEcran.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePleinEcran.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/usePleinEcran.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,OAAO;;;;;CAqB3C,CAAC"}

package/dist/ui/DocumentViewer/usePleinEcran.js

@@ -0,0 +1,27 @@
+import React from 'react';
+/**
+ * Le plein ecran du visualiseur, par la Fullscreen API du navigateur. Indisponible s'il n'est pas `actif`, hors du web
+ * ou quand le navigateur le refuse (`document.fullscreenEnabled`). La sortie par Echap passe par
+ * le navigateur : l'etat suit donc `fullscreenchange` plutot que les appuis sur le bouton.
+ */
+export const usePleinEcran = (actif) => {
+    const [cadre, poserLeCadre] = React.useState(null);
+    const [pleinEcran, setPleinEcran] = React.useState(false);
+    const disponible = actif && typeof document !== 'undefined' && document.fullscreenEnabled === true;
+    React.useEffect(() => {
+        if (!disponible)
+            return;
+        const onChangement = () => setPleinEcran(document.fullscreenElement === cadre);
+        document.addEventListener('fullscreenchange', onChangement);
+        return () => document.removeEventListener('fullscreenchange', onChangement);
+    }, [cadre, disponible]);
+    const basculer = React.useCallback(() => {
+        if (!(cadre instanceof Element))
+            return;
+        if (document.fullscreenElement === cadre)
+            void document.exitFullscreen();
+        else
+            void cadre.requestFullscreen();
+    }, [cadre]);
+    return { poserLeCadre, disponible, pleinEcran, basculer };
+};

package/dist/ui/DocumentViewer/useZoomMolette.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { type EvenementPointeur } from './pointeurWeb';
+export declare const ZOOM_MIN = 1;
+export declare const ZOOM_MAX = 4;
+/** Le zoom suivant d'un cran de molette, borne entre `ZOOM_MIN` et `ZOOM_MAX`. */
+export declare const zoomSuivant: (zoom: number, deltaY: number) => number;
+/**
+ * Le zoom a Ctrl (ou Cmd) + molette, centre sous le pointeur ; la molette seule laisse defiler
+ * la page. Un double-clic revient a 100 %. Une fois zoome, l'origine suit le pointeur pour
+ * parcourir la page. Le listener `wheel` est pose a la main, non passif : `onWheel` de React
+ * est passif et ne peut pas empecher le zoom du navigateur. Hors du DOM (natif), rien n'est pose.
+ */
+export declare const useZoomMolette: () => {
+    poserLeCadre: React.Dispatch<unknown>;
+    echelle: number;
+    /** La position du pointeur, en pourcentage du cadre. */
+    position: {
+        x: number;
+        y: number;
+    };
+    origine: string;
+    onDeplacement: (event: EvenementPointeur) => void;
+};
+//# sourceMappingURL=useZoomMolette.d.ts.map

package/dist/ui/DocumentViewer/useZoomMolette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useZoomMolette.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/useZoomMolette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,iBAAiB,EAAmB,MAAM,eAAe,CAAC;AAExE,eAAO,MAAM,QAAQ,IAAI,CAAC;AAC1B,eAAO,MAAM,QAAQ,IAAI,CAAC;AAG1B,kFAAkF;AAClF,eAAO,MAAM,WAAW,GAAI,MAAM,MAAM,EAAE,QAAQ,MAAM,WACsC,CAAC;AAE/F;;;;;GAKG;AACH,eAAO,MAAM,cAAc;;;IAoCvB,wDAAwD;;;;;;2BAGjC,iBAAiB;CAI3C,CAAC"}

package/dist/ui/DocumentViewer/useZoomMolette.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { positionEnPourcentage } from './documentViewerPdfCalculs';
+import { lirePointeurWeb } from './pointeurWeb';
+export const ZOOM_MIN = 1;
+export const ZOOM_MAX = 4;
+const PAS_DE_ZOOM = 1.25;
+/** Le zoom suivant d'un cran de molette, borne entre `ZOOM_MIN` et `ZOOM_MAX`. */
+export const zoomSuivant = (zoom, deltaY) => Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, deltaY < 0 ? zoom * PAS_DE_ZOOM : zoom / PAS_DE_ZOOM));
+/**
+ * Le zoom a Ctrl (ou Cmd) + molette, centre sous le pointeur ; la molette seule laisse defiler
+ * la page. Un double-clic revient a 100 %. Une fois zoome, l'origine suit le pointeur pour
+ * parcourir la page. Le listener `wheel` est pose a la main, non passif : `onWheel` de React
+ * est passif et ne peut pas empecher le zoom du navigateur. Hors du DOM (natif), rien n'est pose.
+ */
+export const useZoomMolette = () => {
+    // Un ref par callback : le cadre est un etat, pose une fois monte, que l'effet suit.
+    const [cadre, poserLeCadre] = React.useState(null);
+    const [echelle, setEchelle] = React.useState(1);
+    const [position, setPosition] = React.useState({ x: 50, y: 50 });
+    const suivrePointeur = React.useCallback((event) => {
+        const pointeur = lirePointeurWeb(event);
+        if (!pointeur)
+            return;
+        setPosition(positionEnPourcentage(pointeur));
+    }, []);
+    React.useEffect(() => {
+        if (typeof Element === 'undefined' || !(cadre instanceof Element))
+            return;
+        const onWheel = (event) => {
+            if (!(event instanceof WheelEvent) || !(event.ctrlKey || event.metaKey))
+                return;
+            event.preventDefault();
+            suivrePointeur({ currentTarget: cadre, nativeEvent: event });
+            setEchelle(zoom => zoomSuivant(zoom, event.deltaY));
+        };
+        const onDoubleClic = () => setEchelle(1);
+        cadre.addEventListener('wheel', onWheel, { passive: false });
+        cadre.addEventListener('dblclick', onDoubleClic);
+        return () => {
+            cadre.removeEventListener('wheel', onWheel);
+            cadre.removeEventListener('dblclick', onDoubleClic);
+        };
+    }, [cadre, suivrePointeur]);
+    return {
+        poserLeCadre,
+        echelle,
+        /** La position du pointeur, en pourcentage du cadre. */
+        position,
+        origine: `${position.x}% ${position.y}%`,
+        onDeplacement: (event) => {
+            if (echelle > 1)
+                suivrePointeur(event);
+        },
+    };
+};

package/dist/ui/DurationInput/DurationInput.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { TextInputElement } from '../FormControl';
 import { ChampHHMMProps } from '../FormControl/ChampHHMM';
 export type DurationInputProps = ChampHHMMProps;
 export declare const DurationInput: React.ForwardRefExoticComponent<import("..").FormControlCaptionProps & {
@@ -6,5 +7,5 @@ export declare const DurationInput: React.ForwardRefExoticComponent<import("..")
     onChange?: (value: string) => void;
     onBlur?: () => void;
     disabled?: boolean;
-} & React.RefAttributes<import("react-native").TextInput>>;
+} & React.RefAttributes<TextInputElement>>;
 //# sourceMappingURL=DurationInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DurationInput.d.ts","sourceRoot":"","sources":["../../../src/ui/DurationInput/DurationInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAa,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAErE,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC;AAEhD,eAAO,MAAM,aAAa;;;;;0DAExB,CAAC"}
+{"version":3,"file":"DurationInput.d.ts","sourceRoot":"","sources":["../../../src/ui/DurationInput/DurationInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAgB,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAa,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAErE,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC;AAEhD,eAAO,MAAM,aAAa;;;;;0CAExB,CAAC"}

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

@@ -9,7 +9,7 @@ declare const _default: {
         onChange?: (value: string) => void;
         onBlur?: () => void;
         disabled?: boolean;
-    } & import("react").RefAttributes<import("react-native").TextInput>>;
+    } & import("react").RefAttributes<import("..").TextInputElement>>;
     styleFn: () => string;
 };
 export default _default;

package/dist/ui/DurationInput/DurationInput.stories.js

@@ -26,6 +26,6 @@ Le champ est nu : on le place dans un FormControl pour son libellé, son aide et
     component: DurationInput,
     styleFn: () => 'Aucun style appliqué',
 };
-export const Default = () => (_jsx(Box, { width: "100%", p: 8, children: _jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Dur\u00E9e", children: _jsx(DurationInput, {}) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Dur\u00E9e", children: _jsx(DurationInput, { value: "06:15" }) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Dur\u00E9e", hint: "Temps pass\u00E9 sur le terrain", children: _jsx(DurationInput, { value: "01:30" }) }) })] }) }));
-export const States = () => (_jsx(Box, { width: "100%", p: 8, children: _jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Erreur", error: "Heure invalide (minutes 00\u201359)", children: _jsx(DurationInput, { value: "25:70", error: "Heure invalide (minutes 00\u201359)" }) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Succ\u00E8s", success: "Enregistr\u00E9", children: _jsx(DurationInput, { value: "06:15", success: "Enregistr\u00E9" }) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "D\u00E9sactiv\u00E9", disabled: true, children: _jsx(DurationInput, { value: "06:15", disabled: true }) }) })] }) }));
+export const Default = () => (_jsx(Box, { width: "100%", p: "1W", children: _jsxs(Grid, { gap: "1W", children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Dur\u00E9e", children: _jsx(DurationInput, {}) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Dur\u00E9e", children: _jsx(DurationInput, { value: "06:15" }) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Dur\u00E9e", hint: "Temps pass\u00E9 sur le terrain", children: _jsx(DurationInput, { value: "01:30" }) }) })] }) }));
+export const States = () => (_jsx(Box, { width: "100%", p: "1W", children: _jsxs(Grid, { gap: "1W", children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Erreur", error: "Heure invalide (minutes 00\u201359)", children: _jsx(DurationInput, { value: "25:70", error: "Heure invalide (minutes 00\u201359)" }) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Succ\u00E8s", success: "Enregistr\u00E9", children: _jsx(DurationInput, { value: "06:15", success: "Enregistr\u00E9" }) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "D\u00E9sactiv\u00E9", disabled: true, children: _jsx(DurationInput, { value: "06:15", disabled: true }) }) })] }) }));
 export * as Sources from './DurationInput.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"DurationInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/DurationInput/DurationInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAqrB,CAAC;AAE1sB,eAAO,MAAM,MAAM,cAAwzB,CAAC;AAE50B,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"DurationInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/DurationInput/DurationInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA2rB,CAAC;AAEhtB,eAAO,MAAM,MAAM,cAA8zB,CAAC;AAEl1B,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,7 +1,7 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/DurationInput/DurationInput.stories.tsx
-export const Default = () => "export const Default = () => (\n  <Box width=\"100%\" p={8}>\n    <Grid gap={8}>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Durée\">\n          <DurationInput />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Durée\">\n          <DurationInput value=\"06:15\" />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Durée\" hint=\"Temps passé sur le terrain\">\n          <DurationInput value=\"01:30\" />\n        </FormControl>\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
-export const States = () => "export const States = () => (\n  <Box width=\"100%\" p={8}>\n    <Grid gap={8}>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Erreur\" error=\"Heure invalide (minutes 00–59)\">\n          <DurationInput value=\"25:70\" error=\"Heure invalide (minutes 00–59)\" />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Succès\" success=\"Enregistré\">\n          <DurationInput value=\"06:15\" success=\"Enregistré\" />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Désactivé\" disabled>\n          <DurationInput value=\"06:15\" disabled />\n        </FormControl>\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
+export const Default = () => "export const Default = () => (\n  <Box width=\"100%\" p=\"1W\">\n    <Grid gap=\"1W\">\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Durée\">\n          <DurationInput />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Durée\">\n          <DurationInput value=\"06:15\" />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Durée\" hint=\"Temps passé sur le terrain\">\n          <DurationInput value=\"01:30\" />\n        </FormControl>\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
+export const States = () => "export const States = () => (\n  <Box width=\"100%\" p=\"1W\">\n    <Grid gap=\"1W\">\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Erreur\" error=\"Heure invalide (minutes 00–59)\">\n          <DurationInput value=\"25:70\" error=\"Heure invalide (minutes 00–59)\" />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Succès\" success=\"Enregistré\">\n          <DurationInput value=\"06:15\" success=\"Enregistré\" />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Désactivé\" disabled>\n          <DurationInput value=\"06:15\" disabled />\n        </FormControl>\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
 export const storySources = {
     Default,
     States,

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

@@ -17,7 +17,6 @@ declare const _default: {
             paddingLeft: string | number;
             paddingRight: string | number;
             textAlign: "center";
-            height: "100%" | undefined;
             width: "100%";
         };
         contenu: {
@@ -25,7 +24,7 @@ declare const _default: {
             gap: string | number;
             alignItems: "center";
             textAlign: "center";
-            flex: number | undefined;
+            flexGrow: number | undefined;
             justifyContent: "center";
             width: "100%";
         };
@@ -33,8 +32,8 @@ declare const _default: {
             display: "flex";
             alignItems: "center";
             justifyContent: "center";
-            color: string;
-            backgroundColor: string;
+            color: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             borderRadius: import("@alveole/theme").Radius;
             padding: string | number;
         };
@@ -52,7 +51,7 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         description: {
             textAlign: "center";
@@ -61,7 +60,7 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         footer: {
             width: "100%" | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/EmptyState/EmptyState.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBASkB;AAElB,eAAO,MAAM,OAAO,mCAOnB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAQpB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAcvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mCAO9B,CAAC;AAEF,eAAO,MAAM,aAAa,mCAOzB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"EmptyState.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/EmptyState/EmptyState.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBASkB;AAElB,eAAO,MAAM,OAAO,mCAOnB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAQpB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAcvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mCAO9B,CAAC;AAEF,eAAO,MAAM,aAAa,mCAOzB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}

package/dist/ui/EmptyState/EmptyState.stories.js

@@ -24,6 +24,6 @@ export const WithCustomChildren = () => {
     return (_jsxs(EmptyState, { iconName: "File", description: 'Vous n’avez aucun item', children: [_jsx(Button, { title: 'Button', variant: 'primary', fullWidth: true }), _jsx(Button, { title: 'Secondary action', variant: 'tertiary' })] }));
 };
 export const WithFixHeight = () => {
-    return (_jsxs(EmptyState, { iconName: "File", description: 'Vous n’avez aucun item', style: { height: '600px' }, children: [_jsx(Button, { title: 'Button', variant: 'primary' }), _jsx(Button, { title: 'Secondary action', variant: 'tertiary' })] }));
+    return (_jsxs(EmptyState, { iconName: "File", description: 'Vous n’avez aucun item', style: { height: 600 }, children: [_jsx(Button, { title: 'Button', variant: 'primary' }), _jsx(Button, { title: 'Secondary action', variant: 'tertiary' })] }));
 };
 export * as Sources from './EmptyState.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/EmptyState/EmptyState.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAuO,CAAC;AAE5P,eAAO,MAAM,QAAQ,cAA6N,CAAC;AAEnP,eAAO,MAAM,WAAW,cAAoc,CAAC;AAE7d,eAAO,MAAM,kBAAkB,cAA2S,CAAC;AAE3U,eAAO,MAAM,aAAa,cAAwT,CAAC;AAEnV,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"EmptyState.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/EmptyState/EmptyState.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAuO,CAAC;AAE5P,eAAO,MAAM,QAAQ,cAA6N,CAAC;AAEnP,eAAO,MAAM,WAAW,cAAoc,CAAC;AAE7d,eAAO,MAAM,kBAAkB,cAA2S,CAAC;AAE3U,eAAO,MAAM,aAAa,cAAoT,CAAC;AAE/U,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -4,7 +4,7 @@ export const Default = () => "export const Default = () => {\n  return (\n    <E
 export const WithIcon = () => "export const WithIcon = () => {\n  return (\n    <EmptyState\n      iconName=\"ClipboardList\"\n      title=\"Aucune donnée\"\n      description=\"Ajoutez un élément pour remplir ce tableau.\"\n    />\n  );\n};";
 export const WithActions = () => "export const WithActions = () => {\n  return (\n    <EmptyState\n      iconName=\"FilePlus\"\n      title=\"Vous n’avez aucun document\"\n      description=\"Créez un premier document ou importez-en un depuis votre ordinateur.\"\n      actions={\n        <>\n          <Button title=\"Créer un document\" variant=\"primary\" />\n          <Button title=\"Importer un fichier\" variant=\"secondary\" />\n        </>\n      }\n    />\n  );\n};";
 export const WithCustomChildren = () => "export const WithCustomChildren = () => {\n  return (\n    <EmptyState iconName=\"File\" description={'Vous n’avez aucun item'}>\n      <Button title={'Button'} variant={'primary'} fullWidth />\n      <Button title={'Secondary action'} variant={'tertiary'} />\n    </EmptyState>\n  );\n};";
-export const WithFixHeight = () => "export const WithFixHeight = () => {\n  return (\n    <EmptyState iconName=\"File\" description={'Vous n’avez aucun item'} style={{ height: '600px' }}>\n      <Button title={'Button'} variant={'primary'} />\n      <Button title={'Secondary action'} variant={'tertiary'} />\n    </EmptyState>\n  );\n};";
+export const WithFixHeight = () => "export const WithFixHeight = () => {\n  return (\n    <EmptyState iconName=\"File\" description={'Vous n’avez aucun item'} style={{ height: 600 }}>\n      <Button title={'Button'} variant={'primary'} />\n      <Button title={'Secondary action'} variant={'tertiary'} />\n    </EmptyState>\n  );\n};";
 export const storySources = {
     Default,
     WithIcon,

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

@@ -10,7 +10,6 @@ export declare const useStyles: () => {
         paddingLeft: string | number;
         paddingRight: string | number;
         textAlign: "center";
-        height: "100%" | undefined;
         width: "100%";
     };
     contenu: {
@@ -18,7 +17,7 @@ export declare const useStyles: () => {
         gap: string | number;
         alignItems: "center";
         textAlign: "center";
-        flex: number | undefined;
+        flexGrow: number | undefined;
         justifyContent: "center";
         width: "100%";
     };
@@ -26,8 +25,8 @@ export declare const useStyles: () => {
         display: "flex";
         alignItems: "center";
         justifyContent: "center";
-        color: string;
-        backgroundColor: string;
+        color: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         borderRadius: import("@alveole/theme").Radius;
         padding: string | number;
     };
@@ -45,7 +44,7 @@ export declare const useStyles: () => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     description: {
         textAlign: "center";
@@ -54,7 +53,7 @@ export declare const useStyles: () => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     footer: {
         width: "100%" | undefined;

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

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

package/dist/ui/EmptyState/EmptyState.styles.js

@@ -13,7 +13,6 @@ export const useStyles = makeStyles(({ externalPadding, text, color, spacing, ra
             paddingLeft: paddingValue,
             paddingRight: paddingValue,
             textAlign: 'center',
-            height: isVariant('mobile') ? '100%' : undefined,
             width: '100%',
         },
         contenu: {
@@ -21,7 +20,9 @@ export const useStyles = makeStyles(({ externalPadding, text, color, spacing, ra
             gap: spacing('2W'),
             alignItems: 'center',
             textAlign: 'center',
-            flex: isVariant('mobile') ? 1 : undefined,
+            // Grandir seulement si le parent impose une hauteur : une base nulle ou une
+            // hauteur à 100 % déforme les exemples et les pages défilantes.
+            flexGrow: isVariant('mobile') ? 1 : undefined,
             justifyContent: 'center',
             width: '100%',
         },